/* ============================================================================
   AssistantOS — hệ thiết kế
   ============================================================================

   Trước đây toàn bộ CSS nằm trong <style> của index.html. Ba lý do tách ra:

   1. Thứ tự quy tắc trở nên nhìn thấy được. Đã mất mấy vòng vì khối media query
      cho điện thoại bị đặt TRƯỚC các quy tắc nó định ghi đè — cùng độ ưu tiên
      thì cái đứng sau thắng, nên khối đó không có tác dụng gì mà cũng không báo
      lỗi. Ở đây thứ tự được ghi rõ thành từng phần.
   2. Màn hình quản trị sắp tới dùng chung bộ biến này.
   3. Trình duyệt cache riêng, không phải tải lại theo HTML.

   ── Thứ tự các phần (KHÔNG đảo) ─────────────────────────────────────────────
   1. Biến      2. Nền tảng     3. Thành phần
   4. Bố cục    5. Màn hình hẹp (phải nằm CUỐI — nó ghi đè phần 3 và 4)
   ============================================================================ */

/* ── 1. Biến ─────────────────────────────────────────────────────────────────
   Bảng màu lấy TRỰC TIẾP từ logo SkyRecall, không phải đoán. Lấy mẫu điểm ảnh
   trên tệp gốc, ba màu chiếm ưu thế:

       #000c24   nền chữ "Sky" — xanh navy gần như đen
       #0060f0   chữ "Recall" — xanh chủ đạo
       #009cf0   đầu chuyển sắc bên phải — ngả lơ

   Nền và đường kẻ ngả xanh rất nhẹ thay vì xám trung tính: xám thuần đặt cạnh
   một logo xanh đậm trông như chưa ai chọn màu.
   ------------------------------------------------------------------------- */

:root {
  --bg:          #f7f9fc;
  --panel:       #ffffff;
  --line:        #dfe6f0;
  --ink:         #000c24;   /* navy của chữ "Sky" */
  --muted:       #5b6b85;
  --accent:      #0060f0;   /* xanh của chữ "Recall" */
  --accent-2:    #009cf0;   /* lơ, dùng cho chuyển sắc */
  --accent-soft: #eaf2ff;
  --user-bubble: #eaeef5;

  --ok:   #1f9d55;
  --bad:  #d64545;

  --r-sm: 6px;
  --r:    8px;
  --r-lg: 12px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 28px;

  --font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Nền tối lấy chính navy của logo làm nền — cùng một họ màu, không phải xám. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #060f1f; --panel: #0d1728; --line: #1d2a3f; --ink: #e6edf7;
    --muted: #8fa0bb; --accent: #3d8bff; --accent-2: #4fc3ff;
    --accent-soft: #10203a; --user-bubble: #16223a;
    --ok: #4ec97e; --bad: #ff7a7a;
  }
}
:root[data-theme="dark"] {
  --bg: #060f1f; --panel: #0d1728; --line: #1d2a3f; --ink: #e6edf7;
  --muted: #8fa0bb; --accent: #3d8bff; --accent-2: #4fc3ff;
  --accent-soft: #10203a; --user-bubble: #16223a;
  --ok: #4ec97e; --bad: #ff7a7a;
}

/* ── 2. Nền tảng ─────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

body { margin: 0; background: var(--bg); color: var(--ink); font: var(--font); }

button {
  font: inherit; padding: 0 18px; border: 0; border-radius: var(--r);
  background: var(--accent); color: #fff; cursor: pointer; font-weight: 500;
}
button:disabled { opacity: .45; cursor: default; }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
button.ghost.on { background: var(--accent); color: #fff; border-color: var(--accent); }

textarea {
  flex: 1; font: inherit; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r); resize: none; background: var(--bg); color: var(--ink);
  min-height: 44px;
}

/* Safari iOS tô select bằng kiểu riêng của hệ điều hành và nó trông như bị mờ đi.
   Tự vẽ lại để nó giống các nút bên cạnh. */
