/* Hamrah Group 10 — final semantic UI/UX layer */
:root{
  --g10-canvas:var(--bg,#07111f);--g10-surface:var(--surface,#101d2f);--g10-raised:var(--surface-2,#16263a);--g10-soft:color-mix(in srgb,var(--primary) 8%,var(--g10-surface));
  --g10-border:color-mix(in srgb,var(--text,#fff) 10%,transparent);--g10-divider:color-mix(in srgb,var(--text,#fff) 7%,transparent);
  --g10-text:var(--text,#f4f7fb);--g10-muted:var(--muted,#8fa0b5);--g10-owner-bg:rgba(129,91,246,.16);--g10-owner-bg-hover:rgba(139,101,255,.24);--g10-owner-text:#c8b4ff;--g10-owner-border:rgba(161,128,255,.28);
  --g10-space-1:4px;--g10-space-2:8px;--g10-space-3:12px;--g10-space-4:16px;--g10-space-5:20px;--g10-space-6:24px;--g10-space-7:32px;
  --g10-radius-sm:8px;--g10-radius-control:12px;--g10-radius-card:16px;--g10-radius-bubble:18px;--g10-radius-sheet:24px;--g10-radius-feature:28px;
  --g10-z-base:0;--g10-z-sticky:20;--g10-z-nav:40;--g10-z-floating:60;--g10-z-menu:100;--g10-z-backdrop:120;--g10-z-dialog:140;--g10-z-media:180;--g10-z-call:220;--g10-z-critical:260;
  --g10-motion-fast:110ms;--g10-motion-control:160ms;--g10-motion-menu:180ms;--g10-motion-message:220ms;--g10-motion-page:260ms;--g10-motion-sheet:300ms;
  --g10-ease:cubic-bezier(.2,.72,.24,1);--g10-ease-out:cubic-bezier(.16,1,.3,1);
}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--primary) 35%,transparent) transparent}
button,input,textarea,select{font:inherit}button,[role=button],[data-room],[data-message-action],[data-room-menu]{-webkit-tap-highlight-color:transparent}
button:focus-visible,[role=button]:focus-visible,select:focus-visible,input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid color-mix(in srgb,var(--primary) 72%,#fff);outline-offset:2px}
input:not([type=checkbox]):not([type=radio]):focus-visible,textarea:focus-visible,[contenteditable=true]:focus-visible{outline:0;outline-offset:0}
body.g10-scroll-locked{overflow:hidden;overscroll-behavior:none}.sheet-backdrop[aria-hidden=true]{pointer-events:none!important}
.g10-owner-badge{display:inline-flex;align-items:center;justify-content:center;min-height:18px;padding:1px 7px;border:1px solid var(--g10-owner-border);border-radius:999px;background:var(--g10-owner-bg);color:var(--g10-owner-text);font-size:.56rem;font-weight:800;line-height:1.4;white-space:nowrap;vertical-align:middle;gap:3px;animation:g10BadgeIn var(--g10-motion-menu) var(--g10-ease-out) both}
@keyframes g10BadgeIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.profile-identity-line,.chat-title,.row-title b,.member-name-line{display:flex;align-items:center;gap:6px;min-width:0}
.topbar{min-height:70px;padding:calc(9px + env(safe-area-inset-top)) 14px 9px;border-bottom:1px solid var(--g10-divider);box-shadow:0 8px 28px rgba(0,0,0,.10)}
.topbar-copy h1{font-size:1.08rem;letter-spacing:-.02em}.topbar-copy small{font-size:.61rem}.mini-brand{width:39px;height:39px;border-radius:13px}
.view{padding-inline:12px}.section-head{margin-block:14px 9px}.section-head h2{font-size:.9rem}
.room-list,.contact-list,.list{gap:2px}.room-shell{position:relative;border-radius:var(--g10-radius-card);transition:background var(--g10-motion-control),transform var(--g10-motion-control)}
.room-shell:hover{background:color-mix(in srgb,var(--primary) 6%,transparent)}.list-row{min-height:68px;padding:9px 10px;border-radius:var(--g10-radius-card);transition:background var(--g10-motion-control),transform var(--g10-motion-fast)}
.list-row:active{transform:scale(.992)}.row-main{min-width:0}.row-title b{font-size:.78rem}.row-sub{font-size:.64rem;line-height:1.65;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.avatar{width:45px;height:45px;border-radius:15px}.type-tag{font-size:.48rem;padding:2px 5px;border-radius:99px;font-weight:700;opacity:.78}
.room-local-menu,.message-actions-trigger{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:10px;color:var(--g10-muted);background:transparent;opacity:0;pointer-events:none;transform:scale(.92);transition:opacity var(--g10-motion-fast),transform var(--g10-motion-fast),background var(--g10-motion-fast),color var(--g10-motion-fast)}
.room-local-menu svg,.message-actions-trigger svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.room-shell:hover .room-local-menu,.room-local-menu:focus-visible,.message:hover .message-actions-trigger,.message-actions-trigger:focus-visible{opacity:1;pointer-events:auto;transform:scale(1)}
.room-local-menu:hover,.message-actions-trigger:hover{color:var(--primary);background:var(--g10-soft)}
.message-list{padding-inline:10px;scroll-padding-block:90px}.message{margin-block:2px;transition:transform var(--g10-motion-message) var(--g10-ease-out),opacity var(--g10-motion-message),filter var(--g10-motion-message)}
.message.grouped{margin-top:-1px}.message .bubble{max-width:min(78%,620px);border-radius:var(--g10-radius-bubble);padding:8px 11px;box-shadow:0 3px 14px rgba(0,0,0,.08);border-color:var(--g10-border)}
.message.mine .bubble{box-shadow:0 4px 18px color-mix(in srgb,var(--primary) 12%,transparent)}.message-text{font-size:.76rem;line-height:1.75}.message-meta{font-size:.49rem;opacity:.75}.author{font-size:.58rem;margin-bottom:3px}
.message.message-new-in,.message.message-new-out{animation:g10MessageIn var(--g10-motion-message) var(--g10-ease-out) both}@keyframes g10MessageIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.message.search-hit .bubble{animation:g10Highlight 900ms var(--g10-ease-out)}@keyframes g10Highlight{0%,100%{box-shadow:inherit}35%{box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 24%,transparent)}}
.composer{margin:6px 9px calc(7px + env(safe-area-inset-bottom));padding:6px 7px;border-radius:20px;border:1px solid var(--g10-border);box-shadow:0 12px 34px rgba(0,0,0,.16);background:color-mix(in srgb,var(--g10-surface) 94%,transparent);backdrop-filter:blur(16px)}
.composer textarea,.composer input{line-height:1.6}.send-btn,.composer .icon-btn{transition:transform var(--g10-motion-control) var(--g10-ease-out),filter var(--g10-motion-control)}.send-btn:active,.composer .icon-btn:active{transform:scale(.9)}
.chat-header{min-height:62px;padding:8px 10px;border-bottom:1px solid var(--g10-divider);background:color-mix(in srgb,var(--g10-surface) 92%,transparent);backdrop-filter:blur(18px)}.chat-title b{font-size:.78rem}.chat-title small{font-size:.55rem}
.settings-group,.profile-card,.admin-card,.settings-category-card{border-radius:var(--g10-radius-card)!important;border-color:var(--g10-border)!important;box-shadow:0 6px 22px rgba(0,0,0,.07)!important}.settings-group{padding:14px!important}.setting-row,.plain-row{min-height:58px!important;border-radius:13px!important}.settings-title h2{font-size:.83rem}.settings-title p,.setting-copy small{font-size:.57rem}
.sheet-backdrop{z-index:var(--g10-z-backdrop)!important;background:rgba(1,7,14,.58)!important;backdrop-filter:blur(6px);transition:opacity var(--g10-motion-sheet) var(--g10-ease)}.sheet{border-radius:var(--g10-radius-sheet) var(--g10-radius-sheet) 0 0!important;border:1px solid var(--g10-border);box-shadow:0 -18px 65px rgba(0,0,0,.35);animation:g10SheetIn var(--g10-motion-sheet) var(--g10-ease-out) both}@keyframes g10SheetIn{from{transform:translateY(18px);opacity:.65}to{transform:none;opacity:1}}
.action-row{min-height:58px;border-radius:13px;transition:background var(--g10-motion-control),transform var(--g10-motion-fast)}.action-row:hover{background:var(--g10-soft)}.action-row:active{transform:scale(.992)}
.toast{z-index:var(--g10-z-dialog)!important}.bottom-nav{z-index:var(--g10-z-nav)!important;border-top:1px solid var(--g10-divider);background:color-mix(in srgb,var(--g10-surface) 94%,transparent);backdrop-filter:blur(18px)}.bottom-nav button{transition:transform var(--g10-motion-control),color var(--g10-motion-control),background var(--g10-motion-control)}.bottom-nav button:active{transform:scale(.94)}
.empty{border:1px dashed var(--g10-border);border-radius:var(--g10-radius-card);padding:26px 18px!important;background:color-mix(in srgb,var(--g10-raised) 45%,transparent);line-height:1.9}
.g10-desktop-placeholder{display:none}.g10-placeholder-mark{display:grid;place-items:center;width:76px;height:76px;border-radius:24px;background:var(--g10-soft);color:var(--primary)}.g10-placeholder-mark svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.5}.g10-desktop-placeholder kbd{padding:3px 7px;border:1px solid var(--g10-border);border-radius:7px;background:var(--g10-raised);font:inherit;font-size:.62rem}
html[data-performance-tier=balanced] *{--g10-blur:10px}html[data-performance-tier=reduced] .sheet-backdrop,html[data-performance-tier=reduced] .bottom-nav,html[data-performance-tier=reduced] .chat-header,html[data-performance-tier=reduced] .composer{backdrop-filter:none!important}html[data-performance-tier=reduced] *{box-shadow:none!important}
@media(pointer:coarse){.room-local-menu,.message-actions-trigger{display:none!important}.list-row{min-height:70px}}

/*
 * Group 10.2 responsive shell authority
 * mobile: 0–767px · tablet: 768–1099px · desktop: 1100px+
 * JavaScript mirrors these two boundaries only to expose data-layout-mode and
 * keyboard state; CSS owns geometry.
 */
html,body{block-size:100%;min-block-size:100%;overflow:hidden}
@supports(height:100dvh){html,body{block-size:100dvh}}
body{
  --g10-canvas:var(--bg);
  --g10-surface:var(--surface);
  --g10-raised:var(--surface-2);
  --g10-soft:color-mix(in srgb,var(--primary) 8%,var(--surface));
  --g10-border:color-mix(in srgb,var(--text) 10%,transparent);
  --g10-divider:color-mix(in srgb,var(--text) 7%,transparent);
  --g10-text:var(--text);
  --g10-muted:var(--muted);
}
body.amoled{
  --mine:color-mix(in srgb,var(--primary) 28%,#050505);
  --ui-bubble-sent:color-mix(in srgb,var(--primary) 28%,#050505);
  --ui-bubble-sent-text:#fff;
}
body.amoled .message.mine .bubble{background:var(--mine);color:#fff}
.app{inline-size:100%;max-inline-size:none;min-inline-size:0;min-block-size:0;background-color:var(--bg);color:var(--text)}
.app>.topbar,.app>.view,.app>.bottom-nav,.app>.chat-screen,.g10-desktop-placeholder{min-inline-size:0;min-block-size:0}
.chat-screen{overflow:hidden;background-color:var(--bg);color:var(--text)}
.messages{min-inline-size:0;min-block-size:0;overscroll-behavior:contain}
.composer{
  inline-size:auto;
  min-inline-size:0;
  display:grid;
  grid-template-columns:auto auto minmax(72px,1fr) auto auto;
  align-items:end;
}
.composer textarea{inline-size:100%;min-inline-size:0;max-inline-size:100%}
.composer[aria-hidden=true],[data-chat-state=empty] .composer,[data-chat-state=unavailable] .composer{display:none!important}
.edit-banner,.chat-search-bar,.pinned-message-banner{min-inline-size:0}
.edit-banner small,.pinned-message-copy{min-inline-size:0;overflow:hidden;text-overflow:ellipsis}

@media(max-width:767px){
  .app:not(.hidden){block-size:var(--g102-viewport-height,100vh)}
  body.chat-open .app>.topbar,
  body.chat-open .app>.view,
  body.chat-open .app>.bottom-nav,
  body.chat-open .app>[data-fab=new-conversation]{display:none!important}
  .chat-screen:not(.hidden){
    position:fixed;
    inset:0;
    inline-size:100%;
    block-size:var(--g102-viewport-height,100vh);
    max-inline-size:none;
  }
  @supports(height:100dvh){
    .app:not(.hidden),.chat-screen:not(.hidden){block-size:var(--g102-viewport-height,100dvh)}
  }
  .composer{
    margin:6px;
    margin-block-end:max(6px,env(safe-area-inset-bottom));
    padding:6px;
    gap:2px;
    border-radius:19px;
  }
  .composer .icon-btn{inline-size:38px;block-size:43px;flex:none}
  .composer .send-btn{inline-size:42px;block-size:42px;flex:none}
  .reply-banner,.edit-banner{max-inline-size:100%;padding-inline:10px}
  .bottom-nav{padding-block-end:env(safe-area-inset-bottom)}
  html[data-keyboard-open=true] .composer{margin-block-end:4px;padding-block-end:6px}
}

@media(min-width:768px){
  :root{--g102-nav-width:68px;--g102-sidebar-width:clamp(280px,34vw,360px)}
  body.g102-app-active{overflow:hidden}
  .app:not(.hidden){
    display:grid;
    direction:ltr;
    grid-template-columns:minmax(0,1fr) var(--g102-sidebar-width) var(--g102-nav-width);
    grid-template-rows:minmax(68px,auto) minmax(0,1fr);
    grid-template-areas:
      "conversation sidebar-header navigation"
      "conversation sidebar-body navigation";
    block-size:100vh;
    block-size:100dvh;
    padding:0;
    margin:0;
    overflow:hidden;
    background-color:var(--bg);
  }
  .app>.topbar{
    grid-area:sidebar-header;
    direction:rtl;
    block-size:auto;
    min-block-size:68px;
    border-inline-start:1px solid var(--g10-divider);
  }
  .app>.view{
    grid-area:sidebar-body;
    direction:rtl;
    block-size:auto;
    min-block-size:0;
    overflow-x:hidden;
    overflow-y:auto;
    background-color:var(--bg);
    padding-block-end:24px;
    border-inline-start:1px solid var(--g10-divider);
  }
  .app>.bottom-nav{
    grid-area:navigation;
    position:relative!important;
    inset:auto!important;
    direction:rtl;
    inline-size:auto!important;
    block-size:auto!important;
    display:flex!important;
    flex-direction:column;
    justify-content:flex-start;
    gap:8px;
    padding:12px 7px;
    border:0;
    border-inline-start:1px solid var(--g10-divider);
  }
  .bottom-nav button{min-block-size:58px;flex:none}
  .bottom-nav button small{font-size:.52rem}
  .app>.chat-screen{
    grid-area:conversation;
    position:relative!important;
    inset:auto!important;
    direction:rtl;
    inline-size:auto!important;
    block-size:auto!important;
    max-inline-size:none!important;
    z-index:var(--g10-z-sticky)!important;
    transform:none!important;
    border-inline-end:1px solid var(--g10-divider);
    background-color:var(--bg);
  }
  .app>.chat-screen:not(.hidden){display:flex}
  .chat-header #backFromChat{display:none}
  .g10-desktop-placeholder{
    grid-area:conversation;
    position:relative;
    direction:rtl;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    overflow:hidden;
    color:var(--muted);
    text-align:center;
    background-color:var(--bg);
    background-image:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--primary) 8%,transparent),transparent 42%);
  }
  body.chat-open .g10-desktop-placeholder{display:none}
  .g10-desktop-placeholder h2{margin:7px 0 0;color:var(--text);font-size:1.1rem}
  .g10-desktop-placeholder p{margin:0;max-inline-size:320px;font-size:.7rem}
  .g10-desktop-placeholder small{font-size:.55rem}
  .app>[data-fab=new-conversation]{display:none!important}
  .sheet-backdrop{align-items:center!important;padding:20px}
  .sheet{inline-size:min(520px,92vw)!important;max-block-size:min(84vh,760px)!important;border-radius:var(--g10-radius-sheet)!important}
  .room-local-menu{position:absolute;inset-inline-end:8px;inset-block-start:50%;translate:0 -50%}
  .room-shell .list-row{padding-inline-end:44px}
  .view.active{animation:g10ViewIn var(--g10-motion-page) var(--g10-ease-out)}
  @keyframes g10ViewIn{from{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:none}}
}

@media(min-width:1100px){
  :root{--g102-nav-width:84px;--g102-sidebar-width:clamp(330px,28vw,420px)}
  .message .bubble{max-width:min(68%,720px)}
  .bottom-nav button{min-block-size:64px}
  .bottom-nav button small{font-size:.57rem}
}
@media(max-width:520px){.message .bubble{max-width:84%}.topbar{min-height:66px}.settings-group{padding:12px!important}.g10-owner-badge{font-size:.52rem;padding-inline:6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.g10-owner-badge{animation:none}}
html[data-motion=off] *,body.motion-off *{animation:none!important;transition:none!important}


/* UX1 — Home & Navigation Simplification R1
 * Keep the proven 4.12.12 information architecture; reduce visual noise and
 * make the conversation list faster to scan. No messaging/call/media owner
 * changes live in this layer. */

/* Topbar & Header Glassmorphism */
.topbar {
  background: color-mix(in srgb, var(--g10-surface) 85%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
  border-bottom: 1px solid color-mix(in srgb, var(--g10-divider) 50%, transparent);
  transition: background var(--g10-motion-control), backdrop-filter var(--g10-motion-control);
}
#connectionStatus {
  transition: color var(--g10-motion-control) var(--g10-ease);
}

/* Chat Tools & Search */
#chatsView .chat-tools{
  margin-block-end:4px;
  padding-inline: 12px;
}
#chatsView .search-box{
  min-block-size:44px;
  border-radius:14px;
  border-color:transparent;
  background:var(--g10-raised);
  box-shadow:none;
  transition: transform var(--g10-motion-fast), box-shadow var(--g10-motion-fast), border-color var(--g10-motion-fast);
}
#chatsView .search-box:focus-within{
  transform: translateY(-1px);
  border-color:color-mix(in srgb,var(--primary) 38%,transparent);
  box-shadow:0 4px 16px color-mix(in srgb,var(--primary) 12%,transparent);
}

