/* iISDVTExam – application styles (Bootstrap 5 companion) */
:root {
  --ink: #0f1f33;
  --navy: #12304f;
  --navy-2: #0b2238;
  --accent: #e8a33d;
  --accent-ink: #5b3a06;
  --teal: #1f8a83;
  --paper: #f4f6f9;
  --line: #dfe5ec;
  --muted: #64748b;
  --radius: 10px;
  --bs-primary: #12304f;
  --bs-primary-rgb: 18, 48, 79;
  --bs-link-color: #1d4f80;
  --bs-link-color-rgb: 29, 79, 128;
  --bs-body-font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

body { color: var(--ink); background: var(--paper); }

.btn-primary { --bs-btn-bg: var(--navy); --bs-btn-border-color: var(--navy); --bs-btn-hover-bg: #1b416a; --bs-btn-hover-border-color: #1b416a; --bs-btn-active-bg: var(--navy-2); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #1d1405; font-weight: 600; }
.btn-accent:hover { background: #d8922a; border-color: #d8922a; color: #1d1405; }
.text-accent { color: var(--accent); }

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; font-size: 1.1rem; letter-spacing: .2px; }
.brand strong { font-weight: 800; }
.brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #1d1405; font-weight: 800; font-size: .9rem; letter-spacing: -.5px; }

/* ---------- Admin layout ---------- */
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar { width: 252px; flex: 0 0 252px; background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); color: #cfdae6; padding: 18px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 1040; }
.admin-sidebar .brand { color: #fff; padding: 4px 8px 18px; }
.side-nav a, .side-logout { display: flex; align-items: center; gap: .7rem; padding: .52rem .75rem; border-radius: 8px; color: #c4d1de; text-decoration: none; font-size: .92rem; width: 100%; background: none; border: 0; text-align: left; }
.side-nav a i, .side-logout i { font-size: 1.05rem; width: 1.2rem; text-align: center; opacity: .85; }
.side-nav a:hover, .side-logout:hover { background: rgba(255,255,255,.07); color: #fff; }
.side-nav a.active { background: rgba(232,163,61,.16); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-topbar { display: flex; align-items: center; gap: .75rem; padding: 14px 24px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1030; }
.page-title { font-size: 1.2rem; font-weight: 700; margin: 0; }
.admin-content { padding: 22px 24px; flex: 1; }
.admin-footer { padding: 12px 24px; border-top: 1px solid var(--line); background: #fff; }

@media (max-width: 991.98px) {
  .admin-sidebar { position: fixed; left: -260px; transition: left .2s ease; }
  .admin-sidebar.open { left: 0; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
  .admin-content { padding: 16px; }
  .admin-topbar { padding: 12px 16px; }
}

/* ---------- Cards / stats ---------- */
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(15,31,51,.04); }
.card-header { background: #fff; border-bottom: 1px solid var(--line); font-weight: 600; }
.stat-card { padding: 16px 18px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); display: flex; align-items: center; gap: 14px; height: 100%; text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.stat-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15,31,51,.08); color: inherit; }
.stat-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; flex: 0 0 46px; }
.stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.stat-label { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .4px; }
.tone-navy { background: #e3ebf4; color: var(--navy); }
.tone-amber { background: #fdf1de; color: #a5650c; }
.tone-teal { background: #dff2f0; color: var(--teal); }
.tone-rose { background: #fbe4e6; color: #b4233a; }
.tone-violet { background: #ece6fb; color: #5b3cc4; }
.tone-green { background: #e1f4e6; color: #1e7b3c; }

.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); background: #f8fafc; white-space: nowrap; }
.table td { vertical-align: middle; }
.table-sm td, .table-sm th { padding: .45rem .55rem; }
.filter-bar { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 16px; }
.form-label { font-weight: 600; font-size: .88rem; }
.required::after { content: " *"; color: #c0392b; }
.code-display { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.15rem; letter-spacing: 1.5px; background: #fff8eb; border: 1px dashed var(--accent); padding: 4px 10px; border-radius: 6px; display: inline-block; }
.q-text { white-space: pre-wrap; }
.min-w-0 { min-width: 0; }
.truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Public / candidate ---------- */
.public-body { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(1200px 500px at 15% -10%, #dfe9f5 0%, transparent 60%), var(--paper); }
.public-nav { background: var(--navy); color: #fff; padding: 12px 0; }
.public-nav a { color: #e7eef6; text-decoration: none; }
.public-nav a:hover { color: #fff; }
.public-footer { margin-top: auto; padding: 18px 0; color: var(--muted); text-align: center; }
.entry-wrap { max-width: 460px; margin: 6vh auto 40px; padding: 0 16px; }
.entry-card { background: #fff; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(15,31,51,.08); overflow: hidden; }
.entry-card .head { background: var(--navy); color: #fff; padding: 22px 26px; }
.entry-card .head h1 { font-size: 1.3rem; margin: 0; font-weight: 700; }
.entry-card .body { padding: 24px 26px; }
.hero { padding: 64px 0 40px; }
.hero h1 { font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.8rem); letter-spacing: -.5px; }
.hero-tile { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; height: 100%; text-decoration: none; color: inherit; display: block; transition: transform .12s ease, box-shadow .12s ease; }
.hero-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,31,51,.1); color: inherit; }
.hero-tile i { font-size: 1.8rem; color: var(--accent); }
.info-dl dt { color: var(--muted); font-weight: 500; font-size: .85rem; }
.info-dl dd { font-weight: 600; margin-bottom: .6rem; }
.instructions-box { background: #fbfcfe; border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; white-space: pre-wrap; max-height: 360px; overflow: auto; }

/* ---------- Exam interface ---------- */
.exam-body { background: #eef1f5; }
.exam-top { position: sticky; top: 0; z-index: 1030; background: var(--navy); color: #fff; padding: 10px 0; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.exam-top .cand { font-size: .88rem; color: #d6e1ec; }
.timer { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.35rem; font-weight: 700; background: rgba(255,255,255,.1); padding: 4px 14px; border-radius: 8px; min-width: 120px; text-align: center; }
.timer.warn { background: var(--accent); color: #1d1405; }
.timer.danger { background: #c0392b; color: #fff; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .75; } }
.save-state { font-size: .8rem; color: #c8d5e2; min-width: 90px; }
.save-state.err { color: #ffb4b4; }
.q-card { background: #fff; border-radius: 12px; border: 1px solid var(--line); padding: 22px; }
.q-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 16px; }
.q-no { font-weight: 800; color: var(--navy); }
.q-body { font-size: 1.05rem; line-height: 1.6; white-space: pre-wrap; margin-bottom: 18px; }
.opt { display: flex; align-items: flex-start; gap: 12px; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; background: #fff; transition: border-color .1s, background .1s; }
.opt:hover { border-color: #9fb3c8; }
.opt input { margin-top: 4px; transform: scale(1.15); }
.opt.selected { border-color: var(--navy); background: #eef4fb; }
.opt .letter { font-weight: 700; color: var(--navy); min-width: 22px; }
.opt .otext { white-space: pre-wrap; }
.palette { background: #fff; border-radius: 12px; border: 1px solid var(--line); padding: 16px; position: sticky; top: 78px; }
.palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 7px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.pbtn { height: 40px; border-radius: 8px; border: 1.5px solid #c7d2de; background: #f8fafc; font-weight: 600; font-size: .9rem; position: relative; }
.pbtn.answered { background: #1e7b3c; border-color: #1e7b3c; color: #fff; }
.pbtn.review { background: #6d43d8; border-color: #6d43d8; color: #fff; }
.pbtn.answered.review::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; }
.pbtn.visited:not(.answered):not(.review) { background: #fdecec; border-color: #e06666; color: #a12222; }
.pbtn.current { outline: 3px solid var(--accent); outline-offset: 1px; }
.legend { font-size: .78rem; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; border: 1px solid #c7d2de; background: #f8fafc; }
.legend .l-ans::before { background: #1e7b3c; border-color: #1e7b3c; }
.legend .l-rev::before { background: #6d43d8; border-color: #6d43d8; }
.legend .l-skip::before { background: #fdecec; border-color: #e06666; }
.all-view .q-card { margin-bottom: 16px; }
.offline-banner { background: #c0392b; color: #fff; text-align: center; padding: 6px; font-size: .9rem; display: none; }
.offline-banner.show { display: block; }

/* ---------- Result card ---------- */
.result-card { background: #fff; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }
.result-card .rc-head { background: var(--navy); color: #fff; padding: 16px 20px; }
.result-pill { font-size: 1.05rem; padding: .45rem 1rem; }

@media print {
  .public-nav, .public-footer, .no-print, .admin-sidebar, .admin-topbar, .admin-footer { display: none !important; }
  body { background: #fff !important; }
}

/* ---------- Webcam proctoring ---------- */
.cam-test { width: 100%; max-width: 240px; aspect-ratio: 4/3; background: #1b2b3d; border-radius: 10px; object-fit: cover; }
.cam-test:not(.on) { opacity: .5; }
.cam-badge { position: relative; display: inline-flex; }
.cam-badge video { width: 64px; height: 48px; border-radius: 6px; object-fit: cover; background: #0b2238; border: 2px solid rgba(255,255,255,.25); transform: scaleX(-1); }
.cam-badge .dot { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: #e53935; box-shadow: 0 0 0 2px #12304f; animation: pulse 1.6s infinite; }
.cam-badge.off video { border-color: #e53935; }
.scr-badge { position: relative; display: inline-grid; place-items: center; width: 40px; height: 32px; border-radius: 6px; background: rgba(255,255,255,.12); color: #fff; font-size: 1.1rem; }
.scr-badge .dot { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: #e53935; animation: pulse 1.6s infinite; }
.scr-badge[hidden] { display: none; }
.scr-lock .cam-lock-box { border-top: 6px solid #12304f; }
.cam-lock { position: fixed; inset: 0; z-index: 2000; background: rgba(11,34,56,.92); display: grid; place-items: center; padding: 16px; }
.cam-lock[hidden] { display: none; }
.cam-lock-box { background: #fff; border-radius: 14px; padding: 28px; max-width: 420px; text-align: center; }
.proctor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.proctor-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.proctor-card.alert-state { border-color: #e53935; box-shadow: 0 0 0 2px rgba(229,57,53,.2); }
.proctor-shot { aspect-ratio: 4/3; background: #1b2b3d; display: grid; place-items: center; color: #8fa3b8; position: relative; }
.proctor-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proctor-shot .age { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: .72rem; padding: 1px 6px; border-radius: 4px; }
.proctor-meta { padding: 8px 10px; font-size: .82rem; }
.timeline-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.timeline-grid figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.timeline-grid figure.flagged { border-color: #e53935; }
.timeline-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; cursor: zoom-in; }
.timeline-grid figcaption { font-size: .75rem; padding: 4px 6px; display: flex; justify-content: space-between; align-items: center; gap: 4px; }

/* ---------- Home page ---------- */
.home-notice { background: #fff4df; border-bottom: 1px solid #f1d6a4; color: #5b3a06; padding: 10px 0; font-size: .95rem; }
.date-chip { width: 52px; flex: 0 0 52px; text-align: center; border: 1px solid var(--line); border-radius: 10px; font-size: .72rem; text-transform: uppercase; color: var(--muted); line-height: 1.1; padding: 6px 0; }
.date-chip span { display: block; font-size: 1.25rem; font-weight: 800; color: var(--navy); }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #fff; margin-right: 3px; animation: pulse 1.2s infinite; }
.step-tile { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px; height: 100%; position: relative; }
.step-tile i { font-size: 1.6rem; color: var(--accent); }
.step-no { position: absolute; top: 12px; right: 14px; font-weight: 800; color: #d5dde7; font-size: 1.6rem; }
.code-display.code-sm { font-size: .82rem; padding: 1px 6px; letter-spacing: 1px; }
.asg-line { min-height: 26px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.warn-lock { z-index: 2100; background: rgba(60,30,0,.85); }
.warn-lock .cam-lock-box { border-top: 6px solid #e8a33d; }
.tab-notice { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1900; background: #b4233a; color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: 92vw; font-size: .9rem; }
.tab-notice[hidden] { display: none; }
.terminated-badge { background: #b4233a; color: #fff; }

.warn-lock .notice-icon { display: none; }
.warn-lock.notice-mode { background: rgba(11,34,56,.85); }
.warn-lock.notice-mode .cam-lock-box { border-top-color: #12304f; }
.warn-lock.notice-mode .notice-icon { display: inline-block; }
.warn-lock.notice-mode .warn-icon { display: none; }

/* ---------- Notice board ---------- */
.post-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform .12s ease, box-shadow .12s ease; }
.post-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,31,51,.08); }
.post-img { display: block; aspect-ratio: 16/9; background: #e9eef4; overflow: hidden; }
.post-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-body { padding: 14px 16px; display: flex; flex-direction: column; flex: 1; }
.post-text { font-size: 1.02rem; line-height: 1.7; word-wrap: break-word; }
.post-full img { max-height: 70vh; width: auto; }

/* ---------- Screenshots & activity ---------- */
.proctor-shot .scr-inset { position: absolute; right: 6px; bottom: 6px; width: 42%; aspect-ratio: 16/10; border: 2px solid #fff; border-radius: 4px; overflow: hidden; background: #000; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.proctor-shot .scr-inset img { object-fit: cover; }
.timeline-grid.screens { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.timeline-grid figure .start-tag { position: absolute; left: 6px; top: 6px; background: #12304f; color: #fff; font-size: .68rem; padding: 1px 6px; border-radius: 4px; }
.timeline-grid figure { position: relative; }
.activity-list .list-group-item { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: start; }
.activity-list .t { font-variant-numeric: tabular-nums; color: #6b7a8c; }
.activity-list .d { color: #6b7a8c; font-size: .78rem; }
tr.risk-high > * { background-color: #fdecee !important; }
tr.risk-mid > * { background-color: #fff7e6 !important; }

/* ---------- Subject-wise sections ---------- */
.section-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.section-bar[hidden] { display: none; }
.sec-tab { border: 1.5px solid #c7d2de; background: #fff; border-radius: 999px; padding: 5px 12px; font-size: .86rem; font-weight: 600; color: #12304f; display: inline-flex; gap: 8px; align-items: center; }
.sec-tab .sec-count { font-weight: 500; font-size: .75rem; background: #eef2f6; border-radius: 999px; padding: 1px 7px; color: #45566b; }
.sec-tab.active { background: #12304f; border-color: #12304f; color: #fff; }
.sec-tab.active .sec-count { background: rgba(255,255,255,.2); color: #fff; }
.sec-tab.done:not(.active) { border-color: #1f7a3d; }
.sec-tab.done .sec-count { background: #1f7a3d; color: #fff; }
.palette-grid.sectioned { display: block; }
.palette-grid.sectioned .palette-grid { max-height: none; overflow: visible; margin-bottom: 6px; }
.palette-sec { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #45566b; margin: 8px 0 5px; }
.palette-sec:first-child { margin-top: 0; }
.sec-badge { background: #e8eef5; color: #12304f; font-weight: 600; }
.sec-heading { margin: 18px 0 8px; padding: 6px 12px; background: #12304f; color: #fff; border-radius: 8px; font-size: 1rem; }

/* ---------- Admin idle sign-out warning ---------- */
.idle-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(11,34,56,.75); display: grid; place-items: center; padding: 16px; }
.idle-overlay[hidden] { display: none; }
.idle-box { background: #fff; border-radius: 14px; padding: 26px; max-width: 420px; text-align: center; border-top: 6px solid #e8a33d; box-shadow: 0 12px 40px rgba(0,0,0,.3); }

/* ---------- Home: "Want to participate?" section + slider ---------- */
.exam-section { padding: 50px 0; overflow: hidden; }
.exam-section .exam-title { font-size: clamp(28px, 3vw, 42px); font-weight: 800; line-height: 1.2; color: #172b45; }
.exam-section .exam-steps { padding-left: 25px; }
.exam-section .exam-steps li { margin-bottom: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.exam-section .exam-steps li::marker { font-weight: 800; color: #e9a033; }
.exam-section .step-title { font-weight: 700; color: #172b45; }
.exam-section .btn { white-space: normal; max-width: 100%; }
.exam-slider { width: 100%; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,.12); background: #12304f; }
.exam-slider .carousel-item img { width: 100%; height: 420px; object-fit: cover; }
.exam-slider .carousel-caption { background: rgba(12, 29, 51, .78); border-radius: 10px; padding: 14px; bottom: 44px; left: 8%; right: 8%; }
.exam-slider .carousel-caption h5 { font-weight: 700; }
.slide-thumb { width: 96px; height: 60px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: #e8eef5; }
@media (max-width: 767px) {
  .exam-section { padding: 30px 0; }
  .exam-slider .carousel-item img { height: 260px; }
  .exam-slider .carousel-caption { bottom: 40px; padding: 10px; }
  .exam-slider .carousel-caption p { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { .exam-slider .carousel-item { transition: none; } }

/* ---------- Evidence selection ---------- */
.timeline-grid figure .snap-pick { position: absolute; right: 6px; top: 6px; width: 1.2em; height: 1.2em; z-index: 2; box-shadow: 0 0 0 2px rgba(255,255,255,.8); }
.timeline-grid figure:has(.snap-pick:checked) { outline: 3px solid #b4233a; }

/* ---------- Full screen lock (below the other locks) ---------- */
.fs-lock { z-index: 1990; }
.fs-lock .cam-lock-box { border-top: 6px solid #12304f; }
/* ---------- Exam chat ---------- */
.chat-widget { position: fixed; right: 16px; bottom: 16px; z-index: 1800; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.chat-widget[hidden] { display: none; }
.chat-fab { border: 0; border-radius: 999px; background: #12304f; color: #fff; padding: 10px 16px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.25); position: relative; }
.chat-fab .chat-badge { position: absolute; top: -6px; right: -6px; background: #e53935; color: #fff; border-radius: 999px; min-width: 22px; height: 22px; font-size: .75rem; display: grid; place-items: center; padding: 0 6px; }
.chat-fab .chat-badge[hidden] { display: none; }
.chat-fab.pulse { animation: pulse 1.4s infinite; }
.chat-panel { width: min(360px, calc(100vw - 32px)); background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.3); overflow: hidden; display: flex; flex-direction: column; max-height: min(520px, 70vh); }
.chat-panel[hidden] { display: none; }
.chat-head { background: #12304f; color: #fff; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; }
.chat-list { padding: 10px; overflow-y: auto; flex: 1; background: #f4f6f9; min-height: 160px; }
.chat-empty { color: #6b7a8c; font-size: .85rem; text-align: center; padding: 20px 6px; }
.chat-msg { max-width: 85%; margin-bottom: 8px; padding: 7px 10px; border-radius: 12px; font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg .meta { display: block; font-size: .7rem; opacity: .7; margin-top: 2px; }
.chat-msg.me { margin-left: auto; background: #12304f; color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.them { background: #fff; border: 1px solid #dde3ea; border-bottom-left-radius: 4px; }
.chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid #dde3ea; }
.chat-form textarea { resize: none; }
.chat-err[hidden] { display: none; }
/* admin chat */
.admin-chat .chat-list { max-height: 380px; min-height: 200px; }
.chat-conv { cursor: pointer; }
.chat-conv.is-current { background: #e8eef5; box-shadow: inset 3px 0 0 #12304f; }
.chat-unread { background: #e53935; color: #fff; border-radius: 999px; font-size: .72rem; padding: 1px 7px; }

.timeline-grid.audios { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ---------- Exam counters ---------- */
.exam-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .85rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; }
.exam-stats strong { font-variant-numeric: tabular-nums; }