/* ===== AI assistant page (#/ai) — ยกเครื่องตาม demo/ai-assistant.html =====
   ธีมกระจกฝ้าบนพื้นฟ้าอ่อน (theme-light) + เขียวเรืองแสง + มุมโค้งใหญ่ */

/* --- การ์ดกระจกหรู: saturate + เงาซ้อนหลายชั้น (ตาม .card-lux ของเดโม่) --- */
.ai-lux{position:relative;border-radius:26px;
  background:var(--card-glass);border:1px solid var(--card-brd);
  backdrop-filter:blur(16px) saturate(165%);-webkit-backdrop-filter:blur(16px) saturate(165%);
  box-shadow:
    0 18px 44px rgba(47,139,255,.20),
    0 4px 12px rgba(9,30,60,.18),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(255,255,255,.28)}

/* --- shimmer: แถบไฮไลต์เฉียงวิ่งผ่านการ์ดช้า ๆ --- */
.ai-shimmer{overflow:hidden}
.ai-shimmer::before{content:'';position:absolute;top:-10%;bottom:-10%;left:0;width:42%;
  background:linear-gradient(105deg,
    transparent 0%,rgba(255,255,255,.22) 40%,rgba(170,215,255,.30) 52%,transparent 100%);
  transform:translateX(-140%) skewX(-18deg);
  animation:aiShimmer 7.5s ease-in-out infinite;pointer-events:none;z-index:1}
@keyframes aiShimmer{
  0%{transform:translateX(-140%) skewX(-18deg)}
  28%,100%{transform:translateX(340%) skewX(-18deg)}}

.ai-page{display:flex;flex-direction:column;gap:12px;padding:0 14px;
  color:var(--lt-ink)}

/* --- แถบบนกระจกมุมโค้งใหญ่ --- */
.ai-topbar{display:flex;align-items:center;gap:12px;padding:10px 14px;
  margin-top:calc(12px + env(safe-area-inset-top))}
.ai-topbar .ai-tb-face{width:40px;height:40px;border-radius:14px;flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#6ee7b7 0%,#4ade80 45%,#2f8bff 130%);
  box-shadow:0 0 18px rgba(74,222,128,.45)}
