/*
 * HelpDesk — style.css
 * All visual design lives here. Edit this file to restyle the entire app.
 * PHP files contain zero inline styles or style blocks.
 */

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

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Root tokens ── */
/* ── Light theme (default) ── */
:root {
  --ink:        #0f1419;
  --ink-2:      #3d4144;
  --ink-3:      #536471;
  --rule:       #eff3f4;
  --rule-2:     #cfd9de;
  --surface:    #f7f9f9;
  --white:      #ffffff;
  --accent:     #1d9bf0;
  --accent-d:   #1a8cd8;
  --accent-bg:  #e8f5fd;
  --topbar-bg:  rgba(255,255,255,.9);
  --danger:     #f4212e;
  --warn:       #ff7a00;
  --ok:         #00ba7c;

  /* Badge backgrounds */
  --alert-err-bg: #fee2e2; --alert-err-bd: #fecaca; --alert-err-fg: #b91c1c;
  --alert-ok-bg:  #dcfce7; --alert-ok-bd: #bbf7d0; --alert-ok-fg: #15803d;

  --sidebar-w: 260px;
  --sidebar-rail-w: 60px;
  --topbar-h:  60px;
  --radius:    16px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* ── Typography ── */
  /* Font families — change --font-body to use a different body font */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'SF Mono', 'Consolas', 'Fira Code', monospace;

  /* Font weights */
  --weight-light:   400;
  --weight-regular: 500;
  --weight-medium:  600;
  --weight-bold:    700;
  --weight-heavy:   800;

  /* Type scale — 5 sizes for the entire app */
  --text-xs:   12px;   /* badges, uppercase labels, timestamps */
  --text-sm:   14px;   /* secondary info, muted text, subtext */
  --text-base: 16px;   /* body, table cells, inputs, buttons */
  --text-lg:   18px;   /* page titles, section headings */
  --text-xl:   20px;   /* detail page hero text */
}

/* ── Dark theme ── */
html[data-theme="dark"] {
  --ink:        #e7e9ea;
  --ink-2:      #c8ccce;
  --ink-3:      #8b98a5;
  --rule:       #2f3336;
  --rule-2:     #3e4144;
  --surface:    #16181c;
  --white:      #1e2125;
  --accent:     #1d9bf0;
  --accent-d:   #4cb3f7;
  --accent-bg:  #1a2733;
  --topbar-bg:  rgba(30,33,37,.9);
  --danger:     #f4212e;
  --warn:       #ffa64d;
  --ok:         #2ed87a;

  --alert-err-bg: #4a1d1d; --alert-err-bd: #6b2929; --alert-err-fg: #fca5a5;
  --alert-ok-bg:  #14432a; --alert-ok-bd: #1f5d3a; --alert-ok-fg: #86efac;
}

/* ── System theme: follow OS preference when no explicit override ── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    --ink:        #e7e9ea;
    --ink-2:      #c8ccce;
    --ink-3:      #8b98a5;
    --rule:       #2f3336;
    --rule-2:     #3e4144;
    --surface:    #16181c;
    --white:      #1e2125;
    --accent-bg:  #1a2733;
    --topbar-bg:  rgba(30,33,37,.9);
    --warn:       #ffa64d;
    --ok:         #2ed87a;

    --alert-err-bg: #4a1d1d; --alert-err-bd: #6b2929; --alert-err-fg: #fca5a5;
    --alert-ok-bg:  #14432a; --alert-ok-bd: #1f5d3a; --alert-ok-fg: #86efac;
  }
}

/* ── Base ── */
html { font-size: var(--text-base); }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-light);
  background: var(--surface);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Sidebar overlay (mobile) ── */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 39;
}
.sidebar-overlay.open { display: block; }

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--white);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  z-index: 40;
  transition: width .25s ease, transform .25s ease;
  overflow-x: hidden;
  overflow-y: auto;
}

.sidebar-brand {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.sidebar-brand-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-heavy); letter-spacing: -.03em; }
.sidebar-brand-sub  { font-size: var(--text-sm); color: var(--ink-3); margin-top: 2px; }

.nav-section { padding: 10px 0; flex: 1; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 24px;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--ink-2);
  text-decoration: none;
  border-left: none;
  border-right: 3px solid transparent;
  transition: background .1s, color .1s;
  white-space: nowrap;
}
.nav-item:hover {
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  border-right-color: var(--rule-2);
}
.nav-item.active {
  color: var(--accent);
  border-right-color: var(--accent);
  background: var(--accent-bg);
  font-weight: var(--weight-bold);
}
.nav-item svg         { width: 18px; height: 18px; stroke-width: 1.8; flex-shrink: 0; }
.nav-item-label       { overflow: hidden; text-overflow: ellipsis; }
.nav-item-signout     { margin-top: 10px; border-left: none; font-size: var(--text-sm); }

.sidebar-footer {
  padding: 8px 0;
  border-top: 1px solid var(--rule);
  flex-shrink: 0;
}
.sidebar-footer-email { font-size: var(--text-sm); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 8px; }

/* ── Sidebar toggle button ── */
.sidebar-toggle {
  background: none; border: none; cursor: pointer;
  padding: 6px; border-radius: var(--radius-sm);
  color: var(--ink-3);
  display: flex; align-items: center; justify-content: center;
  transition: background .1s;
}
.sidebar-toggle:hover { background: var(--surface); color: var(--ink); }
.sidebar-toggle svg   { width: 20px; height: 20px; stroke-width: 2; }

/* ── On-call indicator ── */
.oncall-row  { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.oncall-dot  { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.oncall-dot.on  { background: var(--ok); }
.oncall-dot.off { background: var(--rule-2); }
.oncall-label   { font-size: var(--text-sm); color: var(--ink-3); }

/* ── Main layout ── */
.main { margin-left: var(--sidebar-w); min-height: 100vh; transition: margin-left .25s ease; }

/* ── Topbar ── */
.topbar {
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  padding: 0 28px;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 30;
}
.topbar-left  { display: flex; align-items: center; gap: 12px; }
.topbar-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-heavy); color: var(--ink); letter-spacing: -.02em; }
.topbar-date  { font-size: var(--text-sm); color: var(--ink-3); }
body.flow-builder-page .topbar {
  display: none;
}
body.flow-builder-page .sidebar,
body.flow-builder-page .sidebar-overlay {
  display: none;
}
body.flow-builder-page .main {
  margin-left: 0 !important;
}
body.flow-builder-page .page-content {
  min-height: 100vh;
  padding: 0;
}

/* ── Page content ── */
.page-content { padding: 28px; }

/* ── Cards ── */
.card          { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; border-top: 3px solid var(--accent); }
.card-header   { padding: 18px 22px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; }
.card-title    { font-size: var(--text-base); font-weight: var(--weight-heavy); color: var(--ink); letter-spacing: -.01em; }
.card-body     { padding: 20px 22px; }
.card-footer   { padding: 14px 20px; border-top: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; }

/* ── Stat cards ── */
.stat          { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px 26px; }
.stat-value    { font-family: var(--font-display); font-size: 36px; font-weight: var(--weight-heavy); letter-spacing: -.03em; line-height: 1; }
.stat-label    { font-size: var(--text-base); color: var(--ink-3); margin-top: 6px; font-weight: var(--weight-medium); }
.stat-delta    { font-size: var(--text-sm); color: var(--ink-3); margin-top: 10px; }
.stat-danger   { color: var(--danger); }
.stat-ok       { color: var(--ok); }
.stat-warn     { color: var(--warn); }

