/* ============================================================
    youassaultme - main stylesheet

    Font: Radio Canada Big (variable). Weights: 550 base, 700 bold,
    never black. No letter-spacing, no monospace. Theme: primary, white,
    grey. Glass surfaces everywhere. State changes animate borders -
    there is no glow anywhere in the UI.
   ============================================================ */


:root {
  --bg: #131114;
  --ink: #f5f2f3;
  --ink-soft: #c3bfc2;


  /*
    The three site colors, overridden at runtime from config.js.
    Categories may define their own themes on top of these; those
    arrive as inline custom properties on the themed widget itself.
  */
  --c-primary: #d64545;
  --c-primary-rgb: 214, 69, 69;
  --c-red: var(--c-primary);
  --c-white: #f5f2f3;
  --c-grey: #8a8a92;
  --danger: var(--c-primary);


  --glass: rgba(255, 255, 255, 0.05);
  --glass-strong: rgba(255, 255, 255, 0.085);
  --glass-dark: rgba(20, 17, 19, 0.72);
  --line: rgba(245, 242, 243, 0.13);
  --line-strong: rgba(245, 242, 243, 0.3);


  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-scale: 1;
  --dur-fast: calc(0.25s * var(--dur-scale));
  --dur-med: calc(0.55s * var(--dur-scale));
  --dur-slow: calc(1.1s * var(--dur-scale));
}


* { box-sizing: border-box; }


/*
  The hidden attribute must always win, even over display rules on the
  same element - an invisible flex overlay would swallow every click.
*/
[hidden] { display: none !important; }


html { scroll-behavior: smooth; }


body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Radio Canada Big', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 550;
  font-variation-settings: 'wght' 550;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}


/*
  Site-wide animated background: a grey base with soft primary, white and
  grey pools drifting very slowly. The animation is transform-only on a
  single fixed layer, so it stays on the compositor and never repaints,
  which keeps it cheap on phones as well as desktops.
*/
body::before {
  content: '';
  position: fixed;
  inset: -35%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 32% at 25% 30%, rgba(var(--c-primary-rgb), 0.14), transparent 70%),
    radial-gradient(30% 26% at 78% 18%, rgba(245, 242, 243, 0.055), transparent 70%),
    radial-gradient(36% 34% at 72% 78%, rgba(var(--c-primary-rgb), 0.09), transparent 70%),
    radial-gradient(28% 26% at 28% 82%, rgba(138, 138, 146, 0.12), transparent 70%),
    linear-gradient(160deg, #171416, #131114 45%, #171214);
  animation: bgDrift calc(48s * var(--dur-scale)) ease-in-out infinite alternate;
  will-change: transform;
}


@keyframes bgDrift {
  0%   { transform: translate3d(-2.5%, -1.5%, 0) rotate(0deg) scale(1); }
  100% { transform: translate3d(2.5%, 2%, 0) rotate(3deg) scale(1.07); }
}


body.profile-bg-active::before {
  inset: -9rem;
  background:
    linear-gradient(160deg, rgba(19, 17, 20, 0.68), rgba(19, 17, 20, 0.9)),
    var(--profile-bg-image),
    linear-gradient(160deg, #171416, #131114 45%, #171214);
  background-size: cover;
  background-position: center;
  filter: blur(96px) saturate(1.3) brightness(0.82);
  opacity: 0.86;
  transform: scale(1.16);
  animation: none;
}
body.profile-bg-active::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(45% 35% at 50% 12%, rgba(245, 242, 243, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(19, 17, 20, 0.18), rgba(19, 17, 20, 0.82));
}



body.no-animations *,
body.no-animations *::before,
body.no-animations *::after,
body.no-animations::before,
body.no-animations::after {
  animation: none !important;
  transition: none !important;
}


h1, h2, h3, h4, strong, b {
  font-weight: 700;
  font-variation-settings: 'wght' 700;
}


input, select, textarea, button {
  font-family: inherit;
  font-weight: 550;
  font-variation-settings: 'wght' 550;
  font-size: 1rem;
}


img { max-width: 100%; }
a { color: var(--ink); text-decoration: none; }


.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--c-red);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 12px 0;
  z-index: 200;
}
.skip-link:focus { left: 0; }




/* ============================ Buttons ============================ */


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  font-weight: 700;
  font-variation-settings: 'wght' 700;
  outline: none;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              border-color var(--dur-med) var(--ease),
              color var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.55; cursor: default; }


.btn-primary {
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
  color: #fff;
  border-color: rgba(245, 242, 243, 0.18);
}
.btn-primary:hover { transform: translateY(-2px); border-color: rgba(245, 242, 243, 0.65); }
.btn-primary:focus-visible { border-color: var(--c-white); }


.btn-ghost {
  background: var(--glass);
  color: var(--ink-soft);
  border-color: var(--line);
}
.btn-ghost:hover { color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:focus-visible { border-color: var(--c-white); }


.btn-danger { background: var(--glass); color: var(--danger); border-color: rgba(var(--c-primary-rgb), 0.4); }
.btn-danger:hover { border-color: var(--c-red); background: rgba(var(--c-primary-rgb), 0.1); }
.btn-danger:focus-visible { border-color: var(--c-red); }


.btn-small { padding: 0.4rem 0.9rem; font-size: 0.9rem; }
.btn-wide { width: 100%; }


.icon, .app-icon {
  width: 1.08em;
  height: 1.08em;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.btn .icon, .btn .app-icon, .nav-link .icon, .nav-link .app-icon, .tab .icon, .tab .app-icon { transform: translateY(-0.03em); }
.nav-link, .tab { display: inline-flex; align-items: center; gap: 0.45rem; }
.icon-only .icon { margin: 0; }

.page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  flex-wrap: wrap;
}




/* ============================ Forms ============================ */


.field { display: block; margin-bottom: 1rem; }
.field-label {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}


input[type="text"], input[type="password"], input[type="search"], textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--glass);
  color: var(--ink);
  outline: none;
  transition: border-color var(--dur-med) var(--ease),
              background-color var(--dur-fast) var(--ease);
}


/*
  Focus is an animated border, never a glow: the border color eases to
  the primary color and the surface brightens slightly. No box-shadow anywhere.
*/
input:focus, textarea:focus {
  border-color: var(--c-red);
  background: var(--glass-strong);
}
textarea { resize: vertical; min-height: 2.75rem; }

.input-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.input-icon-wrap .icon, .input-icon-wrap .app-icon {
  position: absolute;
  left: 0.9rem;
  color: var(--c-grey);
  pointer-events: none;
  z-index: 1;
}
.input-icon-wrap input, .input-icon-wrap textarea { padding-left: 2.55rem; }
.input-icon-wrap-textarea { align-items: flex-start; }
.input-icon-wrap-textarea .icon, .input-icon-wrap-textarea .app-icon { top: 0.88rem; }
.toolbar .input-icon-wrap { flex: 1 1 220px; }
.toolbar .input-icon-wrap .input-search { width: 100%; }


.form-error {
  color: var(--danger);
  font-size: 0.9rem;
  margin: 0.25rem 0 0.75rem;
}


.check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-soft);
  margin-right: 1rem;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.check .checkmark {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 7px;
  border: 1.5px solid var(--line);
  background: var(--glass);
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-med) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.check .checkmark::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease);
}
.check input:checked + .checkmark { background: var(--c-red); border-color: var(--c-red); }
.check input:checked + .checkmark::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .checkmark { border-color: var(--c-white); }
.check:active .checkmark { transform: scale(0.9); }
.checks { display: flex; align-items: end; padding-bottom: 0.4rem; }




/* ============================ Custom dropdown ============================ */


.dropdown { position: relative; min-width: 170px; }
.dropdown select { display: none; }


.dropdown-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--glass);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  outline: none;
  transition: border-color var(--dur-med) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.dropdown-button:hover { border-color: var(--line-strong); }
.dropdown-button:focus-visible { border-color: var(--c-red); }
.dropdown.is-open .dropdown-button { border-color: var(--c-red); }


.dropdown-chevron {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease);
}
.dropdown.is-open .dropdown-chevron { transform: rotate(-135deg) translateY(-2px); }