.ai-topbar .ai-tb-face svg{width:21px;height:21px}
.ai-topbar .ai-tb-txt{flex:1;min-width:0}
.ai-topbar h1{font-size:16.5px;font-weight:800;letter-spacing:.2px;color:var(--lt-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-topbar p{margin-top:1px;font-size:11.5px;color:var(--lt-ink-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-clear{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  font-weight:600;color:var(--lt-ink-dim);padding:7px 12px;border-radius:var(--r-pill);
  background:var(--card-glass);border:1px solid var(--card-brd);
  transition:color .15s, background .15s, transform .12s;position:relative;z-index:2}
.ai-clear svg{width:13px;height:13px}
.ai-clear:active{color:var(--red);transform:scale(.95)}

/* --- การ์ดสถานะ AI + เรืองแสงเขียวใต้การ์ด (ชั้นเงาเขียวเพิ่มจาก .ai-lux) --- */
.ai-status{display:flex;align-items:center;gap:14px;padding:15px 18px;
  box-shadow:
    0 18px 44px rgba(47,139,255,.18),
    0 16px 30px -6px rgba(74,222,128,.5),
    0 4px 12px rgba(9,30,60,.16),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(255,255,255,.28)}
.ai-status .ai-face{width:52px;height:52px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:radial-gradient(circle at 30% 25%,#bff0d8,#4ade80 45%,#2f8bff 130%);
  border:2px solid var(--card-brd);box-shadow:0 0 18px rgba(74,222,128,.5)}
.ai-status .ai-face svg{width:26px;height:26px}
.ai-status .st-title{font-weight:700;font-size:15.5px;color:var(--lt-ink)}
.ai-status .st-sub{font-size:12px;color:var(--lt-ink-dim);margin-top:2px;
  display:flex;align-items:center;gap:6px}
.ai-status .st-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;
  box-shadow:0 0 8px rgba(74,222,128,.9);animation:aiPulse 1.8s infinite}
@keyframes aiPulse{0%,100%{opacity:1}50%{opacity:.45}}
/* --- โหมดพื้นฐาน (ยังไม่ได้เชื่อม AI): เหลือง/เทา ไม่มีไฟเขียว --- */
.ai-status.basic{box-shadow:
  0 14px 34px rgba(120,110,60,.14),
  0 10px 22px -8px rgba(245,190,60,.34),
  0 4px 12px rgba(9,30,60,.12),
  inset 0 1px 0 rgba(255,255,255,.85),
  inset 0 0 0 1px rgba(255,255,255,.28)}
.ai-status.basic .ai-face{
  background:radial-gradient(circle at 30% 25%,#ffe9b8,#f6c344 45%,#b0863a 130%);
  box-shadow:0 0 14px rgba(245,190,60,.45)}
.ai-status.basic .st-dot{background:#f0b429;box-shadow:0 0 8px rgba(240,180,41,.75);animation:none}
.ai-status .st-note{display:block;font-size:11.5px;line-height:1.45;margin-top:3px;
  color:var(--lt-ink-dim);white-space:normal}
.ai-status .st-note[hidden]{display:none}
.ai-status .st-chev{color:var(--lt-ink-dim)}
.ai-status .st-chev svg{width:18px;height:18px}

/* --- โซนบทสนทนา --- */
.ai-chat-head{display:flex;align-items:center;padding:2px 6px 0}
.ai-chat-head .lbl{font-size:12px;font-weight:600;color:var(--lt-ink-dim)}

.ai-chat{flex:1;display:flex;flex-direction:column;gap:12px;min-height:180px;
  overflow-y:auto;padding:4px 2px 12px}

/* บับเบิลโค้งแบบเดโม่: มุม 20px + หางมุม 6px */
.ai-bub{max-width:82%;padding:12px 16px;font-size:14.5px;line-height:1.5;
  animation:bubIn .25s ease;word-break:break-word;white-space:pre-wrap}
@keyframes bubIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ผู้ใช้: ฟ้าไล่เฉด ชิดซ้าย หางล่างซ้าย */
.ai-bub.user{align-self:flex-start;color:#fff;
  background:linear-gradient(135deg,#57b4ff 0%,#2f8bff 100%);
  border-radius:20px 20px 20px 6px;
  box-shadow:0 8px 22px rgba(47,139,255,.35), inset 0 1px 0 rgba(255,255,255,.35)}
/* AI: กระจกขาว ชิดขวา หางล่างขวา */
.ai-bub.bot{align-self:flex-end;color:var(--lt-ink);
  background:rgba(255,255,255,.92);border:1px solid var(--card-brd);
  border-radius:20px 20px 6px 20px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 22px rgba(60,110,180,.18), inset 0 1px 0 rgba(255,255,255,.9)}
.ai-bub .bub-mode{display:block;font-size:11px;font-weight:700;color:#2f8bff;
  margin-bottom:4px;letter-spacing:.3px}

/* รายการ items จาก AI */
.ai-items{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:6px}
.ai-items li{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;
  background:rgba(47,139,255,.07);border:1px solid rgba(47,139,255,.16);
  border-radius:12px;font-size:13.5px}
.ai-items li .num{flex:none;width:20px;height:20px;border-radius:50%;font-size:11px;
  font-weight:700;color:#fff;background:linear-gradient(135deg,#4ade80,#2f8bff);
  display:flex;align-items:center;justify-content:center;margin-top:1px;
  box-shadow:0 2px 8px rgba(74,222,128,.4)}
.ai-items.todo li{cursor:pointer;transition:background .15s}
.ai-items.todo li:hover{background:rgba(47,139,255,.12)}
.ai-items input[type=checkbox]{flex:none;width:17px;height:17px;margin-top:1px;
  accent-color:#22c55e;cursor:pointer}
.ai-items li.done span{text-decoration:line-through;opacity:.55}

/* typing indicator จุดเด้ง */
.ai-typing{align-self:flex-end;display:flex;gap:5px;padding:14px 18px;
  background:rgba(255,255,255,.92);border:1px solid var(--card-brd);
  border-radius:20px 20px 6px 20px;
  box-shadow:0 8px 22px rgba(60,110,180,.18)}
.ai-typing i{width:7px;height:7px;border-radius:50%;background:#7d92ad;
  animation:aiDot 1.1s infinite}
.ai-typing i:nth-child(2){animation-delay:.18s}
.ai-typing i:nth-child(3){animation-delay:.36s}
@keyframes aiDot{0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-5px);opacity:1}}

/* --- composer: ชิปโหมด + ช่องถาม (การ์ดกระจกล่าง) --- */
.ai-composer{padding:12px 14px;display:flex;flex-direction:column;gap:11px;
  margin-bottom:8px}
.ai-modes{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;position:relative;z-index:2}
.ai-modes .chip{flex:none;font-weight:600;color:var(--lt-ink-dim);
  background:var(--card-glass);border:1px solid var(--card-brd);
  transition:background .2s, color .2s, box-shadow .2s, transform .12s}
.ai-modes .chip:active{transform:scale(.95)}
/* ชิป active: เขียวไล่เฉดเรืองแสง (ตามแท็บเดโม่) */
.ai-modes .chip.active{color:#065f46;border-color:transparent;
  background:linear-gradient(90deg,#6ee7b7 0%,#4ade80 100%);
  box-shadow:0 0 18px rgba(74,222,128,.45)}
.ai-lang{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--lt-ink-dim);
  animation:bubIn .2s ease;position:relative;z-index:2}
.ai-lang select{flex:1;padding:9px 14px;border-radius:var(--r-pill);font-size:13.5px;
  background:var(--card-glass);border:1px solid var(--lt-card-brd);color:var(--lt-ink);
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d92ad' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px}
.ai-lang select option{background:#fff;color:var(--lt-ink)}
.ai-input-row{display:flex;align-items:center;gap:10px;position:relative;z-index:2}
.ai-input-row .input-glass{flex:1}
/* ปุ่มส่งเขียวเรืองแสง */
.ai-send{flex:none;width:46px;height:46px;border-radius:16px;display:flex;align-items:center;
  justify-content:center;color:#065f46;
  background:linear-gradient(90deg,#6ee7b7 0%,#4ade80 100%);
  box-shadow:0 0 18px rgba(74,222,128,.5), 0 6px 16px rgba(34,197,94,.3);
  transition:transform .12s, filter .15s}
.ai-send:hover{filter:brightness(1.05)}
.ai-send:active{transform:scale(.9)}
.ai-send svg{width:20px;height:20px}
.ai-send[disabled]{opacity:.5;pointer-events:none}

/* จอแคบ 360px: บีบระยะไม่ให้ล้น */
@media (max-width:379px){
  .ai-page{padding:0 10px}
  .ai-topbar{gap:9px;padding:9px 11px}
  .ai-topbar h1{font-size:15px}
  .ai-clear{padding:6px 10px}
  .ai-bub{max-width:88%}
}

/* ปุ่มคัดลอก / ส่งผลลัพธ์เข้าแชท ใต้บับเบิลของ AI */
.ai-bub-actions{display:flex;gap:6px;margin-top:9px;padding-top:8px;
  border-top:1px solid rgba(47,139,255,.16)}
.ai-act{padding:5px 11px;border-radius:var(--r-pill);font-size:11.5px;font-weight:700;
  background:rgba(47,139,255,.1);border:1px solid rgba(47,139,255,.28);color:#2f6fd0;
  transition:transform .12s ease,background .15s ease}
.ai-act:hover{background:rgba(47,139,255,.18)}
.ai-act:active{transform:scale(.94)}
.ai-act:disabled{opacity:.5;pointer-events:none}
.ai-act-send{background:rgba(47,139,255,.9);border-color:transparent;color:#fff}
.ai-act-send:hover{background:rgba(47,139,255,1)}

/* แถบสถานะกดได้ (เปิดคำอธิบายผู้ช่วย) */
.ai-status{width:100%;color:inherit;text-align:left;
  transition:transform .12s ease,border-color .2s ease}
.ai-status:active{transform:scale(.985)}