*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

:root{
    --t-bg:#0f172a;
    --t-top:rgba(15,23,42,.95);
    --t-bottom:rgba(15,23,42,.95);
    --t-surface:#1e293b;
    --t-surface-2:#334155;
    --t-left:#1e293b;
    --t-right:#4f46e5;
    --t-text:#ffffff;
    --t-muted:#9ca3af;
    --t-border:rgba(255,255,255,.10);
    --t-input:#1e293b;
    --t-accent:#4f46e5;
    --t-accent-text:#ffffff;
    --t-accent-soft:rgba(79,70,229,.14);
    --t-danger:#dc4c4c;
    --t-danger-text:#ffffff;
    --t-danger-soft:rgba(220,76,76,.12);
}

html,
body{
    width:100%;
  	height:100%;
    overflow:hidden;
    background:var(--t-bg);
}

body{
    height:100%;
}

.background{
    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:-1;
    background:var(--t-bg);
}

.blob{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    opacity:.35;
}

.blob1{
    width:220px;
    height:220px;
    background:#5b5cff;
    top:-70px;
    left:-80px;
}

.blob2{
    width:220px;
    height:220px;
    background:#00c6ff;
    bottom:-90px;
    right:-70px;
}

.chat{
    position:fixed;
    inset:0;
    width:100%;
    max-width:100vw;
    overflow:hidden;
    height:var(--vh,100vh);
    min-height:0;
    display:grid;
    grid-template-rows:72px minmax(0,1fr) auto auto;
}

.topbar{
    width:100%;
    max-width:100%;
    overflow:hidden;
  	position:sticky;
    top:0;
    z-index:100;
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    background:var(--t-top);
    backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.avatar{
    width:46px;
    height:46px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--t-accent);
    color:var(--t-text);
    font-size:22px;
}

.info{
    flex:1;
}

.info h2{
    color:var(--t-text);
    font-size:18px;
}

#status{
    color:#9bd6a8;
    font-size:13px;
}
#status.status-glow-green,
#status.status-glow-red{
    font-size:16px;
    line-height:1;
    font-weight:700;
}

#status.status-glow-green{
    color:#22c55e;
    text-shadow:
        0 0 4px rgba(34,197,94,.95),
        0 0 9px rgba(34,197,94,.75),
        0 0 16px rgba(34,197,94,.55);
    animation: statusDotPulseGreen 1.8s ease-in-out infinite;
}

#status.status-glow-red{
    color:#ef4444;
    text-shadow:
        0 0 4px rgba(239,68,68,.95),
        0 0 9px rgba(239,68,68,.75),
        0 0 16px rgba(239,68,68,.55);
    animation: statusDotPulseRed 1.8s ease-in-out infinite;
}

@keyframes statusDotPulseGreen{
    0%,100%{filter:brightness(1);}
    50%{filter:brightness(1.35);}
}

@keyframes statusDotPulseRed{
    0%,100%{filter:brightness(1);}
    50%{filter:brightness(1.35);}
}

.icon-setting-btn:disabled{
    opacity:.42 !important;
    cursor:not-allowed !important;
    filter:grayscale(.35);
}

.icon-setting-btn:disabled:hover{
    background:var(--t-surface-2) !important;
    border-color:var(--t-border) !important;
}

#messages{
    overflow-y:auto;
    overflow-x:hidden;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:12px;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
}

#messages::-webkit-scrollbar{
    display:none;
}

.message{
    max-width:82%;
    padding:12px 15px;
    border-radius:20px;
    animation:pop .2s ease;
    word-break:break-word;
}

.left{
    align-self:flex-start;
    background:var(--t-surface);
    color:var(--t-accent-text);
    border-bottom-left-radius:6px;
}

.right{
    align-self:flex-end;
    background:var(--t-accent);
    color:var(--t-accent-text);
    border-bottom-right-radius:6px;
}

.time{
    display:block;
    margin-top:6px;
    font-size:11px;
    opacity:.7;
}

.typing{
    min-height:22px;
    padding:0 18px 8px;
    color:#bbb;
    font-size:13px;
}

.composer{
    width:100%;
    max-width:100%;
    overflow:visible;
    position:relative;
    z-index:100;
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px;
    padding-bottom:max(12px,env(safe-area-inset-bottom));
    background:var(--t-top);
    backdrop-filter:blur(20px);
    border-top:1px solid rgba(255,255,255,.08);
}

.composer input{
    flex:1 1 auto;
  	min-width:0;
  	width:0;
    height:48px;
    border:none;
    outline:none;
    border-radius:24px;
    padding:0 18px;
    background:var(--t-surface);
    color:var(--t-text);
    font-size:16px;
}

.composer input::placeholder{
    color:var(--t-muted);
}

.composer button{
    width:48px;
    height:48px;
  	flex-shrink:0;
    border:none;
    border-radius:50%;
    background:var(--t-accent);
    color:var(--t-accent-text);
    font-size:20px;
}

.composer button:active{
    transform:scale(.92);
}

@keyframes pop{
    from{
        opacity:0;
        transform:translateY(8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Emoji */
.emoji-container{
    position:relative;
    display:flex;
    align-items:center;
}

#emojiBtn{
    width:48px;
    height:48px;
    border:none;
    border-radius:50%;
    background:var(--t-surface);
    color:var(--t-text);
    font-size:22px;
    cursor:pointer;
    transition:.2s;
}

#emojiBtn:hover{
    transform:scale(1.05);
}

#emojiBtn:active{
    transform:scale(.95);
}

.emoji-picker{
    position:absolute;
    bottom:60px;
    left:0;
    width:min(352px, calc(100vw - 24px));
    max-width:calc(100vw - 24px);
    max-height:min(62vh, 430px);
    overflow:hidden;
    display:none;
    z-index:9999;
}

.emoji-picker.show{
    display:block;
}

/* ===== Reply ===== */
.reply-box{
    display:none;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    padding:8px 12px;
    min-width:0;
    max-height:92px;
    overflow:hidden;
    background:#172554;
    border-left:4px solid #4f46e5;
    color:var(--t-text);
}

.reply-box.show{
    display:flex;
}

.reply-info{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
}

.reply-info strong{
    display:block;
    color:#8ab4ff;
    font-size:13px;
    margin-bottom:2px;
}

.reply-info span{
    display:block;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
    max-height:42px;
    overflow:auto;
    font-size:14px;
    line-height:1.3;
    opacity:.9;
}

#cancelReply{
    border:none;
    background:transparent;
    color:var(--t-text);
    font-size:20px;
    cursor:pointer;
    padding:4px 8px;
}

#cancelReply:hover{
    opacity:.7;
}

/* Reply inside message */
.reply-preview{
    margin-bottom:8px;
    padding:8px 10px;
    border-left:3px solid #ffffff88;
    background:rgba(255,255,255,.08);
    border-radius:8px;
}

.reply-preview .reply-name{
    display:block;
    font-size:12px;
    font-weight:600;
    margin-bottom:2px;
    opacity:.95;
}

.reply-preview .reply-message{
    display:block;
    font-size:13px;
    opacity:.8;
}

.user-names{
    margin-left:auto;
    color:var(--t-text);
    font-size:clamp(10px, 1.4vw, 14px);
    font-weight:600;
    width:auto;
    max-width:none;
    min-width:0;
    flex:1 1 auto;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:right;
}