.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 260px;
  overflow-y: auto;
  padding: 0.4rem;
  border-radius: 16px;
  border: 1.5px solid var(--line);
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              border-color var(--dur-med) var(--ease),
              visibility var(--dur-fast);
}
.dropdown.is-open .dropdown-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  border-color: var(--line-strong);
}
.dropdown.drop-up .dropdown-menu { top: auto; bottom: calc(100% + 6px); transform-origin: bottom; }


.dropdown-option {
  display: block;
  width: 100%;
  padding: 0.55rem 0.8rem;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.dropdown-option:hover, .dropdown-option.is-focused {
  color: var(--ink);
  border-color: var(--line);
  transform: translateX(3px);
}
.dropdown-option.is-selected {
  color: #fff;
  background: rgba(var(--c-primary-rgb), 0.28);
  border-color: rgba(var(--c-primary-rgb), 0.55);
}




/* ============================ Custom date picker ============================ */


.datefield { position: relative; }


.datefield-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--glass);
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
  outline: none;
  transition: border-color var(--dur-med) var(--ease);
}
.datefield-button.has-value { color: var(--ink); }
.datefield-button:hover { border-color: var(--line-strong); }
.datefield-button:focus-visible { border-color: var(--c-red); }
.datefield-button::after {
  content: '';
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg) translateY(-2px);
}


.calendar {
  position: absolute;
  z-index: 70;
  top: calc(100% + 6px);
  left: 0;
  width: min(300px, 100%);
  padding: 0.9rem;
  border-radius: 18px;
  border: 1.5px solid var(--line);
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility var(--dur-fast);
}
.calendar.is-open { opacity: 1; transform: translateY(0) scale(1); visibility: visible; }
.calendar.drop-up { top: auto; bottom: calc(100% + 6px); }


.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.calendar-title { font-weight: 700; font-variation-settings: 'wght' 700; font-size: 0.95rem; }
.calendar-nav {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.calendar-nav:hover, .calendar-nav:focus-visible { border-color: var(--line-strong); }
.calendar-nav:active { transform: scale(0.9); }
.calendar-nav .icon { width: 1rem; height: 1rem; }


.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.calendar-dow {
  text-align: center;
  font-size: 0.7rem;
  color: var(--ink-soft);
  padding: 0.25rem 0;
}
.calendar-day {
  aspect-ratio: 1;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.85rem;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.calendar-day:hover, .calendar-day:focus-visible { border-color: var(--line-strong); transform: scale(1.08); }
.calendar-day.is-other { color: rgba(195, 191, 194, 0.35); }
.calendar-day.is-today { border-color: var(--c-grey); }
.calendar-day.is-selected { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.calendar-foot { display: flex; justify-content: flex-end; margin-top: 0.6rem; }




/* ============================ Custom color picker ============================ */


.color-slots { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }


.color-slot {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--glass);
  cursor: pointer;
  outline: none;
  transition: border-color var(--dur-med) var(--ease), transform var(--dur-fast) var(--ease);
}
.color-slot:hover, .color-slot:focus-visible { border-color: var(--line-strong); }
.color-slot.has-color { border-color: rgba(245, 242, 243, 0.35); }
.color-slot:active { transform: scale(0.93); }
.color-slot .slot-fill {
  position: absolute;
  inset: 5px;
  border-radius: 9px;
}
.color-slot .slot-plus {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 1.3rem;
}


.color-pop {
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  left: 0;
  width: 240px;
  padding: 0.8rem;
  border-radius: 16px;
  border: 1.5px solid var(--line-strong);
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility var(--dur-fast);
}
.color-pop.is-open { opacity: 1; transform: translateY(0) scale(1); visibility: visible; }


.swatch-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 0.7rem;
}
.swatch {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1.5px solid transparent;
  cursor: pointer;
  outline: none;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.swatch:hover, .swatch:focus-visible { transform: scale(1.12); border-color: var(--c-white); }


.color-pop-row { display: flex; gap: 0.5rem; }
.color-pop-row input { flex: 1; padding: 0.45rem 0.6rem; }




/* ============================ Login page ============================ */


.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
}


.login-shell {
  position: relative;
  width: min(420px, calc(100vw - 2.5rem));
  padding: 2rem 0 3rem;
  z-index: 1;
}


.login-brand { text-align: center; margin-bottom: 1.75rem; }
.brand-logo { display: inline-block; height: 44px; width: auto; }
.brand-logo-center { height: 72px; }


.login-card {
  background: var(--glass);
  border: 1.5px solid var(--line);
  border-radius: 22px;
  padding: 2rem 1.75rem;
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  transition: border-color var(--dur-med) var(--ease);
}
.login-card:focus-within { border-color: var(--line-strong); }
.login-title { margin: 0 0 1.25rem; font-size: 1.5rem; }




/* ============================ Topbar (gradient glass) ============================ */


/*
  The bar itself is transparent; a pseudo-element carries both the
  white-glass gradient (opaque at the very top, nothing at the bottom)
  and the backdrop blur, which is faded out along the same gradient via
  a mask so the blur dissolves instead of ending at a hard line.
*/
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem clamp(1rem, 4vw, 2.5rem) 1.1rem;
  z-index: 100;
  background: transparent;
}
.topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.035) 45%, rgba(255, 255, 255, 0) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
  transition: opacity var(--dur-med) var(--ease);
  opacity: 0.85;
}
.topbar.is-scrolled::before { opacity: 1; }


.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.topbar .brand-logo { height: 36px; }


.nav-drawer { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; }
.nav-links { display: flex; gap: 0.35rem; }


.nav-link {
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-med) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.nav-link:hover { color: var(--ink); border-color: var(--line); }
.nav-link.is-active { color: var(--ink); background: rgba(var(--c-primary-rgb), 0.22); border-color: rgba(var(--c-primary-rgb), 0.45); }


.nav-user { display: flex; align-items: center; gap: 0.75rem; }
.nav-profile {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  padding: 0.25rem 0.7rem 0.25rem 0.3rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: border-color var(--dur-med) var(--ease);
}
.nav-profile:hover { border-color: var(--line); }
.nav-username { color: var(--ink-soft); font-size: 0.9rem; }


.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--glass);
  cursor: pointer;
  outline: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: border-color var(--dur-fast) var(--ease);
}
.nav-toggle:hover, .nav-toggle:focus-visible { border-color: var(--line-strong); }
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }




/* ============================ Avatars ============================ */


.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(var(--c-primary-rgb), 0.25);
  background-size: cover;
  background-position: center;
  color: var(--ink);
  font-weight: 700;
  font-variation-settings: 'wght' 700;
  border: 1.5px solid var(--line);
  overflow: hidden;
  flex: 0 0 auto;
}
.avatar-small { width: 30px; height: 30px; font-size: 0.8rem; }
.avatar-medium { width: 44px; height: 44px; font-size: 1rem; }
.avatar-big { width: 96px; height: 96px; font-size: 2.2rem; }
.avatar-tiny { width: 24px; height: 24px; font-size: 0.7rem; }
.avatar.has-status { position: relative; overflow: visible; }
.avatar.has-status::after {
  content: '';
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 0.68em;
  height: 0.68em;
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: var(--c-grey);
}
.avatar.is-online::after { background: #43d17d; }
.avatar.is-offline::after { background: var(--c-grey); }




/* ============================ Views / pages ============================ */


.view { min-height: 100vh; }


/*
  Subtle page-switch animation: every time a view becomes active it
  plays a short rise-and-fade. Transform and opacity only, so the
  transition composites on the GPU and stays smooth on mobile.
*/
.view.view-enter { animation: viewIn calc(0.45s * var(--dur-scale)) var(--ease) both; }


@keyframes viewIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}


.page-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: calc(72px + 3rem) clamp(1rem, 4vw, 2rem) 5rem;
}
.page-inner-wide { max-width: 1180px; }


.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.page-title { margin: 0; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.page-sub { margin: 0.25rem 0 0; color: var(--ink-soft); }




/* ============================ Hero + rotator ============================ */


.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(72px + 3rem) 1.25rem 2rem;
}
.hero-inner { position: relative; max-width: 760px; }
.hero-logo {
  display: block;
  margin: 0 auto 1.6rem;
  height: clamp(72px, 14vw, 140px);
  width: auto;
}


