:root {
  --bg:          #f4f6fb;
  --bg-elev:    #ffffff;
  --panel:      #ffffff;
  --panel-soft: #f7f9fd;
  --border:     #e4e9f2;
  --border-soft: #eef1f7;
  --text:       #14233e;
  --text-soft:  #4a5876;
  --muted:      #6b7793;
  --accent:     #0b4ea2;
  --accent-hover: #0a4290;
  --accent-soft: #e6efff;
  --accent-fg:  #ffffff;
  --danger:     #c0392b;
  --self-bubble: linear-gradient(180deg, #1462c7, #0b4ea2);
  --self-fg:    #ffffff;
  --other-bubble: #ffffff;
  --other-fg:   #14233e;
  --shadow-sm:  0 1px 2px rgba(12, 26, 62, 0.06);
  --shadow-md:  0 6px 24px rgba(12, 26, 62, 0.08);
  --shadow-lg:  0 16px 48px rgba(12, 26, 62, 0.14);
  --radius-sm:  8px;
  --radius:     12px;
  --radius-lg:  18px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0a1426;
    --bg-elev:    #131e36;
    --panel:      #131e36;
    --panel-soft: #182547;
    --border:     #243558;
    --border-soft: #1c2b50;
    --text:       #e7ecf6;
    --text-soft:  #a7b3cc;
    --muted:      #8290ad;
    --accent:     #4f8efc;
    --accent-hover: #6aa0ff;
    --accent-soft: #1e2f5d;
    --accent-fg:  #0a1426;
    --self-bubble: linear-gradient(180deg, #4f8efc, #2f6ee8);
    --self-fg:    #ffffff;
    --other-bubble: #1c2b50;
    --other-fg:   #e7ecf6;
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:  0 6px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg:  0 16px 48px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif,
                 "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Stop Chrome on Android from pulling-to-refresh (which would tear the
     WebSocket session) and disable overscroll bounce in general. */
  overscroll-behavior: none;
}

/* Pin the body in place so dragging at the very top doesn't rubber-band the
   whole page — the chat scrollable areas (.messages, .rooms) still scroll
   independently. */
body {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(11, 78, 162, 0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(11, 78, 162, 0.05), transparent 60%),
    var(--bg);
}

#app {
  height: 100dvh;
  display: grid;
}

/* ============ login card ============ */

#app:has(.login) {
  place-items: center;
  padding: 24px;
}

.login {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.login[hidden],
.card[hidden] { display: none; }

.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px 24px;
  box-shadow: var(--shadow-lg);
}

.brand-logo {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin: 0 auto 6px;
  background: #fff;
  border-radius: 50%;
  padding: 8px;
  box-shadow: var(--shadow-md), 0 0 0 1px var(--border);
}

.login h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.01em;
}

.login p {
  margin: 0;
  color: var(--text-soft);
  font-size: 14px;
  text-align: center;
}

.login .login-intro { color: var(--text-soft); }
.login .muted { color: var(--muted); font-size: 13px; }

.login label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-soft);
  font-weight: 600;
  margin-top: 6px;
}

.login input,
.composer textarea {
  font: inherit;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.login input:focus,
.composer textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-elev);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.login button,
.composer button,
.topbar button {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
}

.topbar button:hover,
.login button:hover { background: var(--panel-soft); }
.topbar button:active,
.login button:active { transform: translateY(1px); }

.login button[type="submit"],
.composer button[type="submit"] {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: transparent;
  padding: 12px 16px;
  font-size: 15px;
}

.login button[type="submit"]:hover,
.composer button[type="submit"]:hover { background: var(--accent-hover); }
.login button[type="submit"]:disabled,
.composer button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }

.login-error {
  color: var(--danger);
  margin: 0;
  font-size: 13px;
  text-align: center;
}

.login-foot {
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

.login .back-to-login {
  align-self: center;
  margin-top: 6px;
}

/* ============ class chooser ============ */

#app:has(.class-chooser) {
  place-items: center;
  padding: 24px;
}
.class-chooser {
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.class-chooser h1 {
  margin: 0;
  text-align: center;
  font-size: 22px;
}
.class-chooser .muted {
  color: var(--muted);
  text-align: center;
  margin: 0;
  font-size: 14px;
}
.class-chooser .class-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.class-chooser .class-empty {
  list-style: none;
  text-align: center;
  color: var(--muted);
  padding: 24px 8px;
}
.class-pick {
  width: 100%;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--text);
  transition: border-color 0.12s, background 0.12s, transform 0.06s;
}
.class-pick:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.class-pick:active { transform: translateY(1px); }
.class-pick-badge {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.02em;
}
.class-pick-label {
  font-weight: 600;
}
.class-pick-arrow {
  color: var(--muted);
  font-size: 18px;
}
.class-chooser .logout {
  align-self: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: 8px;
  margin-top: 6px;
}
.class-chooser .logout:hover { color: var(--text); }