header select {
  -webkit-appearance: none; appearance: none; padding-right: 22px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 10px center, right 6px center;
  background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
}

/* ── 3. Thành phần ───────────────────────────────────────────────────────── */

header {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line); background: var(--panel);
}
header .logo { height: 26px; width: auto; display: block; }
header h1 { margin: 0; font-size: 0; }   /* tên thương hiệu nằm trong logo; chữ giữ lại cho trình đọc màn hình */
header .dot { width: 8px; height: 8px; border-radius: 50%; background: #999; }
header .dot.ok  { background: var(--ok); }
header .dot.bad { background: var(--bad); }
header .tok { font-size: 12px; color: var(--muted); }
header .tok.ok  { color: var(--ok); }
header .tok.bad { color: var(--accent); }
header .meta {
  margin-left: auto; font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
header input, header select {
  font: inherit; font-size: 13px; padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink);
}

#chat { flex: 1; overflow-y: auto; padding: var(--sp-6) var(--sp-5); }

.turn { max-width: 720px; margin: 0 auto var(--sp-4); }
.turn .who {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: var(--sp-1);
}
.turn .bubble {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg);
  white-space: pre-wrap; word-wrap: break-word;
}
.turn.user .bubble { background: var(--user-bubble); }
.turn.assistant .bubble { background: var(--panel); border: 1px solid var(--line); }

.recall {
  max-width: 720px; margin: 0 auto var(--sp-3); padding: 10px var(--sp-4);
  background: var(--accent-soft); border-left: 2px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0; font-size: 13px;
}
.recall b { color: var(--accent); font-weight: 600; }
.recall ul { margin: 6px 0 0; padding-left: var(--sp-5); }
.recall .sc { color: var(--muted); font-variant-numeric: tabular-nums; }

.stats {
  max-width: 720px; margin: -8px auto 18px; font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

form {
  display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5) 18px;
  border-top: 1px solid var(--line); background: var(--panel);
}
form .inner { display: flex; gap: var(--sp-2); max-width: 720px; margin: 0 auto; width: 100%; }

aside {
  border-left: 1px solid var(--line); background: var(--panel);
  overflow-y: auto; padding: var(--sp-4);
}
aside h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 0 0 var(--sp-1);
}
aside .sub { font-size: 12px; color: var(--muted); margin-bottom: var(--sp-3); }
aside .tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
aside .tools button {
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  font-size: 12px; padding: 6px 10px;
}

.fact {
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.fact.expired { opacity: .45; }
.fact .row {
  display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-1);
  font-size: 11.5px; color: var(--muted);
}
.fact .kind {
  background: var(--accent-soft); color: var(--accent);
  padding: 1px 6px; border-radius: var(--r-sm);
}
.fact .x { margin-left: auto; cursor: pointer; color: var(--muted); }
.fact .x:hover { color: var(--bad); }
.empty { color: var(--muted); font-size: 13px; font-style: italic; }

/* Chế độ lái xe — màn hình riêng chứ không phải giao diện thường thu nhỏ lại:
   trong xe, mọi thứ trừ một nút duy nhất đều là thứ gây xao nhãng. */
#car {
  position: fixed; inset: 0; z-index: 50; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-6);
  background: #060f1f; color: #e6edf7; padding: 24px; text-align: center;
}
#car.on { display: flex; }
#car .status {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #8fa0bb;
}
#car .heard { font-size: 20px; color: #8fa0bb; max-width: 640px; min-height: 28px; }
#car .said {
  font-size: 27px; line-height: 1.45; max-width: 680px; min-height: 40px;
  overflow-y: auto; max-height: 34vh;
}
#car .exit {
  position: absolute; top: 18px; right: var(--sp-5);
  background: transparent; border: 1px solid #1d2a3f; color: #8fa0bb;
}
#car .warn { color: var(--accent); font-size: 14px; max-width: 560px; }

