/* ==========================================================================
   CapHub — design system
   ========================================================================== */
:root {
    /* Noon Standard brand palette */
    --stone: #D9D6D2;
    --camel: #BF9A78;
    --clay: #8C583A;
    --walnut: #59341E;
    --ink: #0D0A09;

    --bg: #E7E4DF;
    --surface: #ffffff;
    --surface-2: #F2EFEA;
    --border: #DCD7CE;
    --border-strong: #C9C2B6;
    --text: #0D0A09;
    --text-soft: #5B5247;
    --text-faint: #9C9388;

    --brand: #59341E;       /* Walnut — primary actions, links */
    --brand-600: #3F2615;
    --brand-soft: #F1E8E1;
    --accent: #8C583A;      /* Clay — active states */

    --green: #3F7D4F;  --green-soft: #E5EEDE;   /* income / success */
    --amber: #B5762A;  --amber-soft: #F6ECD8;   /* warning / in-progress */
    --red:   #A53B2A;  --red-soft:   #F3E2DC;   /* expense / danger */
    --blue:  #5E6B73;  --blue-soft:  #E8ECEE;   /* steel — info */
    --violet:#8C583A;  --violet-soft:#F1E7DF;   /* clay — secondary accent */

    --sidebar: #0D0A09;
    --sidebar-2: #1E1915;
    --sidebar-text: #B4ABA0;
    --sidebar-active: #ffffff;

    /* Articulat CF / Denton are licensed — drop the font files in and they
       take over automatically; until then these fall back gracefully. */
    --font-sans: "Articulat CF", "Articulat", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Denton", "Hoefler Text", Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;

    --shadow-sm: 0 1px 2px rgba(13, 10, 9, .05);
    --shadow: 0 1px 3px rgba(13, 10, 9, .09), 0 1px 2px rgba(13, 10, 9, .05);
    --shadow-lg: 0 12px 28px -6px rgba(13, 10, 9, .18), 0 8px 10px -6px rgba(13, 10, 9, .10);

    --r: 12px;
    --r-sm: 8px;
    --sidebar-w: 250px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }

/* Brand tagline (serif display, never small) */
.tagline { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.2; color: var(--text-soft); }
.tagline em { font-style: italic; }
/* Stacked wordmark in the sidebar */
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wordmark .nm { color: #fff; font-weight: 600; letter-spacing: .16em; font-size: .95rem; }
.wordmark .sub { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .36em; font-size: .56rem; color: var(--sidebar-text); margin-top: 4px; }
p { margin: 0 0 .75rem; }

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

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--sidebar);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
}
.sidebar .brand {
    display: flex; align-items: center; gap: .65rem;
    padding: 1.15rem 1.25rem;
    color: #fff; font-weight: 700; font-size: 1.05rem;
    letter-spacing: -.02em;
}
.sidebar .brand .logo {
    width: 34px; height: 34px; border-radius: 9px;
    background: #F4EEE2;
    display: grid; place-items: center; color: var(--ink);
    box-shadow: var(--shadow);
}
.sidebar .brand small { display: block; font-size: .7rem; font-weight: 500; color: var(--sidebar-text); }

.nav { padding: .5rem .75rem; flex: 1; overflow-y: auto; }
.nav .group-label {
    font-family: var(--font-mono);
    text-transform: uppercase; font-size: .62rem; letter-spacing: .22em;
    color: #6B6258; padding: 1rem .85rem .35rem; font-weight: 500;
}
.nav a {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .75rem; margin: .1rem 0;
    border-radius: var(--r-sm); color: var(--sidebar-text);
    font-weight: 500; transition: background .12s, color .12s;
}
.nav a:hover { background: var(--sidebar-2); color: #fff; text-decoration: none; }
.nav a.active { background: var(--accent); color: #fff; box-shadow: var(--shadow); }
.nav a svg { width: 18px; height: 18px; flex: 0 0 18px; }

.sidebar .side-foot { padding: .85rem 1rem; border-top: 1px solid rgba(255,255,255,.07); }
.sidebar .side-foot .who { display: flex; align-items: center; gap: .4rem; }
.sidebar .side-foot .who-link { display: flex; align-items: center; gap: .55rem; min-width: 0; flex: 1; text-decoration: none; padding: .25rem .3rem; border-radius: 8px; }
.sidebar .side-foot .who-link:hover { background: var(--sidebar-2); text-decoration: none; }
.sidebar .side-foot .who .name { display: block; color: #E7E4DF; font-weight: 600; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .side-foot .who .role { display: block; font-size: .7rem; color: var(--sidebar-text); text-transform: capitalize; }

.main {
    margin-left: var(--sidebar-w);
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
}

.topbar {
    height: 62px; background: rgba(255,255,255,.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 1rem;
    padding: 0 1.5rem; position: sticky; top: 0; z-index: 30;
}
.topbar .page-title { font-size: 1.15rem; font-weight: 680; }
.topbar .spacer { flex: 1; }
.topbar .hamburger { display: none; background: none; border: 0; cursor: pointer; color: var(--text); }

.content { padding: 1.5rem; max-width: 1280px; width: 100%; margin: 0 auto; }

/* Rotating dashboard joke beside the date */
.dash-joke { transition: opacity .35s ease; }

/* ----- Avatar ------------------------------------------------------------- */
.avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--walnut);
    color: #fff; display: grid; place-items: center;
    font-family: var(--font-mono); font-weight: 500; font-size: .74rem; letter-spacing: .02em; flex: 0 0 auto;
}
.avatar.sm { width: 26px; height: 26px; font-size: .68rem; }
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ----- Buttons ------------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem .9rem; border-radius: var(--r-sm);
    border: 1px solid var(--border-strong); background: var(--surface);
    color: var(--text); font-weight: 500; font-size: .74rem;
    font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em;
    cursor: pointer; transition: all .12s; text-decoration: none; line-height: 1;
}
.btn:hover { background: var(--surface-2); text-decoration: none; box-shadow: var(--shadow-sm); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-600); }
.btn-danger { background: #fff; border-color: var(--red); color: var(--red); }
.btn-danger:hover { background: var(--red-soft); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: .32rem .6rem; font-size: .78rem; }
.btn-block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ----- Cards -------------------------------------------------------------- */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); box-shadow: var(--shadow-sm);
}
.card-head {
    display: flex; align-items: center; gap: .75rem;
    padding: 1rem 1.15rem; border-bottom: 1px solid var(--border);
}
.card-head h3 { font-size: .98rem; }
.card-head .spacer { flex: 1; }
.card-body { padding: 1.15rem; }
.card-body.tight { padding: .5rem; }

