/* StudentVerse AI custom styles */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.dark .glass {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.card {
  border-radius: 1.25rem;
  box-shadow: 0 4px 24px -8px rgba(79, 70, 229, 0.12);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { box-shadow: 0 8px 32px -8px rgba(79, 70, 229, 0.22); }
.card-click:hover { transform: translateY(-3px); cursor: pointer; }

/* PPT slide image placeholder */
.pp-img-loading { background: linear-gradient(110deg, #eef2ff 30%, #e0e7ff 45%, #eef2ff 60%); background-size: 200% 100%; animation: pp-shimmer 1.4s infinite; }
.dark .pp-img-loading { background: linear-gradient(110deg, #1e1b4b 30%, #312e81 45%, #1e1b4b 60%); background-size: 200% 100%; animation: pp-shimmer 1.4s infinite; }
@keyframes pp-shimmer { to { background-position: -200% 0; } }

/* Markdown rendering */
.prose-sv { line-height: 1.7; font-size: .95rem; }
.prose-sv h1, .prose-sv h2 { font-weight: 800; margin: 1.2em 0 .5em; font-size: 1.25rem; color: #4338ca; }
.dark .prose-sv h1, .dark .prose-sv h2 { color: #a5b4fc; }
.prose-sv h3, .prose-sv h4 { font-weight: 700; margin: 1em 0 .4em; font-size: 1.05rem; }
.prose-sv p { margin: .75em 0; }
.prose-sv blockquote p { margin: .35em 0; }
.prose-sv ul, .prose-sv ol { margin: .5em 0 .5em 1.4em; }
.prose-sv ul { list-style: disc; }
.prose-sv ol { list-style: decimal; }
.prose-sv li { margin: .25em 0; }
.prose-sv strong { color: #4f46e5; }
.dark .prose-sv strong { color: #c7d2fe; }
.prose-sv table { border-collapse: collapse; margin: .8em 0; width: 100%; font-size: .9rem; }
.prose-sv th, .prose-sv td { border: 1px solid #c7d2fe; padding: .45em .7em; text-align: left; }
.dark .prose-sv th, .dark .prose-sv td { border-color: #3730a3; }
.prose-sv th { background: #eef2ff; font-weight: 700; }
.dark .prose-sv th { background: #1e1b4b; }
.prose-sv code { background: #eef2ff; padding: .1em .35em; border-radius: .3em; font-size: .85em; }
.dark .prose-sv code { background: #312e81; }
.prose-sv pre { background: #1e1b4b; color: #e0e7ff; padding: .8em 1em; border-radius: .7em; overflow-x: auto; margin: .8em 0; }
.prose-sv pre code { background: transparent; padding: 0; }
.prose-sv hr { border: none; border-top: 2px dashed #c7d2fe; margin: 1.2em 0; }
.prose-sv blockquote { border-left: 4px solid #6366f1; padding-left: 1em; color: #64748b; margin: .8em 0; }

/* nav */
.nav-item { transition: all .18s ease; border-radius: .9rem; }
.nav-item.active { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white !important; box-shadow: 0 4px 14px -4px rgba(99, 102, 241, .5); }
.nav-item:not(.active):hover { background: rgba(99, 102, 241, .1); }

/* inputs */
.inp {
  width: 100%; padding: .7rem 1rem; border-radius: .9rem;
  border: 1.5px solid #e2e8f0; background: rgba(255,255,255,.8); outline: none;
  transition: border-color .15s, box-shadow .15s; font-size: .95rem;
}
.inp:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.dark .inp { background: rgba(30,41,59,.8); border-color: #334155; color: #f1f5f9; }
.btn-primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white;
  padding: .7rem 1.5rem; border-radius: .9rem; font-weight: 700;
  transition: all .18s ease; box-shadow: 0 4px 14px -4px rgba(99,102,241,.5);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px -4px rgba(99,102,241,.6); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-ghost {
  padding: .6rem 1.2rem; border-radius: .9rem; font-weight: 600;
  border: 1.5px solid #e2e8f0; transition: all .15s;
}
.btn-ghost:hover { border-color: #6366f1; color: #4f46e5; }
.dark .btn-ghost { border-color: #334155; }

/* chips */
.chip { padding: .35rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1.5px solid #e2e8f0; cursor: pointer; transition: all .15s; }
.chip.active { background: #6366f1; color: white; border-color: #6366f1; }
.dark .chip { border-color: #334155; }

/* loader */
.sv-loader { display: inline-block; width: 1.4em; height: 1.4em; border: 3px solid #c7d2fe; border-top-color: #6366f1; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* heatmap */
.heat-cell { width: 14px; height: 14px; border-radius: 3px; }

/* ===== enhanced dashboard ===== */
.hero-bg { background: linear-gradient(130deg, #4f46e5 0%, #7c3aed 45%, #a855f7 75%, #6366f1 100%); }
.dark .hero-bg { background: linear-gradient(130deg, #312e81 0%, #4c1d95 45%, #581c87 75%, #3730a3 100%); }
.hero-orb { position: absolute; border-radius: 9999px; filter: blur(40px); opacity: .35; pointer-events: none; animation: orbFloat 9s ease-in-out infinite; }
.hero-orb-1 { width: 220px; height: 220px; background: #f0abfc; top: -80px; right: -40px; }
.hero-orb-2 { width: 160px; height: 160px; background: #67e8f9; bottom: -70px; left: 15%; animation-delay: -3s; }
.hero-orb-3 { width: 120px; height: 120px; background: #fde047; top: 30%; right: 30%; animation-delay: -6s; opacity: .22; }
@keyframes orbFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-18px) scale(1.08); } }
.hero-stat { min-width: 84px; padding: .7rem .9rem; border-radius: 1rem; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.22); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.hero-stat-lbl { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(224,231,255,.85); }
.stat-ic { width: 36px; height: 36px; border-radius: .75rem; display: flex; align-items: center; justify-content: center; font-size: .95rem; }
.stat-badge { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 9999px; background: #e0e7ff; color: #4f46e5; }
.dark .stat-badge { background: rgba(99,102,241,.25); color: #a5b4fc; }
.stat-card { transition: transform .2s, box-shadow .2s; }
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -10px rgba(79,70,229,.25); }
.qa-tile { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem .5rem; border-radius: 1rem; border: 1px solid rgba(148,163,184,.18); background: rgba(255,255,255,.5); transition: transform .18s, box-shadow .18s, border-color .18s; }
.dark .qa-tile { background: rgba(30,41,59,.5); }
.qa-tile:hover { transform: translateY(-3px); border-color: rgba(99,102,241,.45); box-shadow: 0 10px 24px -10px rgba(99,102,241,.35); }
.bar-anim { animation: barGrow .8s cubic-bezier(.22,1,.36,1) backwards; transform-origin: bottom; }
@keyframes barGrow { from { transform: scaleY(0); } }

/* ===== Sparky chatbot ===== */
#sv-chat-fab { position: fixed; right: 18px; bottom: 84px; z-index: 110; width: 56px; height: 56px; border-radius: 9999px;
  background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px -6px rgba(99,102,241,.55); transition: transform .2s; cursor: pointer; }
#sv-chat-fab:hover { transform: scale(1.08); }
@media (min-width: 1024px) { #sv-chat-fab { bottom: 24px; } }
.sv-chat-ping { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 9999px; background: #34d399; border: 2px solid #fff; animation: pingDot 2s ease-in-out infinite; pointer-events: none; }
@keyframes pingDot { 0%,100% { transform: scale(1); } 50% { transform: scale(1.35); } }
#sv-chat-panel { position: fixed; z-index: 105;
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(255,255,255,.96); backdrop-filter: blur(20px); border: 1px solid rgba(148,163,184,.25);
  box-shadow: 0 24px 60px -12px rgba(30,27,75,.35); animation: chatIn .25s cubic-bezier(.22,1,.36,1); }
#sv-chat-panel.hidden { display: none; }
.dark #sv-chat-panel { background: rgba(15,23,42,.97); border-color: rgba(99,102,241,.3); }
/* MOBILE: full-screen sheet (uses dvh so browser toolbars don't hide the input) */
@media (max-width: 1023px) {
  #sv-chat-panel { inset: 0; width: 100%; height: 100dvh; border-radius: 0; border: none; }
  body.sv-chat-open { overflow: hidden; } /* lock page scroll behind sheet */
  body.sv-chat-open #sv-chat-fab { display: none; } /* FAB hidden while sheet open; close via header ✕ */
}
/* DESKTOP: floating card */
@media (min-width: 1024px) {
  #sv-chat-panel { right: 14px; bottom: 92px; width: min(480px, calc(100vw - 28px)); height: min(700px, calc(100vh - 120px)); border-radius: 1.4rem; }
}
@keyframes chatIn { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.sv-chat-head { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; flex-shrink: 0;
  padding-top: calc(.8rem + env(safe-area-inset-top)); }
.sv-chat-hbtn { width: 38px; height: 38px; border-radius: .6rem; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sv-chat-hbtn:hover { background: rgba(255,255,255,.3); }
#sv-chat-msgs { flex: 1; overflow-y: auto; padding: 1rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
.sv-msg { max-width: 88%; padding: .6rem .9rem; border-radius: 1rem; font-size: 14px; line-height: 1.6; word-break: break-word; }
.sv-msg-a { max-width: 94%; }
.sv-msg-u { align-self: flex-end; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; border-bottom-right-radius: .3rem; }
.sv-msg-a { align-self: flex-start; background: #f1f5f9; color: #1e293b; border-bottom-left-radius: .3rem; }
.dark .sv-msg-a { background: #1e293b; color: #e2e8f0; }
.sv-msg-a .prose-sv p { margin: .25em 0; }
.sv-typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.sv-typing i { width: 6px; height: 6px; border-radius: 9999px; background: #94a3b8; animation: typeDot 1.2s infinite; }
.sv-typing i:nth-child(2) { animation-delay: .18s; } .sv-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes typeDot { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.sv-sugg { font-size: 11px; font-weight: 700; padding: .35rem .7rem; border-radius: 9999px; background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe; }
.dark .sv-sugg { background: rgba(99,102,241,.18); color: #a5b4fc; border-color: rgba(99,102,241,.35); }
.sv-sugg:hover { background: #e0e7ff; }
.sv-chat-input { display: flex; gap: .5rem; padding: .7rem .8rem; border-top: 1px solid rgba(148,163,184,.2);
  flex-shrink: 0; padding-bottom: calc(.7rem + env(safe-area-inset-bottom)); }
.sv-chat-input input { flex: 1; padding: .55rem .9rem; border-radius: .9rem; font-size: 13px; background: #f1f5f9; border: 1px solid transparent; outline: none; color: inherit; }
.sv-chat-input input:focus { border-color: #818cf8; background: #fff; }
.dark .sv-chat-input input { background: #1e293b; } .dark .sv-chat-input input:focus { background: #0f172a; }
.sv-chat-input button { width: 40px; height: 40px; border-radius: .9rem; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; flex-shrink: 0; }
.sv-chat-input #sv-chat-img { background: #e2e8f0; color: #64748b; }
.sv-chat-input #sv-chat-img:hover { background: #c7d2fe; color: #4f46e5; }
.dark .sv-chat-input #sv-chat-img { background: #334155; color: #cbd5e1; }
.dark .sv-chat-input #sv-chat-img:hover { background: #4338ca; color: #e0e7ff; }

/* Sparky chat markdown formatting + typewriter caret */
.sv-caret { display: inline-block; width: 2px; height: 1em; background: #818cf8; margin-left: 2px; vertical-align: -0.15em; animation: svblink .8s steps(1) infinite; }
@keyframes svblink { 50% { opacity: 0; } }
.sv-chat-md { word-break: break-word; }
.sv-chat-md h1, .sv-chat-md h2, .sv-chat-md h3, .sv-chat-md h4 { font-size: .95em; font-weight: 800; margin: .6em 0 .3em; }
.sv-chat-md p { margin: .4em 0; }
.sv-chat-md p:first-child { margin-top: 0; }
.sv-chat-md p:last-child { margin-bottom: 0; }
.sv-chat-md ul, .sv-chat-md ol { margin: .4em 0 .4em 1.15em; padding-left: .2em; }
.sv-chat-md ul { list-style: disc; } .sv-chat-md ol { list-style: decimal; }
.sv-chat-md li { margin: .2em 0; }
.sv-chat-md strong { font-weight: 800; color: #4f46e5; }
.dark .sv-chat-md strong { color: #a5b4fc; }
.sv-chat-md code { background: rgba(99,102,241,.12); padding: .1em .35em; border-radius: .3rem; font-size: .9em; }
.sv-chat-md pre { background: #0f172a; color: #e2e8f0; padding: .6em .8em; border-radius: .6rem; overflow-x: auto; margin: .5em 0; font-size: .85em; }
.sv-chat-md pre code { background: transparent; padding: 0; }
.sv-chat-md table { display: block; overflow-x: auto; font-size: .85em; margin: .5em 0; border-collapse: collapse; }
.sv-chat-md th, .sv-chat-md td { border: 1px solid rgba(148,163,184,.35); padding: .25em .5em; }
.sv-chat-md blockquote { border-left: 3px solid #818cf8; padding-left: .6em; margin: .4em 0; opacity: .9; }
.sv-chat-md hr { display: none; }

/* print mode for papers */
@media print {
  body * { visibility: hidden; }
  #print-area, #print-area * { visibility: visible; }
  #print-area { position: absolute; left: 0; top: 0; width: 100%; padding: 1cm; background: white !important; color: black !important; }
  .no-print { display: none !important; }
}

/* PDF export: force light, print-friendly colors regardless of dark mode */
.pdf-export, .pdf-export * { color: #111 !important; background: transparent !important; }
.pdf-export { background: #fff !important; font-size: 12.5px; line-height: 1.75; padding: 0 4px; }
.pdf-export p { margin: .85em 0 !important; }
.pdf-export li { margin: .4em 0 !important; line-height: 1.65; }
.pdf-export ul, .pdf-export ol { margin: .7em 0 .7em 1.5em !important; }
.pdf-export h1, .pdf-export h2 { margin: 1.4em 0 .6em !important; padding-bottom: .25em; border-bottom: 1.5px solid #c7d2fe !important; }
.pdf-export h3, .pdf-export h4 { margin: 1.1em 0 .45em !important; }
.pdf-export blockquote { background: #f8fafc !important; border-left: 3px solid #6366f1 !important; padding: .6em .9em !important; margin: .9em 0 !important; border-radius: 0 6px 6px 0; }
.pdf-export hr { margin: 1.4em 0 !important; }
.pdf-export table { margin: 1em 0 !important; }
.pdf-export .katex-display { margin: .9em 0 !important; }
.pdf-export h1, .pdf-export h2 { color: #312e81 !important; }
.pdf-export strong { color: #4338ca !important; }
.pdf-export th { background: #eef2ff !important; }
.pdf-export th, .pdf-export td { border-color: #94a3b8 !important; }
.pdf-export pre, .pdf-export code { background: #f1f5f9 !important; }
.pdf-export .katex { color: #111 !important; }

/* PDF pagination: keep logical blocks together, break cleanly between them */
.pdf-export h1, .pdf-export h2, .pdf-export h3, .pdf-export h4 { page-break-after: avoid; break-after: avoid; page-break-inside: avoid; }
.pdf-export p, .pdf-export li, .pdf-export tr, .pdf-export blockquote,
.pdf-export .katex-display, .pdf-export pre, .pdf-export img { page-break-inside: avoid; break-inside: avoid; }
/* a question paragraph (starts with bold Qn/number) keeps its options block attached */
.pdf-export p:has(> strong:first-child) { page-break-after: avoid; break-after: avoid; }
.pdf-export table { page-break-inside: auto; }
.pdf-export hr { page-break-after: auto; border-color: #cbd5e1 !important; }
.pdf-export ul, .pdf-export ol { orphans: 3; widows: 3; }

/* PDF document header (first page) */
.pdf-export .pdf-doc-head { text-align: center; margin-bottom: 14px; page-break-after: avoid; }
.pdf-export .pdf-brand { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: #6366f1 !important; text-transform: uppercase; }
.pdf-export .pdf-logo { font-size: 14px; }
.pdf-export .pdf-title { font-size: 21px; font-weight: 800; color: #1e1b4b !important; margin-top: 5px; }
.pdf-export .pdf-meta { font-size: 10.5px; color: #64748b !important; margin-top: 5px; }
.pdf-export .pdf-rule { border: none; border-top: 2.5px solid #4f46e5 !important; margin-top: 10px; }

/* KaTeX sizing inside answers */
.prose-sv .katex { font-size: 1.05em; }
.prose-sv .katex-display { margin: .8em 0; overflow-x: auto; overflow-y: hidden; padding: .3em 0; }
.math-fallback { font-family: monospace; background: #eef2ff; padding: .4em .8em; border-radius: .5em; margin: .5em 0; }
.dark .math-fallback { background: #312e81; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb { background: #3730a3; }

/* Official specimen paper cards */
.spec-btn { width: 30px; height: 30px; border-radius: .55rem; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; transition: transform .15s; }
.spec-btn:hover { transform: scale(1.08); }
.specimen-card { transition: border-color .2s, box-shadow .2s; }
.specimen-card:hover { border-color: #818cf8; box-shadow: 0 4px 14px rgba(99,102,241,.12); }

/* Sparky Deep Research */
#sv-chat-deepbar { display: flex; }
#sv-chat-deep, #sv-chat-imgen { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; padding: .32rem .7rem; border-radius: 9999px; background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; transition: all .2s; }
.dark #sv-chat-deep, .dark #sv-chat-imgen { background: #1e293b; color: #94a3b8; border-color: #334155; }
#sv-chat-deep b, #sv-chat-imgen b { font-size: 9px; padding: 1px 6px; border-radius: 9999px; background: #cbd5e1; color: #475569; }
#sv-chat-deep.sv-deep-on { background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(124,58,237,.35); }
#sv-chat-imgen.sv-deep-on { background: linear-gradient(135deg, #ec4899, #f97316); color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(236,72,153,.35); }
#sv-chat-deep.sv-deep-on b, #sv-chat-imgen.sv-deep-on b { background: rgba(255,255,255,.25); color: #fff; }
.sv-deep-tag { align-self: flex-start; font-size: 10px; font-weight: 700; color: #7c3aed; background: #f5f3ff; border: 1px solid #ddd6fe; padding: .25rem .6rem; border-radius: 9999px; }
.dark .sv-deep-tag { background: rgba(124,58,237,.15); border-color: rgba(124,58,237,.4); color: #c4b5fd; }

/* ===== Mobile-friendly AI result / sample paper output ===== */
.prose-sv { word-break: break-word; overflow-wrap: anywhere; }
/* tables: horizontal scroll instead of breaking the layout on phones */
.prose-sv table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; white-space: normal; }
.prose-sv th, .prose-sv td { min-width: 90px; }
/* long equations scroll instead of overflowing off-screen */
.prose-sv .katex-display { overflow-x: auto; overflow-y: hidden; max-width: 100%; padding: .2em 0; }
.prose-sv .katex { font-size: 1.02em; }
.prose-sv img { max-width: 100%; height: auto; }
.prose-sv pre { max-width: 100%; }
.prose-sv blockquote { max-width: 100%; overflow-x: auto; }

@media (max-width: 640px) {
  #ai-result .card { padding: 1rem !important; }
  .prose-sv { font-size: .875rem; line-height: 1.65; }
  .prose-sv h1, .prose-sv h2 { font-size: 1.05rem; }
  .prose-sv h3, .prose-sv h4 { font-size: .95rem; }
  .prose-sv table { font-size: .78rem; }
  .prose-sv th, .prose-sv td { padding: .35em .5em; min-width: 70px; }
  .prose-sv ul, .prose-sv ol { margin-left: 1.1em; }
  .prose-sv .katex { font-size: .95em; }
  /* result toolbar wraps neatly on small screens */
  #ai-result .no-print { flex-wrap: wrap; gap: .5rem; }
  #ai-result .no-print > div { flex-wrap: wrap; }
}

/* Sparky answer action bar (copy / share) */
.sv-msg-acts { display: flex; gap: .4rem; margin-top: .5rem; padding-top: .4rem; border-top: 1px dashed rgba(148,163,184,.35); }
.sv-act-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: .28rem .6rem; border-radius: 9999px; background: rgba(99,102,241,.1); color: #6366f1; transition: all .15s; }
.sv-act-btn:hover { background: rgba(99,102,241,.22); }
.dark .sv-act-btn { background: rgba(99,102,241,.18); color: #a5b4fc; }
.sv-act-btn.copied { background: #d1fae5; color: #059669; }
.dark .sv-act-btn.copied { background: rgba(5,150,105,.25); color: #6ee7b7; }

/* specimen action buttons — labelled pills, comfortable on touch */
.spec-act { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: #fff; padding: .42rem .7rem; border-radius: .6rem; transition: transform .15s, filter .15s; white-space: nowrap; }
.spec-act:hover { transform: translateY(-1px); filter: brightness(1.08); }
.spec-act i { font-size: 10px; }
@media (max-width: 640px) {
  #specimen-section { padding: 1rem !important; }
  #specimen-section h2 { font-size: 1rem; }
  .spec-act { flex: 1; justify-content: center; padding: .5rem .4rem; }
}

/* ===== SparkyVoice: Voice Studio + mic ===== */
#sv-voice-studio { position: fixed; z-index: 220; width: 250px; padding: .9rem; border-radius: 1rem;
  background: rgba(255,255,255,.98); border: 1px solid rgba(148,163,184,.3); box-shadow: 0 18px 44px -10px rgba(30,27,75,.35);
  backdrop-filter: blur(14px); animation: chatIn .2s cubic-bezier(.22,1,.36,1); }
.dark #sv-voice-studio { background: rgba(15,23,42,.98); border-color: rgba(99,102,241,.35); }
.vs-lbl { display: flex; justify-content: space-between; font-size: 9.5px; font-weight: 900; letter-spacing: .06em; color: #94a3b8; margin-bottom: 2px; }
.vs-lbl span { color: #6366f1; }

/* mic recording pulse */
.sv-mic-live { background: linear-gradient(135deg, #ef4444, #f97316) !important; color: #fff !important; animation: micPulse 1.1s infinite; }
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.45); } 55% { box-shadow: 0 0 0 9px rgba(239,68,68,0); } }

/* message currently being narrated */
.sv-msg.sv-voice-live { outline: 2px solid rgba(99,102,241,.45); outline-offset: 1px; }

/* chat input: mic button neutral tone like camera */
.sv-chat-input #sv-chat-mic { background: #e2e8f0; color: #64748b; }
.sv-chat-input #sv-chat-mic:hover { background: #c7d2fe; color: #4f46e5; }
.dark .sv-chat-input #sv-chat-mic { background: #334155; color: #cbd5e1; }

/* R16: friendly home animations */
@keyframes sv-wave { 0%,60%,100%{transform:rotate(0)} 10%,30%{transform:rotate(16deg)} 20%,40%{transform:rotate(-8deg)} 50%{transform:rotate(6deg)} }
.animate-wave { animation: sv-wave 2.4s ease-in-out infinite; }
@keyframes sv-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.animate-bob { animation: sv-bob 2.6s ease-in-out infinite; }
#sparky-buddy:hover { border-color: #818cf8; }

/* ===== R17: APP PERF MODE (.sv-app on <html> inside Flutter WebView) =====
   backdrop-filter + big blurred orbs + infinite animations cause jank/hang
   on low-end Android WebView — replace with cheap solid fills */
.sv-app .glass { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(255,255,255,.92) !important; }
.sv-app.dark .glass, .sv-app .dark .glass { background: rgba(15,23,42,.92) !important; }
.sv-app .hero-orb { display: none !important; }
.sv-app .hero-stat { backdrop-filter: none !important; background: rgba(255,255,255,.14) !important; }
.sv-app .animate-wave, .sv-app .animate-bob { animation: none !important; }
.sv-app .bar-anim { transition: none !important; }
.sv-app #sv-chat-panel { backdrop-filter: none !important; }
.sv-app * { text-shadow: none !important; }
.sv-app .card-click:hover { transform: none; }

/* R19: PPT image retry button */
.pp-img-retry { width: 100%; height: 100%; min-height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: .75rem; border: 2px dashed #c7d2fe; background: #eef2ff; color: #4f46e5; font-size: 11px; font-weight: 700; cursor: pointer; }
.pp-img-retry:hover { background: #e0e7ff; }
.dark .pp-img-retry { background: rgba(49,46,129,.3); border-color: #4338ca; color: #a5b4fc; }
.pp-img-retry i { font-size: 16px; }