/* ========================================================================
   ExamCracker AI — UX Overhaul v2
   Focus: mobile-first CBT viewport, clean command header, responsive profile
   controls, and a high-quality Group Study Rooms experience.
   ======================================================================== */

/* ---------- Clean command header ---------- */
.app-header {
  height: 64px;
  padding: 0 18px;
}
.header-left { gap: 12px; min-width: 0; }
.header-right { gap: 8px; }
.header-left .countdown-box,
.header-right .streak-pill,
.header-right .xp-pill,
#aiConfigBtn,
#notifBellBtn,
#settingsBtn { display:none !important; }
.user-profile-btn { width:40px; height:40px; padding:2px; justify-content:center; }
.user-profile-btn .avatar { width:36px; height:36px; }

/* ---------- Sidebar utility controls ---------- */
.sidebar-tools {
  padding: 10px 14px 8px;
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  border-top:1px solid rgba(255,255,255,.06);
}
.sidebar-tool-btn {
  width:100%; min-height:42px; padding:9px 11px; border-radius:11px;
  border:1px solid transparent; background:rgba(255,255,255,.025);
  color:var(--text-muted); display:flex; align-items:center; gap:10px;
  text-align:left; cursor:pointer; font:600 .82rem var(--font-body);
  transition:all var(--transition-fast);
}
.sidebar-tool-btn:hover { color:#fff; border-color:rgba(99,102,241,.35); background:rgba(99,102,241,.08); }
.sidebar-tool-icon { width:24px; min-width:24px; display:grid; place-items:center; font-size:1.05rem; }
.sidebar-tool-btn.nav-action { color:#dbeafe; }

/* ---------- CBT full-screen workspace ---------- */
#view-cbt-test {
  padding: 10px 14px 12px;
  height: calc(100dvh - var(--header-height));
  min-height: 0;
  overflow: hidden;
}
.cbt-page-toolbar {
  min-height: 48px; padding: 6px 10px 6px 14px; margin-bottom: 8px;
  border:1px solid var(--border-subtle); border-radius:14px;
  background:rgba(15,23,42,.86); backdrop-filter:blur(14px);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.cbt-toolbar-title { font:800 .95rem var(--font-heading); color:#fff; white-space:nowrap; }
.cbt-toolbar-subtitle { color:var(--text-dim); font-size:.7rem; margin-left:6px; white-space:nowrap; }
.cbt-page-toolbar > div:first-child { display:flex; align-items:baseline; min-width:0; overflow:hidden; }
.cbt-toolbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex:0 0 auto; }
.cbt-toolbar-actions .btn { min-height:34px; padding:7px 10px; font-size:.72rem; }
#view-cbt-test .cbt-container {
  height:calc(100dvh - var(--header-height) - 70px);
  min-height:0;
  grid-template-columns:minmax(0,1fr) 270px;
  gap:10px;
}
#view-cbt-test .cbt-main-arena { min-height:0; height:100%; border-radius:16px; position:relative; }
#view-cbt-test .cbt-top-bar { min-height:44px; padding:8px 14px; }
#view-cbt-test .cbt-question-body { padding:20px 22px; }
#view-cbt-test .question-text { font-size:1.05rem; line-height:1.52; margin-bottom:18px; }
#view-cbt-test .option-item { padding:12px 14px; gap:12px; }
#view-cbt-test .cbt-action-footer { padding:9px 12px; min-height:56px; }
#view-cbt-test .cbt-sidebar-panel { padding:12px; border-radius:16px; }
#view-cbt-test .cbt-timer-card { padding:12px; margin-bottom:12px; }
#view-cbt-test .timer-clock { font-size:1.7rem; }

/* ---------- Group rooms ---------- */
.rooms-hero {
  display:flex; justify-content:space-between; align-items:stretch; gap:18px;
  padding:22px; margin-bottom:18px; border-radius:20px;
  background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(6,182,212,.08) 45%,rgba(16,185,129,.08));
  border:1px solid rgba(129,140,248,.22); box-shadow:0 16px 38px rgba(0,0,0,.18);
}
.rooms-eyebrow { font-size:.68rem; font-weight:800; letter-spacing:1.3px; color:var(--cyber-cyan); }
.rooms-title { margin-top:6px; font:800 1.55rem var(--font-heading); color:#fff; }
.rooms-subtitle { max-width:760px; margin-top:5px; color:var(--text-muted); font-size:.86rem; }
.rooms-hero-stat { min-width:150px; padding:12px 14px; border:1px solid rgba(255,255,255,.08); background:rgba(5,10,20,.22); border-radius:14px; display:flex; flex-direction:column; justify-content:center; }
.rooms-hero-stat span { color:var(--text-dim); font-size:.67rem; text-transform:uppercase; letter-spacing:.8px; }
.rooms-hero-stat strong { color:#fff; font-size:.9rem; margin-top:3px; }
.rooms-section-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:10px; }
.rooms-section-head h3 { font:800 1rem var(--font-heading); color:#fff; }
.rooms-section-head p { color:var(--text-dim); font-size:.74rem; margin-top:2px; }
.rooms-chip { font-size:.72rem; font-weight:700; color:#bfdbfe; background:rgba(59,130,246,.08); border:1px solid rgba(59,130,246,.2); border-radius:999px; padding:6px 10px; }
.rooms-grid { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; margin-bottom:18px; }
.room-card { padding:16px; border-radius:16px; position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(18,24,40,.92),rgba(10,15,27,.92)); }
.room-card::before { content:""; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg,var(--primary),var(--cyber-cyan),var(--emerald-green)); opacity:.85; }
.room-card h4 { font-size:1rem !important; }
.room-card .btn { min-height:40px; }
.room-participants .peer-avatar { width:30px; height:30px; font-size:.68rem; }
#view-group-rooms .leaderboard-table { font-size:.8rem; }

/* ---------- Responsive profile and CBT ---------- */
@media (max-width: 900px) {
  .rooms-hero { flex-direction:column; }
  .rooms-hero-stat { width:100%; }
  #view-cbt-test .cbt-container { grid-template-columns:minmax(0,1fr); }
  #view-cbt-test .cbt-sidebar-panel { position:absolute; top:58px; right:10px; width:auto; min-width:104px; z-index:12; border:none; padding:0; background:transparent; box-shadow:none; }
  #view-cbt-test .cbt-sidebar-panel > div:not(.cbt-timer-card) { display:none; }
  #view-cbt-test .cbt-timer-card { margin:0; padding:8px 10px; background:rgba(8,13,24,.94); border-color:rgba(245,158,11,.28); }
  #view-cbt-test .timer-label { font-size:.58rem; }
  #view-cbt-test .timer-clock { font-size:1.25rem; margin:0; }
}

@media (max-width: 680px) {
  .app-header { height:60px; padding:0 10px; }
  #view-cbt-test { height:calc(100dvh - 60px); padding:6px 6px 8px; }
  .cbt-page-toolbar { min-height:42px; margin-bottom:6px; padding:5px 7px 5px 10px; border-radius:12px; }
  .cbt-toolbar-subtitle { display:none; }
  .cbt-toolbar-title { font-size:.82rem; }
  .cbt-toolbar-actions { gap:4px; }
  .cbt-toolbar-actions .btn { min-height:32px; padding:6px 7px; font-size:.66rem; }
  #view-cbt-test .cbt-container { height:calc(100dvh - 116px); gap:6px; }
  #view-cbt-test .cbt-main-arena { height:100%; border-radius:14px; }
  #view-cbt-test .cbt-top-bar { padding:7px 10px; min-height:40px; }
  #view-cbt-test .cbt-subject-tag { font-size:.74rem; gap:5px; padding-right:70px; }
  #view-cbt-test .cbt-marking-scheme { display:none; }
  #view-cbt-test .cbt-question-body { padding:13px 11px 10px; }
  #view-cbt-test .q-header-meta { margin-bottom:10px; gap:7px; }
  #view-cbt-test .question-text { font-size:.92rem; line-height:1.45; margin-bottom:12px; }
  #view-cbt-test .option-item { padding:10px 10px; gap:9px; }
  #view-cbt-test .option-content { font-size:.83rem; line-height:1.38; }
  #view-cbt-test .option-letter { width:25px; height:25px; font-size:.72rem; }
  #view-cbt-test .cbt-action-footer { padding:6px; gap:6px; min-height:56px; }
  #view-cbt-test .footer-left, #view-cbt-test .footer-right { width:100%; gap:5px; }
  #view-cbt-test .cbt-action-footer .btn { min-height:40px; font-size:.67rem; padding:7px 6px; flex:1 1 0; }
  .rooms-title { font-size:1.25rem; }
  .rooms-subtitle { font-size:.78rem; }
  .rooms-section-head { align-items:flex-start; flex-direction:column; }
  .rooms-grid { grid-template-columns:1fr; }
  .sidebar-tools { padding:8px 12px; }
  .sidebar-tool-btn { min-height:44px; }
}

@media (min-width: 1024px) {
  #view-cbt-test .cbt-action-footer .footer-left,
  #view-cbt-test .cbt-action-footer .footer-right { gap:6px; }
  #view-cbt-test .cbt-action-footer .btn { white-space:nowrap; }
}