/*
  The "Did you know?" rotator. Swaps every few seconds: the text blurs
  and fades out, is replaced, then blurs and fades back in. Filter and
  opacity are the only animated properties.
*/
.didyouknow {
  min-height: 3.2rem;
  margin: 0 auto 1.6rem;
  max-width: 640px;
}
.didyouknow-text {
  margin: 0;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  color: var(--ink-soft);
  transition: opacity calc(0.6s * var(--dur-scale)) var(--ease),
              filter calc(0.6s * var(--dur-scale)) var(--ease);
  opacity: 1;
  filter: blur(0);
}
.didyouknow-text.is-swapping { opacity: 0; filter: blur(10px); }
.didyouknow-text .dyk-said { color: var(--c-red); font-weight: 700; font-variation-settings: 'wght' 700; }
.didyouknow-text .dyk-correct { color: var(--c-white); font-weight: 700; font-variation-settings: 'wght' 700; }


.hero-stats { display: flex; justify-content: center; gap: 2.5rem; margin-bottom: 2.25rem; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; }
.stat-number { font-size: 2rem; font-weight: 700; font-variation-settings: 'wght' 700; }
.stat-red { color: var(--c-red); }
.stat-grey { color: var(--c-grey); }
.stat-label { color: var(--ink-soft); font-size: 0.85rem; }




/* ============================ Home showcase ============================ */


.home-showcase {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem) 6rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  align-items: start;
}


.showcase-card {
  position: relative;
  overflow: hidden;
  background: var(--glass);
  border: 1.5px solid var(--line);
  border-radius: 20px;
  padding: 1.4rem 1.5rem;
  animation: floatBob calc(7.5s * var(--dur-scale)) ease-in-out infinite;
  transition: border-color var(--dur-med) var(--ease);
}
.showcase-card:hover { border-color: rgba(var(--c-primary-rgb), 0.5); }


@keyframes floatBob {
  0%, 100% { transform: translate3d(0, -7px, 0); }
  50% { transform: translate3d(0, 7px, 0); }
}


.showcase-said {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  font-variation-settings: 'wght' 700;
  color: var(--ink);
  line-height: 1.4;
}
.showcase-said::before { content: '“'; color: var(--c-red); }
.showcase-said::after { content: '”'; color: var(--c-red); }


.showcase-correct {
  position: relative;
  z-index: 1;
  margin: 0.6rem 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.showcase-correct strong { color: var(--c-white); }


.showcase-meta {
  position: relative;
  z-index: 1;
  margin-top: 0.8rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--c-grey);
}





/* ============================ Home lower sections ============================ */


.home-section {
  max-width: 1080px;
  margin: 0 auto 4rem;
  padding: 0 clamp(1rem, 4vw, 2rem);
  text-align: center;
}
.home-section .section-head {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 1.2rem;
}
.home-section .section-head > div { margin: 0 auto; }
.home-post-grid, .home-user-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
}
.home-user-grid.people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-post-grid .gallery-card, .home-user-grid .person-card { min-width: 0; }


/* ============================ Starfield ============================ */


/*
  Category-themed widgets carry a canvas starfield behind their
  content: tiny stars that twinkle with atmospheric scintillation and
  drift on a slow sidereal rotation, tinted with the category colors.
  The canvas never intercepts clicks and sits under the z-indexed text.
*/
.starfield {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
}




/* ============================ Reveal animations ============================ */


.reveal, .reveal-now {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible, .reveal-now.is-visible { opacity: 1; transform: translateY(0); }
body.no-animations .reveal, body.no-animations .reveal-now { opacity: 1; transform: none; }




/* ============================ Mistakes page ============================ */


.toolbar { display: flex; gap: 0.75rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.input-search { flex: 1 1 220px; width: auto; }
.toolbar .dropdown { flex: 0 1 220px; }



/*
  Two clearly separated rows instead of one long wrapping strip: who's
  selected + the select-all/cancel escape hatch on top, the actual bulk
  actions below - so the destructive "delete selected" reads as its own
  grouped decision, not one more pill in a row of look-alike buttons.
*/
.manage-bar {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: -0.7rem 0 1.4rem;
  padding: 1rem 1.1rem;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  background: var(--glass);
}
.manage-bar-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.manage-bar-top { justify-content: flex-start; }
.manage-bar-top .manage-status { margin-right: 0.4rem; }
.manage-bar-actions {
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.manage-status { color: var(--ink-soft); font-weight: 700; font-variation-settings: 'wght' 700; }
.manage-bar .dropdown { flex: 0 1 200px; min-width: 160px; }
.manage-check {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.55rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.manage-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.manage-check-box {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1.5px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.06);
}
.manage-check input:checked + .manage-check-box {
  background: var(--c-primary);
  border-color: var(--c-primary);
}
.manage-check input:checked + .manage-check-box::after {
  content: '';
  display: block;
  width: 6px;
  height: 11px;
  margin: 2px auto 0;
  border-right: 2.4px solid #fff;
  border-bottom: 2.4px solid #fff;
  transform: rotate(45deg);
}
.mistake-card.is-selected { border-color: var(--c-primary); background: rgba(var(--c-primary-rgb), 0.1); }
.mistake-card.is-selectable { cursor: pointer; }

.mistake-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  counter-reset: mistake;
}


/*
  Card entrance is a pure CSS keyframe staggered with a per-card delay
  variable (--i) set from JS. Keyframes composite transform and opacity
  only, which is what keeps the stagger genuinely smooth - the old
  approach of toggling classes from setTimeout forced style recalcs in
  the middle of the animation and visibly stuttered.
*/
.mistake-card {
  position: relative;
  counter-increment: mistake;
  background: rgba(26, 22, 24, 0.82);
  border: 1.5px solid var(--line);
  border-left: 4px solid rgba(var(--c-primary-rgb), 0.55);
  border-left-color: var(--cat-accent, rgba(var(--c-primary-rgb), 0.55));
  border-radius: 20px;
  padding: 1.3rem 1.5rem 1.2rem 1.6rem;
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease),
              border-color var(--dur-med) var(--ease);
}
.mistake-card.card-in {
  animation: cardIn calc(0.55s * var(--dur-scale)) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}


@keyframes cardIn {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}


.mistake-card::before {
  content: '“';
  position: absolute;
  top: -2.4rem;
  right: 0.4rem;
  font-size: 8rem;
  line-height: 1;
  font-weight: 700;
  font-variation-settings: 'wght' 700;
  color: rgba(var(--c-primary-rgb), 0.08);
  pointer-events: none;
}
.mistake-card::after {
  content: '#' counter(mistake);
  position: absolute;
  bottom: 0.75rem;
  right: 1.1rem;
  font-size: 0.78rem;
  color: rgba(138, 138, 146, 0.55);
}
.mistake-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }


.mistake-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
  flex-wrap: wrap;
}


.badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  border: 1.5px solid;
  transition: border-color var(--dur-fast) var(--ease);
}
.badge-c0 { color: var(--c-red); border-color: rgba(var(--c-primary-rgb), 0.5); background: rgba(var(--c-primary-rgb), 0.1); }
.badge-c1 { color: var(--c-white); border-color: rgba(245, 242, 243, 0.4); background: rgba(245, 242, 243, 0.07); }
.badge-c2 { color: var(--c-grey); border-color: rgba(138, 138, 146, 0.5); background: rgba(138, 138, 146, 0.12); }


.mistake-meta { color: var(--c-grey); font-size: 0.8rem; }


.mistake-line {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin: 0.25rem 0;
}
.mistake-tag {
  flex: 0 0 auto;
  font-size: 0.68rem;
  text-transform: uppercase;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  border: 1.5px solid;
}
.mistake-tag-said { color: var(--c-red); border-color: rgba(var(--c-primary-rgb), 0.55); }
.mistake-tag-correct { color: var(--c-white); border-color: rgba(245, 242, 243, 0.4); }


.mistake-said {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.45;
  font-weight: 700;
  font-variation-settings: 'wght' 700;
}
.mistake-correct { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.mistake-note { position: relative; z-index: 1; margin: 0.45rem 0 0; color: var(--c-grey); font-size: 0.92rem; }


.mistake-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.3rem;
}
.mistake-actions { display: flex; gap: 0.5rem; }



.empty-note { color: var(--ink-soft); text-align: center; padding: 3rem 1rem; }




/* ============================ Home widgets ============================ */


.home-section, .people-section { margin-top: 2.4rem; }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.section-title { margin: 0; font-size: clamp(1.35rem, 2vw, 1.9rem); }
.home-post-grid, .home-user-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1020px;
  margin: 0 auto;
}


