/* =========================================================================
   App TTS — style theo "Tiêu chuẩn thiết kế UI/UX v1.1" (IOC Dashboard).
   Mọi màu qua var(--token), khai báo đủ ở :root (Tối) và body.light (Sáng).
   Không web font ngoài, không thư viện CSS.
   ========================================================================= */
:root{
  /* --- Bề mặt & văn bản (Mục 2.1) --- */
  --bg:#0a0f1a; --panel:#0f1626; --panel2:#0c1220; --border:#1b2740; --border2:#2b3c63;
  --text:#e8eefb; --muted:#93a7cc; --dim:#7e90b4;
  /* --- Màu ngữ nghĩa + nền lót wash (Mục 2.2) --- */
  --accent:#38bdf8; --danger:#ff4d4f; --warn:#f5a524; --ok:#2fd575; --off:#8d9cbd;
  --accent-bg:rgba(56,189,248,.12); --danger-bg:rgba(255,77,79,.12);
  --warn-bg:rgba(245,165,36,.12);   --ok-bg:rgba(47,213,117,.12);
  /* --- Mực chữ trên nền đặc (Mục 2.2 / 2.7) --- */
  --accent-ink:#04141f;  /* ~9,3:1 trên --accent tối — đạt AA */
  --on-solid:#ffffff;    /* nhóm "luôn tối": trắng cho mọi chủ đề */
  /* --- Thương hiệu (mark gradient, không đổi theo chủ đề) --- */
  --brand1:#0ea5e9; --brand2:#2563eb;
  /* --- Thang bo góc (Mục 4.1) --- */
  --r0:3px; --r1:6px; --r2:8px; --r3:10px; --r4:14px;
}
body.light{
  --bg:#eef2f8; --panel:#ffffff; --panel2:#f4f7fc; --border:#dde5f1; --border2:#b7c6de;
  --text:#17233c; --muted:#4a5d80; --dim:#5b6d90;
  --accent:#0270ad; --danger:#c81e1e; --warn:#b45309; --ok:#15803d; --off:#64748b;
  --accent-bg:rgba(2,112,173,.1); --danger-bg:rgba(220,38,38,.09);
  --warn-bg:rgba(217,119,6,.1);    --ok-bg:rgba(21,128,61,.1);
  --accent-ink:#ffffff;  /* ~4,8:1 trên --accent sáng (#0270AD) — đạt AA */
}

*{box-sizing:border-box; margin:0; padding:0;}
/* Nhãn chỉ dành cho trình đọc màn hình (Mục 10.2) */
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
/* Gốc cỡ chữ linh hoạt theo chiều rộng vật lý màn hình (Mục 3.2) */
html{font-size:clamp(13px,0.68vw,22px);}

/* Ghi chú deviation có chủ đích: đây là app biểu mẫu thông thường, KHÔNG phải
   bảng điều khiển treo tường — nên không áp min-width:1280px và cho phép trang
   cuộn dọc bình thường (khác quy tắc "một màn hình, không cuộn" ở Mục 5.2). */
body{min-height:100vh; background:var(--bg); color:var(--text);
  font-family:"Segoe UI",Roboto,Arial,sans-serif; font-size:1rem; line-height:1.45;
  display:flex; justify-content:center; padding:2rem 1rem;
  background-image:
    radial-gradient(1200px 500px at 15% -10%, var(--accent-bg), transparent 60%),
    radial-gradient(1000px 600px at 110% 120%, var(--accent-bg), transparent 55%);
  background-attachment:fixed;
  transition:background .2s,color .2s;}
button{font-family:inherit; cursor:pointer; color:inherit;}
textarea,input,select{font-family:inherit;}
/* Outline focus toàn cục — không được ghi đè mất (Mục 10.2) */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r1);}
.ico{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-0.18em; flex:none;}
/* Thanh cuộn mảnh 8px (Mục 4.4) */
::-webkit-scrollbar{height:8px; width:8px;}
::-webkit-scrollbar-thumb{background:var(--border2); border-radius:5px;}
::-webkit-scrollbar-track{background:var(--panel2);}

.container{width:100%; max-width:44rem;}

/* --- Thanh trên cùng: thương hiệu + tài khoản + hành động --- */
.topbar{display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem;}
.mark{width:2.5rem; height:2.5rem; border-radius:var(--r2); flex:none;
  background:linear-gradient(135deg,var(--brand1),var(--brand2)); color:var(--on-solid);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.05rem; letter-spacing:.5px;}
.brand-txt h1{font-size:1.05rem; font-weight:700; letter-spacing:.4px; line-height:1.15;}
.brand-txt .sub{font-size:0.8rem; color:var(--muted); line-height:1.3;}
.topbar-actions{margin-left:auto; display:flex; align-items:center; gap:8px;}
.user-chip{display:inline-flex; align-items:center; gap:6px; font-size:0.8rem; color:var(--muted);
  background:var(--panel2); border:1px solid var(--border); border-radius:var(--r4); padding:0.3rem 0.7rem;}
