/* ============================================================
   refinements.css — layered on top of styles.css.
   Kept as a separate file so the 190 KB base stylesheet stays
   untouched and these deltas are easy to review or revert.
   ============================================================ */

/* ============ 1. FAQ accordion ============
   <details> cannot animate its height, so faqView renders a button + a grid
   wrapper instead: 0fr → 1fr is a genuinely animatable value. */

.faq-item {
  padding: 0 !important;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.faq-item.is-open {
  border-color: color-mix(in oklab, var(--primary) 34%, var(--border));
  box-shadow: 0 4px 18px -8px color-mix(in oklab, var(--primary) 40%, transparent);
}

.faq-q {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 15px 16px;
  border: 0; background: transparent;
  color: var(--text);
  font: inherit; font-weight: 600; font-size: 14.5px; line-height: 1.45;
  text-align: left; cursor: pointer;
  transition: color .2s ease;
}
.faq-q:hover { color: var(--primary); }
.faq-q-text { flex: 1; min-width: 0; }
.faq-item.is-open .faq-q { color: var(--primary); }

.faq-chev {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform .42s cubic-bezier(.22,.9,.28,1), color .2s ease;
}
.faq-item.is-open .faq-chev { transform: rotate(180deg); color: var(--primary); }

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .46s cubic-bezier(.22,.9,.28,1);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }

.faq-a-inner {
  overflow: hidden;
  padding: 0 16px;
  line-height: 1.72;
  font-size: 14px;
  color: var(--text);
  white-space: pre-wrap;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s ease .06s, transform .38s cubic-bezier(.22,.9,.28,1) .06s,
              padding-bottom .46s cubic-bezier(.22,.9,.28,1);
}
.faq-item.is-open .faq-a-inner {
  opacity: 1;
  transform: none;
  padding-bottom: 16px;
}

/* ============ 2. Forum votes — separate like / dislike counts ============ */

.qa-vote { display: flex; align-items: center; gap: 6px; }

.qa-vote-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  transition: border-color .16s, background .16s, color .16s, transform .12s;
}
.qa-vote-btn:hover { border-color: var(--border-strong); color: var(--text); }
.qa-vote-btn:active { transform: scale(.95); }

.qa-vote-n {
  font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 9px; text-align: center;
}

.qa-vote-up.is-active {
  color: var(--success);
  border-color: color-mix(in oklab, var(--success) 45%, transparent);
  background: color-mix(in oklab, var(--success) 10%, var(--surface));
}
.qa-vote-down.is-active {
  color: var(--danger);
  border-color: color-mix(in oklab, var(--danger) 45%, transparent);
  background: color-mix(in oklab, var(--danger) 10%, var(--surface));
}

/* Tap acknowledgement on the number itself */
.qa-score-flip { animation: qaFlip .3s cubic-bezier(.2,.9,.3,1); }
@keyframes qaFlip {
  0%   { transform: translateY(-5px) scale(.85); opacity: .4; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ============ 3. Dashboard — rounder, softer cards and buttons ============ */

.dash-schedule-btn {
  border-radius: 18px !important;
  padding: 15px 18px !important;
  gap: 11px;
  font-weight: 650;
  border: 1px solid var(--border);
  background: linear-gradient(140deg,
              color-mix(in oklab, var(--primary) 7%, var(--surface)),
              var(--surface));
  transition: transform .16s cubic-bezier(.2,.9,.3,1), box-shadow .2s ease, border-color .2s ease;
}
.dash-schedule-btn:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--primary) 32%, var(--border));
  box-shadow: 0 10px 26px -12px color-mix(in oklab, var(--primary) 50%, transparent);
}

.quick-grid { gap: 10px; }

.card.quick {
  border-radius: 18px !important;
  padding: 15px !important;
  transition: transform .16s cubic-bezier(.2,.9,.3,1), box-shadow .2s ease, border-color .2s ease;
}
.card.quick:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--primary) 28%, var(--border));
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.30);
}
.card.quick .qi {
  border-radius: 14px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: #af2828;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
}
.card.quick h3 { font-size: 14px; }

