:root {
  /* "Calçadão" design tokens: night forest base (mata), flag green, jaguar gold (onça),
     urucum terracotta and anil blue. Shapes are tiles (azulejo), not circles. */
  --bg-rail: #08110d;
  --bg-sidebar: #0f1915;
  --bg-chat: #141f1a;
  --bg-input: #1c2a24;
  --bg-hover: #182620;
  --bg-active: #22352d;
  --bg-panel: #0b1410;
  --bg-modal: #15211c;
  --bg-elevated: #1b2a24;
  --text: #dfe9e3;
  --text-strong: #f6fbf8;
  --muted: #8da29a;
  --accent: #1fae74;
  --accent-hover: #2ac487;
  --accent-soft: #1fae7426;
  --on-accent: #02140c;
  --accent-cyan: #2cc7c0;
  --gold: #f5b83d;
  --gold-soft: #f5b83d29;
  --on-gold: #1c1305;
  --urucum: #e2734a;
  --link: #6cb4ee;
  --green: #34d399;
  --red: #ef5a5a;
  --live: #e8474f;
  --border: #1d2b25;
  --radius: 12px;
  --radius-lg: 20px;
  /* Avatars and server icons: a rounded tile, never a circle. */
  --tile: 30%;
  --brand-gradient: linear-gradient(90deg, var(--accent), var(--gold) 55%, var(--urucum));
  --font-ui: 'Figtree Variable', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Bricolage Grotesque Variable', 'Figtree Variable', 'Segoe UI', system-ui, sans-serif;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
}

body {
  font: 15px/1.4 var(--font-ui);
  background: var(--bg-chat);
  color: var(--text);
  overflow: hidden;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

input,
textarea {
  font: inherit;
  color: var(--text);
  background: var(--bg-rail);
  border: 0;
  border-radius: 6px;
  padding: 10px;
  width: 100%;
}

a {
  color: var(--link);
}

.muted {
  color: var(--muted);
}

.center {
  text-align: center;
}

.primary {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius);
  padding: 10px 18px;
  font-weight: 700;
  transition: background 0.15s, transform 0.1s;
}

.primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.primary:active:not(:disabled) {
  transform: translateY(1px);
}

.form-error {
  color: #ff8f8f;
  font-size: 14px;
  margin: 4px 0;
}

.connection-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--gold);
  color: #000;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 4px;
}

/* ---- layout ---------------------------------------------------------------- */

.shell {
  display: grid;
  /* --sidebar-w: the channel list's width, dragged by the user (SidebarResizer). */
  grid-template-columns: 72px var(--sidebar-w, 240px) 1fr auto;
  height: 100%;
}

/* ---- guild rail --------------------------------------------------------------- */

.guild-rail {
  background: var(--bg-rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  overflow-y: auto;
}

.guild-icon {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-sidebar);
  color: var(--text-strong);
  font-weight: 600;
  font-size: 15px;
  display: grid;
  place-items: center;
  transition: border-radius 0.15s, background 0.15s;
  flex: none;
}

.guild-icon:hover,
.guild-icon.active {
  border-radius: 16px;
}

.guild-icon:hover:not(.active) {
  background: var(--accent);
}

.guild-icon.add {
  color: var(--accent);
}

.guild-icon.add:hover {
  background: var(--accent);
  color: var(--on-accent);
}

.badge {
  background: var(--gold);
  color: var(--on-gold);
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-grid;
  place-items: center;
}

.guild-icon .badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  border: 3px solid var(--bg-rail);
  height: 22px;
  min-width: 22px;
  border-radius: 11px;
}

/* ---- channel sidebar ---------------------------------------------------------------- */

.channel-sidebar {
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.guild-header {
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--text-strong);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 2px #0003;
}

.guild-header button {
  color: var(--muted);
}

.guild-header button:hover {
  color: var(--text-strong);
}

.channel-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.channel-list h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 16px 8px 4px;
}

.channel-list h3 button {
  color: var(--muted);
}

.channel-list h3 button:hover {
  color: var(--text-strong);
}

.channel-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.channel {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--muted);
  text-align: left;
}

.channel:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.channel.active {
  background: var(--bg-active);
  color: var(--text-strong);
}

.channel.unread {
  color: var(--text-strong);
  font-weight: 600;
}

.channel .name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-participants {
  padding-left: 28px !important;
}

.voice-participants li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  color: var(--muted);
  font-size: 14px;
}

.voice-participants .name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live {
  background: var(--live);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

/* ---- voice + user panels ---------------------------------------------------------------- */

.voice-panel {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--bg-sidebar);
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.voice-status {
  flex: 1;
  display: grid;
  min-width: 0;
  font-size: 13px;
}

.voice-status .connected {
  color: var(--green);
}

.voice-status .connecting {
  color: var(--gold);
}

.voice-status .link {
  text-align: left;
  color: var(--muted);
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-status .link:hover {
  text-decoration: underline;
}

/* Warnings under the call status: a block of their own, never glued to the channel name. */
.voice-error {
  display: block;
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 12px;
  line-height: 1.35;
}

.voice-actions {
  display: flex;
  gap: 4px;
}

.voice-actions button,
.user-panel button {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--text);
}

.voice-actions button:hover,
.user-panel button:hover {
  background: var(--bg-active);
}

.voice-actions .live-on {
  background: var(--accent);
  color: var(--on-accent);
}

.voice-actions .danger:hover {
  color: var(--red);
}

.user-panel {
  background: var(--bg-panel);
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-panel .who {
  flex: 1;
  display: grid;
  min-width: 0;
  font-size: 13px;
  line-height: 1.2;
}

.user-panel .who strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-panel button.off {
  color: var(--red);
}

/* ---- avatars ---------------------------------------------------------------- */

.avatar {
  position: relative;
  flex: none;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-weight: 600;
  transition: box-shadow 0.1s;
}

.avatar.speaking {
  box-shadow: 0 0 0 2px var(--bg-sidebar), 0 0 0 4px var(--green);
}

.status-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  border: 3px solid var(--bg-panel);
}

.status-dot.online {
  background: var(--green);
}

.status-dot.offline {
  background: #4f615b;
}

/* Away: gold; busy ("não perturbe"): red with a bar, like a no-entry sign. */
.status-dot.idle {
  background: var(--gold);
}

.status-dot.dnd {
  background: var(--red);
}

/* ---- chat ---------------------------------------------------------------- */

.chat,
.voice-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg-chat);
}

.chat.empty {
  display: grid;
  place-items: center;
}

.chat-header {
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 2px #0003;
}

.chat-header strong {
  color: var(--text-strong);
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0 8px;
}

.channel-intro {
  padding: 16px;
}

.channel-intro h2 {
  margin: 8px 0 4px;
  color: var(--text-strong);
}

.intro-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--bg-active);
  display: grid;
  place-items: center;
  color: var(--text-strong);
}

.day-divider {
  display: flex;
  align-items: center;
  margin: 16px 16px 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.day-divider::before,
.day-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--border);
}

.day-divider span {
  padding: 0 8px;
}

.message {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 4px 48px 4px 16px;
  margin-top: 12px;
}

.message.grouped {
  margin-top: 0;
  padding-top: 1px;
  padding-bottom: 1px;
}

.message:hover {
  background: var(--bg-hover);
}

.message header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.message header strong {
  color: var(--text-strong);
}

.message header time,
.hover-time {
  color: var(--muted);
  font-size: 12px;
}

.hover-time {
  visibility: hidden;
  text-align: right;
  line-height: 22px;
  font-size: 11px;
}

.message:hover .hover-time {
  visibility: visible;
}

.message p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-delete {
  position: absolute;
  right: 12px;
  top: 4px;
  color: var(--muted);
  visibility: hidden;
  padding: 4px;
  border-radius: 6px;
}

.message:hover .message-delete {
  visibility: visible;
}

.message-delete:hover {
  color: var(--red);
  background: var(--bg-active);
}

.composer {
  padding: 0 16px;
}

.composer-box {
  display: flex;
  align-items: flex-start;
  background: var(--bg-input);
  border-radius: var(--radius);
}

.composer textarea {
  background: transparent;
  padding: 11px 16px 11px 4px;
  resize: none;
  max-height: 40vh;
  field-sizing: content;
}

.composer .attach {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 10px 12px 10px 16px;
  border-radius: 50%;
  background: var(--muted);
  color: var(--bg-input);
  display: grid;
  place-items: center;
}

.composer .attach:hover:not(:disabled) {
  background: var(--text-strong);
}

.pending-files {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: var(--bg-input);
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid var(--bg-chat);
}

.pending-files + .composer-box {
  border-radius: 0 0 8px 8px;
}

.pending-file {
  position: relative;
  width: 120px;
  height: 120px;
  background: var(--bg-sidebar);
  border-radius: 6px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.pending-file img {
  max-width: 100%;
  max-height: 100%;
}

.pending-file button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--bg-rail);
  color: var(--red);
  font-size: 12px;
}

.attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.attachments .attachment {
  display: block;
  line-height: 0;
  padding: 0;
  cursor: zoom-in;
}

.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000e;
  display: grid;
  grid-template-rows: auto 1fr;
}

.image-viewer-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px 16px;
  background: #000a;
  color: #fff;
}

.image-viewer-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
}

.image-viewer-bar button,
.image-viewer-open {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 18px;
}

.image-viewer-bar button:hover:not(:disabled),
.image-viewer-open:hover {
  background: #ffffff1a;
}

.image-viewer-bar button:disabled {
  opacity: 0.4;
}

.image-viewer-zoom {
  font-size: 13px !important;
  font-variant-numeric: tabular-nums;
  min-width: 56px !important;
}

.image-viewer-open {
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.image-viewer-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  padding: 16px;
  touch-action: none;
}

.image-viewer-stage img {
  max-width: 100%;
  max-height: calc(100dvh - 96px);
  object-fit: contain;
  border-radius: 6px;
  transform-origin: center;
  transition: transform 0.08s ease-out;
  cursor: zoom-in;
  user-select: none;
  touch-action: none;
}

.image-viewer-stage img.zoomed {
  cursor: grab;
  transition: none;
}

.image-viewer-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bg-panel);
  color: var(--text-strong);
  font-size: 13px;
}

@media (max-width: 768px) {
  .image-viewer-open {
    display: none;
  }

  .image-viewer-bar button {
    min-width: 44px;
    height: 44px;
  }
}

.attachments img {
  max-width: min(400px, 100%);
  max-height: 300px;
  border-radius: 6px;
  background: var(--bg-sidebar);
}

.chat.dragging {
  outline: 3px dashed var(--accent);
  outline-offset: -8px;
}

.typing {
  height: 24px;
  padding: 0 16px;
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.dots {
  display: inline-flex;
  gap: 3px;
}

.dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text);
  animation: blink 1.2s infinite ease-in-out;
}

.dots i:nth-child(2) {
  animation-delay: 0.2s;
}

.dots i:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes blink {
  0%,
  80%,
  100% {
    opacity: 0.3;
  }
  40% {
    opacity: 1;
  }
}

/* ---- members ---------------------------------------------------------------- */

.member-list {
  width: 240px;
  background: var(--bg-sidebar);
  padding: 8px;
  overflow-y: auto;
}

.member-list h3 {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 16px 8px 4px;
}

.member {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 6px;
}

.member:hover {
  background: var(--bg-hover);
}

.member.offline {
  opacity: 0.4;
}

.member span:not(.avatar):not(.live):not(.bot-badge) {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member .status-dot {
  border-color: var(--bg-sidebar);
}

/* ---- voice stage ---------------------------------------------------------------- */

.voice-stage {
  background: #000;
}

.voice-stage .chat-header {
  background: var(--bg-chat);
}

.stage-empty {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
  background: var(--bg-rail);
}

.stage-empty h2 {
  margin: 0;
  color: var(--text-strong);
}

.stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.focused-stream {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #111;
}

.focused-stream video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tiles {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: minmax(160px, 1fr);
  gap: 8px;
  align-content: center;
  overflow-y: auto;
}

.tiles.strip {
  flex: none;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-auto-rows: 112px;
  align-content: start;
  max-height: 128px;
}

.tile {
  position: relative;
  border-radius: var(--radius);
  background: var(--bg-sidebar);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid transparent;
}

.tile.speaking {
  border-color: var(--green);
}

.tile.stream {
  background: #111;
  padding: 0;
}

.tile.stream:hover {
  border-color: var(--accent);
}

.tile video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tile-label {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #000a;
  color: #fff;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 13px;
}

.tile-expand {
  position: absolute;
  right: 8px;
  top: 8px;
  color: #fff;
  background: #000a;
  border-radius: 6px;
  padding: 4px;
  display: grid;
  opacity: 0;
}

.tile.stream:hover .tile-expand {
  opacity: 1;
}

/* ---- modals ---------------------------------------------------------------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000b;
  display: grid;
  place-items: center;
}

.modal {
  width: min(520px, calc(100% - 32px));
  max-height: calc(100% - 64px);
  overflow-y: auto;
  background: var(--bg-modal);
  border-radius: var(--radius);
  padding: 24px;
  display: grid;
  gap: 16px;
}

.modal h2 {
  margin: 0;
  color: var(--text-strong);
  text-align: center;
}

.modal form {
  display: grid;
  gap: 16px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.modal-actions button:not(.primary) {
  padding: 10px 16px;
}

.modal-actions button:not(.primary):hover {
  text-decoration: underline;
}

.tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-rail);
  padding: 4px;
  border-radius: 6px;
}

.tabs button {
  flex: 1;
  padding: 6px;
  border-radius: 6px;
  color: var(--muted);
}

.tabs button.active {
  background: var(--bg-active);
  color: var(--text-strong);
}

.channel-type {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.channel-type label {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-sidebar);
  padding: 12px;
  border-radius: 6px;
  text-transform: none;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
}

.channel-type label.selected {
  background: var(--bg-active);
}

.channel-type input {
  width: auto;
}

.invite-row {
  display: flex;
  gap: 8px;
  background: var(--bg-rail);
  padding: 8px;
  border-radius: 6px;
  align-items: center;
}

.invite-row code {
  flex: 1;
  font-size: 18px;
  letter-spacing: 0.05em;
  user-select: all;
}

.source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.source {
  display: grid;
  gap: 6px;
  padding: 6px;
  border-radius: 6px;
  background: var(--bg-sidebar);
  text-align: left;
  font-size: 13px;
}

.source:hover {
  background: var(--bg-active);
  outline: 2px solid var(--accent);
}

.source img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
  border-radius: 6px;
}

label.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-transform: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

label.checkbox input {
  width: auto;
  margin-top: 3px;
}

label.checkbox span {
  display: grid;
  gap: 2px;
}

label.checkbox small {
  font-size: 12px;
  font-weight: 400;
}

.source span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Narrow windows: the member list leaves the grid (it becomes a drawer, see "Responsive layout" at the end). */
@media (max-width: 1000px) {
  .shell {
    grid-template-columns: 72px var(--sidebar-w, 240px) minmax(0, 1fr);
  }
}

/* ---- live (Go Live) ---------------------------------------------------------------- */

.tile.stream.preview {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg-rail));
  color: var(--text);
}