/* ── Grid helpers ── */
.grid-stats  { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 24px; }
.grid-2col   { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.grid-3col   { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.grid-detail { display: grid; grid-template-columns: 1fr 320px; gap: 18px; }
.gap-sm      { gap: 10px; }
.mb-lg       { margin-bottom: 24px; }
.mb-md       { margin-bottom: 16px; }
.mb-sm       { margin-bottom: 10px; }
.mt-md       { margin-top: 16px; }

/* ── Data table ── */
.data-table          { width: 100%; border-collapse: collapse; }
.data-table th       { text-align: left; padding: 12px 18px; font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; border-bottom: 1px solid var(--rule); background: var(--surface); vertical-align: middle; white-space: nowrap; line-height: 1.4; }
.data-table td       { padding: 14px 18px; border-bottom: 1px solid var(--rule); color: var(--ink-2); vertical-align: middle; font-size: var(--text-base); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--surface); }
.data-table tbody tr.row-status-inactive td {
  color: var(--ink-3);
  opacity: .3;
}
.data-table tbody tr.row-status-inactive:hover td {
  opacity: .55;
}
.data-table a        { color: var(--accent); font-weight: var(--weight-bold); }
.data-table a:hover  { text-decoration: underline; }
.table-empty         { text-align: center; color: var(--ink-3); padding: 40px !important; }

/* ── Badges ── */
.badge         { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-pill); font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .01em; white-space: nowrap; }
.badge-link    { display: inline-flex; text-decoration: none; color: inherit; border-radius: var(--radius-pill); }
.badge-link:hover { filter: brightness(.96); }

