/* ==========================================================================
   WhatsON - "Signal" modern polish layer.
   Loaded LAST in every layout so it refines the shared component library
   without editing the phase-by-phase files. Pure presentation: no new markup,
   no class renames. Everything is token-driven and dark-mode aware.
   ========================================================================== */

/* --- Canvas & typography rhythm ------------------------------------------ */
body { background: var(--canvas); letter-spacing: -0.006em; }
body.app { background: var(--canvas); }

h1, h2, h3, h4 { letter-spacing: -0.02em; }

::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

/* Softer, modern scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  transition: background var(--transition), border-color var(--transition),
              box-shadow var(--transition), transform var(--transition), color var(--transition);
  box-shadow: var(--shadow-xs);
}
.btn:active { transform: translateY(0.5px) scale(0.995); }

.btn--primary {
  background: var(--accent-gradient);
  color: var(--accent-fg);
  border-color: transparent;
  box-shadow: var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn--primary:hover {
  background: var(--accent-gradient);
  filter: brightness(1.05) saturate(1.05);
  box-shadow: var(--accent-glow), 0 8px 20px -6px color-mix(in srgb, var(--accent) 60%, transparent);
  transform: translateY(-1px);
}

.btn--ghost, .btn--secondary {
  background: var(--bg);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.btn--ghost:hover, .btn--secondary:hover {
  background: var(--surface);
  border-color: var(--muted);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn--danger { background: var(--danger); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--danger) 55%, transparent); }
.btn--danger:hover { transform: translateY(-1px); }

/* --- Inputs & fields ----------------------------------------------------- */
.input, input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"], input[type="number"],
input[type="date"], input[type="time"], select, textarea {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.input:hover, input:hover, select:hover, textarea:hover { border-color: var(--muted); }
.input:focus, .input:focus-visible,
input:focus, input:focus-visible,
select:focus, select:focus-visible,
textarea:focus, textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.field__label { color: var(--text); font-weight: var(--fw-semibold); }

/* --- Cards & panels ------------------------------------------------------ */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.card h2 { letter-spacing: -0.02em; font-weight: var(--fw-semibold); }

/* Anchored/clickable cards get a gentle lift */
a.card:hover, .card--link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }

/* --- Page header --------------------------------------------------------- */
.page__head h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -0.025em; }

/* ==========================================================================
   Motion - subtle micro-animations across the app. Everything here is disabled
   for users who prefer reduced motion (see the media query at the end).
   ========================================================================== */
@keyframes wxPop  { from { opacity: 0; transform: translateY(-6px) scale(0.985); } }
@keyframes wxFade { from { opacity: 0; transform: translateY(8px); } }
@keyframes wxBar  { from { transform: translateY(-50%) scaleY(0); } }

/* Sidebar collapse / expand: glide the width instead of snapping. */
.shell { transition: grid-template-columns 260ms cubic-bezier(0.4, 0, 0.2, 1); }
.side__collapse, .side__collapse .ic { transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1); }

