/* ================= css/ai-assistant.css =================
   GAMEX AI ASSISTANT — Claude.ai-style layout
   Reuses existing GAMEX color variables (--red/--gold/--blue/
   --surface/--off-white/--border/--text) so the page matches
   the rest of the app; only the LAYOUT is Claude-style:
   a slide-in conversation-history sidebar + clean message
   thread + composer with attach/image-gen actions.
   ========================================================== */

.ai2-screen{ display:none; flex-direction:column; height:100vh; background:var(--off-white); position:relative; overflow:hidden; }
.screen.active.ai2-screen{ display:flex; }
.ai2-main{ flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }

/* ---------- Header — premium gradient bar instead of flat white ---------- */
.ai2-header{
  flex-shrink:0; display:flex; align-items:center; gap:10px;
  padding:12px 14px; background:var(--victory-gradient);
  box-shadow:0 4px 20px rgba(0,0,0,0.18); position:relative; z-index:2;
}
.ai2-header .ai2-icon-btn{
  width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.12);color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:15px;flex-shrink:0;transition:var(--trans);backdrop-filter:blur(6px);
}
.ai2-header .ai2-icon-btn:active{ transform:scale(.92); background:rgba(255,255,255,0.22); }
.ai2-header .ai2-icon-btn.ai2-voice-on{ color:var(--gold); border-color:var(--gold); background:rgba(255,182,39,0.18); }
.ai2-header-title{ font-family:var(--font-display); font-weight:800; font-size:15px; color:#fff; line-height:1.2; }
.ai2-header-sub{ font-size:11px; color:rgba(255,255,255,0.65); margin-top:1px; }
.ai2-header-mid{ flex:1; min-width:0; }
.ai2-header-mid .ai2-header-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Sidebar (slide-in drawer, Claude/ChatGPT style) ---------- */
.ai2-sidebar-overlay{
  position:absolute; inset:0; background:rgba(10,12,18,0.45); z-index:40;
  opacity:0; pointer-events:none; transition:opacity .25s ease; backdrop-filter:blur(2px);
}
.ai2-sidebar-overlay.open{ opacity:1; pointer-events:auto; }

.ai2-sidebar{
  position:absolute; top:0; bottom:0; left:0; width:82%; max-width:320px; z-index:41;
  background:var(--surface); border-right:1px solid var(--border);
  transform:translateX(-105%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column;
}
.ai2-sidebar.open{ transform:translateX(0); }

.ai2-sidebar-head{ padding:16px 14px 10px; flex-shrink:0; }
.ai2-newchat-btn{
  width:100%; display:flex; align-items:center; gap:10px; justify-content:center;
  padding:12px; border-radius:50px; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--red) 0%,var(--red-dark) 55%,var(--gold) 130%); color:#fff;
  font-weight:800; font-size:14px; box-shadow:0 6px 18px var(--red-glow), inset 0 1px 0 rgba(255,255,255,0.3);
}
.ai2-newchat-btn:active{ transform:scale(.97); }

.ai2-sidebar-label{ font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--text3); padding:14px 16px 6px; }
.ai2-convo-list{ flex:1; overflow-y:auto; padding:0 8px 16px; }
.ai2-convo-item{
  display:flex; align-items:center; gap:10px; padding:11px 10px; border-radius:12px;
  cursor:pointer; transition:var(--trans); position:relative;
}
.ai2-convo-item:hover, .ai2-convo-item:active{ background:var(--off-white); }
.ai2-convo-item.active{ background:var(--red-soft); }
.ai2-convo-item.active .ai2-convo-title{ color:var(--red); }
.ai2-convo-title{ font-size:13.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.ai2-convo-del{ width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text3);flex-shrink:0;font-size:12px; }
.ai2-convo-del:hover{ background:rgba(217,45,45,0.12); color:var(--danger); }
.ai2-sidebar-empty{ text-align:center; font-size:12px; color:var(--text3); padding:24px 12px; }

