/* =============================================================================
   ZZAX STUDIO — น้อง Zzax (มาสคอตประจำเว็บ)
   -----------------------------------------------------------------------------
   ไฟล์นี้แยกจาก assets/css/styles.css โดยตั้งใจ — styles.css ถูกแช่แข็งไว้
   ใช้โทเค็นสีเดิมจาก styles.css ทั้งหมด (--card, --quantum-purple,
   --cyber-blue, --glass-border ฯลฯ) จึงต้องโหลด styles.css ก่อนไฟล์นี้เสมอ

   z-index: อยู่ใต้ --z-header (100), --z-dropdown (120) และ --z-modal (1000)
            น้องจึงไม่มีวันบังเมนูมือถือหรือ modal
   ========================================================================== */

:root {
  /* ขนาดตัวน้อง — สไปรต์ต้นฉบับ 201x256 px ต่อเฟรม อัตราส่วนต้องคงเดิม
     ไม่งั้นเฟรมจะเลื่อนผิดตำแหน่ง (ตัวเลข px คำนวณจาก 201/256) */
  --zx-h: 120px;
  --zx-w: 94px;
  --zx-z-pet: 90;
  --zx-z-panel: 92;
  --zx-gap-bottom: 12px;   /* ระยะจากขอบล่าง — เพิ่มค่านี้ถ้าวันหนึ่งมีแถบ CTA ติดล่าง */
}

/* ---------------------------------------------------------------- ตัวน้อง */
.zx-pet {
  position: fixed;
  right: 16px;
  bottom: calc(var(--zx-gap-bottom) + env(safe-area-inset-bottom, 0px));
  z-index: var(--zx-z-pet);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.zx-pet[hidden],
.zx-panel[hidden],
.zx-recall[hidden] { display: none !important; }

.zx-pet:focus-visible {
  outline: 2px solid var(--cyber-blue);
  outline-offset: 6px;
  border-radius: var(--r-md, 14px);
}

/* รูปน้อง — เลื่อน background-position ทีละเฟรม (คุมด้วย JS) */
.zx-fig {
  width: var(--zx-w);
  height: var(--zx-h);
  background-repeat: no-repeat;
  background-position: 0 0;
  flex: 0 0 auto;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

/* หายใจเข้าออกเบา ๆ — ค่ามาจาก motion.breathing ใน pet-spec.json ของแอปเดสก์ท็อป */
.zx-fig.is-breathing { animation: zx-breathe 3.2s ease-in-out infinite; }
@keyframes zx-breathe {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.012, 1.025); }
}

/* ยุบเด้งตอนโดนกด — motion.squashStretch */
.zx-fig.is-squash { animation: zx-squash 0.28s ease-out; }
@keyframes zx-squash {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.06, 0.94); }
}

/* ------------------------------------------------------------ กล่องคำพูด */
/* ⚠️ ห้ามใส่ white-space: nowrap เด็ดขาด — ข้อความไทยยาว ต้องตัดบรรทัดได้
      ความกว้างกำหนดที่นี่ที่เดียว ห้ามไปตั้งซ้ำใน JS */
.zx-say {
  position: relative;
  max-width: min(240px, calc(100vw - 48px));
  margin-right: 4px;
  padding: 10px 13px;
  border-radius: 14px 14px 4px 14px;
  background: var(--card, #171B33);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.09));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  color: var(--text, #E5E7EB);
  font-size: 0.85rem;
  line-height: 1.55;
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-base, 0.3s), transform var(--t-base, 0.3s);
  /* ตอนไม่มีข้อความต้องกดทะลุได้ แต่ตอนมีข้อความต้องกดโดนปุ่ม
     ไม่งั้นจุดกึ่งกลางปุ่มจะไปตกในกล่องคำพูดแล้วคลิกไม่ติด */
  pointer-events: none;
}
.zx-say.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }

.zx-say::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: var(--card, #171B33);
  border-right: 1px solid var(--glass-border, rgba(255, 255, 255, 0.09));
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.09));
  transform: rotate(45deg);
}

/* --------------------------------------------------------------- แผงเมนู */
.zx-panel {
  position: fixed;
  right: 16px;
  bottom: calc(var(--zx-gap-bottom) + var(--zx-h) + 14px + env(safe-area-inset-bottom, 0px));
  z-index: var(--zx-z-panel);
  width: min(320px, calc(100vw - 32px));
  max-height: min(66vh, 460px);
  display: flex;
  flex-direction: column;
  background: var(--card, #171B33);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.09));
  border-radius: var(--r-lg, 16px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.zx-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px 12px 16px;
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.09));
  background: linear-gradient(135deg, rgba(123, 47, 253, 0.18), rgba(56, 212, 232, 0.1));
}

