/* ==========================================================================
   WhatsApp-style (Dark) — design system for the Admin Console
   Mirrors WhatsApp's real surface stack, spacing, radii and interaction
   states. Variable *names* are unchanged from the previous Discord-style
   system on purpose — every rule below and the Tailwind bridge in
   index.html key off these names, so re-theming is a value swap, not a
   rewrite. (Legacy `--discord-*` aliases below are unused by current
   markup but kept for anything still referencing them.)
   ========================================================================== */

:root {
  /* Surfaces — WhatsApp's dark-theme stack */
  --dc-dock: #202C33;
  /* icon rail + inputs */
  --dc-sidebar: #111B21;
  /* chat-list sidebar */
  --dc-chat: #0B141A;
  /* message area */
  --dc-composer: #202C33;
  /* message box */
  --dc-footer: #202C33;
  /* user panel */
  --dc-float: #233138;
  /* tooltips / popouts */
  --dc-modal: #182229;

  /* Interaction states */
  --dc-hover: #202C33;
  --dc-active: #2A3942;
  --dc-msg-hover: #182229;
  --dc-btn-secondary: #2A3942;
  --dc-btn-secondary-hover: #3B4A54;

  /* Brand */
  --dc-blurple: #00A884;
  --dc-blurple-hover: #06CF9C;
  --dc-blurple-active: #008069;
  --dc-green: #25D366;
  --dc-green-hover: #1DA851;
  --dc-yellow: #F0B429;
  --dc-red: #F23F43;
  --dc-red-hover: #DA373C;
  --dc-link: #53BDEB;
  /* Outgoing (agent) chat bubble fill — distinct from --dc-blurple-soft,
     which is used for agent-name accent text, not a bubble background. */
  --dc-bubble-out: #005C4B;

  /* Text */
  --dc-txt-white: #E9EDEF;
  --dc-txt-main: #E9EDEF;
  --dc-txt-muted: #8696A0;
  --dc-txt-faint: #667781;

  --dc-border: #222E35;
  --dc-divider: #222E35;

  --dc-elev-low: 0 1px 0 rgba(4, 4, 5, .2), 0 1.5px 0 rgba(6, 6, 7, .05), 0 2px 0 rgba(4, 4, 5, .05);
  --dc-elev-high: 0 8px 16px rgba(0, 0, 0, .24);
  --dc-elev-modal: 0 0 0 1px rgba(4, 4, 5, .15), 0 8px 16px rgba(0, 0, 0, .24);

  /* Legacy aliases — kept so older markup keeps resolving */
  --discord-dock: var(--dc-dock);
  --discord-sidebar: var(--dc-sidebar);
  --discord-chat: var(--dc-chat);
  --discord-composer: var(--dc-composer);
  --discord-footer: var(--dc-footer);
  --discord-blurple: var(--dc-blurple);
  --discord-blurple-hover: var(--dc-blurple-hover);
  --discord-green: var(--dc-green);
  --discord-yellow: var(--dc-yellow);
  --discord-red: var(--dc-red);
  --discord-txt-white: var(--dc-txt-white);
  --discord-txt-main: var(--dc-txt-main);
  --discord-txt-muted: var(--dc-txt-muted);
  --discord-txt-faint: var(--dc-txt-faint);
  --discord-border: var(--dc-border);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html,
body {
  height: 100%;
  height: 100dvh;
}

body {
  background-color: var(--dc-chat);
  color: var(--dc-txt-main);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.375;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[x-cloak] {
  display: none !important;
}

::selection {
  background: color-mix(in srgb, var(--dc-blurple) 38%, transparent);
  color: #fff;
}

a {
  color: var(--dc-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Discord's focus ring — visible only for keyboard users */
:focus-visible {
  outline: 2px solid var(--dc-link);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Scrollbars — Discord's chunky thumb with a matching track gutter
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-track {
  background: var(--dc-msg-hover);
  border: 4px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--dc-scroll-thumb);
  border: 4px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
  min-height: 40px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--dc-scroll-thumb-hover);
  background-clip: padding-box;
}

/* Thin variant for sidebars and popouts (Discord auto-hides these) */
.dc-thin-scroll::-webkit-scrollbar {
  width: 8px;
}

.dc-thin-scroll::-webkit-scrollbar-track {
  background: transparent;
  border: none;
}

.dc-thin-scroll::-webkit-scrollbar-thumb {
  background: var(--dc-scroll-thumb);
  border: 2px solid transparent;
  border-radius: 4px;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}

.scrollbar-none {
  scrollbar-width: none;
}

/* --------------------------------------------------------------------------
   1. Icon rail (leftmost slim rail — WhatsApp Web's rail of icon buttons)
   -------------------------------------------------------------------------- */
.dc-dock {
  width: 60px;
  background: var(--dc-dock);
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

.dc-dock::-webkit-scrollbar {
  display: none;
}

/* WhatsApp Web's rail has no left accent bar — the icon's own tint carries
   the active state, so this stays permanently collapsed. */
.dc-pill {
  display: none;
}

/* Icon button: a plain glyph that gets a soft rounded-square highlight and
   an accent-coloured icon when hovered/active — no Discord-style fill morph. */
.dc-squircle {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: transparent;
  color: var(--dc-txt-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out;
  overflow: hidden;
}

.dc-squircle:hover {
  background: var(--dc-hover);
  color: var(--dc-txt-main);
}

.dc-server.is-active .dc-squircle {
  background: var(--dc-active);
  color: var(--dc-blurple);
}

.dc-squircle.dc-squircle-green:hover {
  background: var(--dc-hover);
  color: var(--dc-green);
}

.dc-server.is-active .dc-squircle.dc-squircle-green {
  background: var(--dc-active);
  color: var(--dc-green);
}

.dc-dock-sep {
  width: 32px;
  height: 2px;
  background: var(--dc-divider);
  border-radius: 1px;
  margin: 4px auto;
  flex-shrink: 0;
}

/* Black tooltip that flies out to the right */
.dc-tooltip {
  position: absolute;
  left: 68px;
  top: 50%;
  transform: translateY(-50%) scale(.9);
  transform-origin: left center;
  background: var(--dc-float);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  padding: 8px 12px;
  border-radius: 4px;
  box-shadow: var(--dc-elev-high);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s ease, transform .1s ease;
  z-index: 100;
}

.dc-tooltip::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  margin-top: -5px;
  border: 5px solid transparent;
  border-right-color: var(--dc-float);
  border-left: 0;
}

.group:hover>.dc-tooltip,
.dc-server:hover .dc-tooltip {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Unread / mention badge */
.dc-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--dc-red);
  border: 3px solid var(--dc-dock);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   2. Channel sidebar
   -------------------------------------------------------------------------- */
.dc-sidebar {
  background: var(--dc-sidebar);
}

.dc-sidebar-header {
  height: 56px;
  padding: 0 12px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--dc-elev-low);
  color: var(--dc-txt-white);
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.dc-brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--dc-blurple);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Chat-list row — WhatsApp-style: avatar + two-line name/preview, taller
   than the old compact channel-row treatment. */
.dc-channel {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 8px;
  margin: 0 8px 2px 0;
  border-radius: 4px;
  color: var(--dc-txt-muted);
  cursor: pointer;
  position: relative;
  transition: background-color .1s ease, color .1s ease;
}

/* Full chat-list rows (not the compact Active/Resolved/Archive queue rows,
   which keep the !h-8 override) get WhatsApp's roomier row height. */
.dc-channel:not(.\!h-8) {
  height: 64px;
  padding: 0 12px;
  border-radius: 0;
  margin: 0;
  border-bottom: 1px solid var(--dc-divider);
}

.dc-channel:hover {
  background: var(--dc-hover);
  color: var(--dc-txt-main);
}

.dc-channel.is-active {
  background: var(--dc-active);
  color: var(--dc-txt-white);
}

/* Long-press selected row — WhatsApp swaps the avatar for a checkmark */
.dc-channel.is-selected {
  background: color-mix(in srgb, var(--dc-blurple) 12%, transparent);
}

.dc-avatar-check {
  border-radius: 50%;
  background: var(--dc-blurple);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dc-channel .dc-hash {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--dc-txt-faint);
}

.dc-channel:hover .dc-hash,
.dc-channel.is-active .dc-hash {
  color: var(--dc-txt-main);
}

/* Unread channels go bold white with a left dot */
.dc-channel.is-unread {
  color: var(--dc-txt-white);
  font-weight: 600;
}

.dc-channel.is-unread::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: var(--dc-txt-white);
  border-radius: 0 4px 4px 0;
}

.dc-channel-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--dc-green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Sidebar search — WhatsApp's rounded pill with a leading icon */
.dc-search-wrap {
  position: relative;
  padding: 8px 12px 4px;
}

.dc-search-icon {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--dc-txt-faint);
  pointer-events: none;
}

.dc-search {
  width: 100%;
  background: var(--dc-dock);
  border: none;
  border-radius: 18px;
  color: var(--dc-txt-main);
  font-size: 14px;
  padding: 8px 12px 8px 36px;
  transition: box-shadow .15s ease;
}

.dc-search::placeholder {
  color: var(--dc-txt-faint);
}

.dc-search:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--dc-blurple);
}