/* Nút to và tròn: trong xe người ta bấm bằng ngoại vi mắt, không nhắm được. */
#orb {
  width: 148px; height: 148px; border-radius: 50%; border: 0; cursor: pointer;
  background: #16223a; color: #e6edf7; font-size: 16px; font-weight: 600;
  transition: transform .16s, background .25s; flex: none;
}
#orb:active { transform: scale(.96); }
#orb.listening { background: linear-gradient(135deg, var(--accent), var(--accent-2));
                 animation: pulse 1.5s ease-in-out infinite; }
#orb.thinking  { background: #1d2a3f; }
#orb.speaking  { background: #2f6b41; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0    rgba(0, 96, 240, .55); }
  50%      { box-shadow: 0 0 0 26px rgba(0, 96, 240, 0); }
}
@media (prefers-reduced-motion: reduce) { #orb.listening { animation: none; } }

/* ── 4. Bố cục ───────────────────────────────────────────────────────────── */

main { display: grid; grid-template-columns: 1fr 340px; height: calc(100vh - 53px); }
main > section { display: flex; flex-direction: column; min-height: 0; }

#panelBtn { display: none; }

/* ── 5. Màn hình hẹp — PHẢI nằm cuối tệp ─────────────────────────────────────
   Khối này ghi đè textarea, form .inner và aside. CSS cùng độ ưu tiên thì cái
   đứng sau thắng, nên đặt lên trên là nó không có tác dụng gì.

   Bốn chỗ hỏng đã đo được trên iPhone thật, cả bốn đều làm giao diện trông
   "mờ, không bấm được":
     1. Chuỗi chẩn đoán ở thanh tiêu đề dài hơn màn hình, đẩy droplist ra ngoài.
     2. Ô soạn bị bốn cái nút ép còn 83px.
     3. 100vh của Safari iOS KHÔNG trừ thanh công cụ dưới, nên ô soạn nằm dưới
        vùng nhìn — thấy mà không chạm tới.
     4. Cột phải bị ẩn hẳn, mà nút "Lái xe" nằm trong đó.
   ------------------------------------------------------------------------- */

@media (max-width: 860px) {
  /* Bỏ height: calc(100vh - 53px). Con số 53 là chiều cao thanh tiêu đề trên
     màn hình rộng; ở đây thanh tiêu đề xuống dòng nên nó sai. Dùng flex để
     không phải đoán chiều cao gì cả. */
  body { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
  header { flex: none; flex-wrap: wrap; padding: 10px 14px; gap: var(--sp-2); row-gap: 6px; }
  main { flex: 1; min-height: 0; height: auto; grid-template-columns: 1fr; }

  header .meta { display: none; }          /* chẩn đoán — để dành ở /api/health */
  header .tok { margin-left: auto; }
  #panelBtn { display: inline-block; padding: var(--sp-1) 10px; font-size: 13px; }

  /* Cột phải thành tấm phụ, mở bằng nút trên thanh tiêu đề.
     Đóng = display:none, KHÔNG phải trượt ra ngoài bằng transform hay right âm.
     Hai cách kia phụ thuộc vào "khối chứa" của position:fixed là đúng bằng vùng
     nhìn — đúng trên điện thoại thật, nhưng không kiểm chứng được bằng công cụ
     đang có. display:none thì không thể hiểu nhầm: ẩn là ẩn. */
  aside {
    position: fixed; top: 0; bottom: 0; right: 0; width: min(88vw, 340px);
    z-index: 40; box-shadow: -12px 0 32px rgba(0, 0, 0, .18); overflow-y: auto;
  }
  aside[data-open="0"] { display: none; }

  #chat { padding: 14px; }
  form { padding: var(--sp-2) var(--sp-3) calc(10px + env(safe-area-inset-bottom)); }
  form .inner { flex-wrap: wrap; }
  /* 16px là ngưỡng: dưới mức đó Safari iOS tự phóng to cả trang khi bấm vào ô
     nhập, và người dùng phải chụm tay thu nhỏ lại sau mỗi lần gõ. */
  textarea { flex: 1 1 100%; font-size: 16px; min-height: 46px; }
  form .inner button { flex: 1 1 0; padding: 11px 0; min-height: 44px; }
}