/* ==========================================================================
   darvis · brain — minimal chat
   ========================================================================== */

/* Tokens gespiegelt aus design/standard — Standard-CSS wird zusaetzlich
   eingebunden, diese Werte dienen als Fallback. */
:root {
    --cream: #f6f5f2;
    --line: #e4e2dc;
    --gray: #5a6580;

    --navy-deep: #1e293b;
    --navy: #293851;
    --navy-soft: #354969;
    --navy-line: #3a5074;
    --navy-edge: #415980;

    --accent: #ff6f00;
    --accent-hi: #ff7a13;
    --accent-soft: #ffa663;
    --accent-ink: #ac4b00;
    --on-accent: #1e293b;

    --green: #2aa96e;

    --r-md: 16px;
    --r-lg: 20px;
    --r-pill: 999px;
    --ease: cubic-bezier(.16, 1, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'IBM Plex Sans', sans-serif; font-size: 16px; line-height: 1.6; color: var(--navy); background: var(--cream); height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }

/* ---------- Topbar ---------- */

.topbar { display: flex; align-items: center; justify-content: center; padding: 16px max(22px, calc((100% - 1080px) / 2)); background: var(--navy-deep); flex: none; }
.logo { font-family: 'Sora'; font-weight: 800; font-size: clamp(28px, 4vw, 38px); color: #fff; display: inline-flex; align-items: baseline; }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--gray); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #2aa96e; animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(42, 169, 110, .5); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- Chat ---------- */

.chat { flex: 1; overflow-y: auto; padding: 24px max(24px, calc((100% - 860px) / 2)); display: flex; flex-direction: column; gap: 10px; }
.chat-empty { margin: auto; text-align: center; }
.kicker { font-family: 'Sora'; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.chat-empty h1 { font-family: 'Sora'; font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -.02em; color: var(--navy); margin-bottom: 0; }

.msg { max-width: 78%; padding: 10px 15px; border-radius: var(--r-md); font-size: 14.5px; line-height: 1.5; animation: msg-in .25s var(--ease); }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } }
.msg.out { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 6px; }
.msg.in { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg.typing { padding: 0; background: transparent; border: 0; }

/* ---------- Dock ---------- */

.dock { flex: none; padding: 14px 22px 12px; background: #fff; border-top: 1px solid var(--line); }
.dock-meta { display: flex; align-items: center; gap: 14px; max-width: 860px; margin: 0 auto 8px; }
.dock-meta .status { margin-right: auto; }
.dock-link { font-size: 12.5px; font-weight: 600; color: var(--gray); text-decoration: none; transition: color .2s; }
.dock-link:hover { color: var(--accent); }
.chatbar { display: flex; gap: 8px; max-width: 860px; margin: 0 auto; }
.input { flex: 1; min-height: 48px; padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--cream); font: inherit; font-size: 15px; color: var(--navy); outline: none; transition: border-color .2s, box-shadow .2s; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.send { width: 48px; height: 48px; flex: none; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer; display: grid; place-items: center; transition: transform .15s var(--ease); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent); }
.send:hover { transform: scale(1.08); }
.send svg { width: 18px; height: 18px; }

.mic { width: 48px; height: 48px; flex: none; border: 1px solid var(--line); border-radius: 50%; background: var(--cream); color: var(--navy); cursor: pointer; display: grid; place-items: center; transition: transform .15s var(--ease), background .2s, color .2s, border-color .2s; }
.mic:hover { transform: scale(1.08); border-color: var(--accent); color: var(--accent); }
.mic svg { width: 20px; height: 20px; }
.mic.recording { background: #d92d20; border-color: #d92d20; color: #fff; animation: mic-pulse 1.4s infinite; }
@keyframes mic-pulse { 0% { box-shadow: 0 0 0 0 rgba(217, 45, 32, .45); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.foot { display: flex; justify-content: center; gap: 22px; padding-top: 10px; }
.foot a { font-size: 12.5px; font-weight: 600; color: var(--gray); text-decoration: none; transition: color .2s; }
.foot a:hover { color: var(--accent); }

.accent { color: var(--accent); }