/* Hero / block cards pick up the same rounding so the page reads as one set */
.next-event-card,
.dash-block-card,
.sem-progress-card,
.news-mini {
  border-radius: 18px !important;
}
.news-mini {
  transition: transform .16s cubic-bezier(.2,.9,.3,1), border-color .2s ease;
}
.news-mini:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--primary) 26%, var(--border));
}

/* ============ 4. Layout safety — no accidental horizontal scroll ============
   `clip` (rather than `hidden`) does not turn body into a scroll container,
   so sticky headers and scroll-into-view keep working. */

body { overflow-x: clip; }
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

img, svg, video, canvas { max-width: 100%; }

/* Long unbroken strings (URLs, emails) are the usual culprit behind a page
   that scrolls sideways on a phone. */
.card, .ai-bubble, .qa-text, .qa-comment-text, .comment-item, .faq-a-inner,
.news-summary, .news-title {
  overflow-wrap: anywhere;
}

/* Flex children that hold text need min-width:0 or they refuse to shrink. */
.card-row > *, .row > *, .header-inner > * { min-width: 0; }

/* Rows of chips / tabs scroll instead of wrapping into a tall stack. */
.chip-row, .prof-tabs, .news-chips {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chip-row::-webkit-scrollbar,
.prof-tabs::-webkit-scrollbar,
.news-chips::-webkit-scrollbar { display: none; }

/* Any table stays inside its card. */
.compare-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { max-width: 100%; }

/* The bottom tab bar must clear the home indicator on iOS. */
.mobile-tabs { padding-bottom: env(safe-area-inset-bottom); }

/* ============ 5. Small phones ============ */

@media (max-width: 400px) {
  .dash-schedule-btn { padding: 13px 15px !important; }
  .faq-q { padding: 13px 14px; font-size: 14px; }
  .faq-a-inner { padding: 0 14px; font-size: 13.5px; }
  .faq-item.is-open .faq-a-inner { padding-bottom: 14px; }
  .qa-vote-btn { padding: 5px 10px 5px 8px; }
}

/* ============ 6. Dark mode touch-ups ============ */

html[data-theme="dark"] .card.quick:hover,
html[data-theme="dark"] .dash-schedule-btn:hover {
  box-shadow: 0 10px 28px -12px rgba(0,0,0,.65);
}
html[data-theme="dark"] .faq-item.is-open {
  box-shadow: 0 4px 20px -8px rgba(0,0,0,.6);
}

/* ============ 7. Reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
  .faq-a { transition: none; }
  .faq-a-inner, .faq-chev { transition: none; }
  .card.quick, .dash-schedule-btn, .news-mini,
  .qa-vote-btn { transition: none; }
  .card.quick:hover, .dash-schedule-btn:hover,
  .news-mini:hover { transform: none; }
  .qa-score-flip { animation: none; }
}

/* ============ 8. Votes: like = blue, dislike = red ============ */

.qa-vote-up.is-active {
  color: #2563eb;
  border-color: color-mix(in oklab, #2563eb 48%, transparent);
  background: color-mix(in oklab, #2563eb 11%, var(--surface));
}
html[data-theme="dark"] .qa-vote-up.is-active {
  color: #60a5fa;
  border-color: color-mix(in oklab, #60a5fa 46%, transparent);
  background: color-mix(in oklab, #60a5fa 15%, var(--surface));
}
.qa-vote-down.is-active {
  color: #dc2626;
  border-color: color-mix(in oklab, #dc2626 48%, transparent);
  background: color-mix(in oklab, #dc2626 11%, var(--surface));
}
html[data-theme="dark"] .qa-vote-down.is-active {
  color: #f87171;
  border-color: color-mix(in oklab, #f87171 46%, transparent);
  background: color-mix(in oklab, #f87171 15%, var(--surface));
}
.qa-vote-up:hover   { color: #2563eb; border-color: color-mix(in oklab, #2563eb 34%, transparent); }
.qa-vote-down:hover { color: #dc2626; border-color: color-mix(in oklab, #dc2626 34%, transparent); }

/* ============ 9. No flashing scrollbar on navigation ============
   The view-enter animation changes the page height for ~450ms, which toggles
   the vertical scrollbar and shifts the whole layout sideways for a frame.
   Reserving the gutter permanently removes the flash. */

html {
  scrollbar-gutter: stable;
  overflow-y: scroll;         /* fallback where scrollbar-gutter is unsupported */
}
@supports (scrollbar-gutter: stable) {
  html { overflow-y: auto; }
}

/* Enter animations must never push content past the viewport edge. */
#app, #app.view-enter { overflow-x: clip; }
@supports not (overflow: clip) {
  #app, #app.view-enter { overflow-x: hidden; }
}

/* ============ 10. Header profile chip — initial only ============ */

.user-chip--compact {
  padding: 4px !important;
  gap: 4px;
  border-radius: 999px !important;
}
.user-chip--compact .user-dot { margin: 0; }
/* Belt-and-braces: if a cached bundle still renders the name, hide it. */
.user-chip--compact .user-name { display: none; }

/* ============ 11. Quick-tool cards stay compact ============ */

.card.quick .qt p {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  margin: 2px 0 0;
}
.card.quick .qt h3 { margin: 0; }
/* On a half-width mobile card even a single clamped line still gets cut
   mid-word ("საგნების...") — reads as unfinished. Drop it there entirely
   instead of clamping. This selector's specificity matches the rule above,
   so being later in the same file is what makes it win — a styles.css rule
   trying to override this from a different file would need to out-specify
   it, which is exactly what silently failed the first time this was tried. */
@media (max-width: 768px) {
  .card.quick .qt p { display: none; }
  /* With the description gone the tile only needs to hold an icon + a short
     label — shrink the whole card to match instead of leaving it sized for
     the two-line copy it no longer shows. */
  .card.quick { padding: 10px !important; border-radius: 14px !important; }
  .card.quick .qi { width: 28px; height: 28px; border-radius: 9px; }
  .card.quick .qi svg { width: 15px; height: 15px; }
  .card.quick h3 { font-size: 12px; }
  .quick-grid { gap: 8px; }
}

/* ============ 12. News feed ============ */

.nw-hero { margin: 4px 0 14px; }
.nw-h1 { margin: 0; font-size: clamp(19px, 4.5vw, 24px); font-weight: 700; letter-spacing: -.02em; }
.nw-sub { margin: 3px 0 0; font-size: 13px; color: var(--muted); }

/* Filters */
.nw-filters {
  display: flex; flex-direction: column; gap: 9px;
  padding: 11px 12px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.nw-search {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  transition: border-color .16s, box-shadow .16s;
}
.nw-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
  color: var(--primary);
}
.nw-search input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  color: var(--text);
  font: inherit; font-size: 13.5px;
  padding: 9px 0;
}
.nw-search input::-webkit-search-cancel-button { cursor: pointer; }

.nw-chips { gap: 6px; padding-bottom: 2px; }
.nw-chips .chip { white-space: nowrap; font-size: 12.5px; }
.nw-chips .chip svg { flex-shrink: 0; color: var(--cat, currentColor); }
.nw-chips .chip.active {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 12%, var(--surface));
  color: var(--primary);
}
.nw-chips .chip.active svg { color: var(--primary); }

.nw-filter-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 11.5px;
}
.nw-saved-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--muted);
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.nw-saved-toggle:hover { color: var(--ink-primary); border-color: var(--primary); }
.nw-saved-toggle.is-active {
  color: var(--primary); border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 10%, var(--surface));
}
.nw-saved-toggle svg { flex-shrink: 0; }

/* Date groups */
.nw-group + .nw-group { margin-top: 22px; }
.nw-group-head {
  margin: 0 0 9px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.nw-list { display: flex; flex-direction: column; gap: 8px; }

/* Item — the whole block is the link */
.nw-item {
  display: flex; gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: inherit; text-decoration: none;
  transition: border-color .16s, transform .16s cubic-bezier(.2,.9,.3,1), box-shadow .18s;
}
a.nw-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.30);
}
.nw-item.is-pinned {
  border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
  background: color-mix(in oklab, var(--primary) 4%, var(--surface));
}

/* Date block — the fastest thing to scan down a feed */
.nw-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 44px; height: 46px;
  border-radius: 12px;
  background: var(--surface-2);
  line-height: 1.1;
}
html[data-theme="dark"] .nw-date { background: color-mix(in oklab, var(--text) 8%, transparent); }
.nw-date-d { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nw-date-m { font-size: 10.5px; color: var(--muted); }

.nw-body { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 3px; }

.nw-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11px; }
.nw-cat {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--cat, var(--primary));
  font-weight: 650;
}
.nw-cat svg { flex-shrink: 0; }
.nw-uni { color: var(--muted); }
.nw-pin {
  color: var(--primary); font-weight: 650;
  padding: 1px 7px; border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 12%, transparent);
}
.nw-new {
  color: var(--success); font-weight: 650;
  padding: 1px 7px; border-radius: 999px;
  background: color-mix(in oklab, var(--success) 12%, transparent);
}

.nw-title {
  font-size: 14.5px; font-weight: 650; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.nw-sum {
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.nw-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 3px; font-size: 11px; color: var(--muted);
}
.nw-foot-trail { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nw-foot-actions { display: flex; align-items: center; gap: 2px; }
.nw-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.nw-action-btn:hover { color: var(--ink-primary); background: color-mix(in oklab, var(--text) 8%, transparent); }
.nw-action-btn.is-saved { color: var(--primary); }
.nw-go { color: var(--primary); font-weight: 600; flex-shrink: 0; }

.nw-more { text-align: center; padding: 16px 0 4px; }
.nw-more .btn { font-size: 12.5px; padding: 7px 16px; border-radius: 999px; }

.nw-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 34px 16px; text-align: center;
}
.nw-empty-ico { display: flex; color: var(--muted); opacity: .5; margin-bottom: 8px; }
.nw-empty p { margin: 0; font-size: 13px; color: var(--muted); }

@media (max-width: 400px) {
  .nw-item { padding: 11px 12px; gap: 10px; }
  .nw-date { width: 40px; height: 42px; }
  .nw-date-d { font-size: 15.5px; }
  .nw-title { font-size: 14px; }
  .nw-sum { -webkit-line-clamp: 2; line-clamp: 2; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .nw-item { transition: none; }
  a.nw-item:hover { transform: none; }
}

.nw-rel { flex-shrink: 0; }

/* ============ 13. Forum list — subjects as panels ============
   One panel per row instead of a dense grid: a subject line is a tap target,
   and at 16px the title is readable at arm's length. */

.forums-grid {
  display: flex !important;
  flex-direction: column;
  gap: 9px;
}

.forum-card {
  padding: 0 !important;
  border-radius: 18px !important;
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .18s ease, transform .14s cubic-bezier(.2,.9,.3,1);
}
.forum-card:hover {
  border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
  box-shadow: 0 10px 26px -16px rgba(0,0,0,.32);
}

.forum-card-row { align-items: stretch; gap: 0; }

.forum-card-link {
  display: flex; align-items: center; gap: 13px;
  flex: 1; min-width: 0;
  padding: 15px 15px;
  text-decoration: none; color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background .16s ease;
}
/* Press feedback — the panel dips under the finger, then springs back. */
.forum-card-link:active {
  background: color-mix(in oklab, var(--primary) 8%, transparent);
  transform: scale(.988);
}
.forum-card:has(.forum-card-link:active) { transform: scale(.995); }

.forum-card-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 14px;
  font-size: 18px;
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 11%, transparent);
  transition: background .16s ease, transform .16s cubic-bezier(.2,.9,.3,1);
}
.forum-card-link:active .forum-card-icon {
  background: color-mix(in oklab, var(--primary) 20%, transparent);
  transform: scale(.94);
}

.forum-card-body { min-width: 0; flex: 1; }
.forum-card-title {
  font-size: 16px !important;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.01em;
}
.forum-card-meta {
  font-size: 13px !important;
  line-height: 1.45;
  color: var(--muted);
}


.forums-search { border-radius: 999px; }
.forums-hint { font-size: 12.5px; }

@media (max-width: 400px) {
  .forum-card-link { padding: 13px 13px; gap: 11px; }
  .forum-card-icon { width: 42px; height: 42px; font-size: 17px; }
  .forum-card-title { font-size: 15.5px !important; }
  .forum-card-meta { font-size: 12.5px !important; }
}

/* ============ 14. Chat room — messenger proportions ============ */

/* The room owns the viewport: header pinned, messages scroll, composer pinned.
   dvh (not vh) is what keeps BOTH the header and the input on screen while the
   on-screen keyboard is open — vh measures the pre-keyboard viewport. */
body.is-chat-page .chat-shell {
  /* The message context menu (#chatMsgMenu, styles.css) is a plain child of
     this element with position:absolute, and chats.js/dm.js compute its
     left/top directly from THIS element's getBoundingClientRect() — but
     without an explicit position here, .chat-shell is a normal static box,
     so the menu actually anchored to whatever positioned ancestor sat
     further up the tree instead, landing far from the message it was
     opened for. This makes .chat-shell the real positioning context the JS
     already assumed it was. */
  position: relative;
  display: flex;
  flex-direction: column;
  /* -12px is .main's own top+bottom padding on a chat page at this width
     (4px + 8px, styles.css) — .chat-shell sits inside .main, so that
     padding also eats into the space actually available below the header,
     not just --header-h itself. Missing it here pushed the composer a
     few px past the bottom of the viewport (mirrors the -28px desktop
     already subtracts below for its own margin-block). */
  /* --vv-height (router.js, visualViewport tracking) overrides 100dvh while
     the on-screen keyboard is open, on browsers where dvh doesn't shrink for
     it on its own — see the comment there for why that matters. */
  height: calc(var(--vv-height, 100dvh) - var(--header-h, 58px) - 12px);
  min-height: 0;
  overflow: hidden;
  /* Same warm tint as the login screen (body.is-auth-page, styles.css) —
     a flat white/black room read as either a blank sheet of paper or,
     in dark mode, total blackness behind the vivid red bubbles. */
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(185, 28, 28, .06), transparent 60%),
    radial-gradient(800px 500px at 90% 90%, rgba(220, 38, 38, .04), transparent 60%),
    var(--bg);
}
/* Dark mode gets a flat warm-maroon tone instead of the light mode's
   red-tinted gradient — against near-black, that same red glow read as
   harsh rather than warm, and fought with the bubbles for attention. This
   matches the "other" bubble's own dark-mode color (chat-msg-bubble,
   color-mix(in oklab, var(--primary) 9%, var(--surface)) at dark
   --surface #111111) instead of a neutral grey, so the room and the
   bubbles read as one warm palette rather than grey-vs-maroon. */
html[data-theme="dark"] body.is-chat-page .chat-shell {
  background: #221716;
}
body.is-chat-page .chat-head,
body.is-chat-page .chat-composer,
body.is-chat-page .chat-reply-bar { flex-shrink: 0; }

body.is-chat-page .chat-msgs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: 8px;
}