#view-home .home-section .section-head {
  justify-content: center;
  text-align: center;
}
.home-post-card {
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  background: var(--glass);
  cursor: pointer;
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.home-post-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.home-post-thumb { aspect-ratio: 1 / 1; overflow: hidden; background: #0b090a; }
.home-post-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.home-post-card:hover .home-post-thumb img { transform: scale(1.05); }
.home-post-body { padding: 0.9rem 1rem 1rem; }




/* ============================ Gallery ============================ */


.tag-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }


.tag-chip {
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--glass);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.85rem;
  outline: none;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-med) var(--ease);
}
.tag-chip:hover, .tag-chip:focus-visible { color: var(--ink); border-color: var(--line-strong); }
.tag-chip.is-active { color: var(--ink); background: rgba(var(--c-primary-rgb), 0.22); border-color: rgba(var(--c-primary-rgb), 0.5); }


.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}


.gallery-card {
  background: var(--glass);
  border: 1.5px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.gallery-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.gallery-card.card-in {
  animation: cardIn calc(0.55s * var(--dur-scale)) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.gallery-thumb { aspect-ratio: 1 / 1; overflow: hidden; background: #0b090a; }
.gallery-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.gallery-card:hover .gallery-image { transform: scale(1.06); }


.gallery-body { padding: 0.9rem 1.1rem 1.1rem; }
.gallery-uploader {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  font-size: 0.88rem;
}
.gallery-uploader .when { color: var(--c-grey); font-size: 0.78rem; }

.user-link, .comment-user-link, .gallery-uploader {
  color: inherit;
  text-decoration: none;
}
.user-link:hover .user-link-name, .comment-user-link:hover .user-link-name, .gallery-uploader:hover .user-link-name { color: var(--ink-soft); }
.user-link-copy { display: flex; flex-direction: column; min-width: 0; }
.user-link-name { font-weight: 700; font-variation-settings: 'wght' 700; }
.user-link-sub { color: var(--c-grey); font-size: 0.78rem; }

.gallery-description { margin: 0.2rem 0 0.4rem; font-size: 0.95rem; color: var(--ink); }
.gallery-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.4rem; }
.gallery-tag { color: var(--c-red); font-size: 0.82rem; }
.post-action-row { display: flex; align-items: center; gap: 0.65rem; margin-top: 0.7rem; color: var(--ink-soft); }
.post-counts { color: var(--c-grey); font-size: 0.86rem; }
.like-btn {
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  background: var(--glass);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.like-btn:hover, .like-btn:focus-visible { border-color: var(--line-strong); color: var(--ink); }
.like-btn.is-liked { color: var(--ink); border-color: rgba(var(--c-primary-rgb), 0.5); background: rgba(var(--c-primary-rgb), 0.16); }
.like-btn-small { padding: 0.2rem 0.55rem; font-size: 0.82rem; }




/* ============================ Lightbox ============================ */


.lightbox-backdrop { align-items: center; justify-content: center; }


.lightbox {
  display: grid;
  grid-template-columns: minmax(0, min(68vh, 760px)) minmax(320px, 420px);
  width: fit-content;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  margin: auto;
  background: var(--glass-dark);
  border: 1.5px solid var(--line-strong);
  border-radius: 22px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  backdrop-filter: blur(24px) saturate(1.35);
  transform: translateY(20px) scale(0.97);
  transition: transform var(--dur-med) var(--ease);
}
.modal-backdrop.is-open .lightbox { transform: translateY(0) scale(1); }


.lightbox-media {
  position: relative;
  display: grid;
  place-items: center;
  width: min(68vh, 760px, calc(100vw - 460px));
  min-width: 320px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #0b090a;
}

/*
  Scale-to-fit: the whole photo is always visible (letterboxed if its
  aspect ratio isn't square), never cropped. Wheel-zoom + drag-to-pan is
  a plain CSS transform on the same element; overflow:hidden on the
  media box does the clipping.
*/
.lightbox-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0b090a;
  cursor: zoom-in;
  transition: transform 0.06s linear;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.lightbox-image.is-zoomed { cursor: grab; }
.lightbox-image.is-panning { cursor: grabbing; transition: none; }

/*
  The navigator only appears once zoomed past fit, since only then is
  part of the photo actually out of view. Border and overlay tint both
  pull the runtime primary color rather than a hardcoded accent.
*/
.lightbox-navigator {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 92px;
  height: 92px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--c-primary);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-8px) scale(0.92);
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility var(--dur-fast);
}
.lightbox-navigator.is-visible { opacity: 1; transform: translateY(0) scale(1); visibility: visible; }
.lightbox-navigator-image { display: block; width: 100%; height: 100%; object-fit: contain; background: #0b090a; }
.lightbox-navigator::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(var(--c-primary-rgb), 0.22);
}
.lightbox-navigator-viewport {
  position: absolute;
  z-index: 2;
  border: 1.5px solid #fff;
  pointer-events: none;
}
.lightbox-meta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.25rem 1.25rem;
  border-left: 1px solid var(--line);
  overflow-y: auto;
}
.lightbox-details { flex: 0 0 auto; }
.lightbox-actions { justify-content: flex-start; flex-wrap: wrap; }
.comments-panel {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-height: 0;
}
.comments-title { margin: 0; font-size: 1.05rem; }
.comment-form { display: flex; flex-direction: column; gap: 0.55rem; }
.comment-input-wrap { position: relative; }
.comment-input {
  width: 100%;
  resize: vertical;
  min-height: 68px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: rgba(255, 255, 255, 0.045);
  color: var(--ink);
  padding: 0.7rem 4.2rem 2.5rem 0.8rem;
  font: inherit;
  outline: none;
  transition: border-color var(--dur-med) var(--ease);
}
.comment-input:focus { border-color: var(--line-strong); }
/*
  Text-and-icon only, no background/border: sits inside the textarea's
  own bottom-right corner rather than as a separate full-width action
  row underneath it.
*/
.comment-submit-btn {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border: none;
  background: transparent;
  color: var(--c-primary);
  font-weight: 700;
  font-variation-settings: 'wght' 700;
  cursor: pointer;
  outline: none;
  border-radius: 10px;
  transition: opacity var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.comment-submit-btn .icon { width: 0.95rem; height: 0.95rem; }
.comment-submit-btn:hover, .comment-submit-btn:focus-visible { background: rgba(var(--c-primary-rgb), 0.12); }
.comment-submit-btn[disabled] { opacity: 0.55; cursor: default; }
.comment-list { display: flex; flex-direction: column; gap: 0.8rem; }
.comment-item {
  margin-left: calc(var(--depth, 0) * 0.7rem);
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
}
.comment-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.35rem; }
.comment-name { font-weight: 700; font-variation-settings: 'wght' 700; }
.comment-body { margin: 0.35rem 0 0.6rem; color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-actions { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.comment-replies { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.7rem; }
.reply-slot { margin-top: 0.65rem; }
.compact-empty { padding: 1rem; }




/* ============================ Upload ============================ */


.upload-drop {
  display: block;
  width: 100%;
  padding: 1.6rem 1rem;
  margin-bottom: 1rem;
  border-radius: 16px;
  border: 1.5px dashed var(--line-strong);
  background: var(--glass);
  color: var(--ink-soft);
  cursor: pointer;
  text-align: center;
  outline: none;
  transition: border-color var(--dur-med) var(--ease), color var(--dur-fast) var(--ease);
}
.upload-drop:hover, .upload-drop:focus-visible { border-color: var(--c-red); color: var(--ink); }


.upload-preview {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 14px;
  margin-bottom: 1rem;
  background: #0b090a;
}





.user-link, .meta-user-link, .gallery-uploader, .comment-user-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}
.user-link:hover .user-link-name,
.meta-user-link:hover,
.gallery-uploader:hover .user-link-name,
.comment-user-link:hover .user-link-name { color: var(--ink-soft); }
.user-link-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.user-link-name { font-weight: 700; font-variation-settings: 'wght' 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-link-sub { color: var(--c-grey); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-uploader { max-width: 100%; }
.comment-user-link { align-items: flex-start; }


/* ============================ People ============================ */


.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}


.person-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  background: var(--glass);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  cursor: pointer;
  transition: border-color var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.person-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.person-card.card-in {
  animation: cardIn calc(0.55s * var(--dur-scale)) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}


.person-card { text-decoration: none; color: var(--ink); }
.person-main { min-width: 0; }
.person-bio {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.person-name { font-weight: 700; font-variation-settings: 'wght' 700; }
.person-sub { color: var(--c-grey); font-size: 0.82rem; }




/* ============================ Profile ============================ */


.profile-head {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.8rem;
  background: var(--glass);
  border: 1.5px solid var(--line);
  border-radius: 22px;
  margin-bottom: 2rem;
}
.profile-id { flex: 1 1 240px; }
.profile-display-name { margin: 0; font-size: 1.7rem; }
.profile-username { color: var(--c-grey); font-size: 0.95rem; }
.profile-bio { margin: 0.6rem 0 1rem; color: var(--ink-soft); }
.profile-since { margin-top: 0.75rem; color: var(--c-grey); font-size: 0.82rem; }


.profile-edit-avatar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}


/*
  The activity timeline tree: a vertical rail with color-coded nodes,
  one branch per action. Items slide in with the shared card stagger.
*/
.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--c-red), rgba(138, 138, 146, 0.35));
  border-radius: 2px;
}


