:root { --bg:#0b0e14; --panel:#121722; --panel-raised:#171e2b; --border:#293244; --text:#eef2fa; --muted:#94a0b5; --accent:#7c9cff; --accent-dark:#24365f; --good:#5ed6a0; --bad:#ff717b; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; background:radial-gradient(circle at top,#151d31 0,var(--bg) 38rem); color:var(--text); }
.app-header { max-width:980px; margin:0 auto; min-height:128px; padding:28px 24px 22px; display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--border); }
.eyebrow { margin:0 0 7px; color:#7f9ee9; font-weight:700; font-size:10px; letter-spacing:.11em; }
h1 { margin:0; font-size:24px; letter-spacing:-.03em; } .subtitle { margin:7px 0 0; color:var(--muted); font-size:14px; }
.header-actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:12px; }.header-link { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; text-decoration:none; }.header-link:hover { color:var(--text); }.header-link svg { width:16px; height:16px; }
main { max-width:760px; margin:0 auto; padding:28px 18px 48px; }
#chat { display:flex; flex-direction:column; gap:14px; min-height:360px; }
.msg { align-self:flex-start; max-width:min(92%,650px); padding:13px 15px; border:1px solid var(--border); border-radius:12px 12px 12px 3px; background:var(--panel); box-shadow:0 10px 22px #00000018; font-size:14px; line-height:1.55; }
.msg.user { align-self:flex-end; color:#f3f6ff; background:var(--accent-dark); border-color:#3a5491; border-radius:12px 12px 3px 12px; } .message-body { white-space:pre-wrap; }
.msg.pending { color:var(--muted); font-size:13px; border-style:dashed; }.msg.pending .message-body::before { content:""; display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--accent); animation:pulse 1s ease-in-out infinite; }
.badge { margin-bottom:6px; color:#8da5d8; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.message-actions { margin-top:10px; }.trace-btn,.icon-btn { color:#b9caff; border:0; background:transparent; cursor:pointer; font:inherit; }.trace-btn { padding:0; font-size:12px; text-decoration:underline; text-underline-offset:3px; }.msg.blocked { border-color:#943d48; color:#ffd1d5; }
#ticket-panel,#human-panel { margin-top:16px; padding:16px; border:1px solid #496cb7; border-radius:12px; background:#111b31; }.hidden { display:none; }.panel-title { color:var(--muted); font-size:13px; margin-bottom:8px; } #ticket-body { white-space:pre-wrap; font-size:14px; margin-bottom:12px; }.panel-actions { display:flex; gap:8px; }
#composer { display:flex; gap:8px; margin-top:20px; } #composer-input,#human-input { flex:1; min-width:0; padding:12px 13px; border:1px solid var(--border); border-radius:9px; outline:none; background:var(--panel); color:var(--text); font:inherit; } #composer-input:focus,#human-input:focus { border-color:#7798ee; box-shadow:0 0 0 3px #5879c52b; }
.btn { padding:10px 15px; border:1px solid var(--border); border-radius:9px; background:var(--panel-raised); color:var(--text); font:inherit; cursor:pointer; }.btn.primary { border-color:var(--accent); background:var(--accent); color:#0b1020; font-weight:700; }.btn:hover,.chip:hover { filter:brightness(1.1); }
.examples { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:15px; color:var(--muted); font-size:12px; }.chip { padding:6px 10px; color:#bdc8db; border:1px solid var(--border); border-radius:999px; background:var(--panel); cursor:pointer; font:inherit; font-size:12px; }
dialog { width:min(680px,calc(100vw - 32px)); border:1px solid #3c4d6b; border-radius:16px; padding:0; color:var(--text); background:#121a29; box-shadow:0 24px 80px #000a; } dialog::backdrop { background:#03050ab8; }.trace-header { display:flex; justify-content:space-between; align-items:start; padding:20px 22px 14px; border-bottom:1px solid var(--border); }.trace-header h2 { margin:0; font-size:20px; }.icon-btn { padding:0 4px; font-size:28px; line-height:1; }.trace-query { margin:16px 22px; color:#c9d4e9; font-size:14px; }.trace-flow { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:0 22px 22px; }.trace-step { min-width:120px; max-width:185px; padding:11px; border:1px solid #405273; border-radius:10px; background:#18243a; }.trace-step strong { display:block; font-size:12px; }.trace-step span { display:block; margin-top:4px; color:var(--muted); font-size:11px; line-height:1.35; }.trace-arrow { color:#819edb; font-size:20px; }
@media (max-width:600px) { .app-header { min-height:auto; padding:22px 18px; }.header-actions { margin-top:14px; justify-content:flex-start; } h1 { font-size:21px; } main { padding:20px 12px 35px; }.msg { max-width:96%; } .examples { gap:5px; } }
@keyframes pulse { 50% { opacity:.3; transform:scale(.7); } }