/* Keep the header usable on narrow phones. */
@media (max-width: 600px){
    .topbar{
        gap:8px;
        padding:10px 10px;
    }

    .avatar{
        width:40px;
        height:40px;
        flex:0 0 40px;
        font-size:19px;
    }

    .info{
        min-width:0;
    }

    .info h2{
        font-size:clamp(14px, 4vw, 18px);
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    #status{
        font-size:clamp(10px, 3vw, 13px);
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .user-names{
        max-width:34vw;
        flex:0 1 34vw;
    }

    .settings-btn{
        flex:0 0 38px;
    }
}

@media (max-width: 380px){
    .topbar{
        gap:6px;
        padding-left:8px;
        padding-right:8px;
    }

    .avatar{
        width:36px;
        height:36px;
        flex-basis:36px;
        font-size:17px;
    }

    .user-names{
        max-width:31vw;
        flex-basis:31vw;
        font-size:10px;
    }

    .settings-btn{
        width:34px;
        height:34px;
        flex-basis:34px;
        font-size:16px;
    }
}

/* Privacy: reveal plaintext only while the message is held */
.message {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

.message-text {
    word-break: break-word;
}

/* Settings */
.settings-btn {
    width:38px;
    height:38px;
    border:none;
    border-radius:50%;
    background:var(--t-surface);
    color:var(--t-text);
    font-size:18px;
    cursor:pointer;
    margin-left:10px;
}

.settings-btn:hover {
    background:#334155;
}

.settings-panel {
    display:none;
    position:fixed;
    right:12px;
    top:58px;
    width:220px;
    background:#fff;
    border:1px solid #ccc;
    border-radius:10px;
    box-shadow:0 3px 14px rgba(0,0,0,.25);
    padding:10px;
    z-index:1000;
}

.settings-panel.show {
    display:block;
}

.settings-title {
    font-weight:bold;
    padding:4px 4px 9px;
    border-bottom:1px solid #ddd;
    margin-bottom:4px;
}

.setting-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:9px 4px;
}

.setting-row button {
    min-width:48px;
    padding:5px 8px;
    border:1px solid #aaa;
    border-radius:5px;
    background:#f5f5f5;
    cursor:pointer;
}


/* =========================
   TinyCapp Color Themes
   Every interactive control uses the same theme palette.
   This includes icons, circular buttons, inputs, settings controls,
   message bubbles, header/footer and room controls.
   ========================= */
/* Light palettes */
[data-theme-mode="light"][data-theme="default"]{
    --t-bg:#f5f7fb; --t-top:#ffffff; --t-bottom:#ffffff;
    --t-surface:#ffffff; --t-surface-2:#eef1f7; --t-left:#eef1f7; --t-right:#dfe5ff;
    --t-text:#182033; --t-muted:#667085; --t-border:#d9deea; --t-input:#fbfcfe;
    --t-accent:#4f46e5; --t-accent-text:#ffffff; --t-accent-soft:rgba(79,70,229,.12);
    --t-danger:#c43d3d; --t-danger-text:#fff; --t-danger-soft:rgba(196,61,61,.12);
}
[data-theme-mode="light"][data-theme="blue"]{
    --t-bg:#eef6ff; --t-top:#d7eaff; --t-bottom:#d7eaff;
    --t-surface:#ffffff; --t-surface-2:#e4f1ff; --t-left:#e4f1ff; --t-right:#c5e1ff;
    --t-text:#10243d; --t-muted:#526b86; --t-border:#a7c6e5; --t-input:#f8fbff;
    --t-accent:#2468a8; --t-accent-text:#ffffff; --t-accent-soft:rgba(36,104,168,.12);
    --t-danger:#b94444; --t-danger-text:#fff; --t-danger-soft:rgba(185,68,68,.12);
}
[data-theme-mode="light"][data-theme="green"]{
    --t-bg:#f0f8f2; --t-top:#d9efdf; --t-bottom:#d9efdf;
    --t-surface:#ffffff; --t-surface-2:#e7f4ea; --t-left:#e7f4ea; --t-right:#c5e5cd;
    --t-text:#16351f; --t-muted:#58715f; --t-border:#a9cdb1; --t-input:#f9fcfa;
    --t-accent:#2f7d46; --t-accent-text:#ffffff; --t-accent-soft:rgba(47,125,70,.12);
    --t-danger:#b94444; --t-danger-text:#fff; --t-danger-soft:rgba(185,68,68,.12);
}
[data-theme-mode="light"][data-theme="purple"]{
    --t-bg:#f7f2fa; --t-top:#eadff4; --t-bottom:#eadff4;
    --t-surface:#ffffff; --t-surface-2:#f0e8f6; --t-left:#f0e8f6; --t-right:#ddc7ec;
    --t-text:#2d1d3d; --t-muted:#715d7e; --t-border:#c6afd8; --t-input:#fcf9fd;
    --t-accent:#7040a0; --t-accent-text:#ffffff; --t-accent-soft:rgba(112,64,160,.12);
    --t-danger:#b94444; --t-danger-text:#fff; --t-danger-soft:rgba(185,68,68,.12);
}
[data-theme-mode="light"][data-theme="red"]{
    --t-bg:#fff5f5; --t-top:#f4dddd; --t-bottom:#f4dddd;
    --t-surface:#ffffff; --t-surface-2:#faeded; --t-left:#faeded; --t-right:#f0caca;
    --t-text:#3d1717; --t-muted:#805b5b; --t-border:#d9aaaa; --t-input:#fffafa;
    --t-accent:#a63b3b; --t-accent-text:#ffffff; --t-accent-soft:rgba(166,59,59,.12);
    --t-danger:#a63b3b; --t-danger-text:#fff; --t-danger-soft:rgba(166,59,59,.12);
}

/* Gray theme — soft graphite neutral palette */
[data-theme-mode="light"][data-theme="gray"]{
    --t-bg:#e7eaee;
    --t-top:rgba(241,243,246,.94);
    --t-bottom:rgba(235,238,242,.96);
    --t-surface:#f1f3f6;
    --t-surface-2:#dfe3e8;
    --t-left:#e3e6ea;
    --t-right:#cfd4da;
    --t-text:#20252b;
    --t-muted:#6d747c;
    --t-border:#c7cdd3;
    --t-input:#f7f8fa;
    --t-accent:#66707a;
    --t-accent-text:#ffffff;
    --t-accent-soft:rgba(102,112,122,.13);
    --t-danger:#b54a4a;
    --t-danger-text:#ffffff;
    --t-danger-soft:rgba(181,74,74,.12);
}

[data-theme-mode="dark"][data-theme="gray"]{
    --t-bg:#15191d;
    --t-top:rgba(28,33,38,.94);
    --t-bottom:rgba(25,30,35,.97);
    --t-surface:#22282e;
    --t-surface-2:#30373e;
    --t-left:#292f35;
    --t-right:#444b53;
    --t-text:#f1f3f5;
    --t-muted:#a7adb4;
    --t-border:rgba(220,226,232,.14);
    --t-input:#1a1f24;
    --t-accent:#aeb5bd;
    --t-accent-text:#171b1f;
    --t-accent-soft:rgba(174,181,189,.14);
    --t-danger:#df7777;
    --t-danger-text:#ffffff;
    --t-danger-soft:rgba(223,119,119,.14);
}

/* Soft neutral atmosphere for the default Gray theme. */
[data-theme="gray"] .background{
    background:
        radial-gradient(70% 55% at 12% 8%, rgba(255,255,255,.32), transparent 72%),
        radial-gradient(65% 60% at 88% 92%, rgba(120,130,140,.12), transparent 72%),
        var(--t-bg);
}

[data-theme-mode="dark"][data-theme="gray"] .background{
    background:
        radial-gradient(65% 55% at 10% 8%, rgba(130,145,158,.09), transparent 72%),
        radial-gradient(65% 60% at 90% 92%, rgba(0,0,0,.20), transparent 72%),
        var(--t-bg);
}

[data-theme="gray"] .blob{
    opacity:.12;
    filter:blur(110px);
}
[data-theme="gray"] .blob1{
    background:#cbd1d7;
}
[data-theme="gray"] .blob2{
    background:#858d96;
}

/* Dark palettes */
[data-theme-mode="dark"][data-theme="default"]{
    --t-bg:#0f172a; --t-top:rgba(15,23,42,.95); --t-bottom:rgba(15,23,42,.95);
    --t-surface:#1e293b; --t-surface-2:#334155; --t-left:#1e293b; --t-right:#4f46e5;
    --t-text:#ffffff; --t-muted:#9ca3af; --t-border:rgba(255,255,255,.12); --t-input:#1e293b;
    --t-accent:#4f46e5; --t-accent-text:#ffffff; --t-accent-soft:rgba(79,70,229,.16);
    --t-danger:#dc4c4c; --t-danger-text:#ffffff; --t-danger-soft:rgba(220,76,76,.14);
}
[data-theme-mode="dark"][data-theme="blue"]{
    --t-bg:#0b1626; --t-top:#102238; --t-bottom:#102238;
    --t-surface:#172b40; --t-surface-2:#23415e; --t-left:#172b40; --t-right:#1f5f91;
    --t-text:#edf6ff; --t-muted:#9bb5cf; --t-border:#34536f; --t-input:#14263a;
    --t-accent:#4d9de0; --t-accent-text:#071522; --t-accent-soft:rgba(77,157,224,.18);
    --t-danger:#e06b6b; --t-danger-text:#fff; --t-danger-soft:rgba(224,107,107,.14);
}
[data-theme-mode="dark"][data-theme="green"]{
    --t-bg:#0d1b12; --t-top:#13251a; --t-bottom:#13251a;
    --t-surface:#193221; --t-surface-2:#275238; --t-left:#193221; --t-right:#28613a;
    --t-text:#eefaf0; --t-muted:#a7c3ad; --t-border:#3b6146; --t-input:#15291b;
    --t-accent:#5bbd75; --t-accent-text:#07140b; --t-accent-soft:rgba(91,189,117,.18);
    --t-danger:#e06b6b; --t-danger-text:#fff; --t-danger-soft:rgba(224,107,107,.14);
}
[data-theme-mode="dark"][data-theme="purple"]{
    --t-bg:#171022; --t-top:#21162d; --t-bottom:#21162d;
    --t-surface:#2c1f3b; --t-surface-2:#44305a; --t-left:#2c1f3b; --t-right:#69429a;
    --t-text:#faf3ff; --t-muted:#c0abc9; --t-border:#5a4270; --t-input:#261a34;
    --t-accent:#a56bd4; --t-accent-text:#160d20; --t-accent-soft:rgba(165,107,212,.18);
    --t-danger:#e06b6b; --t-danger-text:#fff; --t-danger-soft:rgba(224,107,107,.14);
}
[data-theme-mode="dark"][data-theme="red"]{
    --t-bg:#220f10; --t-top:#321719; --t-bottom:#321719;
    --t-surface:#422022; --t-surface-2:#613034; --t-left:#422022; --t-right:#79383c;
    --t-text:#fff2f2; --t-muted:#d0a5a7; --t-border:#714347; --t-input:#35191b;
    --t-accent:#df6666; --t-accent-text:#250b0b; --t-accent-soft:rgba(223,102,102,.18);
    --t-danger:#ef7777; --t-danger-text:#250b0b; --t-danger-soft:rgba(239,119,119,.16);
}

html,body{
    background:var(--t-bg);
    color:var(--t-text);
}

.background{
    background:var(--t-bg);
}

.topbar,
.composer{
    background:var(--t-top);
    color:var(--t-text);
    border-color:var(--t-border);
}

.topbar *{
    color:var(--t-text);
}

.avatar{
    background:var(--t-accent);
    color:var(--t-accent-text);
    border:1px solid var(--t-border);
}

#status{
    color:var(--t-muted);
}

.user-names{
    color:var(--t-text);
}

.settings-btn,
#emojiBtn,
#imageBtn,
#sendBtn{
    background:var(--t-surface);
    color:var(--t-text);
    border:1px solid var(--t-border);
}

#sendBtn{
    background:var(--t-accent);
    color:var(--t-accent-text);
    border-color:var(--t-accent);
}

.settings-btn:hover,
#emojiBtn:hover,
#imageBtn:hover{
    background:var(--t-surface-2);
}

.composer input,
.room-code-input,
.room-name-input,
.settings-panel input,
.settings-panel select,
.theme-section select{
    background:var(--t-input);
    color:var(--t-text);
    border-color:var(--t-border);
}

.composer input::placeholder{
    color:var(--t-muted);
}

.message.left{
    background:var(--t-left);
    color:var(--t-text);
}

.message.right{
    background:var(--t-right);
    color:var(--t-text);
}

.time,
.typing{
    color:var(--t-muted);
}

.settings-panel{
    background:var(--t-surface);
    color:var(--t-text);
    border-color:var(--t-border);
}

.settings-title{
    color:var(--t-text);
    border-color:var(--t-border);
}

.setting-row button,
.theme-section select{
    background:var(--t-surface-2);
    color:var(--t-text);
    border:1px solid var(--t-border);
}

.setting-row button:hover,
.theme-section select:hover{
    background:var(--t-accent-soft);
}

.theme-section{
    border-color:var(--t-border);
}

.leave-room-btn{
    background:var(--t-danger-soft);
    color:var(--t-danger);
    border-color:var(--t-danger);
}

/* Room-entry controls use the same palette too. */
.room-gate{
    background:color-mix(in srgb, var(--t-bg) 94%, transparent);
}

.room-card{
    background:var(--t-top);
    color:var(--t-text);
    border-color:var(--t-border);
}

.room-card h1,
.room-code-big{
    color:var(--t-text);
}

.room-card p,
.room-info-label,
.room-info-note,
.room-divider{
    color:var(--t-muted);
}

.room-primary{
    background:var(--t-accent);
    color:var(--t-accent-text);
}

.room-secondary,
.room-actions button{
    background:var(--t-surface);
    color:var(--t-text);
    border:1px solid var(--t-border);
}

.room-divider::before,
.room-divider::after{
    background:var(--t-border);
}

.room-error{
    color:var(--t-danger);
}

/* Native emoji picker remains visually independent, but its trigger follows theme. */


/* ===== Public landing page ===== */
.landing-page{
    width:min(1080px, 100%);
    margin:0 auto;
    padding:28px 18px 56px;
    color:var(--t-text);
}

.landing-hero{
    text-align:center;
    padding:8px 10px 26px;
}