/* Filters */
#roomFilters{
  gap:8px;
  padding-block:8px 4px;
  position: relative;
}
#roomFilters .filter-pill{
  min-block-size:36px;
  padding:6px 14px;
  border-color:transparent;
  border-radius:14px;
  background:transparent;
  font-size:.72rem;
  font-weight: 600;
  color: var(--g10-muted);
  transition: color var(--g10-motion-control), background var(--g10-motion-control), transform var(--g10-motion-fast);
}
#roomFilters .filter-pill:hover{
  background:color-mix(in srgb, var(--g10-soft) 50%, transparent);
  color: var(--g10-text);
}
#roomFilters .filter-pill:active{
  transform: scale(0.95);
}
#roomFilters .filter-pill.active{
  color:var(--primary);
  background:var(--g10-soft);
  border-color:transparent;
}
#roomFilters .filter-pill.active::after{display:none!important}

/* Room List */
#roomList{gap:0; padding-inline: 8px;}
#roomList .room-shell{
  margin:0;
  border:0;
  border-radius:16px;
  box-shadow:none;
  transition: background var(--g10-motion-control) var(--g10-ease), transform var(--g10-motion-fast);
}
#roomList .room-shell:active{
  transform: scale(0.985);
}
#roomList .room-shell + .room-shell{
  border-block-start:1px solid color-mix(in srgb,var(--text) 3%,transparent);
}
#roomList .room-shell:hover{
  background: color-mix(in srgb, var(--primary) 4%, transparent);
  border-block-start-color: transparent;
}
#roomList .room-shell:hover + .room-shell {
  border-block-start-color: transparent;
}
#roomList .list-row{
  min-block-size:72px;
  margin:0;
  padding:10px 12px;
  border:0;
  border-radius:16px;
  box-shadow:none!important;
  animation:none!important;
}
#roomList .list-row:hover{box-shadow:none}
#roomList .avatar{
  inline-size:52px;
  block-size:52px;
  border-radius:18px;
  transition: border-radius var(--g10-motion-control);
}
#roomList .room-channel .avatar{border-radius:50%}
#roomList .row-title{gap:7px; align-items: baseline;}
#roomList .row-title b{font-size:.95rem;font-weight:760; letter-spacing: -0.01em;}
#roomList .row-title time{font-size:.64rem;font-variant-numeric:tabular-nums; color: var(--g10-muted);}
#roomList .row-sub{
  margin-block-start:3px;
  font-size:.75rem;
  line-height:1.5;
  color: var(--g10-muted);
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-inline-size: 100%;
}
#roomList .type-tag{display:none!important;animation:none!important}
#roomList .room-flags{opacity:.72}
#roomList .unread-badge{
  min-inline-size:22px;
  block-size:22px;
  padding-inline:7px;
  font-size:.62rem;
  font-weight: 700;
  border-radius: 11px;
}
#roomList .room-local-menu{transition:opacity 90ms ease,background 90ms ease,transform 90ms ease}
#roomList .room-local-menu:active{transform:scale(.92)}