.voice-participants li .live,
.tile-label .live {
  cursor: pointer;
}

/* ---- profile card ---------------------------------------------------------------- */

.profile-card {
  position: fixed;
  z-index: 300;
  width: 300px;
  background: var(--bg-rail);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 24px #000a;
}

.profile-banner {
  height: 60px;
}

.profile-avatar {
  margin: -40px 0 0 16px;
  width: fit-content;
  border: 6px solid var(--bg-rail);
  border-radius: 50%;
  line-height: 0;
}

.profile-avatar .status-dot {
  border-color: var(--bg-rail);
}

.profile-body {
  padding: 4px 16px 16px;
  display: grid;
  gap: 10px;
}

.profile-body h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: 20px;
}

.profile-body > p {
  margin: -8px 0 0;
}

.profile-body section {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--bg-active);
  padding-top: 10px;
}

.profile-body h4 {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
}

.profile-body p {
  margin: 0;
}

.profile-body .link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  text-align: left;
}

.profile-body .link:hover {
  text-decoration: underline;
}

.profile-audio input[type='range'] {
  padding: 0;
  accent-color: var(--accent);
}

.profile-audio .primary {
  margin-top: 4px;
}

.author-avatar {
  line-height: 0;
  height: fit-content;
  cursor: pointer;
}

.message header strong {
  cursor: pointer;
}

select {
  font: inherit;
  color: var(--text);
  background: var(--bg-rail);
  border: 0;
  border-radius: 6px;
  padding: 10px;
  text-transform: none;
}

.download-app {
  display: grid;
  gap: 2px;
  margin: 8px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #12855d, var(--accent));
  color: var(--on-accent);
  text-decoration: none;
  font-size: 13px;
}

.download-app strong {
  font-size: 14px;
}

.download-app span {
  opacity: 0.85;
}

.download-app:hover {
  filter: brightness(1.08);
}

/* ---- auth (login / sign-up) ------------------------------------------------------- */

.auth {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) 1.1fr;
  height: 100%;
  background: var(--bg-rail);
}

/* A faint jaguar-rosette pattern: the only "Brazil" cue, kept subtle on purpose. */
.auth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  background-color: #0b1a15;
  background-image:
    radial-gradient(circle at 30% 20%, #19b37d33 0, transparent 45%),
    radial-gradient(circle at 80% 90%, #f2ae3d1f 0, transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23f2ae3d' stroke-opacity='0.07' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M30 26a16 16 0 0 1 14 -8'/%3E%3Cpath d='M52 22a16 16 0 0 1 8 14'/%3E%3Cpath d='M58 46a16 16 0 0 1 -14 8'/%3E%3Cpath d='M34 52a16 16 0 0 1 -8 -12'/%3E%3Cpath d='M86 82a12 12 0 0 1 11 -6'/%3E%3Cpath d='M103 80a12 12 0 0 1 5 11'/%3E%3Cpath d='M105 98a12 12 0 0 1 -11 5'/%3E%3Cpath d='M88 101a12 12 0 0 1 -5 -9'/%3E%3C/g%3E%3C/svg%3E");
  border-right: 1px solid var(--border);
}

.auth-brand-inner {
  display: grid;
  gap: 14px;
  align-content: center;
  flex: 1;
}

.auth-brand h1 {
  margin: 4px 0 0;
  font-size: 44px;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.tagline {
  margin: 0;
  font-size: 20px;
  color: var(--text);
}

.perks {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  color: var(--muted);
}

.perks li::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.made-in {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.auth-panel {
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-card {
  width: min(400px, 100%);
  display: grid;
  gap: 14px;
  animation: auth-in 0.28s ease-out;
}

@keyframes auth-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.auth-card h2 {
  margin: 0;
  font-size: 26px;
  color: var(--text-strong);
}

.auth-card > .muted {
  margin: -8px 0 6px;
}

.auth-card input {
  background: var(--bg-input);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 12px;
  transition: border-color 0.15s;
}

.auth-card input:focus {
  border-color: var(--accent);
  outline: none;
}

.auth-card .primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  margin-top: 4px;
}

.hint {
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
}

.hint.good {
  color: var(--green);
}

.hint.bad {
  color: var(--gold);
}

.switch {
  margin: 0;
  color: var(--muted);
  text-align: center;
}

.switch .link {
  color: var(--accent-hover);
  font-weight: 700;
  padding: 0;
}

.switch .link:hover {
  text-decoration: underline;
}

.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- splash (session restore / waiting for READY) ------------------------------------ */

.splash {
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 28px;
  background: radial-gradient(circle at 50% 45%, #0f2a21 0, var(--bg-rail) 60%);
  color: var(--muted);
}

.splash p {
  margin: 0;
  animation: fade 1.6s ease-in-out infinite alternate;
}

.splash-logo {
  position: relative;
  display: grid;
  place-items: center;
}

.logo.pulse {
  animation: pulse 1.6s ease-in-out infinite;
  border-radius: 22%;
}

.ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: ripple 2.4s ease-out infinite;
}

.ripple.delay {
  animation-delay: 1.2s;
}

@keyframes pulse {
  50% {
    transform: scale(1.06);
  }
}

@keyframes ripple {
  from {
    transform: scale(0.9);
    opacity: 0.7;
  }
  to {
    transform: scale(2.2);
    opacity: 0;
  }
}

@keyframes fade {
  from {
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo.pulse,
  .ripple,
  .splash p,
  .auth-card {
    animation: none;
  }
}

@media (max-width: 800px) {
  .auth {
    grid-template-columns: 1fr;
  }

  .auth-brand {
    display: none;
  }
}

/* ---- interaction affordances ---------------------------------------------------------- */

button:not(:disabled),
select,
summary,
label.checkbox,
.member,
.voice-participants li,
.author-avatar,
.message header strong,
.tile.person,
.user-panel .avatar,
input[type='range'],
input[type='checkbox'],
input[type='radio'] {
  cursor: pointer;
}

.auth-card .download-app {
  margin: 0;
}

/* Native controls in the brand colour instead of the browser's default blue. */
input[type='range'],
input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--accent);
}

.splash-slow {
  display: grid;
  justify-items: center;
  gap: 6px;
  font-size: 13px;
}

.splash-slow .link {
  color: var(--accent-hover);
  font-weight: 700;
}

/* ---- audio settings ------------------------------------------------------------------ */

.user-panel {
  position: relative;
  gap: 4px;
}

.control-group {
  display: flex;
  align-items: center;
  border-radius: 6px;
}

.control-group:hover {
  background: var(--bg-active);
}

.user-panel .control-group button:first-child {
  width: 30px;
}

.user-panel .chevron {
  width: 14px;
  font-size: 10px;
  color: var(--muted);
  border-radius: 0 6px 6px 0;
}

.user-panel .chevron:hover {
  color: var(--text-strong);
}

.quick-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 8px;
  right: 8px;
  z-index: 120;
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--bg-rail);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px #000a;
}

.quick-menu h4 {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
}

.quick-menu select {
  width: 100%;
}

.quick-menu .link {
  justify-self: start;
  padding: 0;
  color: var(--accent-hover);
  font-weight: 600;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.setting-row > div {
  display: grid;
  gap: 2px;
}

.setting-row strong {
  color: var(--text-strong);
}

.setting-row.compact {
  font-size: 14px;
}

.toggle {
  flex: none;
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 12px;
  background: #3a4945;
  transition: background 0.15s;
}

.toggle span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}

.toggle.on {
  background: var(--accent);
}

.toggle.on span {
  transform: translateX(16px);
}

.mic-test {
  display: grid;
  gap: 8px;
}

.meter {
  height: 8px;
  border-radius: 4px;
  background: var(--bg-rail);
  overflow: hidden;
}

.meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-cyan) 70%, var(--gold));
  transition: width 0.05s linear;
}

.secondary {
  justify-self: start;
  padding: 8px 14px;
  border-radius: var(--radius);
  background: var(--bg-active);
  color: var(--text-strong);
  font-weight: 600;
}

.secondary:hover {
  background: #2c3d38;
}

.modal-actions.spread {
  justify-content: space-between;
}

.danger-link {
  color: var(--red);
  font-weight: 600;
}

.danger-link:hover {
  text-decoration: underline;
}

/* Form labels stack their caption above the control (restored; it lived in the old login block). */
label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.modal select {
  width: 100%;
}

.modal-actions button:not(.primary) {
  white-space: nowrap;
}

/* ---- home: friends, DMs, calls ------------------------------------------------------- */

.guild-icon.home {
  background: var(--bg-sidebar);
}

.guild-icon.home.active,
.guild-icon.home:hover {
  background: var(--accent-soft);
}

.guild-icon.home.ringing {
  animation: ring-pulse 1s ease-in-out infinite;
}

.rail-separator {
  width: 32px;
  height: 2px;
  border-radius: 1px;
  background: var(--border);
  flex: none;
}

.friends-link {
  font-weight: 600;
  padding: 10px 8px;
}

.channel.dm {
  padding: 5px 8px;
  gap: 10px;
}

.channel .in-call {
  color: var(--green);
  display: grid;
}

.sidebar-hint {
  font-size: 13px;
  padding: 4px 8px;
}

.chat-header .spacer {
  flex: 1;
}

.chat-header .clickable {
  cursor: pointer;
}

.status-text {
  font-size: 13px;
}

.status-text.online {
  color: var(--green);
}

.header-action {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text);
}

.header-action:hover {
  background: var(--bg-active);
  color: var(--green);
}

.header-action.danger:hover {
  color: var(--red);
}

.friend-tabs {
  display: flex;
  gap: 8px;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}

.friend-tabs button {
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.friend-tabs button:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.friend-tabs button.active {
  background: var(--bg-active);
  color: var(--text-strong);
}

.friend-tabs button.add {
  background: var(--accent);
  color: var(--on-accent);
}

.friend-tabs button.add.active {
  background: transparent;
  color: var(--accent);
}

.friend-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

.friend-list h3 {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

.friend-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.friend-empty {
  margin-top: 48px;
  text-align: center;
}

.friend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-top: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.friend-row:hover {
  background: var(--bg-hover);
}

.friend-row .who {
  flex: 1;
  display: grid;
  min-width: 0;
}

.friend-row .who strong {
  color: var(--text-strong);
}

.friend-row .who .muted {
  font-size: 13px;
}

.friend-actions {
  display: flex;
  gap: 8px;
}

.friend-actions button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-sidebar);
  color: var(--text);
  display: grid;
  place-items: center;
}

.friend-actions button:hover {
  color: var(--text-strong);
  background: var(--bg-active);
}

.friend-actions .accept:hover {
  color: var(--green);
}

.friend-actions .danger:hover {
  color: var(--red);
}

.add-friend {
  padding: 24px;
  max-width: 720px;
}

.add-friend h2 {
  margin: 0 0 4px;
  color: var(--text-strong);
  font-size: 16px;
  text-transform: uppercase;
}

.add-friend-box {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding: 6px 6px 6px 8px;
  border-radius: var(--radius);
  background: var(--bg-rail);
  border: 1px solid var(--border);
}

.add-friend-box:focus-within {
  border-color: var(--accent);
}

.add-friend-box.ok {
  border-color: var(--green);
}

.add-friend-box.error {
  border-color: var(--red);
}

.add-friend-box input {
  background: transparent;
}

.add-friend-box input:focus-visible {
  outline: none;
}

.add-friend-box .primary {
  white-space: nowrap;
  padding: 8px 14px;
}

.form-ok {
  color: var(--green);
  font-size: 14px;
  margin: 8px 0;
}

.voice-stage.in-dm {
  flex: none;
  height: 42%;
  min-height: 220px;
  border-bottom: 1px solid var(--border);
}

.voice-stage.in-dm .stage-empty {
  background: #000;
}

.call-avatars {
  display: flex;
  gap: 16px;
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 4px;
}

.profile-actions .primary,
.profile-actions .secondary {
  padding: 7px 12px;
  font-size: 14px;
}

.incoming-call {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: 240px;
  padding: 20px 16px 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px #000a;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.incoming-call strong {
  color: var(--text-strong);
  font-size: 17px;
  margin-top: 8px;
}

.ringing-avatar {
  border-radius: 50%;
  animation: ring-pulse 1s ease-in-out infinite;
}

.incoming-call-actions {
  display: flex;
  gap: 24px;
  margin-top: 12px;
}

.incoming-call-actions button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
}

.incoming-call-actions .answer {
  background: var(--green);
}

.incoming-call-actions .decline {
  background: var(--red);
}

.incoming-call-actions button:hover {
  filter: brightness(1.1);
}

@keyframes ring-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 #2fd18d66;
  }
  50% {
    box-shadow: 0 0 0 10px #2fd18d00;
  }
}

/* ---- voice controls polish (tooltips, states, quick menu) ---------------------------- */

[data-tip] {
  position: relative;
}

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  background: var(--bg-rail);
  color: var(--text-strong);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 9px;
  border-radius: 6px;
  box-shadow: 0 6px 16px #000b;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 200;
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 0.25s;
}

/* The rightmost buttons would overflow the sidebar: anchor their tips to the right edge. */
.user-panel .settings-button[data-tip]::after,
.voice-actions button:last-child[data-tip]::after {
  left: auto;
  right: 0;
  transform: translate(0, 4px);
}

.user-panel .settings-button[data-tip]:hover::after,
.voice-actions button:last-child[data-tip]:hover::after {
  transform: translate(0, 0);
}

