/* ═══════════════════════════════════════════════════════════════════════
   ReplaChat — design system
   ───────────────────────────────────────────────────────────────────────
   Fresh, calm, high-contrast. Indigo carries the brand, teal carries "good
   news", and everything else is a warm-cool neutral so the colour that does
   appear actually means something.

   Every colour is a token on :root and re-declared under [data-theme] so the
   whole app flips to dark without a single component knowing about it.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ReplaChat's own additions to the Repla tokens ───────────────────────
   The colours, type, corners and shadows all come from repla-tokens.css and
   are used by their family names — --rp-accent-strong, --rp-text, --rp-border
   and so on. Read this file beside ReplaMail or ReplaTicket and the same
   colour has the same name.

   There is deliberately NO local alias layer. This file used to map --brand,
   --ink and --line onto the family tokens, which worked but meant the same
   colour had two names depending on which product you were reading. Worse
   here than elsewhere: in ReplaChat "brand" ALREADY means something else —
   every store has its own brand_color, the shop's colour, painted on its chat
   bubble. One word, two meanings, in one codebase.

   What follows is only what the family file has no opinion about, prefixed
   --rc- so it is obvious at a glance that it is ReplaChat's and not shared.

   THE ACCENT RULE, from the token file:
       words touch it        -> --rp-accent-strong
       words do not touch it -> --rp-accent
   Teal at its normal weight is 3.7:1 against white and cannot carry text.
   On navy it goes the other way: --rp-accent-on-dark, because the strong
   step on the family navy is unreadable.
   ──────────────────────────────────────────────────────────────────────── */

:root {
    /* THE OTHER HALF OF THE ACCENT RULE.
       ──────────────────────────────────────────────────────────────────
       The family file covers the accent as a FOREGROUND: words on a surface
       take --rp-accent-strong, and in dark mode that flips to the lighter
       step so it can be read on navy. Correct, and it is what links and badge
       text need.

       It says nothing about the accent as a BACKGROUND. In dark mode
       --rp-accent-strong becomes #2dd4bf — a pale teal — and anything putting
       white text on it goes from 5.2:1 to 1.6:1. That is the agent's own chat
       bubbles, the Send button and the unread count: the three things on the
       screen they look at all day.

       So: this is the colour of text that sits ON the accent. White when the
       accent is dark, the family navy when the accent is pale. Reported to
       the family; until the token file carries it, it lives here. */
    --rc-on-accent:   #ffffff;

    /* A third surface, between --rp-surface-2 and --rp-border, for chips and
       segmented controls. The family file stops at two. */
    --rc-surface-3:   #eef0f6;
    --rc-overlay:     rgba(20, 22, 43, .45);

    /* Navy leading into the product's teal. Used on the sign-in panel and on
       avatars — never at small sizes, where a gradient turns to mud. */
    --rc-gradient:    linear-gradient(135deg, var(--rp-navy) 0%, var(--rp-accent-deep) 100%);
    --rc-glow:        0 8px 24px -6px rgba(13, 148, 136, .40);

    /* The family has three corners; these two are ReplaChat's. */
    --rc-radius-xs:   6px;
    --rc-radius-full: 999px;

    /* The family has two shadow levels. This is a hairline below both. */
    --rc-shadow-xs:   0 1px 2px rgba(20, 22, 43, .05);

    /* Motion. Not in the family file. */
    --rc-fast: 120ms cubic-bezier(.4, 0, .2, 1);
    --rc-base: 200ms cubic-bezier(.4, 0, .2, 1);
    --rc-slow: 320ms cubic-bezier(.32, .72, 0, 1);

    /* Layout of the three-pane inbox. */
    --rc-rail:    68px;
    --rc-list-w:  348px;
    --rc-panel-w: 320px;
    --rc-topbar:  56px;

    /* Each help centre portal paints itself in its own colour; the page sets
       this inline. A sensible default so nothing is unstyled if it does not. */
    --rc-portal:  var(--rp-accent-strong);
}