.message-list-table td {
  padding-top: 16px;
  padding-bottom: 16px;
}
.message-list-table tbody td {
  border-bottom-color: var(--rule-2);
}
.message-live-notice {
  display: flex;
  justify-content: center;
  padding: 12px 14px 0;
}
.message-live-notice[hidden] {
  display: none;
}
.message-live-notice .btn {
  box-shadow: 0 8px 22px rgba(15, 20, 25, .08);
}
.conversation-list-row {
  display: grid;
  gap: 9px;
}
.conversation-list-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.conversation-list-subject {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.conversation-list-subject a {
  color: var(--accent);
  font-size: calc(var(--text-base) + 1px);
  font-weight: var(--weight-bold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversation-list-subject a:hover {
  color: var(--accent-d);
}
.conversation-list-pills {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  text-align: right;
}
.conversation-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: var(--radius-pill);
  color: var(--ink-3);
}
.conversation-status-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}
.conversation-status-icon.is-new {
  color: var(--accent);
}
.conversation-status-icon.is-progress {
  color: var(--ink-2);
}
.conversation-status-icon.is-complete {
  color: var(--ink-3);
}
.conversation-list-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  color: var(--ink-3);
  font-size: var(--text-base);
}
.conversation-list-meta-main,
.conversation-list-meta-side {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  min-width: 0;
}
.conversation-list-meta-side {
  justify-content: flex-end;
  text-align: right;
}
.conversation-list-customer {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: var(--ink-2);
}
.conversation-list-customer strong {
  color: var(--ink-2);
  font-size: var(--text-base);
}
.conversation-list-customer small,
.conversation-list-muted {
  color: var(--ink-3);
}
.conversation-list-count {
  min-width: 58px;
  color: var(--ink-3);
}
.conversation-list-time {
  min-width: 64px;
  color: var(--ink-3);
}
@media (max-width: 768px) {
  .conversation-list-top,
  .conversation-list-meta {
    grid-template-columns: 1fr;
  }
  .conversation-list-pills,
  .conversation-list-meta-side {
    justify-content: flex-start;
    text-align: left;
  }
}
.channel-icon      { display: inline-flex; align-items: center; cursor: default; flex-shrink: 0; }
.channel-icon svg  { width: 16px; height: 16px; color: var(--ink-3); stroke-width: 1.8; }
.badge-ok       { background: #d1fae5; color: #065f46; }
.badge-warn     { background: #ffedd5; color: #c2410c; }

/* ── Status dot ── */
.status-dot     { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.status-dot.ok  { background: var(--ok); }
.status-dot.off { background: var(--rule-2); }
.status-dot.err { background: var(--danger); }
.status-dot.warn{ background: var(--warn); }
.routing-address-disabled {
  color: var(--danger);
  font-weight: var(--weight-bold);
}
.routing-disabled-label {
  margin-top: 3px;
  color: var(--danger);
  font-size: var(--text-xs);
  font-weight: var(--weight-heavy);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── Buttons ── */
.btn         { display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; border-radius: var(--radius-sm); font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-bold); cursor: pointer; border: none; transition: all .15s; text-decoration: none; white-space: nowrap; }
.btn:hover   { text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-d); color: #fff; }
.btn:disabled,
.btn.is-disabled {
  opacity: .42;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.btn:disabled:hover {
  background: var(--accent);
  color: #fff;
}
.btn-dark    { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #333; color: #fff; }
.btn-ghost   { background: transparent; color: var(--ink-2); border: 1.5px solid var(--rule-2); }
.btn-ghost:hover { background: var(--surface); }
.btn-danger  { background: var(--danger); color: #fff; }
.btn-sm      { padding: 6px 14px; font-size: var(--text-sm); }
.btn svg     { width: 16px; height: 16px; }
.btn-full    { width: 100%; justify-content: center; }
.routing-actions-cell {
  white-space: nowrap;
}
.routing-icon-btn {
  color: var(--ink-3);
}
.routing-icon-btn:hover {
  color: var(--ink);
  border-color: var(--rule-2);
}
.routing-delete-btn {
  color: var(--ink-3);
}
.routing-delete-btn:hover {
  color: var(--danger);
  border-color: var(--danger);
}
.count-link {
  color: var(--ink);
  text-decoration: none;
  font-weight: inherit;
}
.text-muted .count-link {
  color: inherit;
}
.count-link:hover {
  color: var(--accent);
  text-decoration: none;
}
.number-route-list {
  display: grid;
  gap: 8px;
  padding: 2px 0 12px;
}
.number-route-list-compact {
  margin-top: 10px;
  padding-bottom: 0;
}
.number-route-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px 12px;
}
.number-primary-line {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.number-extension-label {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--ink-3);
  line-height: 1.2;
}
.number-company-mobile {
  display: none;
  margin-top: 3px;
  color: var(--ink-3);
  font-size: var(--text-sm);
  line-height: 1.25;
}
.number-channel-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
}
.number-channel-link {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  color: var(--ink-3);
  text-decoration: none;
  background: var(--white);
}
.number-channel-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}
.number-channel-link.is-enabled-no-route {
  color: var(--ink-3);
  background: var(--surface);
  cursor: default;
}
.number-channel-link.is-enabled-no-route:hover {
  color: var(--ink-3);
  border-color: var(--rule-2);
}
.routing-channel-icon {
  cursor: default;
}
.routing-channel-heading,
.routing-channel-cell {
  width: 54px;
  text-align: center;
  vertical-align: middle;
}
.routing-channel-cell .routing-channel-icon {
  margin-inline: auto;
}
.routing-channel-filter-short {
  display: none;
}
.routing-channel-icon:hover {
  color: var(--ink-3);
  border-color: var(--rule-2);
}
.number-channel-link svg {
  width: 18px;
  height: 18px;
}

/* ── Form elements ── */
.form-group  { margin-bottom: 16px; }
.form-label  { display: block; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--ink-3); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em; }
.form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.form-label-row .form-label {
  margin-bottom: 0;
}
.form-help {
  margin-top: 6px;
  color: var(--ink-3);
  font-size: var(--text-xs);
  line-height: 1.35;
}
.number-initial-route-grid .form-group {
  margin-bottom: 4px;
}
.form-check-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.form-input  { width: 100%; height: 42px; padding: 0 14px; border: 1.5px solid var(--rule-2); border-radius: var(--radius-sm); font-size: var(--text-base); color: var(--ink); background: var(--white); outline: none; font-family: inherit; transition: border-color .15s; box-sizing: border-box; line-height: 1.2; }
textarea.form-input { height: auto; padding: 11px 14px; line-height: 1.5; }
.form-input:focus  { border-color: var(--accent); }
.form-input-auto   { width: auto; }
select.form-input  { cursor: pointer; }
textarea.form-input{ resize: vertical; }
.btn-mobile-short .btn-label-short { display: none; }

/* ── Filter bar ── */
.filter-bar  { display: flex; gap: 10px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; row-gap: 10px; }
.filter-bar .filter-bar { margin-bottom: 0; }   /* nested form inside filter-bar */
.filter-bar > * { align-self: center; }

/* ── Alerts ── */
.alert         { padding: 14px 18px; border-radius: var(--radius-sm); font-size: var(--text-base); margin-bottom: 18px; }
.alert-error   { background: var(--alert-err-bg); color: var(--alert-err-fg); border: 1.5px solid var(--alert-err-bd); }
.alert-success { background: var(--alert-ok-bg); color: var(--alert-ok-fg); border: 1.5px solid var(--alert-ok-bd); }
.alert-ok      { background: var(--alert-ok-bg); color: var(--alert-ok-fg); border: 1.5px solid var(--alert-ok-bd); }
.alert-info    { background: var(--surface); color: var(--ink-2); border: 1.5px solid var(--rule); }

/* ── Pagination ── */
.pagination    { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.page-link     { padding: 7px 13px; border: 1.5px solid var(--rule-2); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-2); text-decoration: none; transition: all .1s; }
.page-link:hover   { background: var(--surface); text-decoration: none; }
.page-link.active  { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Back link ── */
.back-link     { font-size: var(--text-sm); color: var(--ink-3); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 18px; }
.back-link:hover { color: var(--accent); text-decoration: none; }

/* ── Detail panels ── */
.detail-row    { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.detail-row:last-child { border-bottom: none; }
.detail-label  { font-size: var(--text-sm); color: var(--ink-3); }
.detail-value  { font-size: var(--text-sm); color: var(--ink-2); text-align: right; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Message thread ── */
.message-row           { padding: 14px 20px; border-bottom: 1px solid var(--rule); }
.message-row.inbound   { background: var(--surface); }
.message-row.outbound  { background: var(--white); }
.conv-thread-header {
  gap: 12px;
}
.message-sort-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 218px;
  margin-left: auto;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.message-sort-toggle button {
  height: 30px;
  border: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--ink-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.message-sort-toggle button:hover {
  color: var(--ink);
}
.message-sort-toggle button.is-active {
  background: var(--white);
  color: var(--accent);
  box-shadow: 0 1px 8px rgba(15, 20, 25, .08);
}
.message-header        { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.message-sender        { font-size: var(--text-xs); font-weight: var(--weight-heavy); text-transform: uppercase; letter-spacing: .06em; }
.message-sender-email  { font-size: var(--text-xs); color: var(--ink-3); }
.message-time          { font-size: var(--text-xs); color: var(--ink-3); font-family: var(--font-mono); }
.message-body          { font-size: var(--text-base); color: var(--ink-2); line-height: 1.6; }
.message-duration      { font-size: var(--text-xs); color: var(--ink-3); margin-top: 4px; }
.sender-customer { color: #7c3aed; }
.sender-agent    { color: var(--accent); }
.sender-ai       { color: var(--ok); }
.sender-system   { color: var(--ink-3); }

/* ── AI summary block ── */
.ai-summary        { padding: 14px 16px; background: var(--surface); border-radius: var(--radius-sm); border-left: 3px solid var(--accent); margin-top: 14px; }
.ai-summary-label  { font-size: var(--text-xs); font-weight: var(--weight-heavy); color: var(--accent); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.ai-summary-text   { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.6; }

/* ── Bar chart (reports) ── */
.bar-row        { margin-bottom: 14px; }
.bar-label-row  { display: flex; justify-content: space-between; font-size: var(--text-sm); margin-bottom: 5px; }
.bar-label      { color: var(--ink-2); }
.bar-value      { font-weight: var(--weight-heavy); color: var(--ink); }
.bar-track      { background: var(--rule); border-radius: 4px; height: 7px; width: 100%; }
.bar-fill       { height: 7px; border-radius: 4px; transition: width .4s ease; }

/* ── Mono text ── */
.mono { font-family: var(--font-mono); font-size: .88em; }

/* ── Utility ── */
.text-muted   { color: var(--ink-3); }
.text-danger  { color: var(--danger); }
.text-ok      { color: var(--ok); }
.text-sm      { font-size: var(--text-sm); }
.text-xs      { font-size: var(--text-xs); }
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.font-bold    { font-weight: var(--weight-heavy); }
.font-medium  { font-weight: var(--weight-medium); }
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-xs       { gap: 6px; }
.gap-sm       { gap: 10px; }
.gap-md       { gap: 16px; }
.w-full       { width: 100%; }

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 3px; }

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */

@media (max-width: 1100px) {
  .grid-stats  { grid-template-columns: repeat(2,1fr); }
  .grid-2col   { grid-template-columns: 1fr; }
  .grid-3col   { grid-template-columns: repeat(2,1fr); }
  .grid-detail { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .conv-thread-header {
    align-items: stretch;
    flex-direction: column;
  }
  .message-sort-toggle {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }
  /* Sidebar hidden off-canvas on mobile */
  .sidebar           { transform: translateX(calc(-1 * var(--sidebar-w))); }
  .sidebar.mobile-open{ transform: translateX(0); }
  .main              { margin-left: 0 !important; }
  body.flow-builder-page .topbar { display: none; }
  .page-content      { padding: 16px; }
  body.flow-builder-page .page-content { padding: 0; }
  .topbar            { padding: 0 16px; }
  .grid-stats        { grid-template-columns: 1fr 1fr; }
  .grid-3col         { grid-template-columns: 1fr; }
  .hide-mobile       { display: none !important; }
  .show-mobile       { display: block !important; }
  .number-company-mobile { display: block; }
  .btn-mobile-short .btn-label-full { display: none; }
  .btn-mobile-short .btn-label-short { display: inline; }
}

@media (min-width: 769px) {
  .mobile-only { display: none !important; }

  body.sidebar-collapsed .sidebar {
    width: var(--sidebar-rail-w);
    transform: none;
  }
  body.sidebar-collapsed .main {
    margin-left: var(--sidebar-rail-w);
  }
  body.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding: 18px 0;
  }
  body.sidebar-collapsed .sidebar-brand > div {
    display: none;
  }
  body.sidebar-collapsed .sidebar .sidebar-toggle {
    margin: 0 auto;
  }
  body.sidebar-collapsed .nav-item {
    justify-content: center;
    gap: 0;
    padding: 13px 0;
    border-left-color: transparent;
    border-right: 3px solid transparent;
  }
  body.sidebar-collapsed .nav-item:hover {
    border-right-color: var(--rule-2);
  }
  body.sidebar-collapsed .nav-item.active {
    border-left-color: transparent;
    border-right-color: var(--accent);
  }
  body.sidebar-collapsed .nav-item-label,
  body.sidebar-collapsed .nav-item-stack {
    display: none !important;
  }
  body.sidebar-collapsed .nav-item.nav-item-settings {
    align-items: center;
  }
  body.sidebar-collapsed .nav-item.nav-item-settings > svg {
    margin-top: 0;
  }
}

/* ── Conversation list item (dashboard) ── */
.conv-list-item { display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-bottom:1px solid var(--rule); text-decoration:none; transition:background .1s; }
.conv-list-item:hover { background: var(--surface); }

/* ── Login page ── */
.login-wrap  { width:100%; max-width:420px; padding:0; }
.login-card  { background:var(--white); border:1px solid var(--rule); border-radius:var(--radius); padding:48px 44px; box-shadow:0 4px 24px rgba(0,0,0,.06); }
.login-brand { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-heavy); letter-spacing:-.03em; margin-bottom:4px; }
.login-sub   { font-size: var(--text-base); color:var(--ink-3); margin-bottom:32px; }
.login-form-row { display:flex; justify-content:flex-end; margin:-4px 0 14px; font-size:var(--text-sm); }
.login-alt-action { margin-top:16px; text-align:center; font-size:var(--text-sm); }
.demo-section{ margin-top:28px; padding-top:22px; border-top:1px solid var(--rule); }
.demo-title  { font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-heavy); color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
.demo-row    { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--surface); }
.demo-email  { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.demo-role   { font-size: var(--text-xs); color:var(--ink-3); }
.demo-pw     { font-size: var(--text-sm); color:var(--rule-2); margin-top:10px; }

.text-accent      { color: var(--accent); }
.form-search      { width: 280px; }
.btn-login-submit { margin-top: 4px; }

/* ── Password show/hide ── */
.password-wrap         { position: relative; }
.password-wrap .form-input { padding-right: 44px; }
.password-toggle       { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 6px; border-radius: 6px; color: var(--ink-3); display: flex; align-items: center; justify-content: center; transition: background .1s, color .1s; }
.password-toggle:hover { background: var(--surface); color: var(--ink); }
.password-rules {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.password-rules-confirm {
  margin-top: 8px;
}
.password-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
  opacity: .58;
  font-size: var(--text-xs);
  line-height: 1.25;
  transition: color .15s, opacity .15s;
}
.password-rule-mark {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--surface);
  color: transparent;
  font-size: 11px;
  font-weight: var(--weight-heavy);
  transition: background .15s, color .15s;
}
.password-rule.is-met {
  color: var(--ok);
  opacity: 1;
}
.password-rule.is-met .password-rule-mark {
  background: var(--ok);
  color: #fff;
}

/* ── Contact links (email/phone) ── */
.contact-link         { color: var(--ink-2); text-decoration: none; }
.contact-link:hover   { color: var(--accent); text-decoration: underline; }
.data-table a.contact-link { color: var(--ink-2); font-weight: inherit; }
.data-table a.contact-link:hover { color: var(--accent); }

/* Sort indicators */
table.dt-table th.dt-orderable-asc,
table.dt-table th.dt-orderable-desc,
.data-table th.dt-orderable-asc,
.data-table th.dt-orderable-desc {
  cursor: pointer;
  position: relative;
  user-select: none;
}
.data-table th.dt-orderable-asc:hover,
.data-table th.dt-orderable-desc:hover {
  background: var(--rule);
  color: var(--ink);
}
.data-table th.dt-ordering-asc::after  { content: ' ↑'; color: var(--accent); }
.data-table th.dt-ordering-desc::after { content: ' ↓'; color: var(--accent); }
.dt-column-order { display: none; }  /* hide DataTables' default arrow icons */

/* Footer info + paging */
.dt-info {
  font-size: var(--text-sm);
  color: var(--ink-3);
  padding: 14px 4px;
}
.dt-paging { padding: 14px 4px; text-align: right; }
.dt-paging-button {
  display: inline-block;
  padding: 6px 12px;
  margin: 0 2px;
  border: 1.5px solid var(--rule-2);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink-2) !important;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.dt-paging-button:hover:not(.disabled):not(.current) { background: var(--surface); }
.dt-paging-button.current  { background: var(--accent); color: #fff !important; border-color: var(--accent); }
.dt-paging-button.disabled { opacity: .4; cursor: not-allowed; }

/* Layout: stack the controls on top of the table */
.dt-layout-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 18px; }
.dt-layout-row.dt-layout-table { padding: 0; }

@media (max-width: 768px) {
  .dt-search input { min-width: 0; width: 100%; }
  .dt-length { float: none; }
  .dt-paging { text-align: center; }
}

/* ── Sortable table headers (vanilla, table.js) ── */
.data-table th.th-sortable        { cursor: pointer; user-select: none; }
.data-table th.th-sortable:hover  { background: var(--rule); color: var(--ink); }
.data-table th.th-sortable::after { content: ''; display: inline-block; margin-left: 4px; opacity: 0.3; font-size: var(--text-xs); }
.data-table th.th-sortable.sort-asc::after  { content: ' ↑'; opacity: 1; color: var(--accent); }
.data-table th.th-sortable.sort-desc::after { content: ' ↓'; opacity: 1; color: var(--accent); }

/* ── Sidebar footer ── */
.sidebar-footer-email,
.nav-item-signout,
.oncall-row,
.oncall-dot,
.oncall-label { display: none !important; }

/* Settings nav item — stacked label + email subtitle */
.nav-item.nav-item-settings        { align-items: flex-start; padding-top: 11px; padding-bottom: 11px; }
.nav-item.nav-item-settings > svg  { margin-top: 2px; flex-shrink: 0; }
.nav-item.nav-item-settings .nav-item-stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; min-width: 0; flex: 1; gap: 2px; }
.nav-item.nav-item-settings .nav-item-stack > span { display: block; width: 100%; }
.nav-item.nav-item-settings .nav-item-sub  { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item.nav-item-settings.active .nav-item-sub { color: var(--accent); opacity: .85; }

/* ── Settings page — constrained narrow form layout ── */
.settings-form          { max-width: 540px; }

.settings-section       { margin-bottom: 24px; }
.settings-section + .settings-section { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--rule-2); }
.settings-section:last-of-type { margin-bottom: 24px; }

.settings-h2            { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; }
.settings-h2-note       { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--ink-3); text-transform: none; letter-spacing: 0; }

.settings-field         { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 16px; padding: 6px 0; }
.settings-field-label   { font-size: var(--text-sm); color: var(--ink-2); font-weight: var(--weight-medium); }
.settings-field-static  { font-size: var(--text-sm); color: var(--ink); }
.settings-field .form-input { font-size: var(--text-sm); max-width: 320px; }
.name-pair              { display: flex; gap: 8px; max-width: 320px; }
.name-pair .form-input  { flex: 1; max-width: none; }

@media (max-width: 640px) {
  .settings-field       { grid-template-columns: 1fr; gap: 6px; padding: 4px 0; }
  .settings-field .form-input { max-width: 100%; }
}

/* Theme toggle */
.theme-toggle           { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.theme-option           { padding: 8px 16px; border: 1.5px solid var(--rule-2); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-2); transition: all .15s; user-select: none; background: var(--white); }
.theme-option:hover     { background: var(--surface); }
.theme-option.selected  { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.theme-option input     { display: none; }

/* Color palette */
.color-grid             { display: grid; grid-template-columns: repeat(auto-fill, 32px); gap: 8px; max-width: 360px; }
.color-swatch           { width: 32px; height: 32px; border-radius: 6px; cursor: pointer; display: block; border: 2px solid transparent; position: relative; transition: transform .12s, box-shadow .12s; }
.color-swatch:hover     { transform: scale(1.12); }
.color-swatch.selected  { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--ink); }
.color-swatch input     { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; width: 100%; height: 100%; }

/* Footer save row */
.settings-actions       { padding-top: 18px; border-top: 1px solid var(--rule); }

/* ── Saved indicator next to Save button ── */
.settings-actions       { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--rule); }
.saved-flag             { color: var(--ok); font-size: var(--text-sm); font-weight: var(--weight-bold); opacity: 0; animation: savedFade 2.4s ease forwards; }
@keyframes savedFade {
  0%   { opacity: 0; transform: translateX(-4px); }
  10%  { opacity: 1; transform: translateX(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(0); }
}

/* ── Color swatch checkmark on selected ── */
.color-swatch.selected::after {
  content: '';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

/* ── Conversation detail layout ── */
.conv-header-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .conv-header-grid { grid-template-columns: 1fr; }
}

.conv-issue .card-body,
.conv-user  .card-body { padding: 18px; }

.conv-subject {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-heavy);
  color: var(--ink);
  letter-spacing: -.02em;
  margin: 0 0 12px;
  line-height: 1.25;
}

.conv-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.conv-meta-row {
  display: grid;
  grid-template-columns: 80px auto;
  justify-content: start;
  align-items: center;
  gap: 12px;
}
.conv-meta-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.conv-sentiment {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.conv-intent {
  font-size: var(--text-sm);
  color: var(--ink-3);
  margin-bottom: 12px;
}

/* User card content */
.conv-user-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-heavy);
  color: var(--ink);
  margin-bottom: 2px;
}
.conv-user-account {
  font-size: var(--text-sm);
  color: var(--ink-3);
  margin-bottom: 2px;
}
.conv-user-vendor {
  font-size: var(--text-sm);
  color: var(--ink-3);
  margin-bottom: 14px;
}
.conv-user-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--text-sm);
  margin-bottom: 14px;
}
.conv-user-stat {
  font-size: var(--text-sm);
  color: var(--ink-2);
  padding: 8px 0;
  border-top: 1px solid var(--rule);
}
.conv-user-stat strong { color: var(--ink); font-weight: var(--weight-heavy); }