.control-group.open [data-tip]::after {
  display: none;
}

.user-panel .control-group {
  height: 32px;
  transition: background 0.12s;
}

.user-panel .control-group button {
  height: 32px;
  border-radius: 6px 0 0 6px;
}

.user-panel .control-group .chevron {
  width: 18px;
  font-size: inherit;
  border-radius: 0 6px 6px 0;
  display: grid;
  place-items: center;
  transition: color 0.12s, transform 0.15s;
}

.user-panel .control-group button:hover {
  background: transparent;
}

.user-panel .control-group.open {
  background: var(--bg-active);
}

.user-panel .control-group.open .chevron {
  color: var(--text-strong);
}

.user-panel .control-group.open .chevron svg {
  transform: rotate(180deg);
}

.user-panel .control-group.off {
  background: #ef5a5a1f;
}

.user-panel .control-group.off button:first-child {
  color: var(--red);
}

.user-panel .control-group.off:hover {
  background: #ef5a5a33;
}

.user-panel .settings-button svg {
  transition: transform 0.3s ease;
}

.user-panel .settings-button:hover svg {
  transform: rotate(45deg);
}

.voice-actions button {
  transition: background 0.12s, color 0.12s;
}

.voice-actions button.on {
  color: var(--accent-hover);
  background: var(--accent-soft);
}

.voice-actions button.on:hover {
  background: #19b37d3d;
}

.quick-menu {
  gap: 8px;
  padding: 10px;
  animation: quick-menu-in 0.12s ease-out;
}

@keyframes quick-menu-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.device-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
}

.device-list button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 6px;
  color: var(--text);
  text-align: left;
  font-size: 13px;
}

.device-list button:hover {
  background: var(--bg-hover);
}

.device-list button.selected {
  color: var(--text-strong);
  background: var(--bg-active);
}

.device-list .label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-list .radio {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--muted);
  display: grid;
  place-items: center;
}

.device-list .selected .radio {
  border-color: var(--accent);
}

.device-list .selected .radio::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.quick-noise {
  padding: 8px;
  border-top: 1px solid var(--border);
}

.quick-noise > div {
  display: grid;
  gap: 2px;
}

.quick-noise span {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 600;
}

.quick-noise small {
  font-size: 11px;
}

.quick-settings {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  border-radius: 6px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.quick-settings:hover {
  background: var(--bg-hover);
  color: var(--text-strong);
}

/* ---- in-app update banner ------------------------------------------------------------ */

.update-banner {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 24px #000a;
  animation: update-pulse 2s ease-in-out infinite;
}

.update-banner.failed {
  background: var(--gold);
  color: var(--on-gold);
  animation: none;
}

.update-action {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--on-accent);
  color: var(--accent-hover);
  font-weight: 800;
}

.update-banner.failed .update-action {
  background: var(--on-gold);
  color: var(--gold);
}

.update-action:hover {
  filter: brightness(1.2);
}

.update-dismiss {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: inherit;
  opacity: 0.7;
}

.update-dismiss:hover {
  opacity: 1;
  background: #0002;
}

.update-progress {
  width: 140px;
  height: 6px;
  border-radius: 3px;
  background: #0003;
  overflow: hidden;
}

.update-progress span {
  display: block;
  height: 100%;
  background: var(--on-accent);
  transition: width 0.2s;
}

@keyframes update-pulse {
  0%,
  100% {
    box-shadow: 0 8px 24px #000a, 0 0 0 0 #19b37d66;
  }
  50% {
    box-shadow: 0 8px 24px #000a, 0 0 0 8px #19b37d00;
  }
}

/* ---- message actions: toolbar, reactions, replies, edits, forwards -------------------- */

.message.active,
.message.highlight {
  background: var(--bg-hover);
}

.message.highlight {
  box-shadow: inset 3px 0 0 var(--gold);
  transition: background 0.3s;
}

.message-toolbar {
  position: absolute;
  top: -14px;
  right: 16px;
  z-index: 5;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px #0007;
}

.message:hover .message-toolbar,
.message.active .message-toolbar,
.message-toolbar:focus-within {
  display: flex;
}

.message-toolbar button {
  width: 30px;
  height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.message-toolbar button:hover {
  background: var(--bg-active);
  color: var(--text-strong);
}

.message-toolbar .quick-reaction {
  font-size: 17px;
}

.message-toolbar .quick-reaction:hover {
  transform: scale(1.15);
}

.reply-preview {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0 0 -2px 18px;
  padding: 0;
  font-size: 13px;
  color: var(--muted);
  text-align: left;
}

.reply-preview .reply-line {
  flex: none;
  width: 30px;
  height: 12px;
  margin-top: 8px;
  border-top: 2px solid #3a4a46;
  border-left: 2px solid #3a4a46;
  border-top-left-radius: 6px;
}

.reply-preview strong {
  color: var(--text);
  flex: none;
}

.reply-preview .reply-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.reply-preview:hover .reply-text,
button.reply-preview:hover strong {
  color: var(--text-strong);
}

.reply-preview .avatar {
  font-size: 9px !important;
}

.reply-preview.deleted em {
  font-size: 12px;
}

.forwarded-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
  margin-top: 2px;
}

.forwarded-label strong {
  color: var(--text);
  font-style: normal;
}

.message p.forwarded-content {
  border-left: 3px solid #3a4a46;
  padding-left: 10px;
}

.edited {
  font-size: 11px;
  color: var(--muted);
}

.inline-editor {
  display: grid;
  gap: 4px;
  margin-top: 2px;
}

.inline-editor textarea {
  background: var(--bg-input);
  border-radius: 8px;
  resize: none;
  field-sizing: content;
  max-height: 40vh;
}

.inline-editor small {
  font-size: 12px;
}

.inline-editor .link {
  padding: 0;
  font-size: 12px;
}

.reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--bg-sidebar);
  border: 1px solid transparent;
  color: var(--text);
  font-size: 14px;
  transition: border-color 0.12s, background 0.12s;
}

.reaction:hover {
  border-color: #3a4a46;
}

.reaction.mine {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text-strong);
}

.reaction-count {
  font-size: 12px;
  font-weight: 700;
}

.reaction.add {
  color: var(--muted);
  opacity: 0;
}

.message:hover .reaction.add {
  opacity: 1;
}

/* Attachments always start at the left edge of the message, never centered. */
.attachments {
  justify-content: flex-start;
  align-items: flex-start;
}

.attachments .attachment {
  align-self: flex-start;
  margin: 0;
}

.attachments img {
  max-width: min(450px, 100%);
  max-height: 350px;
  object-fit: contain;
  border-radius: 8px;
}

.message-menu {
  position: fixed;
  z-index: 150;
  min-width: 200px;
  display: grid;
  padding: 6px;
  background: var(--bg-rail);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px #000b;
  animation: quick-menu-in 0.1s ease-out;
}

.message-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  text-align: left;
}

.message-menu button:hover {
  background: var(--accent);
  color: var(--on-accent);
}

.message-menu button.danger {
  color: var(--red);
}

.message-menu button.danger:hover {
  background: var(--red);
  color: #fff;
}

/* Also opened from inside the image viewer (z-index 200): always on top of it. */
.message-menu.image-menu {
  z-index: 210;
}

.emoji-picker {
  position: fixed;
  z-index: 160;
  width: 352px;
  height: 400px;
  display: flex;
  flex-direction: column;
  background: var(--bg-rail);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px #000c;
  overflow: hidden;
  animation: quick-menu-in 0.1s ease-out;
}

.emoji-search {
  margin: 10px 10px 6px;
  width: auto;
  background: var(--bg-input);
}

.emoji-tabs {
  display: flex;
  gap: 2px;
  padding: 0 8px 6px;
  border-bottom: 1px solid var(--border);
}

.emoji-tabs button {
  flex: 1;
  height: 30px;
  border-radius: 6px;
  font-size: 16px;
  filter: grayscale(0.6);
}

.emoji-tabs button:hover {
  background: var(--bg-hover);
  filter: none;
}

.emoji-grid-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 8px;
}

.emoji-grid-scroll h5 {
  margin: 8px 4px 4px;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}

.emoji-grid button {
  height: 38px;
  border-radius: 8px;
  font-size: 24px;
  line-height: 1;
  transition: transform 0.08s;
}

.emoji-grid button:hover {
  background: var(--bg-active);
  transform: scale(1.12);
}

.emoji-empty {
  text-align: center;
  margin-top: 48px;
}

.composer-box {
  align-items: center;
}

.composer-emoji {
  flex: none;
  width: 32px;
  height: 32px;
  margin: 0 10px 0 4px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: color 0.12s, transform 0.12s;
}

.composer-emoji:hover,
.composer-emoji.open {
  color: var(--gold);
  transform: scale(1.08);
}

.replying-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  margin-bottom: -6px;
  padding-bottom: 14px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg-sidebar);
  color: var(--muted);
  font-size: 13px;
}

.replying-bar strong {
  color: var(--text-strong);
}

.replying-bar button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.replying-bar button:hover {
  color: var(--text-strong);
  background: var(--bg-active);
}

.forward-preview {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--bg-rail);
  font-size: 14px;
}

.forward-preview span {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forward-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 280px;
  overflow-y: auto;
  display: grid;
  gap: 2px;
}

.forward-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-radius: 8px;
}

.forward-list li:hover {
  background: var(--bg-hover);
}

.forward-list .name {
  flex: 1;
  color: var(--text-strong);
}

.forward-list .primary,
.forward-list .secondary {
  padding: 6px 14px;
  font-size: 13px;
}

.primary.danger-fill {
  background: var(--red);
  color: #fff;
}

.primary.danger-fill:hover:not(:disabled) {
  background: #ff6b6b;
}

/* ---- close DM / confirm buttons -------------------------------------------------------- */

.dm-row {
  position: relative;
}

.dm-row .channel.dm {
  padding-right: 30px;
}

.dm-close {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: none;
  place-items: center;
  color: var(--muted);
}

.dm-row:hover .dm-close,
.dm-close:focus-visible {
  display: grid;
}

.dm-close:hover {
  color: var(--text-strong);
  background: var(--bg-active);
}

.dm-row:hover .badge {
  visibility: hidden;
}

button.armed {
  background: var(--red) !important;
  color: #fff !important;
  width: auto !important;
  padding: 0 12px;
  border-radius: 999px !important;
}

.confirm-text {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.profile-actions .unfriend:hover {
  color: var(--red);
}

/* Sign in with Google */
.google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: var(--radius);
  background: #fff;
  color: #1f1f1f;
  font-weight: 600;
}

.google-button:hover:not(:disabled) {
  background: #f1f3f4;
}

.google-button:disabled {
  opacity: 0.6;
}

.google-button.compact {
  padding: 7px 12px;
  font-size: 13px;
  white-space: nowrap;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--accent-soft);
}

.auth-waiting {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--bg-input);
}

.badge-linked {
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* Bots */
.bot-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--accent);
  color: #04110c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* ==== "Calçadão" theme layer: identity of its own (fonts, tiles, brand stripes) ============ */