/* Dark mode comes from the family token file — except for a gap in it.
   ──────────────────────────────────────────────────────────────────────
   repla-tokens.css redefines the surfaces, the text and the lines for dark,
   but NOT the four status tints: --rp-success-soft, --rp-warning-soft,
   --rp-danger-soft and --rp-info-soft keep their light values.

   That is invisible until something puts light text on one of them, which in
   dark mode every one of ours does. The result is pale green on pale green:
   the "we have sent a reset link" box, every status badge, and — worst —
   the PRIVATE NOTE bubble, which is a feature agents use constantly.

   Reported to the family so the token file can carry these. Until it does,
   they are set here, and this block should be deleted the moment it does.
   Values chosen to sit on the family's dark surfaces (#0f1120 / #181b2f) and
   measured against the text colours that go on them, not picked by eye. */
[data-theme="dark"] {
    /* The accent is pale here, so what sits on it must be dark. */
    --rc-on-accent:    var(--rp-navy);

    --rp-success-soft: #10312a;
    --rp-warning-soft: #35270f;
    --rp-danger-soft:  #3a1d1f;
    --rp-info-soft:    #0d2a3d;

    --rc-surface-3: #262a42;
    --rc-overlay:   rgba(0, 0, 0, .6);
}

/* ── reset ───────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--rp-bg);
    color: var(--rp-text);
    font-family: var(--rp-font);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body { overscroll-behavior-y: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.018em; line-height: 1.25; }
h1 { font-size: 26px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
p  { margin: 0 0 12px; }
a  { color: var(--rp-accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; vertical-align: middle; }
[hidden] { display: none !important; }

::selection { background: var(--rp-accent-line); color: var(--rp-text); }

/* scrollbars that do not shout */
* { scrollbar-width: thin; scrollbar-color: var(--rp-border-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--rp-border-2); border-radius: var(--rc-radius-full);
    border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--rp-text-3); background-clip: content-box; }

/* ── typography helpers ──────────────────────────────────────────── */

.muted   { color: var(--rp-text-2); }
.faint   { color: var(--rp-text-3); }
.small   { font-size: 12.5px; }
.tiny    { font-size: 11.5px; }
.strong  { font-weight: 600; }
.mono    { font-family: var(--rp-font-mono); font-size: 12.5px; }
.center  { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.eyebrow {
    font-size: 11px; font-weight: 650; letter-spacing: .09em;
    text-transform: uppercase; color: var(--rp-text-3);
}

/* ── buttons ─────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 15px;
    font: inherit; font-weight: 570; font-size: 13.5px;
    border: 1px solid transparent; border-radius: var(--rp-radius-sm);
    background: var(--rc-surface-3); color: var(--rp-text);
    cursor: pointer; white-space: nowrap;
    transition: background var(--rc-fast), border-color var(--rc-fast),
                transform var(--rc-fast), box-shadow var(--rc-fast), color var(--rc-fast);
    -webkit-user-select: none; user-select: none;
}
.btn:hover { background: var(--rp-border); text-decoration: none; }
.btn:active { transform: translateY(.5px); }
.btn:focus-visible { outline: 2px solid var(--rp-accent); outline-offset: 2px; }
.btn[disabled], .btn.is-loading { opacity: .55; pointer-events: none; }

.btn-primary {
    background: var(--rp-accent-strong); color: var(--rc-on-accent);
    box-shadow: 0 1px 2px rgba(13, 148, 136, .3);
}
.btn-primary:hover { background: var(--rp-accent-deep); box-shadow: var(--rc-glow); }

.btn-ghost { background: transparent; color: var(--rp-text-2); }
.btn-ghost:hover { background: var(--rc-surface-3); }

.btn-outline { background: var(--rp-surface); border-color: var(--rp-border-2); color: var(--rp-text); }
.btn-outline:hover { background: var(--rc-surface-3); border-color: var(--rp-text-3); }

.btn-danger { background: var(--rp-danger); color: #fff; }
.btn-danger:hover { background: #DC2626; }

.btn-soft-danger { background: var(--rp-danger-soft); color: var(--rp-danger); }
.btn-soft-danger:hover { background: #FDDCDC; }

.btn-sm  { padding: 6px 11px; font-size: 12.5px; border-radius: var(--rc-radius-xs); }
.btn-lg  { padding: 12px 22px; font-size: 15px; border-radius: var(--rp-radius); }
.btn-block { width: 100%; }
.btn-icon { padding: 8px; width: 34px; height: 34px; border-radius: var(--rp-radius-sm); }
.btn-icon.btn-sm { width: 28px; height: 28px; padding: 5px; }

/* ── forms ───────────────────────────────────────────────────────── */

.field { margin-bottom: 16px; }
.field-row { display: flex; gap: 12px; }
.field-row > .field { flex: 1; }

label, .label {
    display: block; margin-bottom: 6px;
    font-size: 12.5px; font-weight: 600; color: var(--rp-text-2);
}
.hint { margin-top: 5px; font-size: 12px; color: var(--rp-text-2); line-height: 1.5; }
.hint-error { color: var(--rp-danger); }

input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], input[type=search], input[type=tel], select, textarea {
    width: 100%; padding: 9px 12px;
    font: inherit; font-size: 14px; color: var(--rp-text);
    background: var(--rp-surface); border: 1px solid var(--rp-border-2);
    border-radius: var(--rp-radius-sm);
    transition: border-color var(--rc-fast), box-shadow var(--rc-fast), background var(--rc-fast);
    appearance: none;
}
textarea { resize: vertical; min-height: 84px; line-height: 1.6; }