.conv-user-tickets {
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}
.conv-user-stat-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 6px;
}
.conv-user-stat-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.conv-user-more-link {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  text-transform: none;
}
.conv-user-more-link:hover {
  color: var(--accent-d);
  text-decoration: none;
}
.conv-user-tickets ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.conv-user-tickets li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: var(--text-sm);
}
.conv-user-tickets .contact-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Thread visually distinct from header zone */
.conv-thread { background: var(--white); }

.message-audio { margin-top: 8px; height: 32px; width: 100%; max-width: 300px; }

/* ── Reply area ── */
.reply-area          { padding: 16px 18px; border-top: 1px solid var(--rule); }
.reply-form          { display: flex; flex-direction: column; gap: 10px; }
.reply-form textarea { min-height: 80px; resize: vertical; height: auto; padding: 12px 14px; line-height: 1.5; }
.reply-actions       { display: flex; align-items: center; gap: 10px; }
.reply-status        { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.reply-ok            { color: var(--ok); }
.reply-error         { color: #8f1d1d; }
.reply-buttons       { display: flex; align-items: center; gap: 10px; }
.reply-buttons-right { margin-left: auto; }

/* ── Modal forms ── */
.filter-action-right { margin-left: auto; min-height: 42px; padding: 9px 20px; font-size: var(--text-base); }

.name-link {
  display: inline;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: var(--weight-bold);
  text-align: left;
  cursor: pointer;
}
.name-link:hover { text-decoration: underline; }
.name-link.status-inactive { color: var(--ink-3); opacity: .3; }
.name-link.status-inactive:hover { opacity: .55; }

.customer-link-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.customer-link-item {
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.customer-link-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--ink);
}
.customer-link-meta,
.customer-link-empty {
  font-size: var(--text-xs);
  color: var(--ink-3);
  margin-top: 2px;
}

.customer-filter-bar {
  flex-wrap: nowrap;
}
.customer-filter-bar .customer-search {
  flex: 0 1 320px;
}
.routing-filter-bar #routingTableCount {
  display: inline-flex;
  flex: 0 0 auto;
  white-space: nowrap;
}
.library-filter-bar #libraryTableCount {
  display: inline-flex;
  flex: 0 0 auto;
  white-space: nowrap;
}
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 20, 25, .48);
}
.modal-overlay.open { display: flex; }