.timeline-item {
  position: relative;
  padding: 0 0 1.4rem 1rem;
}
.timeline-item.card-in {
  animation: cardIn calc(0.5s * var(--dur-scale)) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 5px;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: var(--c-grey);
}
.timeline-item.t-mistake::before { background: var(--c-red); }
.timeline-item.t-photo::before { background: var(--c-white); }
.timeline-item.t-category::before { background: var(--c-grey); }
.timeline-item.t-edit::before { background: rgba(var(--c-primary-rgb), 0.55); }


.timeline-item::after {
  content: '';
  position: absolute;
  left: -0.85rem;
  top: 10px;
  width: 0.85rem;
  height: 2px;
  background: rgba(138, 138, 146, 0.3);
}


.timeline-label { font-size: 0.78rem; text-transform: uppercase; color: var(--c-grey); }
.timeline-text { margin: 0.1rem 0 0; color: var(--ink); }
.timeline-when { color: var(--c-grey); font-size: 0.8rem; }







/* ============================ People + activity widgets ============================ */


.person-follow-counts { color: var(--c-grey); font-size: 0.78rem; margin-top: 0.15rem; }
.activity-overview { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.activity-overview-card {
  padding: 1rem;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  background: var(--glass);
}
.activity-overview-card h3 { margin: 0 0 0.75rem; font-size: 1.05rem; }
.activity-overview-card-wide { width: 100%; }
.recent-mistake-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.65rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.recent-mistake-row:last-child { border-bottom: 0; }
.recent-mistake-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.recent-mistake-text span { color: var(--c-grey); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-mistake-time { color: var(--c-grey); font-size: 0.78rem; flex: 0 0 auto; }


/* ============================ Profile enhancements ============================ */


.profile-shell { margin-bottom: 2rem; }
.profile-cover {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  display: flex;
  align-items: end;
  border: 1.5px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(70% 100% at 10% 0%, rgba(var(--c-primary-rgb), 0.18), transparent 65%),
    var(--glass);
  background-size: cover;
  background-position: center;
}
.profile-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19, 17, 20, 0.15), rgba(19, 17, 20, 0.82));
  pointer-events: none;
}
.profile-shell .profile-head {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.profile-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.profile-social { margin-top: 0.35rem; color: var(--ink-soft); font-size: 0.86rem; }
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.8rem;
}
.profile-stat-card {
  padding: 0.8rem;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--glass);
}
.profile-stat-card strong { display: block; font-size: 1.2rem; }
.profile-stat-label { display: flex; align-items: center; gap: 0.35rem; color: var(--c-grey); font-size: 0.78rem; }
.profile-stat-label .icon { width: 0.9rem; height: 0.9rem; flex: 0 0 auto; }
.timeline-clickable { cursor: pointer; }
.timeline-clickable:hover .timeline-text { color: var(--ink-soft); }
.timeline-item.t-comment::before { background: rgba(245, 242, 243, 0.72); }
.file-hint { display: inline-block; color: var(--c-grey); font-size: 0.8rem; }
.profile-edit-actions { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.category-create-action { margin-top: 0.75rem; }




/* ============================ Admin ============================ */


.tabs { display: flex; gap: 0.4rem; margin-bottom: 1.5rem; flex-wrap: wrap; }


.tab {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--glass);
  color: var(--ink-soft);
  cursor: pointer;
  outline: none;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-med) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.tab:hover, .tab:focus-visible { color: var(--ink); border-color: var(--line-strong); }
.tab.is-active { background: rgba(var(--c-primary-rgb), 0.2); color: var(--ink); border-color: rgba(var(--c-primary-rgb), 0.5); }


.panel-card {
  background: var(--glass);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 1.4rem;
  margin-bottom: 1.5rem;
}
.panel-title { margin: 0 0 1rem; font-size: 1.1rem; }
.panel-row { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; }
.panel-row .field { margin-bottom: 0; }
.grow { flex: 1 1 220px; }


.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}


.admin-list { display: flex; flex-direction: column; gap: 0.75rem; }


.admin-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--glass);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 0.9rem 1.2rem;
  transition: border-color var(--dur-med) var(--ease);
}
.admin-row:hover { border-color: var(--line-strong); }
.admin-row-main { flex: 1 1 180px; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.admin-row-identity { min-width: 0; }
.admin-row-name { font-weight: 700; font-variation-settings: 'wght' 700; }
.admin-row-sub { color: var(--ink-soft); font-size: 0.83rem; }
.admin-row-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.admin-row.is-disabled { opacity: 0.55; }

/* One pill for the read/write pair - they're a single concept, not two loose buttons. */
.admin-row-perms {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.35rem 0.85rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}
.admin-row-group { display: flex; gap: 0.5rem; }
.admin-row-danger {
  display: flex;
  margin-left: auto;
}


.cat-swatches { display: inline-flex; gap: 4px; vertical-align: middle; margin-left: 0.5rem; }
.cat-swatch { width: 14px; height: 14px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.25); }
.badge-row-swatch { display: inline-block; vertical-align: middle; border-radius: 50%; margin-right: 0.55rem; }

.admin-user-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.badge-toggle-chip {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--glass);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  font-variation-settings: 'wght' 700;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.badge-toggle-chip:hover, .badge-toggle-chip:focus-visible { border-color: var(--line-strong); }
.badge-toggle-chip.is-active {
  color: var(--badge-color, var(--c-primary));
  border-color: var(--badge-color, var(--c-primary));
  background: rgba(var(--badge-color-rgb, var(--c-primary-rgb)), 0.15);
}
.badge-toggle-chip[disabled] { opacity: 0.6; cursor: default; }

/* Profile identity badges - same colored-chip look, read-only. */
.profile-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.5rem; }
.profile-badge-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1.5px solid var(--badge-color, var(--c-primary));
  color: var(--badge-color, var(--c-primary));
  background: rgba(var(--badge-color-rgb, var(--c-primary-rgb)), 0.15);
  font-size: 0.8rem;
  font-weight: 700;
  font-variation-settings: 'wght' 700;
}


.table-scroll { overflow-x: auto; }
.log-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.log-table th, .log-table td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.log-table td.wrap { white-space: normal; max-width: 320px; }
.log-table th { color: var(--ink-soft); font-weight: 700; font-variation-settings: 'wght' 700; }

.log-table tbody tr:hover { background: rgba(255, 255, 255, 0.035); }
.log-time, .log-ip, .log-method, .log-duration { color: var(--ink-soft); }
.log-country { min-width: 150px; font-weight: 700; font-variation-settings: 'wght' 700; }
.flag { font-size: 1.05rem; vertical-align: -0.05em; }
.log-method { font-weight: 700; font-variation-settings: 'wght' 700; }
.log-path { max-width: 300px; }
.log-agent { max-width: 360px; color: var(--c-grey); font-size: 0.78rem; }
.log-duration { color: var(--c-grey); }
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-soft);
}
.status-pill.status-ok { color: var(--ink); border-color: rgba(245, 242, 243, 0.22); }
.status-pill.status-warn { color: var(--c-grey); }
.status-pill.status-bad { color: var(--danger); border-color: rgba(var(--c-primary-rgb), 0.42); }




/* ============================ Modal + dialog ============================ */