/* ---------- Message thread — soft ambient gradient wash instead of flat off-white ---------- */
.ai2-messages{
  flex:1; overflow-y:auto; padding:18px 14px 10px; display:flex; flex-direction:column; gap:16px; min-height:0;
  background:
    radial-gradient(circle at 15% 0%, var(--gold-soft), transparent 40%),
    radial-gradient(circle at 90% 30%, var(--blue-soft), transparent 45%),
    var(--off-white);
}

.ai2-msg{ display:flex; gap:10px; align-items:flex-end; max-width:100%; }
.ai2-msg.user{ flex-direction:row-reverse; }
.ai2-avatar{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:13px; background:linear-gradient(135deg,var(--red),var(--gold)); color:#fff;
  box-shadow:0 0 0 3px var(--gold-soft), 0 3px 10px var(--red-glow);
}
.ai2-msg.user .ai2-avatar{ background:linear-gradient(135deg,var(--blue),#00A88F); box-shadow:0 0 0 3px var(--blue-soft), 0 3px 10px var(--blue-glow); }

.ai2-bubble-col{ display:flex; flex-direction:column; gap:6px; max-width:78%; }
.ai2-msg.user .ai2-bubble-col{ align-items:flex-end; }
.ai2-bubble{
  padding:12px 15px; border-radius:18px; font-size:14px; line-height:1.55;
  box-shadow:0 3px 14px rgba(23,26,33,0.08); word-wrap:break-word; white-space:pre-wrap;
}
.ai2-msg.ai .ai2-bubble{ background:var(--surface); color:var(--text); border-radius:4px 18px 18px 18px; border:1px solid var(--border); }
.ai2-msg.user .ai2-bubble{
  background:linear-gradient(135deg, #FF4D5E 0%, var(--red) 60%, var(--red-dark) 100%);
  color:#fff; border-radius:18px 4px 18px 18px; box-shadow:0 4px 16px var(--red-glow);
}
.ai2-bubble b, .ai2-bubble strong{ font-weight:800; }
.ai2-bubble ul{ margin:6px 0; padding-left:18px; }
.ai2-bubble li{ margin:3px 0; }
.ai2-bubble code{ background:rgba(0,0,0,0.08); padding:1px 5px; border-radius:5px; font-size:12.5px; }
.ai2-msg.user .ai2-bubble code{ background:rgba(255,255,255,0.2); }

.ai2-msg-time{ font-size:10px; color:var(--text3); padding:0 4px; }

.ai2-attach-img{ max-width:220px; border-radius:14px; display:block; cursor:pointer; box-shadow:var(--shadow); }
.ai2-attach-file{
  display:flex; align-items:center; gap:8px; background:var(--surface); border:1.5px solid var(--border);
  padding:9px 12px; border-radius:12px; font-size:12.5px; color:var(--text); max-width:220px; cursor:pointer;
}
.ai2-attach-file i{ color:var(--red); font-size:15px; }

.ai2-gen-image-card{ position:relative; }
.ai2-gen-image-card img{ max-width:240px; border-radius:14px; display:block; box-shadow:var(--shadow-lg); }
.ai2-gen-image-dl{
  position:absolute; bottom:8px; right:8px; width:30px;height:30px;border-radius:50%;
  background:rgba(10,12,18,0.55); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px;
}

.ai2-typing{ display:flex; gap:4px; padding:12px 14px; }
.ai2-typing span{ width:6px;height:6px;border-radius:50%; background:var(--text3); animation:ai2dot 1.2s infinite ease-in-out; }
.ai2-typing span:nth-child(2){ animation-delay:.15s; }
.ai2-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes ai2dot{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }

.ai2-welcome{ text-align:center; padding:30px 20px; }
.ai2-welcome-icon{
  width:56px;height:56px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
  font-size:24px;color:#fff;background:linear-gradient(135deg,var(--red),var(--gold)); box-shadow:0 8px 24px var(--red-glow);
}
.ai2-welcome-title{ font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--text); margin-bottom:6px; }
.ai2-welcome-sub{ font-size:13px; color:var(--text3); max-width:280px; margin:0 auto; line-height:1.5; }
.ai2-suggest-row{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px; }
.ai2-suggest-chip{
  font-size:12.5px; font-weight:600; color:var(--text2); background:var(--surface); border:1.5px solid var(--border);
  padding:8px 13px; border-radius:50px; cursor:pointer;
}
.ai2-suggest-chip:active{ transform:scale(.96); }

/* ---------- Composer ---------- */
.ai2-attach-preview{
  display:none; align-items:center; gap:10px; padding:8px 14px; background:var(--surface);
  border-top:1px solid var(--border); flex-shrink:0;
}
.ai2-attach-preview.show{ display:flex; }
.ai2-attach-preview img{ width:40px;height:40px;border-radius:8px;object-fit:cover; }
.ai2-attach-preview .name{ font-size:12px; color:var(--text2); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ai2-attach-preview .rm{ color:var(--danger); font-size:15px; cursor:pointer; padding:4px; }

.ai2-mode-banner{
  display:none; align-items:center; gap:8px; padding:8px 14px; background:var(--gold-soft);
  border-top:1px solid var(--border); font-size:12px; font-weight:700; color:var(--gold); flex-shrink:0;
}
.ai2-mode-banner.show{ display:flex; }
.ai2-mode-banner .x{ margin-left:auto; cursor:pointer; color:var(--text3); font-weight:400; }

.ai2-composer{
  flex-shrink:0; background:var(--surface); border-top:1px solid var(--border);
  padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px)); display:flex; gap:8px; align-items:flex-end;
  box-shadow:0 -4px 16px rgba(23,26,33,0.05);
}
.ai2-composer input[type=file]{ display:none; }
.ai2-comp-btn{
  width:40px;height:40px;border-radius:50%;background:var(--surface);color:var(--red);
  border:1.5px solid var(--border);cursor:pointer;font-size:15px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  transition:var(--trans);
}
.ai2-comp-btn.active{ background:var(--red); color:#fff; border-color:var(--red); }
.ai2-comp-input{
  flex:1; border:1.5px solid var(--border); border-radius:22px; padding:10px 16px; font-size:14px;
  outline:none; background:var(--off-white); color:var(--text); resize:none; max-height:100px; line-height:1.4;
  font-family:var(--font-body); transition:border-color .15s;
}
.ai2-comp-input:focus{ border-color:var(--red); background:var(--surface); }
.ai2-send-btn{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg, #FF4D5E 0%, var(--red) 55%, var(--red-dark) 100%);
  color:#fff; border:none; cursor:pointer;
  font-size:16px; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:var(--trans);
  box-shadow:0 4px 14px var(--red-glow), inset 0 1px 0 rgba(255,255,255,0.3);
}
.ai2-send-btn:disabled{ opacity:.5; }
.ai2-send-btn:active{ transform:scale(.92); }

@media (min-width:720px){
  .ai2-sidebar{ position:static; transform:none !important; width:280px; max-width:280px; }
  .ai2-sidebar-overlay{ display:none; }
  .ai2-screen{ flex-direction:row; }
  .ai2-header .ai2-icon-btn.ai2-menu-toggle{ display:none; }
}

/* Voice assistant — mic recording pulse + speaker on/off state */
.ai2-comp-btn.ai2-mic-active{
  background:var(--red); color:#fff;
  animation:ai2-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes ai2-mic-pulse{
  0%,100%{ box-shadow:0 0 0 0 var(--red-glow); }
  50%{ box-shadow:0 0 0 8px rgba(226,55,68,0); }
}
.ai2-icon-btn.ai2-voice-on{ color:var(--gold); }