:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #111111;
  --bg-soft: #181818;
  --glass: rgba(33, 33, 33, 0.72);
  --glass-strong: rgba(27, 27, 27, 0.9);
  --glass-light: rgba(255, 255, 255, 0.055);
  --stroke: rgba(255, 255, 255, 0.09);
  --stroke-strong: rgba(255, 255, 255, 0.16);
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --subtle: #71717a;
  --accent: #d9ff6f;
  --accent-soft: rgba(217, 255, 111, 0.12);
  --violet: #b8a5ff;
  --danger: #ff8f8f;
  --radius-xl: 26px;
  --radius-lg: 18px;
  --radius-md: 13px;
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; min-width: 320px; min-height: 100%; overflow: hidden; background: #111; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button, input, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

.ambient { position: fixed; z-index: -1; border-radius: 50%; filter: blur(110px); opacity: .18; pointer-events: none; }
.ambient-one { width: 480px; height: 480px; top: -220px; right: 5vw; background: #6f7680; }
.ambient-two { width: 420px; height: 420px; bottom: -240px; left: 12vw; background: #4e5c3b; }
.glass-frame, .glass-panel { border: 1px solid var(--stroke); background: var(--glass); box-shadow: 0 30px 90px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255,255,255,.035); backdrop-filter: blur(28px) saturate(125%); -webkit-backdrop-filter: blur(28px) saturate(125%); }

.app-shell { position: relative; display: grid; grid-template-columns: 302px minmax(0, 1fr); width: calc(100vw - 32px); height: calc(100dvh - 32px); margin: 16px; overflow: hidden; border-radius: var(--radius-xl); background: rgba(20, 20, 20, .78); }
.app-shell.thread-open { grid-template-columns: 302px minmax(420px, 1fr) minmax(340px, 390px); }
.sidebar { display: flex; min-width: 0; flex-direction: column; gap: 15px; padding: 18px 14px 14px; border-width: 0 1px 0 0; border-radius: 0; background: rgba(25,25,25,.76); box-shadow: none; }
.sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 0 5px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 780; letter-spacing: -.055em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.2); border-radius: 11px; color: #171717; background: linear-gradient(145deg, #efffbf, var(--accent)); box-shadow: 0 8px 24px rgba(217,255,111,.12); font-size: 15px; letter-spacing: 0; }
.workspace-card { display: grid; grid-template-columns: 36px minmax(0, 1fr) 20px; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--stroke); border-radius: var(--radius-md); background: rgba(255,255,255,.035); }
.workspace-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #d4d4d8; background: rgba(255,255,255,.07); }
.workspace-card strong { display: block; overflow: hidden; color: #e4e4e7; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-card p { margin: 3px 0 0; color: var(--subtle); font-size: 11px; }
.workspace-chevron { color: var(--subtle); }
.search-box { display: flex; align-items: center; gap: 8px; min-height: 41px; padding: 0 10px; border: 1px solid var(--stroke); border-radius: 12px; background: rgba(7,7,7,.28); color: var(--subtle); transition: border-color .2s, background .2s; }
.search-box:focus-within { border-color: var(--stroke-strong); background: rgba(7,7,7,.48); }
.search-box input { min-width: 0; width: 100%; padding: 10px 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 13px; }
.search-box input::placeholder { color: #66666f; }
.search-box kbd { padding: 3px 5px; border: 1px solid var(--stroke); border-radius: 5px; color: #777780; background: var(--glass-light); font-family: inherit; font-size: 9px; white-space: nowrap; }
.filter-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; border: 1px solid var(--stroke); border-radius: 11px; background: rgba(0,0,0,.2); }
.filter { padding: 7px 5px; border: 0; border-radius: 8px; color: var(--subtle); background: transparent; font-size: 11px; font-weight: 650; transition: color .2s, background .2s; }
.filter:hover { color: var(--text); }
.filter.active { color: #222; background: var(--accent); box-shadow: 0 3px 12px rgba(217,255,111,.1); }
.conversation-heading { display: flex; align-items: center; justify-content: space-between; padding: 1px 7px 0; }
.section-label { margin: 0; color: var(--subtle); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
#conversation-count { color: #65656e; font-size: 10px; }
.conversation-list { display: grid; align-content: start; gap: 4px; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3f3f46 transparent; }
.conversation { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 54px; padding: 8px 10px; border: 1px solid transparent; border-radius: 12px; color: #b8b8bf; background: transparent; text-align: left; transition: border-color .18s, background .18s, transform .18s; }
.conversation:hover { border-color: rgba(255,255,255,.06); background: rgba(255,255,255,.04); }
.conversation.active { border-color: rgba(255,255,255,.1); color: #fff; background: linear-gradient(105deg, rgba(255,255,255,.085), rgba(255,255,255,.035)); box-shadow: inset 3px 0 0 var(--accent); }
.conversation:active { transform: scale(.985); }
.conversation-icon { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #d4d4d8; background: rgba(255,255,255,.055); font-size: 13px; font-weight: 750; }
.conversation.active .conversation-icon { color: #202020; background: var(--accent); }
.conversation-copy { display: grid; min-width: 0; gap: 3px; }
.conversation strong, .conversation small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation strong { font-size: 13px; font-weight: 650; }
.conversation small { color: #777780; font-size: 11px; }
.empty-list { margin: 16px 9px; color: var(--subtle); font-size: 11px; line-height: 1.5; }
.profile-card { display: grid; grid-template-columns: 37px minmax(0,1fr) 34px; align-items: center; gap: 9px; margin-top: auto; padding: 10px; border: 1px solid var(--stroke); border-radius: var(--radius-md); background: rgba(255,255,255,.035); }
.profile-avatar { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; color: #1c1c1c; background: linear-gradient(145deg, #f4f4f5, #a1a1aa); font-size: 12px; font-weight: 800; }
.profile-copy { display: grid; min-width: 0; gap: 3px; }.profile-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.profile-copy > span { display: flex; align-items: center; gap: 5px; color: var(--subtle); font-size: 10px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.08); }.dot.online { background: #8ee8a8; box-shadow: 0 0 0 3px rgba(142,232,168,.09); }
.icon-button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; }.icon-button:hover { border-color: var(--stroke); color: var(--text); background: var(--glass-light); }
.mobile-only { display: none; }

.chat-panel { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; border: 0; border-radius: 0; background: rgba(24,24,24,.52); box-shadow: none; }
.chat-header { display: flex; align-items: center; gap: 14px; min-height: 82px; padding: 15px 24px; border-bottom: 1px solid var(--stroke); background: rgba(25,25,25,.62); backdrop-filter: blur(22px); }
.chat-title { display: flex; min-width: 0; align-items: center; gap: 12px; }
.channel-symbol { display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; border: 1px solid var(--stroke); border-radius: 13px; color: var(--accent); background: rgba(255,255,255,.045); font-size: 18px; font-weight: 720; }
.chat-title > div:last-child { min-width: 0; }.chat-header h1 { overflow: hidden; margin: 2px 0 3px; font-size: 17px; font-weight: 700; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }.chat-header p { overflow: hidden; margin: 0; color: var(--subtle); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.eyebrow { margin: 0; color: #9b9ba5; font-size: 9px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }.live-badge, .secure-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--stroke); border-radius: 999px; color: #a8a8b0; background: rgba(255,255,255,.035); font-size: 10px; white-space: nowrap; }.secure-badge { color: #d5d5d8; }
.feed-shell { position: relative; min-height: 0; overflow: hidden; }.date-divider { position: absolute; z-index: 2; top: 10px; left: 50%; transform: translateX(-50%); }.date-divider span { display: block; padding: 5px 10px; border: 1px solid var(--stroke); border-radius: 999px; color: var(--subtle); background: rgba(30,30,30,.8); backdrop-filter: blur(18px); font-size: 9px; font-weight: 650; }
.message-feed { height: 100%; overflow-y: auto; padding: 48px clamp(20px, 4.5vw, 72px) 28px; scrollbar-width: thin; scrollbar-color: #3f3f46 transparent; }
.message { display: grid; grid-template-columns: 36px minmax(0, 760px); gap: 11px; max-width: 900px; margin: 0 auto; padding: 9px 0; animation: message-in .24s ease-out both; }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.16); border-radius: 11px; color: #202020; background: linear-gradient(145deg, #f4f4f5, #a1a1aa); font-size: 11px; font-weight: 800; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.message.agent .avatar { color: #171717; background: linear-gradient(145deg, #efffbf, var(--accent)); }
.message-content { display: flex; min-width: 0; max-width: min(100%, 760px); flex-direction: column; align-items: flex-start; }.message-meta { display: flex; width: 100%; min-height: 20px; align-items: center; gap: 7px; padding: 0 3px 4px; }.message-meta strong { color: #e4e4e7; font-size: 12px; font-weight: 680; }.principal-kind { padding: 2px 5px; border: 1px solid rgba(217,255,111,.15); border-radius: 5px; color: #bcd76f; background: rgba(217,255,111,.06); font-size: 8px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }.message:not(.agent) .principal-kind { border-color: var(--stroke); color: #92929c; background: var(--glass-light); }
.message-bubble { display: block; width: fit-content; max-width: 100%; padding: 11px 13px; border: 1px solid rgba(255,255,255,.075); border-radius: 4px 15px 15px 15px; background: rgba(255,255,255,.05); box-shadow: 0 8px 26px rgba(0,0,0,.08); }.message-body { margin: 0; color: #dadade; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }.reply-button { margin-left: auto; padding: 4px 7px; border: 1px solid transparent; border-radius: 7px; color: #74747d; background: transparent; font-size: 9px; opacity: 0; transition: opacity .18s, background .18s; }.message:hover .reply-button, .reply-button:focus-visible { opacity: 1; }.reply-button:hover { border-color: var(--stroke); color: #d4d4d8; background: var(--glass-light); }.message-footer { display: flex; width: 100%; align-items: center; gap: 8px; min-height: 20px; padding: 4px 3px 0; }.message-footer time { color: #64646d; font-size: 9px; }.thread-button { padding: 2px 0; border: 0; color: #a5bd62; background: transparent; font-size: 9px; font-weight: 650; }.thread-button:hover { color: var(--accent); text-decoration: underline; }
.message.own { grid-template-columns: minmax(0, 760px) 36px; }.message.own .avatar { grid-column: 2; grid-row: 1; }.message.own .message-content { grid-column: 1; grid-row: 1; align-items: flex-end; justify-self: end; }.message.own .message-meta { justify-content: flex-end; }.message.own .reply-button { order: -1; margin-right: auto; margin-left: 0; }.message.own .message-bubble { border-radius: 15px 4px 15px 15px; background: linear-gradient(135deg, rgba(217,255,111,.11), rgba(255,255,255,.055)); }.message.own .message-footer { justify-content: flex-end; }
.empty-feed { display: grid; place-items: center; align-content: center; min-height: 100%; color: var(--subtle); text-align: center; }.empty-feed span { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px; border: 1px solid var(--stroke); border-radius: 14px; color: var(--accent); background: var(--glass-light); }.empty-feed strong { color: #d4d4d8; font-size: 13px; }.empty-feed p { margin: 5px 0; font-size: 11px; }
.activity { margin-top: 9px; padding: 9px 10px; border: 1px solid rgba(184,165,255,.16); border-radius: 10px; background: rgba(184,165,255,.055); }.activity-heading { display: flex; align-items: center; gap: 7px; }.activity-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px rgba(184,165,255,.08); }.activity-title { color: #c4b7ff; font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }.activity p { margin: 5px 0 0 13px; color: #aaa2ca; font-size: 11px; line-height: 1.45; }.attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }.attachment { padding: 5px 8px; border: 1px solid var(--stroke); border-radius: 7px; color: #d4d4d8; background: rgba(0,0,0,.16); font-size: 10px; text-decoration: none; }.attachment:hover { border-color: var(--stroke-strong); }.thread-note { margin: 5px 3px 0; color: #9c8ee0; font-size: 9px; }
.search-results { position: absolute; z-index: 8; top: 94px; left: 50%; width: min(620px, calc(100% - 48px)); max-height: min(520px, calc(100dvh - 150px)); padding: 12px; overflow-y: auto; transform: translateX(-50%); border-radius: 17px; background: rgba(31,31,31,.94); }.search-results header { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 11px; }.search-results header > div { display: grid; gap: 3px; }.search-results header strong { font-size: 14px; }.search-result { display: grid; gap: 4px; width: 100%; padding: 11px; border: 0; border-top: 1px solid var(--stroke); color: #cfcfd4; background: transparent; font-size: 11px; line-height: 1.45; text-align: left; }.search-result strong { color: var(--accent); }.search-result span { overflow: hidden; color: #aaaab2; text-overflow: ellipsis; white-space: nowrap; }.search-result:hover { background: var(--glass-light); }.search-empty { padding: 22px 10px; color: var(--subtle); font-size: 11px; text-align: center; }
.composer-shell { position: relative; z-index: 4; padding: 10px clamp(18px,4vw,62px) 22px; border-top: 1px solid rgba(255,255,255,.035); background: linear-gradient(to top, rgba(20,20,20,.92), rgba(20,20,20,.56) 72%, transparent); }.reply-state { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 900px; margin: 0 auto; padding: 8px 12px 7px; border: 1px solid rgba(217,255,111,.13); border-bottom: 0; border-radius: 11px 11px 0 0; color: var(--muted); background: rgba(217,255,111,.055); }.reply-state > div { display: flex; align-items: center; gap: 5px; font-size: 10px; }.reply-state strong { color: var(--accent); }.composer { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: end; gap: 8px; max-width: 900px; margin: 0 auto; padding: 8px; border-radius: 17px; background: rgba(34,34,34,.78); }.composer textarea { width: 100%; min-height: 39px; max-height: 132px; padding: 10px 5px 7px; resize: none; overflow-y: auto; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 13px; line-height: 1.5; }.composer textarea::placeholder { color: #686871; }.composer-action { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 2px; border: 1px solid var(--stroke); border-radius: 10px; color: #8b8b94; background: var(--glass-light); }.composer-action:hover { color: var(--text); border-color: var(--stroke-strong); }.composer-action:disabled { cursor: not-allowed; opacity: .42; }.composer-tools { display: flex; align-items: center; gap: 9px; margin-bottom: 2px; }.composer-tools > span { color: #5f5f67; font-size: 8px; white-space: nowrap; }.composer-tools button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; color: #1b1b1b; background: var(--accent); font-size: 17px; font-weight: 780; transition: transform .18s, filter .18s; }.composer-tools button:hover { filter: brightness(1.06); transform: translateY(-1px); }.composer-tools button:active { transform: translateY(0) scale(.96); }
.thread-panel { display: grid; grid-template-rows: auto auto auto minmax(0,1fr) auto; min-width: 0; min-height: 0; overflow: hidden; border-width: 0 0 0 1px; border-radius: 0; background: rgba(22,22,22,.9); box-shadow: -18px 0 50px rgba(0,0,0,.18); }
.thread-header { display: flex; min-height: 82px; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--stroke); }
.thread-header h2 { margin: 3px 0 0; font-size: 16px; letter-spacing: -.02em; }
.thread-root { padding: 14px 15px 8px; border-bottom: 1px solid rgba(255,255,255,.035); background: rgba(255,255,255,.018); }
.thread-root .message { padding: 0; }
.thread-root .message-bubble { background: rgba(255,255,255,.075); }
.thread-divider { display: flex; align-items: center; gap: 8px; padding: 10px 18px 5px; color: var(--subtle); font-size: 9px; font-weight: 650; }
.thread-divider::after { content: ""; height: 1px; flex: 1; background: var(--stroke); }
.thread-feed { min-height: 0; padding: 3px 15px 14px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3f3f46 transparent; }
.thread-feed .message { padding: 8px 0; }
.thread-feed .message-content, .thread-root .message-content { max-width: 100%; }
.thread-empty { padding: 28px 12px; color: var(--subtle); font-size: 11px; line-height: 1.55; text-align: center; }
.thread-composer { display: grid; grid-template-columns: minmax(0,1fr) 34px; gap: 7px; margin: 0 14px 16px; padding: 7px; border-radius: 14px; background: rgba(38,38,38,.86); }
.thread-composer textarea { width: 100%; min-height: 35px; max-height: 132px; padding: 8px 7px 5px; resize: none; overflow-y: auto; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 12px; line-height: 1.45; }
.thread-composer textarea::placeholder { color: #686871; }
.thread-composer button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; color: #1b1b1b; background: var(--accent); font-size: 16px; font-weight: 780; }
.thread-context .reply-button, .thread-context .thread-button { display: none; }
.mobile-backdrop { position: fixed; z-index: 19; inset: 0; background: rgba(0,0,0,.62); backdrop-filter: blur(3px); }

.auth-overlay { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 22px; overflow-y: auto; background: radial-gradient(circle at 50% 0, rgba(217,255,111,.08), transparent 36%), rgba(12,12,12,.96); backdrop-filter: blur(24px); }
.auth-card { display: grid; width: min(440px,100%); gap: 19px; padding: 28px; border-radius: 22px; background: rgba(27,27,27,.9); box-shadow: 0 35px 100px rgba(0,0,0,.58); }.auth-brand { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 780; letter-spacing: -.04em; }.auth-copy h1 { margin: 6px 0 5px; font-size: 23px; letter-spacing: -.04em; }.auth-copy > p:last-child { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }.auth-form { display: grid; gap: 14px; }.auth-form .primary-button { width: 100%; margin-top: 3px; }.auth-field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }.auth-links { display: flex; justify-content: center; gap: 14px; min-height: 16px; }.auth-links button { padding: 0; border: 0; color: #92929b; background: transparent; font-size: 9px; }.auth-links button:hover { color: var(--accent); }.danger-button { min-height: 38px; padding: 0 14px; border: 1px solid rgba(255,143,143,.2); border-radius: 10px; color: #ffaaaa; background: rgba(255,143,143,.06); font-size: 10px; }.danger-button:hover { background: rgba(255,143,143,.1); }

.mock-login-button { display: grid; place-items: center; gap: 3px; min-height: 48px; padding: 8px 14px; border: 1px dashed rgba(217,255,111,.3); border-radius: 11px; color: #dff59f; background: rgba(217,255,111,.06); font-size: 10px; font-weight: 700; }.mock-login-button span { color: #8fa05f; font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.mock-login-button:hover { border-color: rgba(217,255,111,.55); background: rgba(217,255,111,.1); }.mock-login-button:disabled { cursor: wait; opacity: .55; }
.settings-overlay { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(5,5,5,.72); backdrop-filter: blur(12px); }
.settings-dialog { display: grid; grid-template-rows: auto minmax(0,1fr); width: min(1080px, 100%); height: min(780px, calc(100dvh - 48px)); overflow: hidden; border-radius: 24px; background: rgba(24,24,24,.96); box-shadow: 0 40px 120px rgba(0,0,0,.7); }
.settings-header { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 20px 14px 24px; border-bottom: 1px solid var(--stroke); background: rgba(255,255,255,.018); }
.settings-header h2 { margin: 3px 0 0; font-size: 19px; letter-spacing: -.03em; }.settings-header-actions { display: flex; align-items: center; gap: 9px; }.settings-save-status { min-width: 38px; color: #9dc44c; font-size: 10px; font-weight: 700; }
.settings-unlock { display: grid; width: min(390px, calc(100% - 36px)); align-self: center; justify-self: center; text-align: center; }.settings-lock-icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 15px; border: 1px solid rgba(217,255,111,.2); border-radius: 17px; color: var(--accent); background: var(--accent-soft); font-size: 24px; }.settings-unlock h3 { margin: 6px 0 7px; font-size: 20px; }.settings-unlock > p:not(.eyebrow) { margin: 0 0 20px; color: var(--muted); font-size: 11px; line-height: 1.6; }.settings-unlock form { display: grid; gap: 12px; text-align: left; }
.settings-layout { display: grid; grid-template-columns: 238px minmax(0,1fr); min-height: 0; }.settings-nav { display: flex; min-height: 0; flex-direction: column; gap: 5px; padding: 17px 12px; border-right: 1px solid var(--stroke); background: rgba(10,10,10,.24); }.settings-nav-item { display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: 11px; color: #8b8b94; background: transparent; text-align: left; }.settings-nav-item > span:first-child { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: rgba(255,255,255,.04); }.settings-nav-item > span:last-child { display: grid; gap: 2px; }.settings-nav-item strong { color: #b9b9c0; font-size: 11px; }.settings-nav-item small { color: #686871; font-size: 9px; }.settings-nav-item:hover { background: rgba(255,255,255,.035); }.settings-nav-item.active { border-color: rgba(217,255,111,.12); color: #222; background: var(--accent-soft); }.settings-nav-item.active > span:first-child { color: #202020; background: var(--accent); }.settings-nav-item.active strong { color: #e8e8ea; }.settings-lock-button { margin-top: auto; padding: 9px; border: 1px solid var(--stroke); border-radius: 10px; color: #8e8e97; background: rgba(255,255,255,.025); font-size: 10px; }.settings-lock-button:hover { color: var(--text); background: var(--glass-light); }
.settings-content { position: relative; min-height: 0; overflow-y: auto; padding: 26px clamp(22px,4vw,48px) 92px; scrollbar-width: thin; scrollbar-color: #3f3f46 transparent; }.settings-page { display: none; max-width: 690px; margin: 0 auto; }.settings-page.active { display: block; animation: message-in .18s ease-out; }.settings-page-heading { margin-bottom: 20px; }.settings-page-heading h3 { margin: 5px 0 5px; font-size: 22px; letter-spacing: -.035em; }.settings-page-heading > p:last-child { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.settings-card, .integration-card { display: grid; gap: 18px; margin-bottom: 14px; padding: 18px; border: 1px solid var(--stroke); border-radius: 15px; background: rgba(255,255,255,.025); }.integration-card { gap: 15px; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.018)); }.settings-field { display: grid; gap: 6px; }.settings-field > span { color: #dedee1; font-size: 11px; font-weight: 650; }.settings-field > small { margin-top: -2px; color: #777780; font-size: 9px; line-height: 1.45; }.settings-field input { width: 100%; min-width: 0; height: 39px; padding: 0 11px; border: 1px solid var(--stroke); border-radius: 10px; outline: 0; color: var(--text); background: rgba(0,0,0,.22); font-size: 11px; transition: border-color .18s, background .18s; }.settings-field input:focus { border-color: rgba(217,255,111,.38); background: rgba(0,0,0,.34); }.settings-field input::placeholder { color: #585861; }.settings-field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.settings-toggle-list { gap: 0; padding: 4px 18px; }.settings-toggle { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 66px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.055); cursor: pointer; }.settings-toggle:last-child { border-bottom: 0; }.settings-toggle > span { display: grid; gap: 4px; }.settings-toggle strong { color: #d7d7da; font-size: 11px; }.settings-toggle small { color: #777780; font-size: 9px; line-height: 1.45; }.settings-toggle input { position: absolute; opacity: 0; pointer-events: none; }.settings-toggle i { position: relative; flex: 0 0 auto; width: 35px; height: 20px; border: 1px solid var(--stroke-strong); border-radius: 999px; background: #333; transition: background .18s; }.settings-toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #9b9ba3; transition: transform .18s, background .18s; }.settings-toggle input:checked + i { border-color: rgba(217,255,111,.45); background: var(--accent); }.settings-toggle input:checked + i::after { background: #242424; transform: translateX(15px); }.settings-toggle.compact { min-height: auto; margin-left: auto; padding: 0; border: 0; }
.settings-summary-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 14px; }.settings-summary-grid > div { display: grid; gap: 3px; padding: 15px 17px; border: 1px solid var(--stroke); border-radius: 13px; background: rgba(255,255,255,.025); }.settings-summary-grid strong { color: var(--accent); font-size: 22px; }.settings-summary-grid span { color: var(--subtle); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }.settings-users { gap: 0; padding: 4px 17px; }.settings-user { display: grid; grid-template-columns: 34px minmax(0,1fr) auto 8px; align-items: center; gap: 10px; min-height: 57px; border-bottom: 1px solid rgba(255,255,255,.05); }.settings-user:last-child { border-bottom: 0; }.settings-user-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #222; background: #c7c7cd; font-size: 10px; font-weight: 800; }.settings-user-avatar.agent { background: var(--accent); }.settings-user > span:nth-child(2) { display: grid; gap: 2px; }.settings-user strong { font-size: 11px; }.settings-user small { color: var(--subtle); font-size: 9px; }.settings-user b { padding: 3px 6px; border: 1px solid var(--stroke); border-radius: 6px; color: #888891; font-size: 8px; text-transform: uppercase; }.settings-user .dot { width: 6px; height: 6px; }.settings-help { color: var(--subtle); font-size: 9px; line-height: 1.5; }
.integration-heading { display: flex; align-items: center; gap: 11px; }.integration-logo { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(217,255,111,.18); border-radius: 11px; color: #222; background: var(--accent); font-size: 13px; font-weight: 850; }.integration-logo.agent-logo { color: #ececf0; background: #44444c; }.integration-logo.webhook-logo { color: #e4dcff; background: rgba(184,165,255,.18); }.integration-heading > div { display: grid; min-width: 0; gap: 3px; }.integration-heading strong { font-size: 12px; }.integration-heading small { color: var(--subtle); font-size: 9px; line-height: 1.4; }.secret-state { margin-left: 5px; color: #8d8d95; font-size: 8px; font-weight: 650; }.secret-state.configured { color: #a8cb59; }.endpoint-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; padding: 6px 7px 6px 10px; border: 1px solid var(--stroke); border-radius: 10px; background: rgba(0,0,0,.2); }.endpoint-row code { align-self: center; overflow: hidden; color: #aaaab2; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.copy-endpoint { padding: 6px 9px; border: 1px solid var(--stroke); border-radius: 7px; color: #a1a1aa; background: var(--glass-light); font-size: 9px; }.integration-note { margin: -4px 0 0; color: #817a9e; font-size: 9px; line-height: 1.5; }
.input-suffix { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; border: 1px solid var(--stroke); border-radius: 10px; background: rgba(0,0,0,.22); }.input-suffix input { border: 0; background: transparent; }.input-suffix span { padding-right: 11px; color: var(--subtle); font-size: 9px; }.security-note { display: block; border-color: rgba(217,255,111,.12); background: var(--accent-soft); }.security-note strong { color: #dfe5ce; font-size: 11px; }.security-note p { margin: 6px 0 0; color: #929a7d; font-size: 9px; line-height: 1.55; }.system-status { display: grid; justify-items: center; margin-bottom: 14px; padding: 30px; border: 1px solid rgba(217,255,111,.12); border-radius: 15px; background: radial-gradient(circle at 50% 20%, rgba(217,255,111,.1), transparent 55%); }.system-status > span { display: flex; align-items: center; gap: 6px; color: #9bc055; font-size: 9px; }.system-status strong { margin-top: 12px; font-size: 25px; }.system-status small { margin-top: 4px; color: var(--subtle); }.system-list { gap: 0; }.system-list > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 42px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 10px; }.system-list > div:last-child { border-bottom: 0; }.system-list span { color: var(--subtle); }.system-list strong, .system-list code { color: #c4c4ca; font-size: 9px; }
.settings-footer { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 70px; padding: 12px clamp(22px,4vw,48px); border-top: 1px solid var(--stroke); background: rgba(25,25,25,.94); backdrop-filter: blur(18px); }.primary-button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 10px; color: #202020; background: var(--accent); font-size: 11px; font-weight: 750; }.primary-button:hover { filter: brightness(1.05); }.primary-button:disabled { cursor: wait; opacity: .6; }.settings-error { margin: 0 auto 0 0; color: var(--danger); font-size: 9px; line-height: 1.4; }

.settings-user-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }.settings-role-select { max-width: 82px; padding: 5px 20px 5px 7px; border: 1px solid var(--stroke); border-radius: 7px; outline: 0; color: #b8b8c0; background: #29292d; font-size: 8px; text-transform: uppercase; }.settings-role-select:focus { border-color: rgba(217,255,111,.4); }.settings-inline-button { padding: 5px 7px; border: 1px solid var(--stroke); border-radius: 7px; color: #9898a1; background: rgba(255,255,255,.035); font-size: 8px; white-space: nowrap; }.settings-inline-button:hover { color: var(--accent); border-color: rgba(217,255,111,.2); }
.conversation-heading > span { display: flex; align-items: center; gap: 5px; }.mini-add { display: grid; place-items: center; width: 23px; height: 23px; padding: 0; border: 1px solid var(--stroke); border-radius: 7px; color: #8d8d96; background: rgba(255,255,255,.025); }.mini-add:hover { color: var(--accent); }.unread-badge { display: grid; flex: 0 0 auto; place-items: center; min-width: 19px; height: 19px; margin-left: auto; padding: 0 5px; border-radius: 999px; color: #1d1d1d; background: var(--accent); font-size: 8px; font-weight: 800; }.edited-label { color: #5f5f68; font-size: 8px; }.message-action { padding: 2px 3px; border: 0; color: #66666f; background: transparent; font-size: 8px; opacity: 0; }.message:hover .message-action, .message-action:focus-visible { opacity: 1; }.message-action:hover { color: #c3c3c8; }.message.deleted .message-body { color: #73737c; font-style: italic; }.typing-indicator { max-width: 900px; min-height: 15px; margin: -2px auto 4px; color: #88975e; font-size: 9px; }
.settings-toolbar { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 13px; }.secondary-button { min-height: 38px; padding: 0 14px; border: 1px solid var(--stroke); border-radius: 10px; color: #b5b5bc; background: rgba(255,255,255,.035); font-size: 10px; font-weight: 650; }.secondary-button:hover { border-color: var(--stroke-strong); color: var(--text); }.settings-user.disabled { opacity: .55; }
.workspace-modal { position: fixed; z-index: 55; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(5,5,5,.72); backdrop-filter: blur(10px); }.workspace-modal-card { display: grid; grid-template-rows: auto minmax(0,1fr); width: min(620px,100%); max-height: min(780px,calc(100dvh - 40px)); overflow: hidden; border-radius: 20px; background: rgba(26,26,26,.97); }.workspace-modal-card > header { display: flex; align-items: center; justify-content: space-between; padding: 17px 18px; border-bottom: 1px solid var(--stroke); }.workspace-modal-card h2 { margin: 4px 0 0; font-size: 17px; }.workspace-modal-card form { min-height: 0; padding: 18px; overflow-y: auto; }.workspace-modal-card form > #workspace-modal-body { display: grid; gap: 15px; }.workspace-modal-card form > footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--stroke); }.workspace-modal textarea, .workspace-modal select { width: 100%; padding: 10px 11px; border: 1px solid var(--stroke); border-radius: 10px; outline: 0; color: var(--text); background: #202024; font-size: 11px; }.workspace-modal textarea { resize: vertical; line-height: 1.5; }.modal-label { display: block; margin-bottom: 7px; color: #d4d4d8; font-size: 10px; font-weight: 650; }.member-picker { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; max-height: 225px; overflow-y: auto; }.member-picker label { display: grid; grid-template-columns: 18px 29px minmax(0,1fr); align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--stroke); border-radius: 10px; background: rgba(255,255,255,.02); cursor: pointer; }.member-picker .settings-user-avatar { width: 29px; height: 29px; }.member-picker label > span:last-child { display: grid; gap: 2px; }.member-picker strong { font-size: 9px; }.member-picker small { color: var(--subtle); font-size: 8px; text-transform: capitalize; }.key-list { display: grid; gap: 5px; }.key-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid var(--stroke); border-radius: 9px; }.key-list span { display: grid; gap: 2px; }.key-list strong { font-size: 9px; }.key-list small { color: var(--subtle); font-size: 8px; }
.media-attachment { display: grid; max-width: 290px; padding: 0; overflow: hidden; text-align: left; }.media-attachment img { display: block; width: 100%; max-height: 220px; object-fit: cover; }.media-attachment span { padding: 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.attachment-player { width: min(320px,100%); max-height: 220px; border-radius: 9px; }.url-preview { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 10px; min-width: min(360px,70vw); margin-top: 9px; padding: 8px; overflow: hidden; border: 1px solid var(--stroke); border-left: 3px solid var(--accent); border-radius: 10px; color: inherit; background: rgba(0,0,0,.18); text-decoration: none; }.url-preview:has(img[hidden]) { grid-template-columns: minmax(0,1fr); padding: 10px 11px; }.url-preview > img { width: 82px; height: 68px; border-radius: 7px; object-fit: cover; background: rgba(255,255,255,.04); }.url-preview-copy { display: grid; align-content: center; gap: 4px; min-width: 0; }.url-preview strong { overflow: hidden; color: #e2e2e5; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.url-preview-copy > span { display: -webkit-box; overflow: hidden; color: var(--subtle); font-size: 9px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.url-preview small { overflow: hidden; color: #696972; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.pinned-label { color: #b7ce70; font-size: 8px; }.reaction-row { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 4px; }.reaction-chip { padding: 3px 7px; border: 1px solid var(--stroke); border-radius: 999px; color: #b7b7bd; background: rgba(255,255,255,.035); font-size: 10px; }.reaction-chip.active { border-color: rgba(217,255,111,.35); background: var(--accent-soft); }.emoji-picker { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; }.emoji-picker button { min-height: 48px; border: 1px solid var(--stroke); border-radius: 11px; background: var(--glass-light); font-size: 22px; }
.pending-attachments { display: flex; flex-wrap: wrap; gap: 5px; max-width: 900px; margin: 6px auto 0; }.pending-attachments span { padding: 5px 7px; border: 1px solid var(--stroke); border-radius: 7px; color: #aaaab2; background: rgba(0,0,0,.25); font-size: 9px; }.pending-attachments button { border: 0; color: var(--danger); background: transparent; }.load-older { position: absolute; z-index: 3; top: 38px; left: 50%; padding: 5px 10px; transform: translateX(-50%); border: 1px solid var(--stroke); border-radius: 999px; color: #aaaab2; background: rgba(31,31,31,.9); font-size: 9px; }.search-filters { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; padding: 0 3px 9px; }.search-filters select { min-width: 0; padding: 7px; border: 1px solid var(--stroke); border-radius: 8px; color: #aaaab2; background: #29292d; font-size: 9px; }
.notification-button { position: relative; }.notification-button b { position: absolute; top: -3px; right: -3px; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; color: #222; background: var(--accent); font-size: 7px; }.notifications-panel { position: absolute; z-index: 10; top: 73px; right: 20px; width: min(390px,calc(100% - 30px)); max-height: min(520px,calc(100dvh - 100px)); overflow-y: auto; border-radius: 16px; background: rgba(28,28,28,.96); }.notifications-panel header { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-bottom: 1px solid var(--stroke); }.notifications-panel header > div { display: grid; gap: 3px; }.notification-item { display: grid; gap: 4px; width: 100%; padding: 11px 13px; border: 0; border-bottom: 1px solid var(--stroke); color: #bdbdc3; background: transparent; text-align: left; }.notification-item.unread { background: var(--accent-soft); }.notification-item strong { font-size: 10px; }.notification-item span { overflow: hidden; color: var(--subtle); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.notification-item time { color: #5f5f68; font-size: 8px; }.push-controls { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--stroke); background: rgba(25,25,25,.97); }.push-controls > span { color: var(--subtle); font-size: 8px; line-height: 1.4; }.push-controls > div { display: flex; gap: 6px; }.push-controls .secondary-button { min-height: 30px; padding: 0 10px; }.subscribe-button { margin-left: auto; padding: 6px 9px; border: 1px solid var(--stroke); border-radius: 8px; color: #aebd7b; background: var(--accent-soft); font-size: 9px; }.media-viewer { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 50px; background: rgba(5,5,5,.92); backdrop-filter: blur(16px); }.media-viewer > button { position: absolute; top: 18px; right: 18px; }.media-viewer img, .media-viewer video { display: block; max-width: 95vw; max-height: 88vh; border-radius: 14px; box-shadow: 0 30px 100px #000; }
.mention-suggestions { position: absolute; z-index: 7; right: clamp(18px,4vw,62px); bottom: calc(100% - 10px); display: grid; width: min(280px,calc(100% - 20px)); padding: 5px; border-radius: 12px; background: rgba(31,31,31,.97); }.mention-suggestions button { display: grid; gap: 2px; padding: 8px 9px; border: 0; border-radius: 8px; color: #dddde0; background: transparent; text-align: left; }.mention-suggestions button:hover { background: var(--glass-light); }.mention-suggestions span { font-size: 10px; }.mention-suggestions small { color: var(--subtle); font-size: 8px; }
.webhook-deliveries { display: grid; gap: 5px; }.webhook-delivery { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--stroke); border-radius: 9px; background: rgba(0,0,0,.14); }.webhook-delivery > span { display: grid; min-width: 0; gap: 2px; }.webhook-delivery strong { font-size: 9px; }.webhook-delivery small { color: var(--subtle); font-size: 8px; }.webhook-delivery em { overflow: hidden; color: #c88686; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }.webhook-delivery > b { padding: 3px 6px; border-radius: 999px; color: #aaaab2; background: var(--glass-light); font-size: 7px; text-transform: uppercase; }.webhook-delivery.delivered > b { color: #aeca71; background: var(--accent-soft); }.webhook-delivery.failed > b { color: #ffaaaa; background: rgba(255,143,143,.08); }.security-note .secondary-button { margin-top: 12px; }.security-note > small { display: block; min-height: 14px; margin-top: 8px; color: #aab68b; font-size: 8px; }
.openclaw-manager { overflow: hidden; }.connection-pill { margin-left: auto; padding: 5px 8px; border: 1px solid var(--stroke); border-radius: 999px; color: #96969f; background: rgba(255,255,255,.03); font-size: 8px; font-weight: 700; white-space: nowrap; }.connection-pill.connected { border-color: rgba(217,255,111,.22); color: #b9d879; background: var(--accent-soft); }.connection-pill.error { border-color: rgba(255,143,143,.2); color: #e49a9a; background: rgba(255,143,143,.07); }.openclaw-wizard-status { display: grid; grid-template-columns: 13px minmax(0,1fr); align-items: start; gap: 9px; padding: 12px; border: 1px solid rgba(217,255,111,.12); border-radius: 12px; background: linear-gradient(135deg,rgba(217,255,111,.055),rgba(255,255,255,.018)); }.openclaw-wizard-status > span:last-child { display: grid; gap: 4px; }.openclaw-wizard-status strong { color: #d7ddc8; font-size: 10px; }.openclaw-wizard-status small { color: #818879; font-size: 9px; line-height: 1.5; }.status-orb { width: 9px; height: 9px; margin-top: 2px; border: 2px solid rgba(217,255,111,.18); border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(217,255,111,.25); }.openclaw-connections { display: grid; gap: 7px; }.openclaw-connection { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--stroke); border-radius: 11px; background: rgba(0,0,0,.16); }.openclaw-connection-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #222; background: var(--accent); font-size: 11px; font-weight: 850; }.openclaw-connection > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }.openclaw-connection strong { font-size: 10px; }.openclaw-connection small { overflow: hidden; color: var(--subtle); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.openclaw-connection-actions { display: flex; gap: 5px; }.openclaw-connection.error { border-color: rgba(255,143,143,.16); }.openclaw-connection.error .openclaw-connection-avatar { color: #f2cece; background: rgba(255,143,143,.18); }.openclaw-advanced { padding-top: 4px; border-top: 1px solid var(--stroke); }.openclaw-advanced > summary { padding: 8px 0 2px; color: #74747d; font-size: 9px; cursor: pointer; }.openclaw-advanced[open] { display: grid; gap: 14px; }.openclaw-advanced[open] > summary { margin-bottom: 2px; color: #aaaab2; }.wizard-progress { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }.wizard-progress span { padding: 7px; border: 1px solid var(--stroke); border-radius: 8px; color: #777780; background: rgba(255,255,255,.02); font-size: 8px; text-align: center; }.wizard-progress span.active { border-color: rgba(217,255,111,.25); color: #cfe791; background: var(--accent-soft); }.wizard-discovery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }.wizard-discovery > div { display: grid; gap: 3px; padding: 10px; border: 1px solid var(--stroke); border-radius: 10px; background: rgba(255,255,255,.025); }.wizard-discovery strong { font-size: 9px; }.wizard-discovery small { color: var(--subtle); font-size: 8px; }.wizard-agent-picker { display: grid; gap: 6px; }.wizard-agent-option { display: grid; grid-template-columns: 18px 34px minmax(0,1fr); align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--stroke); border-radius: 10px; background: rgba(255,255,255,.02); cursor: pointer; }.wizard-agent-option:has(input:checked) { border-color: rgba(217,255,111,.24); background: var(--accent-soft); }.wizard-agent-option > span:last-child { display: grid; min-width: 0; gap: 2px; }.wizard-agent-option strong { font-size: 10px; }.wizard-agent-option small { overflow: hidden; color: var(--subtle); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.wizard-agent-option .openclaw-connection-avatar { width: 32px; height: 32px; }.wizard-note { margin: 0; padding: 9px 10px; border: 1px solid rgba(184,165,255,.12); border-radius: 9px; color: #948bad; background: rgba(184,165,255,.045); font-size: 8px; line-height: 1.5; }
@keyframes message-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.reasoning-trace { margin-top: 9px; overflow: hidden; border: 1px solid rgba(184,165,255,.16); border-radius: 10px; background: rgba(11,10,16,.28); }.reasoning-trace summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; color: #c4b7ff; cursor: pointer; list-style: none; }.reasoning-trace summary::-webkit-details-marker { display: none; }.reasoning-trace summary::after { content: "＋"; margin-left: auto; color: #8076ad; }.reasoning-trace[open] summary::after { content: "−"; }.reasoning-trace summary > span { font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }.reasoning-trace summary > small { color: #77718f; font-size: 8px; }.reasoning-trace pre { max-height: 320px; margin: 0; padding: 11px 12px; overflow: auto; border-top: 1px solid rgba(184,165,255,.1); color: #aaa2ca; font: 10px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; white-space: pre-wrap; overflow-wrap: anywhere; }.reasoning-trace > small { display: block; padding: 0 12px 9px; color: #625d75; font-size: 8px; }
@media (hover: none) { .reply-button { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; } }

@media (min-width: 761px) and (max-width: 1180px) {
  .app-shell.thread-open { grid-template-columns: 302px minmax(0,1fr); }
  .thread-panel { position: absolute; z-index: 12; top: 0; right: 0; bottom: 0; width: min(390px, calc(100% - 302px)); }
}

@media (max-width: 760px) {
  body { overflow: hidden; }
  .ambient-one { width: 320px; height: 320px; top: -180px; right: -80px; }.ambient-two { width: 300px; height: 300px; bottom: -170px; left: -90px; }
  .app-shell { display: block; width: 100%; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .mobile-only { display: grid; }
  .sidebar { position: fixed; z-index: 20; top: 0; bottom: 0; left: 0; width: min(88vw, 340px); padding-top: max(16px, env(safe-area-inset-top)); border-right: 1px solid var(--stroke-strong); background: rgba(24,24,24,.95); transform: translateX(-104%); transition: transform .24s ease; }
  .sidebar.open { transform: translateX(0); }
  .thread-panel { position: fixed; z-index: 24; inset: 0; width: 100%; height: 100dvh; border: 0; background: rgba(22,22,22,.98); }
  .thread-header { min-height: 68px; padding: max(12px, env(safe-area-inset-top)) 14px 10px; }
  .thread-root { padding: 12px 12px 7px; }.thread-feed { padding: 3px 12px 10px; }.thread-composer { margin: 0 10px max(10px, env(safe-area-inset-bottom)); }
  .workspace-card { padding: 9px; }.search-box kbd { display: none; }.conversation-list { padding-bottom: 6px; }
  .chat-panel { height: 100dvh; min-height: 0; }
  .chat-header { min-height: 68px; padding: max(10px, env(safe-area-inset-top)) 12px 10px; }.chat-title { flex: 1; }.channel-symbol { width: 36px; height: 36px; border-radius: 11px; }.chat-header h1 { font-size: 15px; }.chat-header p { max-width: 47vw; }.secure-badge, .live-badge { display: none; }.header-actions { flex: 0 0 auto; gap: 4px; }
  .date-divider { top: 7px; }.message-feed { padding: 42px 12px 20px; }.message { width: 100%; max-width: 100%; grid-template-columns: 32px minmax(0,1fr); gap: 8px; padding: 7px 0; }.message.own { grid-template-columns: minmax(0,1fr) 32px; }.message-content, .message-bubble, .url-preview { min-width: 0; max-width: 100%; }.avatar { width: 32px; height: 32px; border-radius: 10px; }.message-bubble { padding: 10px 11px; }.message-body { font-size: 12px; }.message-meta { gap: 5px; }.message-meta strong { font-size: 11px; }.principal-kind { display: none; }.reply-button { padding: 4px; font-size: 0; }.reply-button::after { content: "↩"; font-size: 12px; }
  .search-results { top: 75px; width: calc(100% - 24px); max-height: calc(100dvh - 110px); }
  .composer-shell { min-width: 0; padding: 0 10px max(10px, env(safe-area-inset-bottom)); overflow: hidden; }.composer { width: 100%; min-width: 0; max-width: 100%; grid-template-columns: 31px minmax(0,1fr) 32px; gap: 5px; padding: 7px; border-radius: 15px; }.composer-action { width: 31px; height: 31px; }.composer textarea { min-width: 0; min-height: 36px; padding: 8px 4px 6px; font-size: 12px; }.composer-tools { min-width: 0; }.composer-tools > span { display: none; }.composer-tools button { width: 32px; height: 32px; }.reply-state { padding: 7px 10px 6px; }
  .settings-overlay { padding: 0; }.settings-dialog { width: 100%; height: 100dvh; border: 0; border-radius: 0; }.settings-header { min-height: 66px; padding: max(12px,env(safe-area-inset-top)) 12px 10px 16px; }.settings-layout { display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }.settings-nav { display: flex; flex-direction: row; gap: 5px; padding: 8px 10px; overflow-x: auto; border: 0; border-bottom: 1px solid var(--stroke); scrollbar-width: none; }.settings-nav-item { display: flex; flex: 0 0 auto; width: auto; padding: 7px 9px; }.settings-nav-item > span:first-child { width: 25px; height: 25px; }.settings-nav-item small { display: none; }.settings-nav-item strong { white-space: nowrap; }.settings-lock-button { flex: 0 0 auto; margin: 0; }.settings-content { padding: 20px 13px 86px; }.settings-page-heading h3 { font-size: 19px; }.settings-field-grid { grid-template-columns: 1fr; }.settings-card, .integration-card { padding: 15px; }.integration-heading small { max-width: 54vw; }.settings-footer { min-height: 66px; padding: 10px 13px max(10px,env(safe-area-inset-bottom)); }
  .auth-overlay { place-items: start center; padding: max(18px,env(safe-area-inset-top)) 12px max(18px,env(safe-area-inset-bottom)); }.auth-card { margin: auto 0; padding: 22px 17px; border-radius: 18px; }.auth-field-grid { grid-template-columns: 1fr; }
  .workspace-modal { padding: 0; }.workspace-modal-card { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }.workspace-modal-card > header { padding: max(14px,env(safe-area-inset-top)) 14px 12px; }.workspace-modal-card form { padding: 14px 12px max(14px,env(safe-area-inset-bottom)); }.member-picker { grid-template-columns: 1fr; }.settings-user-actions { gap: 3px; }.settings-inline-button { padding: 5px; }.message-action { opacity: 1; }
  .wizard-discovery { grid-template-columns: 1fr; }.openclaw-connection { grid-template-columns: 32px minmax(0,1fr); }.openclaw-connection-actions { grid-column: 1 / -1; justify-content: flex-end; }.connection-pill { font-size: 7px; }
}