/*
  Modals size to their content: the backdrop scrolls when a modal is
  taller than the viewport, the modal itself never grows internal
  scrollbars, and dropdown menus or the calendar can overflow its
  edges freely because overflow stays visible.
*/
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 9, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  display: flex;
  padding: 1.5rem;
  overflow-y: auto;
  z-index: 150;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease);
}
.modal-backdrop.is-open { opacity: 1; }


.modal {
  width: min(580px, 100%);
  margin: auto;
  background: var(--glass-dark);
  border: 1.5px solid var(--line);
  border-radius: 22px;
  padding: 1.75rem;
  overflow: visible;
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  backdrop-filter: blur(24px) saturate(1.35);
  transform: translateY(28px) scale(0.97);
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.modal-backdrop.is-open .modal { transform: translateY(0) scale(1); border-color: var(--line-strong); }


.modal-dialog { width: min(420px, 100%); }
.modal-wide { width: min(720px, 100%); max-height: calc(100vh - 4rem); display: flex; flex-direction: column; }
.modal-wide textarea#bulk-import-text { width: 100%; resize: vertical; min-height: 160px; border-radius: 14px; border: 1.5px solid var(--line); background: rgba(255, 255, 255, 0.045); color: var(--ink); padding: 0.7rem 0.85rem; font: inherit; outline: none; }
.modal-wide textarea#bulk-import-text:focus { border-color: var(--line-strong); }
.modal-wide code { background: rgba(255, 255, 255, 0.07); border-radius: 6px; padding: 0.1rem 0.35rem; font-size: 0.85em; }

.bulk-import-preview-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-height: min(50vh, 480px);
  overflow-y: auto;
  scrollbar-width: none;
  padding-right: 0.2rem;
  margin: 0.7rem 0;
}
.bulk-import-preview-list::-webkit-scrollbar { display: none; }
.bulk-preview-card {
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 0.9rem 1.1rem;
  background: rgba(255, 255, 255, 0.03);
}
.bulk-preview-warning { color: var(--c-primary); font-size: 0.8rem; }
.bulk-preview-date { color: var(--c-grey); font-size: 0.8rem; margin-top: 0.6rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem; }
.dialog-message { margin: 0 0 0.5rem; color: var(--ink-soft); white-space: pre-line; }




/* ============================ Toasts ============================ */


.toast-stack {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 300;
  width: min(420px, calc(100vw - 2rem));
  pointer-events: none;
}


.toast {
  pointer-events: auto;
  background: var(--glass-dark);
  border: 1.5px solid var(--line);
  border-left: 4px solid var(--c-grey);
  border-radius: 14px;
  padding: 0.8rem 1.1rem;
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.toast.is-shown { opacity: 1; transform: translateY(0); }
.toast.toast-error { border-left-color: var(--c-red); }
.toast.toast-ok { border-left-color: var(--c-white); }




/* ============================ Mobile ============================ */


@media (max-width: 1120px) {
  .home-post-grid, .home-user-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-overview { grid-template-columns: 1fr; }
  .profile-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


@media (max-width: 760px) {
  .nav-toggle { display: flex; }


  .nav-drawer {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 1rem clamp(1rem, 4vw, 2.5rem) 1.25rem;
    background: var(--glass-dark);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    backdrop-filter: blur(22px) saturate(1.3);
    border-bottom: 1.5px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                visibility var(--dur-fast);
  }
  .nav-drawer.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav-links { flex-direction: column; }
  .nav-link { padding: 0.7rem 1rem; }
  .nav-user { justify-content: space-between; border-top: 1px solid var(--line); padding-top: 0.75rem; }


  .modal { padding: 1.25rem; }
  .page-head { align-items: stretch; flex-direction: column; }
  .mistake-line { flex-direction: column; gap: 0.3rem; }
  .section-head { align-items: stretch; flex-direction: column; }
  .gallery-grid, .home-post-grid, .home-user-grid { grid-template-columns: 1fr; }
  .profile-head { padding: 1.25rem; }
  .profile-cover { min-height: 210px; }
  .profile-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lightbox {
    grid-template-columns: 1fr;
    width: min(100%, calc(100vw - 1rem));
    max-height: calc(100vh - 1rem);
  }
  .lightbox-media {
    width: min(100%, 42vh);
    min-width: 0;
    margin: 0 auto;
  }
  .lightbox-meta { border-left: 0; border-top: 1px solid var(--line); max-height: 52vh; }
  .comment-item { margin-left: calc(var(--depth, 0) * 0.35rem); }
  .profile-edit-avatar { align-items: flex-start; flex-direction: column; }
}




/* ============================ Reduced motion ============================ */


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }


  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }


  body::before { animation: none !important; }
  .reveal, .reveal-now { opacity: 1; transform: none; }
}


/* ============================ Late UI refinements ============================ */

.dropdown, .datefield { z-index: 280; }
.dropdown-menu, .calendar { z-index: 300; }
.calendar-title { display: inline-flex; align-items: center; justify-content: center; gap: 0.2rem; }
.calendar-title-button {
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  font-variation-settings: 'wght' 800;
  padding: 0.25rem 0.42rem;
}
.calendar-title-button:hover, .calendar-title-button:focus-visible { border-color: var(--line-strong); outline: none; }
.calendar-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}
.calendar-choice {
  min-height: 42px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  color: var(--ink-soft);
  cursor: pointer;
  font: inherit;
}
.calendar-choice:hover, .calendar-choice:focus-visible { border-color: var(--line-strong); color: var(--ink); outline: none; }
.calendar-choice.is-selected { background: rgba(var(--c-primary-rgb), 0.22); border-color: rgba(var(--c-primary-rgb), 0.55); color: var(--ink); }

@media (min-width: 761px) {
  /*
    The links must sit dead-center in the topbar no matter how wide the
    brand logo or the right-hand user cluster are, so they are taken out
    of the drawer's own flex flow and centered against the topbar itself
    (the nearest positioned ancestor) instead of against nav-drawer's box,
    which only spans the space to the right of the logo.
  */
  .nav-drawer { flex: 1 1 auto; justify-content: flex-end; margin-left: 0; }
  .nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .nav-user { margin-left: 0; }
}

.like-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  line-height: 1;
  min-height: 34px;
}
.like-btn .icon { width: 0.9rem; height: 0.9rem; stroke-width: 2.4; }
.like-btn-small .icon { width: 0.82rem; height: 0.82rem; }
.like-separator { color: var(--c-grey); transform: translateY(-0.02rem); }
.like-count { min-width: 0.55rem; text-align: left; }

.lightbox-meta {
  /*
    Without this the grid row auto-sizes to fit however tall the
    comment thread gets, so the whole popup grows with it and only
    clips (with no way to reach the clipped part) once it hits the
    outer .lightbox max-height. Capping meta's own height to match the
    image's - the same min(68vh, 760px, ...) formula .lightbox-media
    uses for its square size - means the overflow:hidden/min-height:0
    chain below actually has a bounded box to clip within, so
    .comment-list can scroll instead of the popup ever changing size.
  */
  max-height: min(68vh, 760px, calc(100vh - 2rem));
  overflow: hidden;
  min-height: 0;
}
.comments-panel {
  flex: 1 1 auto;
  overflow: hidden;
  min-height: 0;
}
.comment-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.2rem;
  scrollbar-width: none;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.comment-list::-webkit-scrollbar { display: none; }
.comment-item {
  position: relative;
  margin-left: 0;
  padding: 0.28rem 0 0.42rem calc(0.9rem + (var(--depth, 0) * 1rem));
  border: 0;
  border-radius: 0;
  background: transparent;
}
.comment-item::before {
  content: '';
  position: absolute;
  left: calc(0.26rem + (var(--depth, 0) * 1rem));
  top: 2.05rem;
  bottom: -0.45rem;
  width: 1.5px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--line-strong), var(--line));
}
.comment-item:last-child::before { bottom: 0.25rem; }
.comment-head { margin-bottom: 0.2rem; }
.comment-body { max-width: 100%; margin: 0.3rem 0 0.45rem; }
.comment-actions { gap: 0.5rem; }
.comment-replies { margin-top: 0.55rem; gap: 0.4rem; }
.reply-slot { margin-top: 0.5rem; }