/* Filter chips — WhatsApp's All/Unread/Groups pill row */
.dc-chip-row {
  display: flex;
  gap: 8px;
  padding: 4px 12px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.dc-chip-row::-webkit-scrollbar {
  display: none;
}

.dc-chip-filter {
  flex-shrink: 0;
  background: var(--dc-dock);
  color: var(--dc-txt-main);
  border: none;
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .1s ease, color .1s ease;
}

.dc-chip-filter.is-active {
  background: color-mix(in srgb, var(--dc-blurple) 16%, transparent);
  color: var(--dc-blurple);
}

/* Archived — same pill as Active/Resolved, just on its own line */
.dc-chip-filter-archive {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Voice-connected style status panel */
/* Bottom user panel */
.dc-userpanel {
  height: 52px;
  background: var(--dc-footer);
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

/* Mobile persistent footer — fixed above the bottom tab bar, a sibling of
   .dc-sidebar so it survives navigating between Chats/Analytics/Feedback/
   Settings (which hide .dc-sidebar entirely on mobile). */
.dc-userpanel-mobile-only {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 56px;
  z-index: 35;
  border-top: 1px solid var(--dc-divider);
}

.dc-userpanel-me {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  min-width: 0;
  transition: background-color .1s ease;
}

.dc-userpanel-me:hover {
  background: var(--dc-hover);
}

.dc-icon-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--dc-txt-main);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color .1s ease, color .1s ease;
}

.dc-icon-btn:hover {
  background: var(--dc-hover);
  color: var(--dc-txt-white);
}

.dc-icon-btn.is-danger:hover {
  color: var(--dc-red);
}

/* Avatar + presence dot */
.dc-avatar {
  border-radius: 50%;
  background: var(--dc-blurple);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  object-fit: cover;
}

.dc-presence {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid var(--dc-footer);
}

.dc-presence.is-online {
  background: var(--dc-green);
}

.dc-presence.is-idle {
  background: var(--dc-yellow);
}

.dc-presence.is-offline {
  background: var(--dc-txt-faint);
}

/* --------------------------------------------------------------------------
   3. Channel header
   -------------------------------------------------------------------------- */
.dc-chan-header {
  height: 48px;
  padding: 0 8px 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--dc-chat);
  box-shadow: var(--dc-elev-low);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.dc-chan-title {
  color: var(--dc-txt-white);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dc-chan-topic {
  color: var(--dc-txt-muted);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.dc-vsep {
  width: 1px;
  height: 24px;
  background: var(--dc-divider);
  flex-shrink: 0;
}

/* Compact header search box (collapsed state in real Discord) */
.dc-header-search {
  width: 144px;
  height: 24px;
  background: var(--dc-dock);
  border: none;
  border-radius: 4px;
  color: var(--dc-txt-main);
  font-size: 13px;
  padding: 0 8px;
  transition: width .2s ease;
}

.dc-header-search::placeholder {
  color: var(--dc-txt-faint);
}

.dc-header-search:focus {
  outline: none;
  width: 240px;
}

/* --------------------------------------------------------------------------
   4. Message list
   -------------------------------------------------------------------------- */
/* Tiled doodle texture over the base tone — evokes WhatsApp's scattered-icon
   wallpaper using our own generic shapes (circle, diamond, triangle, sparkle,
   squiggle, dot), not a reproduction of their actual doodle artwork. A
   neutral mid-gray at low opacity reads on both the light tan and dark
   surface tones, so one SVG works for both themes. */
.dc-chat-scroll {
  background-color: var(--dc-chat);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23808080' stroke-width='1.2' opacity='0.16'%3E%3Ccircle cx='14' cy='18' r='5'/%3E%3Crect x='68' y='8' width='11' height='11' transform='rotate(45 73.5 13.5)'/%3E%3Cpolygon points='96,64 103,77 89,77'/%3E%3Cpath d='M22 88q5-7 10 0q5 7 10 0'/%3E%3Cpath d='M54 46l3.5-7 3.5 7 7 3.5-7 3.5-3.5 7-3.5-7-7-3.5z'/%3E%3Cpath d='M78 100q12-12 18 0'/%3E%3Ccircle cx='30' cy='60' r='1.6' fill='%23808080' stroke='none'/%3E%3Ccircle cx='105' cy='30' r='1.6' fill='%23808080' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
  display: flex;
  flex-direction: column;
}


/* Empty pane mark — a soft circle behind the product glyph */
.dc-empty-mark {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--dc-composer);
  color: var(--dc-txt-faint);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Date divider — centred label over a hairline */
.dc-date-divider {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 24px 16px 8px;
  border-top: 1px solid var(--dc-divider);
  height: 0;
}

.dc-date-divider span {
  margin: 0 auto;
  transform: translateY(-50%);
  background: var(--dc-chat);
  padding: 0 4px;
  color: var(--dc-txt-muted);
  font-size: 12px;
  font-weight: 600;
}

/* Start-of-conversation notice — WhatsApp's soft warm pill */
.dc-convo-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 420px;
  margin: 0 auto 16px;
  padding: 10px 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--dc-yellow) 16%, var(--dc-composer));
  color: var(--dc-txt-main);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

.dc-convo-notice svg {
  margin-top: 1px;
  color: var(--dc-yellow);
}

/* Message row — WhatsApp-style: no per-message name/avatar, bubbles align
   left (visitor) or right (agent), timestamp + read ticks live inside the
   bubble. Consecutive same-sender bubbles sit close together. */
.dc-msg-row {
  display: flex;
  padding: 0 16px;
  margin-top: 10px;
  position: relative;
}

.dc-msg-row.is-grouped {
  margin-top: 2px;
}

.dc-msg-row.is-out {
  justify-content: flex-end;
}

.dc-msg-row.is-in {
  justify-content: flex-start;
}

.dc-msg-bubble {
  display: flex;
  flex-direction: column;
  max-width: 65%;
  min-width: 64px;
  padding: 6px 9px 6px 9px;
  border-radius: 8px;
  font-size: 14.5px;
  line-height: 1.4;
  position: relative;
}

.dc-msg-bubble.is-in {
  background: var(--dc-composer);
  color: var(--dc-txt-main);
  border-radius: 2px 8px 8px 8px;
}

.dc-msg-bubble.is-out {
  background: var(--dc-bubble-out);
  color: var(--dc-txt-main);
  border-radius: 8px 2px 8px 8px;
}

/*
 * pre-wrap belongs on the text node only — Alpine renders nothing for a
 * <template>, but the whitespace text nodes around them are real, so without
 * this every message painted extra blank lines before its content.
 */
.dc-msg-text {
  white-space: pre-wrap;
}

/* Time + read ticks — its own line at the bottom of the bubble, right-aligned.
   (WhatsApp inlines a short timestamp beside the last line of text; a
   dedicated line trades a few px of height for never overlapping content,
   including images/cards where an inline trailing time makes no sense.) */
.dc-msg-meta {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  font-size: 10.5px;
  opacity: .65;
  white-space: nowrap;
}

.dc-msg-ticks {
  display: inline-flex;
  color: currentColor;
}

.dc-msg-ticks.is-read {
  color: #53bdeb;
  opacity: 1;
}

/* Same read/delivered ticks, shown before the last-message preview in the
   conversation list when that last message was sent by an agent. */
.dc-list-ticks {
  display: inline-flex;
  color: var(--dc-txt-faint);
}

.dc-list-ticks.is-read {
  color: #53bdeb;
}

/* Quoted-message snippet shown inside a bubble that's a reply, and the
   matching preview strip above the composer while composing one. */
.dc-msg-quote {
  border-left: 3px solid var(--dc-green);
  background: rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: 4px;
  cursor: pointer;
  overflow: hidden;
}

.dc-msg-bubble.is-in .dc-msg-quote {
  background: rgba(0, 0, 0, 0.06);
}

.dc-msg-quote-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--dc-green);
}

