:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-width: 320px; }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; background: #071a35; color: #46d7ee; font-size: 1.35rem; font-weight: 900; box-shadow: 0 8px 20px rgba(7,26,53,.18); }
.eyebrow { color: #7990ac; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.section-tag { color: #0a7494; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.role-card { width: 100%; border: 1px solid #e2e8f0; border-radius: 16px; padding: 13px; text-align: left; transition: .2s ease; }
.role-card:hover { border-color: #9de9f3; transform: translateY(-1px); }
.role-card.active { border-color: #46d7ee; background: #effcff; box-shadow: inset 3px 0 0 #46d7ee; }
.role-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #eaf8fb; font-size: 1.15rem; }
.role-card.active .role-icon { background: #071a35; }
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; }
.status-dot.loading { background: #f59e0b; animation: blink 1.2s infinite; }
.status-dot.error { background: #ef4444; }
@keyframes blink { 50% { opacity: .35; } }
.metric-box { display: flex; min-height: 54px; flex-direction: column; justify-content: center; border-radius: 12px; background: #fff; }
.metric-box strong { color: #071a35; font-size: 1.05rem; }
.metric-box span { color: #8ba0b7; font-size: .68rem; }
.field-wrap { display: block; color: #60738b; font-size: .72rem; font-weight: 700; }
.field-wrap input, .field-wrap select { margin-top: 7px; width: 100%; border: 1px solid #dbe4ee; border-radius: 11px; background: #fff; padding: 11px 12px; color: #071a35; font-size: .86rem; outline: none; transition: .2s ease; }
.field-wrap input { padding-right: 68px; }
.field-wrap input:focus, .field-wrap select:focus, textarea:focus { border-color: #46d7ee; box-shadow: 0 0 0 3px rgba(70,215,238,.16); }
.input-action { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: #0a7494; font-size: .72rem; font-weight: 800; }
.primary-button, .ghost-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 11px; padding: 10px 15px; font-size: .82rem; font-weight: 800; transition: .2s ease; }
.primary-button { background: #071a35; color: #fff; box-shadow: 0 8px 18px rgba(7,26,53,.16); }
.primary-button:hover { background: #0b2a52; transform: translateY(-1px); }
.primary-button:disabled { cursor: wait; opacity: .55; transform: none; }
.ghost-button { color: #43617f; }
.ghost-button:hover { background: #eff5fa; color: #071a35; }
.assistant-orb { display: inline-grid; width: 24px; height: 24px; place-items: center; border-radius: 8px; background: #071a35; color: #46d7ee; font-size: .9rem; }
.chat-messages { min-height: 315px; max-height: 52vh; overflow-y: auto; }
.message { display: flex; gap: 12px; max-width: 920px; }
.message.user { margin-left: auto; flex-direction: row-reverse; }
.avatar { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 10px; background: #071a35; color: #46d7ee; font-size: .78rem; font-weight: 900; }
.user .avatar { background: #dff8fb; color: #0a7494; }
.bubble { border: 1px solid #e6edf4; border-radius: 4px 16px 16px 16px; background: #fbfdff; padding: 13px 15px; font-size: .92rem; line-height: 1.7; color: #344a62; white-space: pre-wrap; }
.user .bubble { border: 0; border-radius: 16px 4px 16px 16px; background: #071a35; color: #fff; }
.bubble strong { color: #071a35; }
.user .bubble strong { color: #fff; }
textarea { display: block; width: 100%; resize: vertical; border: 1px solid #dbe4ee; border-radius: 14px; background: #fff; padding: 14px; color: #071a35; font-size: .94rem; line-height: 1.6; outline: none; }
.typing { display: inline-flex; gap: 4px; padding: 5px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #46d7ee; animation: typing 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; }.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.live-pulse { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.12); }
@media (max-width: 1023px) { aside { border-right: 0; border-bottom: 1px solid #e2e8f0; } #role-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { #role-list { grid-template-columns: 1fr; } .chat-messages { max-height: none; } }