@font-face {
  font-family: 'Figtree Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('fonts/figtree-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Figtree Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('fonts/figtree-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('fonts/bricolage-grotesque-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Titles speak in the display face. */
h1,
h2,
h3,
.guild-header > span,
.chat-header strong,
.channel-intro h2,
.profile-body h3,
.stage-empty h2,
.add-friend h2,
.incoming-call strong {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.chat-header strong,
.guild-header > span {
  font-size: 16px;
  font-weight: 700;
}

/* Tiles instead of circles. Status dots and small round controls stay round. */
.avatar {
  border-radius: var(--tile);
}

.avatar .status-dot {
  border-radius: 50%;
}

.avatar.speaking {
  box-shadow: 0 0 0 2px var(--bg-sidebar), 0 0 0 4px var(--green);
}

/* Server rail: tiles that never morph; the active one gets a flag-green frame and a gold tick. */
.guild-rail {
  background-color: var(--bg-rail);
  /* Calçadão de Copacabana: soft waves, barely there. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='36' viewBox='0 0 72 36'%3E%3Cpath d='M0 18c9 0 9-12 18-12s9 12 18 12 9-12 18-12 9 12 18 12' fill='none' stroke='%231fae74' stroke-opacity='.05' stroke-width='3'/%3E%3C/svg%3E");
  background-size: 72px 36px;
  border-right: 1px solid var(--border);
}

.guild-icon,
.guild-icon:hover,
.guild-icon.active {
  border-radius: 16px;
}

.guild-icon {
  transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
  font-family: var(--font-display);
  font-weight: 700;
}

.guild-icon:hover {
  transform: translateY(-1px);
}

.guild-icon.active {
  box-shadow: 0 0 0 2px var(--bg-rail), 0 0 0 4px var(--accent);
}

.guild-icon.active::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 50%;
  width: 4px;
  height: 20px;
  transform: translateY(-50%);
  border-radius: 0 4px 4px 0;
  background: var(--gold);
}

.guild-icon.home {
  border-radius: 16px;
}

/* Sidebars and lists. */
.channel-sidebar {
  border-right: 1px solid var(--border);
}

.channel {
  border-radius: 10px;
  padding: 7px 10px;
}

.channel.active {
  background: var(--bg-active);
  box-shadow: inset 3px 0 0 var(--gold);
}

.channel-list h3 {
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* Headers: a thin brand stripe instead of a drop shadow. */
.chat-header,
.guild-header {
  box-shadow: none;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.chat-header::after,
.guild-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brand-gradient);
  opacity: 0.35;
}

.chat-header > svg,
.channel > svg {
  color: var(--accent);
}

.channel:not(.active) > svg {
  color: var(--muted);
}

.channel:hover > svg {
  color: var(--accent);
}

/* Empty states / intros: tile with the brand gradient. */
.channel-intro .intro-icon {
  border-radius: 22px;
  background: linear-gradient(135deg, var(--accent-soft), var(--gold-soft));
  color: var(--gold);
}

.channel-intro h2 {
  font-size: 28px;
}

.day-divider span {
  font-family: var(--font-display);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 12px;
  background: var(--bg-chat);
}

/* Messages. */
.message header strong {
  font-weight: 700;
}

.message:hover {
  background: #ffffff05;
}

/* Buttons: pills. */
.primary,
.secondary {
  border-radius: 999px;
}

.primary {
  letter-spacing: 0.01em;
}

/* Composer: a rounded pill with a brand focus ring. */
.composer-box {
  border-radius: 22px;
  border: 1px solid var(--border);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.composer-box:focus-within {
  border-color: #1fae7466;
  box-shadow: 0 0 0 3px #1fae741a;
}

.composer .attach {
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}

.composer .attach:hover:not(:disabled) {
  background: var(--accent);
  color: var(--on-accent);
}

/* Modals: soft tile with the brand stripe on top. */
.modal {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}

.modal::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--brand-gradient);
}

/* Profile card banner gets the stripe too. */
.profile-card {
  border-radius: var(--radius-lg);
}

/* Inputs. */
input,
textarea,
select {
  font-family: var(--font-ui);
}

/* Thin scrollbars with a green thumb. */
* {
  scrollbar-width: thin;
  scrollbar-color: #2a3d35 transparent;
}

*:hover {
  scrollbar-color: #35564a transparent;
}

/* Voice tiles and member rows follow the tile language. */
.tile {
  border-radius: 16px;
}

.member {
  border-radius: 10px;
}

.badge {
  font-family: var(--font-display);
}

/* Section labels: display face, sentence case (not the tiny all-caps labels of other chat apps). */
.channel-list h3,
.member-list h3,
.friend-list h3,
.quick-menu h4,
.emoji-grid-scroll h5 {
  text-transform: none;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--muted);
}

/* Form labels in sentence case too. */
label {
  text-transform: none;
  font-size: 13px;
  letter-spacing: 0;
  font-weight: 600;
}

/* ---- Responsive layout -------------------------------------------------------------------
   > 1000px  desktop: rail + channels + chat + members; the channel list can be collapsed.
   <= 1000px  the member list becomes a drawer on the right (button in the channel header).
   <= 760px   phone: one column. Servers + channels live in a drawer on the left (hamburger button),
              and everything tappable gets a finger-sized target. */

button,
a,
summary,
label {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle,
.members-toggle {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--muted);
}

.nav-toggle {
  margin-left: -8px;
}

.nav-toggle:hover,
.members-toggle:hover,
.members-toggle[aria-expanded='true'] {
  background: var(--bg-hover);
  color: var(--text-strong);
}

.members-toggle {
  display: none;
  margin-right: -8px;
}

.drawer-backdrop,
.voice-bar {
  display: none;
}

.chat-header strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Desktop: collapsed channel list. */
@media (min-width: 761px) {
  .shell.sidebar-collapsed {
    grid-template-columns: 72px 0 minmax(0, 1fr) auto;
  }

  .shell.sidebar-collapsed .channel-sidebar {
    visibility: hidden;
    overflow: hidden;
  }
}

@media (min-width: 761px) and (max-width: 1000px) {
  .shell.sidebar-collapsed {
    grid-template-columns: 72px 0 minmax(0, 1fr);
  }
}

/* Drawers (member list up to 1000px, servers + channels up to 760px). */
@media (max-width: 1000px) {
  .members-toggle {
    display: grid;
  }

  .member-list {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    width: min(300px, 86vw);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: -8px 0 24px #0008;
    /* Not just moved off-screen: an element parked beyond the right edge widens the page on phones. */
    display: none;
  }

  .shell.members-open .member-list {
    display: block;
    animation: drawer-in-right 0.22s ease;
  }

  @keyframes drawer-in-right {
    from {
      transform: translateX(100%);
    }
  }

  .drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 80;
    background: #000a;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }

  .drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 760px) {
  html,
  body,
  #root {
    height: 100dvh;
  }

  body {
    overscroll-behavior: none;
  }

  input,
  textarea,
  select {
    font-size: 16px; /* anything smaller makes iOS zoom the page when a field is focused */
  }

  .shell,
  .shell.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
    height: 100dvh;
  }

  .shell > .chat,
  .shell > .voice-stage {
    min-width: 0;
  }

  /* Servers and channels: a drawer sliding in from the left. */
  .guild-rail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 95;
    width: 72px;
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    transform: translateX(-100%);
    visibility: hidden;
    transition:
      transform 0.22s ease,
      visibility 0.22s;
  }

  .channel-sidebar,
  .shell.sidebar-collapsed .channel-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 72px;
    z-index: 95;
    width: min(300px, calc(100vw - 72px - 48px));
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 8px 0 24px #0008;
    transform: translateX(calc(-100% - 72px));
    visibility: hidden;
    overflow: hidden;
    transition:
      transform 0.22s ease,
      visibility 0.22s;
  }

  .shell.nav-open .guild-rail,
  .shell.nav-open .channel-sidebar {
    transform: none;
    visibility: visible;
  }

  /* Headers: room for the notch, and finger-sized buttons. */
  .chat-header {
    height: calc(52px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  }

  .nav-toggle,
  .members-toggle {
    width: 44px;
    height: 44px;
  }

  .nav-toggle {
    margin-left: -10px;
  }

  .header-action {
    min-width: 44px;
    min-height: 44px;
  }

  .friend-tabs {
    margin-left: 4px;
    padding-left: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .friend-tabs button {
    flex: none;
    padding: 8px 10px;
  }

  /* Drawer contents. */
  .channel {
    min-height: 44px;
  }

  .guild-header {
    height: 52px;
  }

  .user-panel {
    padding-bottom: 8px;
  }

  /* Messages. */
  .message {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    padding: 4px max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left));
  }

  .message .body {
    min-width: 0;
  }

  .message-delete {
    visibility: visible;
  }

  .composer {
    padding: 0 max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .composer .attach {
    width: 32px;
    height: 32px;
    margin: 6px 8px 6px 10px;
  }

  /* No hover on a phone: tapping a message shows its actions. */
  .message.touch-open .message-toolbar {
    display: flex;
  }

  .message-toolbar {
    right: 8px;
  }

  .message-toolbar button {
    width: 40px;
    height: 40px;
  }

  /* Pop-ups become bottom sheets. */
  .emoji-picker {
    left: 8px !important;
    right: 8px;
    top: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto;
    height: min(420px, 60dvh);
  }

  .profile-card {
    left: 8px !important;
    right: 8px;
    top: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto;
    max-height: 80dvh;
    overflow-y: auto;
  }

  .message-menu {
    min-width: 220px;
  }

  .modal-backdrop {
    place-items: end center;
  }

  .modal {
    width: 100%;
    max-height: 90dvh;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
  }

  .update-banner {
    top: calc(10px + env(safe-area-inset-top));
    max-width: calc(100vw - 24px);
  }

  /* While in a call, mute / deafen / hang up stay one tap away (the drawer holds the full panel). */
  .shell:has(> .voice-bar) {
    padding-top: calc(44px + env(safe-area-inset-top));
  }

  .shell:has(> .voice-bar) .chat-header {
    height: 52px;
    padding-top: 0;
  }
}

/* Call strip: shown on a phone, or on a desktop whose channel list is collapsed. */
.voice-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  height: calc(44px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-rail));
  border-bottom: 1px solid var(--accent-soft);
}

.shell:has(> .voice-bar) .voice-bar {
  display: flex;
}

.voice-bar button {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--text-strong);
}

.voice-bar button:hover {
  background: var(--bg-hover);
}

.voice-bar button.off {
  color: var(--red);
}

.voice-bar button.on {
  background: var(--accent);
  color: var(--on-accent);
}

.voice-bar .hangup {
  color: #fff;
  background: var(--red);
}

.voice-bar .voice-bar-name {
  flex: 1;
  width: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  padding: 0 8px;
  font-weight: 700;
}

.voice-bar .label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-bar .dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.voice-bar .dot.connecting {
  background: var(--gold);
}

@media (min-width: 761px) {
  .shell:has(> .voice-bar) {
    padding-top: 44px;
  }
}

/* Tooltips: header buttons sit at the screen edge, so their tip opens below and stays inside it;
   touch screens have no hover, and a tip hanging past the edge widens the page. */
.nav-toggle[data-tip]::after,
.members-toggle[data-tip]::after {
  top: calc(100% + 6px);
  bottom: auto;
}

.nav-toggle[data-tip]::after {
  left: 0;
  transform: translate(0, -4px);
}

.members-toggle[data-tip]::after {
  left: auto;
  right: 0;
  transform: translate(0, -4px);
}

.nav-toggle[data-tip]:hover::after,
.members-toggle[data-tip]:hover::after,
.nav-toggle[data-tip]:focus-visible::after,
.members-toggle[data-tip]:focus-visible::after {
  transform: translate(0, 0);
}

@media (hover: none) {
  [data-tip]::after {
    display: none;
  }
}


@media (max-width: 760px) {
  /* The tabs need the room more than the word "Amigos" does. */
  .friends-view .chat-header > strong {
    display: none;
  }
}

/* Login on a phone: the brand column is hidden, so the logo moves above the form. */
.auth-mobile-brand {
  display: none;
}

@media (max-width: 800px) {
  .auth-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    overflow-y: auto;
    padding: calc(32px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  }

  .auth-mobile-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
  }

  .auth-mobile-brand h1 {
    margin: 0;
    font-size: 30px;
    letter-spacing: -0.02em;
    color: var(--text-strong);
  }
}

/* ---- agenda ------------------------------------------------------------------------------ */

.agenda-entry {
  margin-bottom: 6px;
  align-items: center;
}

.agenda-entry .name {
  display: grid;
  line-height: 1.2;
}

.agenda-next {
  font-size: 11px;
  font-weight: 500;
  color: var(--gold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-entry > svg {
  color: var(--gold) !important;
}

.header-sub {
  font-size: 13px;
}

.header-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
}

.agenda-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 32px;
  display: grid;
  align-content: start;
  gap: 20px;
}

.agenda-day {
  display: grid;
  gap: 8px;
}

.agenda-day h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text-strong);
}

.event-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  text-align: left;
  transition: border-color 0.15s, transform 0.12s, background 0.15s;
}

.event-card:hover {
  border-color: #1fae7455;
  background: var(--bg-hover);
  transform: translateY(-1px);
}

.event-card.past {
  opacity: 0.6;
}

.date-tile {
  flex: none;
  width: 52px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  grid-template-rows: 20px 1fr;
  overflow: hidden;
  background: var(--bg-rail);
  border: 1px solid var(--border);
  text-align: center;
}

.date-tile .month {
  background: var(--brand-gradient);
  color: var(--on-gold);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 20px;
}

.date-tile .day {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-strong);
  display: grid;
  place-items: center;
}

.event-main {
  flex: 1;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.event-main strong {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-meta,
.event-people {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.avatar-stack {
  display: inline-flex;
}

.avatar-stack .avatar {
  margin-right: -6px;
  box-shadow: 0 0 0 2px var(--bg-sidebar);
  font-size: 10px !important;
}

.avatar-stack + * {
  margin-left: 6px;
}

.rsvp-chip {
  flex: none;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.rsvp-chip.going {
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.rsvp-chip.maybe {
  background: var(--gold-soft);
  color: var(--gold);
}

.rsvp-chip.no {
  background: #ef5a5a22;
  color: var(--red);
}

.agenda-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  margin-top: 48px;
}

.agenda-empty .intro-icon {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent-soft), var(--gold-soft));
  color: var(--gold);
}

.agenda-empty h2 {
  margin: 8px 0 0;
}

.agenda-past-toggle {
  justify-self: start;
  color: var(--muted);
  font-weight: 700;
  font-family: var(--font-display);
}

.agenda-past-toggle:hover {
  color: var(--text-strong);
}

.event-detail {
  display: flex;
  gap: 14px;
  align-items: center;
}

.event-detail p {
  margin: 0;
}

.event-when {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
}

.event-where {
  color: var(--text);
}

.event-by {
  font-size: 13px;
}

.event-description {
  white-space: pre-wrap;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-rail);
  border: 1px solid var(--border);
}

.rsvp-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.rsvp-button {
  padding: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-rail);
  font-weight: 700;
  color: var(--text);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.rsvp-button:hover {
  border-color: #3a524a;
}

.rsvp-button.going.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.rsvp-button.maybe.selected {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
}

.rsvp-button.no.selected {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.rsvp-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.rsvp-group h4 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--muted);
}

.rsvp-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.rsvp-group li {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.rsvp-group li:hover span {
  color: var(--text-strong);
}

.event-admin {
  display: flex;
  gap: 8px;
}

.danger-text {
  color: var(--red) !important;
}

.event-form {
  display: grid;
  gap: 12px;
}

.event-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.event-form textarea {
  resize: vertical;
}

input[type='date'],
input[type='time'] {
  color-scheme: dark;
}

/* The BOT tag keeps its size next to a member's name. */
.member .bot-badge {
  flex: none;
  border-radius: 6px;
}

/* ---- server settings: roles & members -------------------------------------------------- */

.guild-header-actions {
  display: flex;
  gap: 6px;
}

.settings-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.settings-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 700;
}

.settings-tabs button:hover {
  color: var(--text);
  background: var(--bg-hover);
}

.settings-tabs button.active {
  color: var(--text-strong);
  background: var(--bg-active);
}

.roles-tab {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 20px;
  min-height: 360px;
}

.roles-error {
  grid-column: 1 / -1;
}

.role-list {
  display: grid;
  align-content: start;
  gap: 8px;
  border-right: 1px solid var(--border);
  padding-right: 12px;
}

.role-add {
  justify-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.role-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.role-list li {
  display: flex;
  align-items: center;
  border-radius: 8px;
}

.role-list li.selected,
.role-list li:hover {
  background: var(--bg-active);
}

.role-pick {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  min-width: 0;
  text-align: left;
}

.role-pick .name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.role-move {
  display: none;
}

.role-list li:hover .role-move {
  display: flex;
}

.role-move button {
  width: 20px;
  color: var(--muted);
}

.role-move button:hover {
  color: var(--text-strong);
}

.role-editor {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding-right: 4px;
}

.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.role-colors {
  display: grid;
  gap: 6px;
}

.role-colors > div {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.swatch {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 2px solid transparent;
}

.swatch.none {
  background: repeating-linear-gradient(45deg, var(--bg-rail), var(--bg-rail) 4px, var(--bg-active) 4px, var(--bg-active) 8px);
}

.swatch.selected {
  border-color: var(--text-strong);
  box-shadow: 0 0 0 2px var(--bg-modal);
}

.permissions-title {
  margin: 4px 0 0;
  font-family: var(--font-display);
}

.permission-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.permission-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 4px;
  border-top: 1px solid var(--border);
}

.permission-list li > div {
  display: grid;
  gap: 2px;
}

.permission-list strong {
  color: var(--text-strong);
  font-size: 14px;
}

.permission-list small {
  font-size: 12px;
}

.permission-list li.locked {
  opacity: 0.45;
}

.members-tab {
  display: grid;
  gap: 10px;
}

.member-admin-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.member-admin-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 10px;
}