/* Header reads as a conversation header, not a page title. */
.chat-head {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  position: sticky; top: 0; z-index: 3;
}
.chat-head-av { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; }
.chat-head-info { min-width: 0; flex: 1; }
.chat-head-name { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.chat-head-sub  { font-size: 11.5px; color: var(--muted); }

/* Composer: pill input + round send, sized for thumbs. */
.chat-composer {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 9px 11px calc(9px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.chat-composer textarea,
.chat-composer input[type="text"] {
  flex: 1; min-width: 0;
  min-height: 42px; max-height: 110px;
  padding: 11px 15px;
  border: 1px solid var(--border);
  border-radius: 21px;
  background: var(--bg);
  font-size: 16px;   /* under 16px is what actually triggers iOS Safari's zoom-on-focus, not over */
  line-height: 1.4;
  resize: none;
}
.chat-composer textarea:focus,
.chat-composer input[type="text"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
  outline: none;
}
.chat-send-btn {
  width: 42px; height: 42px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  transition: transform .12s, opacity .15s;
}
.chat-send-btn:active { transform: scale(.92); }

/* Desktop: hold the conversation to a phone-like column. A 1400px-wide
   message list is unreadable — the eye loses the thread between lines. */
@media (min-width: 900px) {
  body.is-chat-page .chat-shell {
    max-width: 760px;
    margin-inline: auto;
    border: 1px solid var(--border);
    border-radius: 20px;
    height: calc(100dvh - var(--header-h, 58px) - 28px);
    margin-block: 14px;
    box-shadow: 0 18px 50px -26px rgba(0,0,0,.28);
  }
  body.is-chat-page .chat-msgs { padding-inline: 18px; }
  .chat-composer { padding-bottom: 11px; }
}

/* The bottom tab bar has no business overlapping an open conversation. */
body.is-chat-page .mobile-tabs { display: none; }

/* Entry transition into a room */
.chat-enter { animation: chatEnter .26s cubic-bezier(.2,.86,.3,1) both; }
@keyframes chatEnter {
  from { opacity: 0; transform: translateY(8px) scale(.995); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .forum-card, .forum-card-link, .forum-card-icon { transition: none; }
  .forum-card-link:active { transform: none; }
  .chat-enter { animation: none; }
}

/* ============ 15. Chat subscriptions: empty state, add button, sheet ============ */

/* --- Empty panel --- */
.forums-onboard {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 34px 18px 26px;
  animation: fOnboard .4s cubic-bezier(.2,.9,.28,1) both;
}
@keyframes fOnboard {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.forums-onboard-ico {
  display: grid; place-items: center;
  width: 64px; height: 64px; margin-bottom: 15px;
  border-radius: 20px;
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 11%, transparent);
}
.forums-onboard-ico svg { width: 28px; height: 28px; }
.forums-onboard-title { margin: 0 0 7px; font-size: 18px; font-weight: 700; }
.forums-onboard-text {
  margin: 0 0 22px; max-width: 340px;
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
}
/* Explicit (not just inherited from .btn-primary) — an <a> tag, so this
   guarantees white text regardless of what else touches link color. */
.forums-onboard a.btn-primary { color: #fff; }

/* --- Add button (doubles as the empty-state CTA) --- */
.forums-add {
  display: flex; align-items: center; gap: 13px;
  width: 100%; max-width: 420px;
  margin: 14px auto 0;
  padding: 14px 16px;
  border: 1.5px dashed color-mix(in oklab, var(--primary) 42%, var(--border));
  border-radius: 18px;
  background: color-mix(in oklab, var(--primary) 4%, var(--surface));
  color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s, background .18s, transform .14s cubic-bezier(.2,.9,.3,1);
}
.forums-add:hover:not(:disabled) {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 9%, var(--surface));
}
.forums-add:active:not(:disabled) { transform: scale(.985); }
.forums-add:disabled { opacity: .5; cursor: default; border-style: solid; }

/* On mobile, the add-subject CTA is pinned to the very bottom of the screen
   (above the tab bar) instead of sitting at the end of a scrollable list, so
   it stays reachable without hunting for it. chats.js renders it as a
   separate copy portaled onto <body> (syncChatsAddFab, #chatsAddFab) rather
   than inline for this breakpoint at all — #app plays a `transform`
   animation on every navigation, which gives position:fixed descendants of
   #app a containing block other than the viewport for the animation's
   duration, so an inline copy here would sit near the top of the content
   for ~420ms before jumping down to its real fixed position on every single
   visit to /chats. Desktop keeps the plain in-flow `.forums-add` above,
   where it's never fixed and none of this applies. */
@media (max-width: 768px) {
  #forumsList { padding-bottom: 82px; }
  .forums-onboard { padding-bottom: 82px; }
  #chatsAddFab .forums-add {
    display: flex;
    position: fixed;
    left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom));
    z-index: var(--z-chrome);
    max-width: none;
    margin: 0;
    padding: 11px 13px;
    gap: 10px;
    box-shadow: 0 10px 26px -8px rgba(0,0,0,.28);
  }
  #chatsAddFab .forums-add-ico { width: 34px; height: 34px; border-radius: 11px; }
  #chatsAddFab .forums-add-ico svg { width: 18px; height: 18px; }
  #chatsAddFab .forums-add-title { font-size: 13.5px; }
  #chatsAddFab .forums-add-sub { font-size: 11px; }
}

.forums-add-ico {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, var(--primary), color-mix(in oklab, var(--primary) 76%, #000));
}
.forums-add-txt { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.forums-add-title { font-size: 15px; font-weight: 650; }
.forums-add-sub { font-size: 12px; color: var(--muted); }

/* --- Remove control on a subscribed card --- */
.forum-remove-btn {
  display: grid; place-items: center;
  width: 30px; flex-shrink: 0;
  border: 0; background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity .16s, color .16s;
}
.forum-card:hover .forum-remove-btn,
.forum-remove-btn:focus-visible { opacity: 1; }
.forum-remove-btn:hover { color: var(--danger); }
/* Touch devices have no hover, so keep it permanently visible but quiet. */
@media (hover: none) {
  .forum-remove-btn { opacity: .45; }
}

/* --- Add sheet --- */
.cadd-backdrop {
  position: fixed; inset: 0;
  z-index: 150;
  display: flex; align-items: flex-end; justify-content: center;
  background: color-mix(in oklab, var(--text) 34%, transparent);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .24s ease;
}
.cadd-backdrop.is-in { opacity: 1; }

.cadd-sheet {
  display: flex; flex-direction: column;
  width: 100%; max-width: 520px;
  max-height: min(84dvh, 660px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 44px -14px rgba(0,0,0,.34);
  transform: translateY(24px);
  opacity: 0;
  transition: transform .3s cubic-bezier(.2,.9,.26,1), opacity .22s ease;
  overflow: hidden;
}
.cadd-backdrop.is-in .cadd-sheet { transform: none; opacity: 1; }

.cadd-grab {
  width: 38px; height: 4px; flex-shrink: 0;
  margin: 9px auto 3px;
  border-radius: 999px;
  background: var(--border-strong);
}
.cadd-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 15px 11px;
  flex-shrink: 0;
}
.cadd-title { margin: 0; flex: 1; font-size: 16px; font-weight: 700; }
.cadd-x {
  display: grid; place-items: center;
  width: 31px; height: 31px; flex-shrink: 0;
  border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.cadd-x:hover { background: var(--bg); color: var(--text); border-color: var(--border); }

.cadd-search {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  margin: 0 15px 10px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  transition: border-color .16s, box-shadow .16s;
}
.cadd-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
  color: var(--primary);
}
.cadd-search input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  color: var(--text); font: inherit; font-size: 15px;
  padding: 10px 0;
}

.cadd-list {
  flex: 1; min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 11px 6px;
  display: flex; flex-direction: column; gap: 5px;
}

.cadd-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: inherit; font: inherit;
  text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, background .15s, transform .12s;
}
.cadd-row:active { transform: scale(.99); }
.cadd-row.is-on {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 8%, var(--surface));
}

