@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:        #080a0f;
  --bg-1:      #0d1017;
  --bg-2:      #111620;
  --bg-3:      #171d2b;
  --border:    rgba(255,255,255,0.06);
  --border-h:  rgba(99,179,255,0.25);

  --accent:    #3b9eff;
  --accent-2:  #7c5cfa;
  --accent-3:  #00e5ff;
  --glow:      rgba(59,158,255,0.18);
  --glow-2:    rgba(124,92,250,0.14);

  --text:      #e2e8f0;
  --text-2:    #8b97ab;
  --text-3:    #4a5568;

  --radius:    10px;
  --radius-lg: 16px;
  --nav-h:     58px;
  --hdr-h:     60px;

  --ease:      cubic-bezier(.22,1,.36,1);
  --fast:      150ms;
  --mid:       280ms;
}

/* ── Reset & base ─────────────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  /* Subtle scanline texture */
  background-image:
    radial-gradient(ellipse 80vw 60vh at 20% -10%, rgba(59,158,255,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60vw 40vh at 85% 90%, rgba(124,92,250,0.06) 0%, transparent 60%);
}

a {
  color: var(--accent-3);
  background: linear-gradient(currentColor 0 0) 
    bottom left/
    var(--underline-width, 0%) 0.1em
    no-repeat;
  display: inline-block;
  text-decoration: none;
  transition: background-size 0.5s;
}

a:hover {
  --underline-width: 100%;
}

/* ── Header ───────────────────────────────────────────────────── */
.header {
  height: var(--hdr-h);
  background: rgba(8,10,15,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  position: sticky;
  top: 0;
  z-index: 200;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--text);
  white-space: nowrap;
  text-transform: uppercase;
}

.logo img { border-radius: 6px; }

/* glowing accent letter */
.logo::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin-left: 2px;
  box-shadow: 0 0 8px var(--accent);
  animation: blink 2s ease-in-out infinite;
}

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.search-container { flex: 1; max-width: 440px; }

.search-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 14px 7px 36px;
  font-size: .88rem;
  outline: none;
  transition: border var(--fast), background var(--fast), box-shadow var(--fast);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%234a5568' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zm-5.242 1.856a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
}

.search-input::placeholder { color: var(--text-3); }
.search-input:focus {
  border-color: rgba(59,158,255,.4);
  background-color: rgba(59,158,255,.04);
  box-shadow: 0 0 0 3px rgba(59,158,255,.08);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 6px 14px;
  border-radius: 7px;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--fast), border var(--fast), color var(--fast), transform var(--fast);
  white-space: nowrap;
}
.btn:hover {
  background: rgba(59,158,255,.12);
  border-color: rgba(59,158,255,.35);
  color: var(--accent);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }

.btn-small { padding: 4px 10px; font-size: .78rem; }

/* accent CTA button */
.btn-accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity var(--fast), transform var(--fast), box-shadow var(--fast);
}
.btn-accent:hover {
  opacity: .9;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(59,158,255,.3);
}

.select-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 6px 10px;
  border-radius: 7px;
  font-size: .82rem;
  cursor: pointer;
  outline: none;
}

/* ── Nav tabs ─────────────────────────────────────────────────── */
.nav-tabs {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: 0 1.5rem;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: var(--hdr-h);
  z-index: 100;
}
.nav-tabs::-webkit-scrollbar { display:none; }

.tab {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-3);
  font-size: .83rem;
  font-weight: 500;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--fast);
  letter-spacing: .01em;
}
.tab:hover {
  color: var(--text-2);
  background: rgba(255,255,255,.04);
}
.tab.active {
  background: rgba(59,158,255,.12);
  border-color: rgba(59,158,255,.25);
  color: var(--accent);
  font-weight: 600;
}

/* ── Main layout ──────────────────────────────────────────────── */
.container { max-width: 1560px; margin: 0 auto; padding: 1.5rem; }

.tab-content { display: none; }
.tab-content.active { display: block; }

.section-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 1rem;
}

/* ── Games grid ───────────────────────────────────────────────── */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.games-grid-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-3) transparent;
}
.games-grid-row .game-card { min-width: 180px; flex-shrink: 0; }