input:hover, select:hover, textarea:hover { border-color: var(--rp-text-3); }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--rp-accent);
    box-shadow: 0 0 0 3.5px var(--rp-accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--rp-text-3); }
input[disabled], select[disabled], textarea[disabled] {
    background: var(--rc-surface-3); color: var(--rp-text-2); cursor: not-allowed;
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236C7386' d='M6 8 0 1.4 1.4 0 6 4.6 10.6 0 12 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 34px;
}

input[type=color] {
    width: 44px; height: 36px; padding: 3px; cursor: pointer;
    border-radius: var(--rp-radius-sm); border: 1px solid var(--rp-border-2); background: var(--rp-surface);
}

/* switch */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
    position: relative; flex: none; width: 38px; height: 22px;
    background: var(--rp-border-2); border-radius: var(--rc-radius-full);
    transition: background var(--rc-base);
}
.switch-track::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; background: #fff; border-radius: 50%;
    box-shadow: var(--rp-shadow); transition: transform var(--rc-base);
}
.switch input:checked + .switch-track { background: var(--rp-accent-strong); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3.5px var(--rp-accent-soft); }
.switch-label { font-size: 13.5px; font-weight: 500; color: var(--rp-text); }

/* checkbox */
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 3px 0; }
.check input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--rp-accent-strong); flex: none; }
.check span { font-size: 13.5px; color: var(--rp-text); font-weight: 500; }

/* ── cards & surfaces ────────────────────────────────────────────── */

.card {
    background: var(--rp-surface); border: 1px solid var(--rp-border);
    border-radius: var(--rp-radius); box-shadow: var(--rc-shadow-xs);
}
.card-pad { padding: 20px; }
.card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 16px 20px; border-bottom: 1px solid var(--rp-border);
}
.card-body { padding: 20px; }
.card-foot {
    padding: 14px 20px; border-top: 1px solid var(--rp-border);
    background: var(--rp-surface-2);
    border-radius: 0 0 var(--rp-radius) var(--rp-radius);
}

