:root {
    
    --background-primary:       #000000;    
    --background-charcoal:      #171717;    
    --background-third:         #1f2937;    
    --overlay-medium:           rgba(17, 17, 17, 0.5);   

    --text-primary:             #fafafa;    
    --text-secondary:           #a3a3a3;    
    --text-highlight:           #d4d4d4;    

    --border-primary:           #262626;    
    --border-input:             rgba(255, 255, 255, 0.35);   
    --status-destructive:       #ef4444;    
    --focus-ring-color:         #d4d4d4;    

    --font-primary:             -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                                "Helvetica Neue", Arial, sans-serif;
    --font-weight-light:        300;        
    --font-weight-regular:      400;        
    --font-size-title:          1.125rem;   
    --font-size-body:           0.875rem;   
    --font-size-nav-label:      0.625rem;   
    --letter-spacing-widest:    0.15em;     
    --letter-spacing-normal:    0;          
    --line-height-body:         1.5;
}

html, body {
    background-color:       var(--background-primary);
    color:                  var(--text-primary);
    font-family:            var(--font-primary);
    letter-spacing:         var(--letter-spacing-widest);
    margin:                 0;
    padding:                0;
    height:                 100%;
    text-transform:         capitalize;
    overflow:               hidden;
    overscroll-behavior:    none;
}

[hidden] {
    display:                none !important;
}

[role="button"]:focus-visible,
.nav-link:focus-visible {
    outline:                2px solid var(--focus-ring-color);
    outline-offset:         2px;
}

#app {
    position:               fixed;
    left:                   0;
    right:                  0;
    top:                    var(--app-top, 0px);
    height:                 var(--app-height, 100dvh);
    display:                flex;
    flex-direction:         column;
    padding-top:            env(safe-area-inset-top);
    padding-bottom:         var(--app-pad-bottom, env(safe-area-inset-bottom));
    box-sizing:             border-box;
    transition:             height 0.25s ease-out, padding-bottom 0.25s ease-out;
}

main {
    flex:                   1 1 auto;
    min-height:             0;
    overflow-y:             auto;
    display:                flex;
    flex-direction:         column;
    text-align:             center;
}

main > section {
    flex:                   1 1 auto;
    min-height:             0;
    display:                flex;
    flex-direction:         column;
}

body.veiled #app {
    visibility:             hidden;
}

.top-bar {
    display:                flex;
    align-items:            center;
    position:               relative;       
    flex:                   0 0 auto;
    height:                 4.5rem;
    padding:                0 1rem;
    background-color:       var(--background-primary);
}

.top-bar__center {
    position:               absolute;
    left:                   50%;
    transform:              translateX(-50%);
    font-size:              1.25rem;
    white-space:            nowrap;
}

.top-bar__left {
    display:                flex;
    align-items:            center;
    visibility:             hidden;
}

body[data-screen="messages"] .top-bar__left {
    visibility:             visible;
}

.top-bar__right {
    margin-left:            auto;
    display:                flex;
    align-items:            center;
    justify-content:        flex-end;
}

.end-chat-icon {
    display:                none;
    color:                  var(--status-destructive);
}

body[data-screen="messages"] .end-chat-icon {
    display:                block;
}

.icon {
    width:                  1.25rem;
    height:                 auto;
}

.handle-container {
    text-align:             center;
    margin-top:             4rem;
}

.handle-number {
    font-size:              6rem;
    font-weight:            200;
    color:                  var(--text-primary);
    animation:              glow 3s infinite ease-in-out;
    cursor:                 pointer;
}

.handle-subtitle {
    font-size:              0.875rem;
    color:                  var(--text-secondary);
    letter-spacing:         var(--letter-spacing-widest);
    margin-top:             0.5rem;
    cursor:                 pointer;
}

@keyframes glow {
    0%, 100% {
        text-shadow:        0 0 10px rgba(255, 255, 255, 0.3);
        transform:          scale(1);
    }
    50% {
        text-shadow:        0 0 20px rgba(255, 255, 255, 0.6);
        transform:          scale(1.02);
    }
}

.action-cards {
    margin-top:             4rem;
    padding:                0 1rem;
    display:                flex;
    flex-direction:         column;
    align-items:            center;
}

.action-card {
    position:               relative;       
    display:                flex;
    align-items:            center;
    justify-content:        space-between;
    background-color:       var(--overlay-medium);
    border-radius:          0.75rem;
    padding:                1rem;
    margin-bottom:          1rem;
    backdrop-filter:        blur(4px);
    cursor:                 pointer;
    transition:             transform 0.2s ease-in-out;
    letter-spacing:         var(--letter-spacing-normal);
    border:                 1px solid var(--border-primary);
    width:                  80%;
    max-width:              400px;
}

.card-icon, .chevron-icon {
    width:                  1.25rem;
    height:                 auto;
}

.card-label {
    flex-grow:              1;
    text-align:             left;
    margin-left:            1rem;
    font-size:              1rem;
    color:                  var(--text-primary);
}

.action-card.destructive,
.action-card.destructive .card-label {
    color:                  var(--status-destructive);
}