.modal-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 22px 70px rgba(15, 20, 25, .22);
}
.modal-panel-wide { max-width: 760px; }
.library-modal-panel { max-width: 900px; }

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--rule);
}
.modal-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-heavy);
  color: var(--ink);
}
.modal-subtitle {
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}
.modal-close:hover {
  background: var(--surface);
  color: var(--ink);
}
.modal-close svg { width: 18px; height: 18px; }

.modal-body {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  padding: 18px 20px 20px;
}
.modal-section-title {
  margin: 4px 0 12px;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 0;
}
.modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  flex-wrap: nowrap;
}
.modal-action-spacer {
  flex: 1 1 auto;
  min-width: 12px;
}
.modal-actions .btn {
  flex-shrink: 0;
}
.library-table .library-node-title,
.library-modal-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.library-table .library-node-title svg,
.library-modal-title svg {
  width: 17px;
  height: 17px;
  color: var(--accent);
  flex: 0 0 auto;
}
.library-form textarea.form-input {
  resize: vertical;
}
.library-checkline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 14px;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.library-checkline input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
.library-toggle-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.library-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.library-chip {
  display: inline-flex;
  min-width: 0;
}
.library-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.library-chip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.library-chip span svg {
  width: 15px;
  height: 15px;
}
.library-chip input:checked + span {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent-d);
}
.library-context-columns {
  align-items: start;
}
.library-context-title {
  margin-bottom: 8px;
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.library-context-grid {
  align-content: flex-start;
  max-height: 220px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.library-context-grid .library-chip span {
  background: var(--white);
}
.library-advanced {
  margin-top: 6px;
  padding-top: 4px;
}
.library-advanced summary {
  margin-bottom: 12px;
  color: var(--ink-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.library-json-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  line-height: 1.45;
}

@media (max-width: 768px) {
  .customer-filter-bar {
    flex-wrap: nowrap;
  }
  .customer-filter-bar .customer-search {
    width: 50vw;
    min-width: 0;
    flex: 0 1 50vw;
  }
  .customer-filter-bar .numbers-search {
    width: auto;
    flex: 1 1 auto;
  }
  .customer-filter-bar #tableCount {
    display: none;
  }
  .routing-filter-bar #routingTableCount,
  .routing-filter-bar #numbersTableCount {
    display: none;
  }
  .routing-channel-filter-full {
    display: none;
  }
  .routing-channel-filter-short {
    display: inline-flex;
  }
  .library-filter-bar #libraryTableCount {
    display: inline-flex;
    font-size: var(--text-xs);
  }
  .customer-filter-bar .filter-action-right {
    margin-left: auto;
    width: auto;
    flex-shrink: 0;
    justify-content: center;
  }
  .filter-action-right {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
  .modal-overlay {
    align-items: stretch;
    padding: 0;
  }
  .modal-panel {
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .modal-body {
    flex: 1;
    max-height: none;
  }
  .form-grid-2 { grid-template-columns: 1fr; }
  .modal-actions {
    align-items: center;
    flex-direction: row;
  }
  .modal-actions .btn { justify-content: center; }
}

/* ── Info panels ── */
.info-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 78;
  display: flex;
  justify-content: flex-end;
  background: rgba(15, 20, 25, .38);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
.info-panel-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.info-panel {
  width: min(440px, 100vw);
  height: 100vh;
  overflow-y: auto;
  background: var(--white);
  border-left: 1px solid var(--rule);
  box-shadow: -18px 0 60px rgba(15, 20, 25, .18);
  padding: 18px;
  transform: translateX(28px);
  opacity: .96;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .22s ease;
  will-change: transform, opacity;
}

/* ── Flow builder ── */
.flow-shell {
  --flow-page-gutter: 16px;
  --flow-settings-w: 370px;
  --flow-topbar-h: 104px;
  --flow-content-gap: 14px;
  --flow-backbar-h: 0px;
  --flow-topbar-top: var(--flow-page-gutter);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  gap: 14px;
  padding-top: calc(var(--flow-topbar-h) + var(--flow-page-gutter) + var(--flow-content-gap));
}
.flow-shell::before,
.flow-shell::after {
  content: "";
  position: fixed;
  z-index: 27;
  pointer-events: none;
  background: var(--surface);
}
.flow-shell::before {
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--flow-page-gutter) + var(--flow-topbar-h) + var(--flow-content-gap));
}
.flow-shell::after {
  display: none;
}
body.sidebar-collapsed .flow-shell::before {
  left: 0;
}
.flow-backbar {
  display: none;
}
body.sidebar-collapsed .flow-backbar {
  left: var(--flow-page-gutter);
}
.flow-topbar {
  position: fixed;
  top: var(--flow-topbar-top);
  left: var(--flow-page-gutter);
  right: var(--flow-page-gutter);
  z-index: 29;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: var(--flow-topbar-h);
  overflow: hidden;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(15, 20, 25, .08);
}
body.sidebar-collapsed .flow-topbar {
  left: var(--flow-page-gutter);
}
.flow-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.flow-back-link svg,
.flow-meta svg {
  width: 15px;
  height: 15px;
}
.flow-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-heavy);
  color: var(--ink);
  line-height: 1.15;
}
.flow-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.flow-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 8px;
  color: var(--ink-2);
  font-size: var(--text-base);
}
.flow-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.flow-meta-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start !important;
  gap: 3px !important;
}
.flow-meta-stack > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.flow-meta-stack small {
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: 1.2;
}
.flow-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.flow-action-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  width: 100%;
}
.flow-action-row .btn {
  height: 44px;
  padding: 0 22px;
  font-size: var(--text-base);
  line-height: 1;
}
.flow-active-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.flow-active-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
.flow-active-toggle-mobile {
  display: none !important;
}
.flow-actions .btn:disabled {
  opacity: .38;
  cursor: not-allowed;
  color: var(--ink-3);
}
.flow-view-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: auto;
  min-width: 220px;
  margin-right: 42px;
  height: 44px;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.flow-view-toggle button {
  height: 36px;
  border: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--ink-3);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.flow-view-toggle button:hover {
  color: var(--ink);
}
.flow-view-toggle button.is-active {
  background: var(--white);
  color: var(--accent);
  box-shadow: 0 1px 8px rgba(15, 20, 25, .08);
}
.flow-route-panel {
  display: none;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.flow-route-panel.open { display: block; }
.flow-workspace {
  display: block;
  margin-right: 0;
  min-height: 620px;
  flex: 1;
}
.flow-settings {
  position: fixed;
  top: calc(var(--flow-topbar-top) + var(--flow-topbar-h) + var(--flow-content-gap));
  right: var(--flow-page-gutter);
  bottom: var(--flow-page-gutter);
  z-index: 28;
  width: var(--flow-settings-w);
  max-height: none;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px;
  box-sizing: border-box;
  box-shadow: 0 12px 34px rgba(15, 20, 25, .08);
  transition: transform .22s ease;
}
html[data-theme="dark"] .flow-settings {
  box-shadow:
    0 0 0 1px rgba(29, 155, 240, .16),
    0 0 0 4px rgba(29, 155, 240, .08),
    0 18px 50px rgba(0, 0, 0, .42);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) .flow-settings {
    box-shadow:
      0 0 0 1px rgba(29, 155, 240, .16),
      0 0 0 4px rgba(29, 155, 240, .08),
      0 18px 50px rgba(0, 0, 0, .42);
  }
}
.flow-settings::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 5;
  background: var(--accent);
  pointer-events: none;
}
.flow-settings.is-closed {
  transform: translateX(calc(100% + var(--flow-page-gutter) + 24px));
  pointer-events: none;
}
body.flow-settings-closed .flow-workspace {
  margin-right: 0;
}
.flow-settings-close {
  display: none;
}
.flow-settings-slider {
  display: flex;
  width: 200%;
  height: 100%;
  min-height: 100%;
  transition: transform .24s ease;
}
.flow-settings.show-action-chooser .flow-settings-slider {
  transform: translateX(-50%);
}
.flow-settings-pane {
  width: 50%;
  min-width: 0;
  height: 100%;
  padding: 14px;
  overflow-y: auto;
}
.flow-panel-title {
  margin-bottom: 10px;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--ink-3);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.flow-settings .form-label,