.landing-brand{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:20px;
    font-weight:800;
    letter-spacing:.2px;
    margin-bottom:18px;
}

.landing-logo{
    width:48px;
    height:48px;
    display:block;
    object-fit:contain;
    flex:0 0 auto;
}

.landing-wordmark{
    width:160px;
    height:auto;
    max-width:42vw;
    display:block;
    object-fit:contain;
}

.landing-badge{
    width:max-content;
    max-width:100%;
    margin:0 auto 14px;
    padding:7px 11px;
    border:1px solid var(--t-border);
    border-radius:999px;
    background:var(--t-accent-soft);
    color:var(--t-text);
    font-size:10px;
    font-weight:800;
    letter-spacing:1.1px;
}

.landing-hero h1{
    margin:0 auto;
    max-width:760px;
    font-size:clamp(36px,6vw,68px);
    line-height:1.02;
    letter-spacing:-2.5px;
    font-weight:850;
}

.landing-hero h1 span{
    opacity:.62;
}

.landing-lead{
    max-width:650px;
    margin:18px auto 0;
    color:var(--t-muted);
    font-size:16px;
    line-height:1.6;
}

.landing-start{
    width:min(440px,100%);
    margin:0 auto 42px;
    padding:22px;
    border:1px solid var(--t-border);
    border-radius:22px;
    background:color-mix(in srgb,var(--t-surface) 82%,transparent);
    box-shadow:0 20px 60px rgba(0,0,0,.18);
}

.landing-start-title{
    margin-bottom:15px;
    text-align:center;
    font-size:15px;
    font-weight:800;
}

.landing-start .room-primary,
.landing-start .room-secondary{
    min-height:48px;
}

.landing-section{
    margin:0 auto 46px;
}

.landing-section-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
}

.landing-section-heading > span{
    font-size:23px;
    font-weight:850;
    letter-spacing:-.5px;
}

.landing-section-heading small{
    max-width:540px;
    color:var(--t-muted);
    font-size:13px;
    line-height:1.5;
    text-align:right;
}

.landing-features{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.landing-feature{
    min-height:190px;
    padding:20px;
    border:1px solid var(--t-border);
    border-radius:18px;
    background:color-mix(in srgb,var(--t-surface) 76%,transparent);
}

.feature-icon{
    font-size:25px;
    margin-bottom:15px;
}

.landing-feature h2,
.landing-step h2{
    margin-bottom:8px;
    font-size:16px;
    font-weight:800;
}

.landing-feature p,
.landing-step p,
.landing-security-grid p{
    color:var(--t-muted);
    font-size:13px;
    line-height:1.55;
}

.landing-security{
    padding:24px;
    border:1px solid var(--t-border);
    border-radius:22px;
    background:color-mix(in srgb,var(--t-surface) 55%,transparent);
}

.landing-security-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1px;
    overflow:hidden;
    border:1px solid var(--t-border);
    border-radius:15px;
    background:var(--t-border);
}

.landing-security-grid > div{
    padding:18px;
    background:var(--t-surface);
}

.landing-security-grid strong{
    display:block;
    margin-bottom:7px;
    font-size:14px;
}

.landing-note{
    margin-top:14px;
    padding:13px 15px;
    border-left:3px solid var(--t-accent);
    background:var(--t-accent-soft);
    color:var(--t-muted);
    font-size:12px;
    line-height:1.55;
}

.landing-note strong{
    color:var(--t-text);
}

.landing-steps{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.landing-step{
    padding:20px;
    border-top:1px solid var(--t-border);
}

.landing-step b{
    display:block;
    margin-bottom:25px;
    color:var(--t-accent);
    font-size:12px;
    letter-spacing:1px;
}

.landing-faq{
    width:min(820px,100%);
    margin:0 auto 40px;
    border-top:1px solid var(--t-border);
}

.landing-faq details{
    border-bottom:1px solid var(--t-border);
}

.landing-faq summary{
    padding:17px 4px;
    cursor:pointer;
    list-style:none;
    font-size:14px;
    font-weight:750;
}

.landing-faq summary::-webkit-details-marker{
    display:none;
}

.landing-faq summary::after{
    content:"+";
    float:right;
    color:var(--t-muted);
    font-size:18px;
}

.landing-faq details[open] summary::after{
    content:"−";
}

.landing-faq p{
    padding:0 30px 17px 4px;
    color:var(--t-muted);
    font-size:13px;
    line-height:1.6;
}

.landing-footer{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    color:var(--t-muted);
    font-size:12px;
}

.landing-footer strong{
    color:var(--t-text);
}

@media (max-width: 760px){
    .landing-page{
        padding:20px 13px 42px;
    }

    .landing-hero h1{
        font-size:clamp(36px,12vw,54px);
        letter-spacing:-1.8px;
    }

    .landing-features,
    .landing-steps{
        grid-template-columns:1fr;
    }

    .landing-feature{
        min-height:0;
    }

    .landing-security-grid{
        grid-template-columns:1fr;
    }

    .landing-section-heading{
        display:block;
    }

    .landing-section-heading small{
        display:block;
        margin-top:7px;
        text-align:left;
    }

    .landing-security{
        padding:18px;
    }
}

@media (max-width: 480px){
    .landing-page{
        padding-left:10px;
        padding-right:10px;
    }

    .landing-hero{
        padding-top:3px;
    }

    .landing-hero h1{
        font-size:38px;
    }

    .landing-lead{
        font-size:14px;
    }

    .landing-start{
        padding:17px;
        border-radius:18px;
        margin-bottom:34px;
    }

    .landing-section-heading > span{
        font-size:20px;
    }

    .landing-footer{
        flex-direction:column;
    }
}

/* ===== Small-screen reply + emoji usability ===== */
@media (max-width: 600px) {
    .message {
        max-width: 92%;
    }

    #messages {
        padding: 10px;
        gap: 9px;
    }

    .reply-box {
        padding: 7px 10px;
        gap: 8px;
        max-height: 86px;
    }

    .reply-info strong {
        font-size: 12px;
    }

    .reply-info span {
        font-size: 13px;
        max-height: 40px;
    }

    #cancelReply {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        padding: 2px;
    }

    .emoji-picker {
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(58px + env(safe-area-inset-bottom));
        width: min(352px, calc(100vw - 16px));
        max-width: calc(100vw - 16px);
        max-height: min(58dvh, 400px);
    }

    .composer {
        gap: 7px;
        padding: 8px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    .composer input,
    .composer button,
    #emojiBtn {
        height: 46px;
    }

    #emojiBtn,
    .composer button {
        width: 46px;
        flex: 0 0 46px;
    }
}

@media (max-width: 380px) {
    .reply-box {
        max-height: 78px;
    }

    .reply-info span {
        max-height: 36px;
    }

    .emoji-picker {
        width: calc(100vw - 10px);
        max-width: calc(100vw - 10px);
        max-height: 55dvh;
    }

    .composer {
        gap: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .composer input {
        padding-left: 13px;
        padding-right: 13px;
    }
}


/* Full-screen image preview */
.image-preview{
    display:none;
    position:fixed;
    inset:0;
    z-index:99999;
    background:rgba(0,0,0,.94);
    align-items:center;
    justify-content:center;
    padding:20px;
    box-sizing:border-box;
    touch-action:manipulation;
}

.image-preview.show{
    display:flex;
}

.image-preview img{
    display:block;
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    user-select:none;
    -webkit-user-select:none;
}

.image-preview-close{
    position:absolute;
    top:max(12px, env(safe-area-inset-top));
    right:max(12px, env(safe-area-inset-right));
    z-index:2;
    width:44px;
    height:44px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.16);
    color:var(--t-text);
    font-size:32px;
    line-height:44px;
    padding:0;
    cursor:pointer;
}

.image-preview{
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}

.image-preview img{
    max-width:100%;
    max-height:calc(100vh - 40px);
    width:auto;
    height:auto;
    object-fit:contain;
}


.room-gate{
    position:fixed;
    inset:0;
    z-index:10000;
    display:block;
    overflow-y:auto;
    overflow-x:hidden;
    padding:20px;
    background:rgba(5,10,20,.96);
    backdrop-filter:blur(18px);
}

.room-gate.hidden{
    display:none;
}

.room-card{
    width:min(92vw,390px);
    padding:30px 24px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:24px;
    background:rgba(17,24,39,.94);
    box-shadow:0 20px 70px rgba(0,0,0,.45);
    text-align:center;
}

.room-mark{
    font-size:38px;
    margin-bottom:4px;
}

.avatar img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
}


.room-card h1{
    color:var(--t-text);
    font-size:25px;
    margin-bottom:4px;
}

.room-card p{
    color:rgba(255,255,255,.55);
    margin-bottom:24px;
}

.room-primary,
.room-secondary{
    width:100%;
    border:0;
    border-radius:13px;
    padding:13px 16px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
}

.room-primary{
    background:#fff;
    color:#111827;
}

.room-secondary{
    background:rgba(255,255,255,.1);
    color:var(--t-text);
}

.room-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:18px 0;
    color:rgba(255,255,255,.35);
    font-size:12px;
}

.room-divider::before,
.room-divider::after{
    content:"";
    height:1px;
    flex:1;
    background:rgba(255,255,255,.1);
}

.room-code-input{
    width:100%;
    margin-bottom:10px;
    padding:14px;
    border-radius:13px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    color:var(--t-text);
    text-align:center;
    letter-spacing:4px;
    font-weight:800;
    font-size:18px;
    outline:none;
}

.room-error{
    min-height:20px;
    margin-top:12px;
    color:#ff8b8b;
    font-size:13px;
}

.room-code-display{
    font-size:11px;
    color:rgba(255,255,255,.5);
}


.room-info-panel,
.room-name-panel {
    margin-top: 22px;
}

.room-info-panel.hidden,
.room-name-panel.hidden {
    display:none;
}

.room-info-label {
    color:rgba(255,255,255,.48);
    font-size:11px;
    letter-spacing:2px;
    font-weight:700;
    margin-bottom:8px;
}

.room-code-big {
    color:var(--t-text);
    font-size:30px;
    letter-spacing:7px;
    font-weight:900;
    margin:4px 0 14px;
}

.room-actions {
    display:flex;
    gap:10px;
}

.room-actions button {
    flex:1;
    border:0;
    border-radius:11px;
    padding:11px;
    background:rgba(255,255,255,.1);
    color:var(--t-text);
    font-weight:700;
    cursor:pointer;
}

.room-info-note {
    color:rgba(255,255,255,.42);
    font-size:12px;
    margin-top:12px;
}

.room-name-input {
    width:100%;
    margin-bottom:10px;
    padding:14px;
    border-radius:13px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    color:var(--t-text);
    text-align:center;
    font-size:16px;
    outline:none;
}