/* Re-renders caused by realtime updates must not replay decorative list motion. */
#roomList .row-main,#roomList .avatar{transition-duration:120ms}
#roomList .online-dot{animation:none}

/* Bottom Nav */
.bottom-nav {
  padding-block: 8px;
}
.bottom-nav button{
  transition: transform var(--g10-motion-fast) cubic-bezier(0.34, 1.56, 0.64, 1), color var(--g10-motion-control), background var(--g10-motion-control);
  border-radius: 16px;
  padding: 6px;
  position: relative;
}
.bottom-nav button:active{transform:scale(.90)}
.bottom-nav button.active {
  color: var(--primary);
}
.bottom-nav button.active .nav-icon {
  background: var(--g10-soft);
  border-radius: 14px;
  padding: 4px 14px;
  margin-bottom: 2px;
}
.bottom-nav button .nav-icon {
  transition: background var(--g10-motion-control), padding var(--g10-motion-control), border-radius var(--g10-motion-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bottom-nav button.active .nav-icon svg{transform:scale(1.1); transition: transform var(--g10-motion-control) cubic-bezier(0.34, 1.56, 0.64, 1);}
.bottom-nav button.nav-pop .nav-icon svg,
.bottom-nav button.nav-pop small{animation:none!important}

@media(max-width:767px){
  #chatsView{padding-inline:0}
  #chatsView .chat-tools{
    position:sticky;
    inset-block-start:0;
    z-index:3;
    padding-block-start:8px;
    background:color-mix(in srgb, var(--g10-canvas) 85%, transparent);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid color-mix(in srgb, var(--g10-divider) 30%, transparent);
  }
  #roomList{margin-inline:0}
  #roomList .list-row{padding-inline:14px}
  #roomList .room-shell + .room-shell{border-block-start-color:color-mix(in srgb,var(--text) 4%,transparent)}
  
  .bottom-nav {
    border-top: none;
    box-shadow: 0 -4px 24px rgba(0,0,0,.04);
  }
}

@media(min-width:768px){
  #roomList .room-shell:focus-within{background:var(--g10-soft)}
  .bottom-nav button.active .nav-icon {
    padding: 8px 14px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * HAMRAH C2.1B HOME STRUCTURAL REDESIGN
 * Visible generational upgrade to the Home surface
 * Scoped to: .topbar / #chatsView / #roomList / .g10-desktop-placeholder
 * Frozen: Navigation · Chat · Calls · Settings · Profile
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── C2.1B  Design tokens (Home-scoped) ───────────────────────────────── */
:root {
  --c21b-header-h: 56px;
  --c21b-row-h: 72px;
  --c21b-avatar: 50px;
  --c21b-avatar-r: 17px;
  --c21b-search-h: 40px;
  --c21b-filter-h: 30px;
  --c21b-toolbar-gap: 8px;
  --c21b-row-pad-x: 14px;
  --c21b-title-size: 1.18rem;
  --c21b-name-size: .84rem;
  --c21b-preview-size: .72rem;
  --c21b-time-size: .58rem;
  --c21b-badge-size: .56rem;
  --c21b-hover: color-mix(in srgb, var(--primary) 5%, transparent);
  --c21b-active: color-mix(in srgb, var(--primary) 8%, transparent);
  --c21b-row-divider: color-mix(in srgb, var(--g10-text) 5%, transparent);
  --c21b-search-bg: color-mix(in srgb, var(--g10-raised) 70%, var(--g10-canvas));
  --c21b-search-focus-ring: color-mix(in srgb, var(--primary) 10%, transparent);
}

/* ── C2.1B-A  Header ──────────────────────────────────────────────────── */

#app > .topbar {
  display: flex;
  align-items: center;
  min-height: var(--c21b-header-h);
  padding-block: calc(4px + env(safe-area-inset-top)) 4px;
  padding-inline: 16px;
  gap: 10px;
  border-bottom: 1px solid var(--c21b-row-divider);
  box-shadow: none;
  background: var(--g10-canvas);
  transition: background var(--g10-motion-control);
}

/* Logo: smaller, rounder, subtler */
#app .topbar .mini-brand {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  flex-shrink: 0;
  opacity: .85;
  transition: opacity var(--g10-motion-control);
}
#app .topbar .mini-brand:hover {
  opacity: 1;
}