.flow-settings .form-help {
  font-size: var(--text-sm);
}
.flow-settings .form-input,
.flow-settings textarea,
.flow-settings select {
  font-size: calc(var(--text-base) + 2px);
}
.flow-palette-item,
.flow-action-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.flow-palette-item:hover,
.flow-action-item:hover {
  background: var(--surface);
  border-color: var(--rule);
}
.flow-action-item.is-disabled,
.flow-action-item:disabled {
  opacity: .46;
  cursor: not-allowed;
}
.flow-action-item.is-disabled:hover,
.flow-action-item:disabled:hover {
  background: transparent;
  border-color: transparent;
}
.flow-palette-item svg,
.flow-action-item svg,
.flow-node-icon svg {
  width: 18px;
  height: 18px;
}
.flow-palette-item strong,
.flow-action-item strong {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}
.flow-palette-item small,
.flow-action-item small {
  display: block;
  margin-top: 1px;
  color: var(--ink-3);
  font-size: var(--text-sm);
  line-height: 1.35;
}
.flow-canvas-wrap {
  position: relative;
  min-width: 0;
  overflow: visible;
}
.flow-canvas {
  position: relative;
  width: 100%;
  min-width: 100%;
  min-height: 620px;
  cursor: grab;
  background-color: var(--white);
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 32px 32px;
}
.flow-canvas.is-panning {
  cursor: grabbing;
}
.flow-outline-wrap {
  min-height: 620px;
  padding: 0 18px 18px;
  background: var(--white);
}
.flow-outline-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.flow-outline-subtitle {
  color: var(--ink-3);
  font-size: var(--text-base);
}
.flow-outline {
  display: grid;
  gap: 8px;
}
.flow-outline-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.flow-outline-row {
  display: block;
  position: relative;
  padding-left: calc(var(--outline-depth) * 56px);
  min-width: 0;
}
.flow-outline-row::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -8px;
  left: calc((var(--outline-depth) * 56px) - 28px);
  width: 2px;
  border-radius: 999px;
  background: var(--rule-2);
  opacity: .9;
}
.flow-outline-row.is-last-sibling::before {
  bottom: auto;
  height: 34px;
}
.flow-outline-lane {
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: calc((var(--lane-depth) * 56px) - 28px);
  width: 2px;
  border-radius: 999px;
  background: var(--rule-2);
  opacity: .9;
  pointer-events: none;
}
.flow-outline-row::after {
  content: "";
  position: absolute;
  top: 33px;
  left: calc((var(--outline-depth) * 56px) - 28px);
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: var(--rule-2);
  opacity: .9;
}
.flow-outline-row[style*="--outline-depth: 0"]::before,
.flow-outline-row[style*="--outline-depth:0"]::before {
  display: none;
}
.flow-outline-row[style*="--outline-depth: 0"]::after,
.flow-outline-row[style*="--outline-depth:0"]::after {
  display: none;
}
.flow-outline-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  padding-left: 36px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.flow-outline-node:hover {
  background: var(--surface);
  border-color: var(--rule-2);
}
.flow-outline-row.selected .flow-outline-node {
  border-width: 2px;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.flow-outline-title {
  min-width: 0;
  flex: 1 1 auto;
}
.flow-outline-title strong,
.flow-outline-title small,
.flow-outline-title .flow-outline-snippet {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-outline-title strong {
  font-size: var(--text-base);
  font-weight: var(--weight-heavy);
}
.flow-outline-title small {
  margin-top: 2px;
  color: var(--ink-3);
  font-size: var(--text-sm);
}
.flow-outline-title .flow-outline-snippet {
  margin-top: 4px;
  color: var(--ink-2);
  font-style: italic;
  line-height: 1.35;
}
.flow-outline-flags {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 26px;
  margin-left: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  pointer-events: none;
}
.flow-outline-branch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  max-width: none;
  height: 100%;
  padding: 7px 0;
  border: 0;
  border-right: 1px solid var(--rule);
  border-radius: 0;
  color: var(--ink-3);
  background: var(--surface);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-outline-warning {
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.flow-connections,
.flow-nodes {
  position: absolute;
  inset: 0;
}
.flow-connections {
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.flow-nodes {
  z-index: 2;
  pointer-events: none;
}
.flow-connection-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  opacity: .62;
  pointer-events: none;
}
.flow-connection-label rect {
  fill: var(--white);
  stroke: var(--accent);
  stroke-width: 1.5;
  filter: drop-shadow(0 4px 10px rgba(15, 20, 25, .12));
}
.flow-connection-label {
  cursor: pointer;
  pointer-events: all;
}
.flow-connection-label:hover rect {
  fill: var(--accent-bg);
  stroke-width: 2;
}
.flow-connection-label text {
  fill: var(--accent-d);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--weight-heavy);
  letter-spacing: .02em;
}
.flow-node {
  position: absolute;
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 270px;
  min-height: 86px;
  padding: 12px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(15, 20, 25, .08);
  text-align: left;
  cursor: pointer;
  touch-action: none;
}
.flow-node:active { cursor: grabbing; }
.flow-node.selected {
  border-width: 3px;
  border-color: var(--accent);
  box-shadow:
    0 0 0 4px var(--accent-bg),
    0 16px 42px rgba(29, 155, 240, .32);
}
.flow-node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: var(--radius-sm);
  background: var(--accent-bg);
  color: var(--accent);
}
.flow-node-text {
  min-width: 0;
}
.flow-node-text strong,
.flow-node-text small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-node-text strong {
  font-size: var(--text-base);
  font-weight: var(--weight-heavy);
}
.flow-node-text small {
  margin-top: 2px;
  color: var(--ink-3);
  font-size: var(--text-sm);
}
.flow-node-snippet {
  margin-top: 4px;
  color: var(--ink-2);
  font-style: italic;
  line-height: 1.35;
}
.flow-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.flow-settings-head > div {
  min-width: 0;
}
.flow-settings-type {
  color: var(--ink-3);
  font-size: var(--text-base);
}
.flow-settings-title-line {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: var(--weight-heavy);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.flow-settings-title-line svg {
  display: block;
  width: 18px;
  height: 18px;
  color: var(--accent);
  stroke-width: 1.9;
  flex-shrink: 0;
}
.flow-settings-title-line span {
  display: block;
  min-width: 0;
}
.flow-output-title {
  margin-top: 18px;
}
.flow-output-rule {
  margin-left: 5px;
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
}
.flow-output-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--text-base);
}
.flow-output-chip span {
  color: var(--ink-3);
}
.flow-output-chip strong {
  min-width: 0;
  color: var(--ink);
  font-weight: var(--weight-bold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-empty-state {
  padding: 12px;
  border: 1px dashed var(--rule-2);
  border-radius: var(--radius-sm);
  color: var(--ink-3);
  font-size: var(--text-base);
}
.flow-readonly-card {
  display: grid;
  gap: 10px;
  padding: 12px 0 4px;
}
.flow-readonly-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  font-size: var(--text-sm);
}
.flow-readonly-row span {
  color: var(--ink-3);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: var(--text-xs);
}
.flow-readonly-row strong {
  min-width: 0;
  color: var(--ink);
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}
.flow-textarea {
  min-height: 104px;
  resize: vertical;
}
.flow-prompt-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink-3);
  cursor: pointer;
}
.flow-prompt-preview:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}
.flow-prompt-preview:disabled {
  opacity: .55;
  cursor: wait;
}
.flow-prompt-preview svg {
  width: 15px;
  height: 15px;
}
.flow-option-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.flow-option-row.can-remove {
  grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr) 34px;
}
.flow-option-key {
  text-align: center;
}
.flow-output-destination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-3);
  font-size: var(--text-sm);
}
.flow-output-destination strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-day-toggle-group {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.flow-day-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border: 1.5px solid var(--rule-2);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink-3);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-heavy);
  cursor: pointer;
}
.flow-day-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.flow-day-toggle.is-active {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}
.flow-notify-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.flow-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.flow-checkbox-row input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
.flow-checkbox-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-time-range-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.flow-add-option {
  margin-top: 4px;
}
.flow-settings-edit-pane {
  max-height: 1200px;
  overflow: hidden;
  transition: max-height .28s ease, margin-bottom .28s ease;
}
.flow-settings.show-action-chooser .flow-settings-edit-pane {
  max-height: 0;
  margin-bottom: 0;
  pointer-events: none;
}
.flow-settings-output-pane {
  position: relative;
  z-index: 1;
}
.flow-output-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.flow-output-title-row .flow-output-title {
  margin: 0;
}
.flow-add-action-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.flow-add-action-trigger:hover {
  background: var(--surface);
  border-color: var(--accent);
}
.flow-settings.show-action-chooser .flow-add-action-trigger {
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  overflow: hidden;
}
.flow-add-action-trigger strong {
  color: var(--accent);
  font-weight: var(--weight-heavy);
  letter-spacing: .03em;
}
.flow-action-subpanel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .26s ease, margin-top .26s ease;
}
.flow-settings.show-action-chooser .flow-action-subpanel {
  max-height: 1200px;
  margin-top: 10px;
}
.flow-action-picker-title {
  margin-top: 2px;
}
.flow-action-back {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-2);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.flow-settings.show-action-chooser .flow-action-back {
  display: inline-flex;
}
.flow-action-back:hover {
  background: var(--surface);
  color: var(--ink);
}
.flow-action-back svg {
  width: 16px;
  height: 16px;
}
.flow-action-category + .flow-action-category {
  margin-top: 14px;
}
.flow-action-category-title {
  margin: 0 0 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.flow-action-grid {
  display: grid;
  gap: 8px;
}
.is-hidden {
  display: none !important;
}
.flow-notice {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  padding: 9px 13px;
  border-radius: var(--radius-pill);
  background: var(--ok);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  box-shadow: 0 12px 34px rgba(15, 20, 25, .18);
}
.flow-notice-error {
  max-width: min(420px, calc(100vw - 44px));
  border: 1px solid var(--alert-err-bd);
  background: var(--alert-err-bg);
  color: var(--alert-err-fg);
}
.flow-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 20, 25, .18);
}
.flow-confirm {
  width: min(420px, 100%);
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 20px 60px rgba(15, 20, 25, .22);
}
.flow-confirm-text {
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: 1.4;
}
.flow-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
.flow-saving-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 20, 25, .24);
  backdrop-filter: blur(2px);
}
.flow-saving-modal {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(430px, 100%);
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 22px 70px rgba(15, 20, 25, .24);
}
.flow-saving-spinner {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 3px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: flowSavingSpin .8s linear infinite;
}
.flow-saving-title {
  color: var(--ink);
  font-size: var(--text-lg);
  font-weight: var(--weight-heavy);
  line-height: 1.2;
}
.flow-saving-text {
  margin-top: 4px;
  color: var(--ink-3);
  font-size: var(--text-sm);
  line-height: 1.4;
}
@keyframes flowSavingSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .flow-shell {
    --flow-page-gutter: 12px;
    --flow-backbar-h: 0px;
    --flow-topbar-top: var(--flow-page-gutter);
    --flow-topbar-h: 176px;
    --flow-content-gap: 14px;
    padding-top: calc(var(--flow-topbar-h) + var(--flow-page-gutter) + var(--flow-content-gap));
  }
  .flow-shell::before {
    display: block;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--flow-page-gutter) + var(--flow-topbar-h) + var(--flow-content-gap));
  }
  .flow-shell::after {
    display: none;
  }
  .flow-topbar {
    position: fixed;
    top: var(--flow-topbar-top);
    left: var(--flow-page-gutter);
    right: var(--flow-page-gutter);
    min-height: var(--flow-topbar-h);
    overflow: hidden;
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
  }
  .flow-topbar > div:first-child {
    min-width: 0;
    width: 100%;
  }
  .flow-title-row {
    justify-content: space-between;
    gap: 10px;
  }
  .flow-active-toggle-desktop {
    display: none !important;
  }
  .flow-active-toggle-mobile {
    display: inline-flex !important;
  }
  .flow-title-row .flow-active-toggle {
    flex: 0 0 auto;
  }
  .flow-title,
  .flow-meta {
    margin-left: 0;
  }
  .flow-backbar {
    top: var(--flow-page-gutter);
    left: var(--flow-page-gutter);
    right: var(--flow-page-gutter);
  }
  .flow-actions {
    width: 100%;
    justify-content: flex-start;
    align-items: stretch;
  }
  .flow-action-row {
    justify-content: flex-start;
  }
  .flow-workspace {
    display: block;
    margin-right: 0;
    padding-bottom: 0;
  }
  .flow-settings {
    position: fixed;
    inset: 0;
    z-index: 140;
    width: auto;
    max-height: none;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    transition: transform .22s ease;
    overflow-x: hidden;
  }
  .flow-settings.is-mobile-closed {
    transform: translateY(calc(100% + 28px));
    pointer-events: none;
  }
  .flow-settings.is-closed {
    transform: translateY(calc(100% + 28px));
  }
  .flow-settings-close {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink-3);
    box-shadow: 0 8px 22px rgba(15, 20, 25, .12);
    cursor: pointer;
  }
  .flow-settings-close:hover {
    color: var(--ink);
    background: var(--surface);
  }
  .flow-settings-close svg {
    width: 20px;
    height: 20px;
  }
  .flow-settings .flow-settings-head {
    padding-right: 52px;
  }
  .flow-settings #flowDeleteNode {
    margin-right: 52px;
  }
  .flow-settings-slider,
  .flow-settings-pane {
    height: 100%;
    max-height: inherit;
    overflow-x: hidden;
  }
  .flow-settings-pane {
    padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .flow-settings .form-group,
  .flow-settings .form-input,
  .flow-settings textarea,
  .flow-settings select,
  .flow-settings .flow-output-chip,
  .flow-settings .flow-output-destination {
    max-width: 100%;
    min-width: 0;
  }
  .flow-canvas-wrap {
    min-height: 520px;
  }
  .flow-outline-wrap {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .flow-topbar,
  .flow-route-panel,
  .flow-settings,
  .flow-canvas-wrap {
    border-radius: var(--radius-sm);
  }
  .flow-settings {
    border-radius: 0;
  }
  .flow-actions {
    gap: 8px;
  }
  .flow-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(64px, 18vw, 78px) clamp(64px, 18vw, 78px);
    flex-wrap: nowrap;
    gap: 8px;
  }
  .flow-action-row .btn {
    height: 36px;
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
    font-size: var(--text-sm);
  }
  .flow-view-toggle {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0;
    height: 36px;
    padding: 3px;
  }
  .flow-view-toggle button {
    height: 28px;
    font-size: var(--text-sm);
  }
  .flow-outline-head {
    display: none;
  }
  .flow-outline-row {
    padding-left: calc(var(--outline-depth) * 28px);
  }
  .flow-outline-row::before {
    left: calc((var(--outline-depth) * 28px) - 14px);
  }
  .flow-outline-lane {
    left: calc((var(--lane-depth) * 28px) - 14px);
  }
  .flow-outline-row::after {
    left: calc((var(--outline-depth) * 28px) - 14px);
    width: 14px;
  }
  .flow-outline-node {
    align-items: flex-start;
    min-height: 62px;
    padding-left: 32px;
  }
  .flow-outline-flags {
    width: 24px;
  }
  .flow-outline-branch {
    width: 24px;
    padding: 6px 0;
  }
  .flow-outline-warning {
    display: none;
  }
  .flow-option-row {
    grid-template-columns: 68px minmax(0, 1fr);
  }
  .flow-option-row.can-remove {
    grid-template-columns: 68px minmax(0, 1fr) 34px;
  }
  .flow-option-row select {
    grid-column: 1 / -1;
  }
  .flow-time-range-row {
    grid-template-columns: 1fr;
  }
  .flow-day-toggle-group {
    gap: 4px;
  }
  .flow-day-toggle {
    min-width: 0;
    padding: 0;
  }
  .flow-notify-context-grid {
    grid-template-columns: 1fr;
  }
  .flow-output-chip,
  .flow-output-destination {
    flex-wrap: wrap;
  }
  .flow-output-chip strong,
  .flow-output-destination strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media print {
  body.flow-builder-page .sidebar,
  body.flow-builder-page .topbar,
  .flow-topbar,
  .flow-settings,
  .flow-canvas {
    display: none !important;
  }
  body.flow-builder-page .page-content {
    margin: 0 !important;
    padding: 0 !important;
  }
  .flow-shell {
    padding: 0;
    min-height: 0;
  }
  .flow-shell::before,
  .flow-shell::after {
    display: none;
  }
  .flow-workspace {
    margin: 0;
    min-height: 0;
  }
  .flow-outline-wrap {
    display: block !important;
    min-height: 0;
    padding: 0;
  }
  .flow-outline-head .btn {
    display: none;
  }
}
.info-panel-overlay.open .info-panel {
  transform: translateX(0);
  opacity: 1;
}
.info-panel-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.info-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.info-avatar {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-bg);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
}
.info-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.2;
  color: var(--ink);
}
.info-subtitle {
  margin-top: 3px;
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.info-actions {
  display: flex;
  justify-content: flex-start;
  padding: 14px 0 0;
}
.info-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}
.info-stat-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.info-stat {
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.info-stat span {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-heavy);
  color: var(--ink);
}
.info-stat label {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.info-section {
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
.info-section-title {
  margin-bottom: 9px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.info-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  font-size: var(--text-base);
}
.info-row span { color: var(--ink-3); }
.info-row strong {
  color: var(--ink);
  font-weight: var(--weight-medium);
  text-align: right;
  overflow-wrap: anywhere;
}
.customer-detail-modal .customer-link-title {
  font-size: var(--text-base);
}
.customer-detail-modal .customer-link-meta {
  font-size: var(--text-sm);
}

@media (max-width: 768px) {
  .info-panel {
    width: 100vw;
    height: 100dvh;
    padding: 16px;
    transform: translateX(100%);
  }
  .info-panel-overlay.open .info-panel {
    transform: translateX(0);
  }
}
.name-link {
  display: inline;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: var(--weight-bold);
  text-align: left;
  cursor: pointer;
}
.name-link:hover { text-decoration: underline; }
.name-link.status-inactive { color: var(--ink-3); opacity: .3; }
.name-link.status-inactive:hover { opacity: .55; }
.customer-saved-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--alert-ok-bg);
  color: var(--alert-ok-fg);
  line-height: 1;
  vertical-align: middle;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1px);
}
.customer-saved-pill[hidden] {
  display: none;
}
.customer-saved-pill svg {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}
.customer-saved-pill.show {
  animation: customerSavedPill 2.6s ease forwards;
}
.customer-view-actions {
  margin-top: 16px;
}
@keyframes customerSavedPill {
  0% { opacity: 0; transform: translateY(2px); }
  12% { opacity: 1; transform: translateY(0); }
  82% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}