.user-chip strong{color:var(--text); font-weight:700;}
/* Nút phụ trong thanh trên (Mục 6.1: mỗi ngữ cảnh một class nút riêng) */
.hbtn{border:1px solid var(--border2); background:var(--panel2); color:var(--muted);
  border-radius:var(--r2); padding:0.4rem 0.7rem; font-size:0.875rem;
  display:inline-flex; align-items:center; gap:6px;}
.hbtn:hover{color:var(--accent); border-color:var(--accent);}

/* --- Card: nền panel + viền 1px + --r3, KHÔNG box-shadow (Mục 4.3) --- */
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--r3);
  padding:1rem 1.1rem 1.2rem; margin-bottom:0.75rem;}
.card h2{font-size:0.8rem; text-transform:uppercase; letter-spacing:0.8px; color:var(--muted);
  margin-bottom:0.7rem; display:flex; align-items:center; gap:8px;}
.card h2::before{content:''; width:3px; height:0.9rem; border-radius:var(--r0); background:var(--accent);}
.card > .hint:first-of-type{margin-top:-0.35rem; margin-bottom:0.8rem;}

/* --- Nhãn & ô nhập liệu --- */
/* 0.875rem = cỡ mặc định thực tế của hệ (Mục 3.3) — 0.72rem chỉ dành cho
   "nhãn siêu nhỏ" trên dashboard treo tường, quá nhỏ cho biểu mẫu nhìn gần. */
label{display:block; font-size:0.875rem; text-transform:uppercase; letter-spacing:0.5px;
  font-weight:600; color:var(--muted); margin-bottom:0.35rem;}
.field{margin-bottom:0.9rem;}
textarea,select{width:100%; background:var(--panel2); border:1px solid var(--border2);
  border-radius:var(--r2); color:var(--text); font-size:0.925rem; line-height:1.45;
  padding:0.6rem 0.75rem; transition:border-color .12s;}
textarea{resize:vertical; min-height:7rem;}
textarea::placeholder{color:var(--dim);}
textarea:focus,select:focus{border-color:var(--accent);}
select option{background:var(--panel); color:var(--text);}

.char-count{text-align:right; font-size:0.8rem; color:var(--dim); margin-top:0.25rem;
  font-variant-numeric:tabular-nums;}
.hint{font-size:0.8rem; color:var(--dim); line-height:1.5; margin-top:0.3rem;}

/* --- Nút hành động chính (Mục 6.1) --- */
.btn-row{display:flex; gap:0.6rem; margin-top:1.1rem;}
.pbtn,.sbtn{flex:1; border-radius:var(--r2); font-size:0.925rem; font-weight:700;
  padding:0.66rem 0.8rem; border:1px solid transparent; transition:filter .12s,border-color .12s,background .12s;}
.pbtn{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.pbtn:hover:not(:disabled){filter:brightness(1.06);}
.sbtn{background:var(--panel2); color:var(--accent); border-color:var(--border2);}
.sbtn:hover:not(:disabled){border-color:var(--accent);}
.pbtn:disabled,.sbtn:disabled{opacity:.55; cursor:not-allowed; filter:none;}

/* --- Khối trạng thái (dùng nền lót wash + viền cùng màu ngữ nghĩa) --- */
.status-box{margin-top:0.9rem; padding:0.7rem 0.85rem; border-radius:var(--r2);
  font-size:0.875rem; line-height:1.45; border:1px solid transparent;}
.status-box.hidden{display:none;}
.status-box.loading{background:var(--accent-bg); border-color:var(--accent); color:var(--accent);}
.status-box.success{background:var(--ok-bg);     border-color:var(--ok);     color:var(--ok);}
.status-box.error{background:var(--danger-bg);   border-color:var(--danger); color:var(--danger);}
.status-box code{background:var(--panel2); color:var(--text); border:1px solid var(--border);
  border-radius:var(--r0); padding:0.1rem 0.35rem; font-family:inherit; font-variant-numeric:tabular-nums;}
.status-box audio{width:100%; margin-top:0.5rem;}

/* --- Lịch sử audio: mẫu "hàng dữ liệu" lặp lại (Mục 6.3) --- */
.history-list{display:flex; flex-direction:column; gap:0.5rem; max-height:30rem; overflow-y:auto;}
.history-item{background:var(--panel2); border:1px solid var(--border); border-radius:var(--r2); padding:0.65rem 0.75rem;}
.history-item .history-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-size:0.8rem; color:var(--dim); margin-bottom:0.4rem; font-variant-numeric:tabular-nums;}
/* Badge: viền + nền lót theo màu ngữ nghĩa (Mục 6.2) */
.history-item .badge{background:var(--panel); border:1px solid var(--border); color:var(--muted);
  border-radius:var(--r0); padding:0.1rem 0.4rem;}
.history-item .badge.call{background:var(--ok-bg); border-color:var(--ok); color:var(--ok); font-weight:700;}
.history-item .history-text{font-size:0.875rem; color:var(--text); line-height:1.5; margin-bottom:0.5rem;}
.history-item audio{width:100%; height:2.2rem;}