:root { --ink:#152033; --muted:#5d6b7a; --line:#dce6ef; --blue:#0b679f; --sand:#fbf7ef; --green:#0f7a68; }
body { margin:0; background: radial-gradient(circle at top left,#eef8ff,#fbf7ef 42%,#f7fbff); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.page-shell { max-width:1180px; margin:0 auto; padding:28px; }
.hero { background:linear-gradient(135deg,#0b679f,#17324d); color:white; border-radius:24px; padding:28px 32px; margin-bottom:20px; box-shadow:0 20px 52px rgba(21,32,51,.18); }
.hero h1 { margin:0 0 8px; font-size:clamp(2rem,4vw,3.4rem); font-weight:800; letter-spacing:-.04em; }
.hero p { margin:0; max-width:760px; color:#d9ecf8; font-size:1.05rem; }
.panel { background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:20px; padding:18px; margin-bottom:18px; box-shadow:0 14px 36px rgba(21,32,51,.08); }
.panel h3 { margin-top:0; color:var(--blue); font-weight:800; }
textarea.form-control { border-radius:14px; border-color:#cbd9e6; box-shadow:none; }
.btn.primary, .btn.primary:hover { background:var(--blue); color:white; border-color:var(--blue); border-radius:12px; font-weight:750; }
.btn.secondary, .btn.secondary:hover { background:#eef3f8; color:var(--ink); border-color:#cbd9e6; border-radius:12px; font-weight:700; margin-left:8px; }
.chat-panel { min-height:680px; display:flex; flex-direction:column; }
#chat { flex:1; overflow-y:auto; padding:4px; }
.empty-chat { color:var(--muted); background:#f7fafc; border:1px dashed #cbd9e6; border-radius:16px; padding:18px; }
.bubble { border-radius:18px; padding:14px 16px; margin:12px 0; max-width:88%; line-height:1.48; }
.bubble .role { font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; font-weight:850; margin-bottom:4px; }
.bubble.participant { background:#eef8ff; margin-left:auto; border:1px solid #cfe4f3; }
.bubble.assistant { background:#fffaf0; border:1px solid #eadfca; }
.bubble.assistant .role { color:var(--green); }
.reply-box { border-top:1px solid var(--line); padding-top:14px; margin-top:14px; }
.audit-card { background:#f8fbfd; border:1px solid #d9e7f0; border-radius:16px; padding:12px; color:#24364a; font-size:.92rem; }
.audit-card.muted { color:var(--muted); }
.audit-card details { margin-top:8px; }
ul { padding-left:20px; color:#33465a; }
.typing-bubble { width: fit-content; min-width: 120px; }
.typing-dots { display:flex; align-items:center; gap:5px; height:22px; }
.typing-dots span { width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block; animation:typingWave 1.05s infinite ease-in-out; opacity:.35; }
.typing-dots span:nth-child(2) { animation-delay:.14s; }
.typing-dots span:nth-child(3) { animation-delay:.28s; }
@keyframes typingWave { 0%, 80%, 100% { transform:translateY(0); opacity:.35; } 40% { transform:translateY(-6px); opacity:1; } }