/* Syntra Social - visual identity
   One message goes out, many channels receive it - the palette and the
   node/signal motif throughout (connect.php, compose.php) both lean on that.
   Light and dark themes share the same variable names below, so every page
   in the app inherits both automatically - see partials/header.php for how
   the active theme is chosen and toggled. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
    --bg: #F2F4F7;
    --surface: #FFFFFF;
    --surface-raised: #FFFFFF;
    --sidebar-bg: #FFFFFF;
    --line: #E3E7EC;
    --text: #14161A;
    --muted: #6B7280;
    --signal: #0066FF;      /* primary/brand */
    --signal-hover: #0052CC;
    --signal-dim: #E1EBFF;
    --bubble-in: #EEF1F5;   /* incoming message bubble - distinct from the now-white surfaces */
    --live: #22C55E;        /* green - success / connected */
    --danger: #DC2626;
    --amber: #D97706;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow-sm: 0 1px 2px rgba(20,22,26,.05);
    --shadow-md: 0 6px 20px rgba(20,22,26,.07);
    --shadow-lg: 0 16px 40px rgba(20,22,26,.12);
    color-scheme: light;
}

[data-theme="dark"] {
    --bg: #0B0D12;
    --surface: #15181F;
    --surface-raised: #1C2029;
    --bubble-in: #1C2029;
    --sidebar-bg: #10131A;
    --line: #272C36;
    --text: #F1F2F4;
    --muted: #8B92A0;
    --signal: #3D8BFF;
    --signal-hover: #6BA6FF;
    --signal-dim: #17335E;
    --live: #34D399;
    --danger: #F87171;
    --amber: #FBBF24;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --shadow-md: 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg: 0 20px 48px rgba(0,0,0,.45);
    color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    transition: background-color .15s ease, color .15s ease;
}

h1, h2, h3, .display {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 .4em;
}
h1.display { color: var(--text); }

/* Small "powered by" line at the bottom of every app page's content - see
   partials/footer.php. Sits inside .main so it scrolls with the page and
   stays clear of the fixed mobile tab bar, rather than a page-wide bar. */
.app-footer-note {
    margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line);
    color: var(--muted); font-size: .8rem; text-align: center;
}
.app-footer-note strong { color: var(--text); font-weight: 600; }

a { color: var(--signal); text-decoration: none; }
a:hover { color: var(--signal-hover); text-decoration: underline; }

.shell {
    display: flex;
    min-height: 100vh;
}

/* ---- Sidebar ---- */
.sidebar {
    width: 224px;
    flex-shrink: 0;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--line);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
}
.brand {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
}
.brand .dot {
    background: linear-gradient(135deg, var(--signal), var(--signal-hover));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.logo-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 9px; margin-right: 8px;
    object-fit: contain; flex-shrink: 0;
}
.nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 999px;
    color: var(--text);
    font-weight: 500;
    font-size: .92rem;
    margin-bottom: 2px;
    transition: background-color .15s ease, color .15s ease;
}
.nav-icon { width: 17px; height: 17px; flex-shrink: 0; opacity: .75; transition: opacity .15s ease; }
.nav a:hover { background: var(--surface-raised); text-decoration: none; }
.nav a.active { background: var(--signal); color: #fff; font-weight: 600; box-shadow: var(--shadow-sm); }
.nav a.active .nav-icon { opacity: 1; }
.nav-section {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
    font-weight: 700; margin: 16px 14px 4px; font-family: 'Space Grotesk', sans-serif;
}
.nav-badge {
    margin-left: auto; background: var(--danger); color: #fff; font-size: .68rem; font-weight: 700;
    padding: 1px 7px; border-radius: 999px; line-height: 1.5;
}
.nav a.active .nav-badge { background: #fff; color: var(--signal); }
.sidebar-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.sidebar-footer a { color: var(--muted); }

/* ---- Top-right utility bar (Settings / account menu) ---- */
.topbar { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 40px 0; }
.dropdown { position: relative; }
.dropdown-toggle {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 7px 12px; font-family: inherit; font-size: .85rem; color: var(--text); cursor: pointer;
    display: flex; align-items: center; gap: 5px;
}
.dropdown-toggle:not(.btn):hover { background: var(--surface-raised); }
.dropdown-menu {
    display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 50;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md); min-width: 190px; padding: 6px;
}
.dropdown-menu.open { display: block; }
.dropdown-menu.left { left: 0; right: auto; }
.dropdown-menu a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--text); font-size: .87rem; }
.dropdown-menu a:hover { background: var(--surface-raised); text-decoration: none; }