.dc-msg-quote-body {
  font-size: 12px;
  color: var(--dc-txt-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dc-reply-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin: 0 0 8px;
  background: var(--dc-composer);
  border-radius: 8px;
}

.dc-reply-preview-bar {
  align-self: stretch;
  width: 3px;
  border-radius: 2px;
  background: var(--dc-green);
  flex-shrink: 0;
}

.dc-reply-preview-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--dc-green);
}

.dc-reply-preview-body {
  font-size: 12px;
  color: var(--dc-txt-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Brief flash when in-chat search scrolls a message into view */
.dc-msg-highlight .dc-msg-bubble {
  animation: dc-msg-flash 1.5s ease;
}

@keyframes dc-msg-flash {
  0%, 100% { box-shadow: none; }
  20% { box-shadow: 0 0 0 2px var(--dc-blurple); }
}

/* System / bot tag (used for the macro category chip) */
.dc-tag {
  background: var(--dc-blurple);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border-radius: 3px;
  padding: 1px 4px;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Floating hover toolbar — sits above the bubble */
.dc-msg-actions {
  display: none;
  position: absolute;
  top: -16px;
  background: var(--dc-chat);
  border: 1px solid rgba(78, 80, 88, .48);
  border-radius: 4px;
  box-shadow: var(--dc-elev-high);
  overflow: hidden;
  z-index: 20;
}

.dc-msg-row.is-out .dc-msg-actions {
  right: 16px;
}

.dc-msg-row.is-in .dc-msg-actions {
  left: 16px;
}

.dc-msg-row:hover .dc-msg-actions {
  display: flex;
  align-items: center;
}

.dc-msg-action {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dc-txt-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color .1s ease, color .1s ease;
}

.dc-msg-action:hover {
  background: var(--dc-msg-hover);
  color: var(--dc-txt-white);
}

.dc-msg-action.is-danger:hover {
  color: var(--dc-red);
}

/* Attachment bubbles — image / file / rich-card content, same left/right
   alignment as text bubbles but without the padded-text treatment. */
.dc-attachment-bubble {
  max-width: 320px;
  border-radius: 8px;
  overflow: hidden;
}

.dc-file-bubble {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  max-width: 320px;
}

.dc-rich-card-bubble {
  padding: 2px;
  max-width: 320px;
}

/* Typing indicator dots */
.dc-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dc-txt-muted);
  animation: dc-typing 1.4s infinite ease-in-out;
}

.dc-typing-dot:nth-child(2) {
  animation-delay: .2s;
}

.dc-typing-dot:nth-child(3) {
  animation-delay: .4s;
}

@keyframes dc-typing {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: .55;
  }

  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   5. Composer
   -------------------------------------------------------------------------- */
.dc-composer-wrap {
  padding: 0 16px 24px;
  background: var(--dc-chat);
  flex-shrink: 0;
}

.dc-composer {
  background: var(--dc-composer);
  border-radius: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  min-height: 48px;
  transition: box-shadow .15s ease, background-color .15s ease;
}

.dc-composer.is-note {
  background: color-mix(in srgb, var(--dc-yellow) 18%, var(--dc-composer));
  box-shadow: 0 0 0 1px var(--dc-yellow);
}

.dc-composer-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--dc-txt-main);
  font-size: 16px;
  padding: 11px 0;
  min-width: 0;
}

