/* One operator component contract. Existing four styles, surfaces and corner choices remain independent. */
:root{--operator-control:44px;--operator-space:16px;--operator-hairline:var(--line);--operator-selection:var(--surface-2)}
:root[data-density=compact]{--operator-space:12px}
:root:not([data-theme=dark]):not([data-material=classic]):not([data-material=solid]){--admin-canvas:radial-gradient(ellipse at 5% 0%,rgba(209,224,247,.18),transparent 55%),#f7f9fc;--admin-glass-surface:rgba(255,255,255,.94)}
:root{--admin-shadow:0 4px 18px rgba(20,30,50,.06)}:root[data-theme=dark]{--admin-shadow:0 4px 18px rgba(0,0,0,.16)}
#app .panel,#app .inbox,#app .cs-card,#app .cs-prev,#app .int-card{box-shadow:none}
#app .panel,#app .inbox{border-color:var(--operator-hairline)}
#app #view button:not([role=switch]){min-height:44px;min-width:44px}
#app #view :is(.pbtn,.sbtn,.seg button,.seg2 button),#modal :is(.pbtn,.sbtn),#appearance-dialog :is(.pbtn,.sbtn){min-height:var(--operator-control);font-size:13px;line-height:20px;font-weight:600;padding:10px 14px;box-shadow:none;transition:background-color var(--dur-1),border-color var(--dur-1),color var(--dur-1)}
#app #view .sbtn:not(:disabled),#modal .sbtn:not(:disabled){background:var(--surface);border:1px solid var(--line);color:var(--ink)}
#app #view .sbtn:hover:not(:disabled),#modal .sbtn:hover:not(:disabled){background:var(--surface-2);border-color:var(--input-line)}
#app #view :is(.pbtn,.sbtn):disabled,#modal :is(.pbtn,.sbtn):disabled{background:var(--surface-2);color:var(--soft);border-color:var(--line);cursor:not-allowed;opacity:1}
#app #view .seg button:disabled:not([aria-checked=true]){background:var(--surface-2);color:var(--soft);border-color:var(--line);cursor:not-allowed;opacity:1}#app #view .seg button:disabled{cursor:not-allowed}
#modal .pbtn.danger:not(:disabled){background:var(--err-fill);border-color:var(--err-fill);color:#fff}
#modal .pbtn.danger:hover:not(:disabled){filter:brightness(.92)}
#app #view :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),select,textarea){min-height:44px;font-size:16px;line-height:1.5;padding:10px 12px;color:var(--ink);border:1px solid var(--input-line);background:var(--surface);border-radius:var(--admin-control-radius);max-width:100%}
#app #view textarea{resize:vertical;border-radius:var(--admin-radius)}
#app #view :is(input,select,textarea)::placeholder{color:var(--soft);opacity:1}
#app :is(button,input,select,textarea,summary,a):focus-visible,#modal :is(button,input,select,textarea,summary):focus-visible,#appearance-dialog :is(button,select):focus-visible{outline:2px solid var(--link);outline-offset:2px;box-shadow:none}
#app #view :is(input,select,textarea):disabled{color:var(--soft);background:var(--surface-2);cursor:not-allowed;opacity:1}
#app #view label{color:var(--ink)}
#app #view :is(.ph,.th){border-color:var(--line)}
#app #view table th{font-family:Manrope,system-ui,sans-serif;font-size:11px;font-weight:700;text-transform:none;letter-spacing:0;color:var(--mid);background:var(--surface-2);padding:12px 14px}
#app #view table td{font-size:13px;line-height:1.6;padding:12px 14px;border-color:var(--line2)}
#app #view tbody tr:hover{background:var(--surface-2)}
#app #view :is(.it,.item,#av-list button){border-color:var(--line2);transition:background-color var(--dur-1);box-shadow:none}
#app #view :is(.it[aria-current=true],.item[aria-current=true],#av-list button[aria-current=true]){background:var(--operator-selection);box-shadow:inset 3px 0 var(--link)}
#app #view :is(.it,.item,#av-list button):hover{background:var(--surface-2)}
#app #view :is(.where,.sub,.when,.muted,.hint,.help){opacity:1}
#app #view .msgs{background:var(--fill);padding:20px;scroll-padding:20px}
#app #view .bub{font-size:16px;line-height:1.7;padding:12px 16px;max-width:min(680px,88%);box-shadow:none;border-color:var(--line)}
#app #view .bub .aname{font-size:12px;line-height:1.5;margin-bottom:6px}
#app #view .sysl{font-size:12px;line-height:1.6;margin:4px 0;color:var(--soft)}
#app #view .sysl.hot{color:var(--err);font-weight:600}
#app #view .comp{padding:12px 16px;gap:8px;background:var(--surface)}
#app #view .reply-tools{gap:4px}
#app #view .reply-tools>button{background:transparent;border:1px solid transparent;min-width:44px;min-height:44px;padding:8px}
#app #view .reply-tools>button:hover{background:var(--surface-2);border-color:var(--line)}
#app #view .reply-tools>.reply-emoji-toggle[aria-expanded=true]{background:var(--surface-2);border-color:var(--ink);border-radius:var(--admin-control-radius)}
#app #view .reply-emoji{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px}
#app #view .reply-emoji[hidden]{display:none}
#app #view .reply-emoji>button{min-width:44px;min-height:44px;padding:0;background:transparent;border:1px solid transparent;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:20px;line-height:1}
#app #view .reply-emoji>button:hover{background:var(--surface-2);border-color:var(--line)}
#app #view .reply-shortcuts summary{min-height:44px;font-size:13px;border-radius:var(--admin-control-radius);padding:8px 10px}
#app #view .reply-shortcuts summary:hover{background:var(--surface-2)}
#app #view .iside{padding:16px;background:var(--surface)}
#app #view .inbox>.iside{border-radius:0 var(--admin-radius) var(--admin-radius) 0}
#app #view .inbox>.ilist{border-radius:var(--admin-radius) 0 0 var(--admin-radius)}
#app #view .iside h4{font:700 12px/1.5 Manrope,system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--mid);margin:0 0 8px}
#app #view .iside>div+div{padding-top:16px;border-top:1px solid var(--line2)}
#app #view :is(.cs-card,.int-card){padding:var(--operator-space);background:var(--admin-raised);border-color:var(--line)}
#app #view :is(.cs-card,.int-card) h2{font-size:16px;line-height:1.5}
#app #view .cs-nav{box-shadow:none;padding:6px;background:var(--surface)}
#app #view .cs-nav button{font-size:13px;line-height:1.5;min-height:44px;padding:10px;gap:10px;border:0;border-radius:var(--admin-control-radius)}
#app #view .cs-nav button[aria-current=page]{background:var(--operator-selection);color:var(--ink);font-weight:700}
#app #view .cs-nav button[aria-current=page] svg{color:var(--link)}
#app #view .int-tabs button{min-height:44px;font-size:13px;padding:8px 12px;border-radius:var(--admin-control-radius)}
#app #view :is(.empty,.empty p){color:var(--mid);font-size:14px;line-height:1.7}
.workspace-layout-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;flex:none;margin-bottom:8px}
.workspace-layout-title{font:800 16px/1.4 Figtree,Manrope,sans-serif;letter-spacing:-.015em;color:var(--ink)}
.workspace-layout-actions{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none}
#app #view .workspace-layout-actions>button{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;padding:8px 10px;min-height:44px}
.workspace-layout-actions button[aria-expanded=false]{color:var(--mid)}
.settings-mobile-section{display:none}
#view .cs{--settings-nav-width:168px}
#view[data-screen=live]{display:flex;flex-direction:column;min-height:0;overflow:hidden}
#view[data-screen=live]>.inbox{flex:1;min-height:0;height:auto}
@media(min-width:901px){
 #view[data-screen=live]{display:flex;flex-direction:column;min-height:0;overflow:hidden}
 #view[data-screen=live]>.inbox{flex:1;min-height:0;height:auto}
 #view[data-screen=live] .inbox.open{grid-template-columns:260px minmax(0,1fr) 248px}
 #view[data-screen=live][data-layout-context=shown] .inbox.open .iside{display:block!important}
 #view[data-screen=live][data-layout-context=hidden] .inbox.open{grid-template-columns:260px minmax(0,1fr)}
 #view[data-screen=live][data-layout-context=hidden] .iside{display:none}
 #view[data-screen=live][data-layout-list=hidden] .inbox{grid-template-columns:minmax(0,1fr)}
 #view[data-screen=live][data-layout-list=hidden][data-layout-context=shown] .inbox.open{grid-template-columns:minmax(0,1fr) 248px}
 #view[data-layout-list=hidden] :is(.inbox>.ilist,.av-layout>.list,.conversation-workspace>.list){display:none}
 #view[data-screen=visitors][data-layout-list=hidden] .av-layout,#view[data-screen=conversations][data-layout-list=hidden] .conversation-workspace{grid-template-columns:minmax(0,1fr)}
 #view[data-screen=visitors][data-layout-context=hidden] .visitor-context{display:none}
 #view[data-screen=visitors][data-layout-context=hidden] .visitor-workspace{grid-template-columns:minmax(0,1fr)}
 #view[data-screen=conversations][data-layout-context=hidden] #journey{display:none}
 #view[data-screen=settings] .cs{grid-template-columns:var(--settings-nav-width) minmax(0,1fr);gap:16px;align-items:start}
 #view[data-screen=settings][data-layout-list=hidden] .cs{--settings-nav-width:56px}
 #view[data-screen=settings][data-layout-list=hidden] .cs-nav{padding:5px}
 #view[data-screen=settings][data-layout-list=hidden] .cs-nav button{padding:10px;justify-content:center}
 #view[data-screen=settings][data-layout-list=hidden] .cs-nav button span{display:none}
 #view[data-screen=settings][data-layout-wide=true][data-layout-context=shown] .cs:has(.cs-prev:not([hidden])){grid-template-columns:var(--settings-nav-width) minmax(0,1fr) 300px}
 #view[data-screen=settings] .cs-prev{grid-column:2;position:static;min-width:0}
 #view[data-screen=settings][data-layout-wide=true] .cs-prev{grid-column:auto;position:sticky;top:0}
 #view[data-screen=settings][data-layout-context=hidden] .cs-prev{display:none}
}
#view[data-screen=conversations][data-layout-context=hidden] #journey{display:none}
@media(max-width:900px){
 #app #view .workspace-layout-actions #workspace-list-toggle{display:none}
 .workspace-layout-bar{flex-wrap:wrap;gap:8px}
 .workspace-layout-title{font-size:15px}
 #app #view .workspace-layout-actions>button{padding:8px 10px}
 #view[data-screen=settings] .cs{display:block}
 #view[data-screen=settings] .cs-nav{display:none}
 .settings-mobile-section{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;flex-basis:100%;font-size:13px;font-weight:600}
 .settings-mobile-section select{width:100%}
 #view[data-screen=settings][data-layout-context=hidden] .cs-prev{display:none}
 #view[data-screen=settings][data-layout-mobile-context=true] .cs-main{display:none}
 #view[data-screen=settings][data-layout-mobile-context=true] .cs-prev{display:block;grid-column:1}
 #view[data-screen=settings][data-layout-mobile-context=true] .settings-mobile-section{display:none}
 #view[data-layout-mobile-context=true] :is(.inbox>.ilist,.inbox>.ithread,.av-layout>.list,.visitor-main){display:none!important}
 #view[data-layout-mobile-context=true] .inbox,#view[data-layout-mobile-context=true] .av-layout{display:grid;grid-template-columns:minmax(0,1fr)}
 #app #view[data-layout-mobile-context=true] .inbox>.iside{display:block!important;overflow:auto;width:100%;border:0;border-radius:var(--admin-radius)}
 #view[data-layout-mobile-context=true] .visitor-context{display:block}
 #view[data-layout-mobile-context=true] .visitor-workspace{display:block}
 #app #view .msgs{padding:16px}
 #app #view .bub{max-width:94%;padding:10px 12px}
 #app #view .comp{padding:12px}
}
@media(prefers-reduced-motion:reduce){#app #view :is(button,input,select,textarea){transition:none!important}}
@media(forced-colors:active){#app #view :is(.pbtn,.sbtn,button[aria-current=true],button[aria-selected=true]){border:1px solid ButtonText}#app #view .workspace-layout-actions button[aria-expanded=true],#app #view .reply-tools>.reply-emoji-toggle[aria-expanded=true]{outline:1px solid Highlight}}
/* Login uses the approved INFOC ONE identity and ASKLA scene, with room for the task. */
.login-parent{display:inline-flex;min-height:44px;align-items:center}.login-parent img{width:68px;height:auto}.login-logo-dark{display:none}[data-theme=dark] .login-logo-light{display:none}[data-theme=dark] .login-logo-dark{display:block}
.login .lside{gap:20px;padding:36px 40px}.login .lcopy{margin:0}.login .lcopy h2{font-size:clamp(26px,2.4vw,34px)}.login .lcopy p{margin-bottom:12px}.login .trust{font-size:13px;margin-block:12px}.login .lfoot{font-size:11px;margin-top:auto}
.login-mascot-wrap{display:grid;justify-items:center}.login-mascot{position:relative;width:min(100%,300px);height:250px}.login-mascot>img,.login-mascot>canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.login-mascot.live>img{opacity:0}
.login-home,.auth-request{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-size:13px;font-weight:600;color:var(--link);text-decoration:none}.login>.lside>.login-home{justify-content:flex-start}.auth-request{border:0;background:transparent;cursor:pointer}.login-home:hover,.auth-request:hover{text-decoration:underline}.mobile-login-home{display:none}
.invite-sites{border:1px solid var(--line);border-radius:var(--admin-radius);padding:12px}.invite-sites legend{font-size:13px;font-weight:700}.access-list{display:grid;gap:0}.access-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}.access-row>div:first-child{display:grid;gap:4px;min-width:0;overflow-wrap:anywhere}.access-row span,.access-row small{color:var(--mid)}#team-access-panel h3{margin:20px 0 4px}
@media(max-height:850px) and (min-width:861px){.login-mascot{height:180px}.login .lside{gap:12px;padding:24px 36px}.login .trust{display:none}}
@media(max-width:860px){.login .lside{padding:20px}.login .lhead{width:100%}.login-mascot-wrap,.login>.lside>.login-home{display:none}.mobile-login-home{display:flex}.access-row{align-items:stretch;flex-direction:column}.login .lfoot{display:none}}
.admin-workspace #launch-site{flex:none;width:44px;height:44px;color:var(--mid);text-decoration:none;display:grid;place-items:center}.admin-workspace #website-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-workspace #tenant{min-width:0}
/* Live list (design bundle A-4): All | Needs you | Mine, the phone Inbox's filter, kept above the rows. The track has the panel radius and
   the 44px segments sit 4px inside it; the choice is marked by aria-pressed, a raised surface, an edge and bolder words, not colour alone. */
#app #view .lv-filter{position:sticky;top:0;z-index:2;padding:8px 8px 4px;background:var(--surface)}
#app #view .lv-filter>div{display:flex;flex-wrap:wrap;gap:2px;padding:3px;border:1px solid var(--line);border-radius:var(--admin-radius);background:var(--fill)}
#app #view .lv-filter button{flex:1 1 auto;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;gap:6px;padding:2px 8px;white-space:nowrap;border:1px solid transparent;border-radius:max(4px,calc(var(--admin-radius) - 4px));background:transparent;color:var(--mid);font-weight:600;font-size:13px;line-height:1.15;text-align:center;transition:background-color var(--dur-1),color var(--dur-1)}
#app #view .lv-filter button:hover{color:var(--ink)}
#app #view .lv-filter button[aria-pressed=true]{background:var(--surface);border-color:var(--line);color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.06)}
#app #view .lv-filter .n{font-variant-numeric:tabular-nums;color:var(--soft)}
#app #view .lv-filter .n.hot{color:var(--err)}
@media(forced-colors:active){#app #view .lv-filter>div{border-color:CanvasText}#app #view .lv-filter button[aria-pressed=true]{border-color:Highlight;outline:2px solid Highlight;outline-offset:-2px}}
/* Live thread header (A-6): the visitor's wait as a chip in words and JetBrains Mono, in the error tone with an edge, ticking only on screen. */
#app #view .ithread .th .who-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
#app #view .ithread .th .who-line b{min-width:0;overflow-wrap:anywhere}
#app #view .ithread .th .who .wait-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px 2px 7px;border:1px solid currentColor;border-radius:999px;background:var(--errbg);color:var(--err);font:600 12px/1.4 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
#app #view .ithread .th .who .wait-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
#app #view .ithread .th .who .wait-chip span{color:inherit;font:inherit}
/* Live visitor journey (A-12): each page with the clock time it was last viewed, the time in tabular JetBrains Mono */
#app #view .plist li{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
#app #view .plist .pth{min-width:0;overflow-wrap:anywhere}
#app #view .plist time{flex:none;font:500 12px/1.4 var(--mono);font-variant-numeric:tabular-nums;color:var(--soft)}
/* Live rows (A-5): a 40px round avatar, who wrote the preview's line, and the state as a chip in words (the tone only echoes it). */
#app #view .it{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;align-items:start}
#app #view .it .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--mid);font-size:13px;font-weight:700;letter-spacing:.02em}
#app #view .it-main{display:grid;gap:3px;min-width:0}
#app #view .it .ago{flex:none;font-size:11px;color:var(--soft);white-space:nowrap}
#app #view .it .said{font-weight:700;color:var(--ink)}
#app #view .it .r3{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:3px;font-size:11px;color:var(--mid)}
#app #view .it .r3 .visitor-rank{margin:0;padding:1px 7px;font-size:11px}
#app #view .it .chip{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border:1px solid transparent;border-radius:999px;font-size:11px;font-weight:700;line-height:1.6;white-space:nowrap}
#app #view .it .chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
#app #view .it .chip.waiting{background:var(--errbg);color:var(--err)}
#app #view .it .chip.active{background:var(--okbg);color:var(--ok)}
#app #view .it .chip.neutral{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
#app #view .it .chip.closed{background:transparent;border-color:var(--line);color:var(--mid)}
#app #view .it .chip.closed::before{background:transparent;border:1px solid currentColor}
@media(forced-colors:active){#app #view .it .chip,#app #view .it .av{border:1px solid CanvasText}}
/* Live thread (A-7, A-8): events as centred pills on a hairline across the thread; the request for a person in the error tone with an
   edge. Before take-over the composer's explanation is an info row on the second surface, in today's words. */
#app #view .msgs .sysl{display:flex;align-items:center;align-self:stretch;gap:10px;margin:4px 0;text-align:center}
#app #view .msgs .sysl::before,#app #view .msgs .sysl::after{content:"";flex:1 1 16px;min-width:16px;border-top:1px solid var(--line)}
#app #view .msgs .sysl>span{flex:0 1 auto;padding:2px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--mid);overflow-wrap:anywhere}
#app #view .msgs .sysl.hot>span{border-color:currentColor;background:var(--errbg);color:var(--err)}
#app #view .comp>.note{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:var(--admin-radius);background:var(--surface-2);color:var(--ink);font-size:13px;line-height:1.5;padding:12px 14px}
#app #view .comp>.note svg{flex:none;margin-top:2px;color:var(--mid)}
@media(forced-colors:active){#app #view .msgs .sysl>span,#app #view .comp>.note{border:1px solid CanvasText}}
/* R-UI-5: the visitor panel's rule-based Summary on a neutral card, and the saved-reply chips above the reply box. */
#app #view .iside .summary-card{margin:0 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--admin-radius);background:var(--surface-2);color:var(--ink)}
#app #view .iside .summary-card h4{margin:0}
#app #view .summary-card .summary-note{margin:0 0 8px;font-size:12px;line-height:1.5;color:var(--mid)}
#app #view .summary-card ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
#app #view .summary-card li{font-size:13px;line-height:1.5;overflow-wrap:anywhere}
#app #view .reply-saved{grid-column:1/-1;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;min-width:0;overflow-x:auto;padding:2px;scrollbar-width:thin}
#app #view .reply-saved[hidden]{display:none}
#app #view .reply-saved-label{flex:none;font-size:12px;font-weight:600;color:var(--mid)}
#app #view .reply-saved>button{flex:none;max-width:240px;min-height:44px;padding:0 14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 13px/1.4 Manrope,system-ui,sans-serif;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--admin-control-radius);cursor:pointer}
#app #view .reply-saved>button:hover{background:var(--surface-2);border-color:var(--soft)}
#app #view .reply-saved>button:focus-visible{outline:2px solid var(--link);outline-offset:1px}
@media(forced-colors:active){#app #view .iside .summary-card,#app #view .reply-saved>button{border:1px solid CanvasText}}
/* A narrow row shows only the chips that fit (admin/shortcuts.js fit); one chip still too wide for it shortens with an ellipsis. */
#app #view .reply-saved>button[hidden]{display:none}
#app #view .reply-saved.tight>button{flex:0 1 auto;min-width:0}
/* Suggest reply (R-AI-4, R-AI-5): the toolbar's last control, a draft card above the box on the second surface (neutral, never an
   accent colour), and "Check before sending" under the composer once a draft is inserted. No motion: the busy state is in words. */
#app #view .reply-tools>.reply-suggest{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--admin-control-radius);color:var(--ink);font:600 13px/1.4 Manrope,system-ui,sans-serif;white-space:nowrap;cursor:pointer}
#app #view .reply-tools>.reply-suggest[hidden]{display:none}
#app #view .reply-tools>.reply-suggest[aria-disabled=true]{color:var(--mid);background:var(--surface-2);cursor:progress}
#app #view .reply-tools>.reply-suggest svg{flex:none;color:var(--mid)}
#app #view .reply-suggest-status{grid-column:1/-1;margin:0;font-size:13px;line-height:1.5;color:var(--mid)}
#app #view .reply-suggest-status:empty{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#app #view .reply-suggest-card{grid-column:1/-1;display:grid;gap:8px;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--admin-radius);background:var(--surface-2);color:var(--ink)}
#app #view .reply-suggest-card[hidden]{display:none}
#app #view .reply-suggest-title{margin:0;font-size:12px;font-weight:700;line-height:1.5;color:var(--mid)}
#app #view .reply-suggest-text{margin:0;max-height:120px;overflow:auto;font-size:14px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
#app #view .reply-suggest-sources{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;font-size:13px}
#app #view .reply-suggest-sources-label{font-weight:600;color:var(--mid)}
#app #view .reply-suggest-sources ul{display:flex;flex-wrap:wrap;gap:0 12px;margin:0;padding:0;list-style:none;min-width:0}
#app #view .reply-suggest-sources a{display:inline-flex;align-items:center;gap:4px;min-height:44px;color:var(--link);overflow-wrap:anywhere}
#app #view .reply-suggest-actions{display:flex;flex-wrap:wrap;gap:8px}
#app #view .reply-suggest-note{margin:0;font-size:12px;line-height:1.5;color:var(--mid)}
#app #view .reply-check{grid-column:1/-1;margin:0;padding:6px 10px;justify-self:start;font-size:13px;font-weight:600;line-height:1.5;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--admin-control-radius)}
#app #view .reply-check[hidden]{display:none}
@media(max-width:480px){#app #view .reply-tools>.reply-suggest{padding:8px 10px}#app #view .reply-suggest-card{padding:12px}}
@media(max-height:800px){#app #view .reply-suggest-text{max-height:96px}}
@media(forced-colors:active){#app #view .reply-tools>.reply-suggest,#app #view .reply-suggest-card,#app #view .reply-check{border:1px solid CanvasText}#app #view .reply-suggest-sources a{color:LinkText}#app #view .reply-tools>.reply-suggest[aria-disabled=true]{color:GrayText}}