.leave-room-btn {
    width:100%;
    margin-top:16px;
    padding:11px 14px;
    border:1px solid rgba(255,100,100,.25);
    border-radius:11px;
    background:rgba(255,70,70,.08);
    color:#ff9b9b;
    font-weight:700;
    cursor:pointer;
}


/* Fast room entry / editable 5-character name */
.setting-name-row {
    align-items: flex-start;
}

.setting-name-control {
    display: flex;
    align-items: center;
    gap: 5px;
}

.setting-name-control input {
    width: 72px;
    min-width: 0;
    padding: 5px 6px;
    border: 1px solid #aaa;
    border-radius: 5px;
    background: #fff;
    color: inherit;
    box-sizing: border-box;
}

.setting-name-control button {
    min-width: 48px;
}


/* Compact, theme-aware settings controls */
.settings-panel{
    width:190px;
    padding:8px;
    background:var(--t-surface);
    color:var(--t-text);
    border:1px solid var(--t-border);
    box-shadow:0 8px 28px rgba(0,0,0,.22);
}

.setting-row{
    min-width:0;
    padding:7px 3px;
}

.setting-row > span,
.theme-label,
.settings-title{
    color:var(--t-text) !important;
}

.icon-setting-btn{
    width:34px !important;
    min-width:34px !important;
    height:30px;
    padding:0 !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--t-border) !important;
    border-radius:8px !important;
    background:var(--t-surface-2) !important;
    color:var(--t-text) !important;
    font-size:16px;
    line-height:1;
    cursor:pointer;
}

.icon-setting-btn:hover{
    background:var(--t-accent-soft) !important;
    border-color:var(--t-accent) !important;
}

.icon-leave-btn{
    width:100% !important;
    height:34px;
    margin-top:8px !important;
    padding:0 !important;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
}

.setting-name-control{
    gap:5px;
}

.setting-name-control input{
    width:68px;
    height:30px;
    padding:4px 6px;
    background:var(--t-input) !important;
    color:var(--t-text) !important;
    border:1px solid var(--t-border) !important;
    border-radius:8px;
    outline:none;
}

.setting-name-control input::placeholder{
    color:var(--t-muted) !important;
    opacity:1;
}

.setting-name-control input:focus{
    border-color:var(--t-accent) !important;
    box-shadow:0 0 0 2px var(--t-accent-soft);
}

.mode-section{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-top:5px;
    padding-top:8px;
    border-top:1px solid var(--t-border);
}

.mode-toggle{
    width:52px;
    height:28px;
    flex:0 0 52px;
    padding:2px;
    border:1px solid var(--t-border);
    border-radius:999px;
    background:var(--t-surface-2);
    cursor:pointer;
    position:relative;
}

.mode-track{
    position:absolute;
    inset:2px;
    border-radius:999px;
    background:var(--t-accent-soft);
}

.mode-knob{
    position:absolute;
    top:2px;
    left:2px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--t-accent);
    box-shadow:0 1px 4px rgba(0,0,0,.25);
    transition:transform .18s ease;
}

.mode-toggle.is-dark .mode-knob{
    transform:translateX(24px);
}

/* Keep the select as a compatibility/value element but don't show it. */
#themeModeSelect{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.theme-section:not(.mode-section){
    margin-top:7px;
    padding-top:7px;
    border-top:1px solid var(--t-border);
}

.theme-section select{
    width:100%;
    min-height:30px;
    margin-top:5px;
    padding:4px 7px;
    border-radius:8px;
    background:var(--t-surface-2) !important;
    color:var(--t-text) !important;
    border:1px solid var(--t-border) !important;
    outline:none;
}

.theme-section select:focus{
    border-color:var(--t-accent) !important;
}

.theme-section select option{
    background:var(--t-surface) !important;
    color:var(--t-text) !important;
}

/* Theme-aware room/name controls: never use hard-coded white text/backgrounds. */
.room-name-input,
.room-code-input,
.settings-panel input,
.settings-panel select{
    background:var(--t-input) !important;
    color:var(--t-text) !important;
    border-color:var(--t-border) !important;
}

.room-name-input::placeholder,
.room-code-input::placeholder,
.settings-panel input::placeholder{
    color:var(--t-muted) !important;
    opacity:1;
}

/* Small screens keep the compact panel usable without overflowing. */
@media (max-width:600px){
    .e2ee-verify-code{
        font-size:12px;
        letter-spacing:0.05em;
        line-height:1.55;
    }

    .settings-panel{
        right:8px;
        top:56px;
        width:184px;
    }
}


/* Final compact settings layout: icon-only quick actions + one-line name editor. */
.settings-panel{
    width:210px;
    padding:8px;
    box-sizing:border-box;
}

.settings-actions-row{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
    padding:5px 2px 8px;
    border-bottom:1px solid var(--t-border);
}

.settings-actions-row .icon-setting-btn,
.settings-actions-row .icon-leave-btn{
    flex:0 0 34px;
    margin:0 !important;
}

.setting-name-row{
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0;
    padding:8px 2px;
    border-bottom:1px solid var(--t-border);
}

.setting-name-icon{
    flex:0 0 auto;
    font-size:16px;
    line-height:30px;
}

.setting-name-row input{
    min-width:0;
    flex:1 1 auto;
    width:auto;
    height:30px;
    box-sizing:border-box;
    padding:4px 6px;
    background:var(--t-input) !important;
    color:var(--t-text) !important;
    border:1px solid var(--t-border) !important;
    border-radius:8px;
    outline:none;
}

.setting-name-row input[readonly]{
    opacity:1;
    cursor:default;
}

.setting-name-row input:not([readonly]){
    cursor:text;
    border-color:var(--t-accent) !important;
    box-shadow:0 0 0 2px var(--t-accent-soft);
}

.setting-name-row .icon-setting-btn{
    flex:0 0 34px;
}

.settings-actions-row .icon-setting-btn:hover,
.setting-name-row .icon-setting-btn:hover{
    background:var(--t-accent-soft) !important;
    border-color:var(--t-accent) !important;
}

.settings-actions-row .icon-leave-btn{
    color:var(--t-danger) !important;
    background:var(--t-danger-soft) !important;
    border-color:var(--t-danger) !important;
}

@media (max-width:600px){
    .settings-panel{
        width:210px;
        right:8px;
    }
}


/* Room identity + professional copy feedback */
.setting-pin-row{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
    padding:6px 2px;
    border-bottom:1px solid var(--t-border);
}
.setting-pin-icon{ flex:0 0 auto; font-size:15px; }
.setting-pin-label{ flex:0 0 auto; color:var(--t-muted); font-size:12px; }
.setting-pin-status{
    margin-left:auto;
    font:700 11px/1 monospace;
    color:var(--t-muted);
}
#pinToggleBtn{ min-width:34px; padding:4px 7px; }

.setting-room-row{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
    padding:6px 2px;
    border-bottom:1px solid var(--t-border);
}
.setting-room-icon{
    flex:0 0 auto;
    font-size:15px;
}
.setting-room-label{
    flex:0 0 auto;
    color:var(--t-muted);
    font-size:12px;
}
.setting-room-code{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font:700 13px/1 monospace;
    letter-spacing:.8px;
    color:var(--t-text);
    background:var(--t-input);
    border:1px solid var(--t-border);
    border-radius:6px;
    padding:5px 7px;
}
.settings-toast{
    position:absolute;
    left:50%;
    bottom:8px;
    transform:translate(-50%,6px);
    opacity:0;
    pointer-events:none;
    z-index:5;
    padding:5px 9px;
    border:1px solid var(--t-accent);
    border-radius:7px;
    background:var(--t-surface-2);
    color:var(--t-text);
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
    transition:opacity .16s ease, transform .16s ease;
}
.settings-toast.show{
    opacity:1;
    transform:translate(-50%,0);
}

/* =========================
   TinyCapp Premium Mood Mode
   Mood Mode visually supersedes the basic colour theme.
   All changes are intentionally slow and cross-faded.
   ========================= */

html,
body{
    transition:
        background-color 2.6s ease,
        color 2.6s ease;
}

.mood-section{
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid var(--t-border);
}

.mood-heading-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.mood-toggle{
    border:0;
    background:transparent;
    padding:0;
    cursor:pointer;
}

.mood-toggle-track{
    display:flex;
    align-items:center;
    width:34px;
    height:18px;
    padding:2px;
    box-sizing:border-box;
    border-radius:999px;
    background:var(--t-border);
    transition:background-color .6s ease;
}

.mood-toggle-knob{
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--t-text);
    transform:translateX(0);
    transition:transform .6s ease, background-color .6s ease;
}

.mood-toggle.is-on .mood-toggle-track{
    background:var(--t-accent);
}

.mood-toggle.is-on .mood-toggle-knob{
    transform:translateX(16px);
    background:var(--t-accent-text);
}

.mood-picker{
    display:grid;
    grid-template-columns:repeat(5, minmax(0,1fr));
    gap:4px;
    margin-top:7px;
}

.mood-card{
    min-width:0;
    padding:4px 2px;
    border:1px solid var(--t-border);
    border-radius:9px;
    background:var(--t-surface-2);
    color:var(--t-text);
    font:inherit;
    font-size:9px;
    cursor:pointer;
    opacity:1;
    transition:
        background-color 2.2s ease,
        border-color 2.2s ease,
        color 2.2s ease,
        transform .35s ease,
        opacity .45s ease;
}

.mood-card:hover:not(:disabled){
    transform:translateY(-1px);
    border-color:var(--t-accent);
}

.mood-card.is-selected{
    border-color:var(--t-accent);
    box-shadow:0 0 0 1px var(--t-accent), 0 0 14px var(--t-accent-soft);
}

.mood-card:disabled{
    cursor:not-allowed;
    opacity:.38;
}

.mood-art{
    display:flex;
    align-items:center;
    justify-content:center;
    height:25px;
    margin-bottom:2px;
    border-radius:7px;
    font-size:18px;
    overflow:hidden;
}