.dc-composer-input::placeholder {
  color: var(--dc-txt-faint);
}

.dc-composer-input:focus {
  outline: none;
}

/* Round grey "+" upload affordance */
.dc-composer-plus {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--dc-txt-muted);
  color: var(--dc-composer);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 400;
  line-height: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .1s ease;
}

.dc-composer-plus:hover {
  background: var(--dc-txt-main);
}

.dc-composer-icon {
  color: var(--dc-txt-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color .1s ease, transform .1s ease;
}

.dc-composer-icon:hover {
  color: var(--dc-txt-main);
  transform: scale(1.1);
}

/* Send button — a separate circular button outside the pill, WhatsApp-style */
.dc-composer-send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--dc-blurple);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: filter .1s ease;
}

.dc-composer-send:hover {
  filter: brightness(1.05);
}

/* Quick-reply chips above the composer */
.dc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  background: var(--dc-composer);
  color: var(--dc-txt-main);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: background-color .1s ease, color .1s ease;
}

.dc-chip:hover {
  background: var(--dc-blurple);
  color: #fff;
}

.dc-chip.is-green:hover {
  background: var(--dc-green);
}

.dc-chip.is-yellow:hover {
  background: var(--dc-yellow);
  color: var(--dc-float);
}

/* Slash-command / macro autocomplete popout */
.dc-autocomplete {
  background: var(--dc-sidebar);
  border-radius: 8px;
  box-shadow: var(--dc-elev-modal);
  overflow: hidden;
}