/* ============ chat layout ============ */

#app:has(.topbar) {
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 280px 1fr;
  grid-template-areas:
    "top   top"
    "rooms msgs"
    "rooms comp";
}

.topbar {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  z-index: 5;
}

.topbar .back-to-classes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: background 0.12s;
}
.topbar .back-to-classes:hover { background: var(--accent-soft); }
.topbar .brand-mini {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  padding: 2px;
  box-shadow: 0 0 0 1px var(--border);
  flex-shrink: 0;
}
.topbar .class-label {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
  letter-spacing: 0.01em;
}
@media (max-width: 720px) {
  .topbar .class-label { display: none; }
}

.topbar h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  flex: 1;
  letter-spacing: -0.01em;
}

.topbar .me-name {
  font-size: 12px;
  color: var(--text-soft);
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--accent-soft);
  font-weight: 600;
}

.topbar .rooms-toggle { display: none; font-size: 18px; padding: 6px 12px; }

.topbar .enable-push,
.topbar .logout {
  font-size: 13px;
  padding: 7px 12px;
}

.topbar .logout {
  color: var(--text-soft);
}

/* ============ rooms sidebar ============ */

.rooms {
  grid-area: rooms;
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* "Back to class chooser" entry pinned to the bottom of the mobile drawer.
   Desktop hides this — topbar logo serves the same role there. */
.rooms .drawer-back {
  display: none;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--accent-soft);
  border: 0;
  color: var(--text);
  font: inherit;
  padding: 12px 12px;
  margin-top: auto;             /* push to bottom of the flex column */
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s;
  flex-shrink: 0;
}
.rooms .drawer-back:hover { background: var(--accent); }
.rooms .drawer-back .drawer-back-arrow {
  font-size: 20px;
  color: var(--accent);
  font-weight: 700;
  line-height: 1;
}
.rooms .drawer-back .drawer-back-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.rooms .drawer-back .drawer-back-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
}
.rooms .drawer-back .drawer-back-current {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rooms .room {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.rooms .room .room-name { flex: 1; }
.rooms .room .room-ro { font-size: 12px; opacity: 0.7; }
.rooms .room .room-bell {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1;
  opacity: 0.45;
  transition: opacity 0.15s, background 0.12s, transform 0.06s;
  filter: grayscale(1);
}
.rooms .room:hover .room-bell { opacity: 0.7; }
.rooms .room .room-bell:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.15);
}
.rooms .room .room-bell:active { transform: scale(0.92); }
.rooms .room .room-bell.on {
  opacity: 1;
  filter: none;
}
.rooms .room.active .room-bell { opacity: 0.85; }
.rooms .room.active .room-bell.on { opacity: 1; }
/* Always show bell on touch devices (no hover) */
@media (hover: none) {
  .rooms .room .room-bell { opacity: 0.85; }
}
.rooms .room.teacherinfo .room-name::before { content: "🎓 "; }
.rooms .room.maillist .room-name::before { content: "✉ "; }
.rooms .room:hover { background: var(--panel-soft); }
.rooms .room.active {
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}