.member-admin-list li:hover {
  background: var(--bg-hover);
}

.member-admin-main {
  flex: 1;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.member-admin-main strong {
  color: var(--text-strong);
}

.role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
}

.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-rail);
  border: 1px solid var(--border);
}

.role-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 8px;
  border-radius: 10px;
  background: var(--bg-rail);
}

.role-picker label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.role-picker label.locked {
  opacity: 0.45;
}

.member-admin-actions {
  display: flex;
  gap: 6px;
}

.member-admin-actions .secondary {
  padding: 6px 12px;
  font-size: 13px;
}

.owner-crown {
  font-size: 12px;
}

/* ---- mentions & server notifications ----------------------------------------------------- */

.mention {
  padding: 0 4px;
  border-radius: 6px;
  background: #6cb4ee26;
  color: #9ccdf5;
  font-weight: 600;
  cursor: pointer;
}

.mention:hover {
  background: #6cb4ee44;
}

.mention.everyone {
  background: var(--gold-soft);
  color: var(--gold);
  cursor: default;
}

.message.mentioned {
  background: #f5b83d12;
  box-shadow: inset 3px 0 0 var(--gold);
}

.message.mentioned:hover {
  background: #f5b83d1c;
}

.composer {
  position: relative;
}

.mention-popup {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(100% + 4px);
  z-index: 20;
  display: grid;
  gap: 2px;
  padding: 6px;
  background: var(--bg-rail);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px #000b;
  animation: quick-menu-in 0.1s ease-out;
}

.mention-popup h5 {
  margin: 2px 6px 4px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--muted);
}

.mention-popup button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  text-align: left;
  color: var(--text);
}

.mention-popup button.selected {
  background: var(--bg-active);
  color: var(--text-strong);
}

.mention-popup small {
  margin-left: auto;
  font-size: 12px;
}

.mention-all-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--tile);
  display: grid;
  place-items: center;
  background: var(--gold-soft);
  color: var(--gold);
  font-weight: 800;
}

.guild-icon.muted {
  opacity: 0.55;
}

.guild-icon.muted:hover,
.guild-icon.muted.active {
  opacity: 1;
}

.muted-icon {
  position: absolute;
  left: -3px;
  bottom: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-rail);
  color: var(--muted);
}

.badge.mention-badge {
  background: var(--urucum);
  color: #fff;
}

.guild-menu {
  position: fixed;
  z-index: 170;
  width: 260px;
  display: grid;
  gap: 4px;
  padding: 8px;
  background: var(--bg-rail);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px #000c;
  animation: quick-menu-in 0.1s ease-out;
}

.guild-menu h4 {
  margin: 2px 6px 4px;
  font-family: var(--font-display);
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guild-menu-group {
  display: grid;
  gap: 1px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.guild-menu-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 6px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.guild-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  font-size: 14px;
}

.guild-menu-item > span {
  display: grid;
  gap: 1px;
}

.guild-menu-item small {
  font-size: 11px;
}

.guild-menu-item:hover {
  background: var(--accent);
  color: var(--on-accent);
}

.guild-menu-item:hover small {
  color: var(--on-accent);
}

.guild-menu-item.sub {
  padding-left: 12px;
}

.guild-menu-item .radio {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--muted);
  display: grid;
  place-items: center;
}

.guild-menu-item.selected .radio {
  border-color: var(--accent);
}

.guild-menu-item.selected .radio::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* "CRIADOR": the people who created the project. */
.creator-badge {
  display: inline-block;
  flex: none;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--brand-gradient);
  color: var(--on-gold);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  vertical-align: middle;
  box-shadow: 0 0 0 1px #f5b83d55, 0 2px 8px #f5b83d33;
}

/* ---- audio quick menu & voice settings ------------------------------------------------------ */

.quick-menu.floating {
  position: fixed;
  right: auto;
  top: auto;
  z-index: 200;
  box-sizing: border-box;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  gap: 4px;
  padding: 10px;
}

.quick-menu.floating h4 {
  margin: 2px 4px 4px;
}

.quick-menu.floating .device-list {
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
}

.quick-menu.floating .device-list button {
  width: 100%;
  min-height: 36px;
  height: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  text-align: left;
}

.quick-menu.floating .device-list button:hover {
  background: var(--bg-hover);
}

.quick-menu.floating .device-list .label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-menu.floating .quick-noise {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 10px 8px;
}

.quick-menu.floating .quick-noise > div {
  min-width: 0;
}

.quick-menu.floating .quick-noise .toggle {
  width: 40px;
  height: 24px;
  border-radius: 12px;
}

.quick-menu.floating .quick-settings {
  width: 100%;
  height: auto;
  min-height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px;
  text-align: left;
  white-space: nowrap;
}

@media (max-width: 760px) {
  /* A phone gets it as a sheet from the bottom, like the other pop-ups. */
  .quick-menu.floating {
    left: 8px !important;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    padding: 14px 12px;
  }

  .quick-menu.floating .device-list button {
    min-height: 44px;
  }
}

/* ---- server settings: wide, and it adapts ------------------------------------------------------ */

.modal.wide {
  width: min(1040px, calc(100% - 48px));
  max-height: calc(100dvh - 48px);
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
}

.modal.wide > .roles-tab,
.modal.wide > .members-tab {
  min-height: 0;
  overflow-y: auto;
  /* keeps the scrollbar off the content */
  margin-right: -8px;
  padding-right: 8px;
}

.settings-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-modal);
}

/* Roles */
.role-list {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100%;
}

.role-hint {
  margin: 0;
  font-size: 12px;
}

.role-list li {
  position: relative;
  gap: 2px;
  padding-left: 4px;
}

.role-grip {
  flex: none;
  width: 18px;
  display: grid;
  place-items: center;
  color: var(--muted);
  opacity: 0.6;
  cursor: grab;
}

.role-grip.locked {
  cursor: default;
  font-size: 11px;
}

.role-list li:hover .role-grip {
  opacity: 1;
}

.role-list li[draggable='true']:active {
  cursor: grabbing;
}

.role-list li.dragging {
  opacity: 0.4;
}

.role-list li.drop-before::before,
.role-list li.drop-after::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  pointer-events: none;
}

.role-list li.drop-before::before {
  top: -2px;
}

.role-list li.drop-after::after {
  bottom: -2px;
}

.role-move button {
  width: 28px;
  height: 28px;
}

.permissions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.permissions-head .permissions-title {
  margin: 0;
}

.select-all {
  flex: none;
  padding: 6px 12px;
  font-size: 13px;
}

.permission-list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  column-gap: 20px;
}

.permission-list li {
  padding: 10px 4px;
}

.sticky-actions {
  position: sticky;
  bottom: 0;
  padding: 10px 0 2px;
  background: linear-gradient(to top, var(--bg-modal) 70%, transparent);
}

/* Members */
.members-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 220px) auto;
  align-items: center;
  gap: 8px;
}

.members-toolbar input,
.members-toolbar select {
  width: 100%;
  min-width: 0;
}

.members-count {
  font-size: 13px;
  white-space: nowrap;
}

.member-admin-list li {
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
}

.member-admin-main strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.role-chips {
  align-items: center;
  gap: 6px;
}

.chip-remove {
  width: 16px;
  height: 16px;
  margin: 0 -3px 0 1px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
}

.chip-remove:hover {
  background: var(--red);
  color: #fff;
}

.add-role {
  position: relative;
}

.add-role-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px dashed var(--muted);
  color: var(--muted);
}

.add-role-button:hover:not(:disabled) {
  color: var(--text-strong);
  border-color: var(--text-strong);
}

.role-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  min-width: 200px;
  max-height: 260px;
  overflow-y: auto;
  display: grid;
  padding: 6px;
  background: var(--bg-rail);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px #000a;
}

.role-popover button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  text-align: left;
  font-size: 14px;
}

.role-popover button:hover {
  background: var(--bg-hover);
}

.members-empty {
  justify-content: center;
}

/* Narrower: a tablet or a small window */
@media (max-width: 900px) {
  .modal.wide {
    width: min(100%, 720px);
  }

  .roles-tab {
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    gap: 14px;
  }

  .members-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(140px, 200px);
  }

  .members-count {
    display: none;
  }
}

/* A phone: one column, the dialog fills the screen */
@media (max-width: 760px) {
  .modal.wide {
    width: 100%;
    max-height: 94dvh;
    padding: 16px 12px calc(14px + env(safe-area-inset-bottom));
  }

  .settings-tabs button {
    flex: 1;
    justify-content: center;
    padding: 10px 14px;
  }

  .roles-tab {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .role-list {
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 0 12px;
  }

  .role-list ul {
    max-height: 200px;
    overflow-y: auto;
  }

  /* No hover on a phone: the up / down buttons are always there (dragging with a finger does not work). */
  .role-move {
    display: flex;
  }

  .role-move button {
    width: 36px;
    height: 36px;
  }

  .role-pick {
    min-height: 44px;
  }

  .permission-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .permissions-head {
    flex-wrap: wrap;
  }

  .members-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .member-admin-list li {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .member-admin-main {
    flex: 1 1 0;
    min-width: 0;
  }

  .member-admin-actions {
    flex: 1 0 100%;
    justify-content: flex-end;
  }

  .chip-remove {
    width: 24px;
    height: 24px;
    margin: -4px -6px -4px 0;
  }

  .add-role-button {
    padding: 6px 12px;
  }

  .role-popover {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    top: auto;
    max-height: 50dvh;
    z-index: 300;
  }

  .role-popover button {
    min-height: 48px;
  }
}

/* Voice settings dialog: the noise switch and the microphone test as tidy panels. */
.modal > .setting-row,
.modal > .mic-test {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--bg-input);
}

.modal > .setting-row > div {
  min-width: 0;
}

.modal > .setting-row small {
  line-height: 1.35;
}

.mic-test .meter {
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.mic-test .secondary {
  justify-self: start;
}

/* ---- role mentions ----------------------------------------------------------------------------- */

.mention.role {
  --role-color: var(--accent);
  color: var(--role-color);
  background: color-mix(in srgb, var(--role-color) 18%, transparent);
}

.mention.role:hover {
  background: color-mix(in srgb, var(--role-color) 30%, transparent);
}

.mention-role-icon {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid var(--bg-rail);
  box-shadow: 0 0 0 1px var(--border);
}

/* ---- profiles: photos, editor, server icons ---------------------------------------------- */

.avatar.has-image {
  overflow: hidden;
  background: var(--bg-active);
}

.avatar.has-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.avatar.has-image .status-dot {
  z-index: 1;
}

.guild-icon-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.guild-icon:has(.guild-icon-image) {
  overflow: visible;
  padding: 0;
}

.guild-icon .guild-icon-image {
  border-radius: 16px;
}

.profile-handle {
  font-size: 13px;
}

.profile-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  margin: 4px 0;
  padding: 6px 12px;
  font-size: 13px;
}

.profile-bio {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.profile-editor {
  display: grid;
  gap: 12px;
}

.profile-preview {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-rail);
  border: 1px solid var(--border);
  padding-bottom: 12px;
}

.profile-preview .profile-banner {
  height: 64px;
}

.profile-preview-avatar {
  position: absolute;
  left: 16px;
  top: 24px;
  border-radius: calc(var(--tile) + 4%);
  padding: 4px;
  background: var(--bg-rail);
}

.profile-preview-text {
  display: grid;
  margin: 12px 16px 0 116px;
  min-height: 44px;
  align-content: center;
}

.profile-preview-text strong {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--text-strong);
}

.avatar-actions {
  display: flex;
  gap: 8px;
}

.avatar-actions .secondary {
  padding: 7px 14px;
  font-size: 13px;
}

.profile-editor textarea {
  resize: vertical;
}

.counter {
  justify-self: end;
  font-size: 11px;
  font-weight: 500;
}

.swatch.custom {
  position: relative;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  background: conic-gradient(#ef5a5a, #f5b83d, #1fae74, #6cb4ee, #7f6be0, #ef5a5a);
  cursor: pointer;
}

.swatch.custom input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.server-tab {
  display: grid;
  gap: 14px;
}

.server-icon-edit {
  display: flex;
  align-items: center;
  gap: 16px;
}

.server-icon-preview {
  width: 80px;
  height: 80px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg-active);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--text-strong);
}

.server-icon-preview .guild-icon-image {
  border-radius: 22px;
}

/* ---- switching accounts ------------------------------------------------------------------------ */

.account-switcher {
  margin: 4px 0 8px;
  border-radius: var(--radius);
  background: var(--bg-input);
}

.switch-row {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  text-align: left;
  font-weight: 600;
  color: var(--text-strong);
}

.switch-row:hover {
  background: var(--bg-hover);
}

.switch-row > span:nth-child(2) {
  flex: 1;
}

.switch-caret {
  display: grid;
  color: var(--muted);
  transition: transform 0.15s;
}

.switch-caret.open {
  transform: rotate(90deg);
}

.account-list {
  display: grid;
  gap: 2px;
  padding: 4px 8px 8px;
  border-top: 1px solid var(--border);
}

.account-item,
.saved-accounts li {
  display: flex;
  align-items: center;
  gap: 4px;
}

.account-pick,
.saved-account {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  text-align: left;
  color: var(--text);
}

.account-pick:hover:not(:disabled),
.saved-account:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-strong);
}

.account-pick.current {
  background: var(--accent-soft);
  color: var(--text-strong);
}

.account-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.account-check {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}

.account-forget {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--muted);
  opacity: 0.6;
}

.account-forget:hover {
  opacity: 1;
  color: #fff;
  background: var(--red);
}

.account-add {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 6px 8px;
  border-radius: 8px;
  border-top: 1px solid var(--border);
  color: var(--accent-hover);
  font-weight: 600;
}

.account-add:hover {
  background: var(--bg-hover);
}

/* Login: accounts already used on this device */
.saved-accounts {
  display: grid;
  gap: 8px;
}