.dc-autocomplete-header {
  padding: 8px 12px;
  color: var(--dc-txt-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--dc-sidebar);
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.dc-autocomplete-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--dc-txt-main);
  border-left: 2px solid transparent;
}

.dc-autocomplete-item:hover,
.dc-autocomplete-item.is-selected {
  background: var(--dc-active);
  border-left-color: var(--dc-blurple);
  color: var(--dc-txt-white);
}

/* --------------------------------------------------------------------------
   6. Member list (right drawer)
   -------------------------------------------------------------------------- */
.dc-members {
  background: var(--dc-sidebar);
}

.dc-member-heading {
  padding: 24px 8px 4px 16px;
  color: var(--dc-txt-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.dc-member {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1px 8px;
  height: 42px;
  margin: 0 8px;
  border-radius: 4px;
  color: var(--dc-txt-muted);
  cursor: pointer;
  transition: background-color .1s ease, color .1s ease;
}

.dc-member:hover {
  background: var(--dc-hover);
  color: var(--dc-txt-main);
}

/* Data tile used through the member/details drawer */
.dc-tile {
  background: var(--dc-dock);
  border-radius: 8px;
  padding: 10px;
}

.dc-tile-label {
  color: var(--dc-txt-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.dc-tile-value {
  color: var(--dc-txt-white);
  font-size: 13px;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   7. Cards, forms, buttons — Discord "User Settings" language
   -------------------------------------------------------------------------- */
.discord-card,
.dc-card {
  background: var(--dc-sidebar);
  border-radius: 8px;
  padding: 16px;
}

.dc-card-title {
  color: var(--dc-txt-white);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 16px;
}

.dc-label {
  display: block;
  color: var(--dc-txt-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 8px;
}

.discord-input,
.dc-input,
.dc-select,
.dc-textarea {
  width: 100%;
  background: var(--dc-dock);
  border: 1px solid var(--dc-border);
  color: var(--dc-txt-main);
  border-radius: 4px;
  padding: 10px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s ease;
}

.discord-input::placeholder,
.dc-input::placeholder,
.dc-textarea::placeholder {
  color: var(--dc-txt-faint);
}

.discord-input:focus,
.dc-input:focus,
.dc-select:focus,
.dc-textarea:focus {
  outline: none;
  border-color: var(--dc-blurple);
}

.dc-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23949BA4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
  cursor: pointer;
}

.dc-textarea {
  resize: none;
}

.discord-btn-primary,
.dc-btn {
  background: var(--dc-blurple);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 3px;
  padding: 8px 16px;
  min-height: 38px;
  border: none;
  cursor: pointer;
  transition: background-color .17s ease;
}

.discord-btn-primary:hover,
.dc-btn:hover {
  background: var(--dc-blurple-hover);
}

.discord-btn-primary:active,
.dc-btn:active {
  background: var(--dc-blurple-active);
}

.discord-btn-secondary,
.dc-btn-secondary {
  background: var(--dc-btn-secondary);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 3px;
  padding: 8px 16px;
  min-height: 38px;
  border: none;
  cursor: pointer;
  transition: background-color .17s ease;
}

.discord-btn-secondary:hover,
.dc-btn-secondary:hover {
  background: var(--dc-btn-secondary-hover);
}

.dc-btn-success {
  background: var(--dc-green);
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .17s ease;
}

.dc-btn-success:hover {
  background: var(--dc-green-hover);
}

.dc-btn-danger {
  background: var(--dc-red);
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .17s ease;
}

.dc-btn-danger:hover {
  background: var(--dc-red-hover);
}

.dc-btn-ghost {
  background: transparent;
  color: var(--dc-txt-main);
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 3px;
  cursor: pointer;
}

.dc-btn-ghost:hover {
  text-decoration: underline;
}

/* Discord's pill switch */
.dc-switch {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 12px;
  background: var(--dc-txt-faint);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background-color .17s ease;
  flex-shrink: 0;
}

.dc-switch::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .17s ease;
}

.dc-switch.is-on {
  background: var(--dc-green);
}

.dc-switch.is-on::after {
  transform: translateX(16px);
}

/* Range slider */
input[type="range"].dc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--dc-dock);
  outline: none;
}

input[type="range"].dc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .3);
  cursor: pointer;
  box-shadow: var(--dc-elev-low);
}