/* Title block: prominent, with inline status */
#app .topbar-copy {
  flex: 1;
  min-width: 0;
  gap: 8px;
}
#app .topbar-copy h1 {
  font-size: var(--c21b-title-size);
  font-weight: 780;
  letter-spacing: -.03em;
  line-height: 1.2;
  color: var(--g10-text);
}
#app .topbar-copy small {
  font-size: .54rem;
  opacity: .55;
  letter-spacing: 0;
}

/* Header action buttons */
#app .topbar .icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--g10-muted);
  background: transparent;
  border: 1px solid transparent;
  transition: background var(--g10-motion-control),
              color var(--g10-motion-control),
              border-color var(--g10-motion-control),
              transform var(--g10-motion-fast);
}
#app .topbar .icon-btn:hover {
  background: var(--c21b-hover);
  color: var(--g10-text);
  border-color: color-mix(in srgb, var(--g10-border) 40%, transparent);
}
#app .topbar .icon-btn:active {
  transform: scale(.90);
}

/* New Conversation button: accent treatment */
#app #topAction.glass-btn {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background var(--g10-motion-control),
              transform var(--g10-motion-fast),
              border-color var(--g10-motion-control);
}
#app #topAction.glass-btn:hover {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  border-color: color-mix(in srgb, var(--primary) 25%, transparent);
}
#app #topAction.glass-btn:active {
  transform: scale(.88);
}
#app #topAction.glass-btn svg {
  width: 18px;
  height: 18px;
}