.mood-art-romantic{
    background:linear-gradient(135deg,#ffb5c9,#8e4565);
    color:#fff;
    animation:moodFloat 3.5s ease-in-out infinite;
}
.mood-art-angry{
    background:linear-gradient(135deg,#ff8a5c,#8d1717);
    color:#fff2e8;
    animation:moodPulse 1.25s ease-in-out infinite;
}
.mood-art-calm{
    background:linear-gradient(135deg,#a8d8ea,#537a9c);
    color:#effbff;
    animation:moodWave 3.5s ease-in-out infinite;
}
.mood-art-night{
    background:linear-gradient(135deg,#26345e,#101426);
    color:#fff3b0;
    animation:moodTwinkle 2.8s ease-in-out infinite;
}
.mood-art-off{
    background:linear-gradient(135deg,#9ba1ab,#4e535d);
    color:#eef0f3;
}

html.mood-mode-active{
    --t-border:rgba(255,255,255,.15);
}

html.mood-mode-active body{
    background:var(--mood-bg);
}

html.mood-mode-active .chat,
html.mood-mode-active .settings-panel,
html.mood-mode-active .topbar,
html.mood-mode-active .composer{
    background:var(--mood-surface);
    color:var(--mood-text);
}

html.mood-mode-active .message.left{
    background:var(--mood-left);
    color:var(--mood-text);
}
html.mood-mode-active .message.right{
    background:var(--mood-right);
    color:var(--mood-accent-text);
}
html.mood-mode-active .avatar,
html.mood-mode-active #sendBtn{
    background:var(--mood-accent);
    color:var(--mood-accent-text);
}
html.mood-mode-active .icon-setting-btn{
    background:var(--mood-control) !important;
    border-color:var(--mood-border) !important;
    color:var(--mood-text) !important;
}
html.mood-mode-active .setting-name-row input{
    background:var(--mood-input) !important;
    color:var(--mood-text) !important;
    border-color:var(--mood-border) !important;
}
html.mood-mode-active .theme-label,
html.mood-mode-active .settings-title,
html.mood-mode-active .setting-room-label,
html.mood-mode-active .setting-room-code{
    color:var(--mood-text) !important;
}

/* Five mood palettes. Variables are swapped gradually by the transitions above. */
html.mood-mode-active[data-mood="romantic"]{
    --mood-bg:#180d16;
    --mood-surface:#29131f;
    --mood-left:#3a1b2b;
    --mood-right:#9e456d;
    --mood-control:#3a1a2a;
    --mood-input:#160b13;
    --mood-border:rgba(255,170,201,.32);
    --mood-text:#fff0f6;
    --mood-accent:#d95c8a;
    --mood-accent-text:#fff;
}
html.mood-mode-active[data-mood="angry"]{
    --mood-bg:#180a08;
    --mood-surface:#29100d;
    --mood-left:#3a1612;
    --mood-right:#b43a28;
    --mood-control:#3b1712;
    --mood-input:#160806;
    --mood-border:rgba(255,130,91,.35);
    --mood-text:#fff0ea;
    --mood-accent:#ef633f;
    --mood-accent-text:#fff;
}
html.mood-mode-active[data-mood="calm"]{
    --mood-bg:#0b1820;
    --mood-surface:#122832;
    --mood-left:#1a3945;
    --mood-right:#4e879e;
    --mood-control:#18333d;
    --mood-input:#09151b;
    --mood-border:rgba(153,220,241,.3);
    --mood-text:#eafaff;
    --mood-accent:#65b9d4;
    --mood-accent-text:#06202a;
}
html.mood-mode-active[data-mood="night"]{
    --mood-bg:#070a15;
    --mood-surface:#10162a;
    --mood-left:#18213e;
    --mood-right:#4b5c9a;
    --mood-control:#151d35;
    --mood-input:#050711;
    --mood-border:rgba(180,193,255,.3);
    --mood-text:#f1f4ff;
    --mood-accent:#8295ed;
    --mood-accent-text:#fff;
}
html.mood-mode-active[data-mood="off"]{
    --mood-bg:#17191d;
    --mood-surface:#24272d;
    --mood-left:#30343b;
    --mood-right:#4e535d;
    --mood-control:#30343a;
    --mood-input:#121418;
    --mood-border:rgba(220,224,230,.2);
    --mood-text:#eceff3;
    --mood-accent:#858b95;
    --mood-accent-text:#fff;
}

/* Slow atmospheric overlay: opacity changes make a mood feel like weather moving in. */
html.mood-mode-active::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:999;
    opacity:.035;
    background:
        radial-gradient(circle at 20% 15%, var(--mood-accent), transparent 35%),
        radial-gradient(circle at 80% 80%, var(--mood-right), transparent 40%);
    transition:opacity 2.6s ease, background 2.6s ease;
}

html.mood-transitioning::before{
    animation:moodAtmosphere 2.6s ease;
}

@keyframes moodAtmosphere{
    0%{opacity:0}
    45%{opacity:.08}
    100%{opacity:.035}
}
@keyframes moodFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-2px)}
}
@keyframes moodPulse{
    0%,100%{transform:scale(.97);filter:brightness(.95)}
    50%{transform:scale(1.02);filter:brightness(1.18)}
}
@keyframes moodWave{
    0%,100%{border-radius:7px 12px 7px 12px}
    50%{border-radius:12px 7px 12px 7px}
}
@keyframes moodTwinkle{
    0%,100%{filter:brightness(.85)}
    50%{filter:brightness(1.35)}
}

@media (prefers-reduced-motion: reduce){
    html,body,
    .mood-card,
    .mood-toggle-track,
    .mood-toggle-knob,
    html.mood-mode-active::before{
        transition-duration:0.01ms !important;
        animation:none !important;
    }
}

@media (max-width:600px){
    .mood-picker{
        grid-template-columns:repeat(5, minmax(0,1fr));
    }
}


/* Mood Mode: basic theme controls are unavailable while the shared mood is active. */
html.mood-mode-active #themeSelect,
html.mood-mode-active #themeModeToggle {
    opacity: .38;
    filter: saturate(.35);
    cursor: not-allowed;
}

html.mood-mode-active #themeSelect:disabled,
html.mood-mode-active #themeModeToggle:disabled {
    pointer-events: none;
}

/* Slow atmospheric cross-fade for synchronized mood changes. */
html.mood-transitioning,
html.mood-transitioning body,
html.mood-transitioning .chat,
html.mood-transitioning .topbar,
html.mood-transitioning .composer,
html.mood-transitioning .settings-panel,
html.mood-transitioning .message,
html.mood-transitioning .message-bubble {
    transition:
        background-color 4.2s ease,
        background 4.2s ease,
        color 4.2s ease,
        border-color 4.2s ease,
        box-shadow 4.2s ease,
        filter 4.2s ease;
}


/* ================================================================
   MOOD MODE — RAIN ATMOSPHERE
   Quiet Japanese-cartoon rainy night. The illustration is static;
   only rain, slow clouds and occasional thunder/lightning animate.
   ================================================================ */

.rain-atmosphere{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
    opacity:0;
    visibility:hidden;
    transition:opacity 2.8s ease, visibility 2.8s ease;
    background:#08131d;
}

html.mood-mode-active[data-mood="rain"] .rain-atmosphere{
    opacity:1;
    visibility:visible;
}

html.mood-mode-active[data-mood="rain"] .chat{
    position:fixed;
    z-index:2;
    background:transparent;
}

html.mood-mode-active[data-mood="rain"] .topbar,
html.mood-mode-active[data-mood="rain"] .composer{
    background:rgba(13,25,36,.52) !important;
    border-color:rgba(210,232,244,.18) !important;
    backdrop-filter:blur(20px) saturate(115%);
    -webkit-backdrop-filter:blur(20px) saturate(115%);
}

html.mood-mode-active[data-mood="rain"] #messages{
    background:rgba(5,13,20,.07);
}

html.mood-mode-active[data-mood="rain"] .settings-panel{
    background:rgba(12,24,34,.68) !important;
    border-color:rgba(210,232,244,.18) !important;
    backdrop-filter:blur(22px) saturate(120%);
    -webkit-backdrop-filter:blur(22px) saturate(120%);
}

.rain-scene{
    position:absolute;
    inset:0;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 25%, rgba(105,142,165,.13), transparent 28%),
        linear-gradient(to bottom,#07111d 0%,#0b1b29 42%,#102633 72%,#07131c 100%);
}

.rain-moon{
    position:absolute;
    width:92px;
    height:92px;
    right:16%;
    top:13%;
    border-radius:50%;
    background:rgba(218,229,224,.82);
    box-shadow:0 0 55px 12px rgba(186,211,211,.12);
    opacity:.72;
}

.rain-moon::after{
    content:"";
    position:absolute;
    width:92px;
    height:92px;
    left:-13px;
    top:5px;
    border-radius:50%;
    background:#091826;
    opacity:.92;
}

.rain-cloud{
    position:absolute;
    width:330px;
    height:78px;
    border-radius:80px;
    background:linear-gradient(to bottom,rgba(55,70,82,.88),rgba(24,37,49,.94));
    box-shadow:0 16px 38px rgba(0,0,0,.22);
    opacity:.72;
    z-index:3;
}

.rain-cloud::before,
.rain-cloud::after{
    content:"";
    position:absolute;
    border-radius:50%;
    background:inherit;
}

.rain-cloud::before{
    width:125px;
    height:125px;
    left:54px;
    bottom:4px;
}

.rain-cloud::after{
    width:165px;
    height:165px;
    right:48px;
    bottom:0;
}

.rain-cloud-back{
    top:8%;
    left:-360px;
    transform:scale(.72);
    opacity:.34;
    animation:rainCloudSlowA 70s linear infinite;
}

.rain-cloud-mid{
    top:17%;
    left:-400px;
    transform:scale(.9);
    opacity:.52;
    animation:rainCloudSlowB 92s linear infinite;
    animation-delay:-28s;
}

.rain-cloud-front{
    top:27%;
    left:-380px;
    transform:scale(.62);
    opacity:.38;
    animation:rainCloudSlowC 110s linear infinite;
    animation-delay:-61s;
}

.rain-horizon{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:47%;
}

.rain-distant-hills{
    position:absolute;
    inset:0 0 25% 0;
    background:#142d3a;
    opacity:.8;
    clip-path:polygon(
        0 82%, 9% 61%, 17% 72%, 27% 48%, 36% 68%,
        47% 42%, 58% 69%, 69% 51%, 79% 72%, 90% 46%,
        100% 66%,100% 100%,0 100%
    );
}