.rooms .room .unread {
  float: right;
  background: var(--danger);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  padding: 0 8px;
  line-height: 19px;
  min-width: 20px;
  text-align: center;
  font-weight: 700;
}
.rooms .room.active .unread { background: #fff; color: var(--accent); }

/* Calendar pseudo-room sits above the real rooms, separated by a hairline. */
.rooms .room-calendar {
  margin-bottom: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.rooms .room-calendar .room-cal-icon { font-size: 14px; line-height: 1; }
.rooms .room-calendar.active { border-bottom-color: transparent; }

/* ============ calendar ============ */

.cal-shell { max-width: 980px; margin: 0 auto; padding-bottom: 24px; }

/* ---- toolbar ---- */
.cal-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cal-nav { display: flex; gap: 4px; flex: none; }
.cal-nav[hidden] { display: none; }
.cal-nav-btn {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: var(--radius-sm);
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.cal-nav-btn:hover { background: var(--panel-soft); border-color: var(--accent); }
.cal-today { font-size: 13px; font-weight: 600; }

.cal-period {
  flex: 1;
  min-width: 140px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  /* No capitalize: Hungarian month and weekday names are lowercase. */
}

.cal-views {
  display: flex;
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-elev);
}
.cal-view-btn {
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.cal-view-btn + .cal-view-btn { border-left: 1px solid var(--border); }
.cal-view-btn:hover { background: var(--panel-soft); }
.cal-view-btn.active { background: var(--accent); color: var(--accent-fg); }

/* ---- event chip (month cells + week columns) ---- */
.cal-chip {
  display: flex;
  align-items: baseline;
  gap: 4px;
  width: 100%;
  text-align: left;
  border: 0;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
  line-height: 1.35;
  padding: 3px 5px;
  border-radius: 4px;
  margin-bottom: 3px;
  cursor: pointer;
  overflow: hidden;
  transition: filter 0.12s;
}
.cal-chip:hover { filter: brightness(0.95); }
.cal-chip.all-day { border-left-style: double; border-left-width: 4px; }
.cal-chip.past { opacity: 0.55; }
.cal-chip-time { font-weight: 700; color: var(--accent); flex: none; }
.cal-chip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip-loc { color: var(--muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip-att { flex: none; margin-left: auto; font-size: 10px; }

.cal-more {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 5px;
  cursor: pointer;
  border-radius: 4px;
}
.cal-more:hover { background: var(--panel-soft); color: var(--accent); }

/* ---- month ---- */
.cal-month-head,
.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.cal-month-head { margin-bottom: 4px; }
.cal-dow {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 4px 0;
}
.cal-cell {
  min-height: 96px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px;
  overflow: hidden;
  cursor: pointer;
}
.cal-cell.other-month { background: var(--panel-soft); opacity: 0.65; }
.cal-cell.weekend .cal-cell-num { color: var(--danger); }
.cal-cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-cell-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  margin-bottom: 4px;
  padding-left: 2px;
}
.cal-cell.today .cal-cell-num { color: var(--accent); }

/* ---- week ---- */
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.cal-week-col {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  min-height: 140px;
}
.cal-week-col.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-week-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  padding: 0 2px 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
}
.cal-week-dow { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.cal-week-num { font-size: 15px; font-weight: 700; }
.cal-week-col.weekend .cal-week-num { color: var(--danger); }
.cal-week-col.today .cal-week-num { color: var(--accent); }
.cal-week-none { color: var(--muted); font-size: 12px; text-align: center; padding: 8px 0; }

/* Week columns are narrow, so a chip stacks instead of competing for one
   line — the title gets its own row and may wrap to two. */
.cal-week .cal-chip {
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  padding: 4px 6px;
}
.cal-week .cal-chip-title {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 600;
}
.cal-week .cal-chip-att { margin-left: 0; align-self: flex-start; }

/* Seven columns don't fit a phone — stack them as day sections instead. */
@media (max-width: 780px) {
  .cal-week { grid-template-columns: 1fr; }
  .cal-week-col { min-height: 0; }
  .cal-week-none { display: none; }
  .cal-week-col:not(:has(.cal-chip)) { opacity: 0.5; }
  .cal-week-head { border-bottom: 0; margin-bottom: 2px; padding-bottom: 2px; }
}

/* Month cells get tight on phones: hide overflow chips, keep the count. */
@media (max-width: 640px) {
  .cal-month-head, .cal-month-grid { gap: 2px; }
  .cal-cell { min-height: 62px; padding: 3px; }
  .cal-chip { font-size: 10px; padding: 2px 3px; }
  .cal-chip-time, .cal-chip-loc, .cal-chip-att { display: none; }
  .cal-more { font-size: 10px; }
}

.cal-day { max-width: 760px; margin: 0 auto; }

.calendar {
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: 24px;
}

.cal-heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4px 0 12px;
}

.cal-empty {
  text-align: center;
  color: var(--muted);
  padding: 32px 16px;
  font-size: 14px;
}

.cal-event {
  display: flex;
  gap: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}

/* Date chip — the visual anchor of each row. */
.cal-event .cal-date {
  flex: 0 0 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-sm);
  padding: 6px 0;
  height: fit-content;
}
.cal-event .cal-date-day { font-size: 19px; font-weight: 700; line-height: 1.1; }
.cal-event .cal-date-mon {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.85;
}

.cal-event .cal-body { flex: 1; min-width: 0; }

.cal-event .cal-title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.cal-event .cal-title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.cal-event .cal-soon {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}
.cal-event .cal-soon.today { background: var(--danger); color: #fff; }
/* School / year scope marker — distinct from the "soon" badge so the two
   can appear together without reading as one label. */
.cal-event .cal-scope,
.ev-badge.scope {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  border: 1px solid var(--border);
}
.cal-chip.scope-school { border-left-color: var(--danger); }
.cal-chip.scope-year { border-left-color: var(--muted); }
.cal-chip-scope { font-size: 10px; color: var(--muted); white-space: nowrap; }

.cal-event .cal-when {
  margin-top: 3px;
  font-size: 13px;
  color: var(--text-soft);
}
.cal-event .cal-loc {
  margin-top: 3px;
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.cal-event .cal-desc {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Past events are de-emphasized but still legible. */
.cal-event.past { opacity: 0.62; box-shadow: none; }
.cal-event.past .cal-date { background: var(--panel-soft); color: var(--muted); }

.cal-past { margin-top: 22px; }
.cal-past > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 0;
  list-style: none;
}
.cal-past > summary::-webkit-details-marker { display: none; }
.cal-past > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s;
}
.cal-past[open] > summary::before { content: "▾ "; }
.cal-past > summary:hover { color: var(--text-soft); }

.cal-event { cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
.cal-event:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.cal-event:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Cards are a preview — the full text lives in the detail dialog. */
.cal-event .cal-desc.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cal-event .cal-att-hint {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

@media (max-width: 640px) {
  .cal-event { padding: 12px 13px; gap: 11px; }
  .cal-event .cal-date { flex-basis: 42px; }
}

/* ============ event detail dialog ============ */

.ev-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(12, 26, 62, 0.5);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overscroll-behavior: contain;
}
.ev-modal {
  width: min(560px, 100%);
  max-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ev-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.ev-head-body { flex: 1; min-width: 0; }
.ev-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
}
.ev-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.ev-badges:empty { display: none; }
.ev-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--text-soft);
  border: 1px solid var(--border);
}
.ev-badge.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.ev-badge.accent.today { background: var(--danger); color: #fff; }
.ev-badge.muted { color: var(--muted); }
.ev-close {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: var(--radius-sm);
}
.ev-close:hover { color: var(--text); background: var(--panel-soft); }

.ev-body { padding: 16px 18px 20px; overflow-y: auto; }

/* Add-to-calendar footer — pinned below the scrolling body so it stays
   reachable on a long description. */
.ev-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-top: 1px solid var(--border-soft);
  background: var(--panel-soft);
}
.ev-add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s;
}
.ev-add:hover { background: var(--accent-hover); }
.ev-gcal {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--border);
}
.ev-gcal:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ev-row { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 9px; font-size: 14px; }
.ev-row[hidden] { display: none; }
.ev-row-icon { flex: none; line-height: 1.5; }
.ev-row-text { color: var(--text-soft); overflow-wrap: anywhere; }
.ev-when .ev-row-text { font-weight: 600; color: var(--text); }

