/* ============================================================ TC Agent Console — application styles Ported from the design prototype (delivery/source/styles.css). Tokens are CSS custom properties; theme via [data-concept] on . ============================================================ */ :root { --font-sans: "Inter Tight", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code", Menlo, monospace; --r-sm: 7px; --r-md: 11px; --r-lg: 16px; --r-xl: 22px; --rail-w: 248px; --ctx-w: 320px; --ease: cubic-bezier(0.4, 0.1, 0.2, 1); } /* ---------- Concept A: Midnight Purple (default) ---------- */ [data-concept="midnight"] { --bg: oklch(0.185 0.018 270); --surface-1: oklch(0.224 0.021 271); --surface-2: oklch(0.262 0.025 272); --surface-3: oklch(0.312 0.03 273); --inset: oklch(0.16 0.016 270); --border: oklch(0.34 0.028 272); --border-soft:oklch(0.29 0.023 271); --text-1: oklch(0.97 0.008 285); --text-2: oklch(0.79 0.018 282); --text-3: oklch(0.62 0.022 280); --accent: oklch(0.72 0.155 292); --accent-2: oklch(0.67 0.17 298); --accent-soft: oklch(0.72 0.155 292 / 0.15); --accent-line: oklch(0.72 0.155 292 / 0.34); --accent-ink: oklch(0.99 0.012 290); --glow: 0 0 0 1px oklch(0.72 0.155 292 / 0.4), 0 6px 32px -6px oklch(0.72 0.155 292 / 0.5); /* status */ --hot: oklch(0.72 0.15 35); --warm: var(--accent); --cold: var(--text-3); } /* ---------- Concept B: Slate Pro ---------- */ [data-concept="slate"] { --bg: oklch(0.205 0.012 255); --surface-1: oklch(0.243 0.014 256); --surface-2: oklch(0.285 0.016 257); --surface-3: oklch(0.335 0.018 258); --inset: oklch(0.178 0.011 255); --border: oklch(0.36 0.017 257); --border-soft:oklch(0.31 0.015 256); --text-1: oklch(0.975 0.004 255); --text-2: oklch(0.80 0.012 257); --text-3: oklch(0.63 0.014 258); --accent: oklch(0.70 0.14 252); --accent-2: oklch(0.66 0.15 256); --accent-soft: oklch(0.70 0.14 252 / 0.16); --accent-line: oklch(0.70 0.14 252 / 0.34); --accent-ink: oklch(0.98 0.01 255); --glow: 0 0 0 1px oklch(0.70 0.14 252 / 0.4), 0 6px 30px -6px oklch(0.70 0.14 252 / 0.45); --hot: oklch(0.72 0.15 35); --warm: var(--accent); --cold: var(--text-3); } /* ---------- Concept C: Warm Ink ---------- */ [data-concept="warm"] { --bg: oklch(0.205 0.008 60); --surface-1: oklch(0.242 0.009 58); --surface-2: oklch(0.285 0.011 56); --surface-3: oklch(0.335 0.013 54); --inset: oklch(0.175 0.007 60); --border: oklch(0.36 0.012 56); --border-soft:oklch(0.31 0.01 58); --text-1: oklch(0.975 0.006 70); --text-2: oklch(0.80 0.012 68); --text-3: oklch(0.63 0.014 64); --accent: oklch(0.78 0.13 70); --accent-2: oklch(0.74 0.14 58); --accent-soft: oklch(0.78 0.13 70 / 0.15); --accent-line: oklch(0.78 0.13 70 / 0.34); --accent-ink: oklch(0.22 0.03 60); --glow: 0 0 0 1px oklch(0.78 0.13 70 / 0.4), 0 6px 30px -6px oklch(0.78 0.13 70 / 0.45); --hot: oklch(0.72 0.15 35); --warm: var(--accent); --cold: var(--text-3); } /* ============================================================ Base ============================================================ */ * { box-sizing: border-box; } [x-cloak] { display: none !important; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text-1); font-family: var(--font-text); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--accent-soft); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--border); background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--font-sans); letter-spacing: -0.01em; color: var(--text-1); } h1 { font-size: 1.5rem; font-weight: 680; margin: 0 0 .5rem; } h2 { font-size: 1.15rem; font-weight: 600; margin: 1.2rem 0 .5rem; } p { color: var(--text-2); } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; } input[type=text], input[type=email], input[type=password], input[type=search], textarea, select { width: 100%; background: var(--inset); border: 1px solid var(--border); color: var(--text-1); border-radius: var(--r-sm); padding: .6rem .7rem; font-size: .95rem; outline: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } input::placeholder, textarea::placeholder { color: var(--text-3); } input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .focusable:focus-visible, input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* tables (interim styling for not-yet-rebuilt pages) */ table { border-collapse: collapse; color: var(--text-1); } th, td { border: 1px solid var(--border); padding: .5rem .7rem; text-align: left; } th { background: var(--surface-2); font-weight: 600; } /* helpers */ .mono { font-family: var(--font-mono); } .display { font-family: var(--font-sans); letter-spacing: -0.02em; } .muted, .msg { color: var(--text-3); } .dim { color: var(--text-2); } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px);} to { opacity:1; transform: none; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } } @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} } @keyframes dotbounce { 0%,80%,100%{ transform: translateY(0); opacity:.4;} 40%{ transform: translateY(-4px); opacity:1;} } /* ============================================================ Reusable components (buttons, cards, chips, badges, fields) ============================================================ */ .btn { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-1); border-radius: var(--r-sm); padding: .55rem .85rem; font-size: .9rem; font-weight: 600; transition: all .15s var(--ease); } .btn:hover { background: var(--surface-3); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); } .btn-ghost:hover { background: var(--surface-2); color: var(--text-1); } .btn-primary { background: linear-gradient(160deg, var(--accent), var(--accent-2)); color: var(--accent-ink); border: none; box-shadow: 0 4px 16px -6px var(--accent-line); } .btn-primary:hover { filter: brightness(1.05); box-shadow: var(--glow); } .btn-icon { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: var(--r-sm); } /* Global utilities (previously only defined scoped under .tune, so CRM/vectors/etc. pages rendered full-size buttons and unstyled hints — make them app-wide). */ .btn-sm { padding: .35rem .7rem; font-size: .8rem; } .hint { font-size: .8rem; color: var(--text-3); margin: .35rem 0 0; line-height: 1.45; } .card-h { font-size: .95rem; font-weight: 650; color: var(--text-1); margin: 0 0 .8rem; } .tabs { display: flex; gap: .3rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--border-soft); } .tabs .tab { font-size: .9rem; font-weight: 600; color: var(--text-3); padding: .5rem .9rem; text-decoration: none; border-bottom: 2px solid transparent; } .tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); } .card { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 1.25rem; } .chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; padding: .2rem .55rem; border-radius: 99px; background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border-soft); } .chip-accent { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); } .field { margin-bottom: 1rem; } .field label { display: block; font-size: .85rem; font-weight: 600; color: var(--text-2); margin-bottom: .35rem; } .page { padding: 1.75rem 2rem; max-width: 920px; } .page-head { margin-bottom: 1.5rem; } .page-head h1 { font-size: 1.5rem; margin: 0 0 .25rem; } .page-head .muted { margin: 0; } /* ============================================================ App shell: icon rail + secondary + main + context ============================================================ */ .app { display: flex; height: 100%; overflow: hidden; } .icon-rail { width: 64px; flex: 0 0 64px; border-right: 1px solid var(--border-soft); background: var(--surface-1); display: flex; flex-direction: column; align-items: center; padding: 16px 0 14px; } .rail-logo { margin-bottom: 20px; display: grid; place-items: center; } .rail-logo:hover { text-decoration: none; } .logo-mark { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(150deg, var(--accent) 0%, var(--accent-2) 100%); box-shadow: 0 4px 16px -4px var(--accent-line), inset 0 1px 0 rgba(255,255,255,0.25); color: var(--accent-ink); } .rail-nav { display: flex; flex-direction: column; gap: 6px; } .rail-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 6px; align-items: center; } .rail-btn { width: 44px; height: 44px; border-radius: 12px; border: none; position: relative; background: transparent; color: var(--text-3); display: grid; place-items: center; transition: all .15s var(--ease); } .rail-btn:hover { background: var(--surface-2); color: var(--text-1); text-decoration: none; } .rail-btn.active { background: var(--surface-3); color: var(--accent); } .rail-btn.active::before { content: ""; position: absolute; left: -8px; top: 11px; bottom: 11px; width: 3px; border-radius: 99px; background: var(--accent); } .rail-avatar { width: 30px; height: 30px; border-radius: 9px; border: none; background: linear-gradient(150deg, var(--accent), var(--accent-2)); color: var(--accent-ink); font-size: 13px; font-weight: 700; display: grid; place-items: center; } .secondary { width: var(--rail-w); flex: 0 0 var(--rail-w); border-right: 1px solid var(--border-soft); background: var(--surface-1); overflow: hidden; display: flex; flex-direction: column; } .secondary-collapsed { width: 44px; flex: 0 0 44px; border: none; border-right: 1px solid var(--border-soft); background: var(--surface-1); color: var(--text-3); display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 18px; cursor: pointer; } .secondary-collapsed:hover { color: var(--text-1); } .sec-vlabel { writing-mode: vertical-rl; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; } .main-wrap { flex: 1; min-width: 0; background: var(--bg); display: flex; } .main { flex: 1; min-width: 0; overflow: auto; display: flex; flex-direction: column; } .context { width: var(--ctx-w); flex: 0 0 var(--ctx-w); border-left: 1px solid var(--border-soft); background: var(--surface-1); overflow: auto; animation: fadeIn .2s; } /* secondary panel internal header pattern (used by chat/kb) */ .sec-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px; } .sec-title { font-family: var(--font-sans); font-weight: 650; font-size: .95rem; } .sec-body { flex: 1; overflow: auto; padding: 4px 8px 12px; } /* ============================================================ Auth screens: login + password reset (split layout) ============================================================ */ .auth-split { height: 100%; display: flex; overflow: hidden; position: relative; } .auth-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 500px at 18% 30%, var(--accent-soft), transparent 60%), radial-gradient(600px 600px at 88% 90%, var(--accent-soft), transparent 55%); } .auth-brand { flex: 1 1 0; min-width: 0; padding: 60px 64px; display: flex; flex-direction: column; justify-content: space-between; position: relative; border-right: 1px solid var(--border-soft); } .auth-eyebrow { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 20px; } .auth-headline { font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; margin: 0; } .auth-sub { color: var(--text-2); font-size: 15.5px; margin-top: 20px; line-height: 1.6; } .auth-foot { font-size: 12.5px; color: var(--text-3); } .auth-form-col { flex: 0 0 480px; max-width: 100%; display: grid; place-items: center; padding: 32px; position: relative; z-index: 1; } .auth-card { width: 100%; max-width: 372px; animation: fadeUp .4s var(--ease) both; } .auth-title { font-size: 26px; font-weight: 600; margin: 0 0 6px; } .auth-lede { color: var(--text-3); margin: 0 0 28px; font-size: 14px; } .auth-field { display: block; margin-bottom: 16px; } .auth-field > .lbl { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; display: flex; justify-content: space-between; align-items: baseline; } .auth-input-wrap { position: relative; display: flex; align-items: center; } .auth-input-wrap > .ic { position: absolute; left: 13px; color: var(--text-3); display: flex; pointer-events: none; } .auth-input-wrap input { height: 46px; border-radius: var(--r-md); font-size: 14.5px; padding: 0 46px 0 40px; } .auth-input-wrap .toggle { position: absolute; right: 8px; background: none; border: none; color: var(--text-3); padding: 8px; display: flex; border-radius: 8px; } .auth-input-wrap .toggle:hover { color: var(--text-1); } .auth-link { background: none; border: none; color: var(--accent); font-size: 12.5px; font-weight: 600; padding: 0; cursor: pointer; } .auth-link:hover { text-decoration: underline; } .auth-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-2); cursor: pointer; user-select: none; margin-bottom: 16px; } .auth-check input { width: auto; } .auth-btn { height: 46px; width: 100%; border-radius: var(--r-md); font-weight: 600; font-size: 14.5px; border: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(160deg, var(--accent), var(--accent-2)); color: var(--accent-ink); box-shadow: 0 6px 22px -8px var(--accent-line); transition: filter .15s var(--ease), transform .12s var(--ease); } .auth-btn:hover { filter: brightness(1.05); } .auth-btn:active { transform: scale(.98); } .auth-btn.ghost { background: var(--surface-2); color: var(--text-1); border: 1px solid var(--border); box-shadow: none; } .auth-note { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border-soft); font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 8px; } .auth-error { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text-1); border-radius: var(--r-sm); padding: .6rem .75rem; margin-bottom: 18px; font-size: 13.5px; } .auth-icon-badge { width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); display: grid; place-items: center; color: var(--accent); margin-bottom: 20px; } .auth-devlink { word-break: break-all; font-family: var(--font-mono); font-size: 12px; background: var(--inset); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .55rem .65rem; color: var(--accent); display: block; margin-top: 10px; } @media (max-width: 880px) { .auth-brand { display: none; } .auth-form-col { flex: 1 1 100%; } } /* ============================================================ Test chat surface ============================================================ */ .tone-dot { width: 8px; height: 8px; border-radius: 99px; flex: 0 0 auto; display: inline-block; } .tone-dot.glow { box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 22%, transparent); } .st-hot { color: var(--hot); background: var(--hot); } .st-warm { color: var(--accent); background: var(--accent); } .st-cold { color: var(--text-3); background: var(--text-3); } /* thread list (secondary) */ .thl-head { padding: 18px 16px 12px; } .thl-titlebar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .thl-icon-btn { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-1); display: grid; place-items: center; } .thl-icon-btn:hover { background: var(--surface-3); } .thl-search { position: relative; display: flex; align-items: center; } .thl-search .ic { position: absolute; left: 11px; color: var(--text-3); display: flex; } .thl-search input { height: 36px; border-radius: 9px; background: var(--inset); border: 1px solid var(--border-soft); font-size: 13px; padding: 0 12px 0 32px; } .thl-list { flex: 1; overflow-y: auto; padding: 0 10px 12px; } .thl-item { width: 100%; text-align: left; border: none; margin-bottom: 3px; cursor: pointer; background: transparent; border-radius: var(--r-md); padding: 11px 12px; display: block; position: relative; transition: background .12s var(--ease); color: inherit; } .thl-item:hover { background: var(--surface-1); text-decoration: none; } .thl-item.active { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); } .thl-item.active::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 99px; background: var(--accent); } .thl-row1 { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; } .thl-name { font-size: 13.5px; font-weight: 600; color: var(--text-1); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thl-time { font-size: 11px; color: var(--text-3); } .thl-sub { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 7px; } .thl-tags { display: flex; align-items: center; gap: 6px; } .thl-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--text-3); background: var(--inset); border: 1px solid var(--border-soft); border-radius: 6px; padding: 2px 6px; } .thl-tag.hostile { color: var(--hot); background: color-mix(in oklch, var(--hot) 14%, transparent); border-color: transparent; } /* chat main */ .chat-main { display: flex; flex-direction: column; height: 100%; min-width: 0; } .chat-header { height: 60px; flex: 0 0 60px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; padding: 0 20px; gap: 12px; } .chat-hd-name { font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-hd-sub { font-size: 12px; color: var(--text-3); } .chat-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; } .chat-scroll { flex: 1; overflow-y: auto; padding: 24px 28px; } .chat-inner { max-width: 720px; margin: 0 auto; } .chat-banner { text-align: center; margin-bottom: 24px; } .chat-banner span { font-size: 11.5px; color: var(--text-3); background: var(--inset); border: 1px solid var(--border-soft); border-radius: 99px; padding: 5px 12px; } .msg-row { display: flex; flex-direction: column; animation: fadeUp .3s var(--ease) both; margin-bottom: 18px; } .msg-row.is-lead { align-items: flex-end; } .msg-row.is-agent { align-items: flex-start; } .msg-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; } .msg-row.is-lead .msg-meta { flex-direction: row-reverse; } .msg-avatar { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: 0 0 auto; } .msg-avatar.agent { background: linear-gradient(150deg, var(--accent), var(--accent-2)); color: var(--accent-ink); } .msg-avatar.lead { background: var(--surface-3); color: var(--text-2); } .msg-who { font-size: 12px; font-weight: 600; color: var(--text-2); } .msg-time { font-size: 11px; color: var(--text-3); } .msg-bubble { max-width: 76%; padding: 11px 15px; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; } .msg-bubble.agent { border-radius: 4px 16px 16px 16px; background: var(--surface-2); color: var(--text-1); border: 1px solid var(--border); } .msg-bubble.lead { border-radius: 16px 4px 16px 16px; background: linear-gradient(160deg, var(--accent), var(--accent-2)); color: var(--accent-ink); box-shadow: 0 6px 22px -10px var(--accent-line); } .msg-cites { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; max-width: 76%; } .msg-cite { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--text-2); background: var(--inset); border: 1px solid var(--border-soft); border-radius: 7px; padding: 3px 8px; } .msg-cite svg { color: var(--accent); } .msg-why { max-width: 76%; margin-top: 8px; color: var(--text-2); } .msg-why summary { width: fit-content; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; list-style: none; font-size: 11.5px; font-weight: 650; background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: 7px; padding: 4px 8px; } .msg-why summary::-webkit-details-marker { display: none; } .msg-why[open] summary svg { transform: rotate(90deg); } .msg-why-grid { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 6px 10px; margin-top: 7px; padding: 9px 10px; background: var(--inset); border: 1px solid var(--border-soft); border-radius: 7px; font-size: 11.5px; } .msg-why-grid span { color: var(--text-3); } .msg-why-grid b { min-width: 0; color: var(--text-1); font-weight: 600; overflow-wrap: anywhere; } .msg-why-grid b.why-revised { color: var(--danger, #c0392b); } .typing-row { display: flex; align-items: center; gap: 7px; margin-bottom: 18px; } .typing-bubble { display: flex; gap: 4px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px 16px 16px 16px; } .typing-bubble span { width: 6px; height: 6px; border-radius: 99px; background: var(--text-3); animation: dotbounce 1.2s infinite ease-in-out; } .typing-bubble span:nth-child(2) { animation-delay: .15s; } .typing-bubble span:nth-child(3) { animation-delay: .3s; } /* htmx request indicator */ .htmx-indicator { display: none; } .htmx-request .htmx-indicator { display: flex; } .chat-composer { flex: 0 0 auto; padding: 14px 28px 20px; border-top: 1px solid var(--border-soft); } .composer-box { display: flex; align-items: flex-end; gap: 10px; background: var(--inset); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 8px 8px 8px 16px; max-width: 720px; margin: 0 auto; transition: border-color .15s var(--ease); } .composer-box:focus-within { border-color: var(--accent); } .composer-tag { color: var(--text-3); font-size: 11.5px; font-weight: 600; padding-bottom: 9px; white-space: nowrap; } .composer-box textarea { flex: 1; resize: none; border: none; background: transparent; color: var(--text-1); font-size: 14.5px; line-height: 1.5; padding: 8px 0; outline: none; max-height: 140px; box-shadow: none; } .composer-box textarea:focus { box-shadow: none; border: none; } .composer-send { width: 40px; height: 40px; border-radius: 11px; border: none; flex: 0 0 auto; background: linear-gradient(160deg, var(--accent), var(--accent-2)); color: var(--accent-ink); display: grid; place-items: center; transition: all .15s var(--ease); } .composer-send:disabled { background: var(--surface-3); color: var(--text-3); } .composer-hint { font-size: 11px; color: var(--text-3); margin-top: 9px; text-align: center; } .composer-hint kbd { font-family: var(--font-mono); font-size: 10.5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; } /* conversation context panel */ .ctx-wrap { height: 100%; overflow-y: auto; padding: 20px 18px; } .ctx-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .ctx-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .ctx-card { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: var(--r-md); margin-bottom: 18px; } .ctx-avatar { width: 42px; height: 42px; border-radius: 12px; background: var(--surface-3); display: grid; place-items: center; color: var(--text-2); flex: 0 0 auto; } .ctx-lead-form { display: grid; gap: 10px; margin-bottom: 18px; padding: 12px; background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: var(--r-md); } .ctx-lead-form label { display: grid; gap: 5px; margin: 0; } .ctx-lead-form label span { font-size: 11.5px; font-weight: 650; color: var(--text-3); } .ctx-lead-form input, .ctx-lead-form select { width: 100%; min-width: 0; height: 34px; border: 1px solid var(--border); border-radius: 7px; background: var(--inset); color: var(--text-1); padding: 0 9px; font-size: 12.5px; } .ctx-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ctx-save-btn { height: 34px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text-1); font-size: 12px; font-weight: 650; cursor: pointer; } .ctx-save-btn:hover { border-color: var(--accent); color: var(--accent); } .ctx-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; } .ctx-row .k { color: var(--text-3); } .ctx-row .v { color: var(--text-1); font-weight: 500; display: flex; align-items: center; gap: 6px; } .ctx-channel-sel { font-size: 12px; font-weight: 600; color: var(--text-1); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 7px; padding: 3px 8px; cursor: pointer; } .ctx-source { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: var(--r-md); cursor: pointer; } .ctx-source:hover { border-color: var(--accent-line); text-decoration: none; } .ctx-note { margin-top: 20px; padding: 12px 14px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-md); font-size: 12.5px; color: var(--text-2); line-height: 1.5; display: flex; gap: 10px; } .chat-empty { display: grid; place-items: center; height: 100%; text-align: center; color: var(--text-3); padding: 40px; } /* =========================== Knowledge surface =========================== */ /* ---- secondary: page tree ---- */ .kbtree { display: flex; flex-direction: column; height: 100%; } .kbtree-head { padding: 18px 16px 12px; } .kbtree-titlebar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .kbtree-list { flex: 1; overflow-y: auto; padding: 0 10px 12px; } .kbtree-folder { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 8px; cursor: pointer; color: var(--text-2); user-select: none; } .kbtree-folder:hover { background: var(--surface-1); } .kbtree-chev { color: var(--text-3); flex: 0 0 auto; transition: transform .15s; } .kbtree-folder-name { font-size: 13.5px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kbtree-count { font-size: 11px; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 99px; padding: 1px 8px; flex: 0 0 auto; } .kbtree-page { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 30px; border-radius: 8px; position: relative; color: var(--text-2); margin-bottom: 1px; } .kbtree-page:hover { background: var(--surface-1); text-decoration: none; } .kbtree-page.active { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); color: var(--text-1); } .kbtree-page.active svg { color: var(--accent); } .kbtree-page svg { color: var(--text-3); flex: 0 0 auto; } .kbtree-bar { position: absolute; left: 8px; top: 6px; bottom: 6px; width: 3px; border-radius: 99px; background: var(--accent); } .kbtree-page-name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kbtree-foot { padding: 12px 16px; border-top: 1px solid var(--border-soft); font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; gap: 7px; } /* ---- main: Loop-style doc ---- */ .kbdoc { height: 100%; display: flex; flex-direction: column; position: relative; } .kbdoc form { margin: 0; display: flex; flex-direction: column; min-height: 0; flex: 1; } .kbdoc-toolbar { position: sticky; top: 0; z-index: 5; height: 60px; display: flex; align-items: center; padding: 0 28px; flex: 0 0 60px; border-bottom: 1px solid var(--border-soft); background: color-mix(in oklch, var(--bg) 86%, transparent); backdrop-filter: blur(10px); } .kbdoc-crumb { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-3); min-width: 0; } .kbdoc-crumb span.last { color: var(--text-1); font-weight: 600; } .kbdoc-crumb span { white-space: nowrap; } .kbdoc-btn { height: 34px; padding: 0 14px; border-radius: 9px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-1); cursor: pointer; } .kbdoc-btn:hover { background: var(--surface-3); } .kbdoc-btn.primary { border: none; background: linear-gradient(160deg, var(--accent), var(--accent-2)); color: var(--accent-ink); box-shadow: 0 4px 16px -6px var(--accent-line); } .kbdoc-scroll { flex: 1; overflow-y: auto; } .kbdoc-inner { max-width: 720px; margin: 0 auto; padding: 36px 28px 80px; } .kbdoc-tagrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .kbdoc-tag-icon { width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); display: grid; place-items: center; color: var(--accent); flex: 0 0 auto; } .kbdoc-editing-chip { font-size: 11.5px; color: var(--accent); border: 1px solid var(--accent-line); border-radius: 99px; padding: 3px 10px; font-weight: 600; } .kbdoc-title { font-size: 34px; font-weight: 680; letter-spacing: -0.025em; margin: 6px 0; } .kbdoc-title-input { font-size: 34px; font-weight: 680; letter-spacing: -0.025em; margin: 6px 0; height: auto; width: 100%; padding: 4px 6px; background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: var(--r-sm); color: var(--text-1); } .kbdoc-histwrap { position: relative; display: inline-flex; margin-bottom: 28px; } .kbdoc-histbtn { font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 7px; background: none; border: none; padding: 4px 0; cursor: pointer; } .kbdoc-histbtn:hover { color: var(--text-1); } .kbdoc-histmenu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 12; width: 320px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 20px 50px -14px rgba(0,0,0,.7); padding: 8px; animation: fadeUp .15s var(--ease) both; } .kbdoc-histmenu-h { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); padding: 8px 10px 10px; } .kbdoc-histrow { display: flex; gap: 11px; padding: 9px 10px; border-radius: 9px; align-items: center; } .kbdoc-histrow:hover { background: var(--surface-3); } .kbdoc-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; margin: 0 0 16px; background: #fef3c7; border: 1px solid #f59e0b; border-radius: var(--r-lg); font-size: 13px; color: #92400e; line-height: 1.5; } .kbdoc-restore-btn { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-3); background: transparent; border: 1px solid var(--border-soft); border-radius: 7px; padding: 4px 9px; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; white-space: nowrap; } .kbdoc-restore-btn:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } .kbdoc-histavatar { width: 26px; height: 26px; border-radius: 8px; background: var(--surface-3); display: grid; place-items: center; color: var(--text-2); font-size: 11px; font-weight: 700; flex: 0 0 auto; } .kbdoc-histavatar.you { background: linear-gradient(150deg, var(--accent), var(--accent-2)); color: var(--accent-ink); } .kbdoc-histwhat { font-size: 13px; color: var(--text-1); line-height: 1.4; } .kbdoc-histwhen { font-size: 11.5px; color: var(--text-3); margin-top: 2px; } .kbdoc-histfoot { padding: 10px; border-top: 1px solid var(--border-soft); margin-top: 4px; font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; gap: 6px; } /* rendered markdown */ .kbdoc-body { font-size: 15px; line-height: 1.7; color: var(--text-2); } .kbdoc-body h1 { font-size: 28px; font-weight: 680; letter-spacing: -0.02em; color: var(--text-1); margin: 28px 0 12px; } .kbdoc-body h2 { font-size: 21px; font-weight: 650; letter-spacing: -0.015em; color: var(--text-1); margin: 26px 0 10px; } .kbdoc-body h3 { font-size: 17px; font-weight: 640; color: var(--text-1); margin: 22px 0 8px; } .kbdoc-body p { margin: 0 0 12px; } .kbdoc-body ul, .kbdoc-body ol { margin: 0 0 14px; padding-left: 4px; list-style: none; } .kbdoc-body li { position: relative; padding-left: 20px; margin-bottom: 8px; line-height: 1.65; } .kbdoc-body ul li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 99px; background: var(--accent); } .kbdoc-body ol { counter-reset: ol; } .kbdoc-body ol li { counter-increment: ol; } .kbdoc-body ol li::before { content: counter(ol) "."; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 600; } .kbdoc-body blockquote { border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; margin: 16px 0; color: var(--text-1); font-style: italic; } .kbdoc-body blockquote p { margin: 0; } .kbdoc-body code { font-family: var(--font-mono); font-size: 13px; background: var(--inset); border: 1px solid var(--border-soft); border-radius: 6px; padding: 1px 6px; color: var(--text-1); } .kbdoc-body pre { background: var(--inset); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 14px 16px; overflow-x: auto; margin: 0 0 16px; } .kbdoc-body pre code { background: none; border: none; padding: 0; } .kbdoc-body a { color: var(--accent); } .kbdoc-body strong { color: var(--text-1); font-weight: 650; } .kbdoc-body hr { border: none; border-top: 1px solid var(--border-soft); margin: 24px 0; } /* markdown editor */ .kbdoc-editor { margin-top: 8px; } .kbdoc-textarea { width: 100%; min-height: 420px; resize: vertical; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; padding: 16px 18px; border-radius: var(--r-md); background: var(--inset); border: 1px solid var(--border-soft); color: var(--text-1); } .kbdoc-editor-hint { margin-top: 8px; font-size: 12px; color: var(--text-3); } .kbdoc-editor-hint code { font-family: var(--font-mono); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 5px; padding: 1px 5px; } .kbdoc-danger { padding: 0 28px 28px; max-width: 720px; margin: 0 auto; width: 100%; } .kbdoc-danger form { margin: 0; } .kbdoc-delete { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--hot); background: none; border: 1px solid var(--border-soft); border-radius: 9px; padding: 8px 14px; cursor: pointer; } .kbdoc-delete:hover { border-color: var(--hot); background: color-mix(in oklch, var(--hot) 12%, transparent); } /* =========================== Operations surface =========================== */ .ops-scroll { height: 100%; overflow-y: auto; } .ops-inner { max-width: 840px; margin: 0 auto; padding: 40px 32px 80px; } .ops-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 30px; gap: 16px; flex-wrap: wrap; } .ops-title { font-size: 28px; font-weight: 680; letter-spacing: -0.02em; margin: 0 0 4px; } .ops-lede { color: var(--text-3); margin: 0; font-size: 14px; } .ops-status { display: flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 99px; background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 13px; font-weight: 600; color: var(--text-1); } .ops-status-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: pulse 2s infinite; } .ops-status.down { background: color-mix(in oklch, var(--hot) 14%, transparent); border-color: var(--hot); } .ops-status.down .ops-status-dot { background: var(--hot); box-shadow: 0 0 8px var(--hot); } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } } .ops-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 28px; } .ops-metric { background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 18px 20px; } .ops-metric-label { font-size: 12.5px; color: var(--text-3); margin-bottom: 10px; } .ops-metric-value { font-size: 30px; font-weight: 680; letter-spacing: -0.02em; line-height: 1; } .ops-metric-delta { font-size: 12px; color: var(--text-3); margin-top: 8px; font-weight: 500; } .ops-metric-delta.up { color: var(--accent); } .ops-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; } .ops-health { background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 28px; } .ops-health-row { display: flex; align-items: center; gap: 14px; padding: 16px 20px; } .ops-health-row + .ops-health-row { border-top: 1px solid var(--border-soft); } .ops-health-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; background: var(--accent-soft); color: var(--accent); } .ops-health-icon.down { background: color-mix(in oklch, var(--hot) 16%, transparent); color: var(--hot); } .ops-health-label { font-size: 14px; font-weight: 600; } .ops-health-note { font-size: 12.5px; color: var(--text-3); } .ops-health-key { font-size: 11.5px; color: var(--text-3); } .ops-health-badge { font-size: 11.5px; font-weight: 700; border-radius: 6px; padding: 3px 8px; color: var(--accent); background: var(--accent-soft); } .ops-health-badge.down { color: var(--hot); background: color-mix(in oklch, var(--hot) 16%, transparent); } .ops-alerts { margin-bottom: 28px; } .ops-alert { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: var(--r-lg); } .ops-alert + .ops-alert { margin-top: 8px; } .ops-alert.crit { border-color: color-mix(in oklch, var(--hot) 45%, var(--border-soft)); background: color-mix(in oklch, var(--hot) 7%, var(--surface-1)); } .ops-alert-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--accent); } .ops-alert.crit .ops-alert-dot { background: var(--hot); } .ops-alert-title { font-size: 14px; font-weight: 650; } .ops-alert-detail { font-size: 12.5px; color: var(--text-3); } .ops-alert-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; border-radius: 6px; padding: 3px 8px; color: var(--accent); background: var(--accent-soft); } .ops-alert-badge.crit { color: var(--hot); background: color-mix(in oklch, var(--hot) 16%, transparent); } .ops-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ops-card { background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 20px 22px; } .ops-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font-weight: 650; font-size: 14px; } .ops-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); } .ops-kv.last { border-bottom: none; } .ops-kv .k { color: var(--text-3); } .ops-kv .v { color: var(--text-1); } .ops-kv .v.mono { font-size: 12px; } @media (max-width: 720px) { .ops-cards { grid-template-columns: 1fr; } } .ops-drafts { display: grid; gap: 12px; margin-bottom: 28px; } .ops-draft { background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 16px; } .ops-draft-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-3); font-size: 12px; margin-bottom: 10px; } .ops-draft-body { white-space: pre-wrap; color: var(--text-1); font-size: 13.5px; line-height: 1.55; margin-bottom: 8px; } .ops-draft-reason { color: var(--text-3); font-size: 12.5px; margin-bottom: 12px; } .ops-draft-actions { display: flex; flex-wrap: wrap; gap: 8px; } .ops-draft-actions form, .ops-draft form { margin: 0; } .ops-draft-edit { display: grid; gap: 8px; margin-bottom: 10px; } .ops-draft-edit textarea { width: 100%; min-height: 118px; resize: vertical; border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--inset); color: var(--text-1); padding: 11px 12px; font-size: 13.5px; line-height: 1.55; } .ops-draft-original { color: var(--text-3); font-size: 12.5px; margin-bottom: 10px; } .ops-draft-original summary { cursor: pointer; color: var(--text-2); font-weight: 650; margin-bottom: 6px; } /* Engagement table */ .ops-engagement { margin-bottom: 28px; } .ops-tabs { display: flex; gap: 4px; margin-bottom: 12px; } .ops-tab { font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: var(--r-md); background: transparent; border: 1px solid var(--border-soft); color: var(--text-3); cursor: pointer; transition: background 0.15s, color 0.15s; } .ops-tab:hover { background: var(--surface-1); color: var(--text-1); } .ops-tab.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } .ops-eng-table { width: 100%; border-collapse: collapse; background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: var(--r-lg); overflow: hidden; font-size: 13.5px; } .ops-eng-table th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); padding: 11px 16px; border-bottom: 1px solid var(--border-soft); background: var(--surface-2); } .ops-eng-table th.num, .ops-eng-table td.num { text-align: right; } .ops-eng-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .ops-eng-table tbody tr:last-child td { border-bottom: none; } .ops-eng-table tfoot td { padding: 11px 16px; border-top: 1px solid var(--border-soft); background: var(--surface-2); } .eng-name { font-weight: 600; } .eng-email { font-size: 12px; color: var(--text-3); } .eng-role { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--border-soft); color: var(--text-2); background: var(--surface-2); } .eng-role.admin { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); } .eng-role.editor { color: oklch(0.72 0.14 200); background: oklch(0.72 0.14 200 / 12%); border-color: oklch(0.72 0.14 200 / 30%); } .eng-last { font-size: 12.5px; color: var(--text-3); white-space: nowrap; } .ops-empty { font-size: 13.5px; color: var(--text-3); padding: 24px 0; } .ops-section-head { display: flex; align-items: baseline; gap: 12px; margin: 32px 0 14px; } .ops-section-title { font-size: 16px; font-weight: 700; color: var(--text-1); margin: 0; } .ops-section-note { font-size: 12px; color: var(--text-3); } .ops-feedback { margin-bottom: 24px; } .ops-fb-table .fb-who { font-weight: 600; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; } .ops-fb-table .fb-page { font-size: 12px; color: var(--text-3); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ops-fb-table .fb-msg { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); } .ops-fb-table .fb-when { white-space: nowrap; color: var(--text-3); font-size: 12px; } .fb-kind-pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .fb-kind-love { background: #fce7f3; color: #be185d; } .fb-kind-idea { background: #e0f2fe; color: #0369a1; } .fb-kind-issue { background: #fef3c7; color: #b45309; } /* BD-22: HTMX error toast */ .htmx-toast { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: var(--r-lg); font-size: 13.5px; font-weight: 500; background: var(--surface-1); border: 1px solid var(--border-soft); box-shadow: 0 4px 24px rgba(0,0,0,.18); cursor: pointer; max-width: 380px; } .htmx-toast.error { background: #fef2f2; border-color: #fca5a5; color: #991b1b; } .toast-enter { animation: toast-in .2s ease; } .toast-leave { animation: toast-out .2s ease forwards; } @keyframes toast-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } @keyframes toast-out { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(12px); } } /* =========================== Account surface =========================== */ .acct-scroll { height: 100%; overflow-y: auto; } .acct-inner { max-width: 680px; margin: 0 auto; padding: 40px 32px 80px; } .acct-title { font-size: 28px; font-weight: 680; letter-spacing: -0.02em; margin: 0 0 4px; } .acct-lede { color: var(--text-3); margin: 0 0 26px; font-size: 14px; } .acct-flash { border-radius: var(--r-md); padding: 12px 16px; font-size: 13.5px; font-weight: 500; margin-bottom: 18px; } .acct-flash.ok { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text-1); } .acct-flash.err { background: color-mix(in oklch, var(--hot) 14%, transparent); border: 1px solid var(--hot); color: var(--text-1); } .acct-id { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; padding: 20px 22px; background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: var(--r-lg); } .acct-avatar { width: 60px; height: 60px; border-radius: 18px; background: linear-gradient(150deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: var(--accent-ink); font-size: 24px; font-weight: 700; flex: 0 0 auto; } .acct-id-name { font-size: 17px; font-weight: 650; } .acct-id-email { font-size: 13px; color: var(--text-3); } .acct-rolepill { font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; padding: 5px 11px; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .acct-rolepill.admin { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); } .acct-card { background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 22px 24px; margin-bottom: 18px; } .acct-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .acct-card-title { font-size: 15px; font-weight: 650; } .acct-adminchip { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 99px; padding: 2px 9px; } .acct-card-desc { font-size: 13px; color: var(--text-3); margin-bottom: 18px; } .acct-field-row { display: flex; gap: 14px; flex-wrap: wrap; } .acct-field { display: block; flex: 1; min-width: 0; } .acct-field-label { font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 6px; } .acct-input-wrap { position: relative; display: flex; align-items: center; } .acct-input-wrap .ic { position: absolute; left: 12px; color: var(--text-3); display: flex; } .acct-input-wrap input { width: 100%; height: 42px; border-radius: var(--r-md); background: var(--inset); border: 1px solid var(--border); color: var(--text-1); font-size: 14px; padding: 0 14px 0 38px; } .acct-input-wrap input:disabled { color: var(--text-3); } .acct-eye { position: absolute; right: 6px; background: none; border: none; color: var(--text-3); padding: 8px; display: flex; cursor: pointer; } .acct-eye:hover { color: var(--text-1); } .acct-mismatch { font-size: 12.5px; color: var(--hot); } .acct-select, .acct-role-select { height: 42px; border-radius: var(--r-md); background: var(--inset); border: 1px solid var(--border); color: var(--text-1); font-size: 13.5px; padding: 0 12px; } .acct-role-select { height: 32px; border-radius: 8px; font-size: 12.5px; padding: 0 8px; } .acct-role-select:disabled { color: var(--text-3); } .acct-role-form { margin: 0; flex: 0 0 auto; } .acct-btn { height: 40px; padding: 0 18px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-1); font-weight: 600; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .acct-btn:hover { background: var(--surface-3); } .acct-btn.primary { border: none; background: linear-gradient(160deg, var(--accent), var(--accent-2)); color: var(--accent-ink); box-shadow: 0 4px 16px -6px var(--accent-line); } .acct-btn.danger { color: var(--hot); border-color: color-mix(in oklch, var(--hot) 40%, var(--border)); background: transparent; } .acct-btn.danger:hover { background: color-mix(in oklch, var(--hot) 12%, transparent); } .acct-invite { display: flex; gap: 9px; margin-bottom: 18px; flex-wrap: wrap; margin-top: 0; } .acct-invite .acct-btn { height: 42px; } .acct-userlist { border: 1px solid var(--border-soft); border-radius: var(--r-md); overflow: hidden; } .acct-user-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; } .acct-user-row + .acct-user-row { border-top: 1px solid var(--border-soft); } .acct-user-avatar { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-3); display: grid; place-items: center; color: var(--text-2); font-size: 13px; font-weight: 700; flex: 0 0 auto; } .acct-user-avatar.you { background: linear-gradient(150deg, var(--accent), var(--accent-2)); color: var(--accent-ink); } .acct-user-name { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; } .acct-user-you { font-size: 10.5px; color: var(--text-3); font-weight: 500; } .acct-user-pending { font-size: 10.5px; font-weight: 600; color: oklch(0.8 0.13 70); background: color-mix(in oklch, oklch(0.8 0.13 70) 14%, transparent); border-radius: 5px; padding: 1px 6px; } .acct-user-email { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* =========================== Feedback widget =========================== */ .fb-launch { position: fixed; right: 24px; bottom: 24px; z-index: 90; height: 46px; padding: 0 18px 0 16px; border-radius: 99px; border: 1px solid var(--accent-line); display: flex; align-items: center; gap: 9px; background: var(--surface-2); color: var(--text-1); font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); transition: transform .15s var(--ease); } .fb-launch:hover { transform: translateY(-2px); } .fb-launch-icon { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(150deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: var(--accent-ink); } .fb-pop { position: fixed; right: 24px; bottom: 24px; z-index: 90; width: 340px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 24px 60px -16px rgba(0,0,0,.7); animation: fadeUp .2s var(--ease) both; overflow: hidden; } .fb-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); } .fb-head-icon { width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(150deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: var(--accent-ink); flex: 0 0 auto; } .fb-head-title { font-size: 14px; font-weight: 650; } .fb-head-sub { font-size: 11.5px; color: var(--text-3); } .fb-min { width: 28px; height: 28px; border-radius: 8px; border: none; background: var(--surface-3); color: var(--text-3); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; } .fb-min:hover { color: var(--text-1); } .fb-form { padding: 16px; } .fb-context { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); background: var(--inset); border: 1px solid var(--border-soft); border-radius: 9px; padding: 8px 11px; margin-bottom: 14px; } .fb-context span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fb-context strong { color: var(--text-1); } .fb-kinds { display: flex; gap: 7px; margin-bottom: 12px; } .fb-kind { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; border-radius: 10px; border: 1px solid var(--border); background: var(--inset); color: var(--text-2); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all .12s var(--ease); } .fb-kind.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .fb-textarea { width: 100%; resize: none; border-radius: 10px; background: var(--inset); border: 1px solid var(--border); color: var(--text-1); font-size: 13.5px; line-height: 1.5; padding: 10px 12px; margin-bottom: 12px; } .fb-send { width: 100%; height: 42px; border-radius: 10px; border: none; background: linear-gradient(160deg, var(--accent), var(--accent-2)); color: var(--accent-ink); font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; } .fb-send:disabled { background: var(--surface-3); color: var(--text-3); cursor: default; } .fb-foot { font-size: 11px; color: var(--text-3); margin-top: 9px; text-align: center; } .fb-thanks { padding: 34px 20px; text-align: center; } .fb-thanks-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); display: grid; place-items: center; color: var(--accent); margin: 0 auto 14px; } .fb-thanks-title { font-size: 14.5px; font-weight: 600; } .fb-thanks-sub { font-size: 12.5px; color: var(--text-3); margin-top: 4px; } .fb-thanks-sub strong { color: var(--text-2); }