.saved-accounts h3 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--muted);
}

.saved-accounts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.saved-account {
  background: var(--bg-input);
  padding: 8px 12px;
}

.saved-enter {
  flex: none;
  color: var(--accent-hover);
  font-weight: 700;
  font-size: 13px;
}

.adding-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--text-strong);
  font-weight: 600;
}

.adding-banner .link {
  color: var(--accent-hover);
  font-weight: 700;
}

@media (max-width: 760px) {
  .account-forget {
    width: 44px;
    height: 44px;
    opacity: 1;
  }
}

/* ---- optimistic sending ------------------------------------------------------------------ */

.message.pending.sending .body {
  opacity: 0.55;
}

.message.pending.failed .body > p,
.message.pending.failed .attachments {
  opacity: 0.6;
}

.send-failed {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--red);
  font-size: 13px;
  font-weight: 600;
}

.send-failed .link {
  padding: 0;
  font-size: 13px;
}

/* ---- status dot: small, centred on the photo's bottom-right corner (half outside, half inside) ---------- */

.status-dot {
  width: max(10px, 28%);
  height: max(10px, 28%);
  right: -5%;
  bottom: -5%;
  border: 2.5px solid var(--ring, var(--bg-panel));
}

.status-dot.dnd::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  top: 41%;
  height: 18%;
  border-radius: 2px;
  background: var(--ring, var(--bg-panel));
}

.member-list {
  --ring: var(--bg-sidebar);
}

.friend-row,
.channel-sidebar {
  --ring: var(--bg-sidebar);
}

/* ---- profile card ----------------------------------------------------------------------------------- */

.profile-card.pc {
  width: 340px;
  padding: 0;
  overflow: visible;
  background: var(--bg-rail);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 44px #000d;
  --ring: var(--bg-rail);
}

.pc-banner {
  position: relative;
  height: 96px;
  border-radius: 17px 17px 0 0;
}

.pc-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, #0000 45%, #0007);
  pointer-events: none;
}

.pc-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

.pc-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #000a;
  color: #fff;
  backdrop-filter: blur(6px);
  transition: background 0.12s;
}

.pc-icon:hover,
.pc-icon.on {
  background: #000e;
}

.pc-icon.accent {
  background: var(--accent);
  color: var(--on-accent);
}

.pc-avatar {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin: -44px 0 0 16px;
  padding: 5px;
  border-radius: 36%;
  background: var(--bg-rail);
  line-height: 0;
}

.pc-body {
  display: grid;
  gap: 10px;
  padding: 8px 16px 14px;
}

.pc-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.pc-name h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.15;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.pc-handle {
  margin: -6px 0 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.pc-status.online {
  color: var(--green);
}

.pc-status.idle {
  color: var(--gold);
}

.pc-status.dnd {
  color: var(--red);
}

.pc-panel {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-elevated);
}

.pc-panel h4,
.pc-roles-block h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.pc-panel p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
}

.pc-bio {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pc-roles-block {
  display: grid;
  gap: 6px;
}

.pc-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pc-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-active);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-strong);
}

.pc-commands {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.pc-command {
  padding: 6px 11px;
  border-radius: 9px;
  background: var(--bg-input);
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 700;
  transition: background 0.12s;
}

.pc-command:hover,
.pc-command.on {
  background: var(--accent-soft);
  color: var(--accent-hover);
}

/* The hover bubble of a command: a sentence, so it may wrap. */
.pc-command[data-tip]::after {
  white-space: normal;
  width: 230px;
  text-align: left;
  font-weight: 500;
  line-height: 1.35;
  z-index: 400;
}

.pc-command-help {
  display: grid;
  gap: 2px;
  margin-top: 4px;
  font-size: 13px;
}

.pc-command-help code {
  color: var(--accent-hover);
  font-weight: 700;
}

.pc-call {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bg-input);
  color: var(--text-strong);
  font-weight: 600;
  text-align: left;
}

.pc-call:hover {
  background: var(--bg-active);
}

.pc-call .live {
  margin-left: auto;
}

.pc-watch {
  width: 100%;
  margin-top: 6px;
}

.pc-foot {
  display: block;
  padding: 0 16px 16px;
}

.pc-foot input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--bg-input);
  font-size: 14px;
}

.pc-foot input:focus {
  border-color: var(--accent);
  outline: none;
}

.pc-edit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  border-radius: 12px;
}

.pc-menu-slider {
  display: grid;
  gap: 4px;
  padding: 6px 10px 8px;
  font-size: 13px;
  color: var(--muted);
}

.pc-menu-slider input[type='range'] {
  width: 100%;
  padding: 0;
  accent-color: var(--accent);
}

/* ---- account menu (the name and photo at the bottom-left) ------------------------------------------- */

.user-panel .who-photo {
  width: auto;
  height: auto;
  border-radius: var(--tile);
}

.user-panel .who {
  cursor: pointer;
  border-radius: 8px;
}

.account-menu {
  position: fixed;
  z-index: 250;
  padding-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-rail);
  box-shadow: 0 18px 44px #000d;
  --ring: var(--bg-rail);
}

.am-banner {
  height: 64px;
  border-radius: 17px 17px 0 0;
}

.am-avatar {
  position: relative;
  width: fit-content;
  margin: -34px 0 0 14px;
  padding: 4px;
  border-radius: 36%;
  background: var(--bg-rail);
  line-height: 0;
}

.am-head {
  display: grid;
  gap: 1px;
  padding: 6px 16px 2px;
}

.am-head strong {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--text-strong);
}

.am-head span {
  font-size: 13px;
  color: var(--muted);
}

.am-group {
  position: relative;
  display: grid;
  gap: 2px;
  margin: 8px 8px 0;
  padding: 4px;
  border-radius: 12px;
  background: var(--bg-elevated);
}

.am-row {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: left;
  font-weight: 600;
  color: var(--text);
}

.am-row:hover,
.am-has-sub.open > .am-row {
  background: var(--bg-hover);
  color: var(--text-strong);
}

.am-caret {
  margin-left: auto;
  display: grid;
  color: var(--muted);
}

.am-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
}

.am-dot.idle {
  background: var(--gold);
}

.am-dot.dnd {
  background: var(--red);
}

.am-has-sub {
  position: relative;
}

.am-flyout {
  display: none;
  position: absolute;
  left: calc(100% + 10px);
  bottom: -4px;
  z-index: 6;
  width: 270px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-rail);
  box-shadow: 0 14px 36px #000d;
}

/* keeps the pointer "inside" while it crosses the gap to the flyout */
.am-flyout::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12px;
  width: 12px;
}

.am-has-sub.open > .am-flyout {
  display: block;
}

@media (hover: hover) and (min-width: 761px) {
  .am-has-sub:hover > .am-flyout,
  .am-has-sub:focus-within > .am-flyout {
    display: block;
  }
}

.am-choice {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  text-align: left;
  color: var(--text);
}

.am-choice:hover,
.am-choice.current {
  background: var(--bg-hover);
}

.am-choice-text {
  flex: 1;
  display: grid;
  gap: 1px;
  min-width: 0;
}

.am-choice-text strong {
  color: var(--text-strong);
}

.am-choice-text small {
  color: var(--muted);
  line-height: 1.3;
}

.am-flyout .account-list {
  padding: 0;
  border-top: 0;
}

@media (max-width: 760px) {
  .account-menu {
    left: 8px !important;
    right: 8px;
    width: auto !important;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }

  /* No side room on a phone: a choice unfolds under its row. */
  .am-flyout {
    position: static;
    width: auto;
    margin: 2px 0 4px;
    padding: 2px 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .am-flyout::before {
    display: none;
  }

  .am-row,
  .am-choice {
    min-height: 48px;
  }
}

.pc-menu-row.static {
  cursor: default;
}

.pc-menu-row.static:hover {
  background: transparent;
  color: var(--text);
}

.pc-menu-row > span {
  white-space: nowrap;
}

/* Chips and rows sit on a panel of nearly their own colour: give them the darker card colour and a hairline. */
.pc-command,
.pc-call {
  background: var(--bg-rail);
  border: 1px solid var(--border);
}

.pc-command:hover,
.pc-command.on {
  border-color: var(--accent);
}

@media (max-width: 760px) {
  .profile-card.pc {
    left: 8px !important;
    right: 8px;
    top: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto;
    max-height: 84dvh;
    overflow-y: auto;
  }

  .pc-icon {
    width: 40px;
    height: 40px;
  }


  .pc-command {
    padding: 9px 13px;
  }
}

/* Images keep their own proportions and start at the left edge. The size cap lives on the button:
   a percentage cap on the image inside a shrink-to-fit button made the button wider than a wide
   photo, and the button's default text-align: center pushed the photo to the middle. */
.attachments .attachment {
  max-width: min(450px, 100%);
  text-align: left;
}

.attachments img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-position: left top;
}

/* A wide photo never pushes the message past the window, even in a narrow desktop window. */
.message .body {
  min-width: 0;
}

/* ---- code: ```bloco``` and `inline` ---------------------------------------------------------- */

.code-block {
  position: relative;
  display: block;
  margin: 4px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-rail);
  border: 1px solid var(--border);
  max-width: 100%;
  overflow-x: auto;
}

.code-block code {
  display: block;
  white-space: pre;
  font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-strong);
}

.code-lang {
  display: inline-block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: lowercase;
}

.code-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg-sidebar);
  opacity: 0;
  transition: opacity 0.12s;
}

.code-block:hover .code-copy,
.code-copy:focus-visible {
  opacity: 1;
}

.code-copy:hover {
  color: var(--text-strong);
}

.code-inline {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--bg-rail);
  border: 1px solid var(--border);
  font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
  font-size: 0.88em;
  color: var(--text-strong);
}

/* ---- channel edit menu -------------------------------------------------------------------- */

.channel-row {
  position: relative;
}

.channel-row > .channel {
  padding-right: 30px;
}

.channel-gear {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: none;
  place-items: center;
  color: var(--muted);
}

.channel-row:hover > .channel-gear,
.channel-gear:focus-visible {
  display: grid;
}

.channel-gear:hover {
  color: var(--text-strong);
  background: var(--bg-active);
}

.channel-row:hover > .channel .badge {
  visibility: hidden;
}

.channel-menu h4 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.guild-menu-item.danger {
  color: var(--red);
}

.guild-menu-item.danger:hover {
  background: var(--red);
  color: #fff;
}

.channel-rename {
  display: flex;
  gap: 6px;
  padding: 4px;
}

.channel-rename .primary {
  padding: 6px 12px;
  font-size: 13px;
}

.channel-delete {
  padding: 4px 6px;
  font-size: 14px;
}

.channel-delete p {
  margin: 0 0 8px;
}

.channel-delete .modal-actions .secondary,
.channel-delete .modal-actions .primary {
  padding: 6px 12px;
  font-size: 13px;
}

.system-role-note {
  font-size: 13px;
}

/* ---- update reminder (member list) + profile ------------------------------- */

.update-reminder {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 8px);
  margin: 8px 4px 0;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  min-width: 0;
}

.update-reminder span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.update-reminder small {
  color: var(--muted);
  font-weight: 600;
}

.update-reminder:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.update-reminder + section h3 {
  margin-top: 12px;
}

.username-fixed {
  margin: 0;
  font-size: 13px;
}

/* ---- appearance: chat text size and compact mode (appearance.ts) ----------------------------- */

:root {
  --chat-font: 15px;
}

.messages {
  font-size: var(--chat-font);
}

.message header time {
  font-size: max(11px, calc(var(--chat-font) * 0.8));
}

.hover-time {
  font-size: max(10px, calc(var(--chat-font) * 0.72));
}

.reply-preview {
  font-size: max(11px, calc(var(--chat-font) * 0.85));
}

html.compact .message {
  margin-top: 4px;
  gap: 10px;
  grid-template-columns: 28px minmax(0, 1fr);
}

html.compact .message.grouped {
  margin-top: 0;
}

html.compact .author-avatar .avatar {
  width: 28px !important;
  height: 28px !important;
  font-size: 12px !important;
}

html.compact .message .attachments img {
  max-height: 220px;
}

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

.appearance-settings {
  display: grid;
  gap: 12px;
}

.font-size-setting {
  display: grid;
  gap: 8px;
}

.font-size-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.font-size-slider {
  display: flex;
  align-items: center;
  gap: 10px;
}

.font-size-slider input[type='range'] {
  flex: 1;
  accent-color: var(--accent);
  min-height: 32px;
}

.font-a.small {
  font-size: 12px;
}

.font-a.big {
  font-size: 22px;
  font-weight: 700;
}

.font-preview {
  font-size: var(--chat-font);
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-chat);
  overflow-wrap: anywhere;
}

.font-preview strong {
  margin-right: 6px;
  color: var(--text-strong);
}

.font-size-setting .link {
  justify-self: start;
}

.updates-row .primary,
.updates-row .secondary {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .updates-row {
    flex-wrap: wrap;
  }
}

.messages .code-block code {
  font-size: max(11px, calc(var(--chat-font) * 0.87));
}

/* ---- composer send button + touch gestures on messages --------------------------------------- */

.composer-send {
  flex: none;
  width: 36px;
  height: 36px;
  margin: 0 8px 0 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  transition: background 0.12s, transform 0.12s, opacity 0.12s;
}

.composer-send:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: scale(1.06);
}

.composer-send:disabled {
  background: transparent;
  color: var(--muted);
  opacity: 0.6;
}