.bigButton {
    display:                flex;
    justify-content:        center;
    align-items:            center;
    padding:                1rem;
    width:                  100%;
    font-size:              var(--font-size-title);
    font-weight:            var(--font-weight-light);
    letter-spacing:         var(--letter-spacing-widest);
    color:                  var(--text-primary);
    text-transform:         uppercase;
}

.bigButton.destructive-label {
    color:                  var(--status-destructive);
}

.deleteButton {
    display:                flex;
    justify-content:        center;
    align-items:            center;
    padding:                1rem;
    width:                  80%;
    font-size:              var(--font-size-title);
    font-weight:            var(--font-weight-light);
    letter-spacing:         var(--letter-spacing-widest);
    color:                  var(--status-destructive);
    text-transform:         uppercase;
}

[data-action="delete"] .card-icon {
    width:                  2rem !important;
    height:                 auto !important;
    display:                block;
}

.text-button {
    color:                  var(--status-destructive);
    font-size:              var(--font-size-body);
    text-transform:         none;
    letter-spacing:         var(--letter-spacing-normal);
    padding:                0.75rem 1.5rem;
    margin:                 0;
    cursor:                 pointer;
}

.action-list {
    display:                flex;
    flex-direction:         column;
    align-items:            center;
    gap:                    1rem;
    padding:                1rem;
    overflow-y:             auto;
    padding-bottom:         7rem;
}

.action-list .action-card {
    padding:                0.5rem;
}

.action-list .action-card .left {
    display:                flex;
    align-items:            center;
    gap:                    1rem;
    flex-grow:              1;
}

.action-list .action-card .left div {
    display:                flex;
    flex-direction:         column;
    align-items:            flex-start;
    flex-grow:              1;
}

.action-list .action-card .left .card-icon {
    width:                  3rem;
    height:                 auto;
    border-radius:          50%;
}

.empty-state {
    color:                  var(--text-secondary);
    font-size:              var(--font-size-body);
    letter-spacing:         var(--letter-spacing-normal);
    text-transform:         none;
    margin-top:             3rem;
    padding:                0 2rem;
    line-height:            var(--line-height-body);
}

.row-remove {
    position:               absolute;
    right:                  1rem;
    top:                    50%;
    transform:              translateY(-50%);
    padding:                0.25rem 0.5rem;
    font-size:              1.5rem;
    line-height:            1;
    color:                  var(--status-destructive);
}

.row-dot {
    position:               absolute;
    right:                  1.25rem;
    top:                    50%;
    transform:              translateY(-50%);
    width:                  0.6rem;
    height:                 0.6rem;
    border-radius:          50%;
    background:             var(--status-destructive);
}

.messages-container {
    flex:                   1 1 auto;
    min-height:             0;
    overflow-y:             auto;
    display:                flex;
    flex-direction:         column;
    justify-content:        center;
    align-items:            center;
    padding:                1rem;
}

.message {
    display:                flex;
    justify-content:        left;
    align-items:            center;
    max-width:              fit-content;
    min-height:             3rem;
    height:                 auto;
    padding-left:           1rem;
    padding-right:          1rem;
    word-wrap:              break-word;
    background:             var(--background-charcoal);
    color:                  var(--text-highlight);
    letter-spacing:         var(--letter-spacing-normal);
    border-radius:          0.75rem;
    text-transform:         none;
    text-align:             justify;
}

.typing-dots {
    display:                flex;
    gap:                    0.35rem;
    margin-top:             0.75rem;
}

.typing-dots span {
    width:                  0.45rem;
    height:                 0.45rem;
    border-radius:          50%;
    background:             var(--status-destructive);
    animation:              typing-bounce 1.2s infinite ease-in-out;
}

.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0);       opacity: 0.4; }
    30%           { transform: translateY(-0.3rem); opacity: 1;   }
}

.message-footer {
    flex:                   0 0 auto;
    padding:                0.5rem 1rem;
    background-color:       var(--background-primary);
    display:                flex;
    flex-direction:         column;
    align-items:            center;
    gap:                    0.5rem;
}

.message-send-wrapper {
    display:                flex;
    align-items:            flex-end;       
    gap:                    0.5rem;
    width:                  100%;
}

.message-input-left {
    flex:                   1;
    position:               relative;       
    display:                flex;
}

#message-field {
    width:                  100%;
    box-sizing:             border-box;
    min-height:             2.75rem;
    padding:                0.65rem 1rem;
    border:                 none;
    border-radius:          1.375rem;
    outline:                none;
    resize:                 none;
    overflow-y:             auto;
    font-family:            inherit;
    font-size:              1rem;
    line-height:            1.4;
    letter-spacing:         var(--letter-spacing-normal);
    text-transform:         none;
    color:                  var(--text-primary);
    background:             var(--background-charcoal);
}

#message-field::placeholder {
    color:                  var(--text-secondary);
}

#char-counter {
    position:               absolute;
    right:                  0.75rem;
    top:                    -1.25rem;
    font-size:              0.75rem;
    letter-spacing:         var(--letter-spacing-normal);
    color:                  var(--text-secondary);
    pointer-events:         none;
    visibility:             hidden;
}