.rain-water{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:35%;
    background:linear-gradient(to bottom,#173743,#081923);
    opacity:.95;
}

.rain-water::before{
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    top:22%;
    height:1px;
    background:rgba(189,220,222,.22);
    box-shadow:
        0 22px 0 rgba(189,220,222,.12),
        0 47px 0 rgba(189,220,222,.09),
        0 76px 0 rgba(189,220,222,.07);
}

.rain-city-lights{
    position:absolute;
    left:0;
    right:0;
    bottom:25%;
    height:70px;
    opacity:.42;
    background:
        radial-gradient(circle at 9% 80%,#d7a86a 0 3px,transparent 4px),
        radial-gradient(circle at 12% 72%,#d7a86a 0 2px,transparent 3px),
        radial-gradient(circle at 82% 73%,#d7a86a 0 3px,transparent 4px),
        radial-gradient(circle at 88% 80%,#d7a86a 0 2px,transparent 3px),
        radial-gradient(circle at 91% 65%,#d7a86a 0 2px,transparent 3px);
}

.rain-couple-scene{
    position:absolute;
    inset:auto 0 0;
    width:100%;
    height:74%;
    z-index:5;
    overflow:visible;
}

.rain-lightning{
    position:absolute;
    inset:0;
    z-index:6;
    opacity:0;
    background:rgba(224,239,247,.58);
    mix-blend-mode:screen;
    animation:rainThunder 17s linear infinite;
}

.rain-lightning::after{
    content:"";
    position:absolute;
    left:64%;
    top:14%;
    width:5px;
    height:190px;
    opacity:0;
    background:#f4fbff;
    clip-path:polygon(44% 0,100% 0,60% 40%,92% 40%,15% 100%,37% 53%,7% 53%);
    filter:drop-shadow(0 0 12px rgba(235,248,255,.9));
    animation:rainBolt 17s linear infinite;
}

.rain-fall{
    position:absolute;
    inset:-35% -18%;
    z-index:7;
    pointer-events:none;
    transform:rotate(9deg);
    background-image:repeating-linear-gradient(
        104deg,
        transparent 0 31px,
        rgba(204,226,237,.30) 32px 33px,
        transparent 34px 70px
    );
    background-size:74px 74px;
    animation:rainFallNatural 1.25s linear infinite;
}

.rain-fall-a{
    opacity:.27;
    filter:blur(.35px);
}

.rain-fall-b{
    opacity:.16;
    background-size:112px 112px;
    animation-duration:1.8s;
    animation-delay:-.4s;
}

.rain-fall-c{
    opacity:.09;
    background-size:156px 156px;
    animation-duration:2.35s;
    animation-delay:-1.1s;
    filter:blur(.7px);
}

html.mood-mode-active[data-mood="rain"] .message{
    background:rgba(225,239,243,.84) !important;
    color:#142833 !important;
    border:1px solid rgba(255,255,255,.52);
    border-radius:23px 23px 23px 9px;
    box-shadow:0 8px 22px rgba(4,20,27,.18),inset 0 1px rgba(255,255,255,.58);
    backdrop-filter:blur(13px) saturate(112%);
    -webkit-backdrop-filter:blur(13px) saturate(112%);
}

html.mood-mode-active[data-mood="rain"] .message.right{
    background:rgba(182,216,224,.88) !important;
    color:#10242d !important;
    border-radius:23px 23px 9px 23px;
}

html.mood-mode-active[data-mood="rain"] .message .time{
    color:#58717a !important;
}

html.mood-mode-active[data-mood="rain"] .reply-preview{
    background:rgba(78,111,121,.12) !important;
    border-color:rgba(43,76,85,.22) !important;
}

@keyframes rainCloudSlowA{
    from{transform:translateX(0) scale(.72)}
    to{transform:translateX(calc(100vw + 760px)) scale(.72)}
}
@keyframes rainCloudSlowB{
    from{transform:translateX(0) scale(.9)}
    to{transform:translateX(calc(100vw + 820px)) scale(.9)}
}
@keyframes rainCloudSlowC{
    from{transform:translateX(0) scale(.62)}
    to{transform:translateX(calc(100vw + 780px)) scale(.62)}
}
@keyframes rainFallNatural{
    from{background-position:0 0}
    to{background-position:74px 132px}
}
@keyframes rainThunder{
    0%,88%,89%,90%,100%{opacity:0}
    88.25%{opacity:.05}
    88.45%{opacity:.36}
    88.7%{opacity:.05}
    89.15%{opacity:.52}
    89.4%{opacity:0}
}
@keyframes rainBolt{
    0%,88%,100%{opacity:0}
    88.4%{opacity:.85}
    88.7%{opacity:0}
    89.12%{opacity:.95}
    89.35%{opacity:0}
}

@media (max-width:600px){
    .rain-moon{
        width:65px;
        height:65px;
        right:12%;
        top:11%;
    }
    .rain-moon::after{
        width:65px;
        height:65px;
    }
    .rain-cloud{
        width:250px;
        height:60px;
    }
    .rain-cloud::before{
        width:92px;
        height:92px;
    }
    .rain-cloud::after{
        width:120px;
        height:120px;
    }
    .rain-couple-scene{
        height:67%;
    }
}

@media (prefers-reduced-motion: reduce){
    .rain-atmosphere *,
    .rain-cloud,
    .rain-lightning,
    .rain-lightning::after,
    .rain-fall{
        animation:none !important;
    }
}












/* Reconnecting status: dot only — never render reconnecting text */
#status.reconnecting {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    display: inline-block !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    background: #facc15 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    white-space: nowrap !important;
    text-shadow: none !important;
    box-shadow:
        0 0 4px rgba(250,204,21,.95),
        0 0 9px rgba(250,204,21,.82),
        0 0 17px rgba(250,204,21,.58) !important;
    animation: reconnectingYellowDot 1.15s ease-in-out infinite !important;
}

#status.reconnecting::before,
#status.reconnecting::after {
    content: none !important;
    display: none !important;
}

@keyframes reconnectingYellowDot {
    0%, 100% {
        opacity: .65;
        transform: scale(.82);
        box-shadow:
            0 0 3px rgba(250,204,21,.80),
            0 0 7px rgba(250,204,21,.55),
            0 0 12px rgba(250,204,21,.35);
    }
    50% {
        opacity: 1;
        transform: scale(1.12);
        box-shadow:
            0 0 5px rgba(250,204,21,1),
            0 0 12px rgba(250,204,21,.92),
            0 0 23px rgba(250,204,21,.65);
    }
}


/* Lightweight self-hosted native emoji picker */
.emoji-picker{
    position:absolute;
    bottom:60px;
    left:0;
    width:min(340px,calc(100vw - 20px));
    height:min(420px,58vh);
    max-height:min(420px,58vh);
    overflow:hidden;
    display:none;
    z-index:2147483001;
    box-sizing:border-box;
    border:1px solid var(--t-border);
    border-radius:18px;
    background:color-mix(in srgb,var(--t-surface) 96%,transparent);
    color:var(--t-text);
    box-shadow:0 18px 45px rgba(0,0,0,.28);
    backdrop-filter:blur(18px) saturate(1.1);
    -webkit-backdrop-filter:blur(18px) saturate(1.1);
}
.emoji-picker.show{display:block}

.tc-emoji-shell{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    min-width:0;
}
.tc-emoji-head{
    flex:0 0 auto;
    padding:10px 10px 8px;
    border-bottom:1px solid var(--t-border);
}
.tc-emoji-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0 3px 7px;
    font-size:13px;
    font-weight:700;
    color:var(--t-text);
}
.tc-emoji-count{font-size:9px;font-weight:500;opacity:.55}
.tc-emoji-search{
    display:block;
    width:100%;
    height:34px;
    padding:0 10px;
    border:1px solid var(--t-border);
    border-radius:10px;
    outline:none;
    background:var(--t-input);
    color:var(--t-text);
    font:inherit;
    font-size:12px;
    box-sizing:border-box;
}
.tc-emoji-search::placeholder{color:var(--t-muted)}
.tc-emoji-search:focus{
    border-color:var(--t-accent);
    box-shadow:0 0 0 2px var(--t-accent-soft);
}
.tc-emoji-categories{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:2px;
    padding:5px 7px;
    overflow-x:auto;
    border-bottom:1px solid var(--t-border);
    scrollbar-width:none;
    min-width:0;
}
.tc-emoji-categories::-webkit-scrollbar{display:none}
.tc-emoji-category{
    flex:0 0 31px!important;
    width:31px!important;
    height:29px!important;
    min-width:31px!important;
    min-height:29px!important;
    border:0!important;
    border-radius:8px!important;
    background:transparent!important;
    color:var(--t-text)!important;
    font-size:16px!important;
    line-height:1!important;
    cursor:pointer;
    opacity:.65;
    padding:0!important;
    margin:0!important;
    box-shadow:none!important;
}
.tc-emoji-category:hover{opacity:1;background:var(--t-accent-soft)!important}
.tc-emoji-category.is-active{
    opacity:1;
    background:var(--t-accent-soft)!important;
    box-shadow:inset 0 -2px 0 var(--t-accent)!important;
}
.tc-emoji-grid{
    flex:1 1 auto;
    min-height:0;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(8,minmax(0,1fr));
    align-content:start;
    gap:0;
    padding:6px;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--t-surface-2) transparent;
    -webkit-overflow-scrolling:touch;
}
.tc-emoji-item{
    width:100%!important;
    height:42px!important;
    min-width:0!important;
    min-height:42px!important;
    max-width:none!important;
    max-height:none!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:8px!important;
    background:transparent!important;
    color:inherit!important;
    font-size:25px!important;
    line-height:1!important;
    font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif!important;
    font-variant-emoji:emoji!important;
    text-align:center!important;
    cursor:pointer;
    box-shadow:none!important;
    transform:none!important;
    appearance:none!important;
    -webkit-appearance:none!important;
    touch-action:manipulation;
}
.tc-emoji-item:hover{background:var(--t-accent-soft)!important;transform:scale(1.04)!important}
.tc-emoji-item:active{transform:scale(.94)!important}

html.mood-mode-active .emoji-picker{
    background:color-mix(in srgb,var(--mood-surface) 96%,transparent);
    color:var(--mood-text);
    border-color:var(--mood-border);
}
html.mood-mode-active .tc-emoji-title,
html.mood-mode-active .tc-emoji-count,
html.mood-mode-active .tc-emoji-category{color:var(--mood-text)!important}
html.mood-mode-active .tc-emoji-search{
    background:var(--mood-control);
    color:var(--mood-text);
    border-color:var(--mood-border);
}
html.mood-mode-active .tc-emoji-search:focus{
    border-color:var(--mood-accent);
    box-shadow:0 0 0 2px var(--mood-accent-soft);
}
html.mood-mode-active .tc-emoji-category:hover,
html.mood-mode-active .tc-emoji-category.is-active,
html.mood-mode-active .tc-emoji-item:hover{
    background:var(--mood-accent-soft)!important;
}
html.mood-mode-active .tc-emoji-category.is-active{
    box-shadow:inset 0 -2px 0 var(--mood-accent)!important;
}

@media(max-width:600px){
    .emoji-picker{
        position:fixed!important;
        left:50%!important;
        right:auto!important;
        bottom:calc(66px + env(safe-area-inset-bottom))!important;
        transform:translateX(-50%)!important;
        width:min(340px,calc(100vw - 12px))!important;
        height:min(54dvh,390px)!important;
        max-height:min(54dvh,390px)!important;
        z-index:2147483001!important;
    }
    .tc-emoji-grid{
        grid-template-columns:repeat(7,minmax(0,1fr));
        padding:5px;
    }
    .tc-emoji-item{
        height:44px!important;
        min-height:44px!important;
        font-size:27px!important;
    }
}
@media(max-width:380px){
    .emoji-picker{
        width:calc(100vw - 10px)!important;
        max-width:calc(100vw - 10px)!important;
        height:min(55dvh,370px)!important;
        max-height:min(55dvh,370px)!important;
    }
    .tc-emoji-item{height:42px!important;min-height:42px!important;font-size:26px!important}
}


/* Single-message animated Noto emoji */
.message-text:has(.animated-single-emoji){
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:84px;
    min-height:84px;
    padding:2px;
    line-height:1;
}
.animated-single-emoji{
    display:block;
    width:82px;
    height:82px;
    max-width:82px;
    max-height:82px;
    object-fit:contain;
    user-select:none;
    -webkit-user-drag:none;
}
@media(max-width:600px){
    .message-text:has(.animated-single-emoji){
        min-width:74px;
        min-height:74px;
    }
    .animated-single-emoji{
        width:72px;
        height:72px;
        max-width:72px;
        max-height:72px;
    }
}
@media(prefers-reduced-motion:reduce){
    .animated-single-emoji{animation:none!important;}
}


/* Noto animated single-emoji message: isolated from normal message/input sizing. */
.message-text:has(.animated-single-emoji) {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    min-width: 84px;
    min-height: 84px;
}

.animated-single-emoji {
    display: block !important;
    width: 82px !important;
    height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    object-fit: contain;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 600px) {
    .message-text:has(.animated-single-emoji) {
        min-width: 74px;
        min-height: 74px;
    }
    .animated-single-emoji {
        width: 72px !important;
        height: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
    }
}

/* Local unsent-message state. */
.message-delivery-status{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    margin-top:5px;
    font-size:11px;
    opacity:.8;
}
.message-delivery-label{ color:var(--t-muted); }
.message-resend{
    border:0;
    padding:2px 0;
    background:transparent;
    color:var(--t-text);
    font:inherit;
    font-weight:600;
    cursor:pointer;
}
.message-resend:disabled{ opacity:.55; cursor:default; }
.message-unsent{ opacity:.82; }


/* Privacy-mode image transfer: no filename, MIME/type hint, image label,
   sender name/time, or descriptive transfer text. Only the progress and a
   compact control remain visible. */
.image-download-panel.privacy {
    width: min(190px, 58vw);
    min-height: 0;
    padding: 7px 9px;
    gap: 5px;
    border-radius: 8px;
    background: rgba(0,0,0,.12);
}

.image-download-panel.privacy .image-progress-wrap {
    margin-top: 0;
    height: 4px;
}

.image-download-panel.privacy .image-progress-text {
    margin-top: 0;
    font-size: 10px;
    line-height: 1;
}

.image-download-panel.privacy .image-download-button {
    align-self: center;
    min-width: 30px;
    width: 30px;
    min-height: 28px;
    height: 28px;
    padding: 0;
    border-radius: 7px;
    font-size: 14px;
    line-height: 1;
}

.image-download-panel.privacy .image-file-name,
.image-download-panel.privacy .image-file-size {
    display: none !important;
}


/* ===== Final compact image transfer layout & Progress Bar ===== */
.image-message {
    max-width: 92%;
    padding: 0;
    background: transparent !important;
    color: var(--t-text);
}

.image-message .image-stage {
    position: relative;
    width: min(300px, 78vw);
    max-width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 120px;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(20, 25, 31, .88);
}

.image-message .image-stage .chat-image,
.image-message .image-stage .image-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 12px;
}

.image-message .image-stage .chat-image {
    display: block;
    object-fit: contain;
    background: rgba(0,0,0,.08);
    cursor: pointer;
}

.image-message .image-placeholder {
    display: block;
    background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(0,0,0,.16));
}