@media (hover: none) {
  /* Bigger touch targets in the text box row. */
  .composer-send,
  .composer-emoji {
    width: 44px;
    height: 44px;
  }

  .composer-emoji {
    margin: 0;
  }

  /* Hold = actions, swipe right = reply: the browser keeps vertical scrolling only, and its own
     long-press (text selection, link callout) stays out of the way. */
  .message {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .message > :not(.message-toolbar) {
    transform: translateX(var(--swipe, 0));
    transition: transform 0.18s ease;
  }

  .message.swiping > :not(.message-toolbar) {
    transition: none;
  }

  .message.swiping::before {
    content: '↩';
    position: absolute;
    left: 14px;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 17px;
    font-weight: 800;
    background: var(--bg-hover);
    color: var(--muted);
    opacity: var(--swipe-progress, 0);
    transform: scale(calc(0.6 + var(--swipe-progress, 0) * 0.4));
  }

  .message.swipe-ready::before {
    background: var(--accent);
    color: var(--on-accent);
  }
  /* Phones keep :hover stuck on the last thing tapped, so a single tap used to open the reaction
     bar. On touch, the bar (and the "+" reaction) only show for the message being held. */
  .message:hover:not(.touch-open):not(.active) .message-toolbar {
    display: none;
  }

  .message.touch-open .message-toolbar {
    display: flex;
  }

  .message:hover:not(.touch-open) .reaction.add {
    opacity: 0;
  }

  .message.touch-open .reaction.add {
    opacity: 1;
  }

  /* No hover and no right-click: the channel gear is always there for those who can use it. */
  .channel-gear {
    display: grid;
    width: 32px;
    height: 32px;
    top: 1px;
  }
}

/* The rounded box already shows the focus ring (focus-within); no second square inside it. */
.composer textarea:focus-visible {
  outline: none;
}

/* ---- agenda: back button, events happening now -------------------------------------------- */

.agenda-back {
  flex: none;
  width: 36px;
  height: 36px;
  margin-right: 2px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.agenda-back:hover {
  color: var(--text-strong);
  background: var(--bg-hover);
}

.event-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 8px 0 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.event-live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: live-dot 1.6s ease-in-out infinite;
}

p.event-live {
  width: fit-content;
}

@keyframes live-dot {
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .event-live::before {
    animation: none;
  }
}

.agenda-next.live {
  color: var(--accent);
}

/* Date, time and duration side by side; on a phone the duration takes its own line. */
.event-form-row {
  grid-template-columns: 1.3fr 1fr 1fr;
}

@media (max-width: 520px) {
  .event-form-row {
    grid-template-columns: 1fr 1fr;
  }

  .event-form-row label:last-child {
    grid-column: 1 / -1;
  }
}

/* ---- modal header: title centered, close button on the right ------------------------------ */

.modal-head {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
}

.modal-head h2 {
  grid-column: 2;
  min-width: 0;
  overflow-wrap: anywhere;
}

.modal-close {
  grid-column: 3;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.modal-close:hover {
  color: var(--text-strong);
  background: var(--bg-hover);
}

@media (hover: none) {
  .modal-close {
    width: 44px;
    height: 44px;
  }
}

/* Phone: the agenda header keeps back, title and "Novo evento" on one line. */
@media (max-width: 520px) {
  .agenda-view .header-sub {
    display: none;
  }

  .agenda-view .header-primary {
    white-space: nowrap;
    flex: none;
  }
}
/* ---- settings: side menu + one category at a time ---------------------------------------------------- */

.settings-backdrop {
  background: #000c;
}

.settings-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  width: min(980px, calc(100% - 48px));
  height: min(680px, calc(100dvh - 48px));
  background: var(--bg-modal);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px #000c;
}

.settings-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  padding: 20px 12px 14px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
}

.settings-side nav {
  display: grid;
  gap: 2px;
  align-content: start;
  flex: 1;
  overflow-y: auto;
}

.settings-side-title {
  margin: 0 10px 12px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-side button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  text-align: left;
  color: var(--muted);
  font-weight: 600;
}

.settings-side button:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.settings-side nav button.active {
  background: var(--bg-active);
  color: var(--text-strong);
}

.settings-side .settings-logout {
  color: var(--red);
  margin-top: 6px;
}

.settings-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.settings-main > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border);
}

.settings-main h2 {
  margin: 0;
  font-size: 20px;
  color: var(--text-strong);
}

.settings-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
}

.settings-close:hover {
  background: var(--bg-hover);
  color: var(--text-strong);
}

.settings-content {
  display: grid;
  gap: 16px;
  align-content: start;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
}

.settings-content > * {
  max-width: 600px;
}

@media (max-width: 760px) {
  .settings-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    border: 0;
  }

  .settings-side {
    flex-direction: row;
    align-items: center;
    padding: calc(8px + env(safe-area-inset-top)) 8px 8px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
  }

  .settings-side-title {
    display: none;
  }

  .settings-side nav {
    display: flex;
    overflow: visible;
    flex: none;
  }

  .settings-side button {
    width: auto;
    white-space: nowrap;
    padding: 10px 12px;
  }

  .settings-side .settings-logout {
    margin: 0;
  }

  .settings-content {
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  }
}

/* ---- profile editor: photo is the button, a calmer form -------------------------------------------- */

.profile-editor {
  gap: 16px;
}

.profile-preview .profile-banner {
  height: 88px;
}

.profile-preview-avatar {
  top: 44px;
}

.profile-preview-avatar .avatar-pick {
  position: relative;
  display: block;
  padding: 0;
  border-radius: var(--tile);
  overflow: hidden;
  cursor: pointer;
}

.avatar-pick-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: #000a;
  opacity: 0;
  transition: opacity 0.15s;
}

.avatar-pick:hover .avatar-pick-overlay,
.avatar-pick:focus-visible .avatar-pick-overlay,
.avatar-pick:disabled .avatar-pick-overlay {
  opacity: 1;
}

.avatar-remove {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 2px solid var(--bg-rail);
  color: var(--red);
  cursor: pointer;
}

.avatar-remove:hover {
  background: var(--red);
  color: #fff;
}

.profile-preview-text {
  margin-top: 16px;
}

.profile-editor input:not([type='color']),
.profile-editor textarea {
  background: var(--bg-rail);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.profile-editor input:focus,
.profile-editor textarea:focus {
  border-color: var(--accent);
  outline: none;
}

.profile-editor .modal-actions {
  padding-top: 4px;
}

@media (max-width: 760px) {
  .profile-editor .modal-actions {
    position: sticky;
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg-modal);
  }

  .profile-editor .modal-actions button {
    flex: 1;
    padding: 12px;
  }
}

/* ---- settings: "Minha conta" rows -------------------------------------------------------------------- */

.account-page {
  display: grid;
  gap: 4px;
}

.account-row {
  display: grid;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.account-row:last-of-type {
  border-bottom: 0;
}

.account-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.account-row-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.account-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.account-value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.account-fixed {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.account-row-main > button {
  flex: none;
  padding: 8px 16px;
}

.account-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  background: var(--bg-rail);
  border: 1px solid var(--border);
}

.account-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.account-saved {
  margin: 8px 0 0;
  color: var(--green);
  font-weight: 600;
}

/* "Aparelhos conectados" */
.account-devices {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.account-devices h3 {
  margin: 0;
  font-size: 16px;
}

.account-devices > p {
  margin: 0;
}

.device-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.device-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.device-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.device-text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-row > button {
  flex: none;
}

button.danger-outline {
  justify-self: start;
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
}

button.danger-outline:hover:not(:disabled) {
  background: color-mix(in srgb, var(--red) 12%, transparent);
}

@media (max-width: 480px) {
  .device-row {
    flex-direction: column;
    align-items: stretch;
  }

  button.danger-outline {
    justify-self: stretch;
  }
}

@media (max-width: 760px) {
  .account-row-main {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-form-actions button {
    flex: 1;
    padding: 12px;
  }
}

/* "Get the app" is a button on phones (install) and a link on Windows (installer). */
button.download-app {
  width: calc(100% - 16px);
  text-align: left;
  cursor: pointer;
}

.install-steps ol {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 10px;
  line-height: 1.45;
}

.install-steps p {
  margin: 0 0 8px;
}

.install-steps p.muted {
  margin: 12px 0 0;
  font-size: 13px;
}

/* ---- floating menus: ⋮ on the profile card, ⋮ on people in a Roda, right-click on a person ---------- */

.ctx-menu {
  position: fixed;
  z-index: 170;
  width: min(264px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  display: grid;
  gap: 2px;
  padding: 6px;
  border-radius: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px #000b;
}

.ctx-head {
  margin: 4px 10px 2px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ctx-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--border);
}

.ctx-item {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 6px;
  text-align: left;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

.ctx-item:hover,
.ctx-item:focus-visible {
  background: var(--bg-active);
  color: var(--text-strong);
}

.ctx-item.danger {
  color: var(--red);
}

.ctx-item.danger:hover,
.ctx-item.danger:focus-visible {
  background: var(--red);
  color: #fff;
}

.ctx-label {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.ctx-label small {
  font-size: 12px;
  color: var(--muted);
}

.ctx-label .role-dot {
  display: inline-block;
  margin-right: 4px;
}

.ctx-roles {
  width: min(240px, calc(100vw - 16px));
}

.ctx-role {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ctx-role .role-dot {
  flex: none;
}

.ctx-check {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  border: 2px solid var(--muted);
  color: var(--on-accent);
}

.ctx-check.on {
  background: var(--accent);
  border-color: var(--accent);
}

.ctx-error {
  margin: 4px 10px;
}

/* The ⋮ on a person in a Roda: on hover with a mouse, always on touch screens. */
.mod-dots {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--muted);
  flex: none;
  opacity: 0;
  transition: opacity 0.12s;
}

.mod-dots:hover,
.mod-dots:focus-visible {
  color: var(--text-strong);
  background: var(--bg-active);
  opacity: 1;
}

.tile.person .mod-dots {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: #0009;
}

.tile.person:hover .mod-dots,
.voice-participants li:hover .mod-dots {
  opacity: 1;
}

.voice-participants li .mod-dots {
  margin-left: auto;
  width: 24px;
  height: 24px;
}

@media (hover: none) {
  .mod-dots {
    opacity: 1;
    width: 36px;
    height: 36px;
  }

  .voice-participants li .mod-dots {
    width: 32px;
    height: 32px;
  }
}

.pc-more.mod {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent);
}

.server-muted {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--red);
  font-size: 11px;
}

/* Kick / ban confirmation */
.punish-form .punish-explain {
  margin: 0;
  color: var(--text);
  line-height: 1.45;
}

.check-row {
  display: flex !important;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.check-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--red);
}

.primary.warn-fill {
  background: var(--urucum);
  color: #1d0c05;
}

.primary.danger-fill {
  background: var(--red);
  color: #fff;
}

/* In timeout: the message box becomes a notice. */
.composer-box.timeout-notice {
  gap: 10px;
  padding: 12px 16px;
  color: var(--urucum);
  border-color: color-mix(in srgb, var(--urucum) 45%, transparent);
  font-size: 14px;
  line-height: 1.4;
}

.timeout-badge {
  flex: none;
  font-size: 13px;
}

/* ---- bans & audit log tabs -------------------------------------------------------------------- */

.tab-intro {
  margin: 0 0 12px;
  font-size: 13px;
}

.empty-note {
  margin: 24px 0;
  text-align: center;
  color: var(--muted);
}

.ban-list,
.audit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.ban-row,
.audit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
}

.ban-info,
.audit-main {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.ban-info small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ban-reason {
  color: var(--urucum);
}

.audit-row {
  align-items: flex-start;
}

.audit-sentence {
  margin: 0;
  line-height: 1.45;
  color: var(--text);
  overflow-wrap: anywhere;
}

.audit-main time {
  font-size: 12px;
}

.audit-reason {
  color: var(--muted);
}

.audit-badge {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  vertical-align: 1px;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--text);
}

.audit-badge.danger {
  background: color-mix(in srgb, var(--red) 22%, transparent);
  color: var(--red);
}

.audit-badge.warn {
  background: color-mix(in srgb, var(--urucum) 20%, transparent);
  color: var(--urucum);
}

.audit-badge.voice {
  background: color-mix(in srgb, var(--accent-cyan) 18%, transparent);
  color: var(--accent-cyan);
}

.audit-avatar-fallback {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-active);
  color: var(--muted);
  flex: none;
}

.audit-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.audit-filter {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  min-height: 34px;
}

.audit-filter.active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent);
}

.audit-more {
  display: block;
  margin: 12px auto 0;
}

.tile.person {
  position: relative;
}

.modal:focus {
  outline: none;
}

/* ---- channels: drag and drop (manage_channels) ------------------------------------------------ */

.channel-row[draggable='true'] > .channel {
  cursor: grab;
}

.channel-row[draggable='true']:active > .channel {
  cursor: grabbing;
}

.channel-row.dragging {
  opacity: 0.4;
}

.channel-row.drop-before::before,
.channel-row.drop-after::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  pointer-events: none;
  z-index: 3;
}

.channel-row.drop-before::before {
  top: -2px;
}

.channel-row.drop-after::after {
  bottom: -2px;
}

.guild-menu-item:has(.flip-label) svg {
  transform: rotate(180deg);
}

.channel-order-error {
  margin: 4px 8px;
}

/* ---- user settings on a phone (the desktop layout above stays exactly as it is) --------------- */

@media (max-width: 768px) {
  /* One column: title + close button on top (always visible), the categories as chips that wrap
     (nothing hidden off-screen), then the content. settings-main's children join the column. */
  .settings-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    border: 0;
  }

  .settings-main {
    display: contents;
  }

  .settings-main > header {
    order: 0;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: calc(10px + env(safe-area-inset-top)) 12px 10px 16px;
    background: var(--bg-modal);
  }

  .settings-main h2 {
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .settings-close {
    width: 44px;
    height: 44px;
    flex: none;
  }

  .settings-side {
    order: 1;
    flex: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .settings-side-title {
    display: none;
  }

  .settings-side nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .settings-side button {
    font-size: 14px;
  }

  .settings-side button {
    width: auto;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    white-space: nowrap;
  }

  .settings-side nav button.active {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: var(--accent-soft);
    color: var(--accent);
  }

  .settings-side .settings-logout {
    margin: 0;
    border-color: color-mix(in srgb, var(--red) 40%, transparent);
  }

  .settings-content {
    order: 2;
    flex: 1;
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }

  .settings-content > * {
    max-width: none;
  }

  .settings-content input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='file']),
  .settings-content select,
  .settings-content textarea {
    width: 100%;
    min-height: 44px;
    font-size: 16px; /* no zoom-in on iOS when focusing */
  }

  .settings-content .setting-row {
    gap: 12px;
  }

  .settings-content button.primary,
  .settings-content button.secondary {
    min-height: 44px;
  }
}

/* ---- names never wrap; compact, even tags (CRIADOR, BOT, cargos) -------------------------------- */