/* Tables (blocked visitors etc.) */
.dc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.dc-table thead th {
  color: var(--dc-txt-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-align: left;
  padding: 8px 0;
  border-bottom: 1px solid var(--dc-divider);
}

.dc-table tbody td {
  padding: 12px 0;
  color: var(--dc-txt-main);
  border-bottom: 1px solid rgba(63, 65, 71, .4);
}

/* Section separator used inside settings */
.dc-hr {
  height: 1px;
  background: var(--dc-divider);
  border: none;
  margin: 24px 0;
}

/* --------------------------------------------------------------------------
   8. Popouts, modals, context menus
   -------------------------------------------------------------------------- */
.dc-popout {
  background: var(--dc-float);
  border-radius: 4px;
  box-shadow: var(--dc-elev-modal);
  padding: 8px;
  z-index: 60;
}

.dc-popout-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 2px;
  color: var(--dc-txt-main);
  font-size: 14px;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}

.dc-popout-item:hover {
  background: var(--dc-blurple);
  color: #fff;
}

.dc-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 70;
  padding: 16px;
}

.dc-modal {
  background: var(--dc-modal);
  border-radius: 4px;
  box-shadow: var(--dc-elev-modal);
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dc-modal-header {
  padding: 16px;
  color: var(--dc-txt-white);
  font-size: 20px;
  font-weight: 600;
  flex-shrink: 0;
}

.dc-modal-body {
  padding: 0 16px 16px;
  overflow-y: auto;
}

.dc-modal-footer {
  padding: 16px;
  background: var(--dc-sidebar);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.dc-keycap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 2px 6px;
  background: var(--dc-dock);
  border: 1px solid var(--dc-float);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--dc-txt-main);
  font-size: 12px;
  font-weight: 600;
}

