:root {
  color-scheme: dark;
  --night: #090a0c;
  --raised: #14151a;
  --panel: #101115;
  --panel-2: #191a20;
  --hover: #202127;
  --ink: #f4f4f5;
  --ink-soft: #d8d8dc;
  --muted: #9799a3;
  --quiet: #676973;
  --line: #27282f;
  --line-strong: #353640;
  --agent: #63d6d1;
  --online: #39c98a;
  --danger: #ff6f6f;
  --rail: 76px;
  --sidebar: 318px;
  --font-display: "Avenir Next", "SF Pro Display", "PingFang SC", sans-serif;
  --font-body: "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overscroll-behavior-x: none; }
body { overflow: hidden; color: var(--ink); background: var(--night); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
body.landing-active { overflow-x: hidden; overflow-y: auto; }
body.auth-pending #login-view, body.auth-pending #app-view { visibility: hidden; }
button, input, textarea, select { color: inherit; font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite, .hidden, .system-hooks { display: none !important; }
:focus-visible { outline: 2px solid var(--agent); outline-offset: 3px; }

.button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.button svg { width: 16px; height: 16px; flex: 0 0 auto; stroke-width: 1.7; }
.button-label { min-width: 0; line-height: 1; }
button.action-button-layout { align-items: center; justify-content: center; gap: 8px; font-weight: 500; }
button.action-button-layout > svg { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; stroke-width: 1.7; }
.button.primary { color: #061210; background: var(--agent); }
.button.secondary { border-color: var(--line-strong); color: var(--ink-soft); background: var(--panel-2); }
.button.quiet { border-color: var(--line); color: var(--ink-soft); background: transparent; }
.button.small { min-height: 34px; gap: 6px; padding: 0 11px; font-size: 11px; }
.button.small svg { width: 14px; height: 14px; }
.button.wide { width: 100%; }
.button.danger { color: var(--danger); border-color: rgba(255,111,111,.4); background: transparent; }
.button:hover:not(:disabled), .icon-button:hover, .text-action:hover { filter: brightness(1.12); }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--panel-2); }
.text-action { padding: 0; border: 0; color: var(--agent); background: transparent; font-size: 13px; font-weight: 650; }
/* Landing and login */
.login-view { position: relative; width: 100vw; min-height: 100dvh; overflow-x: hidden; background: var(--night); }
.landing-header { position: absolute; z-index: 3; top: 0; right: 0; left: 0; width: min(1480px, calc(100% - clamp(48px, 8vw, 144px))); height: 96px; display: flex; align-items: center; margin: 0 auto; }
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand-mark, .rail-brand { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #fff; border-radius: 11px; color: var(--night); background: var(--ink); }
.brand-mark img, .rail-brand img { width: 28px; height: 28px; display: block; object-fit: contain; }
.brand-lockup strong { font-family: var(--font-display); font-size: 22px; letter-spacing: -.045em; }
.landing-cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 10px; color: #07100f; background: var(--agent); font-weight: 550; letter-spacing: 0; transition: background-color .18s ease, transform .18s ease; }
.landing-cta svg { width: 17px; height: 17px; stroke-width: 1.7; }
.landing-cta:hover { background: #78e1dc; transform: translateY(-2px); }
.landing-hero { width: min(1480px, calc(100% - clamp(48px, 8vw, 144px))); min-height: 100dvh; display: grid; grid-template-columns: minmax(460px, .88fr) minmax(600px, 1.12fr); align-items: center; gap: clamp(46px, 5vw, 88px); margin: 0 auto; padding: 112px 0 62px; }
.landing-copy { position: relative; z-index: 2; max-width: 760px; padding-bottom: 12px; }
.landing-copy h1 { max-width: 720px; margin: 0 0 31px; font-family: var(--font-display); font-size: clamp(58px, 4.8vw, 78px); font-weight: 600; letter-spacing: -.075em; line-height: 1.035; text-wrap: balance; }
.landing-copy > p { max-width: 650px; margin: 0; color: var(--muted); font-size: clamp(16px, 1.15vw, 19px); line-height: 1.75; }
.landing-cta { min-width: 142px; height: 48px; margin-top: 39px; padding: 0 18px; font-size: 14px; }
.landing-moment { position: relative; min-height: 650px; align-self: center; isolation: isolate; }
.landing-moment::before { content: ""; position: absolute; inset: 72px 7% 54px 12%; z-index: -2; border: 1px solid rgba(255,255,255,.045); border-radius: 28px; background: rgba(255,255,255,.012); }
.showcase-logo { position: absolute; z-index: -1; display: grid; place-items: center; opacity: .09; }
.showcase-logo img { width: 100%; height: 100%; filter: invert(1); }
.showcase-logo-back { top: 30px; right: 12px; width: 150px; height: 150px; }
.showcase-logo-front { right: 122px; bottom: 18px; width: 98px; height: 98px; opacity: .055; }
.moment-room { position: absolute; z-index: 2; top: 92px; right: 4%; width: 76%; min-height: 485px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 18px; background: #111216; box-shadow: 0 34px 100px rgba(0,0,0,.44); }
.moment-room > header { min-height: 70px; display: flex; align-items: center; gap: 13px; padding: 0 clamp(20px,2.2vw,34px); border-bottom: 1px solid var(--line); }
.moment-room > header > div { min-width: 0; }.moment-room > header > em { margin-left: auto; color: var(--quiet); font-family: var(--font-mono); font-size: 8px; font-style: normal; letter-spacing: .05em; }
.moment-group { position: relative; width: 42px; height: 38px; flex: 0 0 auto; }
.moment-group img { position: absolute; top: 4px; width: 31px; height: 31px; border: 2px solid #111216; border-radius: 50%; object-fit: cover; }.moment-group img:first-child { left: 0; z-index: 2; }.moment-group img:last-child { right: 0; }
.moment-room header b, .moment-room header small { display: block; }.moment-room header b { font-size: 14px; }.moment-room header small { margin-top: 4px; color: var(--quiet); font-size: 10px; }
.moment-thread { flex: 1; display: grid; align-content: start; gap: 22px; padding: 25px clamp(20px,2.2vw,34px) 22px; }
.moment-message { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: start; gap: 12px; }
.moment-message p, .moment-message b, .moment-message small { display: block; margin: 0; }.moment-message b { color: var(--ink-soft); font-size: 11px; }.moment-message time { margin-left: 6px; color: var(--quiet); font-family: var(--font-mono); font-size: 8px; font-weight: 400; }.moment-message small { max-width: 430px; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.62; }.moment-message em { color: var(--ink); font-style: normal; font-weight: 650; }.moment-message mark { margin-left: 7px; padding: 0; color: var(--muted); background: transparent; font-family: var(--font-mono); font-size: 7px; letter-spacing: .08em; }
.moment-message.agent { margin-top: 3px; padding-top: 25px; border-top: 1px solid var(--line); }.moment-message.agent small { color: var(--ink); }
.moment-result { display: grid; grid-template-columns: 50px minmax(0,1fr); gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }.moment-result i { color: var(--quiet); font-family: var(--font-mono); font-size: 8px; font-style: normal; }.moment-result strong { color: var(--muted); font-size: 10px; font-weight: 550; line-height: 1.5; }
.human-avatar, .agent-avatar { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #435064; object-fit: cover; font-size: 12px; font-weight: 750; }
.agent-avatar { border-radius: 10px 10px 10px 3px; color: var(--night); background: var(--ink); }
.local-signal { min-height: 76px; display: grid; grid-template-columns: 40px max-content minmax(50px,1fr) max-content; align-items: center; gap: 12px; padding: 0 clamp(24px,2.8vw,42px); border-top: 1px solid var(--line); background: #0e0f12; }
.signal-laptop { position: relative; width: 40px; height: 27px; border: 1px solid var(--muted); border-radius: 5px 5px 2px 2px; background: var(--panel-2); }.signal-laptop::after { content: ""; position: absolute; right: -4px; bottom: -5px; left: -4px; height: 3px; border-radius: 3px; background: var(--muted); }
.signal-computer b, .signal-computer small, .signal-agent b, .signal-agent small { display: block; white-space: nowrap; }.signal-computer b, .signal-agent b { color: var(--ink-soft); font-size: 10px; }.signal-computer small, .signal-agent small { margin-top: 4px; color: var(--quiet); font-family: var(--font-mono); font-size: 8px; }.signal-computer small::before { content: ""; width: 6px; height: 6px; display: inline-block; margin-right: 6px; border-radius: 50%; background: var(--agent); }
.signal-line { position: relative; height: 1px; overflow: hidden; background: var(--line-strong); }.signal-line i { position: absolute; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--agent); animation: local-signal 3.6s ease-in-out infinite; }
.signal-agent { display: flex; align-items: center; gap: 9px; }.signal-agent i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px 9px 9px 3px; color: #061210; background: var(--agent); font-size: 9px; font-style: normal; font-weight: 750; }
.life-card { position: absolute; z-index: 4; width: 258px; padding: 17px; border: 1px solid var(--line-strong); border-radius: 15px; background: rgba(25,26,32,.97); box-shadow: 0 22px 60px rgba(0,0,0,.42); backdrop-filter: blur(18px); }
.life-card-dinner { top: 16px; left: -5%; width: 244px; transform: rotate(-1.5deg); }
.life-card-family { right: -1%; bottom: 9px; transform: rotate(1.25deg); }
.life-card header { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.life-card header b, .life-card header small { display: block; }.life-card header b { font-size: 11px; }.life-card header small { margin-top: 3px; color: var(--quiet); font-size: 8px; }
.life-icon, .mini-agent { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #07100f; background: var(--agent); font-size: 10px; font-weight: 800; }.life-icon.family { color: var(--ink); background: #435f91; }
.life-status { padding: 4px 6px; border: 1px solid rgba(99,214,209,.22); border-radius: 999px; color: var(--agent); font-family: var(--font-mono); font-size: 7px; }
.life-card > p { margin: 17px 0 13px; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.life-answer { display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #121318; }
.life-answer .mini-agent { width: 30px; height: 30px; font-size: 9px; }.life-answer p { margin: 0; }.life-answer b, .life-answer small { display: block; }.life-answer b { font-size: 9px; }.life-answer small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.life-people { display: flex; align-items: center; margin-top: 13px; }.life-people img, .life-people span { width: 25px; height: 25px; margin-left: -6px; border: 2px solid var(--panel-2); border-radius: 50%; object-fit: cover; }.life-people img:first-child { margin-left: 0; }.life-people span { display: grid; place-items: center; color: var(--muted); background: #2a2c33; font-family: var(--font-mono); font-size: 7px; }
.family-task { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 11px; margin-top: 17px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.family-task > span { padding-top: 2px; color: var(--agent); font-family: var(--font-mono); font-size: 8px; }.family-task p { margin: 0; }.family-task b, .family-task small { display: block; }.family-task b { font-size: 9px; }.family-task small { margin-top: 4px; color: var(--quiet); font-size: 8px; line-height: 1.45; }
.login-dialog { width: min(470px, calc(100vw - 28px)); padding: 0; overflow: visible; border: 1px solid var(--line-strong); border-radius: 18px; color: var(--ink); background: #15161b; box-shadow: 0 38px 130px rgba(0,0,0,.72); }
.login-dialog::backdrop { background: rgba(5,6,8,.78); backdrop-filter: blur(5px); }
.login-close { position: absolute; z-index: 2; top: 18px; right: 18px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--panel-2); }.login-close svg { width: 15px; height: 15px; }
.login-card { width: min(420px, 100%); }
.login-dialog .login-card { width: 100%; padding: 45px 42px 40px; }
.login-card h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: 36px; letter-spacing: -.045em; }
.login-card > p { margin: 0 0 28px; color: var(--muted); line-height: 1.6; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.auth-tabs button { padding: 12px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; }
.auth-tabs button.active { border-color: var(--ink); color: var(--ink); }
.login-card label, .modal label { display: block; margin: 0 0 16px; }
.login-card label > span, .modal label > span, .modal legend { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.phone-control { height: 48px; display: grid !important; grid-template-columns: minmax(0,1fr) auto; align-items: center; margin: 0 !important; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel-2); transition: border-color .15s ease, box-shadow .15s ease; }.phone-control:focus-within { border-color: var(--agent); box-shadow: 0 0 0 3px rgba(99,214,209,.12); }.phone-control input { height: 46px; min-width: 0; padding-right: 10px; border: 0; background: transparent; box-shadow: none !important; }.phone-control button { height: 30px; min-width: 92px; margin-right: 8px; padding: 0 11px; border: 0; border-left: 1px solid var(--line); color: var(--agent); background: transparent; font-size: 11px; font-weight: 700; }.phone-control button:hover:not(:disabled) { color: #83e6e1; }.phone-control button:disabled { color: var(--quiet); cursor: default; }
.phone-control:has(input[aria-invalid="true"]) { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255,111,111,.1); }
.login-card .phone-field { margin-bottom: 0; }
.phone-code-status { min-height: 18px; margin: 7px 0 10px; color: var(--quiet); font-size: 11px; line-height: 18px; }
.phone-code-status.success { color: var(--agent); }
.phone-code-status.error { color: #ff8f8f; }
.login-card #phone-login-submit { margin-top: 23px; }
input, textarea, select { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); background: var(--panel-2); }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255,111,111,.1); }
input, select { height: 46px; padding: 0 13px; }
textarea { min-height: 92px; padding: 12px 13px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--quiet); }
.invite-hint { margin-top: 16px; padding: 12px; border: 1px solid rgba(99,214,209,.24); color: var(--agent); background: rgba(99,214,209,.06); font-size: 13px; }

/* Workspace shell */
.workspace { width: 100vw; height: 100dvh; min-height: 0; display: grid; grid-template-columns: var(--rail) var(--sidebar) minmax(0, 1fr); overflow: hidden; background: var(--night); }
.workspace[data-active-view="contacts"],
.workspace[data-active-view="computers"] { grid-template-columns: var(--rail) minmax(0, 1fr); }
.workspace[data-active-view="contacts"] .conversation-sidebar,
.workspace[data-active-view="computers"] .conversation-sidebar { display: none; }
.workspace[data-active-view="contacts"] .directory-view,
.workspace[data-active-view="computers"] .computers-view { grid-column: 2; }
.app-rail { z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 18px 12px; border-right: 1px solid var(--line); background: #0c0d10; }
.rail-brand { width: 40px; height: 40px; padding: 0; border: 0; font-size: 20px; }
.app-rail nav { display: grid; gap: 10px; width: 100%; }
.rail-action { position: relative; width: 100%; height: 58px; display: grid; place-items: center; gap: 1px; padding: 7px 0 5px; border: 0; border-radius: 10px; color: var(--quiet); background: transparent; }
.rail-action span { font-size: 10px; }
.rail-action.active { color: var(--ink); background: var(--hover); }
.rail-action.active::before { content: ""; position: absolute; left: -12px; width: 2px; height: 24px; background: var(--ink); }
.current-user { width: 42px; height: 42px; display: grid; place-items: center; margin-top: auto; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink); background: #353741; }
.current-user > span { width: 100%; height: 100%; display: grid; place-items: center; border-radius: inherit; font-weight: 750; }.current-user b, .current-user small { display: none; }

.conversation-sidebar { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; overflow: hidden; border-right: 1px solid var(--line); background: var(--panel); }
.sidebar-header { height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 20px; }
.sidebar-header h1 { margin: 0; font-family: var(--font-display); font-size: 20px; letter-spacing: -.035em; }
.sidebar-header .icon-button { width: 34px; height: 34px; border-radius: 9px; }
.search-field { height: 42px; display: flex; align-items: center; gap: 10px; margin: 0 14px 13px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; color: var(--quiet); background: var(--panel-2); }
.search-field svg { width: 17px; }
.search-field input { height: auto; padding: 0; border: 0; outline: 0; background: transparent; }
.conversation-list { min-height: 0; overflow-y: auto; padding: 0 8px; }
.conversation-section-label { margin: 12px 12px 6px; color: var(--quiet); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.nav-item { width: 100%; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 11px 12px; border: 0; border-radius: 10px; color: var(--ink); text-align: left; background: transparent; }
.nav-item:hover { background: rgba(255,255,255,.025); }
.nav-item.active { background: var(--hover); }
.group-glyph { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--ink-soft); background: #32343d; }.group-glyph svg { width: 18px; height: 18px; }
.nav-item span:nth-child(2) { min-width: 0; }
.nav-item b, .nav-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item b { font-size: 14px; font-weight: 650; }.nav-item small { margin-top: 5px; color: var(--muted); font-size: 12px; }
.nav-item em { min-width: 22px; padding: 3px 6px; border-radius: 10px; color: var(--agent); background: rgba(99,214,209,.08); font-size: 10px; font-style: normal; text-align: center; }
.nav-empty { padding: 32px 18px; color: var(--quiet); font-size: 13px; line-height: 1.6; }
.conversation-context-menu { position: fixed; z-index: 80; min-width: 132px; padding: 5px; border: 1px solid var(--line-strong); border-radius: 10px; background: #1a1b21; box-shadow: 0 16px 42px rgba(0,0,0,.42); }
.conversation-context-menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 7px; color: var(--ink-soft); text-align: left; background: transparent; font-size: 12px; }
.conversation-context-menu button:hover, .conversation-context-menu button:focus-visible { color: var(--ink); background: var(--hover); outline: 0; }
.conversation-context-menu svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sidebar-runtime-monitor { width: 100%; display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 17px 20px 20px; border: 0; border-top: 1px solid var(--line); color: var(--ink); text-align: left; background: transparent; }
.sidebar-runtime-monitor:hover { background: rgba(255,255,255,.025); }
.sidebar-runtime-monitor > i { width: 8px; height: 8px; border-radius: 50%; background: var(--quiet); box-shadow: 0 0 0 4px rgba(255,255,255,.035); }
.sidebar-runtime-monitor > i[data-state="online"] { background: var(--online); box-shadow: 0 0 0 4px rgba(66,201,139,.11); }
.sidebar-runtime-monitor > i[data-state="starting"] { background: var(--agent); }
.sidebar-runtime-monitor > i[data-state="paused"] { background: #f4b55e; }
.sidebar-runtime-monitor b, .sidebar-runtime-monitor small { display: block; }.sidebar-runtime-monitor b { font-size: 12px; font-weight: 650; }.sidebar-runtime-monitor small { margin-top: 4px; color: var(--quiet); font-size: 10px; }
.sidebar-runtime-monitor em { color: var(--agent); font-size: 11px; font-style: normal; font-weight: 650; }

.primary-view { min-width: 0; min-height: 0; background: var(--night); }
.chat-view { position: relative; overflow: hidden; }
.group-stage { width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; grid-template-rows: 76px minmax(0,1fr) auto auto; overflow: hidden; }
.group-header { display: flex; align-items: center; gap: 18px; padding: 0 26px; border-bottom: 1px solid var(--line); background: rgba(9,10,12,.96); }
.group-identity { min-width: 0; display: flex; align-items: center; gap: 12px; }
.group-mark-button { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 13px; color: var(--ink); background: var(--panel-2); font-size: 14px; font-weight: 750; }
.group-mark-button:hover { border-color: var(--muted); }.group-mark-button .group-avatar-image { width: 100%; height: 100%; object-fit: cover; }
.group-identity h2 { margin: 0; font-family: var(--font-display); font-size: 19px; letter-spacing: -.035em; }
.group-name-button { max-width: min(42vw, 520px); display: block; padding: 0; overflow: hidden; border: 0; color: inherit; background: transparent; font: inherit; letter-spacing: inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.group-name-button:hover { color: var(--agent); }
.group-mark-button:focus-visible, .group-name-button:focus-visible { outline: 2px solid var(--agent); outline-offset: 2px; }
.group-identity p { display: flex; gap: 9px; margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.group-member-summary { align-items: center; gap: 9px !important; color: var(--quiet) !important; }
.group-member-summary > button { min-width: 0; display: inline-flex; align-items: center; gap: 5px; padding: 2px 3px; border: 0; border-radius: 5px; color: inherit; background: transparent; }
.group-member-summary > button:hover { color: var(--ink-soft); background: var(--hover); }
.group-member-summary > button:focus-visible { outline: 2px solid var(--agent); outline-offset: 2px; }
.group-member-summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.group-member-summary b { color: inherit; font-family: var(--font-mono); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.group-member-summary > i { width: 1px; height: 13px; background: var(--line-strong); }
.group-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.group-actions button svg { width: 14px; height: 14px; margin-right: 5px; }
.group-actions .header-invite svg { width: 18px; height: 18px; margin: 0; }
.mobile-back { display: none; }

.messages { min-height: 0; overflow-y: auto; padding: 32px max(28px, calc((100% - 820px) / 2)) 54px; overscroll-behavior: contain; scroll-behavior: smooth; }
.message { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 13px; max-width: 820px; margin: 0 auto 26px; outline: 0; transition: background-color .18s ease; }
.message.referenced { background: rgba(99,214,209,.06); }
.message-content { position: relative; min-width: 0; }
.message-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: #353741; font-size: 11px; font-weight: 750; }
.message.agent .message-avatar { border-radius: 11px 11px 11px 3px; color: #061210; background: var(--agent); }
.message-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.message-meta strong { font-size: 13px; font-weight: 650; }.message-meta time { color: var(--quiet); font-size: 10px; }.message-meta span { color: var(--agent); font-size: 10px; }
.message-body { max-width: 100%; display: flex; align-items: flex-start; gap: 8px; }
.message-text { min-width: 0; width: fit-content; max-width: 720px; flex: 0 1 auto; color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.75; }
.message-text mark { padding: 1px 3px; border-radius: 4px; color: var(--agent); background: rgba(99,214,209,.09); }
.message-text.markdown { white-space: normal; }
.message-text.markdown > :first-child { margin-top: 0; }.message-text.markdown > :last-child { margin-bottom: 0; }
.message-text.markdown p { margin: 0 0 12px; }
.message-text.markdown h1, .message-text.markdown h2, .message-text.markdown h3, .message-text.markdown h4 { margin: 20px 0 8px; color: var(--ink); font-family: var(--font-display); line-height: 1.35; letter-spacing: -.025em; }
.message-text.markdown h1 { font-size: 20px; }.message-text.markdown h2 { font-size: 18px; }.message-text.markdown h3 { font-size: 16px; }.message-text.markdown h4 { font-size: 14px; }
.message-text.markdown ul, .message-text.markdown ol { margin: 5px 0 14px; padding-left: 22px; }.message-text.markdown li { margin: 3px 0; padding-left: 2px; }.message-text.markdown li::marker { color: var(--quiet); }
.message-text.markdown strong { color: var(--ink); font-weight: 700; }.message-text.markdown del { color: var(--quiet); }
.message-text.markdown a { color: var(--agent); text-decoration-color: rgba(99,214,209,.42); text-underline-offset: 3px; }.message-text.markdown a:hover { text-decoration-color: var(--agent); }
.message-text.markdown code { padding: 2px 5px; border: 1px solid var(--line); border-radius: 5px; color: #b8e38f; background: var(--panel-2); font-family: var(--font-mono); font-size: .86em; }
.message-text.markdown pre { max-width: 100%; margin: 12px 0 16px; padding: 14px 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: #0d0e11; line-height: 1.6; tab-size: 2; }.message-text.markdown pre code { padding: 0; border: 0; color: #c9cbd2; background: transparent; font-size: 12px; }
.message-text.markdown blockquote { margin: 10px 0 14px; padding: 7px 12px; border-left: 2px solid var(--agent); color: var(--muted); background: rgba(99,214,209,.035); }
.message-text.markdown hr { height: 1px; margin: 18px 0; border: 0; background: var(--line); }
.markdown-table-wrap { max-width: 100%; margin: 12px 0 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; }.markdown-table-wrap table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 12px; }.markdown-table-wrap th, .markdown-table-wrap td { padding: 9px 11px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }.markdown-table-wrap th { color: var(--ink); background: var(--panel-2); font-weight: 650; }.markdown-table-wrap tr:last-child td { border-bottom: 0; }.markdown-table-wrap th:last-child, .markdown-table-wrap td:last-child { border-right: 0; }
.message-quote { max-width: 680px; display: flex; gap: 8px; margin: 0 0 8px; padding: 8px 10px; overflow: hidden; border: 0; border-left: 2px solid var(--line-strong); color: var(--muted); text-align: left; background: rgba(255,255,255,.018); }
.message-quote b { flex: 0 0 auto; color: var(--ink-soft); font-size: 10px; }.message-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.message-actions { z-index: 3; flex: 0 0 auto; visibility: hidden; display: flex; margin-top: -2px; opacity: 0; transform: translateY(3px); transition: opacity .14s ease, transform .14s ease, visibility .14s; }
.message:hover .message-actions, .message:focus-within .message-actions { visibility: visible; opacity: 1; transform: translateY(0); }
.message-actions button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 7px; color: var(--muted); background: transparent; }.message-actions button svg { width: 16px; height: 16px; }.message-actions button:hover { border-color: var(--line); color: var(--ink-soft); background: var(--hover); }
.message-attachments { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 280px)); gap: 7px; margin-top: 10px; }.message-attachments:empty { display: none; }
.attachment-card { min-width: 0; display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-soft); background: var(--panel-2); }.attachment-card > span:first-child { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--agent); background: rgba(99,214,209,.08); }.attachment-card b, .attachment-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.attachment-card b { font-size: 10px; }.attachment-card small { margin-top: 3px; color: var(--quiet); font-size: 8px; }
.message.agent { margin-top: 34px; }.message.agent .message-content { padding: 1px 0 4px; }.message.agent .message-meta strong::after { content: "AGENT"; margin-left: 7px; color: var(--agent); font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; }
.conversation-start { max-width: 820px; margin: 11vh auto 0; text-align: center; }
.conversation-start > span { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 20px; border: 1px solid var(--line-strong); border-radius: 17px; color: var(--ink-soft); background: var(--panel-2); }.conversation-start > span svg { width: 22px; height: 22px; }
.conversation-start h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 24px; }.conversation-start p { color: var(--muted); font-size: 13px; }
.empty-stage { height: 100%; display: grid; place-content: center; justify-items: center; padding: 40px; text-align: center; }
.empty-mark { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid #fff; border-radius: 16px; color: var(--night); background: var(--ink); }
.empty-mark img { width: 42px; height: 42px; display: block; }
.empty-stage h2 { margin: 24px 0 8px; font-family: var(--font-display); font-size: 32px; letter-spacing: -.05em; }.empty-stage p { margin: 0 0 25px; color: var(--muted); }.empty-stage > div { display: flex; gap: 10px; }

.approval { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 820px; margin: 0 auto 12px; padding: 13px 16px; border: 1px solid rgba(99,214,209,.32); border-radius: 12px; background: rgba(99,214,209,.055); }
.approval span, .approval b, .approval small { display: block; }.approval span { color: var(--muted); font-size: 10px; }.approval b { margin: 4px 0; font-size: 13px; }.approval small { color: var(--quiet); font-size: 10px; }.approval > div:last-child { display: flex; gap: 8px; }
.composer { position: relative; width: min(820px, calc(100% - 48px)); max-height: min(44dvh, 360px); margin: 0 auto 24px; padding: 12px 12px 10px; overflow: visible; border: 1px solid var(--line-strong); border-radius: 15px; background: var(--raised); }
.composer:focus-within { border-color: #51535f; }
.composer-reply { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px -2px 10px; padding: 8px 9px 9px 11px; border-left: 2px solid var(--agent); border-radius: 0 7px 7px 0; background: rgba(99,214,209,.045); }.composer-reply > div { min-width: 0; }.composer-reply span, .composer-reply b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.composer-reply span { color: var(--agent); font-size: 9px; }.composer-reply b { max-width: 680px; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 500; }.composer-reply button { width: 26px; height: 26px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; }
.attachment-tray { max-height: 84px; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; overflow-y: auto; overscroll-behavior: contain; }.attachment-tray > div { min-width: 160px; max-width: 240px; display: grid; grid-template-columns: 24px minmax(0,1fr) 24px; align-items: center; gap: 7px; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }.attachment-tray b, .attachment-tray small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.attachment-tray b { color: var(--ink-soft); font-size: 9px; }.attachment-tray small { margin-top: 2px; color: var(--quiet); font-size: 8px; }.attachment-tray button { width: 24px; height: 24px; padding: 0; border: 0; color: var(--muted); background: transparent; }
.composer-row { display: flex; align-items: flex-end; gap: 10px; }
.composer-tool { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: 19px; }.composer-tool:hover { color: var(--ink); background: var(--hover); }
.composer textarea { flex: 1; min-height: 34px; max-height: 150px; padding: 7px 4px 5px; border: 0; outline: 0; background: transparent; resize: none; font-size: 14px; line-height: 1.5; }
.composer-status { margin: 8px 42px 0 !important; color: var(--danger); font-size: 10px; line-height: 1.5; }
.send-button { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; color: #061210; background: var(--agent); }
.send-button svg { width: 18px; }
.mention-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); max-height: 310px; overflow-y: auto; padding: 7px; border: 1px solid var(--line-strong); border-radius: 13px; background: #1b1c22; box-shadow: 0 24px 70px rgba(0,0,0,.44); }
.mention-heading { padding: 8px 10px 5px; color: var(--quiet); font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.mention-option { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 9px; color: var(--ink); text-align: left; background: transparent; }
.mention-option:hover, .mention-option.active { background: var(--hover); }
.mention-option span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #393b44; font-size: 10px; font-weight: 750; }.mention-option.agent span:first-child { border-radius: 9px 9px 9px 3px; color: #061210; background: var(--agent); }
.mention-option b, .mention-option small { display: block; }.mention-option b { font-size: 12px; }.mention-option small { margin-top: 3px; color: var(--quiet); font-size: 10px; }.mention-option em { color: var(--muted); font-size: 10px; font-style: normal; }
.mention-empty { padding: 20px 16px; color: var(--muted); font-size: 12px; text-align: center; }

/* Directory */
.directory-view { height: 100%; display: grid; grid-template-columns: minmax(238px, 286px) minmax(0, 1fr); overflow: hidden; }
.directory-browser { min-width: 0; overflow: hidden; border-right: 1px solid var(--line); background: #0d0e11; }
.directory-browser > header { min-height: 88px; display: flex; align-items: center; padding: 18px; border-bottom: 1px solid var(--line); }
.directory-browser > header h2 { margin: 0; font-family: var(--font-display); font-size: 20px; letter-spacing: -.035em; }
.directory-sections { display: grid; align-content: start; gap: 7px; padding: 12px; }
.directory-sections > button { width: 100%; min-width: 0; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid transparent; border-radius: 11px; color: var(--ink); text-align: left; background: transparent; }
.directory-sections > button:hover { border-color: var(--line); background: var(--panel); }
.directory-sections > button.active { border-color: var(--line-strong); background: var(--panel-2); }
.directory-section-icon { width: 42px; height: 42px; display: grid !important; place-items: center; border: 1px solid var(--line); border-radius: 13px; color: var(--ink-soft); background: #32343d; }.directory-section-icon.agent { border-radius: 12px 12px 12px 4px; color: var(--agent); }.directory-section-icon svg { width: 19px; height: 19px; }
.directory-sections b, .directory-sections small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.directory-sections b { color: var(--ink-soft); font-size: 12px; }.directory-sections small { margin-top: 5px; color: var(--quiet); font-size: 9px; }.directory-sections small em { color: inherit; font-style: normal; }.directory-sections > button > i { color: var(--quiet); font-size: 18px; font-style: normal; }
.directory-detail { min-width: 0; min-height: 0; overflow-y: auto; background: var(--night); }
.directory-detail-header { position: sticky; top: 0; z-index: 8; min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px clamp(24px, 4.2vw, 64px); border-bottom: 1px solid var(--line); background: rgba(9,10,12,.9); backdrop-filter: blur(18px); }
.directory-detail-header h2 { margin: 0; font-family: var(--font-display); font-size: 24px; letter-spacing: -.045em; }
.directory-detail-actions { display: flex; align-items: center; gap: 8px; }.directory-detail-actions .button { min-height: 38px; }.directory-detail-actions svg { width: 15px; height: 15px; margin: 0; }
.directory-detail-body { padding: 28px clamp(24px, 4.2vw, 64px) 58px; }
.directory-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.directory-row { min-width: 0; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--raised); }
.directory-avatar { position: relative; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: #353741; font-size: 13px; font-weight: 750; }.directory-avatar.agent { border-radius: 13px 13px 13px 4px; color: #061210; background: var(--agent); }
.directory-avatar i { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border: 2px solid var(--raised); border-radius: 50%; background: var(--quiet); }
.directory-avatar[data-state="online"] i { background: var(--online); }
.directory-avatar[data-state="paused"] i, .directory-avatar[data-state="compute-paused"] i { background: #f4b55e; }
.directory-avatar[data-state="offline"] i { background: var(--quiet); }.directory-avatar[data-state="starting"] i, .directory-avatar[data-state="running"] i { background: var(--agent); }.directory-avatar[data-state="error"] i { background: var(--danger); }
.agent-orb[data-state="offline"] i { background: var(--quiet); }.agent-orb[data-state="starting"] i, .agent-orb[data-state="running"] i { background: var(--agent); }.agent-orb[data-state="error"] i { background: var(--danger); }
.agent-orb[data-state="paused"] i, .agent-orb[data-state="compute-paused"] i { background: #f4b55e; }
.directory-row b, .directory-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.directory-row b { font-size: 13px; }.directory-row small { margin-top: 5px; color: var(--muted); font-size: 10px; }.directory-row .row-actions { display: flex; gap: 6px; }.directory-row .row-actions button { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink-soft); background: transparent; font-size: 10px; font-weight: 500; }.directory-row .row-actions button svg { width: 14px; height: 14px; }

/* Member drawer */
.member-drawer { position: fixed; z-index: 30; top: 0; right: 0; width: min(390px, 92vw); height: 100dvh; visibility: hidden; display: grid; grid-template-rows: auto minmax(0,1fr); padding: 24px; border-left: 1px solid var(--line-strong); background: #121318; pointer-events: none; transform: translateX(101%); transition: transform .2s ease, visibility .2s; }
.member-drawer.open { visibility: visible; pointer-events: auto; transform: translateX(0); }.member-drawer header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }.drawer-title-wrap { min-width: 0; display: flex; align-items: center; gap: 10px; }.drawer-title-wrap .icon-button { flex: 0 0 auto; }.member-drawer h2 { margin: 0; font-family: var(--font-display); font-size: 25px; letter-spacing: -.04em; }
.drawer-header-actions { display: flex; align-items: center; gap: 8px; }.drawer-add { height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink-soft); background: var(--panel-2); font-size: 10px; font-weight: 650; }.drawer-add:hover { border-color: rgba(99,214,209,.45); color: var(--agent); }.drawer-add svg { width: 15px; height: 15px; }
.member-list { overflow-y: auto; padding: 20px 0; }.member-section { display: grid; gap: 3px; }.member-section + .member-section { margin-top: 28px; }
.member-row { display: grid; grid-template-columns: 42px minmax(0,1fr) 32px; align-items: center; gap: 12px; min-height: 62px; padding: 10px 9px; border-radius: 11px; transition: background-color .16s ease; }.member-row:hover, .member-row:focus-within { background: var(--hover); }.member-row .directory-avatar { width: 42px; height: 42px; }.member-row b, .member-row small { display: block; }.member-row b { font-size: 12px; }.member-row small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }.member-row em { justify-self: end; color: var(--quiet); font-size: 9px; font-style: normal; }
.member-row-action { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; color: var(--danger); background: transparent; opacity: 0; pointer-events: none; transition: opacity .15s ease, background-color .15s ease; }.member-row:hover .member-row-action, .member-row:focus-within .member-row-action { opacity: 1; pointer-events: auto; }.member-row-action:hover { background: rgba(255,111,111,.1); }.member-row-action svg { width: 17px; height: 17px; }
.leave-group-action { width: 100%; margin-top: 18px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; color: #ff9a9a; background: var(--panel-2); text-align: left; font-size: 10px; }.message-system { width: fit-content; max-width: 80%; margin: 8px auto; padding: 5px 10px; border-radius: 999px; color: var(--quiet); background: var(--panel-2); font-size: 9px; text-align: center; }
.group-settings-profile { display: grid; grid-template-columns: 58px minmax(0,1fr); align-items: center; gap: 15px; padding: 4px 4px 22px; border-bottom: 1px solid var(--line); }.group-settings-avatar { width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 17px; background: var(--panel-2); }.group-settings-avatar svg { width: 24px; height: 24px; }.group-settings-avatar .group-avatar-image { width: 100%; height: 100%; object-fit: cover; }.group-settings-avatar .group-avatar-text-mark { font-size: 18px; font-weight: 750; }.group-settings-profile b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }.group-settings-profile button { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; padding: 0; border: 0; color: var(--agent); background: transparent; font-size: 10px; font-weight: 500; }.group-settings-profile button svg { width: 13px; height: 13px; }
.group-settings-menu { border-bottom: 1px solid var(--line); }.group-settings-menu > button { width: 100%; min-height: 74px; display: grid; grid-template-columns: minmax(0,1fr) auto 14px; align-items: center; gap: 10px; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); background: transparent; text-align: left; }.group-settings-menu > button:last-child { border-bottom: 0; }.group-settings-menu > button:hover { background: var(--hover); }.group-settings-menu b, .group-settings-menu small { display: block; }.group-settings-menu b { font-size: 13px; }.group-settings-menu small { margin-top: 5px; color: var(--quiet); font-size: 9px; }.group-settings-menu i { color: var(--quiet); font-size: 25px; font-style: normal; font-weight: 250; }
.group-settings-menu em { display: flex; flex-direction: row-reverse; padding-left: 7px; }.settings-member-avatar { width: 28px; height: 28px; display: grid; place-items: center; margin-left: -7px; border: 2px solid #121318; border-radius: 50%; color: var(--ink); background: #3b3d46; font-size: 8px; font-style: normal; font-weight: 750; }.settings-member-avatar[data-avatar="mint"] { background: #315c57; }.settings-member-avatar[data-avatar="violet"] { background: #4b4164; }.settings-member-avatar[data-avatar="coral"] { background: #7a493f; }.settings-member-avatar[data-avatar="blue"] { background: #324e70; }
.group-settings-danger { display: flex; justify-content: flex-end; padding-top: 28px; }.group-settings-danger button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border: 1px solid rgba(255,111,111,.45); border-radius: 9px; color: #ff8b8b; background: transparent; font-size: 10px; font-weight: 500; }.group-settings-danger button svg { width: 14px; height: 14px; }.group-settings-danger button:hover { color: #fff; background: rgba(255,111,111,.85); }
.drawer-backdrop { position: fixed; z-index: 29; inset: 0; display: none; border: 0; background: rgba(0,0,0,.55); }.drawer-backdrop.open { display: block; }

/* Reminders */
.reminder-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 24px 0 12px; }
.reminder-toolbar span { color: var(--muted); font-size: 11px; }
.reminder-list { display: grid; gap: 8px; }
.reminder-row { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: start; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); }
.reminder-row > i { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--quiet); }
.reminder-row[data-status="scheduled"] > i, .reminder-row[data-status="running"] > i { background: var(--agent); }
.reminder-row[data-status="triggered"] > i { background: var(--online); }
.reminder-row b, .reminder-row small { display: block; }.reminder-row b { color: var(--ink-soft); font-size: 12px; line-height: 1.5; }.reminder-row small { margin-top: 5px; color: var(--quiet); font-size: 9px; }
.reminder-actions { display: flex; gap: 5px; }.reminder-actions button { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 500; }.reminder-actions button svg { width: 13px; height: 13px; }.reminder-actions button:hover { color: var(--ink); background: var(--hover); }
.reminder-empty { padding: 32px 16px; border: 1px dashed var(--line); border-radius: 11px; color: var(--quiet); font-size: 11px; text-align: center; }

/* Modal and setup flows */
.modal { width: min(600px, calc(100vw - 28px)); max-height: calc(100dvh - 34px); padding: 0; overflow: auto; border: 1px solid var(--line-strong); border-radius: 16px; color: var(--ink); background: #15161b; box-shadow: 0 36px 120px rgba(0,0,0,.6); }
.modal[data-variant="group"] { width: min(780px, calc(100vw - 28px)); }
.modal[data-variant="profile"], .modal[data-variant="compute"] { width: min(640px, calc(100vw - 28px)); }
.modal[data-variant="device"] { width: min(520px, calc(100vw - 28px)); }
.modal[data-variant="group-profile"] { width: min(480px, calc(100vw - 28px)); }
.modal::backdrop { background: rgba(0,0,0,.72); }
.modal form { position: relative; padding: 34px; }
.modal-close { position: absolute; z-index: 2; top: 18px; right: 18px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--panel-2); }
.modal-close svg { width: 16px; }
.modal h2 { max-width: 480px; margin: 0 44px 9px 0; font-family: var(--font-display); font-size: 29px; letter-spacing: -.045em; }.modal p { margin: 0 0 25px; color: var(--muted); line-height: 1.6; }.modal fieldset { margin: 18px 0; padding: 0; border: 0; }.modal legend { margin-bottom: 10px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }.modal-note { display: block; margin-top: 14px; color: var(--quiet); font-size: 10px; line-height: 1.55; }
.account-profile { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 13px; margin-top: 22px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.account-profile-avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #353741; font-size: 14px; font-weight: 750; }
.account-profile b, .account-profile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.account-profile b { font-size: 13px; }.account-profile small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.account-setting-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 10px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--panel-2); text-align: left; }
.account-setting-row:hover { border-color: var(--line-strong); background: var(--hover); }.account-setting-row span { min-width: 0; }.account-setting-row b, .account-setting-row small { display: block; }.account-setting-row b { font-size: 12px; }.account-setting-row small { margin-top: 5px; color: var(--muted); font-size: 10px; }.account-setting-row em { flex: none; color: var(--agent); font-size: 10px; font-style: normal; }
.profile-setup { display: grid; grid-template-columns: 132px minmax(0,1fr); align-items: center; gap: 28px; margin: 28px 0 30px; }
.profile-avatar-preview { width: 112px; height: 112px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: #353741; font-family: var(--font-display); font-size: 32px; font-weight: 700; }
.profile-fields { display: grid; gap: 18px; }.profile-fields > label { margin: 0; }.profile-avatar-picker { margin: 0 !important; }.profile-avatar-picker legend { color: var(--muted); font-size: 10px; }.profile-avatar-picker { display: flex; gap: 10px; }.profile-avatar-picker label { position: relative; margin: 0; cursor: pointer; }.profile-avatar-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }.profile-avatar-picker span { width: 38px; height: 38px; display: block; border: 2px solid transparent; border-radius: 50%; background: #353741; box-shadow: 0 0 0 1px var(--line-strong); }.profile-avatar-picker input:checked + span { border-color: var(--ink); box-shadow: 0 0 0 2px var(--night), 0 0 0 3px var(--ink); }
[data-avatar="slate"], [data-profile-preview="slate"] { background: #353741 !important; }[data-avatar="mint"], [data-profile-preview="mint"] { color: #08201d !important; background: #63d6d1 !important; }[data-avatar="violet"], [data-profile-preview="violet"] { background: #3f8581 !important; }[data-avatar="coral"], [data-profile-preview="coral"] { background: #a85a4f !important; }[data-avatar="blue"], [data-profile-preview="blue"] { background: #435f91 !important; }
.compute-setup-list { display: grid; gap: 9px; margin: 24px 0; }.compute-setup-row { display: grid; grid-template-columns: 40px minmax(0,1fr) 9px; align-items: center; gap: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); }.compute-setup-row b, .compute-setup-row small { display: block; }.compute-setup-row b { font-size: 12px; }.compute-setup-row small { margin-top: 5px; color: var(--muted); font-size: 10px; }.compute-setup-row > i { width: 8px; height: 8px; border-radius: 50%; background: var(--quiet); }.compute-setup-row[data-state="online"] > i { background: var(--online); }.compute-empty { min-height: 112px; display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px dashed var(--line-strong); border-radius: 12px; }.compute-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--agent); background: var(--panel-2); font-size: 21px; }.compute-empty b, .compute-empty small { display: block; }.compute-empty b { font-size: 13px; }.compute-empty small { margin-top: 6px; color: var(--muted); font-size: 10px; }
.check-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }.check-list label { display: flex; align-items: center; gap: 9px; margin: 0; padding: 11px; border: 1px solid var(--line); border-radius: 10px; }.check-list input { width: auto; height: auto; }.check-list label > span { margin: 0; color: var(--ink-soft); font-size: 11px; }
.form-empty { margin: 16px 0; padding: 14px; border: 1px dashed var(--line-strong); color: var(--muted); font-size: 11px; }.form-empty p { margin: 5px 0 0; font-size: 10px; }
.modal .group-name-field { margin: 24px 0 26px; }.group-name-field input { margin: 0; }
.group-profile-editor { margin: 26px 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.modal .group-profile-avatar-field { position: relative; display: grid; grid-template-columns: 86px minmax(0,1fr); align-items: center; min-height: 92px; margin: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.modal .group-profile-field-label { margin: 0; color: var(--ink-soft); font-size: 12px; font-weight: 650; }
.group-profile-avatar-control { min-width: 0; display: grid !important; grid-template-columns: 54px minmax(0,1fr) 18px; align-items: center; gap: 13px; margin: 0 !important; color: var(--ink); }
.group-profile-avatar-preview { width: 54px; height: 54px; display: grid; place-items: center; margin: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 15px; background: var(--panel-2); }
.group-profile-avatar-preview svg { width: 23px; height: 23px; }
.group-profile-avatar-preview .group-avatar-text-mark { font-size: 17px; }
.group-profile-avatar-copy { min-width: 0; display: block; margin: 0; }.group-profile-avatar-copy b, .group-profile-avatar-copy small { display: block; }.group-profile-avatar-copy b { color: var(--ink-soft); font-size: 12px; }.group-profile-avatar-copy small { margin-top: 5px; color: var(--quiet); font-size: 9px; }
.group-profile-chevron { margin: 0; color: var(--quiet); font-size: 25px; font-weight: 250; }
.group-profile-avatar-field:hover .group-profile-chevron, .group-profile-avatar-field:focus-within .group-profile-chevron { color: var(--agent); }
.group-profile-avatar-field > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.group-profile-readonly .group-profile-avatar-field { cursor: default; }.group-profile-readonly .group-profile-avatar-control { grid-template-columns: 54px; }
.modal .group-profile-name-field { margin: 0; padding: 18px 0 20px; }.modal .group-profile-name-field > span { margin-bottom: 9px; color: var(--ink-soft); font-size: 12px; font-weight: 650; }.group-profile-name-field input { border-color: transparent; background: var(--panel-2); }.group-profile-name-field input:focus { border-color: var(--agent); }
.group-avatar-image { width: 100%; height: 100%; display: block; object-fit: cover; }.group-avatar-text-mark { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 800; }
.group-glyph, #group-mark { overflow: hidden; }.group-glyph > .group-avatar-image, #group-mark > .group-avatar-image { width: 100%; height: 100%; object-fit: cover; }
.group-member-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.group-member-columns.single { grid-template-columns: minmax(0,1fr); }
.group-invite-columns { margin-top: 24px; }
.modal .group-member-column { min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.012); }.modal .group-member-column legend { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 0 2px 10px; color: var(--ink); font-size: 11px; font-weight: 700; }.group-member-column legend small { color: var(--quiet); font-size: 9px; font-weight: 500; }
.group-member-list { max-height: 248px; display: grid; align-content: start; gap: 6px; overflow-y: auto; }.modal .group-member-option { min-width: 0; display: grid; grid-template-columns: 16px 34px minmax(0,1fr); align-items: center; gap: 10px; margin: 0; padding: 9px; border: 1px solid transparent; border-radius: 9px; background: var(--panel-2); cursor: pointer; }.group-member-option:hover { border-color: var(--line-strong); }.group-member-option:has(input:checked) { border-color: rgba(99,214,209,.45); background: rgba(99,214,209,.06); }.group-member-option input { width: 16px; height: 16px; margin: 0; padding: 0; }.modal .group-member-option > span { min-width: 0; display: block; margin: 0; }.picker-avatar { width: 34px; height: 34px; display: grid !important; place-items: center; border-radius: 50%; color: var(--ink) !important; background: #353741; font-size: 10px !important; font-weight: 750; }.picker-avatar.agent { border-radius: 9px 9px 9px 3px; color: #061210 !important; background: var(--agent); }.group-member-option b, .group-member-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.group-member-option b { color: var(--ink-soft); font-size: 11px; }.group-member-option small { margin-top: 3px; color: var(--quiet); font-size: 9px; }.group-picker-empty { margin: 0 !important; padding: 22px 12px; border: 1px dashed var(--line); border-radius: 9px; color: var(--quiet) !important; font-size: 10px; text-align: center; }
.invite-link, .command-box { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }.invite-link code, .command-box code { flex: 1; overflow: auto; color: var(--agent); font-family: var(--font-mono); font-size: 10px; line-height: 1.5; }
.auth-tabs { display: flex; gap: 0; }
.connection-wait, .device-approval-card, .runtime-check { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }.connection-wait i { width: 10px; height: 10px; border: 2px solid var(--quiet); border-top-color: var(--agent); border-radius: 50%; animation: spin .8s linear infinite; }.connection-wait b, .connection-wait small, .runtime-check b, .runtime-check small { display: block; }.connection-wait b, .runtime-check b { font-size: 11px; }.connection-wait small, .runtime-check small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.terminal-connect-card, .agent-connect-card { display: grid; gap: 12px; margin: 18px 0 12px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel-2); }.terminal-connect-card { grid-template-columns: minmax(0,1fr) auto; align-items: center; background: #0d0e11; }.terminal-connect-card > span, .agent-connect-card > span { color: var(--muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }.terminal-connect-card > span { grid-column: 1 / -1; }.terminal-connect-card em { margin-left: 6px; color: var(--agent); font-size: 8px; font-style: normal; }.terminal-connect-card pre, .agent-connect-card pre { margin: 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); font-family: var(--font-mono); font-size: 11px; line-height: 1.7; }.terminal-connect-card pre { white-space: nowrap; }.terminal-connect-card .button { min-height: 34px; padding: 0 12px; }.agent-connect-card pre { max-height: 180px; }.agent-connect-card .button { margin-top: 2px; }
.terminal-connect-card .button[data-copied="true"], .agent-connect-card .button[data-copied="true"] { border-color: var(--agent); background: transparent; color: var(--agent); }
.device-approval-icon { flex: 0 0 auto; font-size: 18px; }.device-approval-identity { min-width: 0; flex: 1; }.device-approval-identity small, .device-approval-code small { display: block; margin-bottom: 5px; color: var(--quiet); font-size: 9px; }.device-approval-identity b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }.device-approval-identity span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }.device-approval-code { flex: 0 0 auto; padding-left: 16px; border-left: 1px solid var(--line); }.device-approval-code code { color: var(--ink); font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; }
.runtime-checks, .connection-progress { display: grid; gap: 8px; margin: 18px 0; }.connection-progress > div { display: flex; align-items: center; gap: 10px; padding: 10px 0; color: var(--muted); }.connection-progress i { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 10px; font-style: normal; }.connection-progress .complete { color: var(--ink); }.connection-progress .complete i { border-color: var(--online); color: var(--online); }
.agent-runtime-list { display: grid; gap: 8px; margin: 20px 0; }
.computer-manager-list { display: grid; gap: 8px; margin: 20px 0; }.computer-manager-row { width: 100%; display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-align: left; background: var(--panel-2); }.computer-manager-row:hover { border-color: var(--line-strong); background: var(--hover); }.computer-manager-row > i { width: 8px; height: 8px; border-radius: 50%; background: var(--quiet); }.computer-manager-row[data-state="online"] > i { background: var(--online); }.computer-manager-row b, .computer-manager-row small { display: block; }.computer-manager-row b { font-size: 12px; }.computer-manager-row small { margin-top: 5px; color: var(--muted); font-size: 10px; }.computer-manager-row em { color: var(--agent); font-size: 10px; font-style: normal; font-weight: 650; }
.computer-manager-row[data-state="paused"] > i { background: #f4b55e; }
.device-presence { display: grid; grid-template-columns: 10px minmax(0,1fr); align-items: center; gap: 12px; margin: 20px 0 24px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); }.device-presence > i { width: 8px; height: 8px; border-radius: 50%; background: var(--quiet); }.device-presence[data-state="online"] > i { background: var(--online); }.device-presence b, .device-presence small { display: block; }.device-presence b { font-size: 12px; }.device-presence small { margin-top: 5px; color: var(--muted); font-size: 9px; }.device-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }.device-section-title span { color: var(--ink-soft); font-size: 11px; font-weight: 700; }.device-section-title small { color: var(--quiet); font-size: 9px; }.device-runtime-empty { padding: 18px; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--muted); font-size: 10px; line-height: 1.65; }.device-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }.device-actions .primary { flex: 1; }.device-actions .danger { flex: 0 0 auto; }
.runtime-check .runtime-restart { margin-left: auto; flex: 0 0 auto; }.agent-recovery-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.agent-runtime-row { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
[data-manage-agent].agent-runtime-row { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.agent-runtime-row > i { width: 8px; height: 8px; border-radius: 50%; background: var(--quiet); }.agent-runtime-row[data-state="online"] > i { background: var(--online); }.agent-runtime-row[data-state="starting"] > i, .agent-runtime-row[data-state="running"] > i { background: var(--agent); }.agent-runtime-row[data-state="error"] > i { background: var(--danger); }
.agent-runtime-row[data-state="paused"] > i, .agent-runtime-row[data-state="compute-paused"] > i { background: #f4b55e; }
.agent-runtime-row b, .agent-runtime-row small { display: block; }.agent-runtime-row b { font-size: 12px; }.agent-runtime-row small { margin-top: 4px; color: var(--muted); font-size: 10px; }.agent-runtime-row em { color: var(--muted); font-size: 10px; font-style: normal; }
.runtime-badge { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--night); background: var(--agent); font-weight: 800; }.runtime-badge.claude { color: var(--ink); background: #995f4c; }
.agent-advanced { margin: 4px 0 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.agent-advanced > summary { padding: 14px 2px; color: var(--ink-soft); cursor: pointer; font-size: 12px; font-weight: 650; }.agent-advanced[open] > summary { border-bottom: 1px solid var(--line); }
.control-section { position: relative; margin: 16px 0; padding: 16px 16px 2px 20px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.012); }.control-section::before { content: ""; position: absolute; top: 15px; bottom: 15px; left: -1px; width: 2px; border-radius: 2px; background: var(--agent); }.control-section.managed::before { background: var(--agent); }.control-section > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }.control-section > header span { color: var(--ink); font-size: 12px; font-weight: 700; }.control-section > header i { padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--quiet); font-family: var(--font-mono); font-size: 8px; font-style: normal; letter-spacing: .06em; }.control-help { margin: -3px 0 14px !important; color: var(--quiet) !important; font-size: 10px; line-height: 1.55 !important; }
.modal .permission-confirm { display: grid; grid-template-columns: 17px minmax(0,1fr); align-items: start; gap: 9px; margin: -2px 0 15px; padding: 11px 12px; border: 1px solid rgba(255,183,77,.3); border-radius: 9px; color: var(--ink-soft); background: rgba(255,183,77,.055); cursor: pointer; }.modal .permission-confirm input { width: 17px; height: 17px; margin: 1px 0 0; padding: 0; }.modal .permission-confirm span { margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.reply-mode { display: grid; gap: 7px; margin: 0 0 14px !important; }.reply-mode legend { color: var(--muted); font-size: 10px; }.reply-mode label { display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: start; gap: 9px; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; }.reply-mode input { width: auto; height: auto; margin-top: 2px; }.reply-mode b, .reply-mode small { display: block; }.reply-mode b { color: var(--ink-soft); font-size: 10px; }.reply-mode small { margin-top: 3px; color: var(--quiet); font-size: 9px; }
.form-feedback { margin: 14px 0 0 !important; padding: 10px 12px; border: 1px solid rgba(255,111,111,.32); border-radius: 9px; color: #ff9a9a !important; background: rgba(255,111,111,.065); font-size: 11px; line-height: 1.5 !important; }
.toast-region { position: fixed; z-index: 80; top: 84px; right: 22px; display: grid; gap: 8px; }.toast { max-width: 360px; padding: 12px 15px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); background: #24252b; box-shadow: 0 14px 40px rgba(0,0,0,.4); font-size: 12px; }.toast.success { border-color: rgba(57,201,138,.35); }.toast.error { border-color: rgba(255,111,111,.45); }
.mobile-nav { display: none; }

.compute-update-card { display: grid; gap: 10px; margin: 16px 0; padding: 16px; border: 1px solid rgba(244,181,94,.35); border-radius: 12px; background: rgba(244,181,94,.08); }.compute-update-card b { color: var(--ink); font-size: 13px; }.compute-update-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }.compute-update-card small { color: var(--quiet); font-family: var(--font-mono); font-size: 9px; }

/* Computer workspace */
.computers-view { height: 100%; display: grid; grid-template-columns: minmax(238px, 286px) minmax(0, 1fr); overflow: hidden; }
.computer-browser { min-width: 0; overflow: hidden; border-right: 1px solid var(--line); background: #0d0e11; }
.computer-browser > header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 18px 16px; border-bottom: 1px solid var(--line); }
.computer-detail-header span { color: var(--quiet); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.computer-browser > header h2 { margin: 0; font-family: var(--font-display); font-size: 20px; letter-spacing: -.035em; }
.computer-workspace-list { height: calc(100% - 88px); display: grid; align-content: start; gap: 7px; overflow-y: auto; padding: 12px; }
.computer-workspace-row { width: 100%; display: grid; grid-template-columns: 9px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 14px 12px; border: 1px solid transparent; border-radius: 11px; color: var(--ink); text-align: left; background: transparent; transition: border-color .16s ease, background-color .16s ease; }
.computer-workspace-row:hover { border-color: var(--line); background: var(--panel); }
.computer-workspace-row.active { border-color: var(--line-strong); background: var(--panel-2); }
.computer-workspace-row > i { width: 8px; height: 8px; border-radius: 50%; background: var(--quiet); box-shadow: 0 0 0 4px rgba(103,105,115,.08); }
.computer-workspace-row[data-state="online"] > i { background: var(--online); box-shadow: 0 0 0 4px rgba(57,201,138,.09); }
.computer-workspace-row[data-state="update"] > i { background: #f4b55e; box-shadow: 0 0 0 4px rgba(244,181,94,.09); }
.computer-workspace-row[data-state="paused"] > i { background: #f4b55e; box-shadow: 0 0 0 4px rgba(244,181,94,.09); }
.computer-workspace-row b, .computer-workspace-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.computer-workspace-row b { color: var(--ink-soft); font-size: 12px; }.computer-workspace-row small { margin-top: 5px; color: var(--quiet); font-size: 9px; }.computer-workspace-row em { color: var(--quiet); font-size: 17px; font-style: normal; font-weight: 300; }
.computer-workspace-empty { min-height: 240px; display: grid; place-items: center; align-content: center; gap: 9px; padding: 20px; color: var(--muted); text-align: center; }.computer-workspace-empty > span { color: var(--agent); font-size: 34px; }.computer-workspace-empty b { color: var(--ink-soft); font-size: 13px; }.computer-workspace-empty p { margin: 0 0 7px; color: var(--quiet); font-size: 10px; line-height: 1.55; }
.computer-workspace-detail { min-width: 0; overflow-y: auto; padding: 0 clamp(24px, 4.2vw, 64px) 58px; background: var(--night); }
.computer-detail-header { min-height: 150px; display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); }
.computer-detail-icon { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 15px; color: var(--agent); background: var(--panel-2); }.computer-detail-icon svg { width: 27px; height: 27px; }
.computer-detail-header h2 { margin: 6px 0 4px; font-family: var(--font-display); font-size: clamp(27px, 3vw, 40px); letter-spacing: -.055em; }.computer-detail-header p { margin: 0; color: var(--muted); font-family: var(--font-mono); font-size: 10px; }.computer-detail-header > i { width: 10px; height: 10px; border-radius: 50%; background: var(--quiet); box-shadow: 0 0 0 5px rgba(103,105,115,.08); }.computer-detail-header > i[data-state="online"] { background: var(--online); box-shadow: 0 0 0 5px rgba(57,201,138,.1); }
.computer-detail-header > i[data-state="paused"] { background: #f4b55e; box-shadow: 0 0 0 5px rgba(244,181,94,.1); }
.computer-update-strip { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: 24px 0 0; padding: 16px 18px; border: 1px solid rgba(244,181,94,.35); border-radius: 12px; background: rgba(244,181,94,.075); }.computer-update-strip b { color: #ffd08c; font-size: 13px; }.computer-update-strip p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.compute-signal { margin-top: 30px; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: rgba(20,21,26,.72); }.compute-signal > header, .computer-agent-section > header, .computer-runtime-section > header, .computer-diagnostics > header { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 20px; }.compute-signal header h3, .computer-agent-section header h3, .computer-runtime-section header h3, .computer-diagnostics header h3 { margin: 0; color: var(--ink-soft); font-size: 16px; letter-spacing: -.025em; }.compute-signal header small, .computer-agent-section header > small, .computer-diagnostics header > small { color: var(--quiet); font-size: 9px; }
.compute-signal-track { display: grid; grid-template-columns: minmax(150px,.82fr) minmax(34px,.25fr) minmax(190px,1.25fr) minmax(34px,.25fr) minmax(140px,1fr); align-items: center; gap: 12px; }
.compute-signal-node { min-width: 0; display: flex; align-items: center; gap: 10px; }.compute-signal-node > i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--quiet); }.compute-signal-node[data-state="online"] > i { background: var(--online); box-shadow: 0 0 12px rgba(57,201,138,.42); }.compute-signal-node b, .compute-signal-node small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.compute-signal-node b { color: var(--ink-soft); font-size: 10px; }.compute-signal-node small { margin-top: 4px; color: var(--quiet); font-size: 8px; }
.compute-runtime-nodes, .compute-agent-nodes { min-width: 0; display: flex; align-items: center; gap: 10px; overflow-x: auto; }.compute-signal-line { position: relative; height: 1px; overflow: hidden; background: var(--line-strong); }.compute-signal-line::after { content: ""; position: absolute; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--agent); animation: local-signal 3.6s ease-in-out infinite; }
.compute-agent-node { min-width: 64px; display: grid; justify-items: center; gap: 6px; }.compute-agent-node span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px 9px 9px 3px; color: var(--night); background: var(--agent); font-size: 9px; font-weight: 800; }.compute-agent-node b { max-width: 78px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }.compute-agent-node[data-state="offline"] span, .compute-agent-node.empty span { color: var(--muted); background: #34363f; }
.compute-agent-node[data-state="paused"] span, .compute-agent-node[data-state="compute-paused"] span { color: #1b1408; background: #f4b55e; }
.computer-facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 20px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.012); }.computer-facts > div { min-width: 0; padding: 16px; border-right: 1px solid var(--line); }.computer-facts > div:last-child { border-right: 0; }.computer-facts span, .computer-facts b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.computer-facts span { color: var(--quiet); font-size: 9px; }.computer-facts b { margin-top: 8px; color: var(--ink-soft); font-family: var(--font-mono); font-size: 10px; }
.computer-agent-section, .computer-runtime-section, .computer-diagnostics { margin-top: 34px; }.computer-agent-section h3, .computer-runtime-section h3, .computer-diagnostics h3 { margin: 6px 0 0; font-family: var(--font-display); font-size: 21px; letter-spacing: -.035em; }
.computer-agent-list { display: grid; gap: 8px; }.computer-agent-row { min-width: 0; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }.computer-agent-row[data-state="paused"], .computer-agent-row[data-state="compute-paused"] { border-color: rgba(244,181,94,.3); background: rgba(244,181,94,.045); }.computer-agent-row b, .computer-agent-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.computer-agent-row b { font-size: 11px; }.computer-agent-row small { margin-top: 4px; color: var(--quiet); font-size: 9px; }.computer-agent-row > div:last-child { display: flex; gap: 7px; }
.computer-runtime-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.computer-runtime-grid article { min-width: 0; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }.computer-runtime-grid article[data-state="online"] { border-color: rgba(57,201,138,.24); }.computer-runtime-grid b, .computer-runtime-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.computer-runtime-grid b { font-size: 11px; }.computer-runtime-grid small { margin-top: 4px; color: var(--quiet); font-size: 9px; }.computer-runtime-empty { grid-column: 1 / -1; padding: 24px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--quiet); font-size: 10px; text-align: center; }
.diagnostic-command { min-width: 0; display: grid; grid-template-columns: 110px minmax(0,1fr) auto; align-items: center; overflow: hidden; border: 1px solid var(--line); border-bottom: 0; background: #0c0d10; }.diagnostic-command:first-of-type { border-radius: 12px 12px 0 0; }.diagnostic-command:last-child { border-bottom: 1px solid var(--line); border-radius: 0 0 12px 12px; }.diagnostic-command > span { padding: 13px 14px; color: var(--muted); font-size: 9px; }.diagnostic-command code { min-width: 0; padding: 13px 14px; overflow-x: auto; color: var(--agent); font-family: var(--font-mono); font-size: 10px; white-space: nowrap; }.diagnostic-command button { align-self: stretch; min-width: 112px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 15px; border: 0; border-left: 1px solid rgba(99,214,209,.28); color: var(--agent); background: rgba(99,214,209,.08); font-size: 9px; font-weight: 700; }.diagnostic-command button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }.diagnostic-command button:hover { color: #071312; background: var(--agent); }.diagnostic-command button[data-copied="true"] { color: var(--online); background: rgba(57,201,138,.1); }
.computer-detail-actions { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; padding: 12px 0; border-bottom: 1px solid rgba(57,59,69,.72); background: rgba(11,12,15,.88); box-shadow: 0 12px 26px rgba(0,0,0,.18); backdrop-filter: blur(18px); }
.computer-detail-actions .button { min-height: 38px; padding-inline: 14px; }
.computer-detail-empty { min-height: 100%; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; }.computer-detail-empty .empty-mark { width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }.computer-detail-empty .empty-mark img { width: 42px; height: 42px; filter: invert(1); opacity: .7; }.computer-detail-empty h2 { margin: 6px 0 0; font-family: var(--font-display); font-size: 28px; letter-spacing: -.04em; }.computer-detail-empty p { margin: 0; color: var(--muted); font-size: 11px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes local-signal { 0% { left: -6px; opacity: 0; } 18%, 78% { opacity: 1; } 100% { left: calc(100% + 1px); opacity: 0; } }

/* Compact desktop: preserve the three-pane workflow without making laptop users zoom out. */
@media (max-width: 1500px) and (min-width: 761px) {
  :root { --rail: 62px; --sidebar: 258px; }
  .app-rail { gap: 20px; padding: 13px 8px; }
  .rail-brand { width: 34px; height: 34px; }.rail-brand img { width: 23px; height: 23px; }
  .rail-action { height: 48px; padding: 5px 0 4px; }.rail-action.active::before { left: -8px; }
  .rail-action span { font-size: 9px; }
  .current-user { width: 36px; height: 36px; }
  .sidebar-header { height: 62px; padding: 0 10px 0 14px; }.sidebar-header h1 { font-size: 18px; }.sidebar-header .icon-button { width: 32px; height: 32px; }
  .search-field { height: 36px; margin: 0 9px 9px; padding: 0 10px; }
  .conversation-list { padding: 0 6px; }
  .nav-item { grid-template-columns: 35px minmax(0,1fr) auto; gap: 9px; padding: 7px 8px; }
  .group-glyph { width: 35px; height: 35px; border-radius: 10px; }
  .nav-item b { font-size: 12px; }.nav-item small { margin-top: 3px; font-size: 10px; }
  .sidebar-runtime-monitor { padding: 11px 14px 13px; }
  .group-stage { grid-template-rows: 62px minmax(0,1fr) auto auto; }
  .group-header { gap: 12px; padding: 0 17px; }
  .group-mark-button { width: 36px; height: 36px; border-radius: 10px; }
  .group-identity h2 { font-size: 17px; }.group-identity p { margin-top: 3px; font-size: 10px; }
  .messages { padding: 20px max(20px, calc((100% - 720px) / 2)) 28px; }
  .message { max-width: 720px; margin-bottom: 19px; }.message.agent { margin-top: 24px; }
  .message-avatar { width: 35px; height: 35px; }.message { grid-template-columns: 35px minmax(0,1fr); gap: 11px; }
  .message-text { max-width: 630px; font-size: 13px; line-height: 1.68; }
  .approval { max-width: 720px; }
  .composer { width: min(720px, calc(100% - 32px)); margin-bottom: 13px; padding-top: 10px; padding-bottom: 8px; }
}

@media (max-width: 980px) {
  :root { --sidebar: 244px; }
  .directory-list { grid-template-columns: 1fr; }
  .directory-view { grid-template-columns: 226px minmax(0,1fr); }
  .landing-header, .landing-hero { width: min(100% - 48px,900px); }
  .landing-hero { grid-template-columns: 1fr; gap: 18px; padding-top: 126px; }
  .landing-copy h1 { font-size: clamp(52px,6.3vw,66px); }
  .landing-moment { width: min(700px,100%); justify-self: center; }
  .computers-view { grid-template-columns: 226px minmax(0,1fr); }
  .computer-workspace-detail { padding-right: 24px; padding-left: 24px; }
  .compute-signal-track { grid-template-columns: 1fr; align-items: start; gap: 12px; }.compute-signal-line { width: 1px; height: 22px; margin-left: 4px; }.compute-signal-line::after { animation: none; }.computer-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }.computer-facts > div:nth-child(2) { border-right: 0; }.computer-facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 760px) {
  body { overflow: hidden; }
  body.landing-active { overflow-y: auto; }
  .workspace { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) 62px; }
  .workspace[data-active-view="contacts"], .workspace[data-active-view="computers"] { grid-template-columns: 1fr; }
  .app-rail { display: none; }
  .conversation-sidebar { grid-column: 1; grid-row: 1; border-right: 0; }
  .workspace[data-active-view="contacts"] .conversation-sidebar, .workspace[data-active-view="computers"] .conversation-sidebar { display: none; }
  .primary-view { grid-column: 1; grid-row: 1; }
  .workspace[data-active-view="contacts"] .directory-view, .workspace[data-active-view="computers"] .computers-view { grid-column: 1; }
  .chat-view { display: none; }
  .workspace[data-active-view="chat"][data-mobile-chat="open"] .conversation-sidebar { display: none; }
  .workspace[data-active-view="chat"][data-mobile-chat="open"] .chat-view { display: block; }
  .workspace[data-active-view="contacts"] .directory-view { display: grid !important; }
  .workspace[data-active-view="computers"] .computers-view { display: grid !important; }
  .mobile-nav { z-index: 20; grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); background: #101115; }
  .mobile-nav button { display: grid; place-items: center; align-content: center; gap: 2px; border: 0; color: var(--quiet); background: transparent; }.mobile-nav button.active { color: var(--ink); }.mobile-nav span { font-size: 10px; }.mobile-nav svg { width: 19px; }
  .sidebar-header { height: 68px; padding: 0 14px; }
  .sidebar-runtime-monitor { padding-bottom: 16px; }
  .group-header { height: 68px; padding: 0 13px; gap: 8px; }
  .mobile-back { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; color: var(--muted); background: transparent; }.mobile-back svg { width: 18px; }
  .group-mark-button { display: none; }.group-identity h2 { font-size: 16px; }.group-identity p { max-width: 170px; overflow: hidden; white-space: nowrap; }.group-actions .quiet { display: none; }.group-actions .button { min-height: 34px; padding: 0 10px; }
  .group-stage { grid-template-rows: 68px minmax(0,1fr) auto auto; }
  .messages { padding: 24px 15px 40px; }.message { grid-template-columns: 33px minmax(0,1fr); gap: 10px; }.message-avatar { width: 33px; height: 33px; }.message-text { font-size: 13px; }
  .message:focus .message-actions { visibility: visible; opacity: 1; transform: translateY(0); }
  .composer { width: calc(100% - 20px); margin-bottom: 10px; }
  .approval { margin: 0 10px 8px; }
  .directory-view { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
  .directory-browser { max-height: 174px; border-right: 0; border-bottom: 1px solid var(--line); }
  .directory-browser > header { min-height: 66px; padding: 12px 16px; }.directory-browser > header h2 { font-size: 18px; }
  .directory-sections { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 9px 12px 11px; }.directory-sections > button { grid-template-columns: 34px minmax(0,1fr); gap: 9px; padding: 8px; }.directory-sections > button > i { display: none; }.directory-section-icon { width: 34px; height: 34px; border-radius: 10px; }.directory-section-icon.agent { border-radius: 9px 9px 9px 3px; }
  .directory-detail-header { min-height: 68px; padding: 10px 14px; gap: 10px; }.directory-detail-header > div:first-child > span { display: none; }.directory-detail-header h2 { margin: 0; font-size: 18px; }.directory-detail-actions { gap: 7px; }.directory-detail-actions .button { min-height: 34px; padding: 0 10px; font-size: 10px; }.directory-detail-actions svg { margin-right: 5px; }
  .directory-detail-body { padding: 16px 12px 34px; }.directory-list { grid-template-columns: 1fr; }.directory-row { grid-template-columns: 42px minmax(0,1fr) auto; padding: 12px; }.directory-avatar { width: 42px; height: 42px; }.directory-row .row-actions { max-width: 142px; flex-wrap: wrap; justify-content: flex-end; }
  .computers-view { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }.computer-browser { max-height: 230px; border-right: 0; border-bottom: 1px solid var(--line); }.computer-browser > header { min-height: 70px; padding: 13px 16px; }.computer-browser > header h2 { font-size: 18px; }.computer-workspace-list { height: auto; max-height: 160px; grid-auto-flow: column; grid-auto-columns: minmax(210px, 82vw); overflow-x: auto; overflow-y: hidden; padding: 10px 12px; }.computer-workspace-detail { padding: 0 16px 38px; }.computer-detail-header { min-height: 118px; grid-template-columns: 46px minmax(0,1fr) auto; gap: 13px; }.computer-detail-icon { width: 46px; height: 46px; border-radius: 12px; }.computer-detail-icon svg { width: 22px; height: 22px; }.computer-detail-header h2 { font-size: 25px; }.computer-update-strip { align-items: stretch; flex-direction: column; }.compute-signal { padding: 16px; }.computer-facts { grid-template-columns: 1fr 1fr; }.computer-runtime-grid { grid-template-columns: 1fr; }.diagnostic-command { grid-template-columns: 78px minmax(0,1fr) auto; }.diagnostic-command > span, .diagnostic-command code { padding-right: 9px; padding-left: 9px; }.diagnostic-command button { padding: 0 11px; }.computer-detail-actions { justify-content: flex-start; overflow-x: auto; }.computer-detail-actions .button { width: auto; flex: 0 0 auto; }
  .member-drawer { width: 100vw; padding-bottom: 20px; }
  .member-row-action { opacity: 1; pointer-events: auto; }
  .drawer-add span { display: none; }.drawer-add { width: 38px; justify-content: center; padding: 0; }
  .login-view { overflow-y: auto; }
  .landing-header { width: calc(100% - 36px); height: 74px; }.brand-mark { width: 38px; height: 38px; font-size: 19px; }.brand-lockup strong { font-size: 21px; }
  .landing-hero { width: calc(100% - 36px); min-height: 100svh; display: block; padding: 109px 0 28px; }
  .landing-copy { max-width: 620px; padding: 0; }.landing-copy h1 { margin: 0 0 19px; font-size: clamp(41px,11.7vw,58px); line-height: 1.04; }.landing-copy > p { max-width: 600px; font-size: 13px; line-height: 1.66; }.landing-copy .landing-cta { min-width: 132px; height: 48px; margin-top: 25px; }
  .landing-moment { min-height: 330px; margin-top: 30px; padding: 0; }.landing-moment::before { inset: 16px 8px 4px 16px; border-radius: 18px; }.life-card { display: none; }.showcase-logo-back { top: -24px; right: 6px; width: 88px; height: 88px; }.showcase-logo-front { display: none; }.moment-room { position: relative; top: auto; right: auto; width: calc(100% - 18px); min-height: 314px; border-radius: 14px; }.moment-room > header { min-height: 54px; padding: 0 17px; }.moment-group { width: 37px; height: 31px; }.moment-group img { top: 2px; width: 27px; height: 27px; }.moment-room header b { font-size: 11px; }.moment-room header small, .moment-room > header > em { font-size: 8px; }.moment-thread { gap: 14px; padding: 15px 17px 17px; }.moment-message { grid-template-columns: 27px minmax(0,1fr); gap: 9px; }.human-avatar, .agent-avatar { width: 27px; height: 27px; font-size: 9px; }.moment-message b { font-size: 9px; }.moment-message time { display: none; }.moment-message small { margin-top: 3px; font-size: 9px; line-height: 1.45; }.moment-message.agent { margin: 0; padding-top: 12px; }.moment-result { display: none; }
  .local-signal { min-height: 52px; grid-template-columns: 28px max-content minmax(22px,1fr) max-content; gap: 7px; padding: 0 17px; }.signal-laptop { width: 28px; height: 19px; }.signal-computer b, .signal-agent b { font-size: 8px; }.signal-computer small, .signal-agent small { font-size: 6px; }.signal-agent { gap: 6px; }.signal-agent i { width: 25px; height: 25px; border-radius: 7px 7px 7px 2px; font-size: 8px; }
  .login-dialog .login-card { padding: 42px 22px 30px; }.login-card h2 { padding-right: 42px; font-size: 30px; }
  .modal form { padding: 28px 20px; }.check-list, .group-member-columns { grid-template-columns: 1fr; }.group-member-list { max-height: 190px; }
  .profile-setup { grid-template-columns: 1fr; justify-items: center; gap: 20px; }.profile-fields { width: 100%; }.profile-avatar-preview { width: 88px; height: 88px; font-size: 26px; }
}

/* Short laptop windows: reserve a stable bottom lane for composing messages. */
@media (max-height: 860px) and (min-width: 761px) {
  .app-rail { gap: 17px; padding-top: 11px; padding-bottom: 11px; }
  .rail-action { height: 48px; }.current-user { width: 36px; height: 36px; }
  .sidebar-header { height: 62px; padding-top: 0; padding-bottom: 0; }.sidebar-header h1 { font-size: 18px; }
  .search-field { height: 36px; margin-bottom: 7px; }
  .nav-item { grid-template-columns: 35px minmax(0,1fr) auto; padding-top: 6px; padding-bottom: 6px; }
  .group-glyph { width: 35px; height: 35px; }.nav-item small { margin-top: 2px; }
  .sidebar-runtime-monitor { padding-top: 10px; padding-bottom: 11px; }
  .group-stage { grid-template-rows: 62px minmax(0,1fr) auto auto; }
  .group-header { padding-right: 16px; padding-left: 16px; }
  .group-mark-button { width: 36px; height: 36px; }.group-identity h2 { font-size: 17px; }
  .messages { padding-top: 18px; padding-bottom: 24px; }
  .message { margin-bottom: 17px; }.message.agent { margin-top: 21px; }.message-text { line-height: 1.62; }
  .composer { margin-bottom: 10px; padding-top: 9px; padding-bottom: 8px; }
  .composer textarea { max-height: 96px; }
  .approval { margin-bottom: 8px; padding-top: 10px; padding-bottom: 10px; }
}

@media (max-height: 720px) and (min-width: 761px) {
  .landing-header { height: 76px; }
  .landing-hero { padding-top: 88px; padding-bottom: 42px; }
  .landing-copy h1 { margin-top: 0; margin-bottom: 20px; font-size: clamp(50px,4.8vw,68px); }
  .landing-copy > p { font-size: 15px; line-height: 1.6; }.landing-cta { height: 52px; margin-top: 28px; }
  .moment-room { min-height: 420px; }.moment-thread { gap: 20px; padding-top: 22px; }.moment-message.agent { padding-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}