.ev-desc {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ev-desc[hidden] { display: none; }

.ev-atts { margin-top: 16px; }
.ev-atts[hidden] { display: none; }
.ev-atts-head {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 8px;
}
.ev-atts-list { display: flex; flex-direction: column; gap: 6px; }
.ev-att {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s;
}
.ev-att:hover { border-color: var(--accent); background: var(--accent-soft); }
.ev-att-icon { flex: none; font-size: 17px; }
.ev-att-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ev-att-name {
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ev-att-size { font-size: 11.5px; color: var(--muted); }
.ev-att-dl { flex: none; color: var(--accent); font-size: 15px; }

@media (max-width: 640px) {
  .ev-overlay { padding: 0; align-items: flex-end; }
  .ev-modal {
    width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
  }
}

/* ============ messages pane ============ */

.messages {
  grid-area: msgs;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scroll-padding-bottom: 16px;
  -webkit-overflow-scrolling: touch;
}

.msg {
  max-width: min(560px, 80%);
  padding: 8px 12px 6px;
  border-radius: 16px;
  background: var(--other-bubble);
  color: var(--other-fg);
  border: 1px solid var(--border-soft);
  word-wrap: break-word;
  box-shadow: var(--shadow-sm);
}

/* Child name is secondary to the parent's own name. */
.msg .from-child { font-weight: 400; opacity: 0.75; }

.msg .from {
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 2px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.msg .content {
  white-space: pre-wrap;
  font-size: 14.5px;
}

.msg-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}

.msg .time {
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.msg .reply-btn {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.msg:hover .reply-btn,
.msg:focus-within .reply-btn { opacity: 1; }
.msg .reply-btn:hover { background: var(--accent-soft); color: var(--accent); }
.msg.self .reply-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* Touch devices: always show the reply button (no hover affordance) */
@media (hover: none) {
  .msg .reply-btn { opacity: 0.7; }
}

/* Quoted reply context inside a message bubble */
.msg .reply-ref {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: var(--panel-soft);
  border-left: 3px solid var(--accent);
  padding: 6px 10px;
  margin: 0 0 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-soft);
}
.msg.self .reply-ref {
  background: rgba(255,255,255,0.14);
  border-left-color: rgba(255,255,255,0.7);
  color: rgba(255,255,255,0.85);
}
.msg .reply-ref:hover { filter: brightness(1.05); }
.msg .reply-ref-author {
  display: block;
  font-weight: 700;
  color: var(--accent);
  font-size: 12px;
  margin-bottom: 1px;
}
.msg.self .reply-ref-author { color: #fff; }
.msg .reply-ref-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Flash animation when a parent message is jumped to */
.msg.flash {
  animation: flash 1.5s ease;
}
@keyframes flash {
  0%, 100% { box-shadow: var(--shadow-sm); }
  20%      { box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-md); }
}

/* Composer reply-preview */
.reply-preview { padding-bottom: 4px; }
.reply-preview-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-size: 12.5px;
}
.reply-preview-icon {
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
}
.reply-preview-body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.reply-preview-author {
  font-weight: 700;
  color: var(--accent);
  font-size: 12px;
}
.reply-preview-text {
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reply-preview-cancel {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  padding: 0 6px;
  line-height: 1;
}
.reply-preview-cancel:hover { color: var(--text); }

.msg.self {
  background: var(--self-bubble);
  color: var(--self-fg);
  border-color: transparent;
  align-self: flex-end;
  border-bottom-right-radius: 6px;
}
.msg.self .from { color: rgba(255, 255, 255, 0.85); }
.msg.self .time { color: rgba(255, 255, 255, 0.7); }

.msg:not(.self) {
  border-bottom-left-radius: 6px;
}

.day-sep {
  align-self: center;
  font-size: 11px;
  color: var(--muted);
  margin: 14px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* ============ composer ============ */

.composer {
  grid-area: comp;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 14px 14px;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  position: relative;
}

/* An author `display` rule beats the UA's `[hidden] { display: none }`, so
   every flex/grid element we toggle with the `hidden` attribute needs an
   explicit opt-out. Without this the composer stayed visible in read-only
   rooms (overlapping .readonly-notice in the same grid area) and in the
   calendar view, and the reply/attachment bars showed as empty strips. */
.composer[hidden],
.reply-preview[hidden],
.pending-files[hidden] { display: none; }

.composer.drop {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.composer .attach-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  font-size: 18px;
  flex-shrink: 0;
}

.composer-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.composer textarea {
  flex: 1;
  resize: none;
  max-height: 180px;
  min-height: 44px;
  border-radius: 22px;
  padding: 11px 16px;
}

.composer .send-btn {
  border-radius: 22px;
  padding: 0 22px;
  height: 44px;
}

.pending-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 5px 5px 10px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12.5px;
  max-width: 100%;
}

.file-chip.uploading { opacity: 0.7; }
.file-chip.error { border-color: var(--danger); }
.file-chip-name {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-chip-size { color: var(--muted); font-size: 11.5px; }
.file-chip-x {
  border: 0;
  background: transparent;
  color: var(--muted);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}
.file-chip-x:hover { background: var(--border); color: var(--text); }

.readonly-notice {
  grid-area: comp;
  padding: 14px;
  text-align: center;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
}

/* ============ message subject + attachments ============ */

.msg .subject {
  font-size: 13.5px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.005em;
  color: var(--accent);
}
.msg.self .subject { color: rgba(255,255,255,0.95); }

.msg .attachments {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.msg .att {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  background: var(--panel-soft);
  border: 1px solid var(--border-soft);
  font-size: 13px;
  max-width: 100%;
}
.msg.self .att {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
}
.msg .att:hover {
  background: var(--border-soft);
}
.msg.self .att:hover {
  background: rgba(255,255,255,0.18);
}
.msg .att-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.msg .att-size {
  color: var(--muted);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.msg.self .att-size { color: rgba(255,255,255,0.7); }

.msg .att-image {
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  display: block;
  background: var(--panel-soft);
}
.msg .att-image img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  object-fit: cover;
}

/* email-feed bubbles span wider and use a paper-ish look */
.msg.email {
  max-width: min(640px, 92%);
  align-self: flex-start;
  background: var(--bg-elev);
  border-color: var(--border);
}
.msg.email .content {
  font-size: 13.5px;
  color: var(--text-soft);
  position: relative;
}
.msg.email .content.clipped {
  max-height: 220px;
  overflow: hidden;
  cursor: pointer;
}
.msg.email .content.clipped::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--bg-elev));
  pointer-events: none;
}
.msg.email .content-toggle {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.msg.email .content-toggle:hover { text-decoration: underline; }

/* ============ mobile ============ */

@media (max-width: 720px) {
  #app:has(.topbar) {
    /* minmax(0, …): a bare 1fr never shrinks below its content's minimum,
       so one wide child (the composer, once it had two buttons) widened the
       whole column past the screen and clipped Kilépés and Küld. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "top"
      "msgs"
      "comp";
  }
  .topbar .rooms-toggle { display: inline-block; }
  .topbar h1 { font-size: 15px; }
  .topbar .me-name { display: none; }
  .topbar .brand-mini { display: none; }
  .rooms {
    position: fixed;
    inset: 56px 0 0 0;
    z-index: 10;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    width: min(82vw, 300px);
    box-shadow: var(--shadow-lg);
  }
  .rooms.open { transform: translateX(0); }
  /* The drawer-back button only matters on mobile (no topbar logo affordance) */
  .rooms .drawer-back { display: flex; }

  .card { padding: 26px 20px 20px; border-radius: var(--radius); }
  .brand-logo { width: 88px; height: 88px; }
  .login h1 { font-size: 19px; }
}

@media (max-width: 380px) {
  .msg { max-width: 88%; }
}

/* Reduce motion if preferred */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============ iOS install-to-home-screen hint ============ */

#ios-install-hint {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 1000;
  animation: ios-hint-slide-up 0.35s ease;
}

.hint-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  font-size: 13.5px;
  line-height: 1.35;
}

.hint-icon {
  font-size: 26px;
  flex-shrink: 0;
}

.hint-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text);
  min-width: 0;
}