.cadd-check {
  display: grid; place-items: center;
  width: 23px; height: 23px; flex-shrink: 0;
  border: 1.6px solid var(--border-strong);
  border-radius: 7px;
  color: transparent;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.cadd-row.is-on .cadd-check {
  background: var(--primary-fill);
  border-color: var(--primary);
  color: #fff;
  transform: scale(1.05);
}

.cadd-body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.cadd-name { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.cadd-meta { font-size: 12px; color: var(--muted); }

.cadd-empty { padding: 26px 12px; text-align: center; font-size: 13px; color: var(--muted); }

.cadd-foot {
  display: flex; align-items: center; gap: 9px;
  flex-shrink: 0;
  padding: 11px 15px calc(13px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}
.cadd-foot .btn { border-radius: 999px; font-size: 13.5px; }
.cadd-all { flex-shrink: 0; }
.cadd-foot #caddConfirm { flex: 1; }

@media (min-width: 700px) {
  .cadd-backdrop { align-items: center; }
  .cadd-sheet { border-radius: 22px; max-height: min(78dvh, 640px); }
}

@media (prefers-reduced-motion: reduce) {
  .forums-onboard, .cadd-sheet, .cadd-backdrop { animation: none; transition: none; }
  .forums-add:active, .cadd-row:active { transform: none; }
}

/* ============ 16. Seminar chats as lecturer chips ============
   They used to live behind a collapsed accordion, so in practice nobody saw
   them. Now they sit in the subject card, always visible, one chip per
   lecturer — which is the only detail a student needs to find their group. */

.sem-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 0 14px 13px 73px;   /* aligns under the title, past the 46px icon */
}
@media (max-width: 400px) {
  .sem-chips { padding: 0 12px 11px 12px; }
}

.sem-chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg);
  color: var(--text);
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.3;
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, background .15s, transform .12s, color .15s;
}
.sem-chip:active { transform: scale(.96); }
.sem-chip > span { flex-shrink: 0; }