/* ----- Stat cards --------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm);
    position: relative; overflow: hidden;
}
.stat .label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); font-size: .68rem; font-weight: 500; }
.stat .value { font-size: 1.7rem; font-weight: 720; letter-spacing: -.02em; margin-top: .3rem; }
.stat .sub { font-size: .78rem; color: var(--text-faint); margin-top: .15rem; }
.stat .ic {
    position: absolute; top: 1rem; right: 1rem;
    width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
}
.stat .ic svg { width: 20px; height: 20px; }
a.stat { color: inherit; text-decoration: none; cursor: pointer; transition: box-shadow .12s, border-color .12s; }
a.stat:hover { text-decoration: none; box-shadow: var(--shadow); border-color: var(--border-strong); }
.tone-brand .ic { background: var(--brand-soft); color: var(--brand); }
.tone-green .ic { background: var(--green-soft); color: var(--green); }
.tone-amber .ic { background: var(--amber-soft); color: var(--amber); }
.tone-red .ic   { background: var(--red-soft); color: var(--red); }
.tone-blue .ic  { background: var(--blue-soft); color: var(--blue); }
.tone-violet .ic{ background: var(--violet-soft); color: var(--violet); }
.value.pos { color: var(--green); }
.value.neg { color: var(--red); }

/* ----- Grids -------------------------------------------------------------- */
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.col-span-2 { grid-column: span 2; }
.row { display: flex; gap: 1rem; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* ----- Page header -------------------------------------------------------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.page-head h1 { font-size: 1.5rem; }
.page-head .lede { color: var(--text-soft); margin: .25rem 0 0; }

/* ----- Badges ------------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .24rem .55rem; border-radius: 999px;
    font-family: var(--font-mono); font-size: .63rem; font-weight: 500; line-height: 1.4; letter-spacing: .05em;
    background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border);
    text-transform: uppercase; white-space: nowrap;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-green  { background: var(--green-soft); color: #2F6B40; border-color: transparent; }
.badge-amber  { background: var(--amber-soft); color: #8A5418; border-color: transparent; }
.badge-red    { background: var(--red-soft); color: #8F2F22; border-color: transparent; }
.badge-blue   { background: var(--blue-soft); color: #43525A; border-color: transparent; }
.badge-violet { background: var(--violet-soft); color: #6F4327; border-color: transparent; }
.badge-gray   { background: var(--surface-2); color: var(--text-soft); border-color: transparent; }

/* ----- Tables ------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; }
.table th {
    text-align: left; font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--text-faint); font-weight: 500; padding: .65rem 1.15rem; border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.table td { padding: .8rem 1.15rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table a.row-link { font-weight: 600; color: var(--text); }
.table a.row-link:hover { color: var(--brand); }
.muted { color: var(--text-faint); }
.strong { font-weight: 650; }
.nowrap { white-space: nowrap; }

/* ----- Forms -------------------------------------------------------------- */
.field { margin-bottom: .9rem; }
.field > label { display: block; font-weight: 600; font-size: .82rem; margin-bottom: .35rem; color: var(--text-soft); }
.input, .select, .textarea {
    width: 100%; padding: .55rem .7rem; font-size: .9rem; color: var(--text);
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
    font-family: inherit; transition: border-color .12s, box-shadow .12s;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.textarea { resize: vertical; min-height: 78px; }
.field-row { display: flex; gap: .75rem; }
.field-row > * { flex: 1; }
.help { font-size: .75rem; color: var(--text-faint); margin-top: .3rem; }
input[type="color"].swatch { width: 46px; height: 38px; padding: 2px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: #fff; cursor: pointer; }

/* ----- Flash messages ----------------------------------------------------- */
.flash-stack { position: fixed; top: 14px; right: 14px; z-index: 100; display: flex; flex-direction: column; gap: .5rem; max-width: 360px; }
.flash {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .7rem .85rem; border-radius: var(--r-sm); background: var(--surface);
    border: 1px solid var(--border); box-shadow: var(--shadow-lg); font-size: .86rem; font-weight: 500;
    animation: slidein .25s ease;
}
.flash.success { border-left: 4px solid var(--green); }
.flash.error { border-left: 4px solid var(--red); }
.flash .x { margin-left: auto; cursor: pointer; color: var(--text-faint); background: none; border: 0; }
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ----- Modal -------------------------------------------------------------- */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,.5);
    display: none; align-items: flex-start; justify-content: center; z-index: 80; padding: 4vh 1rem;
    overflow-y: auto;
}
.modal-backdrop.open { display: flex; }
.modal {
    background: var(--surface); border-radius: var(--r); width: 100%; max-width: 540px;
    box-shadow: var(--shadow-lg); animation: pop .18s ease; margin: auto 0;
}
.modal.lg { max-width: 760px; }
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.modal-head h3 { font-size: 1.05rem; }
.modal-head .x { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--text-faint); font-size: 1.3rem; line-height: 1; }
.modal-body { padding: 1.25rem; }
.modal-foot { padding: 1rem 1.25rem; border-top: 1px solid var(--border); display: flex; gap: .6rem; justify-content: flex-end; }

/* ----- Empty state -------------------------------------------------------- */
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--text-faint); }
.empty svg { width: 40px; height: 40px; margin-bottom: .5rem; opacity: .6; }
.empty h4 { color: var(--text-soft); margin-bottom: .25rem; }

/* ----- Alerts feed -------------------------------------------------------- */
.alert-item { display: flex; align-items: center; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.alert-item:last-child { border-bottom: 0; }
.alert-item .ai-ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 32px; }
.alert-item .ai-ic svg { width: 16px; height: 16px; }
.alert-item.order .ai-ic { background: var(--blue-soft); color: var(--blue); }
.alert-item.stock .ai-ic { background: var(--amber-soft); color: var(--amber); }
.alert-item.task .ai-ic  { background: var(--red-soft); color: var(--red); }
.alert-item .at { flex: 1; font-size: .86rem; }

/* ----- Progress / mini bars ----------------------------------------------- */
.bar { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--brand); border-radius: 999px; }

/* ----- Kanban ------------------------------------------------------------- */
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: start; }
.column { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); display: flex; flex-direction: column; min-height: 120px; }
.column-head { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; font-weight: 650; font-size: .85rem; }
.column-head .count { margin-left: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0 .5rem; font-size: .72rem; color: var(--text-soft); }
.column-head .swatch-dot { width: 9px; height: 9px; border-radius: 50%; }
.column-body { padding: .5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; min-height: 60px; }
.column-body.drag-over { background: var(--brand-soft); outline: 2px dashed var(--brand); outline-offset: -4px; border-radius: var(--r-sm); }
.kanban-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: .7rem .8rem; box-shadow: var(--shadow-sm); cursor: grab; transition: box-shadow .12s, transform .05s;
}
.kanban-card:hover { box-shadow: var(--shadow); }
.kanban-card.dragging { opacity: .5; }
.kanban-card .kc-title { font-weight: 600; font-size: .88rem; margin-bottom: .35rem; }
.kanban-card .kc-meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
/* Priority: a bold coloured left edge on the card + a labelled pill.
   high = red, medium = amber, low = steel blue. */
.kanban-card { border-left-width: 4px; }
.kanban-card.prio-high   { border-left-color: var(--red); }
.kanban-card.prio-medium { border-left-color: var(--amber); }
.kanban-card.prio-low    { border-left-color: var(--blue); }
.prio-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .12rem .45rem; border-radius: 999px; line-height: 1.4; }
.prio-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.prio-pill.prio-high   { color: var(--red);   background: var(--red-soft); }
.prio-pill.prio-medium { color: var(--amber); background: var(--amber-soft); }
.prio-pill.prio-low    { color: var(--blue);  background: var(--blue-soft); }