/* ---- Theme toggle ---- */
.theme-toggle {
    display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
    padding: 4px; background: var(--surface-raised); border-radius: 999px; border: 1px solid var(--line);
}
.theme-toggle button {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 6px 4px; border: none; border-radius: 999px; background: transparent; color: var(--muted);
    font-family: inherit; font-size: .74rem; font-weight: 600; cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.theme-toggle button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.theme-toggle svg { width: 13px; height: 13px; }

/* ---- Main ---- */
.main { flex: 1; padding: 32px 40px; max-width: none; width: 100%; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.page-header p { color: var(--muted); margin: 4px 0 0; }

/* ---- Dashboard ---- */
.hero {
    background: linear-gradient(135deg, var(--signal), #3B8CFF 60%, #5FA8FF);
    border-radius: var(--radius); padding: 28px 32px; color: #fff; margin: 20px 0;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
    box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.hero::after { content: ''; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; }
.hero h1 { color: #fff; font-size: 1.7rem; margin-bottom: 4px; }
.hero p { color: rgba(255,255,255,.85); margin: 0; }
.hero .btn { background: #fff; color: var(--signal); box-shadow: none; position: relative; z-index: 1; }
.hero .btn:hover { color: var(--signal); }
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: flex; align-items: center; gap: 12px; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; text-decoration: none; color: inherit; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--signal-dim); text-decoration: none; }
.stat-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-num { font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem; font-weight: 700; line-height: 1; }
.stat-label { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.section-title h3 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 0; }
.channel-pill { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); transition: transform .15s ease, background-color .15s ease; text-decoration: none; color: inherit; }
.channel-pill:hover { background: var(--signal-dim); transform: translateY(-1px); text-decoration: none; }
.channel-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); margin-left: 4px; flex-shrink: 0; }
@media (max-width: 900px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stat-strip { grid-template-columns: 1fr; } .hero { padding: 22px; } }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.card:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--signal) 25%, var(--line)); }

.btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--signal), var(--signal-hover));
    color: #FFFFFF;
    border: none;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    font-size: .9rem;
    font-family: inherit;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s ease, transform .12s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.06); text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); filter: brightness(.98); }
