/* =====================================================================
   ATLAS · หน้าตาแอป
   แนวคิด: ตามโลโก้ของเจ้าของ (ตัว A เงินโลหะ + โลกเรืองแสงฟ้า + วงแหวน)
   ฟอนต์เก็บในเครื่อง (OFL) ไม่โหลดจากที่อื่น
   ===================================================================== */

@font-face { font-family: "Chakra Petch"; font-weight: 500; font-display: swap;
  src: url(../fonts/chakra-petch-thai-500-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Chakra Petch"; font-weight: 500; font-display: swap;
  src: url(../fonts/chakra-petch-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Chakra Petch"; font-weight: 600; font-display: swap;
  src: url(../fonts/chakra-petch-thai-600-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Chakra Petch"; font-weight: 600; font-display: swap;
  src: url(../fonts/chakra-petch-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Plex Thai"; font-weight: 400; font-display: swap;
  src: url(../fonts/ibm-plex-sans-thai-thai-400-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Plex Thai"; font-weight: 400; font-display: swap;
  src: url(../fonts/ibm-plex-sans-thai-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Plex Thai"; font-weight: 500; font-display: swap;
  src: url(../fonts/ibm-plex-sans-thai-thai-500-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Plex Thai"; font-weight: 500; font-display: swap;
  src: url(../fonts/ibm-plex-sans-thai-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }

:root {
  /* สีจากโลโก้ ATLAS ของเจ้าของ: ดำอวกาศ · เงินโลหะ · ฟ้าไฟฟ้า */
  --ink: #03060f;        /* อวกาศ */
  --ink-2: #081226;      /* แผง */
  --ink-3: #0e1c38;      /* ช่องกรอก/ฟองข้อความ */
  --line: #1a2c52;
  --text: #e4eaf4;       /* เงินโลหะ */
  --muted: #8c9ab3;
  --aurora: #2f8bff;     /* สีหลัก: ฟ้าไฟฟ้าของวงแหวนโลก */
  --brass: #d9a95b;      /* ทองเหลือง: ใช้บอกสถานะ "รอยืนยัน 2 ชั้น" */
  --danger: #ff7b8a;
  --display: "Chakra Petch", "Plex Thai", system-ui, sans-serif;
  --body: "Plex Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background:
    radial-gradient(900px 600px at 28% 45%, rgba(47, 139, 255, 0.16) 0%, transparent 65%),
    var(--ink);
  color: var(--text);
  font: 400 16px/1.6 var(--body);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }

h1, h2 { font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: 0.01em; }
h1 { font-size: 1.75rem; line-height: 1.2; }
h2 { font-size: 1.2rem; }
.hint { color: var(--muted); margin: 0; font-size: 0.95rem; }
.error { color: var(--danger); margin: 0; font-size: 0.92rem; }
.error:empty { display: none; }

/* ---------- ปุ่ม / ช่องกรอก ---------- */
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; border-radius: 6px; padding: 0.7rem 1.1rem; }
button:disabled { opacity: 0.5; cursor: default; }
button.primary {
  background: linear-gradient(180deg, #4b9bff, #1f6fe0); color: #fff;
  font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em;
  transition: box-shadow 0.2s, transform 0.1s;
}
button.primary:hover:not(:disabled) { box-shadow: 0 0 0 1px var(--aurora), 0 0 28px rgba(47, 139, 255, 0.35); }
button.primary:active:not(:disabled) { transform: translateY(1px); }
button.ghost { border: 1px solid var(--line); color: var(--muted); }
button.ghost:hover { color: var(--text); border-color: var(--muted); }
button.link { padding: 0.3rem 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; justify-self: start; }
button.link:hover { color: var(--text); }
button.block { width: 100%; }
button.icon-btn { padding: 0.45rem 0.6rem; font-size: 1.15rem; line-height: 1; color: var(--muted); }
:focus-visible { outline: 2px solid var(--aurora); outline-offset: 2px; }

input, textarea {
  width: 100%; background: var(--ink-3); border: 1px solid var(--line); border-radius: 6px;
  padding: 0.75rem 0.85rem; transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, textarea:focus { outline: none; border-color: var(--aurora); box-shadow: 0 0 0 3px rgba(47, 139, 255, 0.15); }
input.code {
  text-align: center; font-family: var(--display); font-weight: 600; font-size: 1.9rem;
  letter-spacing: 0.55em; padding-left: calc(0.85rem + 0.55em); font-variant-numeric: tabular-nums;
}
.field { display: grid; gap: 0.35rem; font-size: 0.9rem; color: var(--muted); }

/* =====================================================================
   ประตูเข้า
   ===================================================================== */
/* ภาพพื้นหลังของเจ้าของ (โลโก้อยู่ด้านบนของภาพ) วางกลางจอ ขอบซ้ายขวาจางเข้าสีอวกาศ */
.gate {
  --art-h: max(100vh, 760px);
  --logo-y: calc(var(--art-h) * 0.118);   /* จุดกลางโลกในโลโก้ */
  --logo-d: calc(var(--art-h) * 0.33);    /* ขนาดวงแหวน HUD รอบโลโก้ */
  position: relative;
  min-height: 100%;
  display: grid;
  justify-items: center;
  align-content: start;
  padding: calc(var(--art-h) * 0.305) 16px 32px;
  padding-top: calc(var(--art-h) * 0.305 + env(safe-area-inset-top));
  overflow: hidden;
  isolation: isolate;
}
.gate::before {
  content: "";
  position: absolute; top: 0; left: 50%; z-index: -2;
  width: calc(var(--art-h) * 0.948); height: var(--art-h);
  transform: translateX(-50%);
  background: url(../img/atlas-bg-mobile.webp) top center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  opacity: 0; animation: ignite 1.6s cubic-bezier(.2,.7,.2,1) 0.1s forwards;
  pointer-events: none;
}
/* ตารางพิกัดจางๆ ทั้งจอ */
.gate::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(47, 139, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 139, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 55%, #000 0%, transparent 70%);
          mask-image: radial-gradient(ellipse at 50% 55%, #000 0%, transparent 70%);
}

/* วงแหวน HUD หมุนรอบโลโก้ */
.orbit { position: absolute; z-index: -1; left: 50%; top: var(--logo-y); width: var(--logo-d); height: var(--logo-d);
  transform: translate(-50%, -50%); pointer-events: none; opacity: 0; animation: fadein 1s 0.9s forwards;
  filter: drop-shadow(0 0 6px rgba(47, 139, 255, 0.8)); }
.orbit svg { width: 100%; height: 100%; overflow: visible; }
.orbit g { transform-origin: 0 0; }
.orbit .dash { fill: none; stroke: rgba(120, 180, 255, 0.55); stroke-width: 0.6; stroke-dasharray: 1.5 4; }
.orbit .arc { fill: none; stroke: #4b9bff; stroke-width: 2; stroke-linecap: round; }
.orbit .arc.thin { stroke-width: 0.8; stroke: rgba(150, 200, 255, 0.9); }
.orbit .ticks { fill: none; stroke: rgba(120, 180, 255, 0.45); stroke-width: 3; stroke-dasharray: 0.5 7.45; }
.orbit .nub { fill: #9cc6ff; }
.orbit .o1 { animation: spin 60s linear infinite; }
.orbit .o2 { animation: spin 14s linear infinite reverse; }
.orbit .o3 { animation: spin 40s linear infinite; }
.orbit .o4 { animation: spin 9s linear infinite; }

/* เส้นสแกนกวาดลงช้าๆ */
.scan { position: absolute; left: 0; right: 0; top: 0; height: 70px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(47, 139, 255, 0.04) 80%, rgba(120, 190, 255, 0.22) 100%);
  animation: sweep 7s cubic-bezier(.45,0,.55,1) 2.2s infinite; opacity: 0; }

/* แผงข้อมูลด้านข้าง (จอกว้างเท่านั้น) */
.readout { position: absolute; top: 50%; transform: translateY(-50%); display: none; font-family: var(--display); color: #8fb8ff;
  opacity: 0; animation: fadein 1s 2.4s forwards; }
.readout.left { left: clamp(24px, 5vw, 80px); }
.readout.right { right: clamp(24px, 5vw, 80px); text-align: right; }
.readout .clock { font-size: 3.2rem; font-weight: 500; color: var(--text); letter-spacing: 0.06em; line-height: 1; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(47, 139, 255, 0.6); }
.readout .date { margin-top: 0.4rem; color: var(--muted); font-size: 0.95rem; }
.readout dl { margin: 0; display: grid; gap: 0.15rem 0; }
.readout dt { color: var(--muted); font-size: 0.8rem; }
.readout dd { margin: 0 0 0.6rem; font-size: 1.05rem; color: var(--text); }
.readout dd.ok { color: #5fd3a0; }
@media (min-width: 1100px) { .readout { display: block; } }

/* ลำดับบูตระบบ: 3 บรรทัดขึ้นทีละบรรทัด แล้วแผงยืนยันตัวตนปรากฏ */
.panel { display: grid; gap: 0.9rem; width: min(420px, 100%); }
.boot { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; font-family: var(--display); font-size: 0.82rem; color: #8fb8ff; }
.boot li { opacity: 0; display: flex; align-items: center; gap: 0.5rem; animation: bootline 0.5s forwards; }
.boot li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4b9bff; box-shadow: 0 0 8px #4b9bff; }
.boot li::after { content: "พร้อม"; margin-left: auto; color: #5fd3a0; font-size: 0.75rem; opacity: 0; animation: fadein 0.3s forwards; }
.boot li:nth-child(1) { animation-delay: 0.5s; } .boot li:nth-child(1)::after { animation-delay: 0.85s; }
.boot li:nth-child(2) { animation-delay: 0.9s; } .boot li:nth-child(2)::after { animation-delay: 1.25s; }
.boot li:nth-child(3) { animation-delay: 1.3s; } .boot li:nth-child(3)::after { animation-delay: 1.65s; content: "ออนไลน์"; }

/* แผงโฮโลแกรม: มุมตัดเฉียง ขอบเรืองแสง */
.step {
  --cut: 18px;
  position: relative; display: grid; gap: 1.05rem; padding: 1.6rem 1.5rem 1.4rem;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background: linear-gradient(135deg, #4b9bff 0%, rgba(47, 139, 255, 0.15) 35%, rgba(47, 139, 255, 0.1) 65%, #4b9bff 100%);
  opacity: 0; animation: materialize 0.7s cubic-bezier(.2,.8,.2,1) 1.7s forwards;
}
.step::before {
  content: ""; position: absolute; inset: 1px; z-index: 0;
  clip-path: polygon(calc(var(--cut) - 0.5px) 0, 100% 0, 100% calc(100% - var(--cut) + 0.5px), calc(100% - var(--cut) + 0.5px) 100%, 0 100%, 0 calc(var(--cut) - 0.5px));
  background:
    repeating-linear-gradient(0deg, rgba(120, 180, 255, 0.035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(10, 22, 48, 0.92), rgba(4, 10, 24, 0.94));
}
.step > * { position: relative; z-index: 1; }
.step-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.2rem; border-bottom: 1px solid rgba(47, 139, 255, 0.25); }
.step-head h1 { font-size: 1.45rem; letter-spacing: 0.04em; }
.lock { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(75, 155, 255, 0.6); position: relative; flex: none;
  box-shadow: inset 0 0 12px rgba(47, 139, 255, 0.35); }
.lock::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #4b9bff; box-shadow: 0 0 12px #4b9bff; animation: pulse 2.4s ease-in-out infinite; }

/* ช่องกรอกแบบ HUD: เส้นล่างเรืองแสง ป้ายชื่อลอยขึ้นเมื่อพิมพ์ */
.hud-field { position: relative; display: block; }
.hud-field input {
  background: rgba(47, 139, 255, 0.05); border: 0; border-bottom: 1px solid rgba(120, 170, 255, 0.35); border-radius: 0;
  padding: 1.35rem 0.8rem 0.45rem; font-size: 1.02rem; letter-spacing: 0.01em;
}
.hud-field span { position: absolute; left: 0.8rem; top: 0.95rem; color: var(--muted); pointer-events: none;
  transition: transform 0.18s, color 0.18s, font-size 0.18s; transform-origin: left top; }
.hud-field input:focus + span, .hud-field input:not(:placeholder-shown) + span { transform: translateY(-0.7rem) scale(0.78); color: #8fb8ff; }
.hud-field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #4b9bff;
  box-shadow: 0 0 12px #4b9bff; transform: scaleX(0); transition: transform 0.25s; }
.hud-field:focus-within::after { transform: scaleX(1); }
.hud-field input:focus { box-shadow: none; background: rgba(47, 139, 255, 0.09); }

/* ปุ่มหลักแบบมุมตัด + แสงวิ่งผ่าน */
.hud-btn { position: relative; overflow: hidden; padding: 0.9rem 1rem; font-size: 1.08rem; letter-spacing: 0.08em; border-radius: 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.hud-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-20deg); }
.hud-btn:hover::after, .hud-btn:focus-visible::after { animation: shine 0.8s ease-out; }
.hud-btn:disabled span::after { content: " …"; }

.secure { display: flex; align-items: center; justify-content: center; gap: 0.55rem; color: var(--muted); font-size: 0.82rem; margin: 0;
  opacity: 0; animation: fadein 0.6s 2.2s forwards; }
.secure .dot { width: 7px; height: 7px; border-radius: 50%; background: #5fd3a0; box-shadow: 0 0 10px #5fd3a0; flex: none; animation: pulse 2.4s ease-in-out infinite; }
#greeting { color: var(--text); }

/* รอยืนยัน 2 ชั้น: ทุกอย่างเปลี่ยนเป็นทองเหลือง */
body[data-state="screen-mfa"] .gate::before, body[data-state="screen-mfa-setup"] .gate::before { filter: sepia(0.4) hue-rotate(-14deg) saturate(1.2); transition: filter 0.8s; }
body[data-state="screen-mfa"] .orbit, body[data-state="screen-mfa-setup"] .orbit { filter: drop-shadow(0 0 6px rgba(217, 169, 91, 0.9)) hue-rotate(185deg) saturate(1.4); }
body[data-state="screen-mfa"] .step, body[data-state="screen-mfa-setup"] .step { background: linear-gradient(135deg, var(--brass), rgba(217, 169, 91, 0.12) 35%, rgba(217, 169, 91, 0.08) 65%, var(--brass)); }
body[data-state="screen-mfa"] .lock::after, body[data-state="screen-mfa-setup"] .lock::after { background: var(--brass); box-shadow: 0 0 12px var(--brass); }
/* เมื่อกลับมาหน้าเดิมภายหลัง ไม่ต้องเล่นลำดับบูตซ้ำ */
body.booted .step, body.booted .secure { animation: none; opacity: 1; }
body.booted .boot { display: none; }

@keyframes ignite { from { opacity: 0; filter: brightness(0.25) blur(2px); } to { opacity: 1; filter: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadein { to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bootline { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes materialize {
  0% { opacity: 0; transform: scaleY(0.02); filter: brightness(3); }
  45% { opacity: 1; transform: scaleY(1); filter: brightness(1.8); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes sweep { 0% { transform: translateY(-120px); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes shine { to { left: 120%; } }

/* =====================================================================
   แอปหลัก
   ===================================================================== */
.app { height: 100%; display: grid; grid-template-columns: 290px minmax(0, 1fr); grid-template-rows: auto 1fr; }
.topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 16px;
  padding-top: max(0.55rem, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: rgba(6, 11, 26, 0.85); }
.brand { flex: 1; display: flex; align-items: center; gap: 0.6rem; font-family: var(--display); font-weight: 600; letter-spacing: 0.3em; }
.badge { font-family: var(--body); font-size: 0.72rem; letter-spacing: 0; font-weight: 500; color: var(--brass);
  border: 1px solid rgba(217, 169, 91, 0.5); padding: 0.05rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.chip { font-size: 0.8rem; color: var(--muted); border: 1px solid var(--line); padding: 0.2rem 0.65rem; border-radius: 999px; white-space: nowrap; }
.chip:empty { display: none; }
.chip.off { color: var(--danger); border-color: var(--danger); }
.icon-btn.toggle[aria-pressed="true"] { color: var(--aurora); }
#menu-btn { display: none; }

.drawer { background: rgba(11, 20, 48, 0.6); border-right: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 0.7rem; min-height: 0; }
.conv-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; display: grid; align-content: start; gap: 2px; }
.conv-list li { display: flex; align-items: center; border-radius: 6px; border-left: 2px solid transparent; }
.conv-list li:hover { background: rgba(18, 32, 74, 0.6); }
.conv-list li.active { background: var(--ink-3); border-left-color: var(--aurora); }
.conv-list .conv { flex: 1; min-width: 0; text-align: left; display: grid; padding: 0.5rem 0.65rem; border-radius: 6px; }
.conv-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-list .muted, .who { color: var(--muted); font-size: 0.8rem; }
.conv-list .del { opacity: 0.4; font-size: 0.95rem; }
.conv-list .del:hover { opacity: 1; }
.drawer-foot { display: grid; gap: 0.5rem; border-top: 1px solid var(--line); padding-top: 0.7rem; }
.voice-pick { display: grid; gap: 0.3rem; font-size: 0.82rem; color: var(--muted); }
.voice-pick .row-tight { display: flex; gap: 0.4rem; }
.voice-pick select { flex: 1; min-width: 0; font: inherit; font-size: 0.9rem; color: var(--text); background: var(--ink-3); border: 1px solid var(--line); border-radius: 6px; padding: 0.5rem; }
.voice-pick button { padding: 0.45rem 0.8rem; }
.voice-pick .tiny { margin: 0; font-size: 0.75rem; line-height: 1.45; }
.voice-pick .tiny:empty { display: none; }
.scrim { display: none; }

.chat { display: grid; grid-template-rows: 1fr auto auto; min-height: 0;
  /* ภาพของเจ้าของจางๆ เป็นฉากหลังห้องแชต */
  background: linear-gradient(rgba(3, 6, 15, 0.86), rgba(3, 6, 15, 0.86)), url(../img/atlas-bg-mobile.webp) center bottom / cover no-repeat; }
.messages { overflow-y: auto; padding: 20px 16px; display: flex; flex-direction: column; gap: 0.7rem; }
.empty { margin: auto; text-align: center; display: grid; gap: 0.45rem; justify-items: center; max-width: 380px; }
.empty p { margin: 0; }
.empty-title { font-family: var(--display); font-weight: 600; font-size: 1.3rem; }
.sos { font-size: 0.82rem; color: var(--brass); margin-top: 0.6rem !important; }

.msg { max-width: min(680px, 85%); padding: 0.65rem 0.95rem; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.msg.user { align-self: flex-end; background: #1f6fe0; color: #fff; border-radius: 14px 14px 4px 14px; font-weight: 500; }
.msg.assistant { align-self: flex-start; background: var(--ink-3); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; position: relative; }
.msg.assistant::before { content: ""; position: absolute; left: -1px; top: -1px; width: 10px; height: 10px; border: solid var(--aurora); border-width: 2px 0 0 2px; }
.msg.pending { color: var(--muted); }
.msg.failed { border-color: var(--danger); color: var(--danger); }

.composer { display: flex; gap: 0.5rem; align-items: flex-end; padding: 0.65rem 16px;
  padding-bottom: max(0.65rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(6, 11, 26, 0.85); }
.composer textarea { resize: none; max-height: 160px; }
.composer .send { padding: 0.75rem 1.1rem; }
.mic { flex: none; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); }
.mic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mic:hover { color: var(--text); border-color: var(--muted); }
.mic[aria-pressed="true"] { color: #fff; background: var(--aurora); border-color: var(--aurora); animation: listen 1.4s ease-out infinite; }
@keyframes listen { 0% { box-shadow: 0 0 0 0 rgba(47, 139, 255, 0.5); } 100% { box-shadow: 0 0 0 16px rgba(47, 139, 255, 0); } }
/* โหมดเสียงเป็นหลัก: ไมค์ใหญ่กลางจอ · ซ่อนช่องพิมพ์ */
.composer.voice-mode { justify-content: space-between; align-items: center; padding-top: 0.9rem; padding-left: 24px; padding-right: 24px; }
.composer.voice-mode textarea, .composer.voice-mode .send { display: none; }
.composer.voice-mode .mic { width: 78px; height: 78px; background: linear-gradient(180deg, #4b9bff, #1f6fe0); color: #fff; border: 0;
  box-shadow: 0 0 0 6px rgba(47, 139, 255, 0.12), 0 0 32px rgba(47, 139, 255, 0.35); }
.composer.voice-mode .mic svg { width: 32px; height: 32px; }
.composer:not(.voice-mode) .wake { display: none; }
.side-btn { display: grid; justify-items: center; gap: 0.2rem; min-width: 68px; padding: 0.35rem 0.4rem; color: var(--muted); font-size: 0.78rem; border-radius: 10px; }
.side-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.side-btn .wake-dot, .side-btn circle { fill: currentColor; }
.side-btn:hover { color: var(--text); }
.side-btn[aria-pressed="true"] { color: var(--aurora); background: rgba(47, 139, 255, 0.1); }
body.waking .composer.voice-mode .mic { animation: listen 2.2s ease-out infinite; }
.empty .atlas-core { margin-bottom: 0.6rem; }
.voice-status { margin: 0; padding: 0.4rem 16px; color: var(--aurora); font-size: 0.9rem; text-align: center; }

@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .chat, .topbar { min-width: 0; }
  .brand { letter-spacing: 0.18em; min-width: 0; }
  .chip { font-size: 0.72rem; padding: 0.15rem 0.5rem; }
  #menu-btn { display: inline-block; }
  .drawer { position: fixed; inset: 0 auto 0 0; width: min(300px, 85vw); z-index: 20; background: var(--ink-2);
    transform: translateX(-100%); transition: transform 0.2s ease; padding-top: max(14px, env(safe-area-inset-top)); }
  .drawer.open { transform: none; }
  .scrim { display: block; position: fixed; inset: 0; background: rgba(3, 6, 14, 0.6); z-index: 10; }
  .msg { max-width: 88%; }
}

/* =====================================================================
   แกนมีชีวิต (js/core.js): จุดแสงวิ่งรอบวงแหวน · ดาวประกายกระพริบ · คลื่นแสงตามสถานะ
   ===================================================================== */
.atlas-core { position: relative; width: var(--core, 160px); aspect-ratio: 1; flex: none; border-radius: 22%; }
.atlas-core > img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; display: block; }
.atlas-core .core-fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.atlas-core::before { content: ""; position: absolute; inset: -12%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(47, 139, 255, 0.45), transparent 70%); opacity: 0.35; transition: opacity 0.4s; }
.atlas-core.xl { --core: clamp(150px, 34vw, 210px); }
.atlas-core.sm { --core: 30px; border-radius: 8px; }
.atlas-core.xs { --core: 22px; border-radius: 6px; }

.core-fx .spark { fill: #e8f3ff; filter: drop-shadow(0 0 1.2px #7fb6ff) drop-shadow(0 0 2.5px #2f8bff); }
.core-fx .spark.tail { fill: #8fc0ff; filter: none; }
.core-fx .ring-glow { fill: none; stroke: rgba(120, 185, 255, 0.0); stroke-width: 1.4; transition: stroke 0.4s; }
.core-fx .fast { display: none; }
.core-fx .flare-in { transform-box: fill-box; transform-origin: center; animation: twinkle 3.2s ease-in-out infinite; }
.core-fx .f1 .flare-in { animation-delay: 1.6s; }
.core-fx .flare ellipse, .core-fx .flare circle { fill: #f2f8ff; filter: drop-shadow(0 0 1.5px #4b9bff); }
.core-fx .ripples circle { fill: none; stroke: #4b9bff; stroke-width: 0.8; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* ฟัง: วงแสงเต้นเบาๆ รอคำสั่ง */
.atlas-core[data-state="listening"]::before { opacity: 0.7; animation: breathe 1.6s ease-in-out infinite; }
.atlas-core[data-state="listening"] .ripples circle { animation: ripple 1.6s ease-out infinite; }
.atlas-core[data-state="listening"] .ripples circle:nth-child(2) { animation-delay: 0.8s; }
/* คิด: จุดแสงวิ่งเร็ว วงแหวนสว่าง โลโก้เรืองเป็นจังหวะ */
.atlas-core[data-state="thinking"] .slow { display: none; }
.atlas-core[data-state="thinking"] .fast { display: inline; }
.atlas-core[data-state="thinking"] .ring-glow { stroke: rgba(120, 185, 255, 0.55); filter: drop-shadow(0 0 2px #2f8bff); animation: glowpulse 0.9s ease-in-out infinite; }
.atlas-core[data-state="thinking"]::before { opacity: 0.9; animation: breathe 0.9s ease-in-out infinite; }
.atlas-core[data-state="thinking"] .flare-in { animation-duration: 0.9s; }
/* พูด: คลื่นแสงกระจายออกรอบโลโก้ */
.atlas-core[data-state="speaking"]::before { opacity: 0.85; animation: breathe 0.55s ease-in-out infinite alternate; }
.atlas-core[data-state="speaking"] .ripples circle { animation: ripple 1.5s ease-out infinite; }
.atlas-core[data-state="speaking"] .ripples circle:nth-child(2) { animation-delay: 0.5s; }
.atlas-core[data-state="speaking"] .ripples circle:nth-child(3) { animation-delay: 1s; }
.atlas-core[data-state="speaking"] .fast { display: inline; }
.atlas-core[data-state="speaking"] .slow { display: none; }

/* โลโก้ขนาดเล็กมาก: แสดงเฉพาะแสงเรือง ไม่ต้องมีจุดเล็กเกินมอง */
.atlas-core.sm .sparks, .atlas-core.xs .sparks, .atlas-core.sm .flares, .atlas-core.xs .flares { display: none !important; }
.atlas-core.sm .ripples circle, .atlas-core.xs .ripples circle { stroke-width: 3; }

/* หน้าเข้าระบบ: วางแกนซ้อนบนโลโก้ในภาพพื้นหลังพอดี */
.login-core { position: absolute; z-index: -1; left: 50%; top: calc(var(--art-h) * 0.137);
  --core: calc(var(--art-h) * 0.215); transform: translate(-50%, -50%); }
.login-core::before { display: none; }

@keyframes twinkle { 0%, 100% { transform: scale(0.55) rotate(0deg); opacity: 0.55; } 45% { transform: scale(1.15) rotate(8deg); opacity: 1; } 60% { transform: scale(0.9); } }
@keyframes ripple { 0% { transform: scale(0.75); opacity: 0.8; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes glowpulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ฟองข้อความรอคำตอบ: แกนเล็ก + ข้อความ */
.msg.pending { display: flex; align-items: center; gap: 0.6rem; }

/* ---------- กล่องตั้ง 2FA ---------- */
.dialog { width: min(420px, calc(100% - 32px)); background: var(--ink-2); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 1.5rem; }
.dialog form { display: grid; gap: 0.9rem; }
.dialog::backdrop { background: rgba(3, 6, 14, 0.7); }
.dialog ol { padding-left: 1.2rem; display: grid; gap: 0.2rem; }
.qr { width: 196px; height: 196px; justify-self: center; background: #fff; border-radius: 6px; padding: 8px; }
.secret { word-break: break-all; font-size: 0.8rem; background: var(--ink-3); padding: 0.45rem 0.6rem; border-radius: 4px; user-select: all; color: var(--muted); }
.row { display: flex; gap: 0.6rem; justify-content: flex-end; }

/* =====================================================================
   ปลุกระบบ · เสียง · เอฟเฟกต์หน้าเข้าระบบ (js/sfx.js · js/fx.js)
   ===================================================================== */
/* ฝุ่นพลังงาน (canvas) อยู่เหนือภาพพื้นหลัง ใต้แผงยืนยันตัวตน */
.gate-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ช่วงพักเครื่อง: ทุกอย่างหยุดรอจนกว่าจะแตะเพื่อเริ่มระบบ */
body.standby .gate::before, body.standby .gate *, body.standby .gate *::before, body.standby .gate *::after { animation-play-state: paused !important; }
body.standby .login-core { opacity: 0.6; }

.engage { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 0.85rem;
  padding: 0; border-radius: 0; color: var(--text); font-family: var(--display);
  background: radial-gradient(circle at 50% 52%, rgba(8, 18, 40, 0.35), rgba(3, 6, 15, 0.82) 72%);
  transition: opacity 0.7s, visibility 0.7s; }
body:not(.standby) .engage { opacity: 0; visibility: hidden; pointer-events: none; }
.engage-ring { position: relative; width: 124px; height: 124px; margin-bottom: 0.4rem; }
.engage-ring i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(120, 180, 255, 0.45); }
.engage-ring i:nth-child(1) { border: 2px solid; border-color: #4b9bff transparent #4b9bff transparent; box-shadow: 0 0 22px rgba(47, 139, 255, 0.45);
  animation: spin 3.2s linear infinite; }
.engage-ring i:nth-child(2) { inset: 15px; border-style: dashed; animation: spin 10s linear infinite reverse; }
.engage-ring i:nth-child(3) { inset: 40px; border: 0; background: radial-gradient(circle, #e8f3ff 0%, #4b9bff 38%, rgba(47, 139, 255, 0) 70%);
  animation: corebeat 1.8s ease-in-out infinite; }
.engage-text { font-size: 1.3rem; font-weight: 600; letter-spacing: 0.14em; text-shadow: 0 0 16px rgba(47, 139, 255, 0.7); animation: pulse 2.2s ease-in-out infinite; }
.engage-sub { font-size: 0.72rem; letter-spacing: 0.55em; padding-left: 0.55em; color: #8fb8ff; }
@keyframes corebeat { 0%, 100% { transform: scale(0.85); opacity: 0.75; } 50% { transform: scale(1.12); opacity: 1; } }

/* ปุ่มเสียงระบบ มุมขวาบนของหน้าเข้าระบบ */
.sfx-btn { position: fixed; z-index: 70; top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 42px; height: 42px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(120, 170, 255, 0.35); background: rgba(6, 12, 28, 0.6); color: #8fb8ff; display: grid; place-items: center; }
.sfx-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sfx-btn svg path:first-child { fill: currentColor; fill-opacity: 0.18; }
.sfx-btn[aria-pressed="true"] .off, .sfx-btn[aria-pressed="false"] .on { display: none; }
.sfx-btn[aria-pressed="false"] { color: var(--muted); }
body[data-state="screen-app"] .sfx-btn { display: none; }

/* ปลุกระบบ: แสงวาบ + คลื่นกระแทกออกจากโลโก้ */
.surge { position: absolute; z-index: -1; left: 50%; top: calc(var(--art-h) * 0.137); width: var(--logo-d); height: var(--logo-d);
  transform: translate(-50%, -50%); pointer-events: none; }
.surge i { position: absolute; inset: 0; border-radius: 50%; opacity: 0; }
.surge i:nth-child(1) { background: radial-gradient(closest-side, rgba(220, 238, 255, 0.95), rgba(47, 139, 255, 0.55) 42%, transparent 76%); }
.surge i:nth-child(2) { border: 2px solid #9cc6ff; box-shadow: 0 0 26px #2f8bff, inset 0 0 26px #2f8bff; }
body.engaged .surge i:nth-child(1) { animation: flash 1.3s ease-out 0.15s; }
body.engaged .surge i:nth-child(2) { animation: shock 1.5s cubic-bezier(.1,.7,.2,1) 0.25s; }
@keyframes flash { 0% { opacity: 0; transform: scale(0.2); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(2.3); } }
@keyframes shock { 0% { opacity: 0.95; transform: scale(0.3); } 100% { opacity: 0; transform: scale(3.6); } }

/* แผงยืนยันตัวตน: เส้นสแกนวิ่งผ่านเป็นระยะ */
.step::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(120, 190, 255, 0.06) 82%, rgba(170, 215, 255, 0.28) 100%);
  transform: translateY(-110%); animation: panelscan 5s ease-in-out 2.8s infinite; }
@keyframes panelscan { 0% { transform: translateY(-110%); } 55%, 100% { transform: translateY(250%); } }

/* พิมพ์: เส้นใต้ช่องกรอกวาบตามจังหวะพิมพ์ */
.hud-field.pulse::after { transform: scaleX(1); background: #cfe6ff; box-shadow: 0 0 22px #9cc6ff; transition: none; }

/* ผิดพลาด: แผงสั่นและเปลี่ยนเป็นสีแดงชั่วครู่ */
.step.shake { opacity: 1; animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) !important;
  background: linear-gradient(135deg, var(--danger), rgba(255, 123, 138, 0.15) 35%, rgba(255, 123, 138, 0.1) 65%, var(--danger)) !important; }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); } }

/* ยืนยันตัวตนสำเร็จ: แผงสลายตัว → วงแหวน + เครื่องหมายถูก + ACCESS GRANTED */
body.granting .panel { animation: dissolve 0.35s ease-in forwards; }
@keyframes dissolve { to { opacity: 0; transform: scale(0.94) translateY(12px); filter: blur(4px) brightness(2); } }
.granted { position: fixed; inset: 0; z-index: 55; display: grid; place-content: center; justify-items: center; gap: 0.35rem; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(47, 139, 255, 0.24), rgba(3, 6, 15, 0.86) 48%, rgba(3, 6, 15, 0.96));
  animation: grantbg 1.9s ease-out forwards; }
.granted-ring { position: relative; width: 150px; height: 150px; margin-bottom: 0.9rem; }
.granted-ring i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #9cc6ff; opacity: 0;
  box-shadow: 0 0 30px #2f8bff, inset 0 0 30px rgba(47, 139, 255, 0.6); animation: grantring 0.9s cubic-bezier(.2,.8,.2,1) forwards; }
.granted-ring i:nth-child(2) { inset: 32px; border-color: #5fd3a0; box-shadow: 0 0 24px #5fd3a0, inset 0 0 16px rgba(95, 211, 160, 0.5); animation-delay: 0.15s; }
.granted-ring::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 15px; border: solid #5fd3a0; border-width: 0 0 4px 4px;
  transform: translate(-50%, -70%) rotate(-45deg) scale(0); animation: tickmark 0.35s 0.5s cubic-bezier(.3,1.6,.5,1) forwards;
  filter: drop-shadow(0 0 8px #5fd3a0); }
.granted-en { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.45rem; letter-spacing: 0.32em; padding-left: 0.32em;
  color: #e8f3ff; text-shadow: 0 0 18px #2f8bff; animation: rise 0.5s 0.3s both; white-space: nowrap; }
.granted-th { margin: 0; color: #5fd3a0; font-size: 1rem; letter-spacing: 0.04em; animation: rise 0.5s 0.45s both; }
@keyframes grantring { 0% { transform: scale(0.2); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes tickmark { to { transform: translate(-50%, -70%) rotate(-45deg) scale(1); } }
@keyframes grantbg { 0% { opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }

/* เข้าแอป: สว่างวาบแล้วคมชัด */
.app.enter { animation: appin 0.9s cubic-bezier(.2,.8,.2,1); }
@keyframes appin { from { opacity: 0; transform: scale(1.04); filter: brightness(2.2) blur(3px); } to { opacity: 1; transform: none; filter: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}