.zx-panel-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-head, system-ui, sans-serif);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--white, #fff);
}
.zx-panel-title small {
  display: block;
  font-family: var(--font-body, system-ui, sans-serif);
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--muted, #9AA3B8);
}

/* ปุ่มปิด 44x44 ตามข้อกำหนดพื้นที่กดขั้นต่ำ */
.zx-x {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: var(--r-sm, 8px);
  color: var(--muted, #9AA3B8);
  cursor: pointer;
}
.zx-x:hover { color: var(--white, #fff); background: rgba(255, 255, 255, 0.06); }
.zx-x:focus-visible { outline: 2px solid var(--cyber-blue); outline-offset: 2px; }
.zx-x svg { width: 20px; height: 20px; }

.zx-panel-body {
  padding: 12px 14px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.zx-line {
  margin: 0 0 12px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text, #E5E7EB);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- ปุ่มชิป */
.zx-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.zx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 13px;
  border-radius: var(--r-full, 999px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.09));
  color: var(--text, #E5E7EB);
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--t-fast, 0.18s), background var(--t-fast, 0.18s);
}
.zx-chip:hover {
  border-color: var(--quantum-purple, #7B2FFD);
  background: rgba(123, 47, 253, 0.12);
}
.zx-chip:focus-visible { outline: 2px solid var(--cyber-blue); outline-offset: 2px; }
.zx-chip svg { width: 15px; height: 15px; flex: 0 0 auto; stroke: var(--cyber-blue); }
.zx-chip.is-danger:hover { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.08); }
.zx-chip.is-danger svg { stroke: var(--muted, #9AA3B8); }

/* รายการโปรเจกต์ในแผง */
.zx-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

.zx-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--r-sm, 8px);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  color: var(--text, #E5E7EB);
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--t-fast, 0.18s), background var(--t-fast, 0.18s);
}
.zx-item:hover { background: rgba(123, 47, 253, 0.12); border-color: var(--quantum-purple, #7B2FFD); }
.zx-item:focus-visible { outline: 2px solid var(--cyber-blue); outline-offset: 2px; }
.zx-item .zx-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--matrix-green, #35C88B);
}
.zx-item b { font-weight: 600; }

.zx-back {
  margin-top: 12px;
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--cyber-blue, #38D4E8);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.zx-back:focus-visible { outline: 2px solid var(--cyber-blue); outline-offset: 2px; }

/* ==========================================================================
   ขั้นที่ 2 — ช่องพิมพ์ บทสนทนา และการ์ดผลงาน
   ⚠️ ทุกอย่างในบล็อกนี้จะไม่ถูกแสดงเลยถ้า Worker ไม่ตอบ /api/health
      (JS ตั้ง hidden ไว้บนฟอร์ม) แผงเมนูจึงหน้าตาเหมือนขั้นที่ 1 เป๊ะ
   ========================================================================== */

/* --------------------------------------------------------------- ช่องพิมพ์ */
.zx-ask {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.09));
  background: rgba(255, 255, 255, 0.02);
}
.zx-ask[hidden] { display: none !important; }

.zx-ask-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--r-full, 999px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.09));
  color: var(--text, #E5E7EB);
  font-family: inherit;
  /* ⚠️ ห้ามต่ำกว่า 16px — iOS Safari จะซูมหน้าจอเข้าทันทีที่คนแตะช่องพิมพ์
     แล้วซูมกลับเองไม่ได้ ทั้งหน้าเว็บจะค้างใหญ่ผิดขนาด */
  font-size: 16px;
  line-height: 1.4;
}
.zx-ask-input::placeholder { color: var(--muted, #9AA3B8); }
.zx-ask-input:focus {
  outline: none;
  border-color: var(--quantum-purple, #7B2FFD);
  background: rgba(123, 47, 253, 0.1);
}
.zx-ask-input:disabled { opacity: 0.6; cursor: progress; }

.zx-ask-send {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(123, 47, 253, 0.18);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.09));
  color: var(--cyber-blue, #38D4E8);
  cursor: pointer;
  transition: background var(--t-fast, 0.18s), border-color var(--t-fast, 0.18s);
}
.zx-ask-send:hover { background: rgba(123, 47, 253, 0.32); border-color: var(--quantum-purple, #7B2FFD); }
.zx-ask-send:focus-visible { outline: 2px solid var(--cyber-blue); outline-offset: 2px; }
.zx-ask-send:disabled { opacity: 0.45; cursor: progress; }
.zx-ask-send svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------ บทสนทนา */
.zx-thread { display: flex; flex-direction: column; gap: 10px; }

.zx-msg { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
.zx-msg.is-me { align-items: flex-end; }

.zx-msg-text {
  margin: 0;
  max-width: 92%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text, #E5E7EB);
  /* ⚠️ ห้ามใส่ nowrap — ข้อความไทยยาวและไม่มีช่องว่างให้ตัดบรรทัด */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.zx-msg.is-zx .zx-msg-text {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.09));
  border-bottom-left-radius: 4px;
}
.zx-msg.is-me .zx-msg-text {
  background: rgba(123, 47, 253, 0.2);
  border: 1px solid rgba(123, 47, 253, 0.4);
  border-bottom-right-radius: 4px;
  text-align: right;
}

.zx-typing {
  padding: 8px 12px;
  font-size: 0.82rem;
  color: var(--muted, #9AA3B8);
  animation: zx-pulse 1.4s ease-in-out infinite;
}
@keyframes zx-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ------------------------------------------------------ การ์ดผลงาน */
.zx-cards { display: flex; flex-direction: column; gap: 6px; width: 100%; }

.zx-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border-radius: var(--r-sm, 8px);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.09));
  border-left: 3px solid var(--matrix-green, #35C88B);
  color: var(--text, #E5E7EB);
  text-decoration: none;
  transition: border-color var(--t-fast, 0.18s), background var(--t-fast, 0.18s);
}
.zx-card:hover { background: rgba(123, 47, 253, 0.12); border-color: var(--quantum-purple, #7B2FFD); }
.zx-card:focus-visible { outline: 2px solid var(--cyber-blue); outline-offset: 2px; }
.zx-card b { font-size: 0.84rem; font-weight: 600; }
.zx-card span {
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--muted, #9AA3B8);
  overflow-wrap: anywhere;
}

/* บริการที่เกี่ยว — เล็กกว่าการ์ดผลงานเพราะเป็นทางเลือกรอง */
.zx-svc { display: flex; flex-wrap: wrap; gap: 6px; }
.zx-svc-link {
  padding: 5px 10px;
  border-radius: var(--r-full, 999px);
  background: rgba(56, 212, 232, 0.08);
  border: 1px solid rgba(56, 212, 232, 0.28);
  color: var(--cyber-blue, #38D4E8);
  font-size: 0.75rem;
  line-height: 1.4;
  text-decoration: none;
}
.zx-svc-link:hover { background: rgba(56, 212, 232, 0.18); }
.zx-svc-link:focus-visible { outline: 2px solid var(--cyber-blue); outline-offset: 2px; }

/* ปุ่มทางออกตอนโควตาเต็มหรือสมองล่ม — ห้ามปล่อยให้คนเจอทางตัน */
.zx-cta {
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: var(--r-full, 999px);
  background: linear-gradient(135deg, var(--quantum-purple, #7B2FFD), var(--cyber-blue, #38D4E8));
  color: var(--white, #fff);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}
.zx-cta:focus-visible { outline: 2px solid var(--white, #fff); outline-offset: 2px; }

/* ------------------------------------------------ ปุ่มเรียกน้องกลับมา */
.zx-recall {
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: var(--zx-z-pet);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card, #171B33);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.09));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  color: var(--cyber-blue, #38D4E8);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--t-fast, 0.18s);
}
.zx-recall:hover { opacity: 1; }
.zx-recall:focus-visible { outline: 2px solid var(--cyber-blue); outline-offset: 3px; opacity: 1; }
.zx-recall svg { width: 22px; height: 22px; }

/* ------------------------------------------ ไฮไลต์การ์ดที่น้องพาไปดู */
.zx-spot {
  animation: zx-spot 2.2s ease-out 1;
  border-radius: var(--r-lg, 16px);
}
@keyframes zx-spot {
  0%   { box-shadow: 0 0 0 0 rgba(123, 47, 253, 0.75); }
  35%  { box-shadow: 0 0 0 5px rgba(123, 47, 253, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(123, 47, 253, 0); }
}

/* ------------------------------------------------------------- มือถือ */
@media (max-width: 640px) {
  :root {
    --zx-h: 88px;
    --zx-w: 69px;
    --zx-gap-bottom: 10px;
  }
  .zx-pet { right: 10px; }
  .zx-say { max-width: min(200px, calc(100vw - 36px)); font-size: 0.8rem; }
  .zx-panel {
    right: 10px;
    left: 10px;
    width: auto;
    max-height: 62vh;
  }
}

/* --------------------------------------------- เคารพการปิดแอนิเมชัน */
@media (prefers-reduced-motion: reduce) {
  .zx-fig,
  .zx-fig.is-breathing,
  .zx-fig.is-squash { animation: none !important; }
  .zx-say { transition: none !important; }
  .zx-spot { animation: none !important; box-shadow: 0 0 0 3px rgba(123, 47, 253, 0.7); }
  .zx-typing { animation: none !important; opacity: 1; }
}