/* Column resize handles */
.dc-resizer {
  width: 4px;
  margin: 0 -2px;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  z-index: 5;
  transition: background-color .15s ease;
}

.dc-resizer:hover,
.dc-resizer:active {
  background: var(--dc-blurple);
}

/* --------------------------------------------------------------------------
   9. Motion — kept subtle, and fully disabled under reduced-motion
   -------------------------------------------------------------------------- */
.dc-pulse-ring {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dc-green);
  position: relative;
  flex-shrink: 0;
}

.dc-pulse-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--dc-green);
  animation: dc-pulse 1.8s infinite ease-out;
}

@keyframes dc-pulse {
  0% {
    transform: scale(1);
    opacity: .55;
  }

  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

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

/* --------------------------------------------------------------------------
   10. Responsive — Discord collapses the member list, then the sidebar
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .dc-members {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Mobile layout (<= 768px)

   The shell is a fixed horizontal flex: dock (72px) + sidebar (resizable, ~280px)
   + main. On a phone those two fixed columns consume the whole viewport and the
   flex-1 main column collapses to 0px, making the chat invisible.

   Below 768px we switch to a master-detail pattern: the conversation list fills
   the screen, and selecting a conversation swaps it for the thread. The icon
   rail (desktop-only, WhatsApp Web style) is replaced by a bottom tab bar
   (WhatsApp Android style, see .dc-bottom-tabs below) so the
   Inbox/Analytics/Feedback/Settings nav survives in a mobile-native shape.
   The .dc-mobile-list / .dc-mobile-detail class is set on the shell by Alpine.
--------------------------------------------------------------------------- */

.dc-mobile-back {
  display: none;
}

/* Bottom tab bar, FAB, and the mobile-only footer: hidden by default
   (desktop uses the icon rail + the in-sidebar footer instead). */
.dc-bottom-tabs,
.dc-bottom-fab,
.dc-userpanel-mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .dc-dock {
    display: none !important;
  }

  .dc-userpanel-desktop-only {
    display: none !important;
  }

  /* The tab bar and footer persist across every top-level view (Chats,
     Analytics, Feedback, Settings) — like WhatsApp's bottom nav — and only
     disappear once an actual conversation thread is open (.dc-thread-open). */
  .dc-mobile-list .dc-bottom-tabs,
  .dc-mobile-detail:not(.dc-thread-open) .dc-bottom-tabs {
    display: flex;
  }

  .dc-mobile-list .dc-userpanel-mobile-only,
  .dc-mobile-detail:not(.dc-thread-open) .dc-userpanel-mobile-only {
    display: flex;
  }

  .dc-mobile-list .dc-bottom-fab {
    display: flex;
  }

  /* Reserve room at the bottom of scrollable content so the fixed footer +
     tab bar (52px + 56px) never covers the last row / last bit of content. */
  .dc-scroll-pad-mobile {
    padding-bottom: 108px !important;
  }

  /* Drag-to-resize handles are meaningless on touch and steal layout width. */
  .dc-resizer {
    display: none !important;
  }

  /* Let both panes fill whatever the dock leaves instead of holding a fixed px. */
  .dc-sidebar,
  .dc-main {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    flex: 1 1 auto !important;
  }

  .dc-mobile-list .dc-main {
    display: none !important;
  }

  .dc-mobile-detail .dc-sidebar {
    display: none !important;
  }

  .dc-mobile-back {
    display: inline-flex !important;
  }

  /* Header is tight at this width; drop the secondary description line. */
  .dc-chan-topic,
  .dc-vsep {
    display: none !important;
  }

  .dc-chan-header {
    padding-left: 8px;
    padding-right: 8px;
    gap: 6px;
  }

  .dc-chan-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Comfortable touch targets. */
  .dc-icon-btn {
    min-width: 36px;
    min-height: 36px;
  }

  .dc-composer-wrap {
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .dc-composer-input,
  .dc-input,
  input,
  textarea {
    font-size: 16px !important;
  }

  /* Right drawer (member list) hides on mobile. */
  .dc-members {
    display: none !important;
  }

  /* Content views: tighter padding on mobile. */
  .dc-main > [class*="p-6"] {
    padding: 16px !important;
  }
}

/* ---------------------------------------------------------------------------
   Bottom tab bar (mobile) — WhatsApp Android's 4-tab nav + FAB. Only shown
   below 768px, and only in list mode (see the media query above).
   -------------------------------------------------------------------------- */
.dc-bottom-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--dc-dock);
  border-top: 1px solid var(--dc-divider);
  align-items: stretch;
  z-index: 40;
}