.hint-body strong {
  font-weight: 700;
  font-size: 14px;
}

.hint-body span {
  color: var(--text-soft);
  font-size: 12.5px;
}

.hint-share {
  display: inline-block;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-family: -apple-system, "SF Pro Text", system-ui;
}

.hint-close {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hint-close:hover { background: var(--panel-soft); color: var(--text); }

@keyframes ios-hint-slide-up {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@media (max-width: 380px) {
  .hint-icon { font-size: 22px; }
  .hint-inner { padding: 10px 12px; gap: 10px; font-size: 12.5px; }
}

/* ============ timetable (parent view) ============ */

.tt-shell { max-width: 980px; margin: 0 auto; padding-bottom: 24px; }

.tt-weekbanner {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 14px;
}
.tt-weekbanner-sub { font-weight: 400; opacity: 0.8; }

/* One lesson, shared by the grid and the day list. */
.tt-l {
  display: block;
  background: var(--bg-elev);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 3px;
}
.tt-l:last-child { margin-bottom: 0; }
/* A lesson belonging to the week that ISN'T current — visible but recessive,
   so the grid still shows the full fortnight without misleading anyone. */
.tt-l.other-week { opacity: 0.45; border-left-style: dotted; }
.tt-l-subject { display: block; font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.tt-l-teacher, .tt-l-room { display: block; font-size: 11.5px; color: var(--muted); }
.tt-l-week {
  float: right;
  font-size: 10px; font-weight: 800; line-height: 16px;
  min-width: 16px; text-align: center; border-radius: 4px;
  background: var(--panel-soft); color: var(--muted);
  border: 1px solid var(--border);
}
.tt-l-week.now { background: var(--accent); color: var(--accent-fg); border-color: transparent; }

/* --- wide: aligned grid --- */
.tt-table { width: 100%; border-collapse: separate; border-spacing: 4px; }
.tt-table th {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted); padding: 4px 2px; text-align: center;
}
.tt-table th.today { color: var(--accent); }
.tt-table td {
  vertical-align: top;
  background: var(--panel-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 3px;
  width: 19%;
}
.tt-table td.today { background: var(--accent-soft); border-color: var(--accent); }
.tt-table td:empty { background: transparent; border-style: dashed; }
.tt-p { width: 1%; white-space: nowrap; text-align: right; padding-right: 8px !important; vertical-align: middle; }
.tt-p-n { display: block; font-size: 14px; color: var(--text); }
.tt-p-time {
  display: block; font-size: 10px; font-weight: 500;
  text-transform: none; letter-spacing: 0; line-height: 1.3;
}

/* --- narrow: day tabs + list --- */
.tt-days { display: none; }
.tt-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tt-tab {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 0;
  font: inherit; font-weight: 700; font-size: 13px;
  cursor: pointer;
}
.tt-tab.today { border-color: var(--accent); color: var(--accent); }
.tt-tab.active { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.tt-daylist { display: flex; flex-direction: column; gap: 6px; }
.tt-row { display: flex; gap: 10px; align-items: stretch; }
.tt-row.other-week { opacity: 0.5; }
.tt-row-when {
  flex: 0 0 52px; text-align: right; padding-top: 6px;
  border-right: 1px solid var(--border-soft); padding-right: 8px;
}
.tt-row-n { display: block; font-weight: 700; font-size: 13px; }
.tt-row-time { display: block; font-size: 11px; color: var(--muted); }
.tt-row .tt-l { flex: 1; }

@media (max-width: 760px) {
  .tt-table { display: none; }
  .tt-days { display: block; }
}

/* ============ polls (szavazás) ============ */

/* A poll is a card, not a bubble: the blue "own message" gradient would make
   bars and checkmarks unreadable, so even the starter's poll uses the panel
   colours and only keeps its right-hand alignment. */
.msg.poll-msg {
  width: min(460px, 92%);
  max-width: none;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}
.msg.self.poll-msg .from { color: var(--accent); }
.msg.self.poll-msg .time { color: var(--muted); }
.msg.self.poll-msg .reply-btn { color: var(--muted); }
.msg.self.poll-msg .reply-btn:hover { background: var(--accent-soft); color: var(--accent); }
.msg.self.poll-msg .reply-ref {
  background: var(--panel-soft);
  border-left-color: var(--accent);
  color: var(--text-soft);
}
.msg.self.poll-msg .reply-ref-author { color: var(--accent); }

.poll { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 4px; }
.poll-q { font-size: 15.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.poll-meta { font-size: 12px; color: var(--muted); margin-top: -4px; }

.poll-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-soft); }
.poll-who-btn {
  font: inherit;
  font-size: 12.5px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--text-soft);
  cursor: pointer;
}
.poll-who-btn.on { background: var(--accent); border-color: transparent; color: var(--accent-fg); font-weight: 600; }

.poll-opts { display: flex; flex-direction: column; gap: 6px; }
.poll-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--text);
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}
.poll-opt:disabled { cursor: default; }
.poll-opt:not(:disabled):hover { border-color: var(--accent); }
.poll-opt.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.poll-opt-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent-soft);
  z-index: -1;
  transition: width 0.25s ease;
}
.poll-opt-mark {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--muted);
  background: var(--panel);
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
}
.poll-opt-mark.radio { border-radius: 50%; }
.poll-opt-mark.box { border-radius: 4px; }
.poll-opt.on .poll-opt-mark { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
.poll-opt.on .poll-opt-mark::after { content: '✓'; font-weight: 700; }
.poll-opt-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.poll-opt-count { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.poll-opt.lead .poll-opt-count { color: var(--accent); }
.poll.closed .poll-opt.lead { border-color: var(--accent); }

.poll-mine { font-size: 12.5px; color: var(--text-soft); }
.poll-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12.5px; color: var(--muted); }
.poll-foot > span { margin-right: auto; }
.poll-link {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  background: none;
  border: 0;
  padding: 2px 0;
  color: var(--accent);
  cursor: pointer;
}
.poll-link.danger { color: var(--danger); }
.poll-voters { border-top: 1px solid var(--border-soft); padding-top: 6px; font-size: 12.5px; }
.poll-voters-head { font-weight: 700; color: var(--text-soft); margin-top: 6px; }
.poll-voters-list { color: var(--text); overflow-wrap: anywhere; }

/* ---- create dialog ---- */
.poll-form .ev-body { display: flex; flex-direction: column; gap: 14px; }
.pf-field { display: flex; flex-direction: column; gap: 6px; }
.pf-label { font-size: 12.5px; font-weight: 700; color: var(--text-soft); }
.poll-form input:not([type="checkbox"]):not([type="radio"]) {
  font: inherit;
  font-size: 16px; /* below 16px iOS zooms the page on focus */
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--text);
  box-sizing: border-box;
}
.poll-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pf-seg { display: inline-flex; align-self: flex-start; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.pf-seg button {
  font: inherit;
  font-size: 13px;
  padding: 5px 14px;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
}
.pf-seg button.on { background: var(--accent); color: var(--accent-fg); font-weight: 600; }
.pf-opts { display: flex; flex-direction: column; gap: 6px; }
.pf-opt { display: flex; gap: 6px; align-items: center; }
.pf-opt > input { flex: 1; }
.pf-x, .pf-add, .pf-foot button {
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
}
.pf-x { flex: none; width: 34px; height: 34px; font-size: 18px; line-height: 1; color: var(--muted); }
.pf-add { align-self: flex-start; padding: 6px 12px; font-size: 13px; color: var(--accent); border-style: dashed; }
.pf-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.pf-check input { margin-top: 3px; flex: none; }
.pf-note { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.pf-error { margin: 0; color: var(--danger); font-size: 13px; }
.pf-error[hidden] { display: none; }
.pf-foot { justify-content: flex-end; border-top: 1px solid var(--border-soft); }
.pf-foot button { padding: 9px 16px; font-weight: 600; }
.pf-foot .pf-submit { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.pf-foot .pf-submit:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 640px) {
  /* Date rows: the picker gets a line of its own (with ×) and the note goes
     beneath it, or the time is cut off. flatpickr copies .pf-when onto its
     visible alt input, so that class addresses the field people see. */
  .pf-opt { flex-wrap: wrap; }
  .pf-opt input.pf-when { flex: 1 1 calc(100% - 46px); }
  .pf-opt .pf-when ~ .pf-label-in { order: 3; flex: 1 1 100%; }
  .msg.poll-msg { width: 100%; }
}
/* flatpickr is appended to <body>; keep it above the dialog overlay. */
.flatpickr-calendar { z-index: 80 !important; }

/* A textarea's intrinsic width (its default cols) is its flex minimum; let
   the message box give way to the 📎/📊 buttons instead of overflowing. */
.composer-body { min-width: 0; }
.composer textarea { min-width: 0; }
@media (max-width: 380px) {
  .composer { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .composer .attach-btn { width: 36px; height: 36px; font-size: 16px; }
}

/* ============ calendar editing (class admins) ============ */

.cal-add-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 0;
  background: var(--accent);
  color: var(--accent-fg);
  cursor: pointer;
}
.cal-add-btn:hover { background: var(--accent-hover); }

.ev-manage {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 10px 18px 14px;
  border-top: 1px solid var(--border-soft);
}
.ev-manage button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  cursor: pointer;
}
.ev-manage .ev-delete { margin-left: auto; color: var(--danger); }

.ev-form .ef-when { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ev-form textarea {
  font: inherit;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--text);
  resize: vertical;
}
.ev-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ev-form .ef-files { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-form .ef-files:empty { display: none; }
.ev-form .ef-file-status:empty { display: none; }
@media (max-width: 640px) {
  .ev-form .ef-when { grid-template-columns: 1fr; }
}

/* ✉️ "also by email" toggle on mailing-list rooms. Reuses the bell's look
   (grey + faded when off); the off state also gets a strike-through, since
   unlike 🔔/🔕 there is no "no mail" emoji. */
.rooms .room .room-mail { position: relative; color: inherit; }
.rooms .room .room-mail:not(.on)::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px; top: 50%;
  height: 2px;
  background: currentColor;
  transform: rotate(-35deg);
  border-radius: 1px;
}

.app-toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 100;
  max-width: min(92vw, 460px);
  width: max-content;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--text);
  color: var(--bg-elev);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  animation: app-toast-in 0.18s ease-out;
}
.app-toast.error { background: var(--danger); color: #fff; }
@keyframes app-toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ============ room members + private messages ============ */

.topbar .members-btn { padding: 6px 10px; font-size: 16px; line-height: 1; }
.topbar .members-btn[hidden] { display: none; }

/* Unread private message while the drawer is closed (phones). */
.topbar .rooms-toggle { position: relative; }
.topbar .rooms-toggle.has-unread::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--bg-elev);
}