.image-message .image-download-panel {
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 7px;
    z-index: 3;
    width: auto !important;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 9px;
    background: rgba(8, 12, 16, .78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;

    /* Grid Layout matching the provided progress bar image */
    display: grid !important;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
        "name name name"
        "status percent action"
        "bar bar action";
    align-items: center;
    gap: 6px 12px;
    color: #ffffff;
}

.image-message .image-download-panel .image-file-name {
    grid-area: name;
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    color: inherit;
    margin: 0;
}

.image-message .image-download-panel .image-file-size {
    grid-area: status;
    margin: 0;
    font-size: 11px;
    line-height: 1.1;
    color: inherit;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-message .image-download-panel .image-progress-text {
    grid-area: percent;
    margin: 0;
    font-size: 11px;
    line-height: 1.1;
    text-align: right;
    color: inherit;
    opacity: 0.85;
    min-width: 28px;
}

.image-message .image-download-panel .image-progress-wrap {
    grid-area: bar;
    width: 100%;
    height: 4px;
    margin: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
}

.image-message .image-download-panel .image-progress-bar {
    background: #ffffff;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    transition: width .12s linear;
}

.image-message .image-download-panel .image-action-icon {
    grid-area: action;
    position: static !important;
    transform: none !important;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    cursor: pointer;
}

.image-message .image-download-panel .image-action-icon:hover {
    background: rgba(255, 255, 255, 0.15);
}


/* Sender upload overlay must disappear after successful completion.
   The normal image panel uses display:grid !important, so this explicit
   completion rule is required instead of relying on inline display:none. */
.image-message .image-download-panel.image-upload-complete {
    display: none !important;
}

/* Receiver-side transfer overlay must disappear after the image has
   successfully loaded. Keep the panel available for privacy-mode cipher
   masking, where the same element is reused as the normal cipher bubble. */
.image-message .image-download-panel.image-download-complete:not(.image-cipher-mask-bubble) {
    display: none !important;
}

/* Privacy mode active styles */
.image-message .image-download-panel.privacy {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: fit-content !important;
    max-width: min(82vw, 280px);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 6px 4px;
    color: var(--t-text);
    gap: 6px 10px;
}

.image-message .image-download-panel.privacy .image-progress-wrap {
    background: var(--t-border);
}

.image-message .image-download-panel.privacy .image-progress-bar {
    background: var(--t-text);
}

.image-message .image-download-panel.privacy .image-action-icon {
    border-color: var(--t-border);
    background: var(--t-surface);
    color: var(--t-text);
}

.image-message .image-download-panel.privacy .image-action-icon:hover {
    background: var(--t-surface-2);
}

.image-message .image-download-panel.privacy-complete,
.image-message .image-download-panel.image-cipher-mask-bubble {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: fit-content !important;
    max-width: 82%;
    min-width: 0;
    margin: 0;
    padding: 12px 15px;
    border-radius: 20px;
    background: var(--t-left);
    color: var(--t-text);
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: normal;
    opacity: 1;
    display: block !important;
}

.image-message.right .image-download-panel.image-cipher-mask-bubble {
    background: var(--t-right);
    border-bottom-right-radius: 6px;
    color: var(--t-accent-text);
}

.image-message.left .image-download-panel.image-cipher-mask-bubble {
    border-bottom-left-radius: 6px;
}

.image-message .image-cipher-mask-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    letter-spacing: .02em;
    color: inherit;
}

.image-message .time {
    display: block;
    padding: 0 4px;
    margin-top: 4px;
}

@media (max-width: 600px) {
    .image-message .image-stage {
        width: min(280px, 82vw);
    }

    .image-message .image-download-panel {
        left: 6px;
        right: 6px;
        bottom: 6px;
        padding: 8px 10px;
        gap: 5px 10px;
    }

    .image-message .image-download-panel .image-action-icon {
        width: 28px;
        min-width: 28px;
        height: 28px;
        min-height: 28px;
    }
}

/* Privacy-mode completed image messages must use the exact same outer
   bubble structure as ordinary cipher text messages. */
.image-message.image-cipher-mode {
    max-width: 82%;
    padding: 12px 15px;
    border-radius: 20px;
    background: var(--t-left) !important;
    color: var(--t-text);
    box-sizing: border-box;
}

.image-message.image-cipher-mode.right {
    background: var(--t-right) !important;
    color: var(--t-accent-text);
    border-bottom-right-radius: 6px;
}

.image-message.image-cipher-mode.left {
    border-bottom-left-radius: 6px;
}

.image-message.image-cipher-mode .image-download-panel,
.image-message.image-cipher-mode .image-download-panel.image-cipher-mask-bubble {
    position: static;
    width: auto !important;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: inherit;
    display: block !important;
    box-sizing: border-box;
}

.image-message.image-cipher-mode .image-cipher-mask-text {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: inherit;
}

.image-message.image-cipher-mode .time {
    display: block;
    margin-top: 6px;
    padding: 0;
    color: var(--t-muted);
}


/* ========================================================================
   PRIVACY IMAGE CIPHER BUBBLE — TYPOGRAPHY & THEME PARITY
   Keep completed image cipher masks visually identical to .message bubbles.
   Do not use a monospace/smaller font here: ordinary cipher messages use
   the application's inherited system font and message typography.
   ======================================================================== */

.image-message.image-cipher-mode,
.image-message.image-cipher-mode .image-cipher-mask-text {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: normal !important;
}

.image-message.image-cipher-mode .image-cipher-mask-text {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Standard themes: use exactly the same theme variables as ordinary
   left/right .message bubbles. */
.image-message.image-cipher-mode.left {
    background: var(--t-left) !important;
    color: var(--t-text) !important;
}

.image-message.image-cipher-mode.right {
    background: var(--t-right) !important;
    color: var(--t-text) !important;
}

/* Mood Mode: completed image cipher bubbles follow the same mood colors
   as ordinary message bubbles instead of retaining the normal theme. */
html.mood-mode-active .image-message.image-cipher-mode.left {
    background: var(--mood-left) !important;
    color: var(--mood-text) !important;
}

html.mood-mode-active .image-message.image-cipher-mode.right {
    background: var(--mood-right) !important;
    color: var(--mood-accent-text) !important;
}

/* Rain mood has its own glass message geometry; keep image cipher bubbles
   identical to ordinary rain-mode messages. */
html.mood-mode-active[data-mood="rain"] .image-message.image-cipher-mode.left {
    background: rgba(225,239,243,.84) !important;
    color: #142833 !important;
    border: 1px solid rgba(255,255,255,.52);
    border-radius: 23px 23px 23px 9px;
    box-shadow: 0 8px 22px rgba(4,20,27,.18), inset 0 1px rgba(255,255,255,.58);
    backdrop-filter: blur(13px) saturate(112%);
    -webkit-backdrop-filter: blur(13px) saturate(112%);
}

html.mood-mode-active[data-mood="rain"] .image-message.image-cipher-mode.right {
    background: rgba(182,216,224,.88) !important;
    color: #10242d !important;
    border-radius: 23px 23px 9px 23px;
}

html.mood-mode-active[data-mood="rain"] .image-message.image-cipher-mode .time {
    color: #58717a !important;
}


/* ========================================================================
   FINAL MESSAGE META LAYOUT
   Username + timestamp stay OUTSIDE every message bubble.
   Uses theme variables so normal themes and Mood Mode all inherit correctly.
   ======================================================================== */

/* Text messages: outer .message is the layout wrapper; the inner element is
   the actual chat bubble. */
.message:not(.image-message) {
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    max-width: 82%;
    color: var(--t-text);
    overflow: visible;
}

.message:not(.image-message) .message-bubble-content {
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 15px;
    border-radius: 20px;
    background: var(--t-left);
    color: var(--t-text);
    word-break: break-word;
}

.message:not(.image-message).right .message-bubble-content {
    margin-left: auto;
    background: var(--t-right);
    color: var(--t-text);
    border-bottom-right-radius: 6px;
}

.message:not(.image-message).left .message-bubble-content {
    margin-right: auto;
    background: var(--t-left);
    color: var(--t-text);
    border-bottom-left-radius: 6px;
}

.message:not(.image-message) > .time {
    display: block;
    margin-top: 4px;
    padding: 0 4px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: inherit;
    font-family: inherit;
    letter-spacing: normal;
    color: var(--t-muted) !important;
    opacity: .78;
    background: transparent !important;
    text-align: left;
}

.message:not(.image-message).right > .time {
    text-align: right;
}

/* Image messages already use .time as a sibling of the image/panel. Keep
   their metadata outside the visual image bubble as well. */
.image-message > .time {
    display: block;
    margin-top: 4px;
    padding: 0 4px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: inherit;
    font-family: inherit;
    letter-spacing: normal;
    color: var(--t-muted) !important;
    opacity: .78;
    background: transparent !important;
}

.image-message.right > .time {
    text-align: right;
}

/* Completed Privacy-Mode image: the cipher itself is the inner bubble;
   username + timestamp remain outside it. */
.image-message.image-cipher-mode {
    max-width: 82% !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--t-text);
    border-radius: 0 !important;
    overflow: visible;
}

.image-message.image-cipher-mode.right {
    background: transparent !important;
    color: var(--t-text);
    border-radius: 0 !important;
}

.image-message.image-cipher-mode.left {
    background: transparent !important;
    border-radius: 0 !important;
}

.image-message.image-cipher-mode .image-download-panel,
.image-message.image-cipher-mode .image-download-panel.image-cipher-mask-bubble {
    width: fit-content !important;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 15px;
    margin: 0;
    border-radius: 20px;
    background: var(--t-left) !important;
    color: var(--t-text);
    text-align: left;
}

.image-message.image-cipher-mode.right .image-download-panel,
.image-message.image-cipher-mode.right .image-download-panel.image-cipher-mask-bubble {
    margin-left: auto;
    background: var(--t-right) !important;
    color: var(--t-text);
    border-bottom-right-radius: 6px;
}

.image-message.image-cipher-mode.left .image-download-panel,
.image-message.image-cipher-mode.left .image-download-panel.image-cipher-mask-bubble {
    margin-right: auto;
    border-bottom-left-radius: 6px;
}

.image-message.image-cipher-mode .image-cipher-mask-text {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: normal !important;
    color: inherit !important;
}

.image-message.image-cipher-mode .time {
    position: static;
    display: block;
    margin-top: 4px;
    padding: 0 4px;
    color: var(--t-muted) !important;
    font-family: inherit;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: normal;
    opacity: .78;
    background: transparent !important;
}

@media (max-width: 600px) {
    .message:not(.image-message),
    .image-message.image-cipher-mode {
        max-width: 92% !important;
    }
}


/* E2EE safety-code verification */
.setting-security-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid rgba(127, 127, 127, 0.14);
}
.setting-security-icon {
    font-size: 20px;
    line-height: 1.2;
}
.setting-security-content {
    flex: 1;
    min-width: 0;
}
.setting-security-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
}
.e2ee-verify-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    letter-spacing: 0.06em;
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
    width: max-content;
    max-width: 100%;
    padding: 6px 8px;
    border-radius: 7px;
    background: rgba(127, 127, 127, 0.10);
}
.e2ee-verify-status {
    margin-top: 4px;
    font-size: 10px;
    opacity: 0.72;
    line-height: 1.35;
}
.e2ee-verify-status.is-verified {
    opacity: 1;
}
.e2ee-verify-status.is-warning {
    opacity: 1;
}