/* ── Game card ────────────────────────────────────────────────── */
.game-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--mid) var(--ease),
              border-color var(--mid),
              box-shadow var(--mid);
}

.game-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--border-h);
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(59,158,255,.1);
}

/* subtle gradient overlay on hover */
.game-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(59,158,255,.06) 100%);
  opacity: 0;
  transition: opacity var(--mid);
  z-index: 1;
  pointer-events: none;
}
.game-card:hover::before { opacity: 1; }

.game-image {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
  background: var(--bg-3);
  transition: transform var(--mid) var(--ease);
}
.game-card:hover .game-image { transform: scale(1.04); }

.game-content {
  padding: .7rem .8rem .75rem;
  position: relative;
  z-index: 2;
}

.game-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-description {
  font-size: .75rem;
  color: var(--text-3);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

.game-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--text-3);
}

/* type badge */
.card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
}
.badge-flash  { background: rgba(255,140,50,.15); color: #ffa040; border:1px solid rgba(255,140,50,.25); }
.badge-html5  { background: rgba(59,158,255,.15);  color: #60b0ff; border:1px solid rgba(59,158,255,.25); }
.badge-online { background: rgba(100,220,130,.15); color: #70e090; border:1px solid rgba(100,220,130,.25); }

.favorite-btn {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: .72rem;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color var(--fast);
}
.favorite-btn:hover, .favorite-btn.favorite { color: #ff6b6b; }

/* ── Mini sections ────────────────────────────────────────────── */
.mini-section {
  margin-bottom: 2rem;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
}

.mini-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .85rem;
}

.mini-section-header h2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* ── Player ───────────────────────────────────────────────────── */
.player-container {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #000;
  flex-direction: column;
}
.player-container.active { display: flex; }

.player-header {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: 1rem;
  background: rgba(8,10,15,0.96);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#playerTitle {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-frame { flex: 1; position: relative; overflow: hidden; }

.player-controls {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
  z-index: 10;
}

.control-btn {
  background: rgba(8,10,15,0.75);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text-2);
  width: 34px; height: 34px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--fast), color var(--fast);
  backdrop-filter: blur(8px);
}
.control-btn:hover { background: rgba(59,158,255,.18); color: var(--accent); }

/* ── Dialogs ──────────────────────────────────────────────────── */
dialog {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  padding: 0;
  max-width: 520px;
  width: 92vw;
  box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
  align-self: center;
  justify-self: center;
  flex-direction: column;
}

dialog::backdrop {
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
}

dialog[open] {
  display: flex;
}

.dialog-header, .dialog-content > .dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.dialog-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

dialog > p {
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
}

.close-btn {
  background: rgba(255,255,255,.05);
  border: none;
  color: var(--text-2);
  width: 28px; height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--fast), color var(--fast);
}
.close-btn:hover { background: rgba(255,100,100,.15); color: #ff6b6b; }

/* ── Settings dialog ──────────────────────────────────────────── */
.settings-group {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.settings-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .88rem;
  color: var(--text-2);
  cursor: pointer;
  gap: 1rem;
}

.settings-group p {
  font-size: .75rem;
  color: var(--text-3);
  line-height: 1.5;
}

/* ── Upload dialog ────────────────────────────────────────────── */
.file-input-wrapper {
  padding: 2rem 1.5rem;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  margin: 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--fast);
  font-size: .9rem;
  color: var(--text-3);
  position: relative;
}
.file-input-wrapper:hover { border-color: rgba(59,158,255,.4); color: var(--accent); }
.file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ── Recently played ──────────────────────────────────────────── */
#recentlyPlayed-Container {
  margin-bottom: 1.5rem;
}
#recentlyPlayed-Container h2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: .75rem;
}

/* ── Loading states ───────────────────────────────────────────── */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 1rem;
  color: var(--text-3);
  font-size: .9rem;
}

.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Status box inside player */
.status-box {
  padding: 1.5rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 1rem;
  font-size: .85rem;
  color: var(--text-2);
}

/* ── Empty state ──────────────────────────────────────────────── */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-3);
  font-size: .9rem;
}

/* ── Load more button ─────────────────────────────────────────── */
.load-more-games {
  background: rgba(59,158,255,.08);
  border: 1px solid rgba(59,158,255,.2);
  color: var(--accent);
  padding: 8px 24px;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--fast), transform var(--fast);
  margin-top: .5rem;
}
.load-more-games:hover { background: rgba(59,158,255,.15); transform: translateY(-1px); }