.rooms .dm-head {
  margin: 14px 12px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.rooms .dm-hint { margin: 0 12px 8px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.rooms .dm-row { display: flex; align-items: center; gap: 8px; }
.rooms .dm-row .dm-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rooms .dm-row .room-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rooms .dm-row .dm-kids,
.rooms .dm-row .dm-snippet {
  font-size: 12px;
  opacity: 0.75;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rooms .dm-row.has-unread .room-name,
.rooms .dm-row.has-unread .dm-snippet { font-weight: 700; opacity: 1; }
.rooms .dm-row .unread { float: none; flex: none; }

.members-modal .members-sub { margin-top: 4px; font-size: 13px; color: var(--muted); }
.members-list { display: flex; flex-direction: column; }
.member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.member-row:last-child { border-bottom: 0; }
.member-who { flex: 1; min-width: 0; }
.member-name { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.member-kids { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.member-dm {
  flex: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--accent-soft);
  color: var(--accent);
  cursor: pointer;
}
.member-dm:hover { border-color: var(--accent); }
.members-section {
  margin: 16px 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.ev-form select {
  font: inherit;
  font-size: 16px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--text);
}
.ev-form .ef-scope[hidden] { display: none; }

/* Demo instance only: "🎭 Szerepváltás" back to /demo. Bottom-left, clear of
   the composer's send button. */
.demo-switch {
  position: fixed;
  left: 12px;
  bottom: 84px;
  z-index: 70;
  padding: 7px 12px;
  border-radius: 999px;
  background: #7c3aed;
  color: #fff;
  font: 600 13px system-ui, sans-serif;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  opacity: 0.92;
}