/* ===== Compact, grouped Settings panel ===== */
.settings-panel{
    width:min(250px, calc(100vw - 16px));
    max-height:min(78vh, 620px);
    overflow:hidden;
    padding:8px;
    border-radius:14px;
    display:none;
}

.settings-panel.show{
    display:flex;
    flex-direction:column;
}

.settings-title{
    flex:0 0 auto;
    font-size:15px;
    padding:4px 5px 8px;
    margin-bottom:5px;
}

.settings-actions-row{
    flex:0 0 auto;
    border-bottom:1px solid var(--t-border);
    padding:4px 2px 7px;
    justify-content:space-between;
}

.settings-actions-row .icon-setting-btn,
.settings-actions-row .icon-leave-btn{
    flex:1 1 0;
    max-width:42px;
}

.settings-groups{
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:3px 1px 2px;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
}

.settings-group{
    margin:4px 0;
    border:1px solid var(--t-border);
    border-radius:11px;
    background:color-mix(in srgb, var(--t-surface-2) 38%, transparent);
    overflow:hidden;
}

.settings-group > summary{
    list-style:none;
    display:flex;
    align-items:center;
    gap:8px;
    min-height:38px;
    padding:8px 10px;
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
    font-size:12px;
    font-weight:750;
    color:var(--t-text);
    background:var(--t-surface-2);
}

.settings-group > summary::-webkit-details-marker{
    display:none;
}

.settings-group > summary::after{
    content:"›";
    margin-left:auto;
    font-size:18px;
    line-height:1;
    color:var(--t-muted);
    transform:rotate(0deg);
    transition:transform .16s ease;
}

.settings-group[open] > summary::after{
    transform:rotate(90deg);
    color:var(--t-accent);
}

.settings-group > summary:active{
    background:var(--t-accent-soft);
}

.settings-group-body{
    padding:0 7px 7px;
}

.settings-group-body > .setting-room-row,
.settings-group-body > .setting-pin-row,
.settings-group-body > .setting-security-row,
.settings-group-body > .setting-name-row,
.settings-group-body > .theme-section,
.settings-group-body > .mood-section{
    border-bottom-color:var(--t-border);
}

.settings-group-body > .setting-room-row:first-child{
    padding-top:7px;
}

.settings-group-body .mood-section{
    margin-top:5px;
    padding-top:7px;
}

.settings-group-body .theme-section{
    padding-top:7px;
    padding-bottom:7px;
}

.settings-group-body .setting-name-row{
    padding-top:7px;
    padding-bottom:7px;
}

@media (max-width:600px){
    .settings-panel{
        width:230px;
        max-width:calc(100vw - 16px);
        max-height:calc(100vh - 72px);
        right:8px;
        top:58px;
        padding:7px;
        border-radius:13px;
    }

    .settings-title{
        font-size:14px;
        padding-bottom:7px;
    }

    .settings-actions-row{
        gap:4px;
        padding-bottom:6px;
    }

    .settings-actions-row .icon-setting-btn,
    .settings-actions-row .icon-leave-btn{
        flex-basis:36px;
        max-width:40px;
        height:34px;
        width:36px;
    }

    .settings-group{
        margin:3px 0;
    }

    .settings-group > summary{
        min-height:36px;
        padding:7px 9px;
        font-size:11.5px;
    }

    .settings-group-body{
        padding:0 5px 5px;
    }

    .settings-group-body .setting-security-row{
        align-items:flex-start;
    }

    .settings-group-body .setting-security-content{
        min-width:0;
    }

    .settings-group-body .e2ee-verify-code{
        font-size:11px;
        line-height:1.55;
        white-space:pre !important;
        word-break:normal !important;
        overflow-wrap:normal !important;
        width:fit-content;
        max-width:none;
        min-width:0;
    }

    .settings-group-body .mood-picker{
        grid-template-columns:repeat(3, minmax(0,1fr));
        gap:4px;
    }

    .settings-group-body .mood-card{
        min-height:48px;
    }
}

@media (max-width:380px){
    .settings-panel{
        right:6px;
        width:calc(100vw - 12px);
        max-height:calc(100vh - 66px);
    }

    .settings-group-body{
        padding-left:4px;
        padding-right:4px;
    }
}


/* Final compact Settings sizing */
.settings-panel{
    width:220px !important;
    max-width:calc(100vw - 16px) !important;
    max-height:min(78vh, 620px);
}

.settings-actions-row{
    justify-content:flex-start;
    gap:6px;
}

.settings-actions-row .icon-setting-btn,
.settings-actions-row .icon-leave-btn{
    flex:0 0 34px;
    width:34px;
    max-width:34px;
}

@media (max-width:600px){
    .settings-panel{
        width:220px !important;
        max-width:calc(100vw - 16px) !important;
        right:8px;
        top:58px;
    }
}

@media (max-width:380px){
    .settings-panel{
        width:210px !important;
        max-width:calc(100vw - 12px) !important;
        right:6px;
    }
}


/* ===== Final E2EE safety-code layout ===== */
.e2ee-verify-code{
    white-space:pre !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    font-variant-numeric:tabular-nums;
    line-height:1.5;
    display:block;
    width:max-content;
    max-width:none !important;
    min-width:0;
}
.e2ee-verify-status{
    white-space:normal;
    overflow-wrap:anywhere;
}


/* E2EE waiting/error text: allow natural wrapping inside the narrow settings card.
   The actual safety code remains fixed to its 3-line format. */
.e2ee-verify-code.is-waiting {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.35;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .e2ee-verify-code.is-waiting {
        font-size: 11px;
        padding: 6px 7px;
        line-height: 1.35;
    }
}


/* ===== E2EE verification confirmation workflow ===== */
.e2ee-verify-instruction {
    margin-top: 7px;
    font-size: 10px;
    line-height: 1.35;
    opacity: .78;
}
.e2ee-verify-check-row {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 9px;
    font-size: 10px;
    line-height: 1.35;
    cursor: pointer;
    user-select: none;
}
.e2ee-verify-check-row input {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    margin: 0;
    accent-color: currentColor;
}
.e2ee-verify-check-row input:disabled {
    opacity: .55;
}
.e2ee-confirm-btn {
    width: 100%;
    margin-top: 9px;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid rgba(127,127,127,.28);
    border-radius: 8px;
    background: rgba(127,127,127,.12);
    color: inherit;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.e2ee-confirm-btn:not(:disabled):hover {
    background: rgba(127,127,127,.2);
}
.e2ee-confirm-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.e2ee-verify-code:not(.is-waiting) {
    max-width: 100%;
    overflow-x: auto;
}
@media (max-width: 600px) {
    .e2ee-verify-instruction,
    .e2ee-verify-check-row {
        font-size: 10px;
    }
}

/* E2EE manual verification workflow */
.e2ee-verify-instruction[hidden],
.e2ee-verify-check-row[hidden],
.e2ee-confirm-btn[hidden] {
    display: none !important;
}


@media (max-width:600px){
  .landing-brand{gap:8px;}
  .landing-logo{width:42px;height:42px;}
  .landing-wordmark{width:135px;max-width:48vw;}
}