/* Hamderang Premium UI layer — keeps the existing app logic intact */
:root{
 --bg:#f5f7f4;--panel:#fffefa;--panel-2:#f0f5f1;--chat-bg:#f4f3ed;--dots:#0b51400a;
 --text:#122c29;--muted:#687b78;--line:#e3ebe6;--hover:#f1f8f4;--active:#e4f4ec;
 --accent:#087f68;--accent-dark:#056553;--accent-text:#fff;--gold:#f4b323;
 --bubble-in:#fffefa;--bubble-out:#d9f5e7;--bubble-text:#122c29;--meta:#71817c;
 --badge:#087f68;--badge-text:#fff;--input:#fffefa;--sep:#fffefae8;
 --shadow:0 8px 24px rgba(19,57,46,.07);
}
@media(prefers-color-scheme:dark){
 :root:not([data-theme=light]){--bg:#0b1715;--panel:#10221e;--panel-2:#172c27;--chat-bg:#0b1715;--dots:#ffffff08;--text:#edf7f1;--muted:#a0b7ae;--line:#263d35;--hover:#1a342c;--active:#1c4034;--accent:#20b58e;--accent-dark:#39c49f;--accent-text:#06251c;--bubble-in:#172c27;--bubble-out:#075b46;--bubble-text:#edf7f1;--meta:#a0b7ae;--badge:#20b58e;--badge-text:#06251c;--input:#172c27;--sep:#10221ee8;--shadow:0 10px 30px #0003}
}
:root[data-theme=dark]{--bg:#0b1715;--panel:#10221e;--panel-2:#172c27;--chat-bg:#0b1715;--dots:#ffffff08;--text:#edf7f1;--muted:#a0b7ae;--line:#263d35;--hover:#1a342c;--active:#1c4034;--accent:#20b58e;--accent-dark:#39c49f;--accent-text:#06251c;--bubble-in:#172c27;--bubble-out:#075b46;--bubble-text:#edf7f1;--meta:#a0b7ae;--badge:#20b58e;--badge-text:#06251c;--input:#172c27;--sep:#10221ee8;--shadow:0 10px 30px #0003}
html,body{background:var(--bg);scrollbar-color:var(--line) transparent}
button,input,textarea{transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px}
.app-shell{width:min(1600px,100%);background:var(--panel);box-shadow:0 0 70px #143a2a0b}
.sidebar{background:linear-gradient(180deg,var(--panel),var(--bg));border-inline-end:1px solid var(--line)}
.sidebar-header{min-height:76px;padding:14px 20px 10px}
.brand-inline strong{letter-spacing:-.5px}
.brand-mark{border-radius:17px;box-shadow:0 8px 20px #0b3c2b18}
.choqa-mark{background-size:cover;outline:1px solid #0a51390f}
.search-box{margin:10px 16px 14px;padding-inline:17px;border:1px solid transparent;background:var(--panel-2);border-radius:18px;min-height:48px}
.search-box:focus-within{border-color:color-mix(in srgb,var(--accent) 38%,var(--line));box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent)}
.search-box input{min-height:46px}
.conversation-list{padding:4px 10px 104px;scrollbar-width:thin}
.conversation-item{position:relative;gap:13px;margin:3px 0;width:100%;padding:13px 12px;border:1px solid transparent;border-radius:17px;text-align:start;min-height:78px}
.conversation-item:hover{background:var(--hover);border-color:var(--line);transform:translateY(-1px)}
.conversation-item.active{background:var(--active);border-color:color-mix(in srgb,var(--accent) 14%,var(--line));box-shadow:inset -3px 0 0 var(--accent)}
.conversation-copy{border-bottom:0;gap:5px}
.row-top strong{font-size:15px;font-weight:750;letter-spacing:-.2px}
.row-top time{font-size:11px}
.preview{font-size:13px;line-height:1.65}
.avatar{flex-basis:50px;width:50px;height:50px;border:2px solid var(--panel);box-shadow:0 3px 9px #102c2410}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.badge{min-width:22px;height:22px;box-shadow:0 0 0 3px var(--panel);font-size:11px}
.fab-wrap{inset-block-end:22px;inset-inline-end:22px}
.fab{width:62px;height:62px;border-radius:22px;background:linear-gradient(145deg,#10a982,var(--accent-dark));box-shadow:0 12px 26px color-mix(in srgb,var(--accent) 28%,transparent),inset 0 1px #ffffff4d;transition:transform .2s ease,box-shadow .2s ease}
.fab:hover{transform:translateY(-3px) scale(1.025);box-shadow:0 16px 32px color-mix(in srgb,var(--accent) 34%,transparent)}
.fab-menu{border:1px solid var(--line);border-radius:18px;padding:7px;box-shadow:0 18px 50px #102c2426}
.fab-menu button{border-radius:12px;min-height:44px}
.chat-panel{background-color:var(--chat-bg);background-image:radial-gradient(var(--dots) 1px,transparent 1.2px),radial-gradient(var(--dots) 1px,transparent 1.2px);background-size:24px 24px;background-position:0 0,12px 12px}
.chat-header{min-height:72px;padding:10px 20px;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.chat-heading strong{font-size:16px;font-weight:800}
.header-tools .icon-btn{border-radius:13px}
.messages{padding:20px clamp(14px,5vw,72px);gap:5px;scrollbar-width:thin}
.day-sep span{border:1px solid var(--line);border-radius:999px;padding:5px 14px;box-shadow:0 3px 12px #143a2a0a}
.message-bubble{border-radius:18px!important;box-shadow:0 2px 5px #102c2408;line-height:1.8}
.message-row.mine .message-bubble{border-end-end-radius:6px!important}
.message-row:not(.mine) .message-bubble{border-end-start-radius:6px!important}
.composer{padding:12px 16px;gap:10px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(14px);padding-bottom:max(12px,env(safe-area-inset-bottom))}
.composer>input{min-height:46px;border:1px solid var(--line)!important;background:var(--panel-2)!important;border-radius:24px;padding-inline:18px!important}
.attach-btn,.record-btn{width:44px;height:44px;flex-basis:44px;border-radius:15px}
.primary{background:linear-gradient(145deg,#0b9677,var(--accent-dark));box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 20%,transparent)}
.auth-card{border:1px solid var(--line);box-shadow:0 22px 65px #143a2a12}
@media(min-width:900px){
 .app-shell{border-inline:1px solid var(--line)}
 .sidebar{box-shadow:8px 0 30px #143a2a04}
}
@media(max-width:760px){
 .app-shell{height:100dvh;min-height:0;grid-template-columns:minmax(0,1fr);overflow:hidden}
 .sidebar{min-height:0;border-inline-end:0}
 .sidebar-header{min-height:68px;padding:10px 16px}
 .conversation-list{padding:4px 8px calc(94px + env(safe-area-inset-bottom))}
 .conversation-item{min-height:76px;padding:12px 10px;border-radius:16px}
 .search-box{margin:8px 12px 12px}
 .fab-wrap{inset-block-end:calc(88px + env(safe-area-inset-bottom));inset-inline-end:18px}
 .fab{width:58px;height:58px;border-radius:20px}
 .chat-header{min-height:64px;padding:8px 12px}
 .back-btn{display:grid}
 .messages{padding:14px 12px}
 .composer{padding:8px 10px;padding-bottom:max(9px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Phase 2: mobile ergonomics, accessibility, and network feedback */
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overscroll-behavior-y:contain}
button,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:disabled{opacity:.58;cursor:not-allowed;transform:none!important}
input,textarea{font-size:16px}
::selection{background:color-mix(in srgb,var(--accent) 22%,transparent)}
@media(max-width:760px){.app-shell{padding-bottom:env(safe-area-inset-bottom)}.fab-wrap{bottom:calc(88px + env(safe-area-inset-bottom))}.conversation-list{scroll-padding-bottom:120px}.messages{scroll-padding-bottom:24px}}
@media(min-width:761px){.app-shell{min-height:100dvh}}


/* Hamderang visual polish — WhatsApp/Telegram-inspired, without removing existing features */
:root{
 --hd-radius-xl:22px;
 --hd-bubble-shadow:0 2px 3px rgba(20,45,35,.06);
}
body{font-feature-settings:"kern";-webkit-font-smoothing:antialiased}
.app-shell{background:var(--bg);color:var(--text)}
.sidebar,.chat-panel{min-width:0}
.sidebar-header,.chat-header{box-shadow:0 1px 0 var(--line)}
.conversation-item{transition:background .16s ease,transform .16s ease,border-color .16s ease}
.conversation-item:hover{background:var(--hover);border-color:var(--line)}
.conversation-item.active,.conversation-item[aria-current="true"]{background:var(--active);border-color:color-mix(in srgb,var(--accent) 18%,var(--line))}
.avatar{box-shadow:0 1px 2px #102c2414;flex-shrink:0}
.search-box input,.search-box input:focus{outline:none}
.chat-panel{background-image:radial-gradient(var(--dots) .8px,transparent 1px);background-size:18px 18px}
.messages{gap:7px;overscroll-behavior:contain}
.message-row{max-width:100%;align-items:flex-end}
.message-bubble{position:relative;max-width:min(82%,560px);padding:9px 12px 7px!important;border:1px solid color-mix(in srgb,var(--line) 55%,transparent);box-shadow:var(--hd-bubble-shadow);overflow-wrap:anywhere;word-break:break-word}
.message-row.mine .message-bubble{background:var(--bubble-out);border-end-end-radius:5px!important}
.message-row:not(.mine) .message-bubble{background:var(--bubble-in);border-end-start-radius:5px!important}
.message-bubble img,.message-bubble video{max-width:100%;height:auto;border-radius:12px}
.message-bubble a{color:var(--accent-dark);text-underline-offset:3px}
.message-bubble .meta,.message-bubble time{font-size:11px;white-space:nowrap}
.day-sep{position:sticky;top:8px;z-index:2;pointer-events:none}
.day-sep span{background:var(--panel);color:var(--muted);font-size:12px;font-weight:700;border:1px solid var(--line);box-shadow:0 2px 9px #102c2409}
.composer{gap:8px}
.composer textarea,.composer>input{min-width:0;max-height:140px;line-height:1.65;outline:none}
.composer textarea:focus,.composer>input:focus{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}
.attach-btn,.record-btn,.header-tools .icon-btn{transition:transform .14s ease,background .14s ease}
.attach-btn:active,.record-btn:active,.header-tools .icon-btn:active,.primary:active{transform:scale(.96)}
.hd-reply-preview{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;margin:0 0 8px;padding:9px 12px;border-inline-start:4px solid var(--accent);border-radius:12px;background:var(--active);color:var(--text);direction:rtl;text-align:right;box-shadow:0 1px 3px #102c2408}
.hd-reply-preview>div{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.hd-reply-preview strong{font-size:12px;color:var(--accent-dark);font-weight:800}
.hd-reply-preview span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.hd-reply-preview button{flex:0 0 30px;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:22px;line-height:1}
.hd-reply-preview button:hover{background:var(--hover);color:var(--text)}
.hd-message-menu{border:1px solid var(--line)!important;border-radius:18px!important;background:var(--panel)!important;color:var(--text)!important;box-shadow:0 18px 55px #0b211b30!important;backdrop-filter:blur(18px);overflow:hidden}
.hd-message-menu button{min-height:42px;border-radius:11px;color:var(--text);font:inherit;text-align:right;padding:10px 12px}
.hd-message-menu button:hover{background:var(--hover)}
.hd-menu-preview{font-size:12px;line-height:1.7;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.hd-reaction-row{display:flex;gap:4px;flex-wrap:wrap;padding:6px 2px}
.hd-reaction-button{min-width:34px!important;min-height:34px!important;padding:4px!important;text-align:center!important;background:var(--panel-2)!important}
.hd-reaction-button:hover{transform:translateY(-1px)}
.hd-pinned-marker,.hd-search-hit{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px;border-radius:14px}
#hd-action-toast{max-width:calc(100vw - 32px);border-radius:14px;box-shadow:0 8px 30px #102c2420}
.fab{box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 25%,transparent);transition:transform .16s ease,box-shadow .16s ease}
.fab:hover{transform:translateY(-2px);box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 30%,transparent)}
button:focus-visible,[role="button"]:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:760px){
 .message-bubble{max-width:88%;padding:8px 10px 6px!important}
 .messages{gap:6px;padding:12px 10px}
 .hd-message-menu{max-width:calc(100vw - 20px)}
 .hd-reply-preview{padding:8px 10px}
 .composer{gap:6px}
}
@media(min-width:761px){
 .chat-panel{border-radius:0}
 .message-bubble{max-width:min(72%,600px)}
}

/* رفع مشکل به هم ریختن فیلد تایپ موقع پاسخ */
.composer { position: sticky !important; bottom: 0 !important; background: #ffffff !important; z-index: 100 !important; padding: 12px 16px !important; border-top: 1px solid #e2e8f0 !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.composer input { flex: 1 !important; padding: 12px 16px !important; border-radius: 24px !important; background: #f1f5f9 !important; border: 1px solid transparent !important; color: #0f172a !important; font-size: 15px !important; transition: all 0.2s ease !important; }
.composer input:focus { background: #ffffff !important; border-color: #10b981 !important; outline: none !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important; }
.reply-preview { position: absolute !important; bottom: 100% !important; left: 0 !important; right: 0 !important; background: #f8fafc !important; border-top: 1px solid #e2e8f0 !important; padding: 10px 16px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; }

/* ===== v2 ===== */
.hd-hide{display:none!important}
.hd-voice-control,.hd-reply-preview{display:none!important}
/* bottom nav must never sit on top of an open chat */
body:has(.app-shell.chat-open) .hd-bottom-nav{display:none!important}
/* stats / filter tiles */
.hd2-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:8px 12px 2px;direction:rtl}
.hd2-tile{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;padding:9px 4px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);cursor:pointer;transition:background .15s,border-color .15s,transform .12s}
.hd2-tile:active{transform:scale(.97)}
.hd2-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hd2-tile.on{background:color-mix(in srgb,var(--accent) 14%,var(--panel));border-color:var(--accent)}
.hd2-ic{font-size:17px;line-height:1}
.hd2-cp{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.hd2-cp b{font-size:15px;line-height:1.1}
.hd2-cp small{font-size:10px;color:var(--muted);white-space:nowrap}
@media(max-width:380px){.hd2-stats{gap:5px;padding-inline:8px}.hd2-ic{font-size:14px}.hd2-cp small{font-size:9px}}
/* reply bar lives above the composer row, never inside it */
.hd2-reply{display:flex;align-items:center;gap:8px;margin:0 10px 6px;padding:8px 12px;border-radius:14px;border:1px solid var(--line);border-inline-start:4px solid var(--accent);background:var(--panel);color:var(--text);direction:rtl}
.hd2-reply-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hd2-reply-body strong{font-size:12px;color:var(--accent)}
.hd2-reply-body span{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd2-reply-x{flex:0 0 32px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:22px;line-height:1}
.hd2-reply-x:hover{background:var(--hover)}
.hd2-quote{display:block;margin-bottom:5px;padding:5px 9px;border-inline-start:3px solid var(--accent);border-radius:6px;background:color-mix(in srgb,var(--accent) 10%,transparent);font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd2-ro{margin:0 10px 10px;padding:12px;text-align:center;border-radius:14px;background:var(--panel-2);color:var(--muted);font-size:13px}
/* composer: input always gets the free width, buttons keep their size */
.composer{flex-wrap:nowrap;align-items:center}
.composer>input{flex:1 1 auto;min-width:0;unicode-bidi:plaintext;text-align:start}
.composer>.attach-btn,.composer>.record-btn,.composer>.send-btn{flex:0 0 auto}
.chat-panel{position:relative}
/* toast: top of screen, auto hides, never covers nav or composer */
.hd2-toast{position:fixed;z-index:10050;inset-inline:12px;top:calc(10px + env(safe-area-inset-top));margin:auto;width:fit-content;max-width:min(92vw,520px);padding:11px 16px;border-radius:14px;background:var(--text);color:var(--bg);font:600 13px/1.7 inherit;text-align:center;box-shadow:0 8px 28px #0003;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .2s,transform .2s}
.hd2-toast.show{opacity:1;transform:none}
.hd2-toast[data-kind=error]{background:var(--danger);color:#fff}
/* search button now sits in the chat header */
.hd-search-launch{position:static!important;width:40px;height:40px;box-shadow:none!important;background:transparent;border:0;border-radius:50%;color:var(--muted);font-size:22px;display:grid;place-items:center}
.hd2-info{font-size:20px}
.hd-search-panel{top:calc(68px + env(safe-area-inset-top))}

/* v3: show full names of people/groups (no single-line ellipsis) */
.chat-heading strong,.row-top strong{white-space:normal;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.4;overflow-wrap:anywhere;word-break:break-word}
.chat-heading{min-width:0;flex:1 1 auto}
.row-top{align-items:flex-start;min-width:0}
@media(max-width:520px){.chat-header{gap:6px}.chat-header .header-tools{gap:0;flex:0 0 auto}.chat-header .header-tools .icon-btn{width:36px;height:36px}.chat-header .back-btn{flex:0 0 auto}}

/* V49 hotfix: mobile chat layout.
   A sticky composer was being positioned relative to a tall page, leaving
   a large blank area and pushing the conversation header out of view. */
@media (max-width: 700px) {
  html, body { min-height: 100%; }
  body { min-height: 100dvh; }
  .chat-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    align-self: stretch !important;
    isolation: isolate !important;
    flex: 0 0 auto !important;
  }
  .composer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 1000 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    background: var(--bg, #f7f8f6) !important;
  }
  .messages {
    min-height: 0 !important;
    overscroll-behavior: contain;
    scroll-padding-bottom: 112px;
    padding-bottom: 112px !important;
  }
  .composer input, .composer textarea { min-width: 0 !important; }
}


/* V49 hotfix v3: keep the active conversation header visible while scrolling */
@media (max-width: 700px) {
  .chat-panel {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .chat-panel > .chat-header,
  .chat-panel .chat-header {
    position: sticky !important;
    inset-block-start: 0 !important;
    flex-shrink: 0 !important;
    z-index: 1200 !important;
    background: var(--panel, #fffefa) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-top: 12px !important;
    padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
  }
  .composer {
    inset-block-end: 0 !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
}


/* Homdorong V49 fix: mobile must show either inbox OR active conversation, never both */
@media (max-width: 820px) {
  .app-shell:not(.chat-open) .sidebar {
    display: flex !important;
  }
  .app-shell:not(.chat-open) .chat-panel {
    display: none !important;
  }
  .app-shell.chat-open .sidebar {
    display: none !important;
  }
  .app-shell.chat-open .chat-panel {
    display: flex !important;
    min-height: 0 !important;
  }
  .app-shell.chat-open {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .app-shell.chat-open .chat-header {
    display: flex !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 120 !important;
    flex-shrink: 0 !important;
  }
}

/* V49 HOTFIX: keep conversation header visible while messages scroll */
html,body{height:100%;min-height:100%;overscroll-behavior:none}
body{margin:0}
.app-shell{height:100dvh!important;min-height:0!important;overflow:hidden!important}
.chat-panel{height:100%;min-height:0!important;max-height:100%;overflow:hidden!important;display:flex!important;flex-direction:column!important;position:relative}
.chat-panel>.chat-header{display:flex!important;position:relative!important;top:auto!important;z-index:20!important;flex:0 0 auto!important;min-height:60px;visibility:visible!important;opacity:1!important;transform:none!important}
.chat-panel>.messages{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain}
.chat-panel>.composer{position:relative!important;inset:auto!important;flex:0 0 auto!important;margin-top:0!important;z-index:15!important;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))!important}
@media(max-width:820px){
 .app-shell.chat-open .chat-panel{display:flex!important;min-height:0!important;height:100dvh!important}
 .app-shell.chat-open .chat-panel>.chat-header{display:flex!important;visibility:visible!important}
 .app-shell.chat-open .chat-panel>.messages{min-height:0!important}
}



/* V49 layout repair: single scroll container; header and composer are fixed flex rows */
html, body { width:100%; height:100%; min-height:0; margin:0; overflow:hidden; }
.app-shell {
  height:100vh !important; height:100dvh !important;
  min-height:0 !important; max-height:100dvh !important;
  overflow:hidden !important;
}
.chat-panel {
  height:100% !important; min-height:0 !important; max-height:100% !important;
  overflow:hidden !important; display:flex !important; flex-direction:column !important;
}
.chat-panel > .chat-header {
  display:flex !important; position:relative !important; inset:auto !important;
  flex:0 0 auto !important; min-height:60px !important;
  visibility:visible !important; opacity:1 !important; transform:none !important;
  z-index:5 !important;
}
.chat-panel > .inline-error,
.chat-panel > .call-panel { flex:0 0 auto !important; }
.chat-panel > .messages {
  flex:1 1 0% !important; min-height:0 !important; height:auto !important;
  overflow-x:hidden !important; overflow-y:auto !important;
  overscroll-behavior:contain !important;
}
.chat-panel > .composer {
  position:relative !important; inset:auto !important;
  flex:0 0 auto !important; width:100% !important; box-sizing:border-box !important;
  margin:0 !important; z-index:6 !important;
  padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width:820px) {
  .app-shell { grid-template-columns:minmax(0,1fr) !important; }
  .app-shell:not(.chat-open) .sidebar { display:flex !important; }
  .app-shell:not(.chat-open) .chat-panel { display:none !important; }
  .app-shell.chat-open .sidebar { display:none !important; }
  .app-shell.chat-open .chat-panel {
    display:flex !important; height:100% !important; min-height:0 !important;
    max-height:100% !important;
  }
  .app-shell.chat-open .chat-panel > .chat-header {
    display:flex !important; position:relative !important; top:auto !important;
    flex:0 0 auto !important; visibility:visible !important; opacity:1 !important;
  }
  .app-shell.chat-open .chat-panel > .messages {
    flex:1 1 0% !important; min-height:0 !important; overflow-y:auto !important;
    padding-bottom:14px !important;
  }
}