.dc-tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: none;
  color: var(--dc-txt-muted);
  cursor: pointer;
  position: relative;
}

.dc-tab-item svg {
  width: 22px;
  height: 22px;
}

.dc-tab-item span {
  font-size: 10px;
  font-weight: 600;
}

.dc-tab-item.is-active {
  color: var(--dc-blurple);
}

.dc-tab-badge {
  position: absolute;
  top: 2px;
  right: calc(50% - 20px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--dc-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dc-bottom-fab {
  position: fixed;
  right: 16px;
  /* Clears the fixed tab bar (56px) + the fixed footer above it (52px) + a gap. */
  bottom: calc(56px + 52px + env(safe-area-inset-bottom) + 12px);
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--dc-blurple);
  color: #fff;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
  cursor: pointer;
  z-index: 40;
}

/* ---------------------------------------------------------------------------
   Theming

   Every colour in the panel resolves to one of these variables — the Tailwind
   palette in index.html points at them too — so a theme is just a different
   value block. Dark is the default; light applies when <html> carries
   data-theme="light", which index.html sets before first paint.

   Never hardcode a hex in a rule body; it would be locked to one theme.
--------------------------------------------------------------------------- */

:root {
  --dc-txt-bright: #D1D7DB;
  --dc-blurple-soft: #53DDB0;
  --dc-red-soft: #FA777C;
  --dc-scroll-thumb: #2A3942;
  --dc-scroll-thumb-hover: #3B4A54;
}

html[data-theme="light"] {
  /* Surfaces — WhatsApp Web's light stack, wallpaper tan for the thread area */
  --dc-dock: #F0F2F5;
  --dc-sidebar: #FFFFFF;
  --dc-chat: #EFEAE2;
  --dc-composer: #F0F2F5;
  --dc-footer: #F0F2F5;
  --dc-float: #FFFFFF;
  --dc-modal: #FFFFFF;

  /* Interaction states */
  --dc-hover: #F5F6F6;
  --dc-active: #E9EDEF;
  --dc-msg-hover: #F5F6F6;
  --dc-btn-secondary: #E9EDEF;
  --dc-btn-secondary-hover: #D1D7DB;

  /* Brand */
  --dc-blurple: #008069;
  --dc-blurple-hover: #06705C;
  --dc-blurple-active: #005C4B;
  --dc-blurple-soft: #D9FDD3;
  --dc-green: #25D366;
  --dc-green-hover: #1DA851;
  --dc-yellow: #B4690E;
  --dc-red: #D83C3E;
  --dc-red-hover: #A12D2F;
  --dc-red-soft: #D83C3E;
  --dc-link: #027EB5;
  --dc-bubble-out: #D9FDD3;

  /* Text */
  --dc-txt-white: #111B21;
  --dc-txt-main: #111B21;
  --dc-txt-bright: #3B4A54;
  --dc-txt-muted: #667781;
  --dc-txt-faint: #8696A0;

  --dc-border: #E9EDEF;
  --dc-divider: #E9EDEF;

  --dc-scroll-thumb: #D1D7DB;
  --dc-scroll-thumb-hover: #B0B7BC;

  --dc-elev-low: 0 1px 0 rgba(6, 6, 7, .08), 0 1.5px 0 rgba(6, 6, 7, .03), 0 2px 0 rgba(6, 6, 7, .03);
  --dc-elev-high: 0 8px 16px rgba(6, 6, 7, .12);
  --dc-elev-modal: 0 0 0 1px rgba(6, 6, 7, .08), 0 8px 16px rgba(6, 6, 7, .12);
}

/* Left over from the old Discord fill-style active state (solid colour bg
   needing a white glyph). The current WhatsApp-style rail tints the glyph
   itself (see .dc-server.is-active .dc-squircle above) instead of filling
   the background, so no theme-specific override is needed here. */