/*
  Admin fills the window edge-to-edge like the inbox page, with its own
  padding so nothing sits flush against the sides - the log table in
  particular has ten columns and needs real room, but every tab in here
  benefits from not being squeezed into the normal centered 980px column.
*/
#view-admin .page-inner {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50vw;
  margin-left: -50vw;
  padding: calc(72px + 3rem) clamp(1rem, 4vw, 2.5rem) 5rem;
}
#tab-log .panel-card { max-width: none; }
#tab-log .table-scroll { width: 100%; padding-bottom: 0.3rem; }

.notifications-panel {
  position: fixed;
  top: 74px;
  right: clamp(0.8rem, 3vw, 2.3rem);
  z-index: 260;
  width: min(390px, calc(100vw - 1.2rem));
  max-height: min(620px, calc(100vh - 94px));
  overflow: hidden;
  border: 1.5px solid var(--line-strong);
  border-radius: 22px;
  background: var(--glass-dark);
  box-shadow: var(--shadow-strong);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  backdrop-filter: blur(24px) saturate(1.35);
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-10px) scale(0.96);
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease),
              transform var(--dur-med) var(--ease),
              visibility var(--dur-med);
}
.notifications-panel.is-open { opacity: 1; transform: translateY(0) scale(1); visibility: visible; }
.notifications-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--line);
}
.notifications-head h3 { margin: 0; font-size: 1rem; }
.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: min(520px, calc(100vh - 174px));
  overflow-y: auto;
  padding: 0.75rem;
  scrollbar-width: none;
}
.notifications-list::-webkit-scrollbar { display: none; }
.notification-card {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  padding: 0.72rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
}
.notification-card:hover, .notification-card:focus-visible { border-color: var(--line); color: var(--ink); outline: none; }
.notification-card.is-unread { background: rgba(var(--c-primary-rgb), 0.12); border-color: rgba(var(--c-primary-rgb), 0.25); }
.notification-icon { width: 1.05rem; height: 1.05rem; margin-top: 0.15rem; color: var(--ink); }
.notification-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.notification-message { overflow-wrap: anywhere; }
.notification-time { color: var(--c-grey); font-size: 0.78rem; }
/*
  Icon-only nav buttons (currently just Notifications): the base .btn
  padding is asymmetric (wider than tall) to fit an icon-plus-label, so an
  icon-only button needs its own fixed square box instead - same height
  as a text-and-icon .btn-small neighbor, exactly as wide.
*/
.btn-icon-round {
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  flex: 0 0 auto;
}
.icon-badge-btn { position: relative; }
.nav-badge {
  position: absolute;
  top: -0.4rem;
  right: -0.35rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--c-primary);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  font-variation-settings: 'wght' 800;
}

/*
  Inbox: full-screen, edge to edge below the topbar - Instagram's DM
  layout rather than a boxed card floating in the page. The shell fills
  the viewport height exactly once and never scrolls itself; the two
  panels inside (chat-list, chat-messages) own their own scroll.
*/
#view-chats { height: 100vh; overflow: hidden; }
.chat-shell {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  height: 100vh;
  padding-top: 72px;
}
.chat-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1.5px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.chat-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.chat-sidebar-title { margin: 0; font-size: 1.35rem; }
.chat-sidebar-actions { display: flex; gap: 0.4rem; }
.chat-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-height: 0;
  overflow-y: auto;
  padding: 0.6rem;
  scrollbar-width: none;
}
.chat-list::-webkit-scrollbar { display: none; }
.chat-list-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: var(--ink-soft);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-med) var(--ease);
}
.chat-list-item:hover, .chat-list-item.is-active { color: var(--ink); background: rgba(255, 255, 255, 0.045); border-color: var(--line); }
.chat-list-copy { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.chat-list-name { font-weight: 800; font-variation-settings: 'wght' 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list-last { color: var(--c-grey); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-unread {
  min-width: 1.35rem;
  height: 1.35rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--c-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  opacity: 1;
  transform: scale(1);
}
.chat-unread.is-clearing {
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.chat-unread.is-clearing.is-cleared { opacity: 0; transform: scale(0.4); }
.chat-window {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chat-window::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--chat-bg);
  background-size: cover;
  background-position: center;
  opacity: 0;
  filter: blur(28px) saturate(1.1);
  transform: scale(1.08);
  transition: opacity var(--dur-slow) var(--ease);
}
.chat-window.has-chat-background::before { opacity: 0.32; }
.chat-window > * { position: relative; z-index: 1; }

/*
  Every full render of the active chat gets a brand-new .chat-conversation
  node, so its entrance keyframe plays automatically on insertion - no
  remove/reflow/add dance needed like the route-level view transition.
  Live polling only ever touches .chat-messages / the typing row inside
  it, so background refreshes never replay this entrance.
*/
.chat-conversation {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  animation: chatConvIn calc(0.4s * var(--dur-scale)) var(--ease) both;
}
@keyframes chatConvIn {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.chat-back-btn {
  display: none;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--glass);
  color: var(--ink);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.chat-back-btn:hover, .chat-back-btn:focus-visible { border-color: var(--line-strong); }
.chat-back-btn .icon { width: 1.1rem; height: 1.1rem; }

.chat-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
}
.chat-head-identity {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}
a.chat-head-identity:hover .chat-title-block h3 { color: var(--ink-soft); }
.chat-title-block { min-width: 0; flex: 1 1 auto; }
.chat-title-block h3 { margin: 0; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--dur-fast) var(--ease); }
.chat-title-block p { margin: 0.15rem 0 0; color: var(--c-grey); font-size: 0.8rem; }
.chat-head-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: flex-end; }

/*
  The avatar "pops" briefly right after a chat icon/background upload
  succeeds and the fresh render lands - a stand-in for a true crossfade,
  which background-image can't animate on its own.
*/
@keyframes avatarPop {
  0%   { transform: scale(0.82); opacity: 0.35; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.avatar-pop { animation: avatarPop calc(0.42s * var(--dur-scale)) var(--ease) both; }

.chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.15rem;
  scrollbar-width: none;
}
.chat-messages::-webkit-scrollbar { display: none; }

/*
  Instagram-style rows: the avatar sits beside the bubble (only drawn on
  the last message of a consecutive run from the same sender - the empty
  slot before it just reserves the same width so bubbles stay aligned),
  and consecutive bubbles from one sender sit closer together.
*/
.chat-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: min(78%, 560px);
  margin-top: 0.55rem;
}
.chat-row.is-grouped { margin-top: 0.16rem; }
.chat-row.is-other { align-self: flex-start; }
.chat-row.is-own { align-self: flex-end; flex-direction: row-reverse; }
.chat-row-avatar { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; }
.chat-row-avatar-link { display: block; }
.chat-bubble-col { min-width: 0; display: flex; flex-direction: column; }
.chat-row.is-own .chat-bubble-col { align-items: flex-end; }
.chat-row-name { margin: 0 0 0.2rem 0.15rem; color: var(--c-grey); font-size: 0.76rem; }

/*
  Reply action: an icon button that sits flush against the bubble and
  only becomes visible (and interactive) on hover/focus, so it never
  clutters the conversation at rest.
*/
.chat-message-reply-btn {
  align-self: center;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--c-grey);
  cursor: pointer;
  outline: none;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.chat-message-reply-btn .icon { width: 0.95rem; height: 0.95rem; }
.chat-row:hover .chat-message-reply-btn,
.chat-message-reply-btn:focus-visible {
  opacity: 1;
  transform: scale(1);
}
.chat-message-reply-btn:hover, .chat-message-reply-btn:focus-visible {
  color: var(--ink);
  border-color: var(--line);
}

.chat-message {
  padding: 0.65rem 0.9rem;
  border-radius: 18px 18px 18px 5px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.055);
  overflow-wrap: anywhere;
}
.chat-message.is-own {
  border-radius: 18px 18px 5px 18px;
  background: linear-gradient(135deg, rgba(var(--c-primary-rgb), 0.85), rgba(var(--c-primary-rgb), 0.62));
  border-color: rgba(var(--c-primary-rgb), 0.35);
}
.chat-message.is-own .chat-message-body { color: #fff; }
.chat-message-body { margin: 0; white-space: pre-wrap; color: var(--ink); }

/*
  Quoted reference to the message being replied to, shown at the top of
  a reply bubble - a slightly recessed strip with the original sender's
  name and a one-line preview of whatever they sent (text, photo, video
  or shared post all reduce to a short label here).
*/
.chat-reply-quote {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.35rem 0.6rem;
  margin-bottom: 0.45rem;
  border-left: 2.5px solid rgba(var(--c-primary-rgb), 0.55);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.14);
}
.chat-message.is-own .chat-reply-quote { background: rgba(0, 0, 0, 0.16); border-left-color: rgba(255, 255, 255, 0.55); }
.chat-reply-quote-name { font-size: 0.76rem; font-weight: 700; font-variation-settings: 'wght' 700; color: rgba(var(--c-primary-rgb), 0.95); }
.chat-message.is-own .chat-reply-quote-name { color: rgba(255, 255, 255, 0.85); }
.chat-reply-quote-preview {
  font-size: 0.8rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-message.is-own .chat-reply-quote-preview { color: rgba(255, 255, 255, 0.75); }
.chat-media { display: block; max-width: 100%; border-radius: 14px; margin-top: 0.5rem; background: #080708; }
.chat-media-image { max-height: 360px; object-fit: contain; }
.chat-media-video { max-height: 360px; }

.chat-row-meta { display: flex; align-items: center; gap: 0.4rem; margin: 0.22rem 0.2rem 0; }
.chat-time { color: var(--c-grey); font-size: 0.7rem; }
.chat-receipt { color: var(--c-grey); font-size: 0.7rem; }
.chat-receipt.is-seen { color: rgba(var(--c-primary-rgb), 0.85); }

/*
  Typing indicator: a fixed-height row that animates in/out via
  max-height + opacity so its appearance and disappearance are both
  animated rather than an instant layout snap.
*/
.chat-typing-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-height: 0;
  padding: 0 1.15rem;
  overflow: hidden;
  opacity: 0;
  color: var(--c-grey);
  font-size: 0.8rem;
  transition: max-height var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease), padding var(--dur-med) var(--ease);
}
.chat-typing-row:not([hidden]) { max-height: 2.4rem; padding: 0.3rem 1.15rem; opacity: 1; }
.typing-avatars { display: flex; }
.typing-avatars .avatar { margin-left: -0.4rem; border-color: var(--bg); }
.typing-avatars .avatar:first-child { margin-left: 0; }
.typing-dots { display: inline-flex; align-items: center; gap: 3px; }
.typing-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-grey);
  animation: typingBounce calc(1.1s * var(--dur-scale)) ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: calc(0.15s * var(--dur-scale)); }
