/* Chat page, minimal (26.10.2026, Dennis: "ultra minimalistisch, Apple-Style"). Loaded after app.css,
   only on index.html. Eine Kugel (30.10.2026): one column, the head is only the sidebar button (with a pink
   count of what waits on Dennis) and "new chat"; at the bottom the text field and one orb (#call), under them
   one status line (#status: what Albert does · the model now · what a tap does · one action). His spoken words stand in
   the empty field while he talks. "Braucht dich" is the top of the sidebar. */
body.chat-page {
  --bg: #000;
  --bg-2: #000;
  --panel: #1c1c1e;
  --panel-2: #1c1c1e;
  --panel-3: #2c2c2e;
  --border: rgba(255, 255, 255, 0.07);
  --border-2: rgba(255, 255, 255, 0.12);
  --text: #f5f5f7;
  --text-2: #a1a1a6;
  --muted: #6e6e73;
  --accent: #f5f5f7;
  --accent-soft: rgba(255, 255, 255, 0.08);
  --orb-em: #10b981;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif;
  background: var(--bg);
  letter-spacing: -0.011em;
}
body.chat-page ::selection { background: rgba(45, 212, 191, 0.3); }

/* ---------- sidebar: chats only, links at the bottom ---------- */
.chat-page .side { background: #0a0a0b; border-right: 1px solid var(--border); }
.chat-page .side-head { padding: 14px 12px 6px 18px; }
.chat-page .side-head .brand .logo { display: none; }
.chat-page .side-head .brand { font-size: 15px; font-weight: 600; }
.chat-page .side-head .brand .dot { width: 6px; height: 6px; }
.chat-page .new-chat { margin: 6px 10px 10px; background: none; border: 0; border-radius: 10px; color: var(--text-2); font-weight: 500; justify-content: flex-start; padding: 8px 10px; }
.chat-page .new-chat:hover { background: var(--panel); color: var(--text); }
.chat-page .side-nav { margin-top: auto; padding: 8px 10px 14px; border-top: 1px solid var(--border); gap: 0; }
.chat-page .side-nav a { color: var(--muted); font-size: 13px; padding: 6px 10px; }
.chat-page .side-nav a:hover { color: var(--text); background: none; }
.chat-page .side-nav a svg { opacity: 0.7; }
.chat-page .thread-link { color: var(--text-2); font-size: 13.5px; }
.chat-page .thread.on .thread-link, .chat-page .thread-link:hover { color: var(--text); }
.chat-page .thread.on, .chat-page .thread:hover { background: var(--panel); }

/* ---------- head: the sidebar button (pink count while closed) … new chat. No chat name (Dennis 30.10.2026). ---------- */
.chat-page .main-head { height: 54px; padding: 0 14px; border-bottom: 0 !important; justify-content: space-between; }
@media (min-width: 901px) { .chat-page .app.side-hidden #newChatTop { visibility: visible; } }
.chat-page #newChatTop { margin-left: auto; }
.chat-page .icon-btn.ghost { color: var(--muted); }
.chat-page .icon-btn.ghost:hover { color: var(--text); background: none; }
.chat-page #sideShow { position: relative; overflow: visible; }
.side-need {
  position: absolute; top: 1px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; box-sizing: border-box;
  background: #ff375f; color: #fff; font-size: 10.5px; font-weight: 650; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--bg); pointer-events: none;
}
.side-need[hidden], .app.side-open .side-need { display: none; }
/* "Braucht dich": the top of the sidebar, only while something waits; the Aufgaben badge would count it twice */
.chat-page #needBadge { display: none; }
.chat-page .side-scroll .need-sec { margin: 4px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.chat-page .side-scroll .need-sec h6 { margin-top: 6px; color: #ff6b8a; }

/* ---------- conversation ---------- */
.chat-page .conversation .inner { max-width: 680px; padding: 24px 24px 20px; gap: 28px; }
.chat-page .msg .text { font-size: 16px; line-height: 1.6; }
.chat-page .msg.user .text { background: var(--panel); border-radius: 20px; padding: 10px 16px; max-width: 82%; }
.chat-page .msg.system .text { color: var(--text); }
.chat-page .msg .ack { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.chat-page .msg .ack::before { display: none; }
.chat-page .msg .tools { display: none; }
.chat-page .msg .foot { opacity: 0; transition: opacity 0.15s; margin-top: 4px; }
.chat-page .msg:hover .foot, .chat-page .msg .foot:focus-within { opacity: 1; }
.chat-page .msg.error .foot { opacity: 1; }
@media (hover: none) { .chat-page .msg .foot { display: none; } .chat-page .msg.error .foot { display: flex; } }
/* task cards: one quiet line */
.chat-page .tref { background: none; border: 0; border-radius: 10px; padding: 6px 8px; margin: 8px 0 0 -8px; max-width: 100%; gap: 10px; }
.chat-page .tref:hover { background: var(--panel); }
.chat-page .tref + .tref { margin-top: 0; }
.chat-page .tref-dot { width: auto; height: auto; background: none; }
.chat-page .tref-title { font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.chat-page .tref-sub { font-size: 12px; color: var(--muted); }
.chat-page .tref-log { display: none; }
.chat-page .tref-go { display: none; }

/* new chat: only the greeting, centred; the composer stays at the bottom, exactly where it is in a thread */
.chat-page .empty-state { display: flex; flex-direction: column; align-items: center; }
.chat-page .empty-state h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.025em; margin: 0; }
.chat-page .main.empty .conversation { flex: 1 1 auto; margin-top: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; }
.chat-page .main.empty .conversation .inner { width: 100%; padding-bottom: 24px; }
.chat-page .main.empty .composer-wrap { margin-bottom: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 70%, transparent); }

/* ---------- composer: [text field][orb], the status line under it ---------- */
.chat-page .composer-wrap { background: linear-gradient(to top, var(--bg) 70%, transparent); padding-top: 10px; overflow-x: clip; } /* the orb's canvas reaches past the edge */
@supports not (overflow: clip) { .chat-page .composer-wrap { overflow: hidden; } }
.chat-page .composer { max-width: 680px; }
.composer-row { display: flex; align-items: center; gap: 10px; margin: 0; }
.chat-page .composer-row .inputbar { flex: 1; min-width: 0; }
.chat-page .inputbar {
  flex-direction: row; align-items: flex-end; gap: 4px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 26px; padding: 6px 6px 6px 18px; box-shadow: none; min-height: 50px; box-sizing: border-box;
}
.chat-page .inputbar:focus-within { border-color: var(--border-2); }
.chat-page .inputbar textarea { flex: 1; min-width: 0; padding: 7px 0; min-height: 24px; font-size: 16px; }
.chat-page .inputbar textarea::placeholder { color: var(--muted); }
/* his spoken words while he talks (recorder, classic ears) stand in the empty field, like dictation */
.chat-page .inputbar textarea.words::placeholder { color: var(--text-2); }
.chat-page .icon-btn { width: 38px; height: 38px; border-radius: 50%; color: var(--muted); }
@media (hover: hover) { .chat-page .icon-btn:hover { background: var(--panel-3); color: var(--text); } }
.chat-page .icon-btn.send { background: var(--text); color: #000; flex: none; }
.chat-page .icon-btn.send:disabled { display: none; }
.chat-page .icon-btn.send.stop { background: var(--text); color: #000; }
/* the orb: Albert's face and his one button (start, end, interrupt). The hit box is 56 px; the canvas is drawn
   larger than the button (the sphere is ~0.54 of the canvas), so the sphere is about as tall as the field next to it. */
.orb-btn {
  flex: none; width: 56px; height: 56px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  overflow: visible; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; transition: transform 0.15s ease;
}
@media (hover: hover) { .orb-btn:hover { transform: scale(1.05); } } /* touch: no hover that sticks after a tap */
.orb-btn:active { transform: scale(0.96); }
.orb-btn:focus-visible { outline: 2px solid var(--orb-em); outline-offset: -2px; }
.orb-mini { display: block; width: 56px; height: 56px; pointer-events: none; }
.orb-btn .orb-mini { width: 88px; height: 88px; margin: -16px; }
/* /canvas: Albert's orb is the core of the map; the composer keeps the field and the line */
body.canvas-on #call { display: none; }

/* the status line: dot · what Albert does · the model now · what a tap does · at most one action; always one line,
   always the same height (an action appearing must not move the field and the orb). When it is too narrow, the model
   gives way first, then the words; what a tap does and the action never. All the dots come from here (" · "). */
.status {
  display: flex; align-items: center; justify-content: center; gap: 0; min-width: 0; padding: 8px 12px 0; height: 26px; box-sizing: border-box;
  font-size: 12.5px; line-height: 18px; color: var(--muted); white-space: nowrap;
}
.status[hidden] { display: none; }
.status .dot { flex: none; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--orb-em); opacity: 0.55; }
.status .txt { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.status .model { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.status .hint { flex: none; color: var(--muted); }
.status :is(.txt, .model, .hint):empty { display: none; }
.status .txt:not(:empty) ~ :is(.model, .hint):not(:empty)::before { content: " · "; white-space: pre; color: var(--muted); }
.status button {
  flex: none; margin: -2px 0 -2px 10px; border: 1px solid var(--border-2); border-radius: 999px; background: none; color: var(--text); padding: 1px 10px;
  min-height: 0; font: inherit; font-size: 12.5px; line-height: 18px; font-weight: 500; cursor: pointer;
}
@media (hover: hover) { .status button:hover { background: var(--panel); } }
.status button:disabled { opacity: 0.5; cursor: default; }
.status button[hidden] { display: none; }
.status[data-state="loading"] .dot { animation: pulse 1.4s infinite; }
.status[data-state="sleeping"] .dot { opacity: 0.7; }
.status[data-state="checking"] .dot { opacity: 1; background: var(--text-2); }
.status:is([data-state="awake"], [data-state="rec"], [data-state="live"], [data-state="speaking"]) .dot { opacity: 1; animation: pulse 1s infinite; }
.status:is([data-state="awake"], [data-state="rec"], [data-state="live"], [data-state="speaking"]) .txt { color: var(--text); }
.status:is([data-state="reconnecting"], [data-state="thinking"]) .dot { opacity: 1; background: var(--planned); animation: pulse 1.4s infinite; }
.status:is([data-state="rejected"], [data-state="error"], [data-state="mic"], [data-state="text"], [data-state="offline"]) .dot { opacity: 1; background: #ff453a; }
.status:is([data-state="off"], [data-state="tap"], [data-state="enroll"]) .dot { opacity: 1; background: var(--muted); }

/* the minimized /call (Chat): a bar above the field instead of the status line */
.chat-page .callbar {
  border: 0; background: none; padding: 0 12px 8px; margin: 0; font-size: 12.5px; color: var(--muted); justify-content: center;
}
.chat-page .callbar button {
  border: 0; background: none; color: var(--text-2); padding: 2px 8px; min-height: 0; font-size: 12.5px; cursor: pointer; border-radius: 8px;
}
@media (hover: hover) { .chat-page .callbar button:hover { color: var(--text); background: var(--panel); } }
.chat-page .callbar .dot { background: var(--orb-em); width: 6px; height: 6px; }
.chat-page .callbar .txt { flex: 0 1 auto; }
.chat-page .callbar button.end { background: none; color: #ff453a; }

/* ---------- call: black, the big orb, a few words ---------- */
.chat-page .callview { background: #000; }
.chat-page .cv-head { border: 0; }
.chat-page .cv-live { color: var(--muted); font-weight: 500; }
.chat-page .cv-live .dot { background: var(--orb-em); }
.chat-page .cv-small { border: 0; background: none; color: var(--text-2); }
.chat-page .cv-orb { width: min(360px, 74vw); height: min(360px, 74vw); margin-bottom: 8px; }
.orb-call { display: block; width: 100%; height: 100%; pointer-events: none; }
.chat-page .cv-state { font-size: 15px; font-weight: 500; color: var(--text-2); letter-spacing: 0; }
.chat-page .cv-hint { font-size: 12.5px; color: var(--muted); }
.chat-page .cv-you { font-size: 22px; font-weight: 500; color: var(--text); max-width: 34rem; }
.chat-page .cv-albert { color: var(--text-2); max-width: 34rem; }
.chat-page .cv-albert::before { display: none; }
.chat-page .cv-btn svg { background: var(--panel); border: 0; }
.chat-page .cv-btn.end svg { background: #ff453a; color: #fff; }
.chat-page .cv-btn span { color: var(--muted); }
.chat-page .cv-btn.on svg { background: var(--text); color: var(--bg); }
.chat-page .cv-btn.start svg { background: #30d158; color: #fff; }
.chat-page .callview[data-phase="ready"] .cv-state { font-size: 22px; font-weight: 600; color: var(--text); }
/* live call asleep (no session, only the wake word): the orb rests, dimmed; "Albert" or a tap wakes it */
.chat-page .cv-orb { transition: opacity 0.6s ease; }
.chat-page .callview[data-state="dormant"] .cv-orb { opacity: 0.4; }
.chat-page .callview[data-state="dormant"] .cv-live .dot { background: var(--muted); animation: none; }
.chat-page .callview[data-state="live"] .cv-live .dot { background: var(--orb-em); }
.chat-page .cv-alert { border-radius: 14px; }

.chat-page .menu, .chat-page .enroll { background: var(--panel); border: 1px solid var(--border-2); border-radius: 14px; }

@media (max-width: 900px) {
  .chat-page .side { background: #0a0a0b; }
  .chat-page .thread-title { max-width: 52%; }
}
@media (max-width: 640px) {
  .chat-page .conversation .inner { padding: 16px 18px 12px; gap: 24px; }
  .chat-page .empty-state h1 { font-size: 26px; }
  .chat-page .main.empty .composer-wrap { margin-bottom: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .composer-row { gap: 8px; }
  .status { padding: 8px 4px 0; }
  .status button { margin-left: 8px; padding: 1px 9px; }
  .chat-page .cv-orb { width: min(300px, 78vw); height: min(300px, 78vw); }
}
@media (max-height: 700px) { .chat-page .cv-orb { width: 200px; height: 200px; } }
@media (pointer: coarse) { .chat-page .icon-btn { width: 42px; height: 42px; } .chat-page .inputbar .icon-btn.send { width: 38px; height: 38px; } }

/* files and key links Albert shows with an answer (share_file, secret_link) */
.chat-page .attach { margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.chat-page .attach video, .chat-page .attach img { display: block; max-width: min(100%, 420px); max-height: 60vh; border-radius: 14px; background: #111; }
.chat-page .attach audio { width: min(100%, 360px); }
.chat-page .attach a { color: var(--text-2); font-size: 13px; }
.chat-page .attach .attach-btn { display: inline-block; background: var(--text); color: #000; font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 999px; text-decoration: none; }
/* no server: the status line says it on the chat page (the call view says it itself on /call) */
body.chat-page:not(.call-page) .netbar { display: none; }