/* ============================================================
   Matters: a square, full-width bar right under the toolbar on the welcome (and a compact one at the top of the
   drawer). Engraved rather than glowing: a hairline frame with lit corner brackets, a light line across the top
   edge, the matter's name in the welcome's serif, its kicker and count in mono. The list unfolds from the bar's
   lower edge as one piece with it, a ledger of numbered rows.
   ============================================================ */
.matter-switch {
  --mt: #4be3ff;
  --mt-hi: #b9f3ff;
  --mt-line: rgba(140, 220, 255, .22);
  --mt-ink: #eef9ff;
  --mt-muted: #86a3b8;
  --mt-bg: linear-gradient(180deg, rgba(16, 28, 50, .94), rgba(7, 12, 24, .97));
  position: relative;
  z-index: 6;
  width: 100%;
  text-align: left;
}

/* ---------- the bar ---------- */
.matter-trigger {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: stretch;
  width: 100%;
  min-height: 58px;
  padding: 0;
  border: 1px solid var(--mt-line);
  border-radius: 2px;
  background:
    radial-gradient(60% 140% at 0% 0%, rgba(47, 123, 255, .16), transparent 70%),
    radial-gradient(50% 160% at 100% 100%, rgba(75, 227, 255, .08), transparent 70%),
    var(--mt-bg);
  color: var(--mt-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 0 0 1px rgba(0, 0, 0, .35),
    0 18px 44px rgba(0, 0, 0, .42),
    0 1px 0 rgba(75, 227, 255, .05);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  cursor: pointer;
  text-align: left;
  transition: border-color .25s, box-shadow .3s, background-color .25s;
}
/* Lit corner brackets: four L-shaped marks, drawn as eight thin gradients. */
.matter-trigger::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  --c: var(--mt-hi);
  --l: 12px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) top left / 1px var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) top right / 1px var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) bottom left / 1px var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) bottom right / 1px var(--l);
  background-repeat: no-repeat;
  opacity: .55;
  transition: opacity .3s;
}
/* A line of light along the top edge, brightest in the middle. */
.matter-trigger::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(185, 243, 255, .85), transparent);
  opacity: .6;
  transition: opacity .3s;
}
.matter-trigger:hover,
.matter-trigger:focus-visible,
.matter-switch.is-open .matter-trigger {
  border-color: rgba(160, 230, 255, .42);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 0 0 1px rgba(0, 0, 0, .35),
    0 22px 54px rgba(0, 0, 0, .5),
    0 0 34px rgba(75, 227, 255, .12);
}
.matter-trigger:hover::before,
.matter-trigger:focus-visible::before,
.matter-switch.is-open .matter-trigger::before { opacity: 1; }
.matter-trigger:hover::after,
.matter-switch.is-open .matter-trigger::after { opacity: 1; }

.matter-glyph {
  display: grid;
  place-items: center;
  width: 58px;
  border-right: 1px solid var(--mt-line);
  color: var(--mt-hi);
  background: linear-gradient(180deg, rgba(75, 227, 255, .07), transparent);
}
.matter-glyph svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(75, 227, 255, .45));
}
.matter-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 9px 18px;
}
.matter-kicker {
  color: var(--mt);
  font: 600 9.5px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .9;
}
.matter-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font: 600 19px/1.15 Georgia, "Times New Roman", serif;
  letter-spacing: -.012em;
}
.matter-count {
  align-self: center;
  padding: 0 18px;
  color: var(--mt-muted);
  font: 500 10.5px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.matter-count:empty { display: none; }
.matter-caret {
  display: grid;
  place-items: center;
  width: 56px;
  border-left: 1px solid var(--mt-line);
  color: var(--mt-hi);
  transition: background .25s;
}
.matter-trigger:hover .matter-caret,
.matter-switch.is-open .matter-caret { background: rgba(75, 227, 255, .07); }
.matter-chevron {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  transition: transform .4s cubic-bezier(.22, .9, .24, 1);
}
.matter-switch.is-open .matter-chevron { transform: rotate(180deg); }
/* Open: the bar's lower edge gives way to the list beneath it, and only its top corners stay marked. */
.matter-switch.is-open .matter-trigger::before { background-size: var(--l) 1px, 1px var(--l), var(--l) 1px, 1px var(--l), 0 0, 0 0, 0 0, 0 0; }
.matter-switch.is-open .matter-trigger { border-bottom-color: rgba(140, 220, 255, .1); }

/* ---------- the list ---------- */
.matter-panel {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  padding: 6px 0 0;
  border: 1px solid rgba(160, 230, 255, .42);
  border-top: 0;
  border-radius: 0 0 2px 2px;
  background:
    radial-gradient(70% 90% at 0% 100%, rgba(47, 123, 255, .1), transparent 70%),
    linear-gradient(180deg, rgba(8, 14, 28, .985), rgba(5, 9, 18, .99));
  box-shadow: 0 34px 70px rgba(0, 0, 0, .62), 0 0 34px rgba(75, 227, 255, .1);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  animation: matter-unfold .38s cubic-bezier(.16, 1, .3, 1) both;
}
.matter-panel.is-closing { animation: matter-fold .18s ease-in both; pointer-events: none; }
@keyframes matter-unfold { from { clip-path: inset(0 0 100% 0); opacity: .4; } to { clip-path: inset(0 0 -40px 0); opacity: 1; } }
@keyframes matter-fold { from { clip-path: inset(0 0 -40px 0); opacity: 1; } to { clip-path: inset(0 0 100% 0); opacity: 0; } }
.matter-panel-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 18px 6px;
  color: var(--mt-muted);
  font: 600 9.5px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.matter-panel-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--mt-line), transparent); }
