:root{--primary:#079da1;--dark:#00686c;--page:#f5f8f8;--mine:#079da1;--other:#fff}
    *{box-sizing:border-box} body{margin:0;font-family:Tahoma,Arial,sans-serif;background:#dfe8e8;color:#172323}
    button,input,select{font:inherit}.app{height:100vh;max-width:1500px;margin:auto;background:var(--page);display:grid;grid-template-rows:82px minmax(0,1fr);overflow:hidden;box-shadow:0 0 30px #0002}
    header{background:var(--dark);color:white;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 28px;box-shadow:0 3px 12px #0002;z-index:5;direction:ltr}
    .person{display:flex;align-items:center;gap:12px;font-weight:bold;direction:rtl}.me{justify-self:start}.peer{justify-self:end;cursor:pointer}.peer.hidden,.me.hidden{visibility:hidden}.avatar{width:54px;height:54px;border-radius:50%;border:2px solid #fff;object-fit:cover;background:#d7eeee}.ui-icon{color:#737f7f;font-family:Arial,sans-serif;font-weight:bold;filter:grayscale(1)}
    .menu-wrap{position:relative}.dots{width:46px;height:46px;border:0;border-radius:50%;background:#ffffff1d;color:#fff;font-size:29px;cursor:pointer;line-height:1}.dots:hover{background:#ffffff32}
    .menu{position:absolute;top:58px;left:50%;transform:translateX(-50%);width:235px;background:#fff;color:#203030;border-radius:14px;box-shadow:0 12px 35px #0003;overflow:hidden;display:none}.menu.open{display:block}.menu button{width:100%;border:0;background:#fff;padding:16px;text-align:right;cursor:pointer}.menu button+button{border-top:1px solid #e7eeee}.menu button:hover{background:#eef7f7}
    .content{display:flex;direction:rtl;min-width:0;min-height:0;overflow:hidden}.sidebar{width:16%;min-width:180px;background:#eaf1f1;border-left:1px solid #d3dfdf;padding:14px 9px;display:flex;flex-direction:column;overflow:hidden}.sidebar h3{font-size:14px;margin:5px 10px 14px;color:#536363}.contact{width:100%;display:flex;align-items:center;gap:9px;border:0;border-radius:11px;background:transparent;padding:10px 8px;cursor:pointer;text-align:right}.contact:hover,.contact.active{background:#fff;box-shadow:0 3px 9px #0000000d}.contact img{width:39px;height:39px;border-radius:50%;background:#cce}.contact small{display:block;color:#758484;margin-top:3px}.public-icon{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#d9dfdf;color:#737f7f;font-size:19px}.conversation-list{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}#privateUsers{min-width:0}.add-contact{align-self:flex-end;flex:0 0 40px;width:40px;height:40px;margin-top:8px;border:0;border-radius:50%;padding:0;display:grid;place-items:center;background:var(--primary);color:#fff;cursor:pointer}.add-contact .ui-icon{color:inherit;font-size:18px;line-height:1}.add-contact:hover{filter:brightness(.92)}.search-row{display:flex;gap:8px}.search-row input{flex:1;min-width:0;height:46px;border:1px solid #ccdada;border-radius:10px;padding:0 11px;direction:rtl}.search-row button{border:0;border-radius:10px;background:var(--primary);color:#fff;padding:0 17px;cursor:pointer}.search-results{margin-top:14px;min-height:70px}.result-add{margin-right:auto;border:0;border-radius:8px;background:var(--primary);color:#fff;padding:7px 10px;cursor:pointer}.chat-title{color:#708080;text-align:center;margin-top:16vh}
    main{flex:1;overflow:auto;padding:38px 6%;scroll-behavior:smooth}.row{display:flex;margin:18px 0}.row.mine{justify-content:flex-start}.row.other{justify-content:flex-end}.bubble-wrap{display:flex;flex-direction:column;align-items:flex-start;width:fit-content;max-width:70%;min-width:0}.other .bubble-wrap{align-items:flex-end}.bubble{width:fit-content;max-width:100%;min-width:0;padding:15px 19px;border-radius:18px;line-height:1.8;box-shadow:0 4px 12px #00000010}.mine .bubble{background:var(--mine);color:#fff;border-bottom-right-radius:4px}.other .bubble{background:var(--other);border-bottom-left-radius:4px}.meta{direction:ltr;color:#718080;font-size:12px;margin:6px 8px}.mine .meta{text-align:right}.arrows{color:#747f7f;font-weight:bold;letter-spacing:-3px;font-size:17px}
    footer{direction:ltr;display:flex;gap:14px;align-items:center;padding:16px 28px;background:var(--primary);box-shadow:0 -3px 12px #0002}.send{height:56px;min-width:110px;border:1px solid #ffffff55;border-radius:14px;background:var(--primary);color:#fff;font-weight:bold;cursor:pointer;box-shadow:0 4px 8px #00494d66}.send:hover{filter:brightness(.86)}#message{direction:rtl;text-align:right;height:56px;flex:1;border:0;border-radius:14px;padding:0 20px;outline:0;background:#fff;font-size:16px}
    .color-panel,.login-screen{position:fixed;inset:0;background:#0006;display:none;place-items:center;z-index:20}.color-panel.open,.login-screen.open{display:grid}.dialog,.login-card{background:#fff;border-radius:18px;padding:25px;width:min(410px,92%);box-shadow:0 20px 50px #0004}.dialog h3,.login-card h1{margin-top:0}.login-card h1{color:var(--dark);text-align:center}.login-card p{text-align:center;color:#647474;line-height:1.8}.field{margin:12px 0}.field label{display:block;font-size:13px;margin:0 5px 7px}.field input{width:100%;height:46px;border:1px solid #ccdada;border-radius:10px;padding:0 12px;outline:0}.field input:focus{border-color:var(--primary)}.login-btn{width:100%;height:49px;border:0;border-radius:11px;background:var(--primary);color:#fff;font-weight:bold;cursor:pointer;margin-top:8px}.login-btn:hover{filter:brightness(.88)}.hint{font-size:12px!important}.error{color:#b42318!important;min-height:20px}.colors{display:flex;gap:14px;flex-wrap:wrap}.swatch{width:46px;height:46px;border-radius:50%;border:3px solid #fff;outline:1px solid #bbc;cursor:pointer}.close{margin-top:22px;border:0;padding:10px 18px;border-radius:9px;cursor:pointer}
    .user-panel,.avatar-dialog{position:fixed;inset:0;background:#0006;display:none;place-items:center;z-index:21}.user-panel.open,.avatar-dialog.open{display:grid}.user-card{text-align:center}.user-card .avatar{width:88px;height:88px;border-color:var(--primary)}.user-card p{color:#607070}.empty{font-size:12px;color:#738181;text-align:center;padding:22px 5px}.avatar-picker{display:grid;place-items:center;margin:4px 0 15px}.avatar-picker button{width:92px;height:92px;border-radius:50%;background:#e5f3f3;border:3px dashed var(--primary);display:grid;place-items:center;overflow:hidden;cursor:pointer;color:var(--dark);text-align:center;font-size:12px}.avatar-picker img{width:100%;height:100%;object-fit:cover;display:none}.avatar-box{width:min(650px,94vw);max-height:92vh;overflow:auto}.avatar-box h3{text-align:center}.presets{display:grid;grid-template-columns:repeat(5,minmax(54px,1fr));gap:16px;direction:ltr}.preset{width:100%;aspect-ratio:1;border-radius:50%;border:3px solid transparent;background-repeat:no-repeat;background-size:cover;background-position:center;cursor:pointer;box-shadow:0 2px 7px #0002;overflow:hidden}.preset:hover,.preset.selected{border-color:var(--primary);transform:scale(1.04)}.avatar-actions{display:flex;gap:12px;margin-top:22px}.avatar-action{flex:1;height:50px;border:0;border-radius:11px;background:var(--primary);color:#fff;font-weight:bold;cursor:pointer}.avatar-action:disabled{background:#aeb8b8;color:#e7ebeb;cursor:not-allowed}.avatar-action input{display:none}.camera-view{display:none;margin-top:15px;text-align:center}.camera-view.open{display:block}.camera-view video{width:100%;max-height:250px;border-radius:12px;background:#111}.camera-controls{display:flex;justify-content:center;gap:10px;margin-top:9px}.camera-controls button{padding:9px 18px;border:0;border-radius:9px;cursor:pointer}.avatar-note{text-align:center;color:#6d7b7b;font-size:12px}
    #editAvatarOpen span{display:none}
    .bottom-nav{direction:rtl;display:grid;grid-template-columns:1fr 1fr;background:#fff;border-top:1px solid #d5e2e2}.nav-btn{border:0;background:#fff;color:#647474;font-weight:bold;cursor:pointer}.nav-btn:hover,.nav-btn.active{color:var(--dark);background:#eaf7f7}.settings-grid{display:grid;gap:15px}.settings-item{border:1px solid #dce7e7;border-radius:12px;padding:14px}.settings-item>label{display:block;font-size:13px;margin-bottom:10px}.settings-item input[type=file]{display:none}.settings-actions{display:flex;gap:10px;flex-wrap:wrap}.settings-actions button,.background-colors button{border:0;border-radius:10px;background:var(--primary);color:#fff;padding:11px 14px;cursor:pointer}.settings-actions .logout-btn{background:#b42318}.background-colors{display:flex;gap:10px;flex-wrap:wrap}.background-colors button{width:40px;height:40px;border-radius:50%;padding:0;border:3px solid #fff;outline:1px solid #aab}.remove-bg{background:#697777!important}.user-settings-card{width:min(560px,94vw);max-height:90vh;overflow:auto}.font-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.font-option{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:76px;padding:12px 14px;border:1px solid #d5e4e4;border-radius:14px;background:linear-gradient(145deg,#fff,#f2f9f9);color:#263b3b;cursor:pointer;text-align:right;transition:.18s ease;box-shadow:0 3px 10px #1332}.font-option:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:0 7px 18px #008f8f22}.font-option.active{border:2px solid var(--primary);background:#e8ffff;box-shadow:0 0 0 3px #00caca1b}.font-option.active:after{content:'✓';position:absolute;left:10px;top:9px;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--primary);color:#fff;font:700 14px Arial}.font-option strong{font-size:19px}.font-option small{color:#748585;font:12px Tahoma,sans-serif}.hidden{display:none!important}.admin-card{width:min(1000px,96vw);max-height:90vh;overflow:auto}.admin-table-wrap{overflow:auto}.admin-table{width:100%;border-collapse:collapse;min-width:650px}.admin-table th,.admin-table td{padding:11px;border-bottom:1px solid #dce7e7;text-align:right}.admin-table th{background:#edf5f5;position:sticky;top:0}.admin-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover}.admin-error{color:#b42318}.admin-count{color:#607070}
    .font-menu{position:relative}.font-menu-toggle{width:100%;height:50px;border:1px solid #cbdede;border-radius:12px;background:#f5fbfb;color:#263b3b;font-weight:bold;text-align:right;padding:0 15px;cursor:pointer}.font-menu-toggle:after{content:'⌄';float:left;font:22px Arial;color:#667}.font-menu-toggle.open:after{content:'⌃'}.font-menu .font-picker{display:none;margin-top:10px}.font-menu .font-picker.open{display:grid}body,button,input,textarea,select{font-family:inherit}#userSettingsPanel{background:#fff;place-items:stretch;padding:0}#userSettingsPanel .user-settings-card{position:relative;width:100%;height:100%;max-height:none;border-radius:0;box-shadow:none;overflow:auto;padding:30px 5%}#userSettingsPanel .user-settings-card>h3{max-width:900px;margin:4px auto 24px;text-align:center}#userSettingsPanel .settings-grid{width:min(900px,100%);margin:0 auto}.settings-close-x{position:fixed;top:18px;right:18px;z-index:2;width:46px;height:46px;border:0;border-radius:50%;background:#e9f2f2;color:#354747;font:700 30px/1 Arial;cursor:pointer}.settings-close-x:hover{background:#d7e8e8}
    @media(max-width:650px){.app{grid-template-rows:70px minmax(0,1fr)}header{padding:0 10px}.avatar{width:42px;height:42px}.person span{display:none}.sidebar{width:72px;min-width:72px}.sidebar h3,.contact div:not(.public-icon){display:none}.contact{justify-content:center}footer{padding:12px;gap:8px}.send{min-width:76px}.menu{width:210px}}

    @media(max-width:420px){.font-picker{grid-template-columns:1fr}.font-option{min-height:66px}}
  /* The original Gapino palette and layout are retained. */
@font-face{font-family:GapinoSans;src:url('fonts/NotoSansArabic-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:GapinoNaskh;src:url('fonts/NotoNaskhArabic-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:GapinoKufi;src:url('fonts/NotoKufiArabic-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:GapinoPlex;src:url('fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');font-display:swap}
:root{font-family:Tahoma,GapinoSans,sans-serif}body{font-family:inherit}button,input,textarea,select{font:inherit}button{touch-action:manipulation}button:disabled{cursor:not-allowed;opacity:.65}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #86d9dc;outline-offset:2px}.app{position:relative;height:100dvh;grid-template-columns:minmax(0,1fr);grid-template-rows:82px minmax(0,1fr)}header{direction:rtl}.me{justify-self:start;flex-direction:row}.peer{justify-self:end;flex-direction:row-reverse}.person{min-width:0;font-size:14px}.person span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:27vw}.person img{flex-shrink:0}main{min-width:0;scroll-behavior:auto;overscroll-behavior:contain;padding:22px 5%}.bubble{white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext}.row{direction:rtl}.mine{justify-content:flex-start}.other{justify-content:flex-end}.message-sender{display:block;max-width:100%;overflow-wrap:anywhere;font-size:12px;font-weight:bold;margin:0 6px 6px;color:#536b6b}.meta{max-width:100%;margin:6px 0;padding:0 4px;display:flex;gap:7px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.other .meta{justify-content:flex-start}.status{font-family:Arial,sans-serif;color:#6f7a7a;letter-spacing:-1px}.status-text{font:11px Tahoma,GapinoSans,sans-serif;letter-spacing:0}.status-clock{display:inline-block;width:14px;height:14px;border:1.5px solid #788282;border-radius:50%;position:relative}.status-clock:before{content:'';position:absolute;width:4px;height:1.5px;background:#788282;top:5px;left:5px}.status-clock:after{content:'';position:absolute;width:1.5px;height:4px;background:#788282;left:5px;top:2px}.retry{border:1px solid #c5cdcd;border-radius:6px;color:#596969;background:#fff;font-size:11px;padding:3px 7px;cursor:pointer}.send{flex-shrink:0}#message{min-width:0;resize:none;line-height:1.7;padding:8px 14px;height:62px}.sidebar{min-width:170px;min-height:0;flex-shrink:0}.sidebar img{object-fit:cover;flex-shrink:0}.contact>div{min-width:0}.contact strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.public-icon{flex-shrink:0}.connection-status{position:absolute;bottom:152px;left:5%;right:21%;z-index:8;border-radius:10px;background:#fff5da;color:#775c20;padding:8px 12px;font-size:12px;text-align:center;box-shadow:0 2px 9px #0001;display:none}.connection-status.visible{display:block}.login-screen{background:#eaf1f1;overflow:auto;padding:18px 0}.login-card{margin:auto;max-height:none}.login-card p{font-size:12px;margin:10px 0}.login-card h1{font-size:24px}.login-card .field{margin:9px 0}.login-card .avatar-picker{margin:0 0 8px}.login-card .avatar-picker button{width:78px;height:78px}.remember-label{display:flex;align-items:center;gap:8px;font-size:12px}.remember-label input{accent-color:var(--primary)}.user-panel.open,.avatar-dialog.open{overflow:auto;padding:15px 0}.user-panel .dialog{max-height:92dvh;overflow:auto}.avatar-picker img{display:block}.preset{display:grid;place-items:center;padding:0}.preset img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.avatar-box{padding:20px}.presets{gap:12px}.avatar-note.error{min-height:0}.user-settings-card{overscroll-behavior:contain}#userSettingsPanel{z-index:21}#editPanel,#adminUsersPanel{z-index:22}#avatarDialog{z-index:23}#userSettingsPanel .user-settings-card{padding-top:80px}#userSettingsPanel.open{padding:0}.settings-close-x{z-index:24}.font-option.active:after{background:#e1e8e8;color:#647474}.settings-actions{align-items:center}.font-option{box-shadow:none}.admin-table-wrap{max-width:100%}.font-option[data-font=noto-sans]{font-family:GapinoSans}.font-option[data-font=noto-naskh]{font-family:GapinoNaskh}.font-option[data-font=noto-kufi]{font-family:GapinoKufi}.font-option[data-font=plex]{font-family:GapinoPlex}.color-selected{outline:3px solid #697777!important}#olderMessages{display:block;margin:0 auto 18px}#messageList:empty:after{content:'هنوز پیامی در این گفتگو نیست.';display:block;text-align:center;color:#708080;margin-top:12vh;font-size:13px}.dialog h3{line-height:1.8}.avatar-action{cursor:pointer}.avatar-dialog .close{display:block;margin:18px auto 0}.error{white-space:pre-wrap}.admin-count{font-size:13px}#deleteContact{color:#a32923}
@media(max-width:900px){.sidebar{width:20%;min-width:150px}}
@media(max-width:650px){.app{grid-template-rows:70px minmax(0,1fr)}.sidebar{width:74px;min-width:74px;padding:10px 3px}.sidebar h3{display:none}.sidebar .contact{padding:10px 3px;flex-direction:column;gap:4px}.sidebar .contact div:not(.public-icon){display:block;width:100%;text-align:center}.sidebar .contact strong{font-size:9px}.sidebar .contact small{display:none}.person span{display:block;font-size:11px;max-width:28vw}.person{gap:6px}.person .avatar{width:36px;height:36px}main{padding:14px 4%}.bubble{padding:10px 13px;font-size:14px}.connection-status{bottom:138px;right:85px;left:10px}footer{padding:10px;gap:8px}.send{height:60px;min-width:65px}#message{height:60px;font-size:14px}.presets{grid-template-columns:repeat(4,minmax(40px,1fr));gap:12px}.dialog{padding:20px}.font-picker{grid-template-columns:1fr 1fr}.login-card{padding:20px}.user-panel .dialog{max-height:94dvh}.font-option strong{font-size:16px}.avatar-actions{gap:8px}}
@media(max-width:380px){.presets{grid-template-columns:repeat(4,minmax(36px,1fr))}.font-picker{grid-template-columns:1fr}.sidebar{min-width:64px;width:64px}.person span{max-width:24vw}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

#chat{overflow-anchor:none}
.font-option small{font-family:inherit}.status.status-text{font-family:inherit}

#messageList{min-width:0;max-width:100%}

/* Reserve action slots even when hidden so hover never moves text or time. */
.bubble{display:flex;flex-direction:column;gap:5px;white-space:normal;unicode-bidi:normal}
.message-text{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext}
.bubble .meta{align-self:stretch;min-height:24px;margin:0;padding:0;gap:5px;line-height:1.4}
.message-time-tools{display:inline-flex;align-items:center;flex:0 0 auto;gap:5px;direction:ltr}
.message-actions{display:inline-flex;flex:0 0 auto;gap:1px;opacity:0;pointer-events:none}
.message-action{display:grid;place-items:center;flex:0 0 auto;width:24px;height:24px;padding:3px;border:0;border-radius:5px;background:#fff;color:#687575;cursor:pointer}
.message-action svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.message-action:hover{background:#edf1f1;color:#4c5858}
.row.mine:focus-within .message-actions,.row.mine.actions-open .message-actions,.row.mine.actions-hover .message-actions{opacity:1;pointer-events:auto}
@media(any-hover:hover){.row.mine .bubble:hover .message-actions{opacity:1;pointer-events:auto}}
.row.mine:focus-visible{outline:0}.row.mine:focus-visible .bubble{outline:2px solid #86d9dc;outline-offset:3px}
.mine .meta{color:#e5f0f0}.mine .status{color:#e5f0f0}.mine .status-clock{border-color:#e5f0f0}.mine .status-clock:before,.mine .status-clock:after{background:#e5f0f0}
.message-edited{font-size:10px;font-family:inherit;direction:rtl;white-space:nowrap}
.message-dialog{width:min(480px,calc(100% - 28px));max-height:85dvh;overflow:auto;padding:24px;border:1px solid #dce7e7;border-radius:16px;background:#fff;color:#243f40;box-shadow:0 12px 50px #0003;direction:rtl}
.message-dialog::backdrop{background:#122e3580}.message-dialog h3{margin:0 0 18px;color:var(--dark)}
.message-dialog label{display:block;font-size:13px;margin-bottom:8px}
.message-dialog textarea{display:block;width:100%;min-height:130px;max-height:45dvh;resize:vertical;border:1px solid #cadada;border-radius:10px;padding:10px;font:inherit;line-height:1.8;direction:rtl}
.message-edit-buttons{display:flex;gap:10px}.message-edit-buttons button{border:0;border-radius:9px;padding:9px 18px;background:var(--primary);color:#fff;cursor:pointer}
#messageEditCancel{background:#edf2f2;color:#526969}
@media(pointer:coarse){.message-action{width:28px;height:28px}.bubble .meta{min-height:28px}}

#connectionsPanel{z-index:22;background:#fff;padding:0;place-items:stretch}#connectionsPanel .connections-card{width:100%;height:100dvh;overflow:auto;overscroll-behavior:contain;padding:0 5% 30px}.connections-toolbar{position:sticky;top:0;z-index:1;background:#fff;padding:74px 0 10px;max-width:900px;margin:auto}.connections-toolbar h3{text-align:center;color:var(--dark);margin:0 0 12px}.connections-toolbar p{font-size:12px;color:#617474;line-height:1.8}.connections-actions{display:flex;gap:10px;flex-wrap:wrap}.connections-actions button,.connection-row button{border:0;border-radius:10px;background:var(--primary);color:white;padding:10px 14px;cursor:pointer}.connection-revoke{background:#f8eeee!important;color:#9c2525!important;border:1px solid #e9caca!important}.connections-list{display:flex;flex-direction:column;gap:14px;max-width:900px;margin:auto}.connection-row{min-width:0;border:1px solid #dce7e7;border-radius:14px;padding:18px;background:#f8fbfb}.connection-heading{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--dark)}.current-connection{border-radius:20px;background:#dcf3f2;color:#236c69;font-size:12px;padding:4px 10px}.connection-row dl{margin:14px 0}.connection-row dl>div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;padding:5px 0;font-size:13px}.connection-row dt{color:#637777}.connection-row dd{margin:0;min-width:0;overflow-wrap:anywhere;text-align:start;unicode-bidi:plaintext}.connection-row dd[dir=ltr]{justify-self:start;direction:ltr}#connectionsError:empty,#connectionsStatus:empty{display:none}@media(max-width:650px){#connectionsPanel .connections-card{padding:0 14px 24px}.connection-row{padding:14px}.connection-row dl>div{grid-template-columns:96px minmax(0,1fr);font-size:12px}.connections-actions button{flex:1;padding:10px;font-size:12px}.connections-toolbar{padding-top:70px}.connections-toolbar p{font-size:11px}}@media(max-height:500px){.connections-toolbar{position:static}}

/* Each column fills the content row. Only the conversation owns the composer. */
.content {
  --sidebar-width: 16%;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "contacts conversation";
  min-width: 0;
  min-height: 0;
}
.content > .sidebar {
  grid-area: contacts;
  width: auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 0;
}
.sidebar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}
.sidebar-heading h3 { margin: 5px 10px; }
.sidebar-heading .add-contact { flex: 0 0 40px; margin-top: 0; }
.sidebar > .conversation-list { min-width: 0; min-height: 0; overflow: auto; }
.conversation {
  --composer-height: 94px;
  grid-area: conversation;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--composer-height);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.conversation > #chat { grid-row: 1; min-width: 0; min-height: 0; }
.conversation > .composer {
  grid-row: 2;
  position: static;
  width: 100%;
  min-width: 0;
  min-height: var(--composer-height);
  margin: 0;
}
.conversation .connection-status { bottom: calc(var(--composer-height) + 8px); left: 12px; right: 12px; }
@media (min-width: 901px) { .content { --sidebar-width: max(170px, 16%); } }
@media (min-width: 651px) and (max-width: 900px) { .content { --sidebar-width: max(150px, 20%); } }
@media (max-width: 650px) {
  .content { --sidebar-width: 74px; }
  .conversation { --composer-height: 84px; }
  .sidebar-heading { justify-content: center; }
}
@media (max-width: 380px) { .content { --sidebar-width: 64px; } }

/* Personal colors; layout and composer dimensions remain unchanged. */
:root { --theme-header:#00686c; --theme-header-ink:#fff; --theme-page:#f5f8f8; --theme-page-ink:#172323; --theme-buttons:#079da1; --theme-buttons-ink:#fff; --theme-mine-ink:#fff; --theme-other-ink:#172323; --theme-nav:#fff; --theme-nav-ink:#172323; --theme-nav-active:#eaf7f7; --theme-contacts:#eaf1f1; --theme-contacts-ink:#172323; --theme-contact-active:#fff; --theme-contact-active-ink:#172323; }
.app > header { background:var(--theme-header); color:var(--theme-header-ink); }
body,.app,#userSettingsPanel,#colorsPanel { background:var(--theme-page); color:var(--theme-page-ink); }
.content > .sidebar { background:var(--theme-contacts); color:var(--theme-contacts-ink); }
.sidebar h3,.sidebar .contact,.sidebar .contact small,.sidebar .empty { color:inherit; }
.sidebar .contact:hover,.sidebar .contact.active { background:var(--theme-contact-active); color:var(--theme-contact-active-ink); }
.mine .bubble { color:var(--theme-mine-ink); }
.other .bubble { color:var(--theme-other-ink); }
.mine .meta,.mine .status { color:var(--theme-mine-ink); }
.other .meta,.other .status { color:var(--theme-other-ink); }
.mine .status-clock { border-color:var(--theme-mine-ink); }
.mine .status-clock:before,.mine .status-clock:after { background:var(--theme-mine-ink); }
.other .status-clock { border-color:var(--theme-other-ink); }
.other .status-clock:before,.other .status-clock:after { background:var(--theme-other-ink); }
.app .message-sender,#messageList:empty:after { color:var(--theme-page-ink); }
.bottom-nav,.bottom-nav .nav-btn { background:var(--theme-nav); color:var(--theme-nav-ink); }
.bottom-nav .nav-btn:hover,.bottom-nav .nav-btn.active { background:var(--theme-nav-active); color:var(--theme-nav-ink); }
.bottom-nav .nav-btn.active { box-shadow:inset 0 -3px var(--theme-buttons); }
.send,.add-contact,.search-row button,.result-add,.login-btn,.avatar-action,.camera-controls button,.settings-actions button,.message-edit-buttons button,.connections-actions button,.connection-row button,.close,.settings-close-x,#messageEditCancel,.colors-card button { background:var(--theme-buttons); color:var(--theme-buttons-ink); }
.settings-actions .logout-btn { background:#b42318; color:var(--theme-buttons-ink); }
.color-selected { outline-color:var(--theme-buttons)!important; }
html { scrollbar-color:auto; }
html[data-custom-scrollbar],html[data-custom-scrollbar] * { scrollbar-color:var(--theme-scrollbar) var(--theme-scrollbar-track); }
html[data-custom-scrollbar] *::-webkit-scrollbar { width:12px; height:12px; }
html[data-custom-scrollbar] *::-webkit-scrollbar-thumb { background:var(--theme-scrollbar); border:2px solid var(--theme-scrollbar-track); border-radius:12px; }
html[data-custom-scrollbar] *::-webkit-scrollbar-track { background:var(--theme-scrollbar-track); }
#colorsPanel { z-index:25; padding:0; place-items:stretch; overflow:auto; }
.colors-card { width:min(1000px,100%); margin:0 auto; padding:0 24px 32px; min-width:0; }
.colors-toolbar { position:sticky; top:0; z-index:1; background:var(--theme-page); display:flex; align-items:center; gap:20px; padding:20px 0; }
.colors-toolbar h2 { margin:0; font-size:22px; }
.colors-card button { border:0; border-radius:10px; padding:11px 22px; cursor:pointer; }
.colors-note { line-height:1.9; font-size:13px; margin:0 0 20px; }
.colors-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }
.color-fields { display:grid; gap:10px; min-width:0; }
.color-setting { display:grid; grid-template-columns:minmax(0,1fr) 52px 78px; align-items:center; gap:10px; padding:12px; border:1px solid #a3b5b5; border-radius:12px; }
.color-setting span { font-size:13px; line-height:1.7; }
.color-setting input { width:52px; height:40px; padding:2px; cursor:pointer; border:1px solid #8b9f9f; border-radius:7px; background:#fff; }
.color-setting input:disabled { cursor:default; opacity:.5; }
.color-setting output { font:12px Tahoma,sans-serif; text-align:center; }
.scroll-default { display:flex; gap:9px; align-items:center; padding:8px; font-size:13px; line-height:1.8; }
.scroll-default input { width:18px; height:18px; flex-shrink:0; }
.colors-actions { display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
#colorsStatus { min-height:1.8em; line-height:1.8; font-size:13px; }
#colorsError:empty { display:none; }
.theme-preview { border:1px solid #a3b5b5; border-radius:16px; overflow:hidden; min-width:0; }
.preview-header { background:var(--theme-header); color:var(--theme-header-ink); padding:18px; }
.preview-body { display:grid; grid-template-columns:90px minmax(0,1fr); min-height:230px; }
.preview-contacts { background:var(--theme-contacts); color:var(--theme-contacts-ink); padding:16px 8px; font-size:12px; line-height:1.8; }
.preview-contacts span { display:block; margin-top:16px; font-size:11px; }
.preview-chat { background:var(--theme-page); padding:16px 10px; display:flex; flex-direction:column; gap:18px; align-items:flex-start; overflow:auto; max-height:230px; }
.preview-mine,.preview-other { border-radius:12px; padding:10px; max-width:90%; font-size:12px; }
.preview-mine { background:var(--mine); color:var(--theme-mine-ink); }
.preview-other { background:var(--other); color:var(--theme-other-ink); align-self:flex-end; }
.preview-nav { display:grid; grid-template-columns:1fr 1fr; text-align:center; padding:15px 5px; background:var(--theme-nav); color:var(--theme-nav-ink); font-size:12px; }
@media(max-width:700px) { .colors-layout { grid-template-columns:minmax(0,1fr); } .colors-card { padding:0 14px 24px; } .colors-toolbar { padding:14px 0; } .color-setting { gap:7px; padding:10px; } }

.settings-actions .remove-bg { background:var(--theme-buttons)!important; color:var(--theme-buttons-ink); }

/* The action-button text color is independent from its background. */
.open-colors-button { width:100%; min-height:48px; }
.connections-actions .connection-revoke { background:#b42318!important; color:var(--theme-buttons-ink)!important; }


/* Navigation belongs below contacts; the conversation reaches the viewport bottom. */
.sidebar > .sidebar-heading { padding:14px 9px 0; }
.sidebar > .conversation-list { padding:0 9px 10px; }
.sidebar > .bottom-nav {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto;
  min-width:0;
  margin:0;
  border-top:1px solid #d5e2e2;
}
.sidebar > .bottom-nav .nav-btn { min-width:0; min-height:44px; padding:10px 6px; white-space:normal; overflow-wrap:anywhere; }
.sidebar > .bottom-nav .nav-btn + .nav-btn { border-top:1px solid #d5e2e2; }
.sidebar > .bottom-nav .nav-btn.active { box-shadow:inset -3px 0 var(--theme-buttons); }
@media(max-width:650px) {
  .sidebar > .sidebar-heading { padding:10px 3px 0; }
  .sidebar > .conversation-list { padding:0 3px 8px; }
  .sidebar > .bottom-nav .nav-btn { min-height:42px; padding:10px 3px; font-size:11px; }
}