/* ── C2.1B-A  Search ──────────────────────────────────────────────────── */

/* Home toolbar: integrated search + filters strip */
#app #chatsView .chat-tools,
#app #chatsView .home-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c21b-toolbar-gap);
  padding: 8px 14px 4px;
  margin: 0;
  border-bottom: 1px solid var(--c21b-row-divider);
}

#app #chatsView .search-box {
  flex: 1;
  min-inline-size: 140px;
  min-block-size: var(--c21b-search-h);
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: var(--c21b-search-bg);
  box-shadow: none;
  gap: 7px;
  padding-inline: 11px;
  transition: background var(--g10-motion-control),
              border-color var(--g10-motion-control) var(--g10-ease),
              box-shadow var(--g10-motion-control) var(--g10-ease);
}
#app #chatsView .search-box svg {
  width: 16px;
  height: 16px;
  opacity: .4;
  flex-shrink: 0;
  transition: opacity var(--g10-motion-control),
              color var(--g10-motion-control);
}
#app #chatsView .search-box:focus-within svg {
  opacity: .7;
  color: var(--primary);
}
#app #chatsView .search-box input {
  font-size: .74rem;
  padding-block: 7px;
  line-height: 1.3;
}
#app #chatsView .search-box input::placeholder {
  color: var(--g10-muted);
  opacity: .5;
  font-size: .72rem;
}
#app #chatsView .search-box:focus-within {
  background: var(--g10-raised);
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  box-shadow: 0 0 0 3px var(--c21b-search-focus-ring);
}

