:root {
  --bg: #0f1630;
  --panel: #1b2550;
  --panel-2: #18224b;
  --line: #2a3670;
  --text: #e8ecff;
  --muted: #8f9bd0;
  --accent: #5b8cff;
  --accent-2: #8fb0ff;
  --ok: #4ade80;
  --warn: #facc15;
  --err: #f87171;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg) radial-gradient(130% 70% at 50% -10%, #23327a 0%, #141d44 45%, #0f1630 100%);
  color: var(--text);
  font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 14px env(safe-area-inset-bottom);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

/* ---------- header ---------- */
.bar { display: flex; align-items: center; justify-content: space-between; height: 44px; flex: none; }
.brand { letter-spacing: .35em; font-size: 14px; font-weight: 700; color: var(--muted); padding-inline-start: .35em; }
.dot { width: 10px; height: 10px; margin: 0 8px; border-radius: 50%; background: var(--err); box-shadow: 0 0 0 3px rgb(248 113 113 / .15); }
.dot.on { background: var(--ok); box-shadow: 0 0 0 3px rgb(74 222 128 / .15); }
.bar-actions { display: flex; align-items: center; }
.icon-btn { background: none; border: 0; color: var(--muted); padding: 8px; line-height: 0; border-radius: 12px; }
.icon-btn:active { color: var(--text); background: rgb(255 255 255 / .06); }
.icon-btn svg { display: block; width: 22px; height: 22px; }
.view-btn .ico-chat, .view-btn.on .ico-face { display: none; }
.view-btn.on .ico-chat { display: block; }
.send-icon { transform: scaleX(-1); } /* points to the left in RTL */

.banner {
  display: block; width: 100%; margin: 0 0 4px; padding: 9px 12px; border: 0; border-radius: 12px; flex: none;
  background: rgb(248 113 113 / .14); color: var(--err); font: inherit; font-size: 14px; text-align: center;
}
.banner[hidden] { display: none; }

/* ---------- the stage: Kira and the status line ---------- */
main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 0; }
.stage { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.state-text { text-align: center; }
.status { color: var(--muted); margin: 0; font-size: 15px; min-height: 1.2em; }
.hint { color: var(--warn); margin: 4px 0 0; font-size: 13px; text-align: center; }
.hint:empty { display: none; }

/* The conversation view with messages: a small face beside the status line, the bubbles below. */
body.chat main { justify-content: flex-start; }
body.chat .stage { flex-direction: row; align-self: stretch; gap: 10px; padding: 2px 2px 8px; border-bottom: 1px solid var(--line); }
body.chat .face { width: 52px; }
body.chat .state-text { flex: 1; text-align: start; }
body.chat .status { font-size: 14px; }
body.chat .talk { height: 50px; border-radius: 25px; font-size: 17px; }

/* Kira alone (hands-free): the face big and talking, no bubbles and no text box. */
body.avatar-view .log, body.avatar-view .text-form { display: none; }
body.avatar-view .face { width: min(78vw, 50vh, 320px); }
body.avatar-view .stage { gap: 16px; }
body.avatar-view .status { font-size: 17px; color: #b9c3ee; }

/* ---------- conversation ---------- */
.log {
  flex: 1; align-self: stretch; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 8px; padding: 6px 2px 8px;
}
.log:empty { display: none; }
.log > :first-child { margin-top: auto; } /* few messages sit at the bottom; many still scroll */
.msg {
  max-width: 86%; padding: 8px 13px; border-radius: 18px; font-size: 17px; line-height: 1.4;
  white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; box-shadow: 0 1px 2px rgb(0 0 0 / .25);
}
.msg.me { align-self: flex-end; background: linear-gradient(180deg, #6a97ff, #4f7ff0); color: #fff; border-bottom-left-radius: 6px; }
.msg.kira { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); border-bottom-right-radius: 6px; }
.msg.live { opacity: .6; }
.note { align-self: center; max-width: 90%; font-size: 13px; color: var(--muted); text-align: center; }
.note.err { color: var(--err); }
body.big .msg { font-size: 21px; }
body.big .note, body.big .status { font-size: 16px; }
body.big .text-form input { font-size: 19px; }

/* ---------- face (drawn by face.js) ---------- */
.face { display: block; width: min(56vw, 42vh, 260px); height: auto; aspect-ratio: 1; overflow: visible; touch-action: none; transition: width .35s; }
.face .halo, .face .halo-glow, .face .halo-arc { fill: none; stroke: var(--accent); transition: stroke .4s; }
.face .halo { stroke-width: 2.5; }
.face .halo-glow { stroke-width: 12; }
.face .halo-arc { stroke: #a5b4fc; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 80 498; }
.face .mouth { fill: #e8ecff; stroke: #e8ecff; stroke-width: 7; stroke-linejoin: round; }
body[data-state="listening"] .face .halo, body[data-state="listening"] .face .halo-glow { stroke: var(--ok); }
body[data-state="speaking"] .face .halo, body[data-state="speaking"] .face .halo-glow { stroke: #c4b5fd; }
body[data-state="error"] .face .halo, body[data-state="error"] .face .halo-glow { stroke: var(--err); }

/* ---------- the bottom: text and the talk button ---------- */
footer { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; flex: none; }
.text-form {
  display: flex; align-items: center; gap: 2px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 22px; padding: 2px 4px 2px 6px;
}
.text-form input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font-size: 16px; padding: 9px 8px; outline: none; }
.text-form input::placeholder { color: #6f7bb5; }
.talk {
  height: 56px; border: 0; border-radius: 28px; color: #fff; font-size: 18px; font-weight: 600; letter-spacing: .01em;
  background: linear-gradient(180deg, #6a97ff, #4f7ff0); box-shadow: 0 6px 16px rgb(79 127 240 / .28);
  touch-action: none; transition: transform .1s, background .2s, height .25s;
}
.talk:active { transform: scale(.98); }
body[data-state="listening"] .talk { background: linear-gradient(180deg, #5ee08f, #34c26f); color: #05210f; box-shadow: 0 6px 16px rgb(52 194 111 / .3); transform: scale(.98); }
.talk.cancel, body[data-state] .talk.cancel { background: var(--panel); color: var(--text); box-shadow: inset 0 0 0 2px var(--err); transform: none; }
.talk:disabled { opacity: .5; }

/* ---------- dialogs ---------- */
dialog {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px;
  width: min(92vw, 380px); box-shadow: 0 18px 40px rgb(0 0 0 / .45);
}
dialog::backdrop { background: rgb(5 9 26 / .7); }
dialog p { font-size: 18px; margin: 0 0 16px; }
dialog .sec {
  margin: 12px 0 8px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--accent-2);
}
dialog .sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* compact: the settings fit the J1's small screen (the window scrolls when they do not) */
dialog label { display: block; margin-bottom: 9px; font-size: 15px; }
dialog label[hidden] { display: none; }
dialog input[type="password"], dialog select {
  width: 100%; margin-top: 4px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font-size: 16px;
}
dialog .caps { font-size: 13px; color: var(--muted); margin: 4px 0 10px; }
.row { display: flex; gap: 10px; }
.row button { flex: 1; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--line); background: none; color: var(--text); font-size: 16px; }
.row button.primary { background: linear-gradient(180deg, #6a97ff, #4f7ff0); border-color: transparent; }
.row.more { margin-top: 8px; flex-wrap: wrap; }
.row.more button { flex: 1 1 40%; padding: 8px 4px; font-size: 14px; color: var(--muted); }

/* ---------- photos ---------- */
.msg .photo { display: block; max-width: 100%; max-height: 160px; border-radius: 12px; margin-bottom: 6px; }
dialog.camera { padding: 12px; }
dialog.camera video { display: block; width: 100%; max-height: 52vh; border-radius: 12px; background: #000; object-fit: cover; }
dialog.camera .caps { margin: 8px 0; }