/* ── badges, pills, avatars ──────────────────────────────────────── */

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2.5px 8px; border-radius: var(--rc-radius-full);
    font-size: 11.5px; font-weight: 600; line-height: 1.6;
    background: var(--rc-surface-3); color: var(--rp-text-2);
}
.badge-brand { background: var(--rp-accent-soft); color: var(--rp-accent-deep); }
.badge-green { background: var(--rp-success-soft); color: #047857; }
.badge-amber { background: var(--rp-warning-soft); color: #B45309; }
.badge-red   { background: var(--rp-danger-soft);   color: #B91C1C; }
.badge-teal  { background: var(--rp-accent-soft);  color: #0F766E; }
[data-theme="dark"] .badge-green { color: #34D399; }
[data-theme="dark"] .badge-amber { color: #FBBF24; }
[data-theme="dark"] .badge-red   { color: #F87171; }
[data-theme="dark"] .badge-teal  { color: #2DD4BF; }
[data-theme="dark"] .badge-brand { color: var(--rp-accent-line); }

.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--rp-text-3); }
.dot-online { background: var(--rp-success); box-shadow: 0 0 0 2.5px var(--rp-success-soft); }
.dot-busy   { background: var(--rp-warning); box-shadow: 0 0 0 2.5px var(--rp-warning-soft); }
.dot-offline{ background: var(--rp-text-3); }

.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: none;
    border-radius: var(--rc-radius-full);
    background: var(--rc-gradient); color: #fff;
    font-size: 12px; font-weight: 650; letter-spacing: .02em;
    overflow: hidden; -webkit-user-select: none; user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 26px; height: 26px; font-size: 10.5px; }
.avatar-lg { width: 48px; height: 48px; font-size: 16px; }
.avatar-xl { width: 68px; height: 68px; font-size: 22px; }

/* Store chips get their own colour, which is how five shops stay apart
   at a glance in a shared inbox. */
.store-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px 2px 3px; border-radius: var(--rc-radius-full);
    font-size: 11.5px; font-weight: 600;
    background: var(--rc-surface-3); color: var(--rp-text-2);
    max-width: 150px;
}
.store-chip .swatch {
    width: 16px; height: 16px; border-radius: var(--rc-radius-full); flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 8px; font-weight: 700; color: #fff;
}

/* ── empty states ────────────────────────────────────────────────── */

.empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 56px 28px; text-align: center; color: var(--rp-text-2);
    height: 100%;
}
.empty-art {
    width: 62px; height: 62px; margin-bottom: 16px; border-radius: var(--rp-radius-lg);
    display: grid; place-items: center;
    background: var(--rp-accent-soft); color: var(--rp-accent-strong);
}
.empty h3 { margin-bottom: 6px; color: var(--rp-text); }
.empty p { max-width: 330px; font-size: 13.5px; line-height: 1.6; }

/* ── toast ───────────────────────────────────────────────────────── */

#toasts {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    z-index: 900; display: flex; flex-direction: column; gap: 8px;
    align-items: center; pointer-events: none;
}
.toast {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 16px; border-radius: var(--rc-radius-full);
    background: #171A26; color: #fff;
    font-size: 13.5px; font-weight: 500;
    box-shadow: var(--rp-shadow-lg);
    animation: toast-in var(--rc-slow) both;
    pointer-events: auto; max-width: min(92vw, 460px);
}
.toast-error { background: var(--rp-danger); }
.toast-good  { background: #0F766E; }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
.toast.out { animation: toast-out var(--rc-base) both; }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }

/* ── modal ───────────────────────────────────────────────────────── */

.modal-backdrop {
    position: fixed; inset: 0; z-index: 800;
    background: var(--rc-overlay); backdrop-filter: blur(3px);
    display: grid; place-items: center; padding: 20px;
    animation: fade-in var(--rc-base) both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
    width: 100%; max-width: 520px; max-height: 88vh; overflow: auto;
    background: var(--rp-surface); border-radius: var(--rp-radius-lg);
    box-shadow: var(--rp-shadow-lg);
    animation: modal-in var(--rc-slow) both;
}
.modal-lg { max-width: 720px; }
@keyframes modal-in {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.modal-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 22px 24px 6px;
}
.modal-body { padding: 12px 24px 22px; }
.modal-foot {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 16px 24px; border-top: 1px solid var(--rp-border);
    background: var(--rp-surface-2); border-radius: 0 0 var(--rp-radius-lg) var(--rp-radius-lg);
    position: sticky; bottom: 0;
}

/* ── skeleton loading ────────────────────────────────────────────── */

.skeleton {
    background: linear-gradient(90deg, var(--rc-surface-3) 25%, var(--rp-border) 37%, var(--rc-surface-3) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.3s ease-in-out infinite;
    border-radius: var(--rc-radius-xs);
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}