/* Clear button */
#app #chatsView .clear-search {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--g10-muted) 12%, transparent);
  color: var(--g10-muted);
  font-size: .7rem;
  display: grid;
  place-items: center;
  transition: background var(--g10-motion-fast),
              color var(--g10-motion-fast),
              transform var(--g10-motion-fast);
}
#app #chatsView .clear-search:hover {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}
#app #chatsView .clear-search:active {
  transform: scale(.85);
}

/* ── C2.1B-C  Filters ─────────────────────────────────────────────────── */

#app #roomFilters {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  flex-shrink: 0;
}

#app #roomFilters .filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-block-size: var(--c21b-filter-h);
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  font-size: .64rem;
  font-weight: 640;
  color: var(--g10-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--g10-motion-control),
              background var(--g10-motion-control),
              border-color var(--g10-motion-control),
              transform var(--g10-motion-fast);
}
#app #roomFilters .filter-pill svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: .6;
}
#app #roomFilters .filter-pill:hover {
  background: color-mix(in srgb, var(--g10-text) 5%, transparent);
  color: var(--g10-text);
}
#app #roomFilters .filter-pill:active {
  transform: scale(.94);
}
#app #roomFilters .filter-pill.active {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  border-color: color-mix(in srgb, var(--primary) 14%, transparent);
  font-weight: 720;
}
#app #roomFilters .filter-pill.active svg {
  opacity: 1;
}
#app #roomFilters .filter-pill:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 50%, transparent);
  outline-offset: 2px;
}

/* ── C2.1B-B  Conversation List ───────────────────────────────────────── */

#app #roomList {
  gap: 0;
  padding-inline: 8px;
  padding-block: 6px 0;
}

/* Room shell: clean, no visual noise */
#app #roomList .room-shell {
  position: relative;
  margin: 0;
  border: 0;
  border-radius: 13px;
  box-shadow: none;
  transition: background var(--g10-motion-control) var(--g10-ease),
              transform var(--g10-motion-fast);
}

/* Thin separator between rows, disappears on hover */
#app #roomList .room-shell + .room-shell::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(var(--c21b-row-pad-x) + var(--c21b-avatar) + 12px);
  inset-inline-end: var(--c21b-row-pad-x);
  block-size: 1px;
  background: var(--c21b-row-divider);
  transition: opacity var(--g10-motion-control);
  pointer-events: none;
}
/* Hide separator on hover of current or previous row */
#app #roomList .room-shell:hover + .room-shell::before,
#app #roomList .room-shell:hover::before {
  opacity: 0;
}

/* Remove old border-based divider */
#app #roomList .room-shell + .room-shell {
  border-block-start: none;
}

/* Hover: subtle primary tint */
#app #roomList .room-shell:hover {
  background: var(--c21b-hover);
}
#app #roomList .room-shell:active {
  transform: scale(.992);
}

/* ── C2.1B-B  Row geometry ────────────────────────────────────────────── */

#app #roomList .list-row {
  display: flex;
  align-items: center;
  min-block-size: var(--c21b-row-h);
  margin: 0;
  padding: 10px var(--c21b-row-pad-x);
  border: 0;
  border-radius: 13px;
  box-shadow: none !important;
  animation: none !important;
  gap: 12px;
}

/* ── C2.1B-B  Avatar ──────────────────────────────────────────────────── */

#app #roomList .avatar {
  inline-size: var(--c21b-avatar);
  block-size: var(--c21b-avatar);
  border-radius: var(--c21b-avatar-r);
  font-size: 1.15rem;
  font-weight: 600;
  flex-shrink: 0;
  position: relative;
  transition: transform var(--g10-motion-fast);
}
#app #roomList .room-shell:hover .avatar {
  transform: scale(1.03);
}
/* Channels get circular avatars */
#app #roomList .room-channel .avatar {
  border-radius: 50%;
}

/* ── C2.1B-B  Row content ─────────────────────────────────────────────── */

#app #roomList .row-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

/* Title line: name + flags + time */
#app #roomList .row-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
#app #roomList .row-title b {
  flex: 1;
  min-width: 0;
  font-size: var(--c21b-name-size);
  font-weight: 680;
  letter-spacing: -.01em;
  color: var(--g10-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}
#app #roomList .row-title time {
  font-size: var(--c21b-time-size);
  font-variant-numeric: tabular-nums;
  color: var(--g10-muted);
  opacity: .7;
  flex-shrink: 0;
  line-height: 1;
}

/* Preview line */
#app #roomList .row-sub {
  margin: 0;
  font-size: var(--c21b-preview-size);
  line-height: 1.45;
  color: var(--g10-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-inline-size: 100%;
}
#app #roomList .row-sub .preview-author {
  font-weight: 640;
  color: color-mix(in srgb, var(--g10-text) 65%, var(--g10-muted));
}