.typing-dot:nth-child(3) { animation-delay: calc(0.3s * var(--dur-scale)); }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/*
  Active-reply preview: animates open/closed with the same max-height +
  opacity technique as the typing row, so starting or cancelling a reply
  never causes an instant layout snap.
*/
.chat-reply-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  max-height: 0;
  padding: 0 1.15rem;
  overflow: hidden;
  opacity: 0;
  border-top: 1px solid transparent;
  background: rgba(255, 255, 255, 0.035);
  transition: max-height var(--dur-med) var(--ease),
              opacity var(--dur-med) var(--ease),
              padding var(--dur-med) var(--ease),
              border-color var(--dur-med) var(--ease);
}
.chat-reply-bar:not([hidden]) {
  max-height: 3.2rem;
  padding: 0.6rem 1.15rem;
  opacity: 1;
  border-top-color: var(--line);
}
.chat-reply-bar-copy { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.chat-reply-bar-name { font-size: 0.78rem; font-weight: 700; font-variation-settings: 'wght' 700; color: var(--c-red); }
.chat-reply-bar-preview {
  font-size: 0.82rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-reply-bar-cancel {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--c-grey);
  cursor: pointer;
  outline: none;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.chat-reply-bar-cancel .icon { width: 0.9rem; height: 0.9rem; }
.chat-reply-bar-cancel:hover, .chat-reply-bar-cancel:focus-visible { color: var(--ink); border-color: var(--line); }

.chat-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: stretch;
  gap: 0.55rem;
  padding: 0.85rem 1.15rem;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
}
.chat-compose textarea {
  resize: none;
  min-height: 42px;
  max-height: 176px;
  border-radius: 16px;
  border: 1.5px solid var(--line);
  background: rgba(255, 255, 255, 0.045);
  color: var(--ink);
  padding: 0.7rem 0.85rem;
  font: inherit;
  outline: none;
  overflow-y: auto;
  scrollbar-width: none;
  transition: height var(--dur-fast) var(--ease), border-color var(--dur-med) var(--ease);
}
.chat-compose textarea::-webkit-scrollbar { display: none; }
.chat-compose textarea:focus { border-color: var(--line-strong); }
/*
  Attach/send sit together on the right and stretch to match the
  textarea's current height (align-items: stretch on the grid row),
  instead of staying pinned to the bottom at their own compact size.
*/
.chat-compose .chat-attach, .chat-compose .chat-send-btn {
  align-self: stretch;
  height: auto;
  min-height: 42px;
}
.chat-user-results, .share-targets {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 330px;
  overflow-y: auto;
  margin: 0.7rem 0;
  scrollbar-width: none;
}
.chat-user-results::-webkit-scrollbar, .share-targets::-webkit-scrollbar { display: none; }
.chat-user-result, .share-target {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
}
.chat-user-result:hover, .chat-user-result.is-selected, .share-target:hover { color: var(--ink); background: rgba(255, 255, 255, 0.045); border-color: var(--line-strong); }
.chat-user-copy, .share-target-copy { display: flex; flex-direction: column; min-width: 0; }
.chat-user-copy span, .share-target-copy span { color: var(--c-grey); font-size: 0.8rem; }
.share-subtitle { margin: 0.45rem 0 0.15rem; color: var(--ink-soft); font-size: 0.86rem; }

.chat-members-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 360px;
  overflow-y: auto;
  margin: 0.7rem 0;
  scrollbar-width: none;
}
.chat-members-list::-webkit-scrollbar { display: none; }
.chat-member-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 15px;
}
.chat-member-identity { flex: 1 1 auto; min-width: 0; }
.chat-owner-crown { display: inline-flex; color: #e8c84a; flex: 0 0 auto; }
.chat-owner-crown .icon { width: 1rem; height: 1rem; }
.chat-member-actions { display: flex; gap: 0.4rem; flex: 0 0 auto; }
.chat-members-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.2rem; }
.chat-members-head .panel-title { margin: 0; }
.chat-members-actions { justify-content: flex-end; flex-wrap: wrap; }
.shared-post-widget {
  display: flex;
  flex-direction: column;
  width: min(260px, 100%);
  margin-top: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.035);
}
.shared-post-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.7rem;
  color: var(--ink);
  text-decoration: none;
}
.shared-post-header .user-link-name { font-size: 0.88rem; }
.shared-post-header .user-link-sub { font-size: 0.74rem; }
.shared-post-media {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #0b090a;
  cursor: pointer;
}
.shared-post-media img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.shared-post-footer { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.65rem 0.7rem 0.7rem; }
.shared-post-desc { margin: 0; color: var(--ink-soft); font-size: 0.85rem; overflow-wrap: anywhere; }
.shared-post-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.shared-post-stats {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--c-grey);
  font-size: 0.8rem;
}
.shared-post-stats .icon { width: 0.85rem; height: 0.85rem; margin-left: 0.4rem; }
.shared-post-stats .icon:first-child { margin-left: 0; }

@media (max-width: 760px) {
  .nav-links { position: static; transform: none; }
  .notifications-panel { top: 68px; right: 0.6rem; }
  /*
    Below the breakpoint the shell shows one panel at a time, Instagram's
    mobile pattern: the sidebar list by default, the conversation (with a
    back button) once a chat is opened - both panels stay mounted, only
    which one is on-screen changes, so switching is instant either way.
  */
  .chat-shell { grid-template-columns: 1fr; }
  .chat-sidebar { border-right: 0; }
  .chat-sidebar, .chat-window { display: none; }
  #view-chats:not(.is-conversation-open) .chat-sidebar { display: flex; }
  #view-chats.is-conversation-open .chat-window { display: flex; }
  .chat-back-btn { display: inline-flex; }
  .chat-head { align-items: center; flex-wrap: wrap; }
  .chat-head-actions { justify-content: flex-start; width: 100%; }
  .chat-row { max-width: 88%; }
  .lightbox-meta { overflow: hidden; }
  .comment-item { padding-left: calc(0.8rem + (var(--depth, 0) * 0.72rem)); }
  .comment-item::before { left: calc(0.18rem + (var(--depth, 0) * 0.72rem)); }
}