/* Task archive list */
.ta-actions { display: flex; gap: .4rem; justify-content: flex-end; align-items: center; }
.ta-actions form { margin: 0; }
.ta-desc { margin-top: .15rem; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.column-foot { padding: .5rem; }

/* ----- Calendar ----------------------------------------------------------- */
.cal-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cal-nav { display: flex; align-items: center; gap: .5rem; }
.cal-nav .cal-month { font-size: 1.15rem; font-weight: 680; min-width: 10rem; text-align: center; letter-spacing: -.01em; }
.cal-nav .btn-sm { padding: .35rem .5rem; }
.cal-prev svg { transform: scaleX(-1); }
.cal-legend { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem 1rem; margin-left: auto; }
.cal-leg { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em; font-size: .64rem; color: var(--text-soft); }
.cal-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.cal-dot-task { background: var(--surface); border: 1.5px dashed var(--walnut); }

.cal { --cal-h: 116px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-head-row { background: var(--surface-2); border-bottom: 1px solid var(--border); border-radius: var(--r) var(--r) 0 0; }
.cal-wd { padding: .55rem .7rem; text-align: right; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: .62rem; color: var(--text-faint); font-weight: 500; }
/* Every day is the same fixed size; anything beyond it is clipped (revealed on hover). */
.cal-day { position: relative; height: var(--cal-h); overflow: hidden; border-right: 1px solid var(--border); border-top: 1px solid var(--border); padding: .3rem .35rem .45rem; display: flex; flex-direction: column; gap: .25rem; cursor: pointer; transition: background .1s; }
.cal-grid:first-of-type .cal-day { border-top: 0; }
.cal-grid .cal-day:nth-child(7n) { border-right: 0; }
.cal-grid:last-child .cal-day:first-child { border-bottom-left-radius: var(--r); }
.cal-grid:last-child .cal-day:last-child { border-bottom-right-radius: var(--r); }
.cal-day:hover { background: var(--surface-2); }
.cal-out { background: #EFEDE8; }
.cal-out:hover { background: var(--surface-2); }
.cal-daynum { display: flex; justify-content: flex-end; position: relative; z-index: 2; }
.cal-daynum span { display: inline-grid; place-items: center; min-width: 1.55rem; height: 1.55rem; padding: 0 .35rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--text-soft); }
.cal-out .cal-daynum span { color: var(--text-faint); opacity: .6; }
.cal-today .cal-daynum span { background: var(--brand); color: #fff; }
.cal-events { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.cal-chip {
    display: flex; align-items: center; gap: .3rem; width: 100%;
    padding: .16rem .4rem; border: 0; border-radius: 5px; cursor: pointer;
    font-family: inherit; font-size: .72rem; font-weight: 550; line-height: 1.35; text-align: left;
    color: #fff; background: var(--cc, var(--brand)); box-shadow: var(--shadow-sm);
    text-shadow: 0 1px 1px rgba(13, 10, 9, .18);
}
.cal-chip:hover { filter: brightness(1.06); box-shadow: var(--shadow); }
.cal-chip .cal-chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cal-chip .cal-chip-time { font-family: var(--font-mono); font-size: .62rem; opacity: .9; flex: 0 0 auto; }
.cal-chip-task { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 3px solid var(--walnut); box-shadow: none; text-shadow: none; text-decoration: none; }
.cal-chip-task:hover { background: var(--surface-2); filter: none; text-decoration: none; }
.cal-chip-task.done .cal-chip-t { text-decoration: line-through; color: var(--text-faint); }
.cal-chip-dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }

/* "+N more" hint — added by JS only on days whose events overflow the box. */
.cal-more {
    position: absolute; bottom: 3px; right: 4px; z-index: 1; pointer-events: none;
    font-family: var(--font-mono); font-size: .58rem; font-weight: 600; letter-spacing: .02em;
    color: var(--text-soft); background: var(--surface); border: 1px solid var(--border);
    border-radius: 999px; padding: 0 .4rem; line-height: 1.5; box-shadow: var(--shadow-sm);
}
.cal-out .cal-more { background: #EFEDE8; }

/* Hover an overflowing day to reveal the whole list as a floating card. */
.cal-day.cal-has-more:hover { overflow: visible; z-index: 20; }
.cal-day.cal-has-more:hover .cal-events {
    position: absolute; left: -1px; right: -1px; top: -1px; z-index: 1;
    padding: 1.95rem .4rem .45rem; gap: .22rem;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--r-sm); box-shadow: var(--shadow-lg);
}
.cal-day.cal-has-more:hover .cal-more { display: none; }

.cal-time-row { align-items: center; }
.cal-allday { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .82rem; color: var(--text-soft); cursor: pointer; white-space: nowrap; }
.cal-allday input { width: auto; margin: 0; }
.cal-time-field { margin-bottom: 0; }

@media (max-width: 640px) {
    .cal { --cal-h: 92px; }
    .cal-day { padding: .2rem .2rem .3rem; }
    .cal-wd { padding: .45rem .35rem; font-size: .55rem; letter-spacing: .06em; }
    .cal-chip { font-size: .64rem; padding: .12rem .3rem; }
    .cal-daynum span { min-width: 1.35rem; height: 1.35rem; font-size: .74rem; }
    .cal-legend { gap: .3rem .7rem; }
}

/* ----- Mood board --------------------------------------------------------- */
.mood-grid { columns: 4 200px; column-gap: 1rem; }
.mood-item { break-inside: avoid; margin-bottom: 1rem; border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); position: relative; }
.mood-item img { width: 100%; display: block; }
.mood-item .swatch-fill { height: 130px; }
.mood-item .note-fill { padding: 1rem; font-size: .92rem; background: #fffdf3; }
.mood-item .link-fill { padding: 1rem; display: flex; align-items: center; gap: .5rem; }
.mood-item .cap { padding: .5rem .7rem; font-size: .78rem; color: var(--text-soft); border-top: 1px solid var(--border); display: flex; align-items: center; }
.mood-item .del { position: absolute; top: 6px; right: 6px; opacity: 0; transition: opacity .12s; }
.mood-item:hover .del { opacity: 1; }
.mood-item .del button { background: rgba(13,10,9,.62); color: #fff; border: 0; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
.mood-item img, .mood-item video { width: 100%; display: block; }
.mood-item { cursor: grab; }
.mood-item.dragging { opacity: .4; }
.mood-item.drop-target { outline: 2px solid var(--accent); outline-offset: -2px; }
#moodboard.drop-active { outline: 3px dashed var(--accent); outline-offset: 8px; border-radius: var(--r); background: var(--brand-soft); }
.mb-dropzone { border: 2px dashed var(--border-strong); border-radius: var(--r); padding: 2.5rem 1rem; text-align: center; color: var(--text-faint); background: var(--surface-2); }
.mb-hint { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--text-faint); }
#mb-uploading { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 999px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; box-shadow: var(--shadow-lg); z-index: 90; }

/* ----- Mood board: free-form canvas (Miro-style) -------------------------- */
.mb-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .85rem; }
.mb-toolbar .mb-hint { margin-left: .25rem; }
.mb-canvas { position: relative; height: 74vh; min-height: 560px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r); background: #EFEDE8; }
.mb-canvas.drop-active { outline: 3px dashed var(--accent); outline-offset: -3px; }
.mb-surface { position: relative; width: 2200px; height: 1600px; background-image: radial-gradient(rgba(13,10,9,.10) 1.1px, transparent 1.1px); background-size: 22px 22px; }
.mb-item { position: absolute; box-sizing: border-box; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; touch-action: none; }
.mb-item:hover { box-shadow: var(--shadow-lg); }
.mb-item.selected { outline: 2px solid var(--accent); outline-offset: 2px; }
.mb-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-item video { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; }
.mb-item.t-sticky { border-radius: 4px; box-shadow: 0 6px 14px -6px rgba(13,10,9,.35); }
.mb-item.t-sticky .mb-sticky-body { width: 100%; height: 100%; padding: 12px 13px; box-sizing: border-box; font-size: .92rem; line-height: 1.4; color: #3a2f22; overflow: auto; outline: none; }
.mb-item.t-text { background: transparent; box-shadow: none; border-radius: 6px; }
.mb-item.t-text:hover { box-shadow: none; }
.mb-item.t-text .mb-text-body { width: 100%; height: 100%; padding: 6px 8px; box-sizing: border-box; font-size: 1.15rem; font-weight: 600; color: var(--ink); outline: none; overflow: auto; }
.mb-item.editing { outline: 2px solid var(--accent); }
.mb-item.editing .mb-sticky-body, .mb-item.editing .mb-text-body { cursor: text; }
.mb-link { display: flex; align-items: center; gap: .5rem; height: 100%; padding: 12px 14px; box-sizing: border-box; }
.mb-link .mb-link-url { flex: 1; font-size: .82rem; color: var(--accent); word-break: break-all; overflow: hidden; }
.mb-link .mb-open { color: var(--text-faint); flex: 0 0 auto; }
.mb-del { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border: 0; border-radius: 6px; background: rgba(13,10,9,.55); color: #fff; cursor: pointer; padding: 0; display: none; place-items: center; }
.mb-item:hover .mb-del, .mb-item.selected .mb-del { display: grid; }
.mb-grip { position: absolute; top: 5px; left: 5px; width: 22px; height: 22px; border-radius: 6px; background: rgba(13,10,9,.55); color: #fff; cursor: grab; display: none; place-items: center; }
.mb-item:hover .mb-grip, .mb-item.selected .mb-grip { display: grid; }
.mb-resize { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 45%, var(--accent) 45%); border-bottom-right-radius: 10px; opacity: 0; }
.mb-item:hover .mb-resize, .mb-item.selected .mb-resize { opacity: .9; }

/* ----- Mind map ----------------------------------------------------------- */
.mm-canvas { position: relative; height: 56vh; min-height: 420px; overflow: auto; background: #EFEDE8; }
.mm-surface { position: relative; width: 2400px; height: 1600px; background-image: radial-gradient(rgba(13,10,9,.08) 1.1px, transparent 1.1px); background-size: 24px 24px; }
.mm-lines { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.mm-node { position: absolute; z-index: 2; min-width: 120px; max-width: 240px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--mm, #8C583A); border-radius: 8px; box-shadow: var(--shadow); }
.mm-node:hover { box-shadow: var(--shadow-lg); }
.mm-node.selected { outline: 2px solid var(--accent); outline-offset: 2px; }
.mm-node .mm-text { padding: 9px 12px; font-size: .86rem; font-weight: 500; color: var(--text); outline: none; word-break: break-word; cursor: grab; }
.mm-node.editing { outline: 2px solid var(--accent); }
.mm-node.editing .mm-text { cursor: text; }
.mm-node .mm-add, .mm-node .mm-del { position: absolute; width: 20px; height: 20px; border: 0; border-radius: 5px; color: #fff; cursor: pointer; display: none; place-items: center; padding: 0; }
.mm-node .mm-add { right: -10px; top: 50%; transform: translateY(-50%); background: var(--accent); }
.mm-node .mm-del { top: -10px; right: -10px; background: rgba(13,10,9,.6); }
.mm-node:hover .mm-add, .mm-node:hover .mm-del, .mm-node.selected .mm-add, .mm-node.selected .mm-del { display: grid; }

/* ----- Engagement tuner (hidden disclosure) ------------------------------- */
.eng-tuner { margin-top: .5rem; }
.eng-tuner > summary { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none; user-select: none; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em; font-size: .68rem; color: var(--text-faint); }
.eng-tuner > summary::-webkit-details-marker { display: none; }
.eng-tuner > summary svg { width: 14px; height: 14px; }
.eng-tuner > summary:hover { color: var(--accent); }
.eng-tuner[open] > summary { color: var(--text-soft); }

/* campaign cards */
.campaign-card { overflow: hidden; }
.campaign-card .cover { height: 120px; background: linear-gradient(135deg, var(--brand), var(--violet)); display: grid; place-items: center; }
.campaign-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.campaign-card .cover .ph { color: rgba(255,255,255,.85); }

/* ----- Channel columns (marketing) --------------------------------------- */
.channel-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .25rem; }
.channel-head .ch-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
.channel-head .ch-ic svg { width: 16px; height: 16px; }
.init-card { padding: .85rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); margin-bottom: .6rem; }
.init-card:last-child { margin-bottom: 0; }
.init-card .it { font-weight: 600; margin-bottom: .3rem; }
.init-card .desc { font-size: .82rem; color: var(--text-soft); margin-bottom: .5rem; }
.init-card .ic-foot { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ----- Utilities ---------------------------------------------------------- */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.gap-sm { gap: .5rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.grid-main { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; }
@media (max-width: 980px) { .grid-main { grid-template-columns: 1fr; } }
.flex { display: flex; align-items: center; gap: .5rem; }
.flex-wrap { flex-wrap: wrap; }
.text-sm { font-size: .82rem; } .text-xs { font-size: .74rem; }
.text-soft { color: var(--text-soft); } .text-faint { color: var(--text-faint); }
.text-right { text-align: right; } .text-center { text-align: center; }
.tabular { font-variant-numeric: tabular-nums; }
.pill-tabs { display: inline-flex; gap: .25rem; background: var(--surface-2); padding: .25rem; border-radius: 999px; border: 1px solid var(--border); flex-wrap: wrap; }
.pill-tabs a { padding: .35rem .7rem; border-radius: 999px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; font-weight: 500; color: var(--text-soft); }
.pill-tabs a:hover { text-decoration: none; color: var(--text); }
.pill-tabs a.on { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }
.divider { height: 1px; background: var(--border); margin: 1rem 0; }
.inline-form { display: inline; }

/* ----- Auth screen -------------------------------------------------------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(1100px 550px at 70% -10%, #1E1915, #0D0A09); padding: 1rem; }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 2rem; }
.auth-card .brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.5rem; font-weight: 700; font-size: 1.2rem; }
.auth-card .logo { width: 40px; height: 40px; border-radius: 10px; background: #F4EEE2; display: grid; place-items: center; color: var(--ink); }
.auth-card h1 { font-size: 1.3rem; margin-bottom: .25rem; }
.auth-card .lede { color: var(--text-soft); margin-bottom: 1.25rem; font-size: .9rem; }

/* ----- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: 1fr; }
    .board { grid-template-columns: repeat(2, 1fr); }
    .col-span-2 { grid-column: auto; }
}
@media (max-width: 820px) {
    .sidebar { transform: translateX(-100%); transition: transform .2s; }
    .sidebar.open { transform: none; box-shadow: var(--shadow-lg); }
    .main { margin-left: 0; }
    .topbar .hamburger { display: inline-flex; }
    .grid-2 { grid-template-columns: 1fr; }
    .board { grid-template-columns: 1fr; }
    .field-row { flex-direction: column; }
    .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 40; display: none; }
    .scrim.show { display: block; }
}
@media (max-width: 560px) {
    .stats { grid-template-columns: 1fr; }
    .content { padding: 1rem; }
}

/* ==========================================================================
   Team chat (Messages)
   ========================================================================== */
.main-bleed { height: 100vh; overflow: hidden; }
.nav-badge {
    margin-left: auto; background: var(--red); color: #fff;
    font-size: .62rem; font-weight: 700; line-height: 1;
    padding: .2rem .42rem; border-radius: 999px; min-width: 18px; text-align: center;
}
.chat { display: flex; flex: 1; min-height: 0; background: var(--surface); }

/* Rail */
.chat-rail { width: 250px; flex: 0 0 250px; border-right: 1px solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; min-height: 0; }
.chat-rail-head { padding: 1rem 1.1rem .35rem; }
.chat-rail-head h3 { font-size: 1rem; }
.chat-rail-scroll { flex: 1; overflow-y: auto; padding: .25rem .5rem 1rem; }
.cr-group { margin-top: .75rem; }
.cr-label { display: flex; align-items: center; gap: .4rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; font-size: .6rem; color: var(--text-faint); padding: .4rem .6rem .25rem; font-weight: 600; }
.cr-add { margin-left: auto; border: 0; background: none; color: var(--text-faint); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 .25rem; border-radius: 6px; }
.cr-add:hover { color: var(--brand); background: var(--brand-soft); }
.cr-item { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border-radius: var(--r-sm); color: var(--text-soft); font-weight: 500; text-decoration: none; margin: .1rem 0; }
.cr-item:hover { background: rgba(0,0,0,.04); text-decoration: none; color: var(--text); }
.cr-item.on { background: var(--brand); color: #fff; }
.cr-item.on .cr-hash, .cr-item.on .cr-name { color: #fff; }
.cr-hash { color: var(--text-faint); font-weight: 600; }
.cr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-badge { background: var(--red); color: #fff; font-size: .62rem; font-weight: 700; padding: .12rem .4rem; border-radius: 999px; min-width: 18px; text-align: center; }
.cr-item.on .cr-badge { background: rgba(255,255,255,.28); }
.cr-newdm { margin-top: .35rem; }
.cr-newdm summary { cursor: pointer; padding: .4rem .6rem; color: var(--text-faint); font-size: .8rem; list-style: none; }
.cr-newdm summary::-webkit-details-marker { display: none; }
.cr-newdm summary:hover { color: var(--brand); }
.cr-dm-start { display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; background: none; cursor: pointer; text-align: left; padding: .35rem .6rem; border-radius: var(--r-sm); color: var(--text-soft); font: inherit; }
.cr-dm-start:hover { background: rgba(0,0,0,.04); }

/* Conversation */
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.chat-head { padding: .85rem 1.25rem; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.chat-head h2 { font-size: 1.05rem; }
.cm-topic { margin: .15rem 0 0; color: var(--text-faint); font-size: .82rem; }
.chat-stream { flex: 1; overflow-y: auto; min-height: 0; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .1rem; }
.chat-empty { margin: auto; text-align: center; color: var(--text-faint); }
.chat-empty svg { color: var(--border-strong); margin-bottom: .5rem; }

.chat-msg { display: flex; gap: .65rem; padding: .4rem .4rem; border-radius: var(--r-sm); }
.chat-msg:hover { background: var(--surface-2); }
.chat-msg:hover .chat-del { opacity: 1; }
.chat-msg-main { min-width: 0; flex: 1; }
.chat-msg-head { display: flex; align-items: baseline; gap: .5rem; }
.cm-name { font-weight: 650; color: var(--text); }
.cm-time { font-size: .7rem; color: var(--text-faint); }
.chat-del { margin-left: auto; opacity: 0; border: 0; background: none; cursor: pointer; color: var(--text-faint); padding: .1rem; border-radius: 6px; transition: opacity .12s; }
.chat-del:hover { color: var(--red); background: var(--red-soft); }
.chat-msg-body { color: var(--text); word-wrap: break-word; overflow-wrap: anywhere; margin-top: .05rem; }
.chat-msg-body a { color: var(--brand); text-decoration: underline; }
.chat-mention { background: var(--brand-soft); color: var(--brand); border-radius: 4px; padding: 0 .2rem; font-weight: 600; }

.chat-atts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .45rem; }
.chat-att-img { display: block; max-width: 260px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--border); }
.chat-att-img img { display: block; max-width: 100%; max-height: 220px; object-fit: cover; }
.chat-att-file { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); text-decoration: none; max-width: 280px; }
.chat-att-file:hover { background: var(--surface-2); text-decoration: none; }
.chat-att-file svg { color: var(--text-faint); flex: 0 0 auto; }
.caf-meta { display: flex; flex-direction: column; min-width: 0; }
.caf-name { font-weight: 500; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caf-size { font-size: .68rem; color: var(--text-faint); }

/* Composer */
.chat-composer { border-top: 1px solid var(--border); padding: .75rem 1.25rem 1rem; background: var(--surface); flex: 0 0 auto; }
.cc-files { display: none; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.cc-chip { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: .25rem .6rem; font-size: .72rem; color: var(--text-soft); }
.cc-row { display: flex; align-items: flex-end; gap: .5rem; border: 1px solid var(--border-strong); border-radius: var(--r); padding: .3rem .35rem .3rem .45rem; background: var(--surface); }
.cc-row:focus-within { border-color: var(--brand); }
.cc-attach { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); cursor: pointer; color: var(--text-faint); flex: 0 0 auto; }
.cc-attach:hover { background: var(--surface-2); color: var(--brand); }
#cc-body { flex: 1; border: 0; outline: none; resize: none; background: none; font: inherit; color: var(--text); padding: .5rem 0; max-height: 160px; line-height: 1.45; }
.cc-send { flex: 0 0 auto; }

/* ----- Chat: threads, reactions, editing --------------------------------- */
.chat-msg { position: relative; }
.chat-actions { position: absolute; top: .15rem; right: .4rem; display: flex; gap: .05rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .1rem; opacity: 0; pointer-events: none; transition: opacity .12s; box-shadow: var(--shadow-sm); }
.chat-msg:hover .chat-actions { opacity: 1; pointer-events: auto; }
.ca-btn { border: 0; background: none; cursor: pointer; padding: .25rem; border-radius: 6px; color: var(--text-soft); display: grid; place-items: center; font-size: .9rem; line-height: 1; }
.ca-btn:hover { background: var(--surface-2); color: var(--text); }
.ca-btn svg { width: 15px; height: 15px; }
.ca-danger:hover { background: var(--red-soft); color: var(--red); }
.cm-edited { font-size: .68rem; color: var(--text-faint); }

.chat-reactions { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.re-chip { display: inline-flex; align-items: center; gap: .25rem; border: 1px solid var(--border); background: var(--surface-2); border-radius: 999px; padding: .12rem .5rem; cursor: pointer; font-size: .82rem; color: var(--text-soft); line-height: 1.4; }
.re-chip:hover { border-color: var(--border-strong); }
.re-chip.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.re-n { font-weight: 600; font-size: .72rem; }

.cm-thread { display: inline-flex; align-items: center; gap: .35rem; margin-top: .4rem; border: 1px solid transparent; background: none; cursor: pointer; color: var(--brand); font-weight: 600; font-size: .78rem; padding: .2rem .45rem; border-radius: 8px; }
.cm-thread:hover { background: var(--brand-soft); }

.emoji-palette { position: fixed; z-index: 200; display: flex; gap: .15rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: .3rem; box-shadow: var(--shadow-lg); }
.emoji-palette[hidden] { display: none; }
.emoji-palette button { border: 0; background: none; cursor: pointer; font-size: 1.15rem; padding: .2rem .3rem; border-radius: 8px; line-height: 1; }
.emoji-palette button:hover { background: var(--surface-2); }

.cm-edit { display: flex; flex-direction: column; gap: .4rem; }
.cm-edit-ta { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: .5rem .6rem; font: inherit; resize: none; background: var(--surface); color: var(--text); max-height: 200px; }
.cm-edit-ta:focus { outline: none; border-color: var(--brand); }
.cm-edit-actions { display: flex; gap: .4rem; justify-content: flex-end; }

/* Thread panel */
.chat-thread { width: 380px; flex: 0 0 380px; border-left: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
.chat-thread[hidden] { display: none; }
.ct-head { display: flex; align-items: center; padding: .85rem 1rem; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.ct-head h3 { font-size: 1rem; flex: 1; }
.ct-close { border: 0; background: none; cursor: pointer; color: var(--text-faint); padding: .25rem; border-radius: 6px; }
.ct-close:hover { background: var(--surface-2); color: var(--text); }
.ct-stream { flex: 1; overflow-y: auto; min-height: 0; padding: .85rem 1rem; }
.ct-stream .cm-thread { display: none; }
.ct-divider { font-size: .7rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin: .6rem 0; padding-bottom: .35rem; border-bottom: 1px solid var(--border); }
.ct-composer { border-top: 1px solid var(--border); padding: .75rem 1rem 1rem; }

@media (max-width: 900px) {
    .chat-thread { position: absolute; right: 0; top: 0; bottom: 0; box-shadow: var(--shadow-lg); }
}

/* ==========================================================================
   Inbox — unified external comms (reuses the chat shell + .cr-item, .cr-badge)
   ========================================================================== */
.inbox .chat-rail-head { display: flex; align-items: center; }
.inbox .chat-rail-head .cr-add { margin-left: auto; }

.ib-filters { display: flex; flex-wrap: wrap; gap: .3rem; padding: .35rem .65rem 0; }
.ib-filter { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); text-decoration: none; }
.ib-filter:hover { color: var(--text); text-decoration: none; border-color: var(--border-strong); }
.ib-filter.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.ib-fcount { font-variant-numeric: tabular-nums; opacity: .7; font-weight: 500; }
.ib-filter.on .ib-fcount { opacity: .85; }
.ib-filter .cr-badge { padding: .04rem .32rem; min-width: 0; }
.ib-toggle { padding: .45rem .65rem .25rem; }
.ib-unread-toggle { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--text-faint); text-decoration: none; }
.ib-unread-toggle svg { opacity: .35; }
.ib-unread-toggle.on { color: var(--brand); font-weight: 600; }
.ib-unread-toggle.on svg { opacity: 1; }

/* Conversation rows in the rail */
.ib-convo { align-items: flex-start; padding: .55rem .6rem; }
.ib-ch-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--surface); color: var(--text-soft); flex: 0 0 auto; margin-top: .1rem; }
.ib-convo.on .ib-ch-ic { background: rgba(255,255,255,.18); color: #fff; }
.ib-convo-main { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: .1rem; }
.ib-convo-top { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.ib-convo-top .cr-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-convo-time { font-size: .68rem; color: var(--text-faint); flex: 0 0 auto; }
.ib-convo.on .ib-convo-time { color: rgba(255,255,255,.7); }
.ib-convo-sub { font-size: .76rem; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.ib-convo.on .ib-convo-sub { color: rgba(255,255,255,.78); }
.ib-convo.is-unread .cr-name { font-weight: 700; color: var(--text); }
.ib-convo.is-unread.on .cr-name { color: #fff; }

/* Thread header + the connection note */
.ib-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ib-head h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-head .cm-topic { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .25rem; }
.ib-note { display: flex; align-items: center; gap: .4rem; padding: .5rem 1.25rem; background: var(--amber-soft); color: #8A5418; font-size: .78rem; border-bottom: 1px solid var(--border); }
.ib-note svg { flex: 0 0 auto; }

/* Message bubbles (inbound left / outbound right) */
.ib-stream { gap: .65rem; }
.ib-msg { display: flex; max-width: 78%; }
.ib-msg.in { align-self: flex-start; }
.ib-msg.out { align-self: flex-end; }
.ib-bubble { border: 1px solid var(--border); border-radius: var(--r); padding: .55rem .8rem; background: var(--surface); box-shadow: var(--shadow-sm); }
.ib-msg.in .ib-bubble { background: var(--surface); border-bottom-left-radius: 4px; }
.ib-msg.out .ib-bubble { background: var(--brand-soft); border-color: transparent; border-bottom-right-radius: 4px; }
.ib-msg-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .2rem; }
.ib-sender { font-weight: 700; font-size: .78rem; }
.ib-time { font-size: .68rem; color: var(--text-faint); }
.ib-msg-body { color: var(--text); word-wrap: break-word; overflow-wrap: anywhere; line-height: 1.5; }
.ib-msg-body a { color: var(--brand); text-decoration: underline; }

/* Manual-logging area (channels with no API, e.g. TikTok) */
.ib-manual { border-top: 1px solid var(--border); padding: .75rem 1.25rem 1rem; background: var(--surface); flex: 0 0 auto; }
.ib-manual-tabs { display: inline-flex; gap: .2rem; background: var(--surface-2); padding: .2rem; border-radius: 999px; margin-bottom: .6rem; }
.ib-manual-tabs button { border: 0; background: none; cursor: pointer; padding: .3rem .7rem; border-radius: 999px; font: inherit; font-size: .74rem; font-weight: 600; color: var(--text-soft); }
.ib-manual-tabs button.on { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }
.ib-manual-form textarea { width: 100%; }

#ib-body { flex: 1; border: 0; outline: none; resize: none; background: none; font: inherit; color: var(--text); padding: .5rem 0; max-height: 160px; line-height: 1.45; }

/* ----- Chat: search + in-Hub links --------------------------------------- */
.chat-rail-head { display: flex; flex-direction: column; gap: .5rem; }
.cr-search { display: flex; align-items: center; gap: .4rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .3rem .5rem; color: var(--text-faint); }
.cr-search svg { flex: 0 0 auto; }
.cr-search input { border: 0; background: none; outline: none; font: inherit; color: var(--text); width: 100%; }
.cr-results { display: flex; flex-direction: column; gap: .2rem; padding: .25rem 0; }
.cr-result { display: block; padding: .5rem .6rem; border-radius: var(--r-sm); text-decoration: none; color: var(--text); }
.cr-result:hover { background: rgba(0,0,0,.04); text-decoration: none; }
.cr-result-top { display: flex; justify-content: space-between; gap: .5rem; }
.cr-result-ch { font-weight: 600; color: var(--brand); font-size: .8rem; }
.cr-result-when { font-size: .68rem; color: var(--text-faint); flex: 0 0 auto; }
.cr-result-author { font-size: .72rem; color: var(--text-soft); }
.cr-result-snip { font-size: .8rem; color: var(--text-soft); margin-top: .15rem; }
.cr-result-snip mark, .cr-result-ch mark { background: var(--amber-soft); color: var(--text); padding: 0 .1rem; border-radius: 3px; }
.cr-empty { padding: 1rem .6rem; color: var(--text-faint); font-size: .85rem; text-align: center; }

/* In-app link rendered inside a message */
.hub-link { color: var(--brand); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--brand-soft); }
.hub-link:hover { text-decoration: none; border-bottom-color: var(--brand); }

/* Link picker */
.lp-results { margin-top: .6rem; max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: .1rem; }
.lp-group { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: .6rem; color: var(--text-faint); padding: .6rem .3rem .25rem; font-weight: 600; }
.lp-item { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; border: 0; background: none; cursor: pointer; text-align: left; padding: .5rem .55rem; border-radius: var(--r-sm); font: inherit; color: var(--text); }
.lp-item:hover { background: var(--surface-2); }
.lp-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-item-sub { font-size: .66rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; flex: 0 0 auto; }

/* Flash a message when jumped to from search */
@keyframes cmFlash { 0% { background: var(--amber-soft); } 100% { background: transparent; } }
.cm-flash { animation: cmFlash 2.2s ease-out; border-radius: var(--r-sm); }

/* ----- Chat: archived chats ---------------------------------------------- */
.cr-archived > summary { display: flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; font-size: .6rem; color: var(--text-faint); padding: .4rem .6rem; font-weight: 600; }
.cr-archived > summary::-webkit-details-marker { display: none; }
.cr-archived > summary:hover { color: var(--text-soft); }
.cr-arch { opacity: .7; }
.cr-arch:hover { opacity: 1; }
.cm-arch-tag { font-size: .58rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); border: 1px solid var(--border-strong); border-radius: 999px; padding: .08rem .45rem; vertical-align: middle; }
.chat-arch-banner { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; padding: .6rem 1.25rem; background: var(--amber-soft); color: var(--walnut); font-size: .82rem; border-bottom: 1px solid var(--border); }
.chat-arch-banner svg { flex: 0 0 auto; }

/* ----- Chat: collapsible sidebar sections -------------------------------- */
.cr-section { margin-top: .5rem; }
.cr-section:first-child { margin-top: .25rem; }
.cr-sec-head { display: flex; align-items: center; gap: .1rem; padding-right: .3rem; }
.cr-sec-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: .25rem; border: 0; background: none; cursor: pointer; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; font-size: .6rem; font-weight: 600; color: var(--text-faint); padding: .4rem .35rem .25rem .35rem; text-align: left; }
.cr-sec-toggle:hover { color: var(--text-soft); }
.cr-caret { display: inline-flex; flex: 0 0 auto; transition: transform .15s ease; transform: rotate(90deg); }
.cr-section.collapsed .cr-caret { transform: rotate(0deg); }
.cr-sec-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; }
.cr-sec-name svg { flex: 0 0 auto; }
.cr-section.collapsed .cr-sec-body { display: none; }
.cr-sec-empty { font-size: .72rem; color: var(--text-faint); padding: .15rem .6rem .35rem; line-height: 1.5; }
.cr-sec-empty svg { vertical-align: -2px; }
.cr-sec-badge { background: var(--red); color: #fff; font-size: .58rem; font-weight: 700; padding: .1rem .35rem; border-radius: 999px; min-width: 16px; text-align: center; }
.cr-sec-badge[hidden] { display: none; }
.cr-sec-head .cr-add { margin-left: .1rem; }
.cr-sec-menu { display: inline-grid; place-items: center; font-size: 0; }

/* Channel row + its move (⋯) button */
.cr-item-wrap { display: flex; align-items: center; gap: .05rem; }
.cr-item-wrap > .cr-item { flex: 1; min-width: 0; }
.cr-kebab { flex: 0 0 auto; border: 0; background: none; color: var(--text-faint); cursor: pointer; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .1s; }
.cr-item-wrap:hover .cr-kebab, .cr-kebab:focus-visible { opacity: 1; pointer-events: auto; }
.cr-kebab:hover { background: rgba(0,0,0,.06); color: var(--text); }

/* Drag-to-section: grip handle + drag/drop affordances */
.cr-grip { flex: 0 0 auto; width: 11px; height: 16px; cursor: grab; opacity: 0; transition: opacity .1s; color: var(--text-faint); background-image: radial-gradient(currentColor 1px, transparent 1.4px); background-size: 4px 4px; background-position: center; }
.cr-item-wrap:hover .cr-grip { opacity: .5; }
.cr-grip:hover { opacity: .9; }
.cr-grip:active { cursor: grabbing; }
.cr-item-wrap.dragging { opacity: .4; }
.cr-section.drop-target > .cr-sec-body { outline: 2px dashed var(--brand); outline-offset: -3px; border-radius: var(--r-sm); background: var(--brand-soft); min-height: 1.6rem; }
.cr-section.drop-target > .cr-sec-head .cr-sec-name { color: var(--brand); }

/* New section button */
.cr-newsec { display: flex; align-items: center; gap: .35rem; width: calc(100% - .4rem); margin: .4rem .2rem .25rem; border: 1px dashed var(--border-strong); background: none; color: var(--text-faint); cursor: pointer; font: inherit; font-size: .76rem; padding: .4rem .5rem; border-radius: var(--r-sm); }
.cr-newsec:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.cr-newsec svg { flex: 0 0 auto; }

/* Shared rail popover (channel move-to-section + section rename/delete) */
.cr-menu { position: fixed; z-index: 220; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-lg); padding: .25rem; min-width: 190px; max-width: 260px; }
.cr-menu[hidden] { display: none; }
.cr-menu-head { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: .58rem; color: var(--text-faint); padding: .35rem .5rem .3rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-menu-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; border: 0; background: none; cursor: pointer; text-align: left; padding: .4rem .5rem; border-radius: 7px; font: inherit; font-size: .82rem; color: var(--text); }
.cr-menu-item:hover { background: var(--surface-2); }
.cr-menu-item.on { color: var(--brand); font-weight: 600; }
.cr-menu-item > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-menu-check { flex: 0 0 auto; color: var(--brand); }
.cr-menu-new { color: var(--brand); }
.cr-menu-danger { color: var(--red); }
.cr-menu-danger:hover { background: var(--red); color: #fff; }
.cr-menu-sep { height: 1px; background: var(--border); margin: .25rem .2rem; }

/* ----- Email marketing (Marketing → Email) ------------------------------- */
.email-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.email-list { list-style: none; margin: 0; padding: 0; }
.email-list li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.email-list li:last-child { border-bottom: 0; }
.email-list li > a { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.email-list li > a .text-xs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Template editor: editor + live preview side by side */
.tpl-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.tpl-preview-card { position: sticky; top: 1rem; }
.code-area { font-family: var(--font-mono); font-size: .8rem; line-height: 1.5; min-height: 360px; white-space: pre; tab-size: 2; }
.merge-help { border-top: 1px solid var(--border); padding-top: .8rem; }
.merge-tag code { font-size: .72rem; }

/* ----- Email: visual block builder --------------------------------------- */
.tpl-builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.bld-add-wrap { position: relative; }
.bld-palette { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-lg); padding: .3rem; min-width: 180px; max-height: 360px; overflow-y: auto; }
.bld-palette[hidden] { display: none; }
.bld-pal-group { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: .58rem; color: var(--text-faint); padding: .5rem .5rem .25rem; font-weight: 600; }
.bld-pal-item { display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; font: inherit; font-size: .85rem; color: var(--text); padding: .4rem .55rem; border-radius: 7px; }
.bld-pal-item:hover { background: var(--surface-2); color: var(--brand); }

.bld-mergetags { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; padding-bottom: .7rem; margin-bottom: .6rem; border-bottom: 1px solid var(--border); }

.blk-stack { display: flex; flex-direction: column; gap: .6rem; }
.blk-card { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; }
.blk-card.dragging { opacity: .45; }
.blk-head { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.blk-grip { flex: 0 0 auto; width: 11px; height: 16px; cursor: grab; color: var(--text-faint); background-image: radial-gradient(currentColor 1px, transparent 1.4px); background-size: 4px 4px; background-position: center; }
.blk-grip:active { cursor: grabbing; }
.blk-label { flex: 1; font-weight: 600; font-size: .82rem; color: var(--text); }
.blk-acts { display: flex; gap: .1rem; flex: 0 0 auto; }
.blk-act { border: 0; background: none; cursor: pointer; color: var(--text-soft); width: 26px; height: 26px; border-radius: 6px; font-size: .9rem; line-height: 1; display: grid; place-items: center; }
.blk-act:hover { background: rgba(0,0,0,.06); color: var(--text); }
.blk-act-danger:hover { background: var(--red); color: #fff; }

.blk-fields { padding: .7rem; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .7rem; }
.blk-field { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.blk-field-wide { grid-column: 1 / -1; }
.blk-field > label { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 600; }
.blk-input { width: 100%; }
textarea.blk-input { resize: vertical; min-height: 58px; font: inherit; line-height: 1.5; }
.blk-hint { font-size: .68rem; color: var(--text-faint); }
.blk-color { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.blk-color-input { width: 34px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; flex: 0 0 auto; }
.blk-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); cursor: pointer; padding: 0; flex: 0 0 auto; }
.blk-align { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 7px; overflow: hidden; width: max-content; }
.blk-align-btn { border: 0; background: var(--surface); cursor: pointer; font: inherit; font-size: .72rem; font-weight: 600; color: var(--text-soft); width: 30px; height: 28px; }
.blk-align-btn + .blk-align-btn { border-left: 1px solid var(--border); }
.blk-align-btn.on { background: var(--brand); color: #fff; }

.blk-empty { text-align: center; padding: 2rem 1rem; color: var(--text-faint); }
.blk-empty svg { color: var(--border-strong); margin-bottom: .4rem; }

.bld-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; }
.bld-seg button { border: 0; background: var(--surface); cursor: pointer; font: inherit; font-size: .72rem; font-weight: 500; color: var(--text-soft); padding: .3rem .65rem; display: inline-flex; align-items: center; gap: .3rem; }
.bld-seg button + button { border-left: 1px solid var(--border); }
.bld-seg button.on { background: var(--brand); color: #fff; }

.bld-frame-wrap { transition: max-width .2s ease; }
.bld-frame-wrap.mobile { max-width: 390px; margin: 0 auto; box-shadow: 0 0 0 1px var(--border); }
.bld-frame-wrap.mobile iframe { height: 680px; }

@media (max-width: 980px) { .tpl-builder { grid-template-columns: 1fr; } }

/* Campaign analytics: funnel bars */
.funnel-row { margin-bottom: .85rem; }
.funnel-row:last-child { margin-bottom: 0; }
.funnel-row .bar { margin-top: .3rem; }
.stat-ic-inline { display: inline-flex; flex: 0 0 auto; }

@media (max-width: 860px) {
    .email-grid, .tpl-editor { grid-template-columns: 1fr; }
    .tpl-preview-card { position: static; }
}

.chat-arch-banner .cab-action { margin-left: auto; flex: 0 0 auto; }

/* ----- Finance: unit economics ------------------------------------------- */
.sku-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.sku-tab { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 999px; padding: .4rem .8rem; cursor: pointer; font: inherit; color: var(--text-soft); }
.sku-tab:hover { background: var(--surface-2); }
.sku-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.sku-tab .st-name { font-weight: 600; font-size: .82rem; }
.sku-tab .st-pct { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; }
.sku-tab.on .st-pct { color: #fff !important; }
.cost-line { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.cost-line > .input:first-child { flex: 1; }
.cost-amt { display: inline-flex; align-items: center; gap: .25rem; }
.cost-amt .cur { color: var(--text-faint); font-size: .85rem; }
.cost-amt .input { width: 120px; text-align: right; }

/* ----- Chat: formatting toolbar, @mentions, voice notes ------------------ */
.cc-toolbar { display: flex; align-items: center; gap: .15rem; padding: .15rem .1rem .35rem; }
.cc-fmt { border: 0; background: none; cursor: pointer; color: var(--text-soft); min-width: 28px; height: 26px; border-radius: 6px; font-size: .8rem; display: grid; place-items: center; padding: 0 .35rem; }
.cc-fmt:hover { background: var(--surface-2); color: var(--text); }
.cc-at { font-weight: 700; font-size: .95rem; color: var(--brand); }
.cc-at:hover { background: var(--brand-soft); color: var(--brand); }
.cc-toolbar .spacer { flex: 1; }
.cc-mic { border: 0; background: none; cursor: pointer; color: var(--text-soft); width: 30px; height: 28px; border-radius: 6px; display: grid; place-items: center; }
.cc-mic:hover { background: var(--surface-2); color: var(--brand); }
.cc-mic.recording { color: #fff; background: var(--red); animation: micPulse 1.2s ease-in-out infinite; }
@keyframes micPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.cc-chip-x { border: 0; background: none; cursor: pointer; color: var(--text-faint); margin-left: .35rem; font-size: .7rem; padding: 0; }
.cc-chip-x:hover { color: var(--red); }

.mention-pop { position: fixed; z-index: 200; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-lg); padding: .25rem; min-width: 200px; max-width: 280px; }
.mention-pop[hidden] { display: none; }
.mention-item { display: flex; align-items: baseline; gap: .4rem; width: 100%; border: 0; background: none; cursor: pointer; text-align: left; padding: .4rem .5rem; border-radius: 8px; font: inherit; color: var(--text); }
.mention-item.on, .mention-item:hover { background: var(--surface-2); }
.mention-item .mi-h { font-weight: 600; color: var(--brand); }
.mention-item .mi-n { font-size: .78rem; color: var(--text-soft); }

.chat-mention.me { background: var(--amber-soft); color: var(--walnut); }

.chat-att-audio { display: flex; flex-direction: column; gap: .3rem; margin-top: .2rem; max-width: 320px; }
.chat-att-audio .caf-name { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; color: var(--text-soft); }
.chat-att-audio audio { width: 100%; height: 36px; }

.chat-msg-body .chat-ul { margin: .25rem 0; padding-left: 1.2rem; }
.chat-msg-body .chat-ul li { margin: .1rem 0; }
.chat-msg-body code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 0 .3rem; font-family: var(--font-mono); font-size: .85em; }
.chat-msg-body del { opacity: .7; }

/* ----- Marketing: flow builder ------------------------------------------- */
.flow-step { border: 1px solid var(--border); border-radius: var(--r-sm); padding: .6rem .7rem; margin-bottom: .6rem; background: var(--surface-2); }
.fs-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; font-size: .82rem; color: var(--text-soft); }
.fs-num { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .72rem; font-weight: 700; flex: 0 0 auto; }
.fs-wait { display: inline-flex; align-items: center; gap: .35rem; }
.fs-head .spacer { flex: 1; }
.fs-head .fs-delay, .fs-head .fs-unit, .fs-head .fs-channel { height: 30px; padding: .15rem .4rem; }
.flow-step .fs-subject { margin-bottom: .4rem; }

/* Influencer profile link */
.inf-link { display: inline-flex; align-items: center; gap: .3rem; }
.inf-link svg { opacity: .55; }
.inf-link:hover svg { opacity: 1; }

/* ----- Chat → mood board picker ------------------------------------------ */
.tb-what { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.tb-check { display: flex; align-items: center; gap: .5rem; flex: 1 1 160px; cursor: pointer;
    padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); font-size: .88rem; }
.tb-check span { display: inline-flex; align-items: center; gap: .4rem; }
.tb-check svg { width: 15px; height: 15px; opacity: .7; }
.tb-check em { color: var(--text-faint); font-style: normal; }
.tb-preview { margin: 0 0 .9rem; padding: .55rem .75rem; border-left: 3px solid var(--border);
    background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--text-soft);
    font-size: .84rem; white-space: pre-wrap; max-height: 96px; overflow: auto; }
.tb-err { color: var(--red); }
.tb-toast { position: fixed; bottom: 18px; left: 50%; transform: translate(-50%, 16px);
    display: flex; align-items: center; gap: .75rem; z-index: 120; opacity: 0; transition: opacity .25s, transform .25s;
    padding: .65rem .9rem; border-radius: var(--r-sm); background: var(--surface);
    border: 1px solid var(--border); border-left: 4px solid var(--green); box-shadow: var(--shadow-lg);
    font-size: .86rem; font-weight: 500; }
.tb-toast.show { opacity: 1; transform: translate(-50%, 0); }
.tb-toast a { color: var(--brand); font-weight: 600; white-space: nowrap; }

/* ----- Chat image lightbox (popup preview) ------------------------------- */
body.lbx-open { overflow: hidden; }
.lbx { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
    background: rgba(8, 12, 20, .82); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    padding: 3vh 4vw; animation: lbxIn .15s ease; }
.lbx[hidden] { display: none; }
@keyframes lbxIn { from { opacity: 0; } to { opacity: 1; } }
.lbx-fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.lbx-img { max-width: 100%; max-height: 86vh; object-fit: contain; border-radius: var(--r-sm);
    box-shadow: 0 12px 48px rgba(0,0,0,.5); background: #0b1220; }
.lbx-cap { display: flex; align-items: center; gap: 1rem; color: rgba(255,255,255,.85); font-size: .82rem; }
.lbx-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.lbx-open { color: #fff; opacity: .8; white-space: nowrap; text-decoration: underline; }
.lbx-open:hover { opacity: 1; }
.lbx-close { position: fixed; top: 16px; right: 18px; width: 40px; height: 40px; border-radius: 50%;
    border: 0; cursor: pointer; background: rgba(255,255,255,.12); color: #fff; font-size: 1.2rem; line-height: 1; }
.lbx-close:hover { background: rgba(255,255,255,.22); }
.lbx-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
    border: 0; cursor: pointer; background: rgba(255,255,255,.12); color: #fff; font-size: 1.7rem; line-height: 1;
    display: grid; place-items: center; }
.lbx-nav:hover { background: rgba(255,255,255,.22); }
.lbx-prev { left: 16px; }
.lbx-next { right: 16px; }
@media (max-width: 640px) { .lbx-nav { width: 38px; height: 38px; } .lbx-name { max-width: 38vw; } }