/* ── C2.1B-B  Unread badge ────────────────────────────────────────────── */

#app #roomList .unread-badge {
  min-inline-size: 21px;
  block-size: 21px;
  padding-inline: 6px;
  font-size: var(--c21b-badge-size);
  font-weight: 780;
  border-radius: 11px;
  line-height: 21px;
  text-align: center;
  flex-shrink: 0;
  letter-spacing: .02em;
}

/* ── C2.1B-B  Room flags ──────────────────────────────────────────────── */

#app #roomList .room-flags {
  opacity: .5;
  gap: 3px;
}
#app #roomList .room-flags svg {
  width: 13px;
  height: 13px;
}

/* Online dot */
#app #roomList .online-dot {
  animation: none;
  width: 11px;
  height: 11px;
  box-shadow: 0 0 0 2.5px var(--g10-canvas);
  border-radius: 50%;
}

/* Type tag: hidden in list */
#app #roomList .type-tag {
  display: none !important;
  animation: none !important;
}

/* Context menu: quick, compact */
#app #roomList .room-local-menu {
  transition: opacity 70ms ease, background 70ms ease, transform 70ms ease;
}
#app #roomList .room-local-menu:active {
  transform: scale(.88);
}

/* ── C2.1B-B  FAB ─────────────────────────────────────────────────────── */

[data-fab="new-conversation"] {
  border-radius: 16px;
  width: 54px;
  height: 54px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 25%, transparent),
              0 1px 3px rgba(0,0,0,.12);
}

/* ── C2.1B-C  Unread row emphasis ─────────────────────────────────────── */

#app #roomList .room-shell:has(.unread-badge) .row-title b {
  font-weight: 760;
  color: var(--g10-text);
}
#app #roomList .room-shell:has(.unread-badge) .row-title time {
  color: var(--primary);
  opacity: 1;
  font-weight: 650;
}
#app #roomList .room-shell:has(.unread-badge) .row-sub {
  color: color-mix(in srgb, var(--g10-text) 55%, var(--g10-muted));
}
/* Unread row gets a subtle left accent */
#app #roomList .room-shell:has(.unread-badge) {
  background: color-mix(in srgb, var(--primary) 3%, transparent);
}

/* ── C2.1B-C  Empty State (chatsView) ─────────────────────────────────── */

#app #chatsView .empty {
  border: 1px dashed color-mix(in srgb, var(--g10-border) 50%, transparent);
  border-radius: 16px;
  padding: 28px 20px;
  margin: 12px 8px;
  background: color-mix(in srgb, var(--g10-raised) 25%, transparent);
  font-size: .72rem;
  line-height: 1.9;
  text-align: center;
}

/* ── C2.1B-C  Desktop Placeholder (No Selection) ─────────────────────── */

#app .g10-desktop-placeholder {
  background: var(--g10-canvas);
}
#app .g10-desktop-placeholder .g10-placeholder-mark {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--primary) 7%, var(--g10-surface));
}
#app .g10-desktop-placeholder .g10-placeholder-mark svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.4;
}
#app .g10-desktop-placeholder h2 {
  font-size: 1.05rem;
  font-weight: 680;
  margin-block-start: 10px;
  letter-spacing: -.01em;
}
#app .g10-desktop-placeholder p {
  font-size: .72rem;
  opacity: .6;
  max-inline-size: 280px;
  line-height: 1.7;
  margin-block-start: 3px;
}
#app .g10-desktop-placeholder kbd {
  padding: 3px 8px;
  border: 1px solid var(--g10-border);
  border-radius: 6px;
  background: var(--g10-raised);
  font: inherit;
  font-size: .6rem;
  font-weight: 600;
}
#app .g10-desktop-placeholder small {
  font-size: .54rem;
  opacity: .45;
  margin-block-start: 4px;
}

/* ── C2.1B-D  Theme: Dark ─────────────────────────────────────────────── */

body.dark {
  --c21b-search-bg: color-mix(in srgb, var(--g10-raised) 55%, var(--g10-canvas));
  --c21b-hover: color-mix(in srgb, var(--g10-text) 4%, transparent);
  --c21b-row-divider: color-mix(in srgb, var(--g10-text) 6%, transparent);
  --c21b-search-focus-ring: color-mix(in srgb, var(--primary) 7%, transparent);
}
body.dark #app > .topbar {
  box-shadow: none;
  border-bottom-color: var(--c21b-row-divider);
}
body.dark #app #topAction.glass-btn {
  background: color-mix(in srgb, var(--primary) 8%, var(--g10-surface));
  border-color: color-mix(in srgb, var(--primary) 12%, transparent);
}
body.dark #app #roomList .online-dot {
  box-shadow: 0 0 0 2.5px var(--g10-canvas);
}

/* ── C2.1B-D  Theme: AMOLED ───────────────────────────────────────────── */

body.amoled {
  --c21b-search-bg: color-mix(in srgb, var(--g10-raised) 35%, #000);
  --c21b-hover: color-mix(in srgb, var(--g10-text) 5%, transparent);
  --c21b-row-divider: color-mix(in srgb, var(--g10-text) 7%, transparent);
  --c21b-search-focus-ring: color-mix(in srgb, var(--primary) 6%, transparent);
}
body.amoled #app > .topbar {
  background: #000;
  box-shadow: none;
  border-bottom-color: var(--c21b-row-divider);
}
body.amoled #app #topAction.glass-btn {
  background: color-mix(in srgb, var(--primary) 6%, #000);
  border-color: color-mix(in srgb, var(--primary) 10%, transparent);
}
body.amoled #app #roomList .online-dot {
  box-shadow: 0 0 0 2.5px #000;
}
body.amoled #app .g10-desktop-placeholder {
  background: #000;
}
body.amoled #app .g10-desktop-placeholder .g10-placeholder-mark {
  background: color-mix(in srgb, var(--primary) 5%, #0a0a0a);
}

