/* Abri Chat v2.21 — Chat v3 visual system.
   Deliberately scoped to #app, chat utility surfaces and direct calls.
   Meeting / classroom selectors are not changed here. */
@layer chat-v3 {
  .chat-v3 {
    --v3-accent:#2f80ed;
    --v3-accent-strong:#1d6fd8;
    --v3-accent-soft:color-mix(in srgb,var(--v3-accent) 12%,transparent);
    --v3-bg:#eef2f7;
    --v3-panel:#ffffff;
    --v3-panel-2:#f7f9fc;
    --v3-text:#172033;
    --v3-muted:#667085;
    --v3-muted-2:#98a2b3;
    --v3-line:#e5e9f0;
    --v3-line-strong:#d8dee8;
    --v3-danger:#e5484d;
    --v3-success:#12a06a;
    --v3-shadow:0 14px 42px rgba(22,34,51,.10);
    --v3-radius-sm:8px;
    --v3-radius-md:12px;
    --v3-radius-lg:16px;
    --v3-sidebar:344px;
    color-scheme:light;
  }
  .chat-v3 body:not(.light){
    --v3-bg:#0d1117;
    --v3-panel:#141a22;
    --v3-panel-2:#19212b;
    --v3-text:#eef3f8;
    --v3-muted:#9ba7b5;
    --v3-muted-2:#748091;
    --v3-line:#27313d;
    --v3-line-strong:#344151;
    --v3-shadow:0 20px 54px rgba(0,0,0,.30);
    color-scheme:dark;
  }

  /* App shell */
  .chat-v3 #app.app{
    grid-template-columns:var(--v3-sidebar) minmax(0,1fr);
    background:var(--v3-bg);
    color:var(--v3-text);
  }
  .chat-v3 #app .sidebar{
    min-width:0;
    border-left:1px solid var(--v3-line);
    background:var(--v3-panel);
    box-shadow:none;
  }
  .chat-v3 #app .sidebar-head{
    height:68px;
    padding:12px 16px 8px;
    gap:10px;
    border:0;
    background:var(--v3-panel);
  }
  .chat-v3 #app .sidebar-head .icon-btn,
  .chat-v3 #app .chat-head .icon-btn{
    width:42px;height:42px;min-width:42px;
    border:0;border-radius:12px;
    color:var(--v3-muted);
    background:transparent;
    transition:background .16s ease,color .16s ease,transform .16s ease;
  }
  .chat-v3 #app .sidebar-head .icon-btn:hover,
  .chat-v3 #app .chat-head .icon-btn:hover{
    background:var(--v3-panel-2);color:var(--v3-text);
  }
  .chat-v3 #app .sidebar-head .icon-btn:active,
  .chat-v3 #app .chat-head .icon-btn:active{transform:scale(.94)}
  .chat-v3 #app .sidebar-head .icon-btn svg,
  .chat-v3 #app .chat-head .icon-btn svg{width:21px;height:21px;stroke-width:1.8}
  .chat-v3 #app .search{
    height:44px;
    border:1px solid transparent;
    border-radius:14px;
    background:var(--v3-panel-2);
    box-shadow:none;
    transition:border-color .16s,background .16s,box-shadow .16s;
  }
  .chat-v3 #app .search:focus-within{
    border-color:color-mix(in srgb,var(--v3-accent) 45%,transparent);
    background:var(--v3-panel);
    box-shadow:0 0 0 3px var(--v3-accent-soft);
  }
  .chat-v3 #app .search input{font-size:14px;color:var(--v3-text)}
  .chat-v3 #app .search input::placeholder{color:var(--v3-muted-2)}
  .chat-v3 #app .sidebar-title{
    min-height:68px;
    padding:8px 20px 9px;
    border:0;
    align-items:center;
  }
  .chat-v3 #app .sidebar-eyebrow{display:none}
  .chat-v3 #app .sidebar-title h1{margin:0;font-size:21px;line-height:1.25;font-weight:850;letter-spacing:-.35px}
  .chat-v3 #app .sidebar-title h1 b{
    display:inline-grid;min-width:24px;height:22px;padding:0 7px;place-items:center;
    border-radius:99px;background:var(--v3-panel-2);color:var(--v3-muted);font-size:11px;font-weight:750;
  }
  .chat-v3 #app #connectionText{font-size:11px;color:var(--v3-muted)}
  .chat-v3 #app #connectionDot{width:8px;height:8px;box-shadow:none}

  .chat-v3 #app .conversation-filters{
    display:flex;min-height:42px;padding:2px 16px 8px;gap:5px;overflow:auto;
    scrollbar-width:none;background:var(--v3-panel);
  }
  .chat-v3 #app .conversation-filters::-webkit-scrollbar{display:none}
  .chat-v3 #app .conversation-filters button{
    flex:0 0 auto;height:32px;padding:0 12px;border:1px solid transparent;border-radius:10px;
    background:transparent;color:var(--v3-muted);font:inherit;font-size:12px;font-weight:700;white-space:nowrap;
  }
  .chat-v3 #app .conversation-filters button:hover{background:var(--v3-panel-2);color:var(--v3-text)}
  .chat-v3 #app .conversation-filters button.active{
    border-color:color-mix(in srgb,var(--v3-accent) 18%,transparent);
    background:var(--v3-accent-soft);color:var(--v3-accent);
  }
  .chat-v3 #app .conversation-list{padding:0 8px 92px;scrollbar-color:var(--v3-line-strong) transparent}
  .chat-v3 #app .conversation{
    min-height:72px;margin:2px 0;padding:9px 10px;
    grid-template-columns:52px minmax(0,1fr);gap:11px;
    border:1px solid transparent;border-radius:14px;
    background:transparent;color:var(--v3-text);
    box-shadow:none;transform:none;
    transition:background .14s,border-color .14s;
  }
  .chat-v3 #app .conversation:hover{background:var(--v3-panel-2)}
  .chat-v3 #app .conversation.active{
    border-color:color-mix(in srgb,var(--v3-accent) 16%,transparent);
    background:var(--v3-accent-soft);
    box-shadow:none;
  }
  .chat-v3 #app .conversation-avatar,
  .chat-v3 #app .conversation-avatar>.avatar{width:52px;height:52px}
  .chat-v3 #app .conversation-avatar>.avatar{border-radius:16px;font-size:15px;font-weight:800}
  .chat-v3 #app .conversation-avatar>i{
    right:auto;left:-3px;bottom:-3px;padding:3px 5px;border:2px solid var(--v3-panel);
    border-radius:7px;background:var(--v3-muted);font-size:8px;color:#fff;
  }
  .chat-v3 #app .conv-main{gap:6px}
  .chat-v3 #app .conv-top strong{font-size:14px;font-weight:790;letter-spacing:-.1px}
  .chat-v3 #app .conv-top time{font-size:10px;color:var(--v3-muted-2)}
  .chat-v3 #app .conv-bottom>span{min-width:0;color:var(--v3-muted);font-size:12px;line-height:1.35}
  .chat-v3 #app .conversation.unread .conv-top strong{font-weight:900}
  .chat-v3 #app .conversation.unread .conv-bottom>span{color:var(--v3-text);font-weight:600}
  .chat-v3 #app .badge{
    min-width:21px;height:21px;padding:0 6px;border:0;border-radius:99px;
    background:var(--v3-accent);color:#fff;font-size:10px;box-shadow:none;
  }
  .chat-v3 #app .conversation-draft{color:var(--v3-danger);font-weight:750}
  .chat-v3 #app .new-chat-fab{
    width:52px;height:52px;left:20px;bottom:20px;border-radius:16px;
    background:var(--v3-accent);box-shadow:0 12px 28px color-mix(in srgb,var(--v3-accent) 32%,transparent);
  }

  /* Chat surface */
  .chat-v3 #app .chat-panel{background:var(--v3-bg)}
  .chat-v3 #app .active-chat{background:var(--v3-bg)}
  .chat-v3 #app .chat-head{
    height:68px;min-height:68px;padding:8px 14px;
    border-bottom:1px solid var(--v3-line);background:color-mix(in srgb,var(--v3-panel) 96%,transparent);
    box-shadow:none;backdrop-filter:blur(16px);
  }
  .chat-v3 #app .chat-profile-button{min-width:0;padding:4px 6px;border-radius:12px;gap:10px}
  .chat-v3 #app .chat-profile-button:hover{background:var(--v3-panel-2)}
  .chat-v3 #app #chatAvatar{width:44px;height:44px;border-radius:14px}
  .chat-v3 #app .chat-meta strong{max-width:min(45vw,460px);font-size:15px;font-weight:850;color:var(--v3-text)}
  .chat-v3 #app .chat-meta small{margin-top:2px;font-size:11px;color:var(--v3-muted)}
  .chat-v3 #app .chat-head-actions{gap:2px}
  .chat-v3 #app .chat-head-actions>#assignmentsBtn,
  .chat-v3 #app .chat-head-actions>#mediaBtn{display:none!important}
  .chat-v3 #app .chat-head-actions>#callBtn{color:var(--v3-accent);background:var(--v3-accent-soft)}
  .chat-v3 #app .active-assignment-chip{
    z-index:4;display:flex;height:38px;padding:0 15px;border:0;border-bottom:1px solid var(--v3-line);
    gap:8px;align-items:center;background:var(--v3-panel);color:var(--v3-text);font:inherit;text-align:right;
  }
  .chat-v3 #app .active-assignment-chip.hidden{display:none}
  .chat-v3 #app .active-assignment-chip b{font-size:11px}
  .chat-v3 #app .active-assignment-chip small{margin-right:auto;color:var(--v3-accent);font-size:10px}
  .chat-v3 #app .pinned-bar{
    height:42px;padding:5px 16px;border:0;border-bottom:1px solid var(--v3-line);
    background:var(--v3-panel);box-shadow:none;
  }
  .chat-v3 #app .pinned-bar:before{width:3px;border-radius:99px;background:var(--v3-accent)}
  .chat-v3 #app .pinned-bar b{font-size:10px;color:var(--v3-accent)}
  .chat-v3 #app .pinned-bar small{font-size:10px;color:var(--v3-muted)}

  .chat-v3 #app .messages{
    padding:18px max(22px,calc((100% - 930px)/2)) 28px;
    background-color:var(--v3-bg);
    background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--v3-muted) 8%,transparent) 1px,transparent 0);
    background-size:28px 28px;
    scroll-behavior:smooth;scrollbar-color:var(--v3-line-strong) transparent;
    overflow-anchor:auto;
  }
  .chat-v3 #app .day{margin:14px 0 18px}
  .chat-v3 #app .day span{
    padding:5px 10px;border:1px solid var(--v3-line);border-radius:99px;
    background:color-mix(in srgb,var(--v3-panel) 94%,transparent);color:var(--v3-muted);
    box-shadow:none;backdrop-filter:blur(8px);font-size:10px;font-weight:700;
  }
  .chat-v3 #app .message{
    position:relative;max-width:min(74%,560px);margin-block:2px;padding:8px 11px 6px;
    border:1px solid color-mix(in srgb,var(--v3-line) 90%,transparent);
    border-radius:14px 14px 14px 5px;
    background:var(--v3-panel);color:var(--v3-text);
    box-shadow:0 1px 2px rgba(19,33,52,.05);
    font-size:15px;line-height:1.55;
    transition:box-shadow .14s,transform .14s,background .14s;
  }
  .chat-v3 #app .message.mine{
    margin-right:auto;border-color:color-mix(in srgb,var(--v3-accent) 18%,var(--v3-line));
    border-radius:14px 14px 5px 14px;
    background:color-mix(in srgb,var(--v3-accent) 11%,var(--v3-panel));
  }
  .chat-v3 #app .message.group-middle{margin-top:2px}
  .chat-v3 #app .message.group-start{margin-top:10px}
  .chat-v3 #app .message.group-end{margin-bottom:10px}
  .chat-v3 #app .message:hover{box-shadow:0 5px 18px rgba(22,34,51,.09)}
  .chat-v3 #app .message-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.58}
  .chat-v3 #app .message-foot{margin-top:3px;gap:5px;justify-content:flex-end;color:var(--v3-muted-2);font-size:9px;line-height:1.2}
  .chat-v3 #app .message-foot .ticks.read{color:var(--v3-accent)}
  .chat-v3 #app .sender-name{margin-bottom:3px;color:var(--v3-accent);font-size:11px;font-weight:800}
  .chat-v3 #app .message-reply{
    margin:0 0 6px;padding:6px 8px;border:0;border-right:3px solid var(--v3-accent);
    border-radius:8px;background:color-mix(in srgb,var(--v3-accent) 7%,transparent);color:var(--v3-text);
  }
  .chat-v3 #app .message-quick-actions{
    position:absolute;top:50%;right:calc(100% + 7px);display:flex;padding:3px;gap:2px;
    border:1px solid var(--v3-line);border-radius:10px;background:var(--v3-panel);box-shadow:var(--v3-shadow);
    opacity:0;pointer-events:none;transform:translateY(-50%) translateX(5px);transition:.14s;
  }
  .chat-v3 #app .message.mine .message-quick-actions{right:auto;left:calc(100% + 7px)}
  .chat-v3 #app .message:hover .message-quick-actions,
  .chat-v3 #app .message:focus-within .message-quick-actions{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0)}
  .chat-v3 #app .message-quick-actions button{
    display:grid;width:30px;height:30px;place-items:center;border:0;border-radius:7px;
    background:transparent;color:var(--v3-muted);font:inherit;font-size:15px;
  }
  .chat-v3 #app .message-quick-actions button:hover{background:var(--v3-panel-2);color:var(--v3-text)}
  .chat-v3 #app .load-more{border:1px solid var(--v3-line);background:var(--v3-panel);color:var(--v3-muted);box-shadow:none}
  .chat-v3 #app .new-messages-btn{
    position:absolute;z-index:8;right:50%;bottom:88px;display:flex;height:38px;padding:0 13px;gap:7px;
    align-items:center;border:1px solid var(--v3-line);border-radius:99px;background:var(--v3-panel);
    color:var(--v3-text);font:inherit;font-size:11px;font-weight:800;box-shadow:var(--v3-shadow);
    transform:translateX(50%);
  }
  .chat-v3 #app .new-messages-btn.hidden{display:none}
  .chat-v3 #app .new-messages-btn b{display:grid;min-width:20px;height:20px;padding:0 5px;place-items:center;border-radius:99px;background:var(--v3-accent);color:#fff;font-size:9px}

  /* Composer */
  .chat-v3 #app .composer{
    min-height:76px;padding:10px max(14px,calc((100% - 930px)/2)) calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid var(--v3-line);gap:8px;background:var(--v3-panel);box-shadow:none;
  }
  .chat-v3 #app .composer>.icon-btn,
  .chat-v3 #app .composer>.send-btn{width:44px;height:44px;min-width:44px;border-radius:13px}
  .chat-v3 #app .composer>.attach,
  .chat-v3 #app .composer>.voice-btn{border:0;background:transparent;color:var(--v3-muted)}
  .chat-v3 #app .composer>.attach:hover,
  .chat-v3 #app .composer>.voice-btn:hover{background:var(--v3-panel-2);color:var(--v3-text)}
  .chat-v3 #app .compose-box{
    min-height:46px;padding:3px 8px 3px 12px;border:1px solid var(--v3-line);
    border-radius:15px;background:var(--v3-panel-2);box-shadow:none;transition:border-color .15s,background .15s,box-shadow .15s;
  }
  .chat-v3 #app .compose-box:focus-within{
    border-color:color-mix(in srgb,var(--v3-accent) 45%,transparent);background:var(--v3-panel);
    box-shadow:0 0 0 3px var(--v3-accent-soft);
  }
  .chat-v3 #app #messageInput{min-height:38px;max-height:132px;padding:8px 4px;font-size:15px;line-height:1.5;color:var(--v3-text)}
  .chat-v3 #app #messageInput::placeholder{color:var(--v3-muted-2)}
  .chat-v3 #app .composer-emoji{color:var(--v3-muted);font-size:18px}
  .chat-v3 #app .send-btn{border:0;background:var(--v3-accent);color:#fff;box-shadow:none}
  .chat-v3 #app .send-btn:hover{background:var(--v3-accent-strong)}
  .chat-v3 #app .composer[data-compose-mode="voice"]>.send-btn{display:none}
  .chat-v3 #app .composer:not([data-compose-mode="voice"])>.voice-btn{display:none}
  .chat-v3 #app .reply-bar{
    right:max(14px,calc((100% - 930px)/2));left:max(14px,calc((100% - 930px)/2));bottom:calc(100% - 8px);
    border:1px solid var(--v3-line);border-radius:12px;background:var(--v3-panel);box-shadow:var(--v3-shadow);
  }

  /* Utility panels and menus */
  .chat-v3 .chat-more-menu{
    position:fixed;z-index:140;display:flex;width:220px;padding:6px;flex-direction:column;
    border:1px solid var(--v3-line);border-radius:14px;background:var(--v3-panel);box-shadow:var(--v3-shadow);
  }
  .chat-v3 .chat-more-menu.hidden{display:none}
  .chat-v3 .chat-more-menu button{
    display:flex;min-height:42px;padding:8px 10px;border:0;border-radius:9px;gap:10px;align-items:center;
    background:transparent;color:var(--v3-text);font:inherit;font-size:12px;text-align:right;
  }
  .chat-v3 .chat-more-menu button:hover{background:var(--v3-panel-2)}
  .chat-v3 .chat-more-menu button span{display:grid;width:24px;height:24px;place-items:center;color:var(--v3-accent)}
  .chat-v3 .chat-utility-panel{
    position:fixed;z-index:90;top:0;bottom:0;left:0;width:min(380px,100vw);padding:0;
    border-right:1px solid var(--v3-line);background:var(--v3-panel);color:var(--v3-text);box-shadow:var(--v3-shadow);
    transform:translateX(0);transition:transform .2s ease;
  }
  .chat-v3 .chat-utility-panel.hidden{display:block;transform:translateX(-105%);pointer-events:none}
  .chat-v3 .chat-utility-panel>header{display:flex;height:68px;padding:10px 16px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--v3-line)}
  .chat-v3 .chat-utility-panel>header>div{display:flex;flex-direction:column}
  .chat-v3 .chat-utility-panel>header b{font-size:15px}
  .chat-v3 .chat-utility-panel>header small{font-size:10px;color:var(--v3-muted)}
  .chat-v3 .chat-utility-panel .icon-btn{width:40px;height:40px;border:0;border-radius:11px;background:var(--v3-panel-2);color:var(--v3-text)}
  .chat-v3 #chatSearchForm{padding:14px}
  .chat-v3 .utility-search{display:grid;height:44px;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;border:1px solid var(--v3-line);border-radius:12px;background:var(--v3-panel-2)}
  .chat-v3 .utility-search svg{width:18px;height:18px;margin:auto;fill:none;stroke:var(--v3-muted);stroke-width:1.8}
  .chat-v3 .utility-search input{height:100%;border:0;outline:0;background:transparent;color:var(--v3-text);font:inherit;font-size:13px}
  .chat-v3 .utility-search button{height:34px;margin-left:5px;padding:0 12px;border:0;border-radius:9px;background:var(--v3-accent);color:#fff;font:inherit;font-size:11px}
  .chat-v3 .chat-search-results{padding:0 10px 20px;overflow:auto;height:calc(100% - 136px)}
  .chat-v3 .search-result{display:flex;width:100%;padding:12px;border:0;border-bottom:1px solid var(--v3-line);flex-direction:column;gap:6px;background:transparent;color:var(--v3-text);font:inherit;text-align:right}
  .chat-v3 .search-result:hover{background:var(--v3-panel-2)}
  .chat-v3 .search-result b{font-size:12px}
  .chat-v3 .search-result span{font-size:12px;line-height:1.5;color:var(--v3-muted)}
  .chat-v3 .search-result time{font-size:9px;color:var(--v3-muted-2)}
  .chat-v3 .utility-empty{padding:36px 18px;color:var(--v3-muted);font-size:12px;text-align:center}

  /* Direct call only */
  .chat-v3 #callOverlay.call-overlay{background:rgba(6,10,16,.70);backdrop-filter:blur(18px)}
  .chat-v3 #callOverlay .call-card{
    width:min(460px,calc(100vw - 28px));min-height:min(650px,calc(100dvh - 28px));padding:14px 18px 22px;
    border:1px solid rgba(255,255,255,.12);border-radius:28px;
    background:linear-gradient(165deg,#1a2432,#0e141d 70%);box-shadow:0 30px 100px rgba(0,0,0,.55);color:#fff;
  }
  .chat-v3 #callOverlay:not(.video-mode) .call-card{justify-content:center}
  .chat-v3 #callOverlay .call-topbar{position:absolute;z-index:3;top:14px;right:16px;left:16px}
  .chat-v3 #callOverlay .secure-pill,.chat-v3 #callOverlay .quality-pill{border:1px solid #ffffff20;background:#0b111a99;backdrop-filter:blur(10px);font-size:9px}
  .chat-v3 #callOverlay .call-avatar{width:116px;height:116px;border:3px solid #ffffff20;border-radius:38px;box-shadow:0 18px 50px #0006;font-size:30px}
  .chat-v3 #callOverlay #callName{margin-top:20px;font-size:24px;letter-spacing:-.4px}
  .chat-v3 #callOverlay #callState{min-height:22px;margin-top:5px;color:#b8c4d3;font-size:12px}
  .chat-v3 #callOverlay #callTimer{margin-top:7px;color:#eaf0f7;font-size:13px}
  .chat-v3 #callOverlay .call-actions{margin-top:30px;gap:12px;flex-wrap:wrap;justify-content:center}
  .chat-v3 #callOverlay .call-action{width:64px;height:64px;border:1px solid #ffffff18;border-radius:21px;background:#ffffff12;color:#fff;box-shadow:none}
  .chat-v3 #callOverlay .call-action:hover{background:#ffffff1f}
  .chat-v3 #callOverlay .call-action small{font-size:8px}
  .chat-v3 #callOverlay .call-action.hangup{background:#e5484d;border-color:#e5484d}
  .chat-v3 #callOverlay .call-action.accept{background:#19a66d;border-color:#19a66d}
  .chat-v3 #callOverlay .enable-call-audio{
    margin:14px auto 0;padding:10px 14px;border:1px solid #69aaf455;border-radius:12px;background:#2f80ed22;color:#dcecff;font:inherit;font-size:11px;
  }
  .chat-v3 #callOverlay .enable-call-audio.hidden{display:none}
  .chat-v3 #callOverlay .call-diagnostic{margin:10px auto 0;padding:8px 12px;border-radius:10px;background:#f5a52420;color:#ffd698;font-size:10px;text-align:center}
  .chat-v3 #callOverlay .call-diagnostic.hidden{display:none}

  @media(max-width:1000px){
    .chat-v3{--v3-sidebar:310px}
    .chat-v3 #app .message{max-width:min(80%,540px)}
  }
  @media(max-width:760px){
    .chat-v3 #app.app{display:block;background:var(--v3-panel)}
    .chat-v3 #app .sidebar{width:100%;border:0}
    .chat-v3 #app.chat-open .sidebar{display:none}
    .chat-v3 #app:not(.chat-open) .chat-panel{display:none}
    .chat-v3 #app .sidebar-head{height:64px;padding:10px 12px 6px}
    .chat-v3 #app .sidebar-title{min-height:56px;padding:5px 16px}
    .chat-v3 #app .conversation-filters{padding-right:12px;padding-left:12px}
    .chat-v3 #app .conversation-list{padding:0 6px calc(84px + env(safe-area-inset-bottom))}
    .chat-v3 #app .conversation{min-height:70px;padding:8px;border-radius:12px}
    .chat-v3 #app .chat-head{height:60px;min-height:60px;padding:6px 7px}
    .chat-v3 #app #chatAvatar{width:40px;height:40px;border-radius:13px}
    .chat-v3 #app .chat-meta strong{max-width:34vw;font-size:14px}
    .chat-v3 #app .chat-meta small{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
    .chat-v3 #app .chat-head .icon-btn{width:38px;height:38px;min-width:38px;border-radius:11px}
    .chat-v3 #app .chat-head-actions>.secondary-call{display:none!important}
    .chat-v3 #app .messages{padding:14px 10px 22px;background-size:24px 24px}
    .chat-v3 #app .message{max-width:84%;padding:8px 10px 6px;font-size:16px}
    .chat-v3 #app .message-text{font-size:16px;line-height:1.52}
    .chat-v3 #app .message-quick-actions{display:none}
    .chat-v3 #app .composer{min-height:68px;padding:7px 7px calc(7px + env(safe-area-inset-bottom));gap:4px}
    .chat-v3 #app .composer>.icon-btn,.chat-v3 #app .composer>.send-btn{width:42px;height:42px;min-width:42px;border-radius:13px}
    .chat-v3 #app .compose-box{min-height:44px;border-radius:14px}
    .chat-v3 #app #messageInput{font-size:16px}
    .chat-v3 #app .new-messages-btn{bottom:calc(78px + env(safe-area-inset-bottom))}
    .chat-v3 .chat-utility-panel{width:100%;border:0}
    .chat-v3 .chat-more-menu{width:min(230px,calc(100vw - 20px))}
    .chat-v3 #callOverlay .call-card{width:100vw;min-height:100dvh;border:0;border-radius:0;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
    .chat-v3 #callOverlay .call-avatar{width:104px;height:104px;border-radius:34px}
    .chat-v3 #callOverlay .call-action{width:60px;height:60px;border-radius:20px}
  }
  @media(prefers-reduced-motion:reduce){
    .chat-v3 #app *,.chat-v3 .chat-utility-panel,.chat-v3 .chat-more-menu{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}
  }
}
@layer chat-v3 {
  .chat-v3 #app .message-reactions{display:flex;margin:5px 0 -2px;gap:4px;flex-wrap:wrap}
  .chat-v3 #app .message-reactions button{display:flex;height:25px;padding:0 7px;border:1px solid var(--v3-line);border-radius:99px;gap:4px;align-items:center;background:var(--v3-panel-2);color:var(--v3-muted);font:inherit}
  .chat-v3 #app .message-reactions button.mine{border-color:color-mix(in srgb,var(--v3-accent) 35%,var(--v3-line));background:var(--v3-accent-soft);color:var(--v3-accent)}
  .chat-v3 #app .message-reactions button b{font-size:9px}
  .chat-v3 #app .message-reactions button span{font-size:13px}
}
@layer chat-v3 {
  /* Direct-call control spacing: each circular action owns a readable label. */
  .chat-v3 #callOverlay .call-actions{
    align-items:flex-start;
    padding:0 4px 34px;
    row-gap:44px;
  }
  .chat-v3 #callOverlay .call-action{
    flex:0 0 auto;
    overflow:visible;
  }
  .chat-v3 #callOverlay .call-action small{
    top:calc(100% + 8px);
    right:50%;
    width:82px;
    transform:translateX(50%);
    color:#c7d1dd;
    font-size:9px;
    line-height:1.35;
    text-align:center;
    white-space:normal;
  }
  .chat-v3 #callOverlay .call-action.hangup{transform:none!important}
  .chat-v3 #callOverlay .call-action.hangup>svg{transform:rotate(135deg)}
  .chat-v3 #callOverlay .call-action.hangup small{transform:translateX(50%)!important}
  .chat-v3 #callOverlay .call-diagnostic{clear:both;max-width:330px;margin-top:4px;line-height:1.55}
  @media(max-width:420px){
    .chat-v3 #callOverlay .call-actions{width:100%;gap:10px;justify-content:space-around;padding-bottom:36px}
    .chat-v3 #callOverlay .call-action{width:54px;height:54px}
    .chat-v3 #callOverlay .call-action small{width:66px;font-size:8px}
  }
}