/* Joined — a live room the student can walk into */
a.sem-chip.is-joined {
  border-color: color-mix(in oklab, var(--primary) 38%, transparent);
  background: color-mix(in oklab, var(--primary) 10%, var(--surface));
  color: var(--primary);
}
a.sem-chip.is-joined:hover {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 16%, var(--surface));
}
.sem-chip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* Not joined — tap to join */
.sem-chip.is-locked { color: var(--muted); border-style: dashed; }
.sem-chip.is-locked:hover {
  color: var(--primary);
  border-color: color-mix(in oklab, var(--primary) 42%, transparent);
  border-style: solid;
  background: color-mix(in oklab, var(--primary) 6%, var(--surface));
}
.sem-chip-lock { display: inline-grid; place-items: center; opacity: .8; }
.sem-chip-lock svg { width: 12px; height: 12px; }

/* Admin chip: name links into the room, × removes the seminar */
.sem-chip.is-admin,
.sem-chip.is-split { padding: 0; gap: 0; overflow: hidden; }
.sem-chip-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 9px 6px 11px;
  color: inherit; text-decoration: none;
}
.sem-chip-label:hover { color: var(--primary); }
.sem-chip-del {
  display: grid; place-items: center;
  width: 26px; align-self: stretch;
  border: 0; border-left: 1px solid var(--border);
  background: transparent; color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sem-chip-del:hover { background: color-mix(in oklab, var(--danger) 12%, transparent); color: var(--danger); }
.sem-chip-del svg { width: 13px; height: 13px; }

/* Admin "+ სემინარი" */
.sem-chip-add {
  border-style: dashed;
  border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
  color: var(--primary);
  background: transparent;
}
.sem-chip-add:hover { background: color-mix(in oklab, var(--primary) 8%, transparent); border-style: solid; }

/* Admin add form drops onto its own line below the chips */
.seminar-add-box {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  width: 100%;
  margin-top: 2px;
}
.seminar-add-box select {
  flex: 1; min-width: 160px;
  padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text);
  font: inherit; font-size: 12.5px;
}
.seminar-btn {
  padding: 7px 13px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.seminar-btn-join {
  background: var(--primary-fill); border-color: var(--primary); color: #fff;
}
.seminar-btn-join:hover { opacity: .9; }

/* The card keeps its bottom padding only when chips are present. */
.forum-card.has-seminars .forum-card-link { padding-bottom: 11px; }

@media (prefers-reduced-motion: reduce) {
  .sem-chip { transition: none; }
  .sem-chip:active { transform: none; }
}