/* ── C2.1B-D  Motion: reduced-motion ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  #app #chatsView .search-box,
  #app #roomList .room-shell,
  #app #roomList .list-row,
  #app #roomList .avatar,
  #app #roomFilters .filter-pill,
  #app .topbar .icon-btn,
  #app #topAction.glass-btn,
  #app #chatsView .clear-search,
  #app #roomList .room-local-menu {
    transition-duration: 0ms !important;
    transform: none !important;
  }
}
html[data-motion=off] #app #chatsView .search-box,
html[data-motion=off] #app #roomList .room-shell,
html[data-motion=off] #app #roomList .list-row,
html[data-motion=off] #app #roomList .avatar,
html[data-motion=off] #app #roomFilters .filter-pill,
html[data-motion=off] #app .topbar .icon-btn,
html[data-motion=off] #app #topAction.glass-btn {
  transition-duration: 0ms !important;
}

/* ── C2.1B-D  Responsive: Mobile ──────────────────────────────────────── */

@media (max-width: 767px) {
  :root {
    --c21b-header-h: 50px;
    --c21b-row-h: 68px;
    --c21b-avatar: 46px;
    --c21b-avatar-r: 15px;
    --c21b-row-pad-x: 12px;
    --c21b-title-size: 1.08rem;
    --c21b-name-size: .82rem;
    --c21b-preview-size: .70rem;
  }
  #app > .topbar {
    padding-block: calc(4px + env(safe-area-inset-top)) 4px;
    padding-inline: 12px;
  }
  #app #chatsView .chat-tools,
  #app #chatsView .home-toolbar {
    padding: 6px 12px 4px;
    gap: 6px;
  }
  /* Filters wrap below search on narrow mobile */
  #app #roomFilters {
    flex-wrap: wrap;
  }
  #app #roomList {
    padding-inline: 0;
  }
  #app #roomList .room-shell:active {
    transform: scale(.988);
  }
  [data-fab="new-conversation"] {
    width: 52px;
    height: 52px;
    border-radius: 15px;
  }
}

/* ── C2.1B-D  Responsive: Tablet / Desktop ────────────────────────────── */

@media (min-width: 768px) {
  #app #roomList .room-shell:focus-within {
    background: var(--c21b-active);
  }
  #app #roomList .list-row {
    padding-inline-end: 44px;
  }
  #app #roomList .room-local-menu {
    inset-inline-end: 10px;
  }
}

@media (min-width: 1100px) {
  :root {
    --c21b-row-h: 74px;
    --c21b-avatar: 52px;
    --c21b-avatar-r: 18px;
    --c21b-name-size: .86rem;
    --c21b-row-pad-x: 14px;
  }
  #app #roomList .list-row {
    padding-inline-end: 46px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * END C2.1B HOME STRUCTURAL REDESIGN
 * ═══════════════════════════════════════════════════════════════════════════ */




/* --- C2.2 REDESIGN START --- */
.c22-icon-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 44px !important; height: 44px !important; border-radius: 14px !important; background: var(--g10-surface); color: var(--text); border: 1px solid var(--g10-border); box-shadow: 0 4px 12px rgba(0,0,0,0.06); cursor: pointer; padding: 0; transition: transform var(--g10-motion-fast) ease-out, background var(--g10-motion-fast) ease-out, box-shadow var(--g10-motion-fast) ease-out !important; } .c22-icon-btn svg { width: 24px; height: 24px; } .c22-icon-btn:hover { background: var(--g10-hover); } .c22-icon-btn:active { transform: scale(0.94) !important; } .c22-icon-btn:focus-visible, .chat-tools .clear-search:focus-visible, .bottom-nav button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .c22-icon-btn, .chat-tools .clear-search, .bottom-nav button { transition: none !important; transform: none !important; } } .c22-primary { background: var(--primary) !important; color: #fff !important; border: none !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 30%, transparent) !important; } .c22-primary:hover { background: color-mix(in srgb, var(--primary) 90%, #000) !important; } .c22-primary svg { stroke: #fff; } #app #chatsView .fab[data-fab='new-conversation'] { display: none !important; } .chat-tools .clear-search { display: inline-flex !important; align-items: center; justify-content: center; width: 32px !important; height: 32px !important; border-radius: 10px !important; background: var(--g10-soft) !important; color: var(--text) !important; border: none !important; margin-inline-end: 6px; transition: background var(--g10-motion-control) ease-out, transform var(--g10-motion-fast) ease-out !important; cursor: pointer; } .chat-tools .clear-search:hover { background: var(--g10-border) !important; } .chat-tools .clear-search:active { transform: scale(0.9) !important; } .bottom-nav button { transition: transform var(--g10-motion-control) ease-out, color var(--g10-motion-control) ease-out, background var(--g10-motion-control) ease-out !important; } .bottom-nav button:active { transform: scale(0.94) !important; } .bottom-nav button.active .nav-icon { background: color-mix(in srgb, var(--primary) 12%, transparent) !important; color: var(--primary) !important; border-radius: 14px !important; transition: transform var(--g10-motion-control) ease-out !important; } .bottom-nav button .nav-icon { width: 48px !important; height: 32px !important; border-radius: 12px !important; } html .app .topbar #topAction.c22-icon-btn { width: 44px !important; height: 44px !important; border-radius: 14px !important; display: inline-flex !important; } /* --- C2.2 REDESIGN END --- */