/* ── Welcome dialog ───────────────────────────────────────────── */
#welcomeDialog {
  border: none;
  border-radius: 16px;
  max-width: 580px;
  text-align: center;
}

#welcomeDialog::backdrop { background: rgba(0,0,0,.8); backdrop-filter: blur(6px); }

.dialog-content { padding: 2rem; }

.welcome-logo { width: 72px; border-radius: 12px; margin-bottom: 1rem; }

.welcome-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-text {
  white-space: pre-line;
  font-size: .88rem;
  color: var(--text-3);
  line-height: 1.7;
  margin-bottom: 1.75rem;
  text-align: left;
}
.welcome-text b { color: var(--text-2); font-size: .9rem; }

#welcomeBtn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none;
  color: #fff;
  padding: 10px 28px;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 600;
  cursor: not-allowed;
  opacity: .5;
  transition: opacity var(--fast), transform var(--fast), box-shadow var(--fast);
  position: relative;
  overflow: hidden;
}
#welcomeBtn.enabled {
  cursor: pointer;
  opacity: 1;
}
#welcomeBtn.enabled:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(59,158,255,.35);
}

/* Progress bar for welcome timer */
#welcomeBtn::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  background: rgba(255,255,255,.4);
  width: 0;
  transition: width 10s linear;
}
#welcomeBtn.counting::after { width: 100%; }

/* ── Themes ───────────────────────────────────────────────────── */
[theme="space"] {
  --accent: #a78bfa;
  --accent-2: #818cf8;
  --border-h: rgba(167,139,250,.25);
  --glow: rgba(167,139,250,.18);
  background-image:
    radial-gradient(ellipse 80vw 60vh at 20% -10%, rgba(167,139,250,.06) 0%, transparent 60%),
    radial-gradient(ellipse 60vw 40vh at 85% 90%, rgba(129,140,248,.04) 0%, transparent 60%);
}

[theme="retro"] {
  --accent: #f97316;
  --accent-2: #fbbf24;
  --bg: #0a0800;
  --bg-1: #100e00;
  --bg-2: #161200;
  --border-h: rgba(249,115,22,.25);
}

[theme="neon"] {
  --accent: #22d3ee;
  --accent-2: #86efac;
  --border-h: rgba(34,211,238,.25);
  --glow: rgba(34,211,238,.18);
}

[theme="matrix"] {
  --accent: #4ade80;
  --accent-2: #22c55e;
  --bg: #000800;
  --bg-1: #001200;
  --border-h: rgba(74,222,128,.25);
}

[theme="vapor"] {
  --accent: #f472b6;
  --accent-2: #c084fc;
  --border-h: rgba(244,114,182,.25);
  --glow: rgba(244,114,182,.18);
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 700px) {
  .header { padding: 0 .75rem; gap: .75rem; }
  .logo span { display: none; }
  .search-container { max-width: 200px; }
  .games-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .container { padding: 1rem .75rem; }
}

/* ── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-h); }

/* ── Utility ──────────────────────────────────────────────────── */
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ── FAB ────────────────────────────────────────────── */
#aiImportFab {
  position:fixed;bottom:40px;right:40px;
  display:flex;align-items:center;gap:8px;padding:0 16px 0 12px;height:44px;
  border-radius:22px;border:none;cursor:pointer;white-space:nowrap;
  background:linear-gradient(135deg,#4a9eff 0%,#7b5cfa 100%);
  color:#fff;font-size:.85rem;font-weight:600;
  box-shadow:0 4px 18px rgba(74,158,255,.45);
  transition:transform .2s,box-shadow .2s;
}
#aiImportFab:hover{transform:translateY(-2px);box-shadow:0 6px 26px rgba(74,158,255,.6)}
.aic-fab-icon{font-size:1.15rem}
@media(max-width:480px){.aic-fab-text{display:none}#aiImportFab{width:44px;border-radius:50%;padding:0;justify-content:center}}

/* ── DIALOG ─────────────────────────────────────────── */
#aiImportDialog{
  position:fixed;inset:0;margin:auto;
  width:min(96vw,510px);max-height:min(88vh,740px);
  border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:0;
  background:rgba(11,11,18,.97);backdrop-filter:blur(28px);
  box-shadow:0 32px 80px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.06);
  color:#e0e0e0;font-family:system-ui,sans-serif;overflow:hidden;height:500px;
}
#aiImportDialog::backdrop{background:rgba(0,0,0,.65);backdrop-filter:blur(5px)}
.aic-shell{display:flex;flex-direction:column;height:50%;min-height:500px;}