.nick,
.message header strong,
.member > span:not(.avatar):not(.live):not(.bot-badge):not(.creator-badge):not(.owner-crown):not(.timeout-badge),
.voice-participants .name,
.pc-name h3,
.user-panel .who strong,
.user-panel .who .name,
.reply-preview strong,
.replying-bar strong,
.member-admin-list strong,
.ctx-head {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message header {
  min-width: 0;
}

.message header strong {
  flex: 0 1 auto;
}

.message header time {
  flex: none;
  white-space: nowrap;
}

.bot-badge,
.creator-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  align-self: center;
  box-sizing: border-box;
  height: 16px;
  margin-left: 6px;
  /* letter-spacing also adds space after the last letter: take it back on the right so the word sits in the middle */
  padding: 0 calc(6px - 0.05em) 0 6px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  vertical-align: middle;
}

/* Next to a name in a flex row (chat header, mini profile) the row's gap is the spacing. */
.message header .bot-badge,
.message header .creator-badge,
.pc-name .bot-badge,
.pc-name .creator-badge {
  margin-left: 0;
}

/* The badge must not push the name away or leave a gap after it: the name shrinks, the badge doesn't. */
.pc-name {
  gap: 6px;
  justify-content: flex-start;
}

.pc-name h3 {
  flex: 0 1 auto;
}

.pc-role {
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-name {
  flex-wrap: nowrap;
  min-width: 0;
}

.pc-name h3 {
  overflow-wrap: normal;
}

.tile-label {
  max-width: calc(100% - 16px);
  min-width: 0;
}

.tile-label > :not(.nick) {
  flex: none;
}

/* ---- call link quality + "Estatísticas da chamada" ---------------------------------------- */

.voice-status-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.link-quality {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.link-quality.good {
  color: var(--green);
}

.link-quality.ok {
  color: var(--gold);
}

.link-quality.bad {
  color: var(--red);
}

.link-quality:hover,
.link-quality:focus-visible {
  background: var(--bg-hover, rgba(255, 255, 255, 0.06));
}

.call-stats ul {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.call-stats li {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.call-stats li > strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-stats dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 8px 0 0;
  font-size: 13px;
}

.call-stats dt {
  color: var(--muted);
}

.call-stats dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .link-quality {
    width: 44px;
    height: 44px;
    margin: -10px 0;
  }

  .call-stats dl {
    grid-template-columns: 1fr;
  }

  .call-stats dd {
    margin-bottom: 4px;
  }
}

/* ---- "Modo leve" (appearance.ts): for modest PCs and phones ---------------------------------- */

html.lite *,
html.lite *::before,
html.lite *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition: none !important;
  scroll-behavior: auto !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Shadows cost a lot to paint; focus rings stay (they are how the keyboard sees where it is). */
html.lite *:not(:focus-visible) {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Messages off screen are not laid out or painted until scrolled to. */
html.lite .message {
  content-visibility: auto;
  contain-intrinsic-size: auto 64px;
}

.stream-volume-value {
  min-width: 4ch;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Selecting and copying messages takes their text, not the floating action bar, the reactions or the tags. */
.message-toolbar,
.reactions,
.message .bot-badge,
.message .creator-badge {
  -webkit-user-select: none;
  user-select: none;
}

.owner-mark {
  display: inline-flex;
  vertical-align: middle;
  color: var(--gold);
}

/* ---- server settings: the user-settings shell, a little wider for roles and the audit log ---- */

@media (min-width: 769px) {
  .settings-shell.server-settings {
    width: min(1100px, calc(100% - 48px));
    height: min(760px, calc(100dvh - 48px));
  }
}

.server-settings .settings-content > * {
  max-width: none;
}

/* ---- "Estatísticas para nerds" over a stream ------------------------------------------------ */

.focused-stream,
.tile.stream {
  position: relative;
}

.nerd-stats {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  width: min(320px, calc(100% - 20px));
  max-height: calc(100% - 20px);
  overflow-y: auto;
  padding: 10px 12px;
  border-radius: 8px;
  background: #000000d0;
  color: #f2f2f2;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  cursor: auto;
}

.nerd-stats-head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}

.nerd-stats-head strong {
  flex: 1;
  font-family: var(--font-ui);
}

.nerd-stats-head button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  color: #fff;
}

.nerd-stats-head button:hover {
  background: #ffffff22;
}

.nerd-stats dl {
  margin: 0 0 6px;
}

.nerd-stats-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.nerd-stats dt {
  color: #b8c4bf;
}

.nerd-stats dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.nerd-stats-who {
  margin-top: 4px;
  color: var(--accent) !important;
  font-weight: 700;
}

@media (max-width: 768px) {
  .nerd-stats {
    font-size: 11px;
  }
}

/* ---- "Novidades" (changelog) --------------------------------------------------------------- */

.whatsnew-card {
  position: fixed;
  right: 16px;
  top: calc(60px + env(safe-area-inset-top));
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 10px 10px 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 12px;
  background: var(--bg-panel);
  color: var(--text);
  box-shadow: 0 8px 24px #0008;
  font-size: 14px;
}

.whatsnew-card > svg {
  flex: none;
  color: var(--gold);
}

.whatsnew-card .link {
  padding: 0;
  font-weight: 700;
}

.whatsnew-close {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--muted);
}

.whatsnew-close:hover {
  background: var(--bg-hover);
  color: var(--text-strong);
}

.whatsnew-items {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  line-height: 1.45;
}

.whatsnew-history {
  display: grid;
  gap: 20px;
}

.whatsnew-history h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

@media (max-width: 768px) {
  /* Above the message box, clear of the header's buttons. */
  .whatsnew-card {
    top: auto;
    bottom: calc(84px + env(safe-area-inset-bottom));
    left: 16px;
    right: 16px;
    max-width: none;
  }

  .whatsnew-close {
    width: 44px;
    height: 44px;
  }
}

.settings-shell:focus {
  outline: none;
}

.voice-actions .link-quality {
  border-radius: 6px;
}

.pc-menu-row {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: left;
  font-size: 14px;
  color: var(--text);
}

/* ---- the live in focus: control bar, menu, full screen ------------------------------------- */

.focused-stream {
  cursor: pointer;
  /* The control bar adapts to the live's own width (a small pop-out window, a phone). */
  container-type: inline-size;
  /* Long press opens our menu, not the phone's own (save video / select). */
  -webkit-touch-callout: none;
  user-select: none;
}

.focused-stream.is-fullscreen {
  border-radius: 0;
  background: #000;
}

.focused-stream:not(.awake).is-fullscreen {
  cursor: none;
}

.stream-bar {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 32px 12px 12px;
  background: linear-gradient(to top, #000c, #0000);
  color: #fff;
  cursor: auto;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.focused-stream.awake .stream-bar,
.stream-bar:focus-within {
  opacity: 1;
}

.stream-bar .tile-label {
  position: static;
}

.stream-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  background: #000b;
  padding: 4px 6px;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
}

.stream-icon-button {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  border-radius: 6px;
  background: transparent;
  color: #fff;
}

.stream-icon-button:hover {
  background: #ffffff26;
}

.stream-icon-button[aria-pressed='true'] {
  background: var(--accent);
  color: var(--on-accent);
}

.stream-icon-button:focus-visible,
.stop-watching:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.stream-volume {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stream-volume input[type='range'] {
  width: 100px;
  padding: 0;
}

.stream-volume-value {
  min-width: 3.5ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.stop-watching {
  display: inline-flex;
  align-items: center;
  min-width: 34px;
  gap: 6px;
  height: 34px;
  margin-left: 4px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
}

/* Right-click / long-press menu: above the full screen and the image viewer alike. */
.message-menu.stream-menu {
  z-index: 220;
  cursor: auto;
}

.stream-menu-volume {
  display: grid;
  gap: 4px;
  padding: 6px 10px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.stream-menu .stream-volume {
  color: var(--text);
}

.stream-menu .stream-volume .stream-icon-button {
  color: var(--text);
}

.stream-menu .stream-volume input[type='range'] {
  flex: 1;
  width: auto;
}

.menu-check {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--muted);
}

.menu-check.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.stream-menu button:hover .menu-check,
.stream-menu button:focus-visible .menu-check {
  border-color: var(--on-accent);
}

.stream-menu button:hover .menu-check.on {
  background: var(--on-accent);
  color: var(--accent);
}

.stage.focus-only {
  padding: 8px;
}

/* My own live: trocar / estatísticas in the corner. */
.own-stream-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  gap: 4px;
}

.own-stream-actions .stream-icon-button {
  background: #0009;
}

.own-stream-actions .stream-icon-button[aria-pressed='true'] {
  background: var(--accent);
}

/* Someone's live in the grid: the whole tile is the button. */
.tile.stream .tile-hit {
  position: absolute;
  inset: 0;
  padding: 0;
  background: transparent;
  border-radius: inherit;
}

.tile.stream.watched:hover,
.tile.stream.own-stream:hover {
  border-color: var(--accent);
}

.tile.hidden-people {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
}

@media (max-width: 768px) {
  .stream-bar {
    padding: 24px 8px 8px;
  }

  /* Seven 44 px buttons fit a 360 px phone on one line. */
  .stream-controls {
    gap: 0;
    padding: 2px;
  }

  .stream-icon-button,
  .stop-watching {
    min-width: 44px;
    height: 44px;
  }

  .stop-watching {
    justify-content: center;
    margin-left: 2px;
    padding: 0;
  }

  /* Phones use the hardware buttons for loudness; the slider lives in the long-press menu. */
  .stream-bar .stream-volume input[type='range'],
  .stream-bar .stream-volume-value,
  .stop-watching .bar-text {
    display: none;
  }

  .own-stream-actions .stream-icon-button {
    min-width: 44px;
    height: 44px;
  }

  .message-menu.stream-menu button {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stream-bar {
    transition: none;
  }
}

/* ---- two monitors: pop-out window, picture-in-picture, grid hints ---------------------------- */

.tile.stream .tile-label {
  pointer-events: none;
}

.tile-hint {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #000b;
  color: #fff;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.tile.stream:hover .tile-hint,
.tile.stream .tile-hit:focus-visible .tile-hint {
  opacity: 1;
}

.tile-popped {
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.focused-stream.popped-out {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: var(--text);
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg-rail));
  cursor: auto;
}

.focused-stream.popped-out p {
  margin: 0;
  max-width: 36ch;
}

/* Hidden players kept ready for picture-in-picture (it needs frames at the moment of the click). */
.pip-player {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 2px;
  height: 2px;
  opacity: 0;
  pointer-events: none;
}

/* The live alone in its own window. */
.live-popout-body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.live-popout-root,
.live-popout-root .focused-stream.in-popout {
  height: 100%;
}

.focused-stream.in-popout {
  border-radius: 0;
}

@container (max-width: 640px) {
  .stream-bar .bar-extra,
  .stream-bar .stream-volume input[type='range'],
  .stream-bar .stream-volume-value,
  .stop-watching .bar-text {
    display: none;
  }

  .stop-watching {
    justify-content: center;
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tile-hint {
    transition: none;
  }
}

/* ---- cameras ------------------------------------------------------------------------------- */

/* Status on its own line, buttons in a row under it: room for the camera button. */
.voice-panel {
  flex-wrap: wrap;
}

.voice-panel .voice-status {
  flex: 1 1 100%;
}

.voice-panel .voice-actions {
  flex: 1 1 100%;
  justify-content: space-between;
}

.tile.person.has-camera {
  background: #000;
  cursor: pointer;
}

.camera-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-video.mirrored,
.camera-preview-frame video.mirrored {
  transform: scaleX(-1);
}

.tile.person.has-camera .tile-label {
  z-index: 1;
}

.tiles:not(.strip) .tile.person.big {
  grid-column: span 2;
  grid-row: span 2;
}

.participant-camera {
  display: inline-grid;
  color: var(--muted);
}

.camera-preview-frame {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
  color: #fff;
  text-align: center;
}

.camera-preview-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-preview-frame p {
  padding: 16px;
}

.camera-flip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text);
}

.camera-preview .small {
  font-size: 12px;
}

.camera-preview .modal-actions .primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 768px) {
  .tiles:not(.strip) .tile.person.big {
    grid-column: 1 / -1;
  }
}

/* ---- resizable channel list ------------------------------------------------------------------ */

/* Only where the list sits in the grid: on phones it is a fixed drawer and must stay that way. */
@media (min-width: 761px) {
  .channel-sidebar {
    position: relative;
  }
}

.sidebar-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  z-index: 5;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
}

.sidebar-resizer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  background: transparent;
  transition: background 0.15s ease;
}

.sidebar-resizer:hover::after,
.sidebar-resizer:focus-visible::after,
.resizing-sidebar .sidebar-resizer::after {
  background: var(--accent);
}

.sidebar-resizer:focus-visible {
  outline: none;
}

/* While dragging: no text selection, the resize cursor everywhere. */
.resizing-sidebar,
.resizing-sidebar * {
  cursor: col-resize !important;
  user-select: none !important;
}

/* Phones: the list is a drawer; collapsed: nothing to drag. */
@media (max-width: 760px) {
  .sidebar-resizer {
    display: none;
  }
}

.shell.sidebar-collapsed .sidebar-resizer {
  display: none;
}

/* "Conectado" and the channel / server on one line each. */
.voice-status-line strong {
  white-space: nowrap;
}

/* ---- 1.1: two lives side by side, live zoom, call verification ------------------------------- */

/* The live(s) in focus. Two of them share the row; on a narrow stage (phones) they stack. */
.stage-focus {
  flex: 1;
  min-height: 0;
  display: flex;
}

.stage-focus.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  /* The row itself keeps the minimum (a min-height on the live alone would overlap the next one). */
  grid-auto-rows: minmax(180px, 1fr);
  gap: 8px;
}

/* Zoom: the picture scales inside its frame; drag moves it. */
.focused-stream video {
  transform-origin: center;
  transition: transform 0.08s ease-out;
}

.focused-stream {
  /* Pinch reaches our zoom (the page itself keeps scrolling with one finger). */
  touch-action: pan-x pan-y;
}

.focused-stream.zoomed {
  cursor: grab;
  touch-action: none;
}

.focused-stream.zoomed:active {
  cursor: grabbing;
}

.stream-icon-button.zoom-level {
  width: auto;
  min-width: 44px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* "Código de verificação" in the call statistics. */
.verification-code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.call-encryption {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.4;
}

.call-encryption svg {
  flex-shrink: 0;
  margin-top: 2px;
}