#char-counter.low {
    visibility:             visible;
}

.message-input-right {
    flex-shrink:            0;
    display:                flex;
    align-items:            center;
    justify-content:        center;
    width:                  2.75rem;
    height:                 2.75rem;
    border-radius:          50%;
    background:             var(--background-third);
    cursor:                 pointer;
}

.pair-hint {
    color:                  var(--text-secondary);
    font-size:              var(--font-size-body);
    letter-spacing:         var(--letter-spacing-normal);
    text-transform:         none;
    line-height:            var(--line-height-body);
    max-width:              20rem;
    margin:                 0 auto;
}

.code-words {
    font-size:              1.75rem;
    letter-spacing:         0.05em;
    text-transform:         none;
    color:                  var(--text-primary);
    margin:                 1.5rem 0 0.5rem;
    word-spacing:           0.5em;
}

.code-panel {
    width:                  100%;
    display:                flex;
    flex-direction:         column;
    align-items:            center;
    gap:                    0.5rem;
}

.code-input {
    width:                  80%;
    max-width:              400px;
    box-sizing:             content-box;
    padding:                0.75rem 1rem;
    border:                 1px solid var(--border-input);
    border-radius:          1.375rem;
    outline:                none;
    font-family:            inherit;
    font-size:              1rem;
    text-transform:         none;
    text-align:             center;
    color:                  var(--text-primary);
    background:             var(--background-charcoal);
}

.issuer-key {
    word-break:             break-all;
    font-family:            monospace;
    font-size:              0.75rem;
}

.footer-wrapper {
    flex:                   0 0 auto;
    background-color:       var(--background-primary);
}

body[data-screen="messages"] .footer-wrapper {
    display:                none;
}

.bottom-nav {
    height:                 3.75rem;
    background-color:       var(--background-primary);
    display:                flex;
    justify-content:        center;
    align-items:            center;
    text-transform:         capitalize;
}

.nav-icons {
    display:                flex;
    justify-content:        space-around;
    width:                  100%;
    max-width:              30rem;
}

.nav-link {
    flex:                   1;
    text-align:             center;
    padding:                0.5rem;
    transition:             transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
    text-decoration:        none;
    color:                  inherit;
    min-width:              2.75rem;
    min-height:             2.75rem;
}

.nav-link.active {
    background-color:       var(--background-charcoal);
}

.nav-icon {
    width:                  1.5rem;
    height:                 auto;
}

.nav-label {
    display:                block;
    font-size:              var(--font-size-nav-label);
    font-weight:            var(--font-weight-regular);
    margin-top:             0.25rem;
    color:                  var(--text-primary);
    letter-spacing:         normal;
}

.nav-link[data-page="chat"] {
    position:               relative;
}

.nav-link.has-unread::after {
    content:                "";
    position:               absolute;
    top:                    0.4rem;
    right:                  calc(50% - 1rem);
    width:                  0.5rem;
    height:                 0.5rem;
    border-radius:          50%;
    background:             var(--status-destructive);
}

body[data-role="loading"] main,
body[data-role="loading"] .footer-wrapper,
body[data-role="loading"] .top-bar__left,
body[data-role="loading"] .top-bar__right,
body[data-role="browser"] main,
body[data-role="browser"] .footer-wrapper,
body[data-role="browser"] .top-bar__left,
body[data-role="browser"] .top-bar__right {
    visibility:             hidden;
}

body[data-role="recover"] .footer-wrapper,
body[data-role="recover"] .top-bar__right,
body[data-role="recover"] [data-action="delete"] {
    display:                none;
}

body[data-role="new"] #card-cancel,
body[data-role="new"] .footer-wrapper,
body[data-role="new"] .top-bar__right,
body[data-role="new"] [data-action="show-code"],
body[data-role="new"] [data-action="enter-code"] {
    display:                none;
}

body[data-role="guest"] [data-page="contacts"],
body[data-role="guest"] #card-show {
    display:                none !important;
}

@media (prefers-reduced-motion: reduce) {
    .handle-number,
    .typing-dots span {
        animation:          none;
    }
}

@media (max-width: 25rem) {
    .top-bar {
        height:             3.125rem;
        padding:            0 0.75rem;
    }

    .handle-container {
        margin-top:         1rem;
    }

    .action-cards {
        margin-top:         3rem;
        margin-bottom:      3rem;
    }

    .action-card {
        width:              90%;
    }

    .code-input {
        width:              calc(90% - 1rem);
    }

    .nav-icon {
        width:              1.25rem;
    }

    .icon {
        width:              1rem;
    }
}

#platform-note {
    display:                none;
    margin-top:             2rem;
    text-align:             center;
}

body[data-role="unsupported"] #platform-note {
    display:                block;
}

body[data-role="unsupported"] main,
body[data-role="unsupported"] .footer-wrapper,
body[data-role="unsupported"] .top-bar__left,
body[data-role="unsupported"] .top-bar__right {
    visibility:             hidden;
}