/* =========================================================
   Ask AI — full-screen chat overlay
   ========================================================= */
.askai{position:fixed;inset:0;z-index:2000;background:#f6f7f9;display:grid;grid-template-columns:230px 1fr;color:var(--ink);animation:askIn .25s ease}
.askai[hidden]{display:none}
@keyframes askIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body.chat-open{overflow:hidden}

.askai-side{background:#fff;border-right:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:14px}
.askai-side-head{font-size:15px;font-weight:500}
.recent-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink-2);margin-top:6px}
.recent-list{display:grid;gap:4px;overflow:auto}
.recent-list li{font-size:12px;color:var(--ink-2);padding:8px 10px;border-radius:8px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-list li:hover{background:var(--bg-tint)}
.recent-list li.empty{color:#9aa3b2;cursor:default;padding-left:4px}
.recent-list li.empty:hover{background:none}

.askai-main{display:grid;grid-template-rows:auto 1fr auto auto;min-height:0}
.askai-top{display:flex;justify-content:space-between;align-items:center;padding:16px 26px 8px}
.askai-top h2{font-size:18px;font-weight:400}
.askai-top h2 strong{font-weight:700}
.spark{color:var(--accent);font-size:14px;vertical-align:super}
.spark.big{font-size:22px;color:var(--accent);margin-bottom:6px}
.askai-close{width:34px;height:34px;border-radius:50%;border:none;background:#fff;box-shadow:var(--shadow);cursor:pointer;font-size:14px}
.askai-close:hover{background:var(--ink);color:#fff}

.askai-body{overflow:auto;padding:10px 26px 20px;min-height:0}
.askai-welcome{max-width:720px;margin:6vh auto 0;text-align:center}
.askai-welcome h3{font-size:30px;font-weight:600;margin-bottom:8px}
.askai-welcome p{font-size:14px;color:var(--ink-2);margin-bottom:30px}
.welcome-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:520px;margin:0 auto 18px}
.wcard{text-align:left;border:none;border-radius:12px;padding:18px 20px;color:#fff;cursor:pointer;display:grid;gap:8px;box-shadow:var(--shadow);transition:transform .2s;font-family:inherit}
.wcard:hover{transform:translateY(-3px)}
.wcard strong{font-size:15px;line-height:1.2}
.wcard span{font-size:12px;color:#e9eefb;line-height:1.4}
.wcard-blue{background:linear-gradient(135deg,#1d3a69,#0f2242)}
.wcard-orange{background:linear-gradient(135deg,#ff6a3d,#ff9d4d 55%,#b06cff)}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:12px;color:var(--ink);cursor:pointer;box-shadow:0 2px 8px rgba(16,32,64,.06);font-family:inherit}
.chip:hover{border-color:var(--brand);color:var(--brand)}

.askai-thread{max-width:820px;margin:0 auto;display:grid;gap:16px}
.msg{display:flex;gap:12px;align-items:flex-start;animation:askIn .25s ease}
.msg .who{width:32px;height:32px;border-radius:50%;flex:0 0 32px;display:grid;place-items:center;font-size:12px;font-weight:700}
.msg.user{flex-direction:row-reverse}
.msg.user .who{background:var(--ink);color:#fff}
.msg.bot .who{background:linear-gradient(135deg,var(--brand),var(--accent-2));color:#fff}
.bubble{max-width:78%;padding:12px 16px;border-radius:14px;font-size:14px;line-height:1.55;box-shadow:0 2px 10px rgba(16,32,64,.06)}
.msg.user .bubble{background:var(--ink);color:#fff;border-top-right-radius:4px}
.msg.bot .bubble{background:#fff;border-top-left-radius:4px}
.bubble p{margin:0 0 8px}.bubble p:last-child{margin:0}
.bubble ul{margin:6px 0 6px 18px;list-style:disc;padding:0}
.bubble li{margin:3px 0}
.bubble a{color:var(--brand);text-decoration:underline}
.bubble strong{font-weight:600}
.typing span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#9aa3b2;margin-right:4px;animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.followups{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.followups .chip{padding:6px 12px;font-size:11px}

.askai-input{max-width:900px;width:calc(100% - 52px);margin:0 auto;background:#fff;border:1.5px solid #f3b27a;border-radius:12px;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;box-shadow:0 4px 18px rgba(255,138,61,.12)}
.askai-input:focus-within{border-color:var(--accent);box-shadow:0 4px 22px rgba(255,138,61,.25)}
.in-spark{color:#9aa3b2;font-size:14px}
.askai-input input{flex:1;border:none;outline:none;font:inherit;font-size:14px;color:var(--ink);background:transparent;min-width:0}
.voice{border:none;background:transparent;font-size:12px;color:var(--ink-2);cursor:pointer;display:flex;align-items:center;gap:4px;padding:6px 8px;border-radius:8px;font-family:inherit}
.voice:hover{background:var(--bg-tint)}
.voice.listening{color:#e5484d}
.send{border:none;background:var(--ink);color:#fff;border-radius:10px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.send:hover{background:var(--brand)}
.send:disabled{opacity:.5;cursor:not-allowed}
.askai-foot{font-size:11px;color:#8a93a3;text-align:left;max-width:900px;width:calc(100% - 52px);margin:8px auto 14px;line-height:1.5}

@media (max-width:860px){
  .askai{grid-template-columns:1fr}
  .askai-side{display:none}
  .welcome-cards{grid-template-columns:1fr}
  .askai-welcome{margin-top:3vh}
  .askai-welcome h3{font-size:24px}
  .bubble{max-width:90%}
  .voice span{display:none}
  .askai-input,.askai-foot{width:calc(100% - 24px)}
  .askai-body{padding:10px 12px 20px}
}