.matter-list { display: grid; max-height: min(48svh, 380px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.matter-row {
  position: relative;
  border-top: 1px solid rgba(140, 220, 255, .08);
  animation: matter-row-in .4s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 30ms + 60ms);
}
.matter-row:first-child { border-top: 0; }
@keyframes matter-row-in { from { opacity: 0; transform: translateY(-4px); } }
.matter-option {
  position: relative;
  display: grid;
  grid-template-columns: 34px 10px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 52px 13px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--mt-ink);
  text-align: left;
  cursor: pointer;
  transition: background .2s;
}
.matter-option::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--mt-hi), var(--mt));
  box-shadow: 0 0 12px var(--mt);
  transform: scaleY(0);
  transition: transform .3s cubic-bezier(.22, .9, .24, 1);
}
.matter-option:hover,
.matter-option:focus-visible { background: linear-gradient(90deg, rgba(75, 227, 255, .08), rgba(75, 227, 255, .02)); outline: none; }
.matter-option[aria-selected="true"] { background: linear-gradient(90deg, rgba(75, 227, 255, .13), rgba(75, 227, 255, .02) 70%); }
.matter-option[aria-selected="true"]::before,
.matter-option:focus-visible::before { transform: scaleY(1); }
.matter-index {
  color: rgba(134, 163, 184, .7);
  font: 500 11px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .08em;
}
.matter-option[aria-selected="true"] .matter-index { color: var(--mt); }
.matter-dot { width: 7px; height: 7px; border: 1px solid rgba(140, 220, 255, .5); transform: rotate(45deg); }
.matter-option[aria-selected="true"] .matter-dot { background: var(--mt); border-color: var(--mt-hi); box-shadow: 0 0 10px var(--mt); }
.matter-option-text { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; min-width: 0; }
.matter-option-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16.5px/1.25 Georgia, "Times New Roman", serif; letter-spacing: -.01em; }
.matter-option-text small { flex: none; color: var(--mt-muted); font: 500 10px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.matter-tick { width: 16px; height: 16px; color: var(--mt); opacity: 0; filter: drop-shadow(0 0 6px rgba(75, 227, 255, .6)); transition: opacity .2s; }
.matter-option[aria-selected="true"] .matter-tick { opacity: 1; }
.matter-tick svg, .matter-remove svg, .matter-add-mark svg, .matter-new-ok svg {
  width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter;
}
.matter-remove {
  position: absolute; top: 50%; right: 14px;
  display: grid; place-items: center;
  width: 26px; height: 26px; padding: 7px;
  border: 1px solid transparent; border-radius: 0;
  background: transparent; color: var(--mt-muted);
  opacity: 0; transform: translateY(-50%);
  cursor: pointer; transition: opacity .2s, color .2s, border-color .2s, background .2s;
}
.matter-row:hover .matter-remove, .matter-remove:focus-visible { opacity: 1; }
.matter-remove:hover { border-color: rgba(255, 120, 150, .45); background: rgba(255, 91, 122, .1); color: #ffb3c2; }
@media (hover: none) { .matter-remove { opacity: .75; } }

.matter-add {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 18px;
  border: 0; border-top: 1px solid var(--mt-line); border-radius: 0;
  background: linear-gradient(180deg, rgba(75, 227, 255, .04), transparent);
  color: var(--mt-hi);
  font: 600 11px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; transition: background .2s, color .2s;
}
.matter-add:hover, .matter-add:focus-visible { background: rgba(75, 227, 255, .09); color: #fff; outline: none; }
.matter-add-mark {
  display: grid; place-items: center; width: 26px; height: 26px; padding: 6px;
  border: 1px solid rgba(160, 230, 255, .5);
  box-shadow: inset 0 0 10px rgba(75, 227, 255, .18), 0 0 12px rgba(75, 227, 255, .2);
  transition: transform .3s cubic-bezier(.22, .9, .24, 1);
}
.matter-add:hover .matter-add-mark { transform: rotate(90deg); }
.matter-new {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 0;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--mt-line);
}
.matter-new-input {
  min-width: 0; padding: 12px 14px;
  border: 1px solid rgba(160, 230, 255, .45); border-right: 0; border-radius: 0;
  background: rgba(3, 7, 16, .85); color: #fff;
  font: 500 16px/1.2 Georgia, "Times New Roman", serif;
  outline: none;
}
.matter-new-input:focus { border-color: var(--mt-hi); box-shadow: inset 0 0 0 1px rgba(75, 227, 255, .25); }
.matter-new-input::placeholder { color: #5f7a8f; font-style: italic; }
.matter-new-ok {
  display: grid; place-items: center; width: 48px; padding: 14px;
  border: 1px solid rgba(160, 230, 255, .45); border-radius: 0;
  background: linear-gradient(180deg, rgba(75, 227, 255, .2), rgba(47, 123, 255, .12)); color: #fff;
  cursor: pointer; transition: background .2s;
}
.matter-new-ok:hover { background: linear-gradient(180deg, rgba(75, 227, 255, .32), rgba(47, 123, 255, .2)); }
.matter-new-note { grid-column: 1 / -1; color: #ffd36b; font: 500 11.5px/1.3 system-ui, sans-serif; }
.matter-new-note:empty { display: none; }

/* ---------- on the welcome: the first thing under the toolbar, as wide as the conversation ---------- */
.chat-home .welcome:has(> .matter-switch) { padding-top: 0; }
/* The welcome's own side padding is given back, so the bar's edges line up with the composer's. */
.welcome > .matter-switch { flex: 0 0 calc(100% + 16px); width: calc(100% + 16px); align-self: stretch; margin: -10px -8px clamp(30px, 8svh, 86px); }
@media (max-height: 860px), (max-width: 640px) {
  .welcome > .matter-switch { margin-bottom: clamp(18px, 4svh, 36px); }
}
/* A guest's sign-up pill is pinned where the bar now sits: while the welcome shows, it waits just below the bar,
   and the welcome leaves it room. */
html.ts-guest body:has(#chatLog > .welcome .matter-switch) .club-guest { top: calc(env(safe-area-inset-top) + 152px); }
.ts-guest .welcome > .matter-switch { margin-bottom: 0; }

@media (max-width: 640px) {
  .matter-trigger { min-height: 52px; }
  .matter-glyph { width: 48px; }
  .matter-label { padding: 8px 14px; }
  .matter-name { font-size: 17px; }
  .matter-count { display: none; }
  .matter-caret { width: 48px; }
  .matter-option { grid-template-columns: 26px 10px minmax(0, 1fr) 20px; gap: 10px; padding: 12px 46px 12px 14px; }
  .matter-option-text { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------- in the drawer: compact, under the wordmark ---------- */
.drawer-matter { margin: 2px 0 12px; }
.drawer-matter .matter-trigger { min-height: 48px; }
.drawer-matter .matter-glyph, .drawer-matter .matter-caret { width: 44px; }
.drawer-matter .matter-glyph svg { width: 17px; height: 17px; }
.drawer-matter .matter-label { padding: 7px 12px; gap: 3px; }
.drawer-matter .matter-name { font-size: 15.5px; }
.drawer-matter .matter-count { display: none; }
.drawer-matter .matter-option { grid-template-columns: 22px 9px minmax(0, 1fr) 18px; gap: 9px; padding: 11px 42px 11px 12px; }
.drawer-matter .matter-option-text { flex-direction: column; align-items: flex-start; gap: 3px; }
.drawer-matter .matter-option-text strong { font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .matter-panel, .matter-panel.is-closing, .matter-row { animation: none; }
  .matter-chevron, .matter-option::before, .matter-add-mark { transition: none; }
}

/* on the welcome's admin row the switch drops its briefcase: the dropdown gets the room */
.welcome-admin .matter-glyph { display: none; }
.welcome-admin .matter-trigger { grid-template-columns: minmax(0, 1fr) auto auto; }
.welcome-admin .matter-label { padding-left: 14px; }