/* ── HEADER ─────────────────────────────────────────── */
.aic-head{
  display:flex;align-items:center;gap:10px;
  padding:13px 15px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(74,158,255,.1) 0%,rgba(123,92,250,.06) 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.aic-head-avatar{font-size:1.5rem;line-height:1}
.aic-head-title{font-size:.95rem;font-weight:700}
.aic-head-status{font-size:.72rem;color:#777;margin-top:1px}
.aic-head-close{margin-left:auto;background:none;border:none;color:#666;font-size:1.05rem;cursor:pointer;
  padding:4px 8px;border-radius:8px;transition:all .15s}
.aic-head-close:hover{color:#fff;background:rgba(255,255,255,.08)}

/* ── MESSAGES ───────────────────────────────────────── */
.aic-messages{
  flex:1;overflow-y:auto;padding:14px 14px 6px;
  display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;
  min-height:80px;
}
.aic-messages::-webkit-scrollbar{width:4px}
.aic-messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}

/* Burbujas */
.aic-bub{max-width:88%;padding:10px 13px;font-size:.875rem;line-height:1.6;
  word-break:break-word;animation:aicIn .2s ease}
.aic-bub-b{align-self:flex-start;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.07);border-radius:4px 14px 14px 14px}
.aic-bub-u{align-self:flex-end;background:linear-gradient(135deg,#1d56c5,#4a9eff);
  color:#fff;border-radius:14px 4px 14px 14px}
@keyframes aicIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Markdown inside bubbles */
.aic-bub strong{color:#fff}
.aic-bub em{color:#c0d8ff}
.aic-bub a.aic-link{color:#4a9eff;text-decoration:underline}
.aic-bub code.aic-code{background:rgba(255,255,255,.12);padding:1px 5px;border-radius:4px;font-size:.8rem;font-family:monospace}
.aic-bub pre.aic-pre{background:rgba(0,0,0,.35);border-radius:8px;padding:10px;overflow-x:auto;margin:6px 0}
.aic-bub pre.aic-pre code{background:none;padding:0;font-size:.8rem}
.aic-bub h2.aic-h,
.aic-bub h3.aic-h,
.aic-bub h4.aic-h{margin:6px 0 2px;color:#fff;font-size:.9rem}
.aic-bub ul.aic-ul{padding-left:18px;margin:4px 0}
.aic-bub ul.aic-ul li{margin:2px 0}
.aic-bub hr.aic-hr{border:none;border-top:1px solid rgba(255,255,255,.12);margin:8px 0}
.aic-bub blockquote.aic-bq{border-left:3px solid #4a9eff;padding-left:10px;margin:4px 0;color:#aaa;font-style:italic}

/* Cursor streaming */
.aic-cur{display:inline-block;width:2px;height:.9em;background:#4a9eff;
  vertical-align:middle;margin-left:2px;animation:aicBlink .55s step-end infinite}
@keyframes aicBlink{0%,100%{opacity:1}50%{opacity:0}}

/* URL chip */
.aic-url-chip{background:rgba(74,158,255,.08);border:1px solid rgba(74,158,255,.2);
  border-radius:10px;padding:9px 12px;font-size:.8rem;color:#aaa;
  animation:aicIn .2s ease;align-self:flex-start;max-width:100%;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.5;position:absolute;bottom:65px;}
.aic-url-chip-btn{background:rgba(74,158,255,.2);border:none;color:#4a9eff;
  padding:3px 10px;border-radius:6px;cursor:pointer;font-size:.78rem;
  transition:background .15s;white-space:nowrap}
.aic-url-chip-btn:hover{background:rgba(74,158,255,.35)}
.aic-url-chip-btn2{background:rgba(255,255,255,.06);color:#777;
  border:none;padding:3px 10px;border-radius:6px;cursor:pointer;font-size:.78rem;
  transition:background .15s;white-space:nowrap}
.aic-url-chip-btn2:hover{background:rgba(255,255,255,.12);color:#aaa}
.aic-scan-info{background:rgba(74,158,255,.06);border:1px solid rgba(74,158,255,.12);
  font-size:.8rem;color:#888}

/* ── THINKING INDICATOR ─────────────────────────────── */
.aic-thinking{
  display:flex;align-items:center;gap:8px;
  background:rgba(123,92,250,.07);border-color:rgba(123,92,250,.15);
  padding:12px 14px;
}
.aic-think-label{font-size:.8rem;color:#999;transition:all .3s}
.aic-dots{display:flex;gap:4px;align-items:center;flex-shrink:0}
.aic-dots span{
  width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,#7b5cfa,#4a9eff);
  animation:aicDot 1.2s ease-in-out infinite;
  transform:scale(0.8);
}
.aic-dots span:nth-child(1){animation-delay:0s}
.aic-dots span:nth-child(2){animation-delay:.2s}
.aic-dots span:nth-child(3){animation-delay:.4s}
@keyframes aicDot{
  0%,60%,100%{transform:scale(0.8);opacity:.4}
  30%{transform:scale(1.25);opacity:1}
}

/* ── PREVIEW/EDITOR ─────────────────────────────────── */
.aic-preview{border-top:1px solid rgba(255,255,255,.07);max-height:320px;overflow-y:auto;flex-shrink:0}
.aic-preview::-webkit-scrollbar{width:4px}
.aic-preview::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}
.aic-editor{padding:13px;display:flex;flex-direction:column;gap:7px}
.aic-ed-hdr{display:flex;justify-content:space-between;align-items:center;
  font-size:.78rem;font-weight:600;color:#888;margin-bottom:2px}
.aic-ed-x{background:none;border:none;color:#666;cursor:pointer;font-size:.95rem;
  padding:2px 6px;border-radius:6px;transition:color .15s}
.aic-ed-x:hover{color:#fff}
.aic-label{font-size:.74rem;color:#777;margin-bottom:-3px}
.aic-req{color:#f77}
.aic-opt{color:#555}
.aic-field{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:#e0e0e0;border-radius:8px;padding:8px 10px;font-size:.84rem;
  width:100%;outline:none;font-family:inherit;transition:border-color .15s}
.aic-field:focus{border-color:rgba(74,158,255,.7);background:rgba(74,158,255,.07)}
.aic-field.aic-err{border-color:#f77}
.aic-ta{resize:none;min-height:48px;max-height:70px}
.aic-chars{font-size:.7rem;color:#555;text-align:right;margin-top:-4px}
/* Thumb */
.aic-ed-thumb-row{display:flex;gap:10px;align-items:flex-start}
.aic-ed-thumb{width:58px;height:58px;flex-shrink:0;border-radius:8px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;overflow:hidden}
.aic-ed-thumb img{width:100%;height:100%;object-fit:cover}
.aic-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#555}
.aic-ph.hidden{display:none}
/* Tags */
.aic-tags-wrap{display:flex;flex-wrap:wrap;gap:4px;align-items:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:8px;padding:5px 7px;min-height:32px}
.aic-tag{display:flex;align-items:center;gap:2px;background:rgba(74,158,255,.18);
  color:#4a9eff;border-radius:99px;padding:1px 8px 1px 10px;font-size:.76rem;
  border:1px solid rgba(74,158,255,.3)}
.aic-tag-rm{background:none;border:none;color:#4a9eff;cursor:pointer;font-size:.9rem;
  padding:0;opacity:.7;line-height:1}
.aic-tag-rm:hover{opacity:1}
.aic-tag-in{background:none;border:none;color:#e0e0e0;font-size:.8rem;
  outline:none;min-width:60px;padding:1px 3px;font-family:inherit}
.aic-tags-sugg{display:flex;flex-wrap:wrap;gap:3px}
.aic-tag-s{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:#777;border-radius:99px;padding:2px 9px;font-size:.73rem;cursor:pointer;
  transition:all .15s}
.aic-tag-s:hover,.aic-tag-s.used{background:rgba(74,158,255,.15);color:#4a9eff;
  border-color:rgba(74,158,255,.4)}
/* Actions */
.aic-ed-actions{display:flex;gap:8px;margin-top:3px}
.aic-btn-ok{flex:1;padding:8px;border-radius:10px;border:none;font-size:.84rem;font-weight:600;
  background:linear-gradient(135deg,#1a55c5,#4a9eff);color:#fff;cursor:pointer;
  box-shadow:0 2px 10px rgba(74,158,255,.3);transition:all .15s}
.aic-btn-ok:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(74,158,255,.45)}
.aic-btn-ok:disabled{opacity:.55;transform:none;cursor:not-allowed}
.aic-btn-no{flex:0 0 auto;padding:8px 14px;border-radius:10px;border:none;
  background:rgba(255,255,255,.07);color:#aaa;cursor:pointer;font-size:.84rem;transition:all .15s}
.aic-btn-no:hover{background:rgba(255,255,255,.13);color:#fff}

/* ── COMMAND PANEL (Discord-style) ──────────────────── */
.aic-cmd-panel{
  position:absolute;bottom:58px;left:0;right:0;
  background:rgba(14,14,20,.98);border-top:1px solid rgba(255,255,255,.08);
  border-radius:0 0 0 0;
  box-shadow:0 -8px 30px rgba(0,0,0,.5);
  display:none;overflow:hidden;z-index:10;
  animation:cmdSlideIn .18s ease;
  max-height:260px;overflow-y:auto;
}
.aic-cmd-panel::-webkit-scrollbar{width:4px}
.aic-cmd-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}
@keyframes cmdSlideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.aic-cmd-item{
  width:100%;background:none;border:none;color:#ccc;cursor:pointer;
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  text-align:left;transition:background .12s;
}
.aic-cmd-item:hover,.aic-cmd-item.aic-cmd-active{background:rgba(74,158,255,.12);color:#fff}
.aic-cmd-icon{font-size:1.1rem;width:24px;text-align:center;flex-shrink:0}
.aic-cmd-text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.aic-cmd-name{font-size:.85rem;font-weight:600;color:#4a9eff}
.aic-cmd-hint{font-size:.72rem;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aic-cmd-label{font-size:.76rem;color:#888;white-space:nowrap}

/* ── FOOTER / INPUT ─────────────────────────────────── */
.aic-foot{
  padding:8px 12px 12px;
  border-top:1px solid rgba(255,255,255,.06);
  flex-shrink:0;position:relative;
}
.aic-input-wrap{display:flex;gap:6px;align-items:center}
.aic-slash-btn{
  width:32px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);color:#666;font-size:.95rem;font-weight:700;
  cursor:pointer;flex-shrink:0;transition:all .15s;display:flex;align-items:center;justify-content:center;
}
.aic-slash-btn:hover{background:rgba(74,158,255,.15);color:#4a9eff;border-color:rgba(74,158,255,.4)}
.aic-input-inner{flex:1;position:relative}
.aic-input{
  width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:#e0e0e0;border-radius:10px;padding:9px 12px;font-size:.875rem;
  outline:none;font-family:inherit;transition:border-color .15s;
}
.aic-input:focus{border-color:rgba(74,158,255,.6);background:rgba(74,158,255,.07)}
.aic-input::placeholder{color:#444}
.aic-spin{
  width:18px;height:18px;flex-shrink:0;
  opacity:0;transition:opacity .2s;
}
.aic-spin-ring{width:18px;height:18px;border:2px solid rgba(255,255,255,.1);
  border-top-color:#4a9eff;border-radius:50%;animation:aicSpin .65s linear infinite}
@keyframes aicSpin{to{transform:rotate(360deg)}}
.aic-send{
  width:38px;height:38px;border-radius:10px;border:none;flex-shrink:0;
  background:linear-gradient(135deg,#1d56c5,#4a9eff);color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(74,158,255,.35);transition:all .15s;
}
.aic-send svg{width:15px;height:15px}
.aic-send:hover{transform:scale(1.07);box-shadow:0 4px 14px rgba(74,158,255,.5)}
.aic-send:disabled{opacity:.4;transform:none;cursor:not-allowed;box-shadow:none}

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons-round {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 15x;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}