/* Page content eases in on load. */
.content { animation: wxFade 260ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.op-content { animation: wxFade 260ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* Dropdowns / menus pop in. */
.wsswitch[open] .wsswitch__menu,
.avatar-menu[open] .menu,
.bell__panel:not([hidden]),
.menu:not([hidden]) { animation: wxPop 150ms cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Active-nav accent bar grows in. */
.nav__item.is-active::before { animation: wxBar 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Cards lift a touch faster/smoother on hover (interactive ones). */
a.card, .card--link, .stat, .mkt__feature, .tilecard { will-change: transform; }

/* Modal + toast entrances (refine the existing ones). */
.modal { animation: wxPop 180ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.modal-backdrop { animation: wxFade 160ms ease; }

@media (prefers-reduced-motion: reduce) {
  .shell, .side__collapse, .side__collapse .ic, .content, .op-content,
  .wsswitch__menu, .menu, .bell__panel, .nav__item.is-active::before,
  .modal, .modal-backdrop { animation: none !important; transition: none !important; }
}

/* --- Inline form row alignment ------------------------------------------- */
/* A labelled .field carries a bottom margin so fields stack with spacing. But
   in a HORIZONTAL row (a field next to a button, using align-items:end/center)
   that margin pushes the button ~16px below the input. Zero the margin when the
   field is a direct flex item of such a row so the button lines up with the input. */
.form--inline > .field,
[style*="align-items:end"] > .field,
[style*="align-items: end"] > .field,
[style*="align-items:flex-end"] > .field,
[style*="align-items: flex-end"] > .field,
[style*="align-items:center"] > .field,
[style*="align-items: center"] > .field {
  margin-bottom: 0;
}

/* ==========================================================================
   App shell
   ========================================================================== */
.side {
  background: var(--surface);
  border-right: 1px solid var(--border);
  gap: var(--space-1);
}
:root[data-theme="dark"] .side { background: color-mix(in srgb, var(--surface) 70%, var(--canvas)); }

.brand__mark {
  background: var(--accent-gradient);
  box-shadow: var(--accent-glow);
  border-radius: 9px;
}
.brand__name { font-weight: var(--fw-bold); letter-spacing: -0.02em; }

/* Uploaded client logo (light/dark aware). Shows in place of the "W" mark
   + app name when a brand logo is set in Settings -> Your brand. */
.brand--logo { min-width: 0; }
.brand__img { height: 30px; max-width: 168px; width: auto; object-fit: contain; display: none; }
.brand__img--light { display: block; }
.brand__img--dark { display: none; }
:root[data-theme="dark"] .brand__img--light { display: none; }
:root[data-theme="dark"] .brand__img--dark { display: block; }
/* Collapsed icon-rail: shrink the logo so it fits the 68px rail. */
:root[data-rail] .brand__img { height: 26px; max-width: 40px; }
/* Always-on logo (operator slate rail, sign-in colour panel) - not theme-toggled. */
.brand__img--fixed { display: block; height: 28px; max-width: 168px; width: auto; object-fit: contain; }

/* Collapsed sidebar: make the "expand" control obvious and easy to hit, so the
   menu can always be restored (fixes "no way to maximize the panel"). */
:root[data-rail] .side__head {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}
:root[data-rail] .brand { justify-content: center; }
:root[data-rail] .side__collapse {
  width: 100%;
  height: 34px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--muted);
  box-shadow: var(--shadow-xs);
}
:root[data-rail] .side__collapse:hover {
  background: var(--surface-2);
  color: var(--accent);
  border-color: var(--accent);
}
/* Collapsed sidebar: pop the workspace switcher dropdown out to a readable width
   instead of squeezing the brand names into the 68px rail. */
/* When open, lift the whole rail above the main content so the popped-out menu
   isn't covered by the inbox/list panels (fixes the overlap). */
:root[data-rail] .side:has(.wsswitch[open]) { overflow: visible; z-index: 70; }
:root[data-rail] .wsswitch__menu {
  left: 0; right: auto;
  width: 240px; min-width: 240px;
  box-shadow: var(--shadow-lg);
  z-index: 70;
  background: var(--bg);   /* solid, so content behind never shows through */
}
:root[data-rail] .wsswitch__item { justify-content: flex-start; white-space: nowrap; }

/* Nav items: pill hover, active pill with an accent left indicator */
.nav__item {
  border-radius: 10px;
  position: relative;
  font-weight: var(--fw-medium);
  transition: background var(--transition), color var(--transition);
}
.nav__item .ic { transition: transform var(--transition); }
.nav__item:hover { background: var(--surface-2); }
.nav__item.is-active {
  background: var(--accent-soft);
  color: var(--accent-700);
  font-weight: var(--fw-semibold);
}
.nav__item.is-active::before {
  content: "";
  position: absolute;
  left: 4px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px;
  border-radius: 999px;
  background: var(--accent);
}
:root[data-theme="dark"] .nav__item.is-active { color: var(--accent-200); }
:root[data-rail] .nav__item.is-active::before { display: none; }

/* Workspace switcher */
.wsswitch__cur {
  background: var(--bg);
  border-color: var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.wsswitch__cur:hover { border-color: var(--muted); }
.wsswitch__menu { border-radius: var(--radius); box-shadow: var(--shadow-lg); }

/* --- Top bar ------------------------------------------------------------- */
.topbar {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar__title { font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.searchtrigger { background: var(--surface); border-color: var(--border-strong); border-radius: 10px; transition: border-color var(--transition), background var(--transition); }
.searchtrigger:hover { border-color: var(--accent); background: var(--bg); }
.quota { border-color: var(--border-strong); background: var(--surface); }
.iconbtn { border-radius: 10px; }
.iconbtn:hover { background: var(--surface-2); }
.avatar { background: var(--accent-gradient); box-shadow: var(--accent-glow); }
.menu { border-radius: var(--radius); box-shadow: var(--shadow-lg); }

/* --- Tables -------------------------------------------------------------- */
.table th {
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: var(--fw-semibold);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.table th:first-child { border-top-left-radius: var(--radius-control); }
.table th:last-child { border-top-right-radius: var(--radius-control); }
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover { background: var(--surface); }
.table td { border-bottom: 1px solid var(--border); }

/* Cards-on-canvas tables read better wrapped, but bare tables still look clean */
.card .table th { background: transparent; }

/* --- Stat tiles ---------------------------------------------------------- */
.stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
  position: relative;
  overflow: hidden;
}
.stat::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent-gradient);
  opacity: 0.85;
}
.stat:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.stat__num { letter-spacing: -0.02em; }

/* --- Badges & pills ------------------------------------------------------ */
.pill, .badge { border-radius: var(--radius-pill); font-weight: var(--fw-semibold); }

/* --- Tabs ---------------------------------------------------------------- */
.tabs__tab { font-weight: var(--fw-medium); transition: color var(--transition), border-color var(--transition); }
.tabs__tab:hover { color: var(--text); }

/* --- Empty state --------------------------------------------------------- */
.empty {
  background: var(--bg);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.empty__title { font-weight: var(--fw-semibold); letter-spacing: -0.01em; }

/* ==========================================================================
   Inbox composer: a roomier, more modern typing box (aligned Send button).
   ========================================================================== */
.ibx__composer { background: var(--surface); padding: var(--space-3); }
/* Reply / Private note tabs: add space so they don't touch the message box. */
.ibx__tabs { padding: 0 2px; margin-bottom: var(--space-2); gap: var(--space-1); }
.ibx__composer-row { align-items: flex-end; gap: var(--space-2); }
.ibx__input {
  min-height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 11px 14px;
  background: var(--bg);
  box-shadow: var(--shadow-xs);
  line-height: 1.45;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.ibx__input:hover { border-color: var(--muted); }
.ibx__input:focus, .ibx__input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.ibx__composer-row [data-send-btn] {
  height: 44px;
  min-height: 44px;
  border-radius: 12px;
  padding: 0 var(--space-5);
}

/* --- Website chat / bot channel colour (inbox spine + Channels rail) ------ */
.spine--webchat { --ch: var(--ch-webchat); }
.chan__rail--ch-webchat { background: var(--ch-webchat); }

/* --- Inbox: closed-conversation banner (composer hidden) ----------------- */
.ibx__closed {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-top: 1px solid var(--border); background: var(--surface);
  color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.ibx__closed span { display: inline-flex; align-items: center; gap: 8px; }

/* --- Inbox system line (e.g. "X joined the chat") ------------------------ */
.msg-system { text-align: center; margin: 12px 0; }
.msg-system span { display: inline-block; background: var(--surface-2); color: var(--muted);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: 4px 12px; border-radius: var(--radius-pill); }

/* --- Inbox "Join chat" claim + who's-handling indicator ------------------ */
.ibx__join { box-shadow: var(--accent-glow); }
.ibx__takenby {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted);
  padding: 4px 12px; border-radius: var(--radius-pill); background: var(--surface-2);
  white-space: nowrap;
}
.ibx__takenby::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.ibx__takenby--me { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.ibx__takenby--me::before { background: var(--ok); }

/* --- Brand logo previews (Settings -> Your brand) ------------------------ */
/* Preview a dark-mode logo against a dark chip so a light logo stays visible. */
.imgprev--dark { background: #0D1117; border-color: #0D1117; }

/* --- Alerts -------------------------------------------------------------- */
.alert { border-radius: var(--radius-control); box-shadow: var(--shadow-xs); }

/* --- Modals & toasts ----------------------------------------------------- */
.modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.toast { border-radius: var(--radius-control); box-shadow: var(--shadow-lg); }

/* ==========================================================================
   Auth split-screen: give the brand panel a modern gradient + depth.
   ========================================================================== */
.auth__brand {
  background: var(--accent-gradient) !important;
  position: relative;
  overflow: hidden;
}
.auth__brand::before {
  content: "";
  position: absolute;
  width: 460px; height: 460px;
  right: -160px; top: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 62%);
  pointer-events: none;
}
.auth__brand::after {
  content: "";
  position: absolute;
  width: 360px; height: 360px;
  left: -120px; bottom: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,0.16), transparent 62%);
  pointer-events: none;
}
.auth__logo span { backdrop-filter: blur(4px); }
.auth__value { letter-spacing: -0.02em; }

/* ==========================================================================
   Operator shell: subtle depth on the slate rail (matches modern client feel)
   ========================================================================== */
.op-side { box-shadow: inset -1px 0 0 rgba(255,255,255,0.04); }
.op-nav a { border-radius: 10px; transition: background var(--transition), color var(--transition); }
.op-top { background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 20; }

/* ==========================================================================
   Modern landing / marketing hero (public welcome page)
   ========================================================================== */
.mkt {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 78% -10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
    radial-gradient(900px 480px at 8% 8%, color-mix(in srgb, var(--ch-messenger) 12%, transparent), transparent 55%),
    var(--canvas);
}
.mkt__nav {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.mkt__brand { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--text); letter-spacing: -0.02em; }
.mkt__brand:hover { text-decoration: none; }
.mkt__logo { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-gradient); color: var(--accent-fg); display: grid; place-items: center; font-weight: 700; box-shadow: var(--accent-glow); }
.mkt__navlinks { display: flex; align-items: center; gap: var(--space-2); }

.mkt__hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-8);
  text-align: center;
}
.mkt__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--muted);
  margin-bottom: var(--space-5);
}
.mkt__eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.mkt__title {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: var(--fw-bold);
  margin: 0 auto var(--space-4);
  max-width: 16ch;
}
.mkt__title .grad {
  background: linear-gradient(120deg, var(--accent), var(--ch-instagram));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mkt__lede { font-size: var(--fs-xl); color: var(--muted); max-width: 62ch; margin: 0 auto var(--space-6); line-height: 1.5; }
.mkt__cta { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }

.mkt__channels { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-7); }
.mkt__chan {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-weight: var(--fw-semibold); font-size: var(--fs-sm);
}
.mkt__chan i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.mkt__grid {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-5) var(--space-8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}
.mkt__feature {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.mkt__feature:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.mkt__ficon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  margin-bottom: var(--space-3);
}
.mkt__feature h3 { margin: 0 0 var(--space-1); font-size: var(--fs-lg); letter-spacing: -0.02em; }
.mkt__feature p { margin: 0; color: var(--muted); font-size: var(--fs-md); }

.mkt__foot { max-width: 1120px; margin: 0 auto; padding: var(--space-5); color: var(--muted); font-size: var(--fs-sm); text-align: center; border-top: 1px solid var(--border); }

@media (max-width: 640px) {
  .mkt__navlinks .btn--ghost { display: none; }
  .mkt__hero { padding-top: var(--space-6); }
  .mkt__lede { font-size: var(--fs-lg); }
}