.btn.secondary { background: var(--surface-raised); color: var(--text); border: 1px solid var(--line); box-shadow: none; }
.btn.secondary:hover { background: var(--surface); border-color: var(--signal); box-shadow: var(--shadow-sm); }
.btn.danger { background: var(--danger); color: #FFFFFF; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; filter: none; }
/* a:hover (below, global link styling) has higher specificity than .btn's
   own color and was winning on any <a class="btn">, turning an active blue
   tab's white text blue-on-blue (invisible) on hover, and a secondary tab's
   dark text blue too. Reassert the button's own colors explicitly. */
a.btn:hover { color: #FFFFFF; text-decoration: none; }
a.btn.secondary:hover { color: var(--text); text-decoration: none; }

input, textarea, select {
    width: 100%;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 10px 12px;
    font-family: inherit;
    font-size: .92rem;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.inbox-search {
    display: flex; align-items: center; gap: 4px; margin: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
    padding: 3px 3px 3px 14px;
}
.inbox-search input[type="search"] {
    border: none; background: transparent; padding: 6px 0; width: 140px; font-size: .85rem;
}
.inbox-search input[type="search"]:focus { outline: none; box-shadow: none; }
.inbox-search-btn {
    width: 30px; height: 30px; border-radius: 50%; border: none; flex-shrink: 0;
    background: var(--signal); color: #fff; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: filter .15s ease;
}
.inbox-search-btn:hover { filter: brightness(1.08); }
@media (max-width: 640px) { .inbox-search input[type="search"] { width: 110px; } }
input[type="checkbox"], input[type="radio"] {
    width: auto;
    padding: 0;
    background: none;    border: none;
    vertical-align: middle;
    accent-color: var(--signal);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-dim); }
label { display: block; font-size: .82rem; color: var(--muted); margin: 12px 0 6px; }
label:first-child { margin-top: 0; }
/* Paired-field rows (e.g. "Campaign name / Send as agent", "Cc / Bcc") sit
   in a flex/grid div together. Only the row's first label is ":first-child"
   of that div, so without this, every field after the first still carries
   the default 12px top margin and sits visibly lower than the first field -
   the same field, on the same row, at two different heights. Zeroing it for
   every label after the first in this layout keeps the whole row flush. */
[style*="display:flex"] > label:not(:first-child),
[style*="display:grid"] > label:not(:first-child) { margin-top: 0; }
label:has(input[type="checkbox"]), label:has(input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---- Signal nodes (connected accounts) ---- */
.node-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.node {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    background: var(--surface-raised);
    position: relative;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.node:hover { border-color: var(--signal); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.node a:hover { text-decoration: none; }
.node .platform-name { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.node .account-name { font-weight: 600; margin: 4px 0 10px; }
.channel-icon {
    width: 34px; height: 34px; border-radius: var(--radius-sm); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid currentColor; background: color-mix(in srgb, currentColor 8%, transparent);
}
.pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--live);
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(5, 150, 105, .6);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(5, 150, 105, .5); }
    70%  { box-shadow: 0 0 0 8px rgba(5, 150, 105, 0); }
    100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

.platform-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.platform-tile {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    background: var(--surface-raised);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.platform-tile:hover { border-color: var(--signal); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.platform-tile .swatch {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff; margin: 0 auto 12px;
    box-shadow: var(--shadow-sm);
}

/* ---- Composer target checklist ---- */
.target-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 16px; }
.target-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.target-row input[type=checkbox] { width: auto; }

/* ---- Inbox ---- */
.comment-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.engagement-row { display: flex; align-items: stretch; }
.engagement-post {
    width: 280px; flex-shrink: 0; padding: 20px; border-right: 1px solid var(--line);
}
.engagement-comments { flex: 1; min-width: 0; padding: 8px 24px; max-height: 640px; overflow-y: auto; }
@media (max-width: 760px) {
    .engagement-row { flex-direction: column; }
    .engagement-post { width: auto; border-right: none; border-bottom: 1px solid var(--line); }
}
.activity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
.activity-row {
    display: flex; gap: 10px; align-items: flex-start; padding: 12px; min-width: 0;
    border: 1px solid var(--line); border-radius: var(--radius-sm); color: inherit; text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.activity-row:hover { background: var(--signal-dim); text-decoration: none; }
.conv-list-item:hover { background: var(--signal-dim); text-decoration: none; }
.conv-list-item:hover * { text-decoration: none; }

/* Inbox: conversation list and message thread as two separate rounded
   cards with a gap between them, instead of one card split by a divider. */
.inbox-shell { gap: 16px !important; align-items: flex-start; }
.inbox-shell #conv-list-col,
.inbox-shell #conv-pane {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); overflow: hidden;
}
.inbox-shell #conv-list-col { border-radius: var(--radius) !important; }

/* Inbox top tabs: hover uses the same light-blue highlight as a selected
   conversation row; the active tab stays solid blue (handled by .btn). */
.inbox-tabs .btn.secondary:hover,
.inbox-tabs .dropdown-toggle.secondary:hover {
    background: var(--signal-dim); border-color: var(--signal-dim); color: var(--signal);
}
@media (max-width: 700px) { .activity-grid { grid-template-columns: 1fr; } }
.comment-row:last-child { border-bottom: none; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-raised); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 600; color: var(--muted); overflow: hidden; border: 1px solid var(--line); }
.comment-meta { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.badge {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 8px; border-radius: 100px; border: 1px solid var(--line); color: var(--muted);
    background: var(--surface-raised);
}
.stat-row { display: flex; gap: 22px; margin-top: 6px; flex-wrap: wrap; }
.stat { font-size: .82rem; color: var(--muted); }
.stat b { color: var(--text); font-family: 'Space Grotesk', sans-serif; }

.flash { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 18px; font-size: .88rem; border: 1px solid; }
.flash.ok { background: color-mix(in srgb, var(--live) 10%, var(--surface)); border-color: var(--live); color: var(--live); }
.flash.err { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: var(--danger); color: var(--danger); }

.auth-shell { max-width: 380px; margin: 10vh auto; padding: 0 20px; }
.empty-state { text-align: center; color: var(--muted); padding: 40px 20px; }

/* ---- Scrollbar (dark-mode aware) ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ---- Motion polish ---- */
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.main { animation: pageFadeIn .35s ease both; }

@keyframes dropdownIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.dropdown-menu.open { animation: dropdownIn .15s ease both; }

@keyframes flashIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.flash { animation: flashIn .25s ease both; }

.btn, .nav a, .card, .node, .platform-tile, input, textarea, select {
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .main, .dropdown-menu.open, .flash { animation: none; }
    .btn, .card, .node, .platform-tile, .nav a { transition: none; }
}

/* ---- Mobile layout ----
   The app had no responsive layout at all before this - the 224px sidebar
   just squeezed everything on a phone. Below the breakpoint: the sidebar
   becomes a slide-in drawer (opened via the hamburger in .mobile-topbar or
   the "Menu" tab in .mobile-tabbar - see partials/footer.php for the toggle
   script), and a curated 5-item bottom tab bar covers the most-used
   destinations so people aren't hunting through a full menu on every tap. */
.mobile-topbar, .mobile-tabbar, .drawer-backdrop { display: none; }

@media (max-width: 860px) {
    .mobile-topbar {
        display: flex; align-items: center; gap: 12px;
        position: sticky; top: 0; z-index: 40;
        padding: 12px 16px; background: var(--sidebar-bg); border-bottom: 1px solid var(--line);
    }
    .mobile-menu-btn {
        display: flex; align-items: center; justify-content: center;
        width: 34px; height: 34px; border-radius: var(--radius-sm);
        background: var(--surface-raised); border: 1px solid var(--line); color: var(--text); cursor: pointer;
    }
    .mobile-menu-btn svg { width: 18px; height: 18px; }

    .drawer-backdrop {
        position: fixed; inset: 0; background: rgba(10,12,16,.45); z-index: 45;
        opacity: 0; pointer-events: none; transition: opacity .2s ease;
    }
    .drawer-backdrop.open { display: block; opacity: 1; pointer-events: auto; }

    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
        width: 260px; transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: var(--shadow-lg);
        overflow-y: auto;
    }
    .sidebar.open { transform: translateX(0); }

    .main { padding: 20px 16px 84px; animation: none; }
    .topbar { padding: 0 0 12px; justify-content: flex-end; flex-wrap: wrap; }

    .mobile-tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        background: var(--surface); border-top: 1px solid var(--line);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        box-shadow: 0 -4px 16px rgba(20,22,26,.06);
    }
    .mobile-tabbar a {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 6px 2px; border-radius: var(--radius-sm); color: var(--muted);
        font-size: .66rem; font-weight: 600; text-decoration: none;
        transition: color .15s ease;
    }
    .mobile-tabbar a svg { width: 20px; height: 20px; }
    .mobile-tabbar a.active { color: var(--signal); }
}

/* ---- Order status stepper ---- */
.order-card { transition: transform .18s ease, box-shadow .18s ease; }
.order-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pay-chip { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.stepper { display: flex; align-items: center; margin: 16px 0; }
.step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.step .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--line); display: flex; align-items: center; justify-content: center; font-size: .65rem; color: #fff; font-weight: 700; z-index: 1; transition: background .4s ease, transform .3s ease; }
.step.done .dot { background: var(--live); }
.step.current .dot { background: var(--signal); transform: scale(1.15); box-shadow: 0 0 0 5px var(--signal-dim); }
.step .step-label { font-size: .68rem; color: var(--muted); margin-top: 6px; font-weight: 500; }
.step.done .step-label, .step.current .step-label { color: var(--text); font-weight: 600; }
.step-line { position: absolute; top: 11px; left: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.step-line.filled { background: var(--live); }
.step:last-child .step-line { display: none; }

/* ---- Booking ticket stub ---- */
.booking-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.ticket { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); display: flex; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; position: relative; }
.ticket:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ticket-date { background: linear-gradient(160deg, var(--signal), #3B82F6); color: #fff; padding: 16px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 78px; flex-shrink: 0; }
.ticket-date .day { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1; }
.ticket-date .mon { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.ticket-date .time { font-size: .64rem; margin-top: 5px; background: rgba(255,255,255,.22); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.ticket-date.cancelled { background: linear-gradient(160deg, var(--danger), #F87171); }
.ticket-body { padding: 14px 16px; flex: 1; min-width: 0; }
.ticket-body .svc { font-weight: 600; font-size: .92rem; margin-bottom: 2px; }
.ticket-body .who { color: var(--muted); font-size: .8rem; margin-bottom: 8px; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; }
.status-pill.st-new { background: color-mix(in srgb, var(--amber) 15%, transparent); color: var(--amber); }
.status-pill.st-new::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: statusPulse 1.6s infinite; }
@keyframes statusPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.status-pill.st-confirmed { background: color-mix(in srgb, var(--live) 15%, transparent); color: var(--live); }
.status-pill.st-contacted { background: color-mix(in srgb, var(--signal) 12%, transparent); color: var(--signal); }
.status-pill.st-cancelled { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

/* ---- Inbox message bubble motion ---- */
.bubble-row { animation: bubbleIn .28s ease both; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .bubble-row, .status-pill.st-new::before, [style*="barGrow"] { animation: none !important; } }

/* ---- Mobile fixes ---- */
.mobile-back-link { display: none; }
@media (max-width: 760px) {
    /* Inbox: list and thread never fit side by side on a phone - show one at a time, like every mobile chat app does. */
    .inbox-shell { flex-direction: column; }
    .inbox-shell #conv-list-col { width: 100% !important; }
    .inbox-shell .mobile-hide { display: none !important; }
    .mobile-back-link { display: block; padding: 12px 16px; font-size: .85rem; font-weight: 600; color: var(--signal); text-decoration: none; border-bottom: 1px solid var(--line); }

    /* Any row of buttons/selects/dropdowns that assumed desktop width - let it wrap instead of forcing a fixed width and running off the right edge. Selects keep their natural content-based minimum width (the flexbox default) rather than being allowed to shrink to an unreadable sliver. */
    .target-row, .data-row, .section-head, .page-header, .view-tabs, .stat-row {
        flex-wrap: wrap !important;
    }
    .data-row select, .target-row select { flex: 0 1 auto; }
    select { min-width: 130px; }
    .data-row form[style*="display:flex"], .target-row form[style*="display:flex"] { flex-wrap: wrap; }

    /* Cards/grids that assumed a fixed minimum column width - a 300px minimum item doesn't fit a ~360-400px phone screen with padding either side. */
    .booking-grid, .node-grid { grid-template-columns: 1fr !important; }

    /* Dropdown menus (Settings, notifications, etc.): right:0 anchors the menu's right edge to its trigger button and lets it extend leftward - fine on desktop, but when the trigger sits near the screen's left edge on mobile, a 190px-wide menu extending left runs straight off-screen (unreadable, and not recoverable by scrolling). Anchor from the left edge instead (extends rightward, where there's actually room) and cap the width so it can never exceed the viewport regardless of where the trigger sits. */
    .dropdown-menu { left: 0 !important; right: auto !important; max-width: calc(100vw - 32px); }

    /* Inbox channel/ticket tab row: on desktop these just flex-wrap freely,
       which reads fine with the extra width to spread out in. On a phone
       that free wrap produces a ragged 1-then-3-then-1 stagger depending on
       label length - a plain 2-per-row grid reads as a deliberate layout
       instead of things randomly not fitting. */
    .inbox-tabs {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }
    .inbox-tabs > .dropdown,
    .inbox-tabs > a.btn,
    .inbox-tabs > form { width: 100%; }
    .inbox-tabs .dropdown-toggle,
    .inbox-tabs > a.btn {
        width: 100%;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Inbox search/Check now/New Email row: same idea as .inbox-tabs above -
       on desktop these just sit in a row with room to spare, but on a phone
       they were wrapping unevenly (search box one width, Check now another,
       neither filling the row) instead of reading as a deliberate row of
       full-width controls. Two-per-row grid, search spans both columns since
       it's a compound control (input + button) that needs the room. */
    .inbox-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }
    .inbox-actions > .inbox-search { grid-column: 1 / -1; width: 100%; }
    .inbox-actions > .inbox-search input[type="search"] { flex: 1; width: auto; }
    .inbox-actions > a.btn,
    .inbox-actions > form:not(.inbox-search) { width: 100%; }
    .inbox-actions > form:not(.inbox-search) button { width: 100%; justify-content: center; }

    /* Inbox thread header (name/badge, email address, phone, AI agent line):
       these sit in a single unwrapped flex row that assumed desktop width -
       force each block onto its own full-width line on a phone instead of
       letting long content (an email address, "AI Agent: X (mode)" plus a
       button) push the row past the screen edge. */
    .header-meta-row { width: 100%; }
}

/* ---- Customer profile header (customers.php detail view) ---- */
.customer-profile-head { display: flex; align-items: center; gap: 18px; padding: 22px 20px; }
.customer-avatar-lg {
    width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 1.5rem; box-shadow: var(--shadow-sm);
}
.customer-contact-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 4px; }
.customer-contact-link {
    display: inline-flex; align-items: center; gap: 5px; font-size: .85rem;
    color: var(--muted); text-decoration: none; transition: color .12s ease;
}
a.customer-contact-link:hover { color: var(--signal); text-decoration: none; }
.customer-meta-row { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--muted); }
.dot-sep { opacity: .6; }

/* Customer list row (customers.php): email/phone stacked one per line with
   an ellipsis instead of the header's side-by-side layout - the list row
   also has an avatar and action buttons competing for width, and a long,
   unbreakable email address there was overflowing its own box and visually
   running into the buttons/"Last active" text next to it rather than
   wrapping or shrinking cleanly. */
.customer-contact-row.stacked { flex-direction: column; align-items: flex-start; gap: 2px; flex-wrap: nowrap; }
.customer-contact-row.stacked .customer-contact-link {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; display: inline-flex;
}
@media (max-width: 560px) {
    .customer-profile-head { flex-direction: column; align-items: flex-start; text-align: left; gap: 12px; }
}

/* ---- Shared section-card system (Agent Settings, Channels, Campaigns, Customers) ----
   Every settings page used to be a stack of identical white .card boxes with
   no visual difference between "configure a connection" and "add a thing"
   and "browse a list" - this gives each section an icon + purpose so a
   dense page of forms is actually scannable. */
.section-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.section-head { padding: 15px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.section-head strong { font-size: .92rem; }
.section-head .meta { margin-left: auto; font-size: .78rem; color: var(--muted); }
.section-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.section-icon.blue { background: var(--signal-dim); color: var(--signal); }
.section-icon.amber { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.section-icon.green { background: color-mix(in srgb, var(--live) 18%, transparent); color: var(--live); }
.section-icon.purple { background: color-mix(in srgb, #8B5CF6 18%, transparent); color: #8B5CF6; }
.stat-icon.blue { background: var(--signal-dim); color: var(--signal); }
.stat-icon.amber { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.stat-icon.green { background: color-mix(in srgb, var(--live) 18%, transparent); color: var(--live); }
.stat-icon.purple { background: color-mix(in srgb, #8B5CF6 18%, transparent); color: #8B5CF6; }
.section-body { padding: 20px; }
.status-banner { display: flex; align-items: center; gap: 8px; font-size: .82rem; padding: 8px 12px; border-radius: 8px; margin-bottom: 14px; }
.status-banner.ok { color: var(--live); background: color-mix(in srgb, var(--live) 12%, transparent); }
.status-banner.warn { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.status-banner .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.data-row { display: flex; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); align-items: center; }
.data-row:first-child { border-top: none; }
.data-thumb { width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0; object-fit: cover; background: var(--surface-raised); }
.tag-pill { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; background: var(--signal-dim); color: var(--signal); padding: 2px 8px; border-radius: 999px; margin-top: 5px; }
.tag-pill.empty { background: var(--surface-raised); color: var(--muted); }

/* ---- Product catalog grid ---- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.product-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; transition: box-shadow .15s ease, border-color .15s ease; }
.product-card:hover { border-color: var(--signal); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.product-card-select { position: absolute; top: 8px; left: 8px; z-index: 2; width: 20px; height: 20px; background: rgba(255,255,255,.9); border-radius: 5px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.product-card-select input { width: 15px; height: 15px; margin: 0; cursor: pointer; }
.product-card { position: relative; }
.product-card-media { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--surface-raised); overflow: hidden; }
.product-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card-media-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.product-card-stock { position: absolute; top: 8px; right: 8px; font-size: .62rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; backdrop-filter: blur(2px); }
.product-card-stock.in { background: color-mix(in srgb, var(--live) 20%, #fff 0%); color: var(--live); background-color: color-mix(in srgb, var(--live) 16%, white 84%); }
.product-card-stock.out { color: #B42318; background-color: color-mix(in srgb, #B42318 14%, white 86%); }
.product-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card-title { font-size: .82rem; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.1em; }
.product-card-price { font-size: .78rem; color: var(--muted); font-weight: 500; }
.product-card-price .quote { color: var(--signal); font-weight: 600; }
.product-card-tags { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.product-card-tags input { font-size: .72rem; padding: 5px 7px; }
.product-card-tags .btn { font-size: .68rem; padding: 4px 8px; width: 100%; }
.product-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.product-card-edit { font-size: .72rem; flex: 1; }
.product-card-edit summary { cursor: pointer; color: var(--signal); font-weight: 600; list-style: none; }
.product-card-edit summary::-webkit-details-marker { display: none; }
.product-card-edit summary::before { content: '\25B8\a0'; }
.product-card-edit-form { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.product-card-edit-form input, .product-card-edit-form textarea { font-size: .72rem; padding: 5px 7px; }
.product-card-edit-form .btn { font-size: .7rem; padding: 5px 8px; }
.product-card-checkbox { display: flex; align-items: center; gap: 5px; font-size: .68rem; }
.product-card-checkbox input { width: auto; }
.product-card-delete { font-size: .68rem; padding: 4px 8px; color: #B42318; flex-shrink: 0; }
.product-pager { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px 2px; font-size: .8rem; color: var(--muted); }
@media (max-width: 480px) {
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
}

/* ---- Catalog/services search bar + bulk-select toolbar (shared) ---- */
.catalog-search { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.catalog-search input[type="search"] { flex: 1; min-width: 220px; }
.catalog-bulkbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px; margin-bottom: 10px; border-bottom: 1px solid var(--line); font-size: .8rem; }
.catalog-bulkbar-all { display: flex; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; }
.catalog-bulkbar-all input { width: auto; cursor: pointer; }
.catalog-bulk-delete { color: #B42318; }
.catalog-bulk-delete:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 480px) {
    .catalog-search input[type="search"] { min-width: 0; width: 100%; }
}