:root {
  --ink: #15213a;
  --ink-soft: #34415a;
  --muted: #6f7b90;
  --navy: #10254d;
  --navy-2: #173666;
  --blue: #2f6df6;
  --blue-dark: #2057ce;
  --paper: #f7f9fc;
  --surface: #fff;
  --surface-2: #f2f5fa;
  --line: #e4e9f1;
  --line-strong: #d3dae6;
  --danger: #cf3f54;
  --success: #167a68;
  --warning: #9a6500;
  --cyan: #dff8fb;
  --lilac: #eee8ff;
  --coral: #ffe9e2;
  --gold: #fff3c9;
  --sidebar-width: 76px;
  --appbar-height: 52px;
  --shadow-sm: 0 1px 2px rgba(16,37,77,.04), 0 4px 14px rgba(16,37,77,.05);
  --shadow-lg: 0 24px 70px rgba(16,37,77,.16);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: clamp(15px, .18vw + 12.5px, 17px); }
button, input, textarea, select { font: inherit; }
button, summary { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.025em; }
svg { display: block; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); line-height: 1.6; }
.eyebrow { margin: 0 0 5px; color: #788398; font-size: clamp(10px, .1vw + 9px, 11px); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

/* Application shell */
.app-body { min-height: 100vh; }
.app-body.nav-expanded { --sidebar-width: 248px; }
.app-bar { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--appbar-height); display: grid; grid-template-columns: var(--sidebar-width) minmax(260px, 520px) 1fr; align-items: center; color: white; background: var(--navy); box-shadow: 0 1px 0 rgba(255,255,255,.08); transition: grid-template-columns .2s ease; }
.app-bar-brand { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border-right: 1px solid rgba(255,255,255,.1); }
.app-bar-brand a { min-width: 0; display: block; }
.app-bar-brand img { width: 66px; display: block; filter: brightness(0) invert(1); transition: width .2s ease; }
.nav-collapsed .app-bar-brand img { width: 42px; }
.icon-button { width: 34px; height: 34px; display: inline-grid; place-items: center; flex: 0 0 auto; padding: 0; color: inherit; background: transparent; border: 0; border-radius: 9px; text-decoration: none; }
.icon-button:hover { background: rgba(255,255,255,.1); }
.icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.global-search { position: relative; width: min(100%, 460px); margin-left: 18px; }
.global-search svg { position: absolute; left: 11px; top: 9px; width: 15px; height: 15px; fill: none; stroke: rgba(255,255,255,.7); stroke-width: 2; }
.global-search input { height: 34px; padding: 7px 56px 7px 34px; color: white; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; box-shadow: none; }
.global-search input::placeholder { color: rgba(255,255,255,.64); }
.global-search input:focus { background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.3); box-shadow: none; }
.global-search kbd { position: absolute; right: 9px; top: 8px; padding: 2px 6px; color: rgba(255,255,255,.68); background: rgba(0,0,0,.14); border-radius: 4px; font: 10px/1.4 inherit; }
.app-bar-actions { justify-self: end; display: flex; align-items: center; gap: 5px; padding-right: 13px; }
.user-chip { width: 30px; height: 30px; display: grid; place-items: center; margin-left: 4px; color: var(--navy); background: #ffd7b9; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; font-size: 12px; font-weight: 800; }
.sidebar { position: fixed; inset: var(--appbar-height) auto 0 0; z-index: 40; width: var(--sidebar-width); display: flex; flex-direction: column; justify-content: space-between; overflow-x: hidden; overflow-y: auto; padding: 10px 8px; background: #f1f4f8; border-right: 1px solid var(--line); transition: width .2s ease; }
.nav-groups { display: grid; gap: 5px; }
.nav-group { padding-bottom: 5px; border-bottom: 1px solid #e1e6ee; }
.nav-group:last-child { border: 0; }
.nav-group summary { padding: 9px 9px 5px; color: #7b8798; list-style: none; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-link { min-height: 42px; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 7px; margin: 1px 0; padding: 4px 8px; color: #42516a; border-radius: 9px; font-size: 13px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.nav-link:hover { color: var(--navy); background: #fff; }
.nav-link.active { color: var(--navy); background: #dfe8fb; box-shadow: inset 3px 0 var(--blue); }
.nav-icon { width: 30px; height: 30px; display: grid; place-items: center; }
.nav-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-label { overflow: hidden; text-overflow: ellipsis; }
.count { min-width: 21px; padding: 2px 6px; color: #fff; background: var(--blue); border-radius: 999px; font-size: 10px; text-align: center; }
.sidebar-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 7px 2px; border-top: 1px solid var(--line); }
.sidebar-footer > div { min-width: 0; display: grid; }
.sidebar-footer strong, .sidebar-footer small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer strong { font-size: 11px; }
.sidebar-footer small { color: var(--muted); font-size: 9px; }
.sidebar-footer .icon-button { color: var(--muted); }
.nav-collapsed .nav-group summary, .nav-collapsed .nav-label, .nav-collapsed .nav-link .count, .nav-collapsed .sidebar-footer > div { display: none; }
.nav-collapsed .nav-link { grid-template-columns: 1fr; justify-items: center; padding: 4px; }
.nav-collapsed .sidebar-footer { justify-content: center; }
.main-content { min-height: 100vh; margin-left: var(--sidebar-width); padding: calc(var(--appbar-height) + 20px) 24px 54px; transition: margin-left .2s ease; }

/* Global controls */
label { display: grid; gap: 7px; color: var(--ink-soft); font-size: clamp(12px, .1vw + 11px, 13px); font-weight: 700; }
input, textarea, select { width: 100%; padding: 10px 12px; color: var(--ink); background: white; border: 1px solid var(--line-strong); border-radius: 8px; outline: none; transition: border .15s ease, box-shadow .15s ease; }
textarea { resize: vertical; line-height: 1.5; }
input:focus, textarea:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,109,246,.12); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 9px 15px; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: 0 1px 1px rgba(16,37,77,.04); font-size: 13px; font-weight: 750; text-decoration: none; transition: transform .12s ease, border .12s ease, background .12s ease; }
.button:hover { border-color: #b9c5d7; transform: translateY(-1px); }
.button:disabled { opacity: .5; cursor: wait; transform: none; }
.button.primary { color: white; background: var(--blue); border-color: var(--blue); }
.button.primary:hover { background: var(--blue-dark); }
.button.danger, .danger { color: var(--danger); }
.button.danger { background: #fff7f8; border-color: #f0c5cc; }
.button.small { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.wide-button { width: 100%; }
.text-button, .text-link { padding: 0; color: var(--blue); background: transparent; border: 0; font-size: 11px; font-weight: 750; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.compact-actions, .form-actions, .editor-actions, .inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.form-actions { justify-content: space-between; }
.stack-form { display: grid; gap: 14px; }
.form-grid, .form-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.form-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.toggle { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
.toggle input { width: 17px; height: 17px; padding: 0; accent-color: var(--blue); }
fieldset { padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
legend { padding: 0 6px; color: var(--muted); font-size: 11px; font-weight: 750; }

/* Page surfaces */
.topbar, .workspace-toolbar { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 0 0 18px; }
.page-heading h1, .workspace-toolbar h1 { margin: 0 0 5px; font-size: clamp(27px,3vw,36px); line-height: 1.08; }
.page-heading p:last-child { margin: 0; color: var(--muted); line-height: 1.55; }
.compact-heading { align-items: center; }
.provider, .live-indicator { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.status-dot, .live-indicator i { width: 7px; height: 7px; background: #20a987; border-radius: 50%; box-shadow: 0 0 0 3px rgba(32,169,135,.14); }
.panel { min-width: 0; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.panel.wide { width: 100%; margin: 18px auto 0; }
.panel-heading, .section-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.panel-heading h2, .section-title h2 { margin: 0; font-size: 19px; }
.panel-heading > span { color: var(--muted); font-size: 11px; }
.notice { width: 100%; margin: 0 0 14px; padding: 12px 14px; border: 1px solid transparent; border-radius: 9px; font-size: 12px; font-weight: 650; }
.notice.success { color: #126b5c; background: #e6f7f3; border-color: #c6eae2; }
.notice.error, .alert { color: #9b3041; background: #fff0f2; border-color: #f2cdd3; }
.empty { padding: 34px 16px; color: var(--muted); text-align: center; }
.large-empty { min-height: 240px; display: grid; place-content: center; justify-items: center; }
.large-empty h2 { margin: 8px 0 5px; color: var(--ink); }
.empty-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--success); background: #e4f6f2; border-radius: 50%; font-size: 20px; }
.status, .pill, .channel-label, .ai-tag, .human-tag, .escalated-tag { display: inline-flex; align-items: center; width: max-content; padding: 3px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.status, .pill, .channel-label { color: #5f6b7e; background: #edf1f6; }
.status-completed, .status-approved, .status-published, .status-enabled, .status-subscribed, .status-active { color: #087060; background: #dff5ef; }
.status-awaiting_approval, .status-pending, .status-unfulfilled { color: #8b5c00; background: #fff0bd; }
.status-scheduled, .status-publishing, .status-open { color: #235cc4; background: #e4edff; }
.status-failed, .status-rejected, .status-cancelled, .status-canceled { color: #ac3447; background: #ffe8ec; }
.status-paused { color: #7654b4; background: #eee6ff; }
.ai-tag { color: #245bbb; background: #e1ebff; }
.human-tag { color: #744bb1; background: #eee6ff; }
.escalated-tag { color: #7c5100; background: #ffe18a; }
.automation-state { padding: 8px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.automation-state.enabled { color: #087060; background: #dff5ef; }
.automation-state.disabled { color: #9b3041; background: #ffe8ec; }

/* Dashboard */
.dashboard-workspace { max-width: 1540px; margin: 0 auto; }
.dashboard-hero { position: relative; min-height: 190px; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); align-items: center; overflow: hidden; padding: clamp(26px,4vw,48px); color: var(--navy); background: linear-gradient(105deg,#dff8f7 0%,#c9f3ff 48%,#e9e1ff 100%); border-radius: 16px; box-shadow: var(--shadow-sm); }
.dashboard-hero h2 { max-width: 700px; margin: 10px 0 8px; font-size: clamp(28px,4vw,48px); line-height: 1.02; }
.dashboard-hero p { margin: 0; color: #435775; font-size: 15px; }
.hero-badge { padding: 5px 9px; color: #fff; background: var(--blue); border-radius: 999px; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.hero-art { position: relative; height: 140px; }
.hero-art span { position: absolute; display: block; border-radius: 38% 62% 63% 37% / 52% 43% 57% 48%; box-shadow: 0 16px 30px rgba(30,67,127,.12); }
.hero-art span:nth-child(1) { width: 120px; height: 120px; right: 110px; top: 8px; background: #ff9f80; transform: rotate(18deg); }
.hero-art span:nth-child(2) { width: 90px; height: 90px; right: 35px; top: 34px; background: #fff3a5; transform: rotate(-20deg); }
.hero-art span:nth-child(3) { width: 62px; height: 62px; right: 188px; top: 60px; background: #63d9ef; }
.hero-art span:nth-child(4) { width: 44px; height: 44px; right: 84px; top: 4px; background: #fff; }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 16px 0 28px; }
.metric-card { display: grid; gap: 4px; padding: 17px 18px; color: inherit; border: 1px solid rgba(16,37,77,.06); border-radius: 12px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.metric-card span, .metric-card small { color: #55627a; font-size: 11px; }
.metric-card strong { font-size: 30px; }
.tint-blue { background: #e4edff; }.tint-gold { background: var(--gold); }.tint-lilac { background: var(--lilac); }.tint-coral { background: var(--coral); }
.quick-actions { margin: 0 0 28px; }
.quick-action-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.quick-action-grid > a { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); text-decoration: none; }
.quick-action-grid > a:hover { border-color: #b7c8ee; }
.quick-action-grid strong, .quick-action-grid small { display: block; }
.quick-action-grid small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.quick-action-grid b { color: var(--blue); }
.quick-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; font-weight: 900; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(300px,.6fr); gap: 16px; }
.connection-list, .schedule-list { display: grid; gap: 8px; }
.connection-card, .schedule-row { display: flex; align-items: center; gap: 11px; padding: 11px; background: var(--surface-2); border-radius: 9px; }
.connection-card > div, .schedule-row > div { min-width: 0; display: grid; flex: 1; }
.connection-card small, .schedule-row time { margin-top: 2px; color: var(--muted); font-size: 10px; }
.connection-state { width: 8px; height: 8px; background: #c8cfda; border-radius: 50%; }.connection-state.online { background: #20a987; }
.safety-summary { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.safety-summary > div { display: flex; justify-content: space-between; font-size: 11px; }.safety-summary .enabled { color: var(--success); }.safety-summary .disabled { color: var(--danger); }
.agent-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.agent-card { display: grid; padding: 13px; background: var(--surface-2); border-radius: 9px; }
.agent-card > span { color: var(--blue); font-size: 9px; font-weight: 850; }.agent-card strong { margin: 7px 0 2px; font-size: 12px; }.agent-card small { color: var(--muted); font-size: 10px; }

/* Expandable rows */
.streamlined-list { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.stream-row { background: #fff; border-bottom: 1px solid var(--line); }
.stream-row:last-child { border-bottom: 0; }
.stream-row > summary { min-height: 62px; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding: 10px 14px; list-style: none; }
.stream-row > summary::-webkit-details-marker { display: none; }
.stream-row > summary:hover { background: #f7f9fd; }
.stream-row[open] > summary { background: #edf3ff; }
.row-dot { width: 9px; height: 9px; background: var(--blue); border-radius: 50%; box-shadow: 0 0 0 4px #e4edff; }
.row-primary { min-width: 0; display: grid; gap: 4px; }
.row-primary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.row-primary small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.row-chevron { color: var(--muted); transition: transform .15s ease; }
.stream-row[open] .row-chevron { transform: rotate(180deg); }
.row-detail { padding: 18px; background: #fbfcfe; border-top: 1px solid var(--line); }
.row-detail pre { max-height: 300px; overflow: auto; margin: 0; white-space: pre-wrap; font: 11px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; }
.row-thumbnail { width: 46px; height: 46px; object-fit: cover; background: #edf1f6; border-radius: 8px; }
.published-post-detail { display: grid; grid-template-columns: minmax(220px,380px) 1fr; gap: 20px; }.published-post-detail img { width: 100%; max-height: 390px; object-fit: cover; border-radius: 10px; }.published-post-detail p { line-height: 1.65; white-space: pre-wrap; }

/* Three-pane workspaces */
.full-height-workspace { height: calc(100vh - var(--appbar-height) - 36px); }
.workspace-toolbar { height: 46px; align-items: center; margin-bottom: 10px; }.workspace-toolbar h1 { font-size: 23px; }.workspace-toolbar-actions { display: flex; align-items: center; gap: 9px; }
.ops-shell { display: grid; grid-template-columns: minmax(270px,320px) minmax(430px,1fr) minmax(260px,310px); min-height: 690px; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.full-height-workspace .ops-shell { height: calc(100% - 56px); min-height: 560px; }
.ops-list { min-width: 0; overflow: hidden; background: #fafbfd; border-right: 1px solid var(--line); }
.ops-center { min-width: 0; overflow: hidden; background: white; }
.ops-inspector { min-width: 0; overflow-y: auto; background: #fbfcfe; border-left: 1px solid var(--line); }
.inbox-title { display: flex; align-items: center; justify-content: space-between; padding: 16px 15px 10px; }
.inbox-title h2 { margin: 0; font-size: 18px; }.inbox-title p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.inbox-count { min-width: 24px; padding: 4px 7px; color: #fff; background: var(--blue); border-radius: 999px; font-size: 10px; font-weight: 800; text-align: center; }
.inbox-tabs { display: grid; grid-template-columns: repeat(3,1fr); padding: 0 10px 8px; border-bottom: 1px solid var(--line); }
.inbox-tabs a { padding: 8px 4px; color: var(--muted); border-bottom: 2px solid transparent; font-size: 12px; font-weight: 750; text-align: center; text-decoration: none; }.inbox-tabs a.active { color: var(--blue); border-color: var(--blue); }
.live-search-box { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); }
.live-search-box input { padding: 10px 11px; background: #fff; font-size: 13px; }.live-search-box span { min-width: 24px; color: var(--muted); font-size: 11px; text-align: center; }
.inline-search { margin-bottom: 12px; padding: 0; border: 0; }
.ticket-scroll, .order-list-scroll, .crm-customer-scroll, .wellness-box-scroll { height: calc(100% - 132px); overflow-y: auto; padding: 6px; }
.ticket-row { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 12px; margin-bottom: 2px; padding: 12px 10px; color: inherit; border: 1px solid transparent; border-radius: 8px; text-decoration: none; }
.ticket-row:hover { background: #f0f4fb; }.ticket-row.selected { background: #dfe9ff; border-color: #c3d5fb; }.ticket-row.escalated { background: #fff3c7; border-color: #efd478; }
.ticket-identity { min-width: 0; display: grid; gap: 5px; }.ticket-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }.ticket-identity small { color: var(--muted); font-size: 11px; }.ticket-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ticket-subject { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }.ticket-subject p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--ink-soft); font-size: 13px; font-weight: 650; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.priority-dot { width: 7px; height: 7px; flex: 0 0 auto; margin-top: 4px; background: #c3cad5; border-radius: 50%; }.priority-high { background: #ed9c41; }.priority-urgent { background: var(--danger); }.priority-low { background: #6eb7d1; }
.helpdesk-thread { display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; }
.thread-toolbar { min-height: 63px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 15px; border-bottom: 1px solid var(--line); }
.thread-contact { min-width: 0; display: flex; align-items: center; gap: 10px; }.thread-contact > div { min-width: 0; }.thread-contact h2 { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }.thread-contact p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.contact-mark { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; color: #285bbb; background: #e2ebff; border-radius: 9px; font-size: 12px; font-weight: 850; }.contact-mark.large { width: 44px; height: 44px; font-size: 16px; }
.thread-actions { display: flex; align-items: center; gap: 6px; }.thread-actions select { width: auto; padding: 7px 24px 7px 8px; font-size: 10px; }
.thread-meta-bar { display: flex; align-items: center; gap: 8px; padding: 7px 15px; color: var(--muted); background: #fbfcfe; border-bottom: 1px solid var(--line); font-size: 9px; }
.message-thread { overflow-y: auto; background: #fff; }
.message { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 10px; padding: 15px 18px; border-bottom: 1px solid #edf0f5; }
.message.outbound { background: #f8faff; }.message.ai-message { background: #f5f8ff; }
.message-avatar { width: 30px; height: 30px; display: grid; place-items: center; color: #355a98; background: #e5edfb; border-radius: 8px; font-size: 10px; font-weight: 850; }.message.inbound .message-avatar { color: #8a5a25; background: #fff0d9; }
.message-content { min-width: 0; }.message-content header { display: flex; align-items: center; gap: 6px; }.message-content header strong { font-size: 13px; }.message-content time { margin-left: auto; color: var(--muted); font-size: 11px; }.message-content p { margin: 7px 0 0; color: #34415a; font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.helpdesk-composer { padding: 10px 14px 12px; background: #fff; border-top: 1px solid var(--line); }
.composer-tabs { display: flex; gap: 4px; margin-bottom: 6px; }.composer-tabs button { padding: 5px 8px; color: var(--muted); background: transparent; border: 0; border-radius: 6px; font-size: 10px; font-weight: 750; }.composer-tabs button.active { color: var(--blue); background: #edf3ff; }
.helpdesk-composer textarea { min-height: 82px; padding: 11px; font-size: 14px; }
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 7px; }.composer-footer > div { display: flex; align-items: center; gap: 10px; }.composer-footer span { color: var(--muted); font-size: 9px; }
.ai-draft-button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; color: #245bbb; background: #e5edff; border: 0; border-radius: 7px; font-size: 9px; font-weight: 800; }.ai-draft-button span { color: var(--blue); font-size: 12px; }
.inspector-heading { display: flex; align-items: center; gap: 10px; padding: 16px; border-bottom: 1px solid var(--line); }.inspector-heading h2 { margin: 0; font-size: 14px; }.inspector-heading p { margin: 3px 0 0; color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
.customer-inspector > details, .customer-inspector > section { padding: 14px 16px; border-bottom: 1px solid var(--line); }.customer-inspector > details > summary { display: flex; justify-content: space-between; color: var(--ink-soft); list-style: none; font-size: 10px; font-weight: 800; text-transform: uppercase; }.customer-inspector > details > summary::-webkit-details-marker { display: none; }
.customer-inspector dl { display: grid; gap: 10px; margin: 14px 0; }.customer-inspector dl div { display: grid; gap: 2px; }.customer-inspector dt { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.customer-inspector dd { margin: 0; overflow-wrap: anywhere; font-size: 13px; }
.inspector-order { display: grid; gap: 3px; margin: 10px 0 0; padding: 10px; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 10px; text-decoration: none; }.inspector-order span { color: var(--muted); }

/* Order, CRM, and Wellness workspaces */
.subscriptions-workspace, .crm-workspace, .marketing-workspace, .selling-plans-workspace, .blogs-workspace, .review-workspace { width: 100%; max-width: 1640px; margin: 0 auto; }
.orders-workspace { width: 100%; max-width: none; margin: 0; }
.orders-workspace.full-height-workspace { height: calc(100vh - var(--appbar-height) - 28px); }
.orders-workspace .page-heading { min-height: 58px; margin-bottom: 10px; }
.orders-workspace .orders-ops-shell { height: calc(100% - 68px); min-height: 620px; }
.orders-ops-shell, .wellness-box-shell, .crm-shell { min-height: 720px; }
.order-summary-row, .crm-customer-row, .wellness-box-row { display: grid; gap: 6px; margin: 0 0 2px; padding: 11px 10px; color: inherit; border: 1px solid transparent; border-radius: 8px; text-decoration: none; }.order-summary-row:hover, .crm-customer-row:hover, .wellness-box-row:hover { background: #f0f4fb; }.order-summary-row.selected, .crm-customer-row.selected, .wellness-box-row.selected { background: #dfe9ff; border-color: #c3d5fb; }
.order-summary-row > div, .order-summary-row footer, .crm-customer-row > div, .wellness-box-row > div, .wellness-box-row footer { display: flex; justify-content: space-between; gap: 8px; }.order-summary-row p, .crm-customer-row p, .wellness-box-row p { margin: 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.order-summary-row time, .wellness-box-row footer { color: var(--muted); font-size: 11px; }
.order-detail-card, .wellness-box-detail, .crm-history { overflow-y: auto; }
.order-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 17px 20px; border-bottom: 1px solid var(--line); }.order-detail-header h2 { margin: 2px 0 4px; font-size: 22px; }.order-detail-header p { margin: 0; color: var(--muted); font-size: 12px; }
.order-status-strip { display: grid; grid-template-columns: repeat(3,1fr); background: var(--line); gap: 1px; border-bottom: 1px solid var(--line); }.order-status-strip div { display: grid; gap: 4px; padding: 13px 18px; background: #fbfcfe; }.order-status-strip span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }.order-status-strip strong, .order-status-strip a { font-size: 13px; text-decoration: none; }
.order-detail-section { padding: 18px 20px; border-bottom: 1px solid var(--line); }.section-heading h3 { margin: 2px 0 12px; font-size: 16px; }
.order-line { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; }.order-line small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.order-action-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.order-note-editor, .partial-refund-editor { display: grid; align-content: start; gap: 9px; padding: 13px; background: var(--surface-2); border-radius: 9px; }.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; color: var(--muted); font-size: 9px; }
.money-input { display: grid; grid-template-columns: auto 1fr; align-items: center; overflow: hidden; background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; }.money-input span { padding: 10px; color: var(--muted); background: #f1f4f8; border-right: 1px solid var(--line-strong); }.money-input input { border: 0; border-radius: 0; box-shadow: none; }
.subscription-lines { display: grid; gap: 4px; }.subscription-lines > div { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }.subscription-lines img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }.subscription-lines span { display: grid; }.subscription-lines small { color: var(--muted); }.subscription-lines > div > strong:last-child { margin-left: auto; font-size: 10px; }
.wellness-details-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.timeline-event { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; color: inherit; border-bottom: 1px solid var(--line); text-decoration: none; }.timeline-event > div:first-child { display: grid; }.timeline-event span { color: var(--muted); font-size: 9px; }.engagement-pills { display: flex; gap: 5px; }

/* Selling plans */
.selling-plan-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,400px); gap: 16px; }.selling-plan-list-panel { min-height: 620px; }.create-plan-panel { align-self: start; position: sticky; top: calc(var(--appbar-height) + 18px); }.plan-spark { width: 36px; height: 36px; display: grid; place-items: center; color: var(--blue); background: #e4edff; border-radius: 9px; font-weight: 900; }.selling-plan-row > summary { grid-template-columns: auto minmax(160px,1fr) auto auto auto auto; }.plan-icon { width: 34px; height: 34px; display: grid; place-items: center; color: #245bbb; background: #e4edff; border-radius: 9px; font-size: 18px; }.plan-fact { min-width: 68px; display: grid; gap: 2px; text-align: right; }.plan-fact b { font-size: 10px; }.plan-fact small { color: var(--muted); font-size: 8px; text-transform: uppercase; }.selling-plan-edit-form { display: grid; gap: 13px; }.info-callout { margin-top: 18px; padding: 13px; color: #4b5870; background: var(--cyan); border-radius: 9px; font-size: 10px; line-height: 1.5; }.info-callout p { margin: 4px 0 0; }

/* Social creation and previews */
.command-panel { max-width: 1100px; margin: 0 auto; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-sm); }.command-panel textarea { min-height: 150px; padding: 20px; border: 0; border-radius: 0; box-shadow: none; font-size: 15px; }.composer-options { display: grid; grid-template-columns: minmax(160px,220px) minmax(190px,1fr) 100px; gap: 12px; align-items: end; padding: 13px 18px; background: #fbfcfe; border-top: 1px solid var(--line); }.check-option { display: flex !important; align-items: center; gap: 7px; padding-bottom: 9px; }.check-option input { width: 16px; height: 16px; padding: 0; }.command-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 12px 10px 18px; border-top: 1px solid var(--line); }.command-actions p { margin: 0; color: var(--muted); font-size: 10px; }
.review-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }.review-card { min-width: 0; padding: 14px; background: #f8fafe; border: 1px solid var(--line); border-radius: 11px; }.review-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; }
.network-badge, .network-icon { display: inline-grid; place-items: center; color: white; background: var(--navy); border-radius: 7px; font-size: 9px; font-weight: 900; text-transform: uppercase; }.network-badge { padding: 5px 8px; }.network-icon { width: 28px; height: 28px; }.network-instagram { background: linear-gradient(135deg,#7d3ce7,#e9477e,#f49e45); }.network-facebook { background: #1877f2; }.network-tiktok { background: #151515; }
.social-preview { max-width: 490px; margin: 0 auto; overflow: hidden; color: #1b1b1b; background: #fff; border: 1px solid #dfe3ea; border-radius: 10px; box-shadow: 0 8px 24px rgba(16,37,77,.09); }.preview-tiktok { width: min(100%,310px); color: #fff; background: #111; }.social-header { display: flex; align-items: center; gap: 9px; padding: 10px; }.social-header > div:nth-child(2) { display: grid; flex: 1; }.social-header small { color: #777; font-size: 9px; }.social-avatar { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: var(--navy); border-radius: 50%; font-weight: 800; }.social-media { aspect-ratio: 1; overflow: hidden; background: #edf0f5; }.social-media.vertical { aspect-ratio: 9/16; }.social-media img { width: 100%; height: 100%; display: block; object-fit: cover; }.visual-placeholder { height: 100%; display: grid; place-items: center; color: var(--muted); }.instagram-actions { display: flex; gap: 12px; padding: 9px 11px 2px; font-size: 20px; }.instagram-copy, .facebook-copy { margin: 0; padding: 7px 11px 12px; font-size: 11px; line-height: 1.5; white-space: pre-wrap; }.facebook-copy { padding-top: 0; }.facebook-actions { display: grid; grid-template-columns: repeat(3,1fr); padding: 8px; border-top: 1px solid #e7e7e7; color: #606773; font-size: 10px; font-weight: 700; text-align: center; }
.review-editor { display: grid; gap: 10px; margin-top: 13px; }.review-controls { margin-top: 10px; }.approval-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; margin-top: 11px; }.stock-photo-results { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 8px; }.stock-photo-option { overflow: hidden; padding: 0; background: #fff; border: 2px solid transparent; border-radius: 8px; text-align: left; }.stock-photo-option:hover { border-color: var(--blue); }.stock-photo-option img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }.stock-photo-option span { display: block; padding: 6px; color: var(--muted); font-size: 8px; }

/* Blog, marketing, integrations, tables */
.blog-control-grid { display: grid; grid-template-columns: minmax(320px,.75fr) minmax(500px,1.25fr); gap: 16px; }.autopilot-panel > summary { display: flex; justify-content: space-between; list-style: none; }.autopilot-panel > summary::-webkit-details-marker { display: none; }.autopilot-panel form { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }.weekday-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; }.weekday-grid label { display: flex; align-items: center; gap: 4px; padding: 7px 5px; background: var(--surface-2); border-radius: 6px; font-size: 9px; }.weekday-grid input { width: 14px; height: 14px; padding: 0; }.blog-list .stream-row > summary { grid-template-columns: auto minmax(0,1fr) auto auto; }.blog-expanded { display: grid; gap: 16px; }.blog-hero-preview { width: 100%; max-height: 520px; object-fit: cover; border-radius: 10px; }.blog-editor { display: grid; gap: 12px; }.blog-editor textarea { font-size: 11px; }
.integration-grid, .settings-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }.integration-card h2 { margin-bottom: 6px; font-size: 17px; }.integration-card > p { min-height: 42px; color: var(--muted); font-size: 10px; line-height: 1.5; }.integration-form { display: grid; gap: 10px; }
.marketing-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 15px; }.marketing-grid, .users-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }.metric-card { box-shadow: none; }.data-table { overflow-x: auto; }.data-row { display: grid; grid-template-columns: 1.2fr 1fr .7fr .9fr auto; gap: 11px; align-items: center; min-width: 700px; padding: 10px; border-bottom: 1px solid var(--line); font-size: 12px; }.data-row small { display: block; margin-top: 3px; color: var(--muted); }.table-head { color: var(--muted); background: #f8fafe; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }

/* Marketing workspace and visual email designer */
.marketing-hub { max-width: none; }
.marketing-heading { align-items: center; }
.marketing-setup-notice { display: flex; align-items: center; gap: 10px; color: #735400; background: #fff8d8; border-color: #f0df9d; }.marketing-setup-notice span { color: #726642; }.marketing-setup-notice a { margin-left: auto; color: #604d00; font-weight: 800; text-decoration: none; }
.marketing-overview .metric-card { position: relative; overflow: hidden; min-height: 112px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }.marketing-overview .metric-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--blue); }.marketing-overview .accent-lilac::before { background: #8d6fda; }.marketing-overview .accent-coral::before { background: #ed836b; }.marketing-overview .accent-cyan::before { background: #3aa7b6; }.marketing-overview .metric-card span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }.marketing-overview .metric-card strong { display: block; margin: 7px 0 3px; font-size: 26px; }.marketing-overview .metric-card small { color: var(--muted); font-size: 12px; }
.marketing-tabs { display: flex; align-items: center; gap: 5px; margin: 22px 0 0; padding: 0 4px; border-bottom: 1px solid var(--line); }.marketing-tabs button { display: flex; align-items: center; gap: 8px; padding: 12px 15px; color: var(--muted); background: transparent; border: 0; border-bottom: 3px solid transparent; font-size: 14px; font-weight: 750; }.marketing-tabs button.active { color: var(--blue); border-bottom-color: var(--blue); }.marketing-tabs span { min-width: 23px; padding: 2px 6px; color: inherit; background: #edf1f6; border-radius: 999px; font-size: 10px; }
.marketing-panel { min-height: 520px; padding: 24px 4px 0; }.marketing-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }.marketing-panel-heading h2 { margin: 0 0 5px; font-size: 23px; }.marketing-panel-heading p { margin: 0; color: var(--muted); font-size: 13px; }.template-tools { display: flex; align-items: center; gap: 9px; }.template-search { width: min(28vw,300px); }.template-search input { background: #fff; }
.template-manager-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 16px; }.managed-template-card { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-sm); transition: transform .15s ease,box-shadow .15s ease,border-color .15s ease; }.managed-template-card:hover { border-color: #c9d5e8; box-shadow: 0 10px 28px rgba(16,37,77,.09); transform: translateY(-2px); }.template-preview-button { width: 100%; height: 175px; display: grid; place-items: center; padding: 18px; background: #f2f5fa; border: 0; border-bottom: 1px solid var(--line); }.template-paper { width: 126px; height: 140px; display: grid; grid-template-rows: auto 42px 8px 8px auto; gap: 7px; padding: 12px; background: #fff; border-radius: 4px; box-shadow: 0 8px 22px rgba(16,37,77,.12); }.template-logo { font: 700 15px Georgia,serif; text-align: left; }.template-paper i { display: block; background: #e9edf3; border-radius: 3px; }.template-paper .template-hero { background: #eadfce; }.template-paper .category-welcome { background: #dff8fb; }.template-paper .category-series { background: #eee8ff; }.template-paper .category-new_order,.template-paper .category-out_for_delivery { background: #e2ebff; }.template-paper .category-new_subscription { background: #ffe9e2; }.template-paper .category-delivered { background: #e4f6f2; }.template-paper b { width: 52px; height: 13px; background: #302923; border-radius: 999px; }.template-card-copy { min-height: 125px; padding: 15px 16px 11px; }.template-card-copy > div { display: flex; align-items: center; gap: 6px; }.template-type,.starter-badge { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.starter-badge { padding: 3px 6px; color: #245bbb; background: #e4edff; border-radius: 999px; }.template-card-copy h3 { margin: 10px 0 5px; font-size: 17px; }.template-card-copy p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.managed-template-card footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 14px; }.icon-text-button { padding: 4px; color: var(--muted); background: none; border: 0; font-size: 11px; font-weight: 700; }.icon-text-button:hover { color: var(--danger); }.new-template-card { min-height: 340px; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 22px; color: var(--muted); background: rgba(255,255,255,.45); border: 2px dashed #ccd5e2; border-radius: 13px; }.new-template-card:hover { color: var(--blue); background: #f7faff; border-color: #aebfda; }.new-template-card span { width: 44px; height: 44px; display: grid; place-items: center; color: var(--blue); background: #e5edff; border-radius: 50%; font-size: 25px; }.new-template-card strong { color: var(--ink); font-size: 15px; }.new-template-card small { font-size: 12px; }
.campaign-workspace,.automation-workspace { display: grid; grid-template-columns: minmax(340px,.7fr) minmax(0,1.3fr); gap: 18px; }.campaign-composer,.campaign-library,.journey-builder,.journey-list { min-width: 0; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-sm); }.campaign-send-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-2); border-radius: 9px; }.campaign-send-option input { width: 18px; height: 18px; padding: 0; }.campaign-send-option span { display: grid; }.campaign-send-option small { color: var(--muted); font-weight: 500; }.campaign-template-state { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 13px; color: var(--muted); background: #f8fafe; border: 1px dashed var(--line-strong); border-radius: 9px; font-size: 12px; }.campaign-list { display: grid; }.campaign-list article { display: grid; grid-template-columns: minmax(0,1fr) auto 120px; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); }.campaign-list article > div { min-width: 0; display: grid; gap: 4px; }.campaign-list article strong,.campaign-list article span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.campaign-list article > div span,.campaign-list time { color: var(--muted); font-size: 12px; }.journey-list { display: grid; align-content: start; gap: 8px; }.journey-list article { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px; background: #fbfcfe; border: 1px solid var(--line); border-radius: 10px; }.journey-icon { width: 36px; height: 36px; display: grid; place-items: center; color: #6846a5; background: #eee8ff; border-radius: 9px; font-size: 20px; }.journey-list article > div { display: grid; gap: 3px; }.journey-list small { color: var(--muted); text-transform: capitalize; }
.email-designer-dialog { width: calc(100vw - 24px); max-width: none; height: calc(100vh - 24px); max-height: none; padding: 0; overflow: hidden; color: var(--ink); background: #fff; border: 0; border-radius: 14px; box-shadow: var(--shadow-lg); }.email-designer-dialog::backdrop { background: rgba(10,24,50,.58); backdrop-filter: blur(4px); }.designer-shell { height: 100%; display: grid; grid-template-rows: auto auto minmax(0,1fr); }.designer-topbar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line); }.designer-title,.designer-actions { display: flex; align-items: center; gap: 12px; }.designer-title .icon-button { color: var(--muted); font-size: 27px; }.designer-mark { padding-right: 14px; border-right: 1px solid var(--line); font: 700 24px Georgia,serif; }.designer-title h2 { margin: 0; font-size: 17px; }.designer-actions > span { color: var(--muted); font-size: 11px; }.designer-subjectbar { display: grid; grid-template-columns: minmax(180px,.7fr) 150px minmax(260px,1fr) minmax(260px,1fr); gap: 10px; padding: 11px 16px; background: #f8fafe; border-bottom: 1px solid var(--line); }.designer-subjectbar label { gap: 4px; color: var(--muted); font-size: 10px; text-transform: uppercase; }.designer-subjectbar input,.designer-subjectbar select { padding: 8px 10px; font-size: 12px; text-transform: none; }.designer-layout { min-height: 0; display: grid; grid-template-columns: 220px minmax(390px,1fr) minmax(390px,.95fr); }.designer-palette { overflow-y: auto; padding: 18px; background: #fff; border-right: 1px solid var(--line); }.designer-palette h3 { margin: 0 0 15px; font-size: 16px; }.block-palette { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }.block-palette button { min-height: 70px; display: grid; place-items: center; gap: 4px; padding: 9px; color: var(--ink-soft); background: #f8fafe; border: 1px solid var(--line); border-radius: 9px; font-size: 11px; font-weight: 700; }.block-palette button:hover { color: var(--blue); background: #eef4ff; border-color: #bdcdf0; }.block-palette button span { font-size: 20px; font-weight: 500; }.personalization-bar { display: grid; gap: 6px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }.personalization-bar button { padding: 7px 9px; color: #245bbb; background: #edf3ff; border: 0; border-radius: 7px; font-size: 11px; font-weight: 700; text-align: left; }.personalization-bar small { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.45; }.designer-canvas-wrap { min-width: 0; overflow-y: auto; background: #edf1f6; border-right: 1px solid var(--line); }.canvas-toolbar,.preview-toolbar { position: sticky; z-index: 2; top: 0; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; color: var(--muted); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 800; letter-spacing: .08em; }.canvas-toolbar small { font-weight: 500; letter-spacing: 0; }.email-builder-canvas { width: min(100% - 32px,680px); min-height: calc(100% - 76px); display: grid; align-content: start; gap: 10px; margin: 16px auto; padding: 18px; background: #fff; border-radius: 9px; box-shadow: 0 8px 25px rgba(16,37,77,.08); }.builder-block { padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 1px 3px rgba(16,37,77,.04); }.builder-block:hover { border-color: #aebfda; }.builder-block header { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: var(--muted); }.builder-block header strong { color: var(--ink); font-size: 11px; text-transform: capitalize; }.builder-block header span { font-size: 10px; }.builder-block header button { width: 25px; height: 25px; margin-left: auto; padding: 0; color: var(--muted); background: transparent; border: 0; border-radius: 5px; font-size: 19px; }.builder-block header button:hover { color: var(--danger); background: #fff0f2; }.block-drag { color: #9ca6b6; letter-spacing: -3px; }.builder-block input,.builder-block textarea { padding: 9px 10px; background: #fbfcfe; font-size: 12px; }.builder-block textarea { min-height: 84px; }.designer-empty { min-height: 360px; display: grid; place-content: center; justify-items: center; gap: 7px; color: var(--muted); text-align: center; }.designer-empty span { width: 44px; height: 44px; display: grid; place-items: center; color: var(--blue); background: #e5edff; border-radius: 50%; font-size: 25px; }.designer-empty strong { color: var(--ink); }.designer-empty p { margin: 0; }.designer-preview-wrap { min-width: 0; overflow-y: auto; background: #f7f4ef; }.preview-toolbar > div { display: flex; gap: 3px; }.preview-size { padding: 5px 8px; color: var(--muted); background: transparent; border: 0; border-radius: 6px; font-size: 10px; }.preview-size.active { color: var(--blue); background: #e5edff; }.preview-stage { min-height: calc(100% - 42px); display: grid; place-items: start center; padding: 18px; transition: padding .2s ease; }.email-builder-preview { width: 100%; height: calc(100vh - 190px); background: #fff; border: 0; border-radius: 8px; box-shadow: 0 10px 30px rgba(52,42,34,.1); transition: width .2s ease; }.mobile-preview .email-builder-preview { width: 390px; max-width: 100%; }
.code-editor { font: 10px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }

/* Calendar */
.week-nav { display: flex; align-items: center; gap: 9px; }.calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(160px,1fr)); gap: 1px; overflow-x: auto; background: var(--line); border: 1px solid var(--line); border-radius: 11px; }.calendar-day { min-height: 560px; background: #fff; }.calendar-day > header { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f8fafe; border-bottom: 1px solid var(--line); }.calendar-day > header span { color: var(--muted); font-size: 10px; font-weight: 750; }.calendar-day > header strong { width: 25px; height: 25px; display: grid; place-items: center; background: #e4edff; border-radius: 50%; font-size: 10px; }.calendar-day-posts { display: grid; gap: 8px; padding: 8px; }.calendar-post { overflow: hidden; padding: 7px; background: #f8fafe; border: 1px solid var(--line); border-radius: 8px; }.calendar-post-media { position: relative; }.calendar-post-media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }.calendar-post-media .network-icon { position: absolute; right: 5px; bottom: 5px; }.calendar-post time { display: block; margin-top: 7px; color: var(--blue); font-size: 9px; font-weight: 800; }.calendar-post p { margin: 5px 0; color: var(--ink-soft); font-size: 9px; line-height: 1.4; }.calendar-empty { padding: 20px 5px; color: var(--muted); font-size: 9px; text-align: center; }

/* Dialogs and notifications */
.app-dialog { width: min(92vw,440px); padding: 0; color: var(--ink); background: #fff; border: 0; border-radius: 16px; box-shadow: var(--shadow-lg); }.app-dialog::backdrop { background: rgba(13,27,55,.45); backdrop-filter: blur(3px); }.app-dialog form { display: grid; grid-template-columns: auto 1fr; gap: 13px; padding: 22px; }.dialog-icon { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 11px; font-weight: 900; }.dialog-copy h2 { margin: 0 0 7px; font-size: 19px; }.dialog-copy p:last-child { margin: 0; color: var(--muted); line-height: 1.55; }.app-dialog label, .dialog-actions { grid-column: 1/-1; }.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }.toast-region { position: fixed; z-index: 100; right: 18px; bottom: 18px; display: grid; gap: 8px; }.toast { min-width: 260px; max-width: 380px; display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; padding: 12px 13px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); animation: toast-in .18s ease-out; }.toast > i { width: 8px; height: 8px; background: var(--success); border-radius: 50%; }.toast.error > i { background: var(--danger); }.toast button { padding: 0; color: var(--muted); background: none; border: 0; }.toast span { font-size: 11px; line-height: 1.4; }@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Login, legal, and chat widget */
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 15% 10%,#dff8fb 0,transparent 34%),radial-gradient(circle at 90% 90%,#eee8ff 0,transparent 38%),var(--paper); }.login-card, .legal-page { width: min(100%,460px); padding: 40px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); }.brand-logo { display: block; width: 150px; height: auto; }.login-card h1 { margin: 26px 0 8px; font-size: 34px; }.stack { display: grid; gap: 14px; margin-top: 24px; }.security-note, .legal-links { color: var(--muted); font-size: 10px; text-align: center; }.legal-links { display: flex; justify-content: center; gap: 12px; }.legal-shell { min-height: 100vh; padding: 40px 20px; }.legal-page { width: min(100%,780px); margin: 0 auto; }.legal-page h1 { margin-top: 26px; }.legal-page p, .legal-page li { color: var(--ink-soft); line-height: 1.7; }
.widget-body { height: 100vh; min-height: 100vh; margin: 0; overflow: hidden; color: #292420; background: #fff; font-family: Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.widget-shell { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; background: linear-gradient(180deg,#fff 0,#fbfaf8 100%); }
.widget-header { min-height: 74px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; padding-top: max(12px,env(safe-area-inset-top)); color: #292420; background: rgba(255,255,255,.96); border-bottom: 1px solid #ece7e1; box-shadow: 0 4px 18px rgba(70,55,42,.04); backdrop-filter: blur(14px); }
.widget-agent-photo { position: relative; flex: 0 0 auto; width: 46px; height: 46px; }
.widget-agent-photo::after { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; content: ""; background: #38b878; border: 2px solid #fff; border-radius: 50%; }
.widget-agent-photo img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; }
.widget-agent-copy { min-width: 0; display: grid; gap: 3px; }
.widget-agent-copy strong { font: 750 16px/1.15 Inter,ui-sans-serif,sans-serif; }
.widget-agent-copy span { display: flex; align-items: center; gap: 5px; color: #746b64; font-size: 12px; }
.widget-agent-copy span i { width: 6px; height: 6px; display: inline-block; background: #38b878; border-radius: 50%; }
.widget-close { width: 36px; height: 36px; display: grid; place-items: center; margin-left: auto; padding: 0; color: #625b55; background: #f4f1ed; border: 0; border-radius: 50%; cursor: pointer; font-size: 23px; line-height: 1; }
.widget-close:hover { color: #292420; background: #ebe5de; }
.widget-conversation { position: relative; min-height: 0; overflow: hidden; }
.widget-messages { height: 100%; overflow-y: auto; display: grid; align-content: start; gap: 15px; padding: 20px 16px 28px; scrollbar-width: none; overscroll-behavior: contain; }
.widget-messages::-webkit-scrollbar,.widget-action-zone::-webkit-scrollbar,#widget-input::-webkit-scrollbar { display: none; width: 0; height: 0; }
.widget-event { justify-self: center; padding: 5px 10px; color: #81766d; background: #f2eee9; border-radius: 999px; font-size: 11px; font-weight: 700; }
.widget-message-row { max-width: 86%; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 8px; align-items: end; }
.widget-message-row.customer { justify-self: end; grid-template-columns: minmax(0,1fr); }
.widget-message-avatar { width: 32px; height: 32px; object-fit: cover; border-radius: 50%; }
.widget-message { min-width: 0; padding: 11px 13px; color: #302a26; background: #f0ece7; border-radius: 17px 17px 17px 5px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.widget-message-row.customer .widget-message { justify-self: end; color: #fff; background: #203b70; border-radius: 17px 17px 5px 17px; }
.widget-message-meta { display: flex; justify-content: flex-end; gap: 5px; margin: 4px 4px 0; color: #8a817a; font-size: 10px; line-height: 1; }
.widget-message-meta.read { color: #315ea8; }
.widget-typing { min-width: 58px; display: flex; align-items: center; gap: 5px; padding-block: 15px; }
.widget-typing span { width: 7px; height: 7px; background: #8f867e; border-radius: 50%; animation: widget-typing-bounce 1.1s ease-in-out infinite; }
.widget-typing span:nth-child(2) { animation-delay: .16s; }.widget-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes widget-typing-bounce { 30% { opacity:1;transform:translateY(-4px) } 0%,60%,100% { opacity:.38;transform:none } }
.widget-connection,.widget-resume { position: absolute; z-index: 4; inset: 0; display: grid; place-content: center; justify-items: center; gap: 9px; padding: 30px; text-align: center; background: rgba(255,255,255,.98); }
.widget-connection strong,.widget-resume strong { font-size: 16px; }.widget-connection small,.widget-resume p { margin: 0; color: #81766d; font-size: 12px; line-height: 1.5; }
.widget-connection-spinner { width: 34px; height: 34px; margin-bottom: 5px; border: 3px solid #e9e3dc; border-top-color: #203b70; border-radius: 50%; animation: widget-spin .8s linear infinite; }
@keyframes widget-spin { to { transform: rotate(360deg); } }
.widget-resume[hidden],.widget-connection[hidden] { display: none; }
.widget-resume img { width: 68px; height: 68px; object-fit: cover; border-radius: 50%; box-shadow: 0 8px 24px rgba(42,32,24,.15); }
.widget-resume button,.widget-verification button { padding: 11px 18px; color: #fff; background: #203b70; border: 0; border-radius: 999px; cursor: pointer; font-weight: 750; }
.widget-action-zone { position: absolute; z-index: 3; right: 12px; bottom: 12px; left: 12px; max-height: calc(100% - 24px); overflow-y: auto; padding: 15px; background: #fff; border: 1px solid #e7e1da; border-radius: 16px; box-shadow: 0 16px 44px rgba(54,42,32,.18); scrollbar-width: none; }
.widget-action-zone[hidden] { display: none; }
.widget-verification { display: grid; gap: 11px; }.widget-verification header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.widget-verification h3 { margin: 0; font-size: 15px; }.widget-verification p { margin: 0; color: #756c65; font-size: 12px; line-height: 1.5; }.widget-verification label { display: grid; gap: 5px; color: #59514a; font-size: 11px; font-weight: 700; }.widget-verification input,.widget-verification select { width: 100%; padding: 10px 11px; color: #292420; background: #fbfaf8; border: 1px solid #dcd4cb; border-radius: 10px; font: 13px inherit; }.widget-verification .address-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.widget-verification .address-grid .wide { grid-column: 1/-1; }.widget-verification .verification-code { font: 700 22px/1.2 ui-monospace,monospace; letter-spacing: 5px; text-align: center; }.widget-verification .close-action { padding: 0; color: #81766d; background: none; font-size: 20px; }
#widget-form { display: grid; gap: 6px; padding: 10px 12px max(10px,env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #ece7e1; }
.widget-composer { display: grid; grid-template-columns: minmax(0,1fr) 38px; gap: 8px; align-items: end; padding: 6px 6px 6px 12px; background: #f6f3ef; border: 1px solid #e5ded6; border-radius: 18px; }
#widget-input { width: 100%; max-height: 112px; min-height: 36px; resize: none; overflow-y: auto; padding: 8px 0 6px; color: #292420; background: transparent; border: 0; outline: 0; font: 14px/1.45 inherit; scrollbar-width: none; }
#widget-form button[type="submit"] { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; color: #fff; background: #203b70; border: 0; border-radius: 50%; cursor: pointer; font-size: 21px; font-weight: 800; }
#widget-form button[type="submit"]:disabled { opacity: .45; cursor: wait; }
#widget-form > small { padding-left: 8px; color: #968d85; font-size: 9px; }
.widget-offline { display: grid; place-content: center; padding: 35px; text-align: center; }.widget-offline p { color: #756c65; line-height: 1.5; }

@media (max-width: 1080px) {
  .ops-shell { grid-template-columns: minmax(260px,300px) minmax(400px,1fr); }
  .ops-inspector { grid-column: 1/-1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); max-height: 290px; border-top: 1px solid var(--line); border-left: 0; }
  .inspector-heading { grid-column: 1/-1; }
  .full-height-workspace { height: auto; }.full-height-workspace .ops-shell { height: auto; }
  .quick-action-grid { grid-template-columns: repeat(2,1fr); }
  .integration-grid, .settings-grid { grid-template-columns: repeat(2,1fr); }
  .designer-layout { grid-template-columns: 190px minmax(420px,1fr); overflow-y: auto; }
  .designer-preview-wrap { grid-column: 1/-1; min-height: 650px; }
  .designer-subjectbar { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 980px) {
  :root { --sidebar-width: 64px; }
  .app-body.nav-expanded { --sidebar-width: 220px; }
  .app-bar { grid-template-columns: var(--sidebar-width) minmax(220px,1fr) auto; }
  .global-search { margin-left: 10px; }
  .main-content { padding-inline: 14px; }
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .dashboard-grid, .selling-plan-layout, .blog-control-grid, .marketing-grid, .users-grid { grid-template-columns: 1fr; }
  .campaign-workspace, .automation-workspace { grid-template-columns: 1fr; }
  .template-manager-grid { grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); }
  .create-plan-panel { position: static; }
  .ops-shell { grid-template-columns: 1fr; }
  .ops-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .ticket-scroll, .order-list-scroll, .crm-customer-scroll, .wellness-box-scroll { max-height: 300px; }
  .ops-inspector { grid-template-columns: 1fr; max-height: none; }
  .inspector-heading { grid-column: auto; }
  .review-grid { grid-template-columns: 1fr; }
  .agent-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 680px) {
  .app-bar { grid-template-columns: 64px 1fr auto; }.app-bar-brand { padding: 0 8px; }.app-bar-brand img { display: none; }.global-search kbd { display: none; }.app-bar-actions .icon-button { display: none; }
  .sidebar { width: 64px; }.nav-expanded .sidebar { width: min(82vw,250px); box-shadow: var(--shadow-lg); }.nav-expanded .main-content { margin-left: 64px; }.nav-expanded .app-bar-brand { width: 64px; }
  .main-content { margin-left: 64px; padding: calc(var(--appbar-height) + 14px) 10px 40px; }
  .page-heading, .workspace-toolbar { align-items: stretch; flex-direction: column; gap: 10px; }.page-heading h1 { font-size: 26px; }
  .dashboard-hero { grid-template-columns: 1fr; }.hero-art { display: none; }.dashboard-hero h2 { font-size: 30px; }
  .metric-grid, .quick-action-grid, .form-grid, .form-grid.two, .form-row, .order-action-grid, .wellness-details-form, .integration-grid, .settings-grid, .marketing-stats { grid-template-columns: 1fr; }
  .quick-action-grid > a { grid-template-columns: 38px 1fr auto; }.agent-grid { grid-template-columns: repeat(2,1fr); }
  .thread-toolbar, .thread-actions, .composer-footer, .composer-footer > div { align-items: stretch; flex-direction: column; }.thread-actions select { width: 100%; }.message { padding-inline: 12px; }
  .ticket-row { grid-template-columns: 1fr; }.ticket-subject { padding-top: 7px; border-top: 1px solid var(--line); }
  .selling-plan-row > summary { grid-template-columns: auto minmax(0,1fr) auto; }.selling-plan-row .plan-fact { display: none; }
  .published-post-detail { grid-template-columns: 1fr; }.composer-options { grid-template-columns: 1fr; }.command-actions { align-items: stretch; flex-direction: column; }.weekday-grid { grid-template-columns: repeat(4,1fr); }
  .review-studio, .panel { padding: 14px; }.stock-photo-results { grid-template-columns: repeat(2,1fr); }
  .app-dialog form { grid-template-columns: 1fr; }.app-dialog label, .dialog-actions { grid-column: auto; }.dialog-icon { display: none; }
  .marketing-heading,.marketing-panel-heading,.marketing-setup-notice { align-items: stretch; flex-direction: column; }.marketing-setup-notice a { margin-left: 0; }.template-tools { align-items: stretch; flex-direction: column; }.template-search { width: 100%; }.marketing-tabs { overflow-x: auto; }.marketing-tabs button { white-space: nowrap; }.template-manager-grid { grid-template-columns: 1fr; }.campaign-list article { grid-template-columns: 1fr auto; }.campaign-list time { grid-column: 1/-1; }
  .email-designer-dialog { width: 100vw; height: 100vh; border-radius: 0; }.designer-topbar { align-items: flex-start; }.designer-actions > span,.designer-use-campaign,.designer-mark { display: none; }.designer-subjectbar { grid-template-columns: 1fr; max-height: 235px; overflow-y: auto; }.designer-layout { grid-template-columns: 1fr; }.designer-palette { border-right: 0; border-bottom: 1px solid var(--line); }.block-palette { grid-template-columns: repeat(3,1fr); }.personalization-bar { grid-template-columns: repeat(2,1fr); }.personalization-bar .eyebrow,.personalization-bar small { grid-column: 1/-1; }.designer-canvas-wrap { min-height: 560px; border-right: 0; }.designer-preview-wrap { min-height: 600px; }.email-builder-canvas { width: calc(100% - 20px); margin: 10px auto; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }