/* Foreable hub. The launch's language, turned down to the subconscious:
   charcoal, glass with fine rims, a faint warmth from below. Gold marks only what is active, live or confirmed. */

:root {
  --bg: #111316;
  --bg-raise: #15171b;
  --glass: rgba(255, 255, 255, 0.026);
  --glass-2: rgba(255, 255, 255, 0.045);
  --glass-3: rgba(255, 255, 255, 0.07);
  --rim: rgba(255, 255, 255, 0.07);
  --rim-2: rgba(255, 255, 255, 0.11);
  --text: #E8E6E1;
  --text-2: #A4A6AA;
  --text-3: #6F7277;
  --gold: #E2C27E;
  --gold-2: #C9A55A;
  --gold-wash: rgba(226, 194, 126, 0.10);
  --gold-rim: rgba(226, 194, 126, 0.32);
  --chart: #B48E3E;             /* validated against the dark surface */
  --danger: #E08B7B;
  --focus: rgba(226, 194, 126, 0.55);

  --top: 56px;
  --list: 312px;
  --subtabs: 44px;
  --assist: 312px;              /* the same width as the case list */
  --column: 700px;
  --radius: 12px;
  --radius-s: 8px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 160ms;
  --mid: 220ms;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Sora', 'Inter', -apple-system, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* a faint warmth from below: nobody should consciously notice it. No mist texture: at this faintness any texture
   breaks into visible islands on 8-bit screens. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(90% 55% at 50% 118%, rgba(214, 178, 100, 0.06) 0%, rgba(214, 178, 100, 0.0516) 12.4%, rgba(214, 178, 100, 0.036) 24.8%, rgba(214, 178, 100, 0.0192) 37.2%, rgba(214, 178, 100, 0.0066) 49.6%, rgba(214, 178, 100, 0.0) 62%),
    radial-gradient(60% 40% at 12% 110%, rgba(214, 178, 100, 0.035) 0%, rgba(214, 178, 100, 0.0301) 14.0%, rgba(214, 178, 100, 0.021) 28.0%, rgba(214, 178, 100, 0.0112) 42.0%, rgba(214, 178, 100, 0.0039) 56.0%, rgba(214, 178, 100, 0.0) 70%),
    radial-gradient(26% 58% at 0% 92%, rgba(214, 178, 100, 0.06) 0%, rgba(214, 178, 100, 0.0516) 15.0%, rgba(214, 178, 100, 0.036) 30.0%, rgba(214, 178, 100, 0.0192) 45.0%, rgba(214, 178, 100, 0.0066) 60.0%, rgba(214, 178, 100, 0.0) 75%),
    radial-gradient(18% 30% at 0% 62%, rgba(214, 178, 100, 0.02) 0%, rgba(214, 178, 100, 0.0172) 16.0%, rgba(214, 178, 100, 0.012) 32.0%, rgba(214, 178, 100, 0.0064) 48.0%, rgba(214, 178, 100, 0.0022) 64.0%, rgba(214, 178, 100, 0.0) 80%);
  /* the first layer is a fine grain that dithers the faint gradients, so they show no steps */
}

a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
/* fields whose container already shows focus */
.as-input textarea:focus-visible, .reply textarea:focus-visible, .search input:focus-visible { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -40px; z-index: 100; background: var(--bg-raise); padding: 8px 12px; border-radius: 8px; border: 1px solid var(--rim-2); }
.skip:focus { top: 12px; }

.i { display: inline-flex; width: 18px; height: 18px; flex: none; }
.i svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.mark {
  position: relative;
  z-index: 1;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.mark svg { width: 22px; height: 22px; fill: currentColor; }
.mark svg .stem { fill: var(--gold-2); opacity: 0.8; }
.mark:hover { background: var(--glass-2); color: var(--text); }

/* the mark: floats top right of the content, over the assistant's corner; it shows and hides the assistant, gold and misty while shown */
.assist-mark {
  position: fixed; top: calc(var(--top) + 10px); right: 12px; z-index: 46;
  border: 1px solid var(--rim); background: rgba(17, 19, 22, 0.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: color var(--mid) var(--ease), border-color var(--mid) var(--ease), background var(--mid) var(--ease), box-shadow 600ms var(--ease);
}
.assist-mark::before {   /* the fog the mark breathes into */
  content: ""; position: absolute; inset: -18px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(226, 194, 126, 0.28), rgba(226, 194, 126, 0.08) 55%, transparent);
  filter: blur(6px); opacity: 0; transform: scale(0.6);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.assist-mark svg .stem { fill: var(--gold); opacity: 1; }
.assist-mark[aria-pressed="true"] { color: var(--gold); border-color: var(--gold-rim); background: rgba(226, 194, 126, 0.12); box-shadow: 0 0 18px rgba(226, 194, 126, 0.3), inset 0 0 10px rgba(226, 194, 126, 0.12); }
.assist-mark[aria-pressed="true"]::before { opacity: 1; transform: scale(1); }
.assist-mark[aria-pressed="true"]:hover { color: var(--gold); background: rgba(226, 194, 126, 0.18); }
.assist-mark.pulse::before { animation: mark-pulse 900ms var(--ease); }
@keyframes mark-pulse { 0% { opacity: 1; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.7); } 100% { transform: scale(1); } }

/* ───────── Top bar ───────── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--top);
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 16px;
  background: transparent;
  transition: background 240ms var(--ease);
}
/* the top bar is the page itself until something scrolls under it; only then does it take a tint */
body.scrolled .topbar, body.scrolled .subtabs { background: rgba(17, 19, 22, 0.86); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); }
/* no line under the top bar: its tint simply thins out into the page, so it all reads as one surface */
.topbar::after, .subtabs::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none;
  background: linear-gradient(180deg, rgba(17, 19, 22, 0.86), rgba(17, 19, 22, 0));
  opacity: 0; transition: opacity 240ms var(--ease);
}
body.scrolled .topbar::after, body.scrolled .subtabs::after { opacity: 1; }
body.has-subtabs .topbar::after { display: none; }   /* with sub-tabs, the fade comes after them instead */
.sections { grid-column: 2; display: flex; gap: 10px; }
.sections a {
  position: relative;
  width: 46px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  color: var(--text-3);
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.sections a .i { width: 22px; height: 22px; }
.sections a:hover { color: var(--text-2); background: var(--glass); }
.sections a[aria-current="page"] { color: var(--gold); }
.sections a[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: -9px; left: 12px; right: 12px;
  height: 2px; border-radius: 2px;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(226, 194, 126, 0.55);
}
.main:focus, .main:focus-visible { outline: none; }
.topbar-end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }

.tenant { position: relative; }
.tenant-btn {
  display: flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 6px 0 12px;
  border: 1px solid var(--rim); border-radius: 10px;
  background: var(--glass);
  color: var(--text-2);
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.tenant-btn:hover { color: var(--text); border-color: var(--rim-2); }
.avatar {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  flex: none;
}
.menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 260px;
  padding: 6px;
  border: 1px solid var(--rim-2); border-radius: var(--radius);
  background: rgba(24, 26, 30, 0.92);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  animation: pop var(--fast) var(--ease);
}
.menu-label { padding: 8px 10px 4px; color: var(--text-3); font-size: 12px; }
.menu button {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left;
}
.menu button:hover, .menu button:focus-visible { background: var(--glass-2); }
.menu .sub { color: var(--text-3); font-size: 12px; }
.menu .check { margin-left: auto; color: var(--gold); }

/* ───────── Case list: always a column on desktop; at tablet width and below, the main screen ───────── */
.caselist {
  position: fixed;
  top: var(--top); bottom: 0; left: 0;
  width: var(--list);
  z-index: 12;
  display: flex; flex-direction: column;
}
/* the list's tint, with no edge at all: it thins out over the last 120 px along an eased curve (the text is not faded) */
.caselist::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(17, 19, 22, 0.32);
  -webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0.02) 12px, rgba(0,0,0,0.09) 26px, rgba(0,0,0,0.22) 42px, rgba(0,0,0,0.5) 60px, rgba(0,0,0,0.78) 78px, rgba(0,0,0,0.91) 94px, rgba(0,0,0,0.98) 108px, rgba(0,0,0,1) 120px);
  mask-image: linear-gradient(270deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0.02) 12px, rgba(0,0,0,0.09) 26px, rgba(0,0,0,0.22) 42px, rgba(0,0,0,0.5) 60px, rgba(0,0,0,0.78) 78px, rgba(0,0,0,0.91) 94px, rgba(0,0,0,0.98) 108px, rgba(0,0,0,1) 120px);
}
.list-head { position: relative; padding: 14px 12px 6px; }
.list-body { position: relative; flex: 1; overflow-y: auto; padding: 2px 8px 16px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; }
.scrim { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.35); }

.search {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 10px;
  border: 1px solid var(--rim); border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-3);
}
.search:focus-within { border-color: var(--gold-rim); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); }
.search input::placeholder { color: var(--text-3); }
.search kbd { font: 11px var(--sans); color: var(--text-3); border: 1px solid var(--rim); border-radius: 5px; padding: 1px 5px; }

.filters { display: flex; gap: 4px; margin-top: 10px; }
.filters button {
  flex: 1;
  height: 30px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--text-3); font-size: 13px;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.filters button:hover { color: var(--text-2); }
.filters button[aria-pressed="true"] { color: var(--text); background: var(--glass-2); border-color: var(--rim); }
.filters .n { color: var(--text-3); margin-left: 4px; font-size: 12px; }

.case-list { list-style: none; margin: 0; padding: 0; }
.case-item {
  display: block; width: 100%;
  padding: 10px 10px 11px; margin: 1px 0;
  border: 1px solid transparent; border-radius: 10px;
  background: transparent; text-align: left; text-decoration: none;
  transition: background var(--fast) var(--ease);
}
.case-item:hover { background: var(--glass-2); }
.case-item[aria-current="true"] { background: var(--glass-3); border-color: var(--rim); }
.case-item .row { display: flex; align-items: baseline; gap: 8px; }
.case-item .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 13.5px; }
.case-item .when { color: var(--text-3); font-size: 11.5px; flex: none; }
.case-item .subj { color: var(--text-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.case-item .snip { color: var(--text-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; align-self: center; background: transparent; }
.dot.live { background: var(--gold); box-shadow: 0 0 8px rgba(226, 194, 126, 0.7); }
.dot.answered { background: var(--text-3); }
.lang { font-size: 10px; letter-spacing: 0.06em; color: var(--text-3); border: 1px solid var(--rim); border-radius: 4px; padding: 0 4px; line-height: 15px; }
.more { width: 100%; margin-top: 6px; height: 34px; border: 1px dashed var(--rim); border-radius: 10px; background: transparent; color: var(--text-3); }
.more:hover { color: var(--text-2); border-color: var(--rim-2); }
.empty { padding: 24px 12px; color: var(--text-3); text-align: center; }

/* ───────── Main column ───────── */
.main {
  position: relative; z-index: 1;
  min-height: 100vh;
  padding: calc(var(--top) + 36px) 32px 64px;
}
body.has-subtabs .main { padding-top: calc(var(--top) + var(--subtabs) + 32px); }
@media (min-width: 1281px) {
  body.assistant-off .assistant { transform: translateX(100%); opacity: 0; visibility: hidden; transition: transform 420ms var(--ease), opacity 420ms var(--ease), visibility 0s linear 420ms; }
}
.column { max-width: var(--column); margin: 0 auto; }
.column.wide { max-width: 760px; }
.eyebrow { color: var(--text-3); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 8px; }
h1.title { margin: 0; font: 500 22px/1.3 var(--display); letter-spacing: -0.01em; }
h2.h2 { margin: 40px 0 14px; font: 500 15px/1.3 var(--sans); color: var(--text); }
.lede { color: var(--text-2); margin: 8px 0 0; }
.muted { color: var(--text-3); }
.gold { color: var(--gold); }

/* ── Case thread ── */
.case-head { padding-bottom: 22px; border-bottom: 1px solid var(--rim); }
.case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; color: var(--text-2); }
.ext { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; border-bottom: 1px solid var(--rim-2); }
.ext:hover { color: var(--text); border-color: var(--text-3); }
.ext .i { width: 12px; height: 12px; color: var(--text-3); }
.status { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.thread { list-style: none; margin: 0; padding: 8px 0 0; }
.msg { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 18px 0 4px; }
.msg .who { display: flex; align-items: baseline; gap: 8px; }
.msg .name { font-weight: 500; }
.msg .role { color: var(--text-3); font-size: 12px; }
.msg .time { color: var(--text-3); font-size: 12px; margin-left: auto; }
.msg .body { color: var(--text); white-space: pre-wrap; margin-top: 3px; }
.msg.bot .body { color: var(--text-2); }
.msg.seller .bubble { margin-top: 6px; padding: 12px 14px; border: 1px solid var(--rim); border-radius: var(--radius); background: var(--glass); }
.msg.seller .bubble .body { margin: 0; }
.msg .avatar.bot { background: transparent; border: 1px solid var(--rim-2); }
.msg .avatar.bot svg { width: 14px; height: 14px; fill: var(--text-2); }
.msg .avatar.bot svg .stem { fill: var(--gold-2); }
.msg .avatar.me { background: var(--gold-wash); color: var(--gold); }
.msg.fresh { animation: rise var(--mid) var(--ease); }
.event { display: flex; align-items: center; gap: 10px; padding: 16px 0 2px 42px; color: var(--text-3); font-size: 13px; }
.event .i { width: 15px; height: 15px; }
.event.confirmed { color: var(--text-2); }
.event.confirmed .i { color: var(--gold); }
.event .line { flex: 1; height: 1px; background: var(--rim); }

.reply {
  margin-top: 30px;
  border: 1px solid var(--rim); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.022);
  transition: border-color var(--fast) var(--ease);
}
.reply:focus-within { border-color: var(--rim-2); }
.reply-from { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 14px; border-bottom: 1px solid var(--rim); color: var(--text-3); font-size: 13px; }
.reply-from b { color: var(--text-2); font-weight: 500; }
.reply textarea { display: block; width: 100%; min-height: 110px; resize: vertical; padding: 14px; border: 0; background: transparent; color: var(--text); line-height: 1.6; }
.reply textarea::placeholder { color: var(--text-3); }
.signature { padding: 0 14px 12px; color: var(--text-3); white-space: pre-wrap; font-size: 13px; }
.reply-foot { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-top: 1px solid var(--rim); color: var(--text-3); font-size: 12px; }
.reply-foot .spacer { flex: 1; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  height: 34px; padding: 0 14px;
  border: 1px solid var(--rim-2); border-radius: 9px;
  background: var(--glass-2); color: var(--text);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn:hover { border-color: rgba(255, 255, 255, 0.2); background: var(--glass-3); }
.btn.primary { border-color: var(--gold-rim); color: var(--gold); background: var(--gold-wash); }
.btn.primary:hover { border-color: rgba(226, 194, 126, 0.55); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.quiet:hover { color: var(--text); background: var(--glass-2); }
.btn.danger { color: var(--danger); border-color: rgba(224, 139, 123, 0.3); background: transparent; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn .i { width: 16px; height: 16px; }

/* ── Analytics ── */
.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 28px; border: 1px solid var(--rim); border-radius: var(--radius); overflow: hidden; background: var(--rim); }
.figure { padding: 18px 18px 16px; background: rgba(19, 21, 25, 0.92); }
.figure .label { color: var(--text-3); font-size: 12.5px; }
.figure .value { margin-top: 6px; font: 500 26px/1.1 var(--display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.figure .delta { margin-top: 6px; color: var(--text-3); font-size: 12.5px; }
.chart-wrap { margin-top: 26px; }
.chart-title { display: flex; justify-content: space-between; color: var(--text-3); font-size: 12.5px; margin-bottom: 8px; }
.chart { position: relative; height: 120px; }
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart .grid { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.chart .bar { fill: rgba(255, 255, 255, 0.16); }
.chart .bar.hover { fill: var(--chart); }   /* gold only marks what you point at */
.chart .axis { fill: var(--text-3); font: 11px var(--sans); }
.tip { position: absolute; pointer-events: none; padding: 6px 9px; border: 1px solid var(--rim-2); border-radius: 8px; background: rgba(24, 26, 30, 0.95); font-size: 12px; white-space: nowrap; transform: translate(-50%, -100%); margin-top: -8px; }
.observations { list-style: none; margin: 0; padding: 0; }
.observations li { padding: 16px 0; border-top: 1px solid var(--rim); color: var(--text); line-height: 1.65; }
.observations li:first-child { border-top: 0; }
.observations .src { display: block; margin-top: 6px; color: var(--text-3); font-size: 12.5px; }
.observations .src a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--rim-2); }
.observations .src a:hover { color: var(--text); }

.bill-total { display: flex; align-items: baseline; gap: 14px; margin-top: 20px; }
.bill-total .value { font: 500 40px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.split { display: flex; gap: 24px; margin-top: 10px; color: var(--text-2); }
.split b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.lines { border: 1px solid var(--rim); border-radius: var(--radius); overflow: hidden; }
.line-item { border-top: 1px solid var(--rim); }
.line-item:first-child { border-top: 0; }
.line-head {
  width: 100%; display: grid; grid-template-columns: 1fr auto auto 18px; align-items: center; gap: 16px;
  padding: 14px 16px; border: 0; background: transparent; text-align: left;
  transition: background var(--fast) var(--ease);
}
.line-head:hover { background: var(--glass); }
.line-head .what { font-weight: 500; }
.line-head .what small { display: block; color: var(--text-3); font-weight: 400; font-size: 12.5px; margin-top: 2px; }
.line-head .qty { color: var(--text-2); font-variant-numeric: tabular-nums; }
.line-head .amt { font-variant-numeric: tabular-nums; min-width: 80px; text-align: right; }
.line-head .chev { color: var(--text-3); transition: transform var(--fast) var(--ease); }
.line-head[aria-expanded="true"] .chev { transform: rotate(90deg); }
.line-detail { padding: 0 16px 14px; }
.trace { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rim-2); }
.trace li { display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; padding: 6px 0 6px 14px; color: var(--text-2); font-size: 13px; }
.trace a { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trace a:hover { text-decoration: underline; text-decoration-color: var(--text-3); }
.trace .amt { font-variant-numeric: tabular-nums; color: var(--text-3); }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-weight: 400; color: var(--text-3); font-size: 12.5px; padding: 0 0 8px; }
.table td { padding: 12px 0; border-top: 1px solid var(--rim); font-variant-numeric: tabular-nums; }
.table td.r, .table th.r { text-align: right; }
.paid { color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.paid .i { width: 14px; height: 14px; color: var(--gold); }

/* ── Settings ── */
.panel { margin-top: 24px; border: 1px solid var(--rim); border-radius: var(--radius); background: rgba(255, 255, 255, 0.018); }
.panel + .panel { margin-top: 14px; }
.panel-row { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-top: 1px solid var(--rim); }
.panel-row:first-child { border-top: 0; }
.panel-row .grow { flex: 1; min-width: 0; }
.panel-row .t { font-weight: 500; }
.panel-row .d { color: var(--text-3); font-size: 13px; margin-top: 2px; }
.limit { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--text-2); font-size: 13px; }
.limit input, .field input, .field textarea, .field select {
  height: 34px; padding: 0 10px; border: 1px solid var(--rim); border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: var(--text);
}
.limit input { width: 76px; text-align: right; font-variant-numeric: tabular-nums; }
.limit input:focus, .field input:focus, .field textarea:focus { border-color: var(--gold-rim); }
.switch { position: relative; width: 40px; height: 22px; flex: none; border: 0; border-radius: 11px; background: rgba(255, 255, 255, 0.1); transition: background var(--fast) var(--ease); }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #C9CACD; transition: transform var(--fast) var(--ease), background var(--fast) var(--ease); }
.switch[aria-checked="true"] { background: rgba(226, 194, 126, 0.35); }
.switch[aria-checked="true"]::after { transform: translateX(18px); background: var(--gold); }
.field { display: grid; gap: 6px; padding: 16px 18px; border-top: 1px solid var(--rim); }
.field:first-child { border-top: 0; }
.field label { color: var(--text-2); font-size: 13px; }
.field textarea { height: auto; min-height: 120px; padding: 10px; line-height: 1.6; resize: vertical; }
.verified { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; }
.verified .i { width: 14px; height: 14px; color: var(--gold); }
.badge { font-size: 11px; color: var(--text-3); border: 1px solid var(--rim); border-radius: 5px; padding: 1px 6px; }
.badge.gold { color: var(--gold); border-color: var(--gold-rim); }
.snippet { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 6px 6px 6px 14px; border: 1px solid var(--rim); border-radius: 10px; background: rgba(0, 0, 0, 0.25); }
.snippet code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-2); scrollbar-width: none; }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 12px 20px; padding: 18px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; }
.kbd-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; padding: 18px; color: var(--text-2); }
kbd.k { font: 11.5px var(--sans); color: var(--text-2); border: 1px solid var(--rim-2); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; }

/* widget preview: a mock website with the chat widget on it */
.site { position: relative; margin-top: 22px; height: 470px; border: 1px solid var(--rim); border-radius: var(--radius); overflow: hidden; background: #f4f2ee; color: #2a2c30; }
.site-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #e6e3de; }
.site-bar i { width: 9px; height: 9px; border-radius: 50%; background: #cfcac2; }
.site-bar span { margin-left: 12px; font-size: 11.5px; color: #8b867e; }
.site-page { padding: 26px 30px; }
.site-page .logo { font: 600 15px var(--display); color: #2a2c30; }
.site-page h3 { margin: 26px 0 8px; font: 600 24px/1.2 var(--display); max-width: 360px; }
.site-page p { margin: 0; color: #6b665f; max-width: 360px; font-size: 13px; }
.site-page .ph { height: 9px; border-radius: 5px; background: #e2ded7; margin-top: 10px; }
.w { position: absolute; bottom: 16px; width: 270px; font-size: 12.5px; transition: all var(--mid) var(--ease); }
.w.right { right: 16px; }
.w.left { left: 16px; }
.w-panel { overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18); }
.w-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 600; }
.w-body { padding: 12px 12px 6px; display: grid; gap: 8px; }
.w-msg { padding: 8px 10px; max-width: 85%; line-height: 1.45; }
.w-msg.me { justify-self: end; }
.w-input { margin: 6px 12px 12px; padding: 8px 10px; opacity: 0.7; }
.w-launch { margin-top: 10px; display: flex; justify-content: flex-end; }
.w.left .w-launch { justify-content: flex-start; }
.w-launch span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); }

/* ───────── Assistant: translucent glass with a golden fog, sliding in and out (one component everywhere) ───────── */
.assistant {
  position: fixed;
  top: var(--top); right: 0; bottom: 0;
  width: var(--assist);
  z-index: 19;
  display: flex; flex-direction: column;
  transition: transform 420ms var(--ease), opacity 420ms var(--ease), visibility 0s;
  /* glass and fog share one mask: S-curve fades (flat at both ends, so no edge shows), 200 px in from the left, 110 px from the top;
     they top out at 99.5%, because where a mask is fully opaque Chrome draws through another path, a step of one level */
  --as-mask-x: linear-gradient(90deg, rgba(0,0,0,0.0) 0px, rgba(0,0,0,0.0032) 14px, rgba(0,0,0,0.0231) 29px, rgba(0,0,0,0.0691) 43px, rgba(0,0,0,0.144) 57px, rgba(0,0,0,0.2451) 71px, rgba(0,0,0,0.366) 86px, rgba(0,0,0,0.4975) 100px, rgba(0,0,0,0.629) 114px, rgba(0,0,0,0.7499) 129px, rgba(0,0,0,0.851) 143px, rgba(0,0,0,0.9259) 157px, rgba(0,0,0,0.9719) 171px, rgba(0,0,0,0.9918) 186px, rgba(0,0,0,0.995) 200px);
  --as-mask-y: linear-gradient(180deg, rgba(0,0,0,0.0) 0px, rgba(0,0,0,0.0032) 8px, rgba(0,0,0,0.0231) 16px, rgba(0,0,0,0.0691) 24px, rgba(0,0,0,0.144) 31px, rgba(0,0,0,0.2451) 39px, rgba(0,0,0,0.366) 47px, rgba(0,0,0,0.4975) 55px, rgba(0,0,0,0.629) 63px, rgba(0,0,0,0.7499) 71px, rgba(0,0,0,0.851) 79px, rgba(0,0,0,0.9259) 86px, rgba(0,0,0,0.9719) 94px, rgba(0,0,0,0.9918) 102px, rgba(0,0,0,0.995) 110px);
}
/* the glass itself: it starts well before the column, 150 px out, and fades in along an S-curve, so there is no edge to see;
   a fine grain on top dithers its faint gradients */
.assistant::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: -150px; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(120% 40% at 70% 104%, rgba(214, 178, 100, 0.22) 0.0%, rgba(214, 178, 100, 0.2181) 7.2%, rgba(214, 178, 100, 0.2073) 14.4%, rgba(214, 178, 100, 0.1841) 21.6%, rgba(214, 178, 100, 0.1502) 28.8%, rgba(214, 178, 100, 0.11) 36.0%, rgba(214, 178, 100, 0.0698) 43.2%, rgba(214, 178, 100, 0.0359) 50.4%, rgba(214, 178, 100, 0.0127) 57.6%, rgba(214, 178, 100, 0.0019) 64.8%, rgba(214, 178, 100, 0.0) 72.0%),
    radial-gradient(60% 20% at 96% 0%, rgba(214, 178, 100, 0.13) 0.0%, rgba(214, 178, 100, 0.1289) 7.5%, rgba(214, 178, 100, 0.1225) 15.0%, rgba(214, 178, 100, 0.1088) 22.5%, rgba(214, 178, 100, 0.0887) 30.0%, rgba(214, 178, 100, 0.065) 37.5%, rgba(214, 178, 100, 0.0413) 45.0%, rgba(214, 178, 100, 0.0212) 52.5%, rgba(214, 178, 100, 0.0075) 60.0%, rgba(214, 178, 100, 0.0011) 67.5%, rgba(214, 178, 100, 0.0) 75.0%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 30%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0.04));
  backdrop-filter: blur(10px) saturate(170%) brightness(1.08); -webkit-backdrop-filter: blur(10px) saturate(170%) brightness(1.08);
  -webkit-mask-image: var(--as-mask-x), var(--as-mask-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--as-mask-x), var(--as-mask-y);
  mask-composite: intersect;
}
.assistant::after {    /* a slow drift of fog inside the glass, and a bloom each time it opens */
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: -150px; pointer-events: none; opacity: 0.7;
  -webkit-mask-image: var(--as-mask-x), var(--as-mask-y); -webkit-mask-composite: source-in;
  mask-image: var(--as-mask-x), var(--as-mask-y); mask-composite: intersect;
  background: radial-gradient(40% 30% at 30% 80%, rgba(226, 194, 126, 0.13) 0.0%, rgba(226, 194, 126, 0.1289) 7.0%, rgba(226, 194, 126, 0.1225) 14.0%, rgba(226, 194, 126, 0.1088) 21.0%, rgba(226, 194, 126, 0.0887) 28.0%, rgba(226, 194, 126, 0.065) 35.0%, rgba(226, 194, 126, 0.0413) 42.0%, rgba(226, 194, 126, 0.0212) 49.0%, rgba(226, 194, 126, 0.0075) 56.0%, rgba(226, 194, 126, 0.0011) 63.0%, rgba(226, 194, 126, 0.0) 70.0%), radial-gradient(35% 25% at 75% 40%, rgba(226, 194, 126, 0.06) 0.0%, rgba(226, 194, 126, 0.0595) 7.0%, rgba(226, 194, 126, 0.0565) 14.0%, rgba(226, 194, 126, 0.0502) 21.0%, rgba(226, 194, 126, 0.041) 28.0%, rgba(226, 194, 126, 0.03) 35.0%, rgba(226, 194, 126, 0.019) 42.0%, rgba(226, 194, 126, 0.0098) 49.0%, rgba(226, 194, 126, 0.0035) 56.0%, rgba(226, 194, 126, 0.0005) 63.0%, rgba(226, 194, 126, 0.0) 70.0%);
  background-size: 140% 130%;
  animation: mist 18s ease-in-out infinite alternate;
}
.assistant.bloom::after { animation: bloom 1100ms var(--ease), mist 18s ease-in-out 1100ms infinite alternate; }
@keyframes mist { from { background-position: 0% 60%; } to { background-position: 100% 30%; } }
@keyframes bloom { 0% { opacity: 1; filter: brightness(2.2); } 100% { opacity: 0.7; filter: none; } }
.as-head { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 22px 64px 12px 30px; }
.as-head h2 { margin: 0; font: 500 14px/1.2 var(--sans); }
.as-close { display: none; }
.as-log { position: relative; flex: 1; overflow-y: auto; padding: 4px 18px 12px 30px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; }
.as-intro { color: var(--text-3); font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 30px; padding: 5px 11px; line-height: 1.35; text-align: left; border: 1px solid var(--rim); border-radius: 15px; background: transparent; color: var(--text-2); font-size: 12.5px; transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.chip:hover { color: var(--text); border-color: var(--rim-2); }
.as-msg { line-height: 1.6; animation: rise var(--fast) var(--ease); }
.as-msg.user { align-self: flex-end; max-width: 88%; padding: 8px 12px; border: 1px solid var(--rim); border-radius: 12px 12px 4px 12px; background: var(--glass-2); }
.as-msg.bot { color: var(--text-2); white-space: pre-wrap; }
.as-msg.bot b { color: var(--text); font-weight: 500; }
.as-msg.thinking { color: var(--text-3); }
.as-msg.thinking span { display: inline-block; width: 4px; height: 4px; margin-right: 3px; border-radius: 50%; background: currentColor; animation: blink 1s infinite; }
.as-msg.thinking span:nth-child(2) { animation-delay: 0.15s; }
.as-msg.thinking span:nth-child(3) { animation-delay: 0.3s; }
.as-form { position: relative; padding: 12px 14px 14px 26px; border-top: 1px solid transparent; }
.as-input { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--rim); border-radius: 12px; background: rgba(255, 255, 255, 0.035); }
.as-form::before { content: ""; position: absolute; top: 0; left: 30px; right: 14px; height: 1px; background: linear-gradient(90deg, transparent, rgba(226, 194, 126, 0.1), transparent); }
.as-input:focus-within { border-color: var(--gold-rim); }
.as-input textarea { flex: 1; min-height: 22px; max-height: 120px; padding: 6px 0; border: 0; background: transparent; color: var(--text); resize: none; line-height: 1.5; }
.as-input textarea::placeholder { color: var(--text-3); }
.as-send { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--glass-2); color: var(--text-2); }
.as-send:hover { color: var(--gold); }

/* ───────── Toast & dialog ───────── */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 60;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border: 1px solid var(--rim-2); border-radius: 10px;
  background: rgba(24, 26, 30, 0.95); color: var(--text);
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast .i { width: 16px; height: 16px; color: var(--gold); }
.dialog-back { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, 0.5); animation: fade var(--fast) var(--ease); }
.dialog { width: min(420px, 100%); padding: 22px; border: 1px solid var(--rim-2); border-radius: 14px; background: rgba(24, 26, 30, 0.98); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); animation: pop var(--fast) var(--ease); }
.dialog h2 { margin: 0 0 8px; font: 500 16px var(--sans); }
.dialog p { margin: 0; color: var(--text-2); }
.dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* ───────── Narrower: the assistant becomes a sheet, then the case list a toggle ───────── */
@media (max-width: 1280px) {
  .main { padding-right: 72px; }
  .assistant {
    width: min(var(--assist), 92vw);
    z-index: 45;
    background: linear-gradient(160deg, rgba(40, 42, 47, 0.38), rgba(24, 26, 30, 0.3));
    transform: translateX(100%); opacity: 0; visibility: hidden;
    transition: transform 420ms var(--ease), opacity 420ms var(--ease), visibility 0s linear 420ms;
  }
  .assistant.open { transform: none; opacity: 1; visibility: visible; transition: transform 420ms var(--ease), opacity 420ms var(--ease), visibility 0s; }
}
@media (max-width: 1000px) {
  /* the case list is the main screen; a case opens on top of it */
  body.has-list .caselist { left: 0; right: 0; width: auto; border-right: 0; background: transparent; }
  .list-head { padding-right: 62px; }
  .main :is(.eyebrow, h1.title) { padding-right: 46px; }
  body.has-list:not(.case-open) .main { display: none; }
  body.case-open .caselist { display: none !important; }
  .back { display: inline-grid !important; }
  .subtabs-in { padding-right: 60px; }
}

/* ───────── Phone: the same product, folded ───────── */
@media (max-width: 720px) {
  :root { --top: 52px; }
  .topbar { padding: 0 8px; grid-template-columns: auto 1fr auto; }

  .sections { justify-self: center; }
  .sections a { width: 40px !important; }
  .topbar-end { gap: 6px; }
  .sections { gap: 4px; }
  .sections a { width: 44px; }
  .tenant-btn .tenant-name { display: none; }
  .tenant-btn { padding: 0 4px; }
  .main { padding: calc(var(--top) + 18px) 18px 48px; }
  body.has-subtabs .main { padding-top: calc(var(--top) + var(--subtabs) + 22px); }
  body.has-assistant .main { padding-right: 18px; }
  h1.title { font-size: 19px; }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .figure .value { font-size: 22px; }
  .bill-total .value { font-size: 32px; }
  .assistant {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; height: 78vh;
    border-left: 0; border-top: 1px solid var(--rim-2);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
  .assistant.open { transform: none; }
  .as-head { padding-right: 18px; }
  /* on a phone the assistant is a sheet from below with its own rounded edge, not a fading column */
  .assistant::before, .assistant::after { left: 0; border-radius: inherit; -webkit-mask-image: none; mask-image: none; }
  .assistant { overflow: hidden; }
  .as-head, .as-log { padding-left: 18px; }
  .as-form { padding-left: 14px; }
  .as-form::before { left: 14px; }
  .as-close { display: inline-flex; margin-left: auto; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 10px; }
  .line-head { grid-template-columns: 1fr auto 18px; }
  .line-head .qty { display: none; }
  .trace li { grid-template-columns: 56px 1fr auto; }
  .site { height: 430px; }
  .site-page h3 { font-size: 19px; }
  .w { width: 240px; }
  .msg { grid-template-columns: 26px 1fr; gap: 10px; }
  .event { padding-left: 36px; }
}

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

/* ───────── Arrival from the launch: the launch's final gold, fading off the hub ───────── */
.arrival { display: none; }
html.arriving .arrival {
  display: block;
  position: fixed; inset: 0; z-index: 200;
  pointer-events: none;
  background: #E6C47A;            /* the launch's full-screen gold */
  animation: arrive 800ms cubic-bezier(0.4, 0, 0.6, 1) 100ms forwards;
}
html.arriving .main { animation: settle 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 180ms both; }
@keyframes arrive { to { opacity: 0; visibility: hidden; } }
@keyframes settle { from { opacity: 0.6; } to { opacity: 1; } }

@media (max-width: 720px) { .hide-s { display: none; } }


/* the Foreable mark in the widget preview */
.w-mark { display: inline-flex; width: 16px; height: 16px; }
.w-mark svg { width: 100%; height: 100%; fill: currentColor; }
.w-mark svg .stem { fill: currentColor; opacity: 0.7; }
.w-mark.big { width: 22px; height: 22px; }

/* ───────── Settings › Knowledge ───────── */
.kk { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--text-3); font-size: 12.5px; }
.kk .i { width: 15px; height: 15px; }
.kbranches { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.kbranch { padding: 16px 18px; border: 1px solid var(--rim); border-radius: var(--radius); background: rgba(255, 255, 255, 0.018); }
.kbranch p { margin: 0; }
.kbranch .muted { font-size: 12.5px; line-height: 1.55; margin-top: 6px; }
.kbranch.mine { border-color: var(--rim-2); background: var(--glass-2); }
.kbig { font: 500 18px/1.3 var(--display); color: var(--text); }
.dropzone { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 26px 20px; border: 1px dashed var(--rim-2); border-radius: var(--radius); background: rgba(255, 255, 255, 0.015); cursor: pointer; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.dropzone:hover, .dropzone.over { border-color: var(--gold-rim); background: var(--gold-wash); }
.dropzone .muted { font-size: 12.5px; max-width: 520px; }
.dz-t { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; }
.kurl { display: flex; gap: 8px; margin-top: 10px; }
.kurl input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--rim); border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: var(--text); }
.kurl input:focus { border-color: var(--gold-rim); }
.kdocs { border: 1px solid var(--rim); border-radius: var(--radius); overflow: hidden; }
.kdoc { border-top: 1px solid var(--rim); }
.kdoc:first-child { border-top: 0; }
.kdoc summary { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 13px 16px; cursor: pointer; list-style: none; transition: background var(--fast) var(--ease); }
.kdoc summary::-webkit-details-marker { display: none; }
.kdoc summary:hover { background: var(--glass); }
.kname { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ktype { flex: none; font-size: 10.5px; font-weight: 400; color: var(--text-3); border: 1px solid var(--rim); border-radius: 4px; padding: 0 5px; line-height: 16px; }
.kmeta { color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ready { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-size: 12.5px; }
.ready .i { width: 14px; height: 14px; color: var(--gold); }
.badge.warn { color: #E7C9A0; border-color: rgba(231, 201, 160, 0.35); }
.kbody { padding: 2px 16px 14px; color: var(--text-2); }
.kbody p { margin: 0 0 10px; line-height: 1.6; }
.kbody .kk { margin-top: 12px; }
.chip.static { display: inline-flex; align-items: center; height: 24px; min-height: 24px; padding-top: 0; padding-bottom: 0; cursor: default; font-size: 12px; }
.ksamples { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 1px solid var(--rim-2); display: grid; gap: 6px; font-size: 13px; }
.kwarn { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.kwarn li { display: flex; gap: 8px; color: #E7D6BC; font-size: 13px; }
.kwarn .i { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.kactions { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; }
.kactions .spacer { flex: 1; }
.kprogress { height: 2px; margin: 0 16px; background: var(--rim); border-radius: 1px; overflow: hidden; }
.kprogress span { display: block; height: 100%; background: var(--gold); transition: width 0.5s var(--ease); }
.kstages { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0; padding: 10px 16px 14px; color: var(--text-3); font-size: 12.5px; }
.kstages li.done { color: var(--text-2); }
.kstages li.now { color: var(--text); }
.checks { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rim); border-radius: var(--radius); }
.checks li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 16px; border-top: 1px solid var(--rim); }
.checks li:first-child { border-top: 0; }
.checks p { margin: 0; grid-column: 1; }
.cq { color: var(--text); font-weight: 500; }
.ca { color: var(--text-2); }
.cs { color: var(--text-3); font-size: 12.5px; }
.cv { grid-column: 2; grid-row: 1 / span 3; align-self: center; display: flex; gap: 4px; }
.cv .btn { height: 30px; padding: 0 10px; font-size: 12.5px; }
.cv .btn .i { width: 14px; height: 14px; }
.cv .btn.on[data-v="right"] { color: var(--gold); background: var(--gold-wash); }
.cv .btn.on[data-v="wrong"] { color: #E7C9A0; background: rgba(231, 201, 160, 0.08); }
.checks li.wrong .ca { text-decoration: line-through; text-decoration-color: var(--text-3); }
@media (max-width: 720px) {
  .kbranches { grid-template-columns: 1fr; }
  .kdoc summary { grid-template-columns: 1fr auto; }
  .kmeta { display: none; }
  .checks li { grid-template-columns: 1fr; }
  .cv { grid-column: 1; grid-row: auto; margin-top: 8px; }
}

/* ───────── Seller menu and personal menu ───────── */
.tenant { display: flex; gap: 8px; }
.tenant-btn { padding: 0 8px 0 12px; gap: 6px; }
.tenant-btn[aria-current="page"] { color: var(--text); border-color: var(--rim-2); background: var(--glass-2); }
.tenant-btn .chev-s { width: 14px; height: 14px; color: var(--text-3); }
.tenant-ini { display: none; font-size: 11px; font-weight: 600; }
.me-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--rim); border-radius: 50%; background: var(--glass); }
.me-btn:hover, .me-btn[aria-expanded="true"] { border-color: var(--rim-2); }
.me-btn .avatar { width: 28px; height: 28px; }
.menu-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--rim); }
.menu-head b { font-weight: 500; }
.menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.menu a:hover, .menu a:focus-visible { background: var(--glass-2); }
.menu a .i, .menu button > .i { width: 16px; height: 16px; color: var(--text-3); }
.menu-sep { height: 1px; margin: 6px 0; background: var(--rim); }
.dialog-body .field { padding: 10px 0 0; border: 0; }
.dialog-body .field input { height: 34px; padding: 0 10px; border: 1px solid var(--rim); border-radius: 8px; background: rgba(255,255,255,0.03); color: var(--text); }
.sig-preview { padding: 10px 12px; border: 1px solid var(--rim); border-radius: 8px; background: rgba(0,0,0,0.2); color: var(--text-2); white-space: pre-wrap; font-size: 13px; line-height: 1.6; }

/* ───────── Insights ───────── */
.figures.four { grid-template-columns: repeat(4, 1fr); }
.ptable .prow { display: grid; grid-template-columns: 1.8fr 0.6fr 0.6fr 1.1fr 0.8fr 0.9fr; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--rim); font-variant-numeric: tabular-nums; }
.ptable .prow:first-child { border-top: 0; }
.ptable .phead { color: var(--text-3); font-size: 12.5px; padding-top: 10px; padding-bottom: 10px; }
.ptable b { font-weight: 500; display: block; }
.ptable small { color: var(--text-3); font-size: 12px; }
.ptable .r { text-align: right; }
.ptable a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--rim-2); }
.rate { display: inline-block; width: 54px; height: 4px; margin-right: 8px; vertical-align: middle; border-radius: 2px; background: rgba(255,255,255,0.06); overflow: hidden; }
.rate span { display: block; height: 100%; border-radius: 2px; background: rgba(255,255,255,0.32); }
.reasons { list-style: none; margin: 0; padding: 0; }
.reasons li { display: grid; grid-template-columns: 1fr 160px 34px; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rim); }
.reasons li:first-child { border-top: 0; }
.reasons a { color: var(--text); text-decoration: none; }
.reasons a:hover { text-decoration: underline; text-decoration-color: var(--text-3); }
.reasons .r { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rbar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.06); overflow: hidden; }
.rbar span { display: block; height: 100%; background: rgba(255,255,255,0.32); }
@media (max-width: 1280px) { .figures.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .tenant-name { display: none; }
  .tenant-ini { display: inline; }
  .tenant-btn { padding: 0 6px 0 8px; }
  .tenant { gap: 6px; }
  .ptable .prow { grid-template-columns: 1.6fr 0.6fr 0.6fr 1fr; }
  .rate { display: none; }
  .reasons li { grid-template-columns: 1fr 70px 28px; }
}

/* the active place carries the gold, wherever it sits: the sections, the sub-tabs, the seller pages */
.tenant-btn[aria-current="page"] { color: var(--gold); border-color: var(--gold-rim); background: var(--gold-wash); }
.tenant-btn[aria-current="page"] .chev-s { color: var(--gold); }

/* ───────── Chatbot sub-tabs: quiet, under the section icons ───────── */
.subtabs {
  position: fixed; top: var(--top); left: 0; right: 0; z-index: 18;
  height: var(--subtabs);
  background: transparent;
  transition: background 240ms var(--ease);
}
.subtabs-in { display: flex; justify-content: center; gap: 4px; height: 100%; padding: 0 12px; }
.subtabs a {
  position: relative; display: flex; align-items: center; flex: none;
  padding: 0 14px; color: var(--text-3); text-decoration: none; font-size: 13px;
  transition: color var(--fast) var(--ease);
}
.subtabs a:hover { color: var(--text-2); }
.subtabs a[aria-current="page"] { color: var(--text); }
.subtabs a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 1px; background: var(--gold); }
@media (max-width: 720px) {
  .subtabs-in { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 0 8px; }
  .subtabs-in::-webkit-scrollbar { display: none; }
}

.back { display: none; place-items: center; width: 32px; height: 32px; margin: -4px 0 8px -8px; border-radius: 8px; color: var(--text-2); }
.back .i { transform: rotate(180deg); }
.back:hover { background: var(--glass-2); color: var(--text); }

/* ───────── Menus ───────── */
.menu { min-width: 300px; }
.menu-head { margin-bottom: 8px; }

/* the head of each menu opens what belongs to it: your name in signature, the seller's signature */
button.menu-head, a.menu-head { width: 100%; padding: 10px 10px 12px; margin-bottom: 8px; border: 0; border-bottom: 1px solid var(--rim); border-radius: 8px 8px 0 0; background: transparent; text-align: left; color: var(--text); text-decoration: none; cursor: pointer; transition: background var(--fast) var(--ease); }
button.menu-head:hover, a.menu-head:hover, button.menu-head:focus-visible, a.menu-head:focus-visible { background: var(--glass-2); }
.menu-head .edit { margin-left: auto; width: 15px; height: 15px; color: var(--text-3); opacity: 0.6; transition: opacity var(--fast) var(--ease); }
.menu-head:hover .edit, .menu-head:focus-visible .edit { opacity: 1; color: var(--gold); }

/* ───────── One centre line ─────────
   The section icons, the sub-tabs and the content share the centre of the window, on every page and whether the
   assistant is in or out, so nothing ever moves when it opens or closes: the assistant is a layer on top, with its own
   edge. The content only gives way to the case list. One reading width everywhere: 680 px. */
@media (min-width: 1001px) {
  body { --L: 32px; --R: 72px; }                         /* the room the content keeps on either side; 72 px clears the mark */
  body.has-list { --L: calc(var(--list) + 32px); }
  .main { padding-left: 0; padding-right: 0; }
  .main > .column {
    --w: min(680px, calc(100% - var(--L) - var(--R)));
    width: var(--w); max-width: none;
    margin-left: clamp(var(--L), calc((100% - var(--w)) / 2), calc(100% - var(--R) - var(--w)));
    margin-right: 0;
    transition: margin-left 420ms var(--ease), width 420ms var(--ease);
  }
  /* Appearance: the previews at their real size, centred on the page itself */
  .main > .column.ap-page { --w: min(1400px, calc(100% - 2 * var(--R))); margin-left: calc((100% - var(--w)) / 2); }
}
/* the docked assistant lies over the page: an opaque glass with its own edge and shadow, the page keeps its place */
@media (min-width: 1281px) {
  .assistant { background: rgba(17, 19, 22, 0.9); border-left: 1px solid var(--rim); box-shadow: -18px 0 48px rgba(0, 0, 0, 0.38); }
  .assistant::before, .assistant::after { left: 0; -webkit-mask-image: var(--as-mask-y); mask-image: var(--as-mask-y); }
}

/* actions on a row appear where you point, and stay reachable by keyboard */
@media (hover: hover) {
  .panel-row .row-act { opacity: 0; transition: opacity var(--fast) var(--ease); }
  .panel-row:hover .row-act, .panel-row .row-act:focus-visible { opacity: 1; }
}

/* the case list, a touch narrower and finer, so the conversation has room */
.caselist .filters { gap: 2px; }
.caselist .filters button { font-size: 12.5px; height: 28px; }
.caselist .filters .n { font-size: 11.5px; margin-left: 3px; }
.caselist .search { height: 34px; font-size: 13px; }
.case-item { padding: 9px 10px 10px; }
.case-item .lang { font-size: 9.5px; line-height: 14px; }

/* ───────── Cases on live data (views/cases-live.js) ───────── */
.case-item .cnum { flex: none; font-size: 10.5px; color: var(--text-3); border: 1px solid var(--rim); border-radius: 4px; padding: 0 4px; line-height: 15px; font-variant-numeric: tabular-nums; }
.case-item .follow { margin-top: 3px; color: var(--text-3); font-size: 11.5px; }
.case-item .follow::before { content: "↳ "; }
.msg.mine { grid-template-columns: 1fr; justify-items: end; }
.msg.mine > div { max-width: 82%; display: flex; flex-direction: column; align-items: flex-end; }
.msg.mine .who .time { margin-left: 8px; }
.msg.mine .bubble { margin-top: 6px; padding: 10px 14px; border: 1px solid var(--rim); border-radius: var(--radius) var(--radius) 4px var(--radius); background: var(--glass-2); }
.msg.mine .bubble .body { margin: 0; }
.msg .via { display: block; margin-top: 4px; color: var(--text-3); font-size: 11px; }
.event.center { justify-content: center; padding-left: 0; text-align: center; }
.event.center::before, .event.center::after { content: ""; flex: 1; height: 1px; background: var(--rim); }
.lc-summary { margin-top: 22px; padding: 14px 16px; border: 1px solid var(--rim); border-radius: var(--radius); background: var(--glass); }
.lc-summary p { margin: 0; line-height: 1.6; white-space: pre-wrap; }
.lc-before { margin-top: 14px; }
.lc-before summary { cursor: pointer; color: var(--text-2); font-size: 13px; list-style: none; }
.lc-before summary::-webkit-details-marker { display: none; }
.lc-before summary::before { content: "›"; display: inline-block; width: 14px; color: var(--text-3); transition: transform var(--fast) var(--ease); }
.lc-before[open] summary::before { transform: rotate(90deg); }
.lc-before .thread { opacity: 0.8; padding-left: 14px; border-left: 1px solid var(--rim); margin-top: 6px; }
.lc-note { margin: 30px 0 -18px; padding: 10px 14px; border: 1px solid var(--rim); border-radius: var(--radius-s); background: var(--glass); color: var(--text-2); font-size: 13px; }
.live-error { color: var(--danger); font-size: 12.5px; }
.list-note { margin: 4px 4px 8px; }

/* ── live Signature (views/signature-live.js) ── */
.sl-k { color: var(--text-2); font-size: 13px; }
.sl-row { display: flex; gap: 8px; align-items: center; }
.sl-row input { flex: 1; min-width: 0; }
.field input:disabled { opacity: 0.7; cursor: default; }
.sl-x { flex: none; width: 34px; height: 34px; padding: 0; justify-content: center; }
.sl-hint { color: var(--text-3); font-size: 12px; }
.sl-err { margin: 0; color: var(--danger); font-size: 12.5px; }
/* the signature editor (sig-editor.js): HTML on the left, the mail's end with and without your name on the right */
.column.se-page { max-width: 1040px; }
.se-editor { display: grid; gap: 16px; padding: 18px; container-type: inline-size; }
.se-editor .field { padding: 0; border-top: 0; }
.se-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@container (max-width: 760px) { .se-grid { grid-template-columns: minmax(0, 1fr); } }
.field textarea.se-ta { min-height: 280px; }
.field textarea.se-ta[readonly] { opacity: 0.85; }
.se-code, .se-side { display: grid; gap: 14px; min-width: 0; }
.se-note { margin: 0; color: var(--gold); }
.se-img { cursor: pointer; white-space: nowrap; }
.se-img[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }
.se-editor .ap-row { flex-wrap: wrap; }
.se-actions { padding-top: 14px !important; border-top: 1px solid var(--rim) !important; }
.se-editor .ap-shots { padding-top: 14px; }
/* a light mail, as the customer reads it; the frame holds the signature itself */
.se-paper { padding: 14px 16px; border-radius: 8px; background: #ffffff; }
.se-frame { display: block; width: 100%; height: 40px; border: 0; background: transparent; }

/* ── live Cases: attachments (views/cases-live.js) ── */
.lc-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg.mine .lc-atts { justify-content: flex-end; }
.lc-thumb { display: block; border: 1px solid var(--rim); border-radius: 8px; overflow: hidden; background: var(--glass); line-height: 0; }
.lc-thumb img { display: block; max-width: 160px; max-height: 120px; object-fit: cover; }
.lc-thumb:hover { border-color: var(--rim-2); }
.lc-file, .lc-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 30px; padding: 4px 10px; border: 1px solid var(--rim); border-radius: 8px; background: var(--glass); color: var(--text-2); font-size: 12.5px; text-decoration: none; }
.lc-file:hover { border-color: var(--rim-2); color: var(--text); }
.lc-file svg, .lc-chip svg, .lc-attach svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lc-fname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.lc-fsize { color: var(--text-3); white-space: nowrap; }
.lc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px; }
.lc-chips:not(:empty) { padding-bottom: 10px; }
.lc-chips { align-items: flex-start; }
.lc-chip { display: inline-grid; grid-template-columns: auto auto auto auto 1fr; column-gap: 6px; padding-right: 4px; }
.lc-chip.error { border-color: rgba(224, 139, 123, 0.4); }
.lc-chip-err { grid-column: 1 / -1; padding: 0 0 2px; color: var(--danger); font-size: 12px; }
.lc-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); }
.lc-chip-x:hover { color: var(--text); background: var(--glass-2); }
.lc-chip-x .i { width: 12px; height: 12px; }
.lc-spin { width: 12px; height: 12px; flex: none; border: 1.5px solid var(--rim-2); border-top-color: var(--gold); border-radius: 50%; animation: lc-spin 0.8s linear infinite; }
@keyframes lc-spin { to { transform: rotate(360deg); } }
.lc-attach { gap: 6px; cursor: pointer; padding-left: 6px; }
a.lc-fname { color: var(--text); text-decoration: none; }
a.lc-fname:hover { text-decoration: underline; text-underline-offset: 2px; }
.lc-chip-img { width: 18px; height: 18px; border-radius: 3px; object-fit: cover; }

/* ── live Knowledge (views/knowledge-live.js) ── */
.kswitch { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rim); font-size: 13px; color: var(--text-2); }
.kbranch .kswitch-help { margin-top: 4px; font-size: 12px; }
.kup-error { margin: 8px 2px 0; }
.krow { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px; padding: 13px 16px; transition: background var(--fast) var(--ease); }
.krow:hover { background: var(--glass); }
.krow .kcheck { width: 15px; height: 15px; margin: 0; accent-color: var(--gold); }
.krow span.kcheck { display: block; }
.krow .kfile { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); text-decoration: none; }
.krow a.kfile:hover { text-decoration: underline; text-underline-offset: 2px; }
.krow .kerr { grid-column: 2 / -1; margin-top: -8px; color: var(--text-3); font-size: 12px; }
.badge.kpulse { animation: blink 1.6s ease-in-out infinite; }
.kbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 8px 10px 8px 16px; border: 1px solid var(--rim-2); border-radius: var(--radius); background: var(--glass-2); font-size: 13px; color: var(--text-2); animation: pop var(--fast) var(--ease); }
.kbar .spacer { flex: 1; }
.kbar.confirm { border-color: rgba(224, 139, 123, 0.3); }
.kask-help { margin: -6px 0 4px; font-size: 12.5px; }
.kask { margin-top: 14px; }
.kthread { margin-top: 6px; }
.kthread:empty { display: none; }
.kex { padding: 4px 0 14px; border-bottom: 1px solid var(--rim); }
.kex:last-child { border-bottom: 0; }
.kearlier { margin-top: 10px; }
.kearlier-t { padding-left: 0; color: var(--text-3); font-size: 12.5px; }
.kearlier-t:hover { background: transparent; color: var(--text); }
/* earlier questions scroll in their own box, so the page never grows past the latest three */
.kearlier-list { max-height: 420px; overflow-y: auto; margin-top: 6px; padding-right: 6px; border-top: 1px solid var(--rim); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; }
.kask .as-send:disabled { opacity: 0.45; cursor: default; }
.ksources { margin-top: 8px; font-size: 12.5px; }
.ksources summary { cursor: pointer; color: var(--text-3); list-style: none; }
.ksources summary::-webkit-details-marker { display: none; }
.ksources summary::before { content: "›"; display: inline-block; width: 12px; transition: transform var(--fast) var(--ease); }
.ksources[open] summary::before { transform: rotate(90deg); }
.ksources ul { list-style: none; margin: 8px 0 0; padding: 0 0 0 12px; display: grid; gap: 10px; border-left: 1px solid var(--rim); }
.ksrc-file { color: var(--text-2); font-weight: 500; }
.ksrc-head { margin-left: 8px; color: var(--text-3); }
.ksrc-ex { margin: 3px 0 0; color: var(--text-3); line-height: 1.55; }
@media (max-width: 720px) {
  .krow { grid-template-columns: auto 1fr auto; }
  .krow .kmeta { display: none; }
}

/* ── live sign-in (signin.js) ── */
body.signed-out > :not(.signin):not(.toast):not(.dialog-root):not(script),
body.loading-session .assist-mark { display: none !important; }
.signin { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px 16px; overflow-y: auto; }
.si-card { width: 100%; max-width: 400px; padding: 28px 24px 22px; border: 1px solid var(--rim-2); border-radius: 16px; background: var(--glass-2); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); animation: rise var(--mid) var(--ease); }
.si-mark { width: 26px; height: 26px; margin: 0 0 16px; }
.si-mark svg { width: 100%; height: 100%; fill: var(--text-2); }
.si-mark svg .stem { fill: var(--gold-2); }
.si-title { margin: 0 0 14px; font: 500 20px/1.3 var(--display); color: var(--text); }
.si-text { margin: 0 0 14px; color: var(--text-2); font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.si-notice { margin: -4px 0 12px; color: var(--gold); font-size: 12.5px; }
.si-card form { display: grid; gap: 8px; }
.si-card label { color: var(--text-2); font-size: 13px; }
.si-card input { height: 42px; padding: 0 12px; border: 1px solid var(--rim-2); border-radius: 10px; background: rgba(0, 0, 0, 0.2); color: var(--text); font-size: 15px; }
.si-card input:focus { outline: none; border-color: var(--gold-rim); box-shadow: 0 0 0 3px var(--gold-wash); }
.si-card input.si-code { letter-spacing: 0.35em; text-align: center; font-size: 19px; font-variant-numeric: tabular-nums; }
.si-err { margin: 0; color: var(--danger); font-size: 12.5px; line-height: 1.5; }
.si-go { justify-content: center; height: 42px; margin-top: 6px; }
.si-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
.si-link { padding: 0; border: 0; background: none; color: var(--text-3); font-size: 12.5px; cursor: pointer; }
.si-link:hover { color: var(--text); }
.si-list { display: grid; gap: 8px; margin: 0 0 10px; }
.si-ws { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 46px; padding: 10px 14px; border: 1px solid var(--rim-2); border-radius: 10px; background: var(--glass); color: var(--text); font-size: 14px; text-align: left; cursor: pointer; }
.si-ws:hover { border-color: var(--gold-rim); }
.si-role { color: var(--text-3); font-size: 12px; }

/* Chatbot › Appearance (live) */
.column.ap-page { max-width: none; container-type: inline-size; }
.ap-hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 20px; color: var(--text-2); font-size: 13.5px; }
/* one row per slot: left the open chat at the design's frame size; right the closed state on a small page, the
   controls under it. Both previews start on the row's top line, whatever the texts. Narrow: stacked in that order. */
.ap-fit { display: flex; justify-content: center; margin-bottom: 28px; }
.ap-slots { --ap-s: 0.85; flex: none; width: max-content; max-width: calc(100% / var(--ap-s)); display: grid; grid-template-columns: max-content minmax(300px, 460px); gap: 20px 24px; transform: scale(var(--ap-s)); transform-origin: top center; }
.ap-slot { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-areas: "open stage" "open ctl"; grid-template-rows: auto 1fr; align-items: start; row-gap: 20px; margin-top: 0; padding: 20px; }
.ap-open { grid-area: open; } .ap-stage { grid-area: stage; } .ap-ctl { grid-area: ctl; }
.ap-slot > * { min-width: 0; }
.ap-open, .ap-stage { border-radius: 12px; background: #E9EBE7; }
.ap-open { width: max-content; max-width: 100%; }
.ap-open .ap-frame { width: var(--fw, 400px); height: var(--fh, 680px); max-width: 100%; border: 0; }
.ap-stage { position: relative; height: 300px; overflow: hidden; }
.ap-stage::before { content: ""; position: absolute; left: 20px; right: 20px; top: 22px; height: 120px; background:
  linear-gradient(#D7DAD4, #D7DAD4) 0 0 / 46% 12px no-repeat, linear-gradient(#DFE2DC, #DFE2DC) 0 30px / 100% 8px no-repeat,
  linear-gradient(#DFE2DC, #DFE2DC) 0 48px / 86% 8px no-repeat, linear-gradient(#DFE2DC, #DFE2DC) 0 66px / 92% 8px no-repeat; }
.ap-stage .ap-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ap-ctl { display: grid; gap: 14px; }
.ap-ctl .ap-slot-head, .ap-ctl .ap-slot-actions, .ap-ctl .ap-ifr { padding: 0; }
.ap-gr { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--rim); }
.ap-gr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ap-gr-head .sl-k { display: inline-flex; align-items: center; }
.ap-gr-text { height: 32px; padding: 0 8px; border: 1px solid var(--rim); border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: var(--text); }
.ap-gr-text:focus { outline: none; border-color: var(--gold-rim); }
.ap-gr-text:disabled { opacity: 0.55; }
.ap-gr-side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ap-gr-side .sl-k { margin-right: auto; }
.ap-gr .sl-err { margin: 0; }
@container (max-width: 700px) {
  .ap-fit { display: block; }
  .ap-slots { --ap-s: 1; width: auto; transform: none; grid-template-columns: minmax(0, 1fr); }
  .ap-slot { grid-template-areas: "open" "stage" "ctl"; grid-template-rows: none; }
  .ap-stage { max-width: 420px; }
}
.ap-slot-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; }
.ap-slot-head .grow { flex: 1; min-width: 0; }
.ap-slot-head .t { font-weight: 500; }
.ap-slot-head .d { color: var(--text-3); font-size: 13px; margin-top: 2px; }
.ap-slot-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 18px 16px; }
.ap-slot-actions:empty { display: none; }
.ap-frame { color-scheme: light; display: block; width: 100%; height: 480px; border: 0; border-top: 1px solid var(--rim); border-bottom: 1px solid var(--rim); background: transparent; }
.ap-editor { overflow: hidden; }
.ap-edit-grid { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(0, max-content); border-top: 1px solid var(--rim); }
.ap-code { min-width: 0; }
.ap-side { border-left: 1px solid var(--rim); padding: 16px; }
.ap-side .ap-frame { width: var(--fw, 400px); height: var(--fh, 680px); max-width: 100%; border: 0; border-radius: 10px; background: #E9EBE7; }
.ap-side .sl-hint { margin: 8px 0 0; }
/* the editor: open chat and closed state side by side (stacked when there is no room) */
.ap-side-frames { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.ap-side .ap-stage { width: 320px; max-width: 100%; }
.ap-side .ap-stage .ap-frame { width: 100%; height: 100%; border-radius: 0; background: transparent; }
/* Preview images: a quiet gallery, labels under each image, the checks as notes */
.ap-shots { grid-column: 1 / -1; display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--rim); }
.ap-editor .ap-shots { padding: 14px 18px 18px; }
.ap-shots-head { display: flex; align-items: center; justify-content: space-between; }
.ap-gallery { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 16px; }
.ap-gallery figure { margin: 0; }
.ap-gallery img { display: block; max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 0 1px var(--rim); }
.ap-gallery figcaption { margin-top: 6px; color: var(--text-3); font-size: 12.5px; }
.ap-notes { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; color: var(--text-2); font-size: 13px; }
.ap-notes .muted { margin-right: 6px; }
.field textarea.ap-ta { min-height: 260px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; white-space: pre; overflow-wrap: normal; overflow-x: auto; tab-size: 2; }
.ap-reasons { margin: 0; padding: 10px 12px 10px 28px; border: 1px solid rgba(224, 139, 123, 0.35); border-radius: 8px; color: var(--text-2); font-size: 12.5px; max-height: 220px; overflow: auto; }
.ap-reasons li + li { margin-top: 4px; }
.ap-reasons code { color: var(--danger); }
.ap-row { display: flex; gap: 8px; align-items: center; }
.ap-host { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--rim); border-radius: 8px; overflow: hidden; text-overflow: ellipsis; }
.ap-check { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13.5px; cursor: pointer; }
.ap-check input { accent-color: var(--gold); }
@media (max-width: 860px) {
  .ap-edit-grid { grid-template-columns: 1fr; }
  .ap-side { border-left: 0; border-top: 1px solid var(--rim); }
}

/* Chatbot › Capabilities (live) */
.cl-row { align-items: flex-start; }
.cl-row .t .badge { margin-left: 6px; vertical-align: 1px; }
.cl-price { color: var(--text-2); }
.cl-settings { display: grid; gap: 12px; justify-items: stretch; margin-top: 12px; }
.cl-set { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13.5px; }
.cl-set input, .cl-set select { width: 120px; height: 32px; padding: 0 8px; border: 1px solid var(--rim); border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: var(--text); }
.cl-note { margin: 10px 0 0; }
.cl-hint { display: block; color: var(--text-3); margin-top: 2px; }
.cl-next { margin: 14px 0 12px; }
.cl-soon .t, .cl-soon .d { opacity: 0.7; }
.switch:disabled { opacity: 0.4; cursor: not-allowed; }

/* The live assistant: replies as simple Markdown, proposals as cards */
/* the head: two quiet icons, the conversations and a new chat */
.as-head { align-items: center; gap: 4px; }
.as-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--text-3); cursor: pointer; transition: color var(--fast) var(--ease), background var(--fast) var(--ease); }
.as-ico .i, .as-ico svg { width: 18px; height: 18px; }
.as-ico:hover, .as-ico:focus-visible { color: var(--text); background: var(--glass-2); }
.as-ico[aria-pressed="true"] { color: var(--gold); background: var(--glass-2); }
/* the user's conversations, newest first */
.as-convs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.as-conv { display: flex; align-items: center; gap: 4px; border-radius: 10px; }
.as-conv:hover, .as-conv.is-current { background: rgba(255, 255, 255, 0.04); }
.as-conv-open { flex: 1; min-width: 0; display: grid; gap: 2px; padding: 9px 10px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.as-conv-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.as-conv-d { color: var(--text-3); font-size: 12px; }
.as-more { justify-self: start; margin-top: 8px; font-size: 12.5px; }
.as-form[hidden] { display: none; }
.as-msg.bot.md { white-space: normal; }
.as-msg.md p { margin: 0 0 8px; }
.as-msg.md p:last-child, .as-msg.md ul:last-child, .as-msg.md ol:last-child { margin-bottom: 0; }
.as-msg.md ul, .as-msg.md ol { margin: 0 0 8px; padding-left: 20px; }
.as-msg.md li + li { margin-top: 3px; }
.apr { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--gold-rim); border-radius: 12px; background: rgba(226, 194, 126, 0.04); font-size: 13px; }
.apr.is-closed { border-color: var(--rim); background: transparent; }
.apr.is-closed .apr-title, .apr.is-closed .apr-row, .apr.is-closed .apr-text { opacity: 0.65; }
.apr-title { font-weight: 500; color: var(--text); }
.apr-row { display: flex; gap: 8px; color: var(--text-2); }
.apr-k { color: var(--text-3); min-width: 54px; }
.apr-text { white-space: pre-wrap; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: var(--text-2); line-height: 1.55; max-height: 280px; overflow: auto; }
.apr-toggle { justify-self: start; padding: 0; border: 0; background: none; color: var(--text-2); font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.apr-code { margin: 0; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); color: var(--text-2); font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; }
.apr-act { display: flex; gap: 8px; margin-top: 2px; }
.apr-result { margin: 0; color: var(--text-2); }
.apr-note { margin: 0; color: var(--text-3); font-size: 12.5px; }
/* a refused send reads as refused: a badge, the reason, and the addresses struck as not sent to */
.apr.is-refused { border-color: rgba(224, 139, 123, 0.45); background: rgba(224, 139, 123, 0.05); }
.apr-badge { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 6px; background: rgba(224, 139, 123, 0.18); color: var(--danger); font-size: 11.5px; font-weight: 500; }
.apr.is-refused .apr-person { text-decoration: line-through; color: var(--text-3); }

/* Seller › Users (live) */
.us-invite { display: flex; gap: 10px; align-items: center; padding: 14px 18px; }
.us-invite input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--rim); border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: var(--text); }
.us-invite input:focus { outline: none; border-color: var(--gold-rim); }
.us-note { margin: -4px 4px 14px; }

/* Seller › Activity (live): a quiet list, one line per entry, details on a click */
.badge.bad { color: var(--danger); border-color: rgba(224, 139, 123, 0.4); }
.av-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 10px; }
.av-filters select, .av-search input { height: 32px; padding: 0 8px; border: 1px solid var(--rim); border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: var(--text-2); font-size: 13px; }
.av-filters select:focus, .av-search input:focus { outline: none; border-color: var(--gold-rim); }
.av-search { flex: 1; min-width: 200px; }
.av-search input { width: 100%; }
.av-reads { font-size: 13px; }
.av-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.av-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border: 1px solid var(--gold-rim); border-radius: 999px; color: var(--gold); font-size: 12.5px; }
.av-chip button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.av-chip svg { width: 12px; height: 12px; }
.av-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--rim); }
.av-item { border-bottom: 1px solid var(--rim); }
.av-row { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 9px 4px; border: 0; background: none; color: var(--text-2); font-size: 13px; text-align: left; cursor: pointer; }
.av-row:hover, .av-item.open .av-row { color: var(--text); }
.av-time { flex: none; width: 92px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.av-who { flex: none; width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.av-via { flex: none; width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); }
.av-sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-price { flex: none; color: var(--gold); font-variant-numeric: tabular-nums; }
.av-detail { padding: 4px 4px 16px 104px; }
.av-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 13px; }
.av-fields dt { color: var(--text-3); }
.av-fields dd { margin: 0; color: var(--text-2); min-width: 0; }
.av-fields .av-fields { gap: 3px 12px; }
.av-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.av-detail pre { margin: 0; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.22); font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; }
.av-fold summary { cursor: pointer; color: var(--text-2); }
.av-fold[open] summary { margin-bottom: 6px; color: var(--text-3); }
.av-more { display: flex; justify-content: center; margin: 16px 0; }
.lc-activity { margin-left: 12px; color: var(--text-3); font-size: 12.5px; }
.lc-activity:hover { color: var(--text); }
@media (max-width: 720px) {
  .av-row { flex-wrap: wrap; gap: 2px 10px; }
  .av-who, .av-via, .av-time { width: auto; }
  .av-sum { flex-basis: 100%; white-space: normal; }
  .av-detail { padding-left: 4px; }
}

/* Files for the AI: the paperclip and chips in the assistant, file names on reply cards, the upload page */
.as-clip { width: 32px; height: 32px; display: grid; place-items: center; flex: none; border-radius: 8px; color: var(--text-3); cursor: pointer; }
.as-clip:hover, .as-clip:focus-within { color: var(--gold); background: var(--glass-2); }
.as-clip svg, .as-msg-files svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.as-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.as-chips:not(:empty) { padding-top: 8px; }
.as-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 10px; border: 1px solid var(--rim); border-radius: 8px; background: var(--glass-2); font-size: 12.5px; color: var(--text-2); }
.as-chip.error { border-color: rgba(224, 139, 123, 0.4); }
.as-chip-n { min-width: 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-chip-err { flex-basis: 100%; color: var(--danger); font-size: 12px; }
.as-msg-files { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; color: var(--text-3); font-size: 12px; }
.as-msg-files span { display: inline-flex; align-items: center; gap: 4px; }
.as-msg-files svg { width: 12px; height: 12px; }
.apr-files { display: flex; flex-wrap: wrap; gap: 4px; }
.apr-file { padding: 1px 8px; border: 1px solid var(--rim); border-radius: 6px; color: var(--text); }
.up-note { margin-top: 12px; font-size: 12.5px; }
.up-drop { margin-top: 22px; }

/* "Got an idea?": quiet everywhere */
.menu .menu-quiet { color: var(--text-3); font-size: 12.5px; }
.menu .menu-quiet:hover, .menu .menu-quiet:focus-visible { color: var(--text); }
.fb-link { padding: 0; border: 0; background: none; color: var(--text-3); font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.fb-link:hover { color: var(--text); }
/* the light bulb, top right beside the mark, quiet like the rest of the top */
.fb-top { grid-column: 2; grid-row: 1; justify-self: end; margin-right: -46px; flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(226, 194, 126, 0.22), rgba(226, 194, 126, 0)); color: var(--gold); cursor: pointer;
  filter: drop-shadow(0 0 7px rgba(226, 194, 126, 0.7));
  transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.fb-top .i { width: 19px; height: 19px; }
.fb-top { transition: filter var(--fast) var(--ease), background var(--fast) var(--ease); }
.fb-top:hover, .fb-top:focus-visible { background: radial-gradient(closest-side, rgba(226, 194, 126, 0.26), rgba(226, 194, 126, 0)); filter: drop-shadow(0 0 9px rgba(226, 194, 126, 0.75)); }
.fb-top:focus-visible { outline: 2px solid var(--gold-rim); outline-offset: 2px; }
/* narrow: the bulb shares the sections' cell, just right of them */
@media (max-width: 1000px) { .topbar > .sections { grid-row: 1; } }
/* phone: the sections are centred (3 × 44 px and two 4 px gaps); the bulb sits 4 px right of them */
@media (max-width: 720px) { .fb-top { justify-self: center; margin-right: 0; transform: translateX(calc(70px + 4px + 18px)); } }
/* in the corner, the bulb follows the section icons; the corner grows by its width, past the list column's edge */
@media (min-width: 1001px) {
  .fb-top { order: 2; margin: 0 0 0 4px; }
  body .topbar { width: calc(var(--list) + 52px); }
}
.fb-dialog { width: min(560px, calc(100vw - 32px)); }
.fb-dialog .dialog-body { margin-top: 14px; }
.fb-kind { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--rim); border-radius: 10px; }
.fb-kind label { position: relative; cursor: pointer; }
.fb-kind input { position: absolute; opacity: 0; pointer-events: none; }
.fb-kind span { display: inline-block; padding: 5px 16px; border-radius: 7px; color: var(--text-2); font-size: 13.5px; }
.fb-kind input:checked + span { background: rgba(226, 194, 126, 0.16); color: var(--text); }
.fb-kind input:focus-visible + span { outline: 2px solid var(--gold-rim); outline-offset: 1px; }
.fb-shot { display: grid; gap: 8px; margin-top: 10px; }
.fb-shot-act { display: flex; gap: 6px; flex-wrap: wrap; }
.fb-shot-act .btn { height: 30px; font-size: 13px; }
.fb-upload { cursor: pointer; }
.fb-thumb { position: relative; justify-self: start; }
.fb-thumb img { display: block; max-width: 220px; max-height: 140px; border-radius: 8px; box-shadow: 0 0 0 1px var(--rim); }
.fb-thumb .sl-x { position: absolute; top: 4px; right: 4px; background: rgba(17, 19, 22, 0.8); }
.fb-ctx { margin-top: 12px; color: var(--text-3); font-size: 12.5px; }
.fb-ctx summary { cursor: pointer; }
.fb-ctx dl { display: grid; gap: 4px; margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); }
.fb-ctx dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
.fb-ctx dt { color: var(--text-3); }
.fb-ctx dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.fb-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; }
.fb-errs { margin: 0; padding-left: 16px; }
.fb-thanks { color: var(--text-2); line-height: 1.55; }
.fb-dialog .field { display: grid; gap: 6px; padding: 10px 0 0; border: 0; }
.fb-dialog textarea { width: 100%; min-height: 72px; padding: 8px 10px; border: 1px solid var(--rim); border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: var(--text); resize: vertical; line-height: 1.5; }
.fb-dialog textarea:focus { outline: none; border-color: var(--gold-rim); }
.fb-err { margin: 8px 0 0; }
.ap-ifr { display: grid; gap: 6px; padding: 12px 18px 0; }
.ap-ifr .ap-row input { flex: 1; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--rim); border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: var(--text); }
.ap-ifr .ap-row input:focus { outline: none; border-color: var(--gold-rim); }
.ap-ifr .sl-hint, .ap-ifr .sl-err { margin: 0; }

/* Chatbot › Settings: languages in order */
.lg-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.lg-list li { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; border: 1px solid var(--rim); border-radius: 8px; }
.lg-n { width: 18px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.lg-list .grow { flex: 1; min-width: 0; }
#apLangAdd, #apTeamLang { height: 34px; max-width: 280px; padding: 0 8px; border: 1px solid var(--rim); border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: var(--text); }
.ap-choice { align-items: flex-start; } .ap-choice input { margin-top: 3px; } .ap-choice > span { display: grid; gap: 1px; } .ap-choice b { font-weight: 500; color: var(--text); }
/* the hub's language: two choices in the personal menu and on the sign-in card */
.menu .menu-langs { display: flex; gap: 4px; padding: 2px 0; }
.menu .menu-langs button { flex: 1; justify-content: center; }
.menu .menu-langs button[aria-checked="true"] { background: var(--glass-2); color: var(--text); font-weight: 600; }
.si-lang { display: flex; justify-content: center; gap: 14px; margin-top: 18px; }
.si-lang .si-link[aria-pressed="true"] { color: var(--text); font-weight: 600; text-decoration: none; }
/* Insights, live: "Coming soon" and the idea card */
.in-soon .lede { max-width: none; }
.in-idea { margin: 24px 0 0; text-align: center; }
.in-idea .fb-link { font-size: 13px; text-decoration: none; }
.in-idea .fb-link:hover { text-decoration: underline; }
/* Knowledge: room for a short explainer next to the platform card's name, empty for now */
.k-explain:empty { display: none; }
/* for the owner only (?marks=1): what is still mock */
html[data-marks="1"] [data-mock] { outline: 1px dashed var(--gold-rim); outline-offset: 6px; border-radius: 10px; }
/* Billing, live */
.bi-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bi-month select { width: auto; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--rim); border-radius: 8px; background: var(--glass); color: var(--text); }
.line-head.bi-line { grid-template-columns: 1fr auto auto; cursor: default; }
.line-head.bi-line:hover { background: transparent; }
.bi-charges { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rim); border-radius: var(--radius); overflow: hidden; }
.bi-charges li + li { border-top: 1px solid var(--rim); }
.bi-charge { display: grid; grid-template-columns: 130px 1fr auto; gap: 14px; align-items: baseline; padding: 10px 16px; color: var(--text); text-decoration: none; }
button.bi-charge { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
button.bi-charge:hover, button.bi-charge:focus-visible, button.bi-charge[aria-expanded="true"] { background: var(--glass); }
.bi-charges .av-detail { border-top: 1px solid var(--rim); padding: 12px 16px 16px; }
.bi-when { color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.bi-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bi-what small { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 2px; }
.bi-charge .amt, .bi-price { font-variant-numeric: tabular-nums; color: var(--text-2); }
.bi-price { margin-right: 6px; }
.bi-limit { padding: 16px 18px; }
.bi-limit-now .d { color: var(--text-3); font-size: 12.5px; margin-top: 6px; }
.bi-bar { height: 6px; margin-top: 10px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.bi-bar span { display: block; height: 100%; border-radius: 3px; background: var(--gold); opacity: 0.75; }
.bi-bar.near span { opacity: 1; }
.bi-bar.full span { background: var(--warn, #E39B6B); opacity: 1; }
.bi-limit .field { margin-top: 16px; }
.av-back { margin: -4px 0 14px; font-size: 13px; }
.av-back a { color: var(--text-2); }
@media (max-width: 560px) { .bi-charge { grid-template-columns: 1fr auto; } .bi-when { grid-column: 1 / -1; } }
.bi-parts { margin-top: 10px; }
.bi-parts { font-size: 13px; }
.bi-part-amt { color: var(--text-2); font-variant-numeric: tabular-nums; }
/* a small info tooltip (FH.infoTip) */
.info-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }
.info-btn { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: help; }
.info-btn:hover, .info-btn:focus-visible, .info-btn[aria-expanded="true"] { color: var(--text); }
.info-btn .i, .info-btn svg { width: 15px; height: 15px; }
.info-pop { position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 8px); width: max-content; max-width: min(320px, 80vw); transform: translateX(-50%);
  padding: 9px 11px; border: 1px solid var(--rim-2); border-radius: 8px; background: rgba(24, 26, 30, 0.97); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  color: var(--text-2); font-size: 12.5px; font-weight: 400; line-height: 1.45; white-space: normal; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--fast) var(--ease); }
.info-tip:hover .info-pop, .info-btn:focus-visible + .info-pop, .info-btn[aria-expanded="true"] + .info-pop { opacity: 1; visibility: visible; }
.ap-choice-name { display: inline-flex; align-items: center; }
.as-unseen { align-self: flex-end; margin: -4px 0 4px; max-width: 85%; text-align: right; color: var(--text-3); font-size: 12px; line-height: 1.4; }
/* the assistant's width: an invisible strip on its left edge, outside the column (its glass and fades stay untouched);
   pointing at it shows only a small pill, never a line */
.as-grip { position: fixed; z-index: 20; top: var(--top); bottom: 0; right: var(--assist); width: 14px; margin-right: -7px; cursor: col-resize; touch-action: none; outline: none; }
.as-grip::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 44px; margin: -22px 0 0 -1.5px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.2); opacity: 0; transition: opacity var(--fast) var(--ease) 120ms, background var(--fast) var(--ease); }
.as-grip:hover::after { opacity: 1; }
.as-grip:focus-visible::after { opacity: 1; background: var(--focus); transition-delay: 0s; }
body.as-resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body.as-resizing .as-grip::after { opacity: 1; background: var(--gold-rim); transition-delay: 0s; }
body.as-resizing .assistant, body.as-resizing .main > .column { transition: none !important; }
body.as-resizing iframe { pointer-events: none; }
@media (max-width: 1280px) { .as-grip { display: none; } }
.apr-people { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.apr-person { padding: 1px 7px; border: 1px solid var(--rim); border-radius: 10px; font-size: 12px; }
.apr-note { color: var(--gold); font-size: 11.5px; }

/* ───────── Case view: side lanes, team notes, unverified mails ───────── */
.lc-lanes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.lc-lanes button { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 5px 11px; border: 1px solid var(--rim); border-radius: 15px; background: transparent; color: var(--text-2); font-size: 12.5px; }
.lc-lanes button span:not(.n) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-lanes button .n { color: var(--text-3); font-size: 11.5px; }
.lc-lanes button svg, .lc-side-banner svg, .lc-only svg, .lc-note-hint svg, .lc-mail-warn svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lc-lanes button:hover { color: var(--text); border-color: var(--rim-2); }
.lc-lanes button[aria-selected="true"] { color: var(--text); border-color: var(--gold-rim); background: rgba(226, 194, 126, 0.06); }
.lc-side-banner { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 9px 12px; border: 1px dashed var(--gold-rim); border-radius: var(--radius-s); color: var(--text-2); font-size: 13px; }
.lc-side-banner b { color: var(--gold); font-weight: 500; }
.lc-tag { padding: 0 6px; border: 1px solid var(--rim-2); border-radius: 8px; color: var(--text-3); font-size: 11px; line-height: 16px; }
/* a note is a margin remark, never a message */
.lc-tnote { margin: 18px 0 4px 42px; padding: 8px 12px 10px; border-left: 2px solid var(--gold-rim); background: linear-gradient(90deg, rgba(226, 194, 126, 0.05), transparent 70%); }
.lc-tnote-head, .lc-unv-head { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--text-3); }
.lc-tnote-head .name, .lc-unv-head .name { color: var(--text-2); font-weight: 500; }
.lc-tnote-head .time, .lc-unv-head .time { margin-left: auto; }
.lc-tnote .body, .lc-unv .body { margin-top: 4px; color: var(--text-2); font-size: 13.5px; white-space: pre-wrap; }
.lc-only { display: inline-flex; align-items: center; gap: 5px; color: var(--gold); font-size: 11.5px; letter-spacing: 0.01em; }
.lc-unv { margin: 18px 0 4px 42px; padding: 9px 12px 10px; border: 1px dashed rgba(224, 139, 123, 0.4); border-radius: var(--radius-s); opacity: 0.85; }
.lc-unv-warn { margin: 4px 0 0; color: var(--danger); font-size: 12px; }

/* ───────── The composer ───────── */
.lc-modes { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--rim); }
.lc-modes button { padding: 7px 10px 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-3); font-size: 12.5px; }
.lc-modes button:hover { color: var(--text-2); }
.lc-modes button[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--gold); }
.lc-compose.is-note { border-color: var(--gold-rim); }
.lc-fields:empty { display: none; }
.lc-rcpt, .lc-subj { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 7px 14px; border-bottom: 1px solid var(--rim); font-size: 13px; }
.lc-rk, .lc-subj label { min-width: 52px; color: var(--text-3); }
.lc-rlist { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.lc-r { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 1px 2px 1px 8px; border: 1px solid var(--rim-2); border-radius: 11px; color: var(--text); font-size: 12.5px; overflow-wrap: anywhere; }
.lc-r.other { border-color: var(--gold-rim); background: rgba(226, 194, 126, 0.08); }
.lc-r button { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); }
.lc-r button:hover { color: var(--text); }
.lc-r button .i, .lc-r button svg { width: 11px; height: 11px; }
.lc-rin, .lc-subj input { flex: 1; min-width: 160px; height: 26px; padding: 0 2px; border: 0; background: transparent; color: var(--text); font-size: 13px; }
.lc-rin:focus, .lc-subj input:focus { outline: none; }
.lc-rin.wide { flex: 1; }
.lc-rmore { display: inline-flex; gap: 8px; }
.lc-link { padding: 0; border: 0; background: none; color: var(--text-3); font-size: 12.5px; }
.lc-link:hover { color: var(--text); }
.lc-subj .sl-hint { flex-basis: 100%; margin: -2px 0 0 60px; font-size: 11.5px; }
.lc-note-hint { display: flex; align-items: center; gap: 6px; margin: 0; padding: 9px 14px; border-bottom: 1px solid var(--rim); color: var(--gold); font-size: 12.5px; }
.lc-fmt { display: flex; gap: 2px; padding: 6px 10px 0; }
.lc-fmt button { display: inline-grid; place-items: center; width: 28px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); font-size: 13px; }
.lc-fmt button:hover, .lc-fmt button:focus-visible { color: var(--text); background: var(--glass); }
.lc-fmt svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lc-fmt circle { fill: currentColor; stroke: none; }

/* ───────── The confirmation: the mail as it arrives ───────── */
.dialog.lc-confirm { width: min(620px, calc(100vw - 32px)); max-width: none; }
.lc-mail { margin-top: 14px; border: 1px solid var(--rim); border-radius: var(--radius); background: rgba(255, 255, 255, 0.02); overflow: hidden; }
.lc-mail-rcpt { margin: 0; padding: 12px 16px 8px; border-bottom: 1px solid var(--rim); }
.lc-mr { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; }
.lc-mr dt { min-width: 36px; color: var(--text-3); font-size: 12.5px; }
.lc-mr dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lc-mr .lc-r { padding-right: 8px; }
.lc-mr-note { color: var(--text-3); font-size: 11.5px; }
/* the composer: the customer missing from To */
.lc-rwarn { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 7px 14px; background: rgba(226, 194, 126, 0.08); color: var(--text); font-size: 12.5px; }
.lc-rwarn svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
/* a sent message: who it went to, from the server's record */
.lc-sent { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; margin: 2px 0 4px; font-size: 12px; color: var(--text-3); }
.lc-sent-k { margin-left: 4px; }
.lc-sent-k:first-child { margin-left: 0; }
.lc-mail-warn { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 9px 16px; border-bottom: 1px solid var(--rim); background: rgba(226, 194, 126, 0.08); color: var(--text); font-size: 12.5px; }
.lc-mail-warn svg, .lc-mail-warn .i { color: var(--gold); margin-top: 1px; }
.lc-mail-subj { display: flex; gap: 10px; align-items: baseline; padding: 10px 16px; border-bottom: 1px solid var(--rim); font-size: 13px; }
.lc-mail-subj span { min-width: 36px; color: var(--text-3); font-size: 12.5px; }
.lc-mail-subj b { font-weight: 500; overflow-wrap: anywhere; }
/* the body, the signature and the files as the recipient's mail shows them: on paper */
.lc-paper { background: #f6f6f4; color: #2a2b2e; font: 14px/1.6 Arial, Helvetica, sans-serif; }
.lc-mail-body { padding: 16px 18px 6px; max-height: 40vh; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.lc-mail-body strong { font-weight: 700; }
.lc-mail-sig { margin: 0; padding: 12px 18px 16px; border-radius: 0; }
.lc-mail-atts { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 18px 14px; border-top: 1px solid #e2e2de; color: #55565a; font-size: 12.5px; }
.lc-mail-atts span { display: inline-flex; align-items: center; gap: 5px; }
.lc-mail-atts svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lc-cf-err { margin: 12px 0 0; }
.dialog.lc-confirm { max-height: calc(100vh - 40px); overflow-y: auto; }
/* the draft line on top of the composer: who else drafts, the assistant's changes, saved or not */
.lc-draft-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 0 14px; font-size: 12px; color: var(--text-3); }
.lc-draft-bar:not(:empty) { padding-top: 8px; }
.lc-ai { display: inline-flex; align-items: center; gap: 5px; color: var(--gold); }
.lc-ai .i, .lc-ai svg { width: 13px; height: 13px; }
.lc-ai .lc-link { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--rim-2); }
.lc-dstate { margin-left: auto; }
.lc-dstate.bad { color: var(--danger); }

/* ───────── From 1001 px there is no top bar: you, the seller and the three sections sit at the top of the case-list
   column, in that order; the middle column and the assistant run the full height ───────── */
@media (min-width: 1001px) {
  .topbar { right: auto; width: var(--list); display: flex; align-items: center; gap: 6px; padding: 0 10px; }
  .topbar::after { display: none; }
  .topbar-end { order: 0; min-width: 0; }
  .sections { order: 1; margin-left: auto; gap: 0; }
  .sections a { width: 40px; }
  .tenant { min-width: 0; gap: 6px; }
  #meBtn { order: -1; flex: none; }
  .tenant-btn { min-width: 0; max-width: 140px; }
  .tenant-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu { left: 0; right: auto; }
  .assistant, .as-grip { top: 0; }
  .assist-mark { top: 10px; }
  body.has-list .main { padding-top: 26px; }
}

/* ───────── A case: its header, the conversation scrolling in between, the composer always at the bottom ───────── */
body.case-open .main { height: 100vh; height: 100dvh; overflow: hidden; padding-bottom: 14px; display: flex; flex-direction: column; }
body.case-open .main > .column { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.case-open #lcHead, body.case-open #lcFoot { flex: none; }
body.case-open #lcBody { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.08) transparent; }
body.case-open .reply { margin-top: 10px; }
body.case-open .lc-note { margin: 10px 0 0; }
/* the text grows upwards as you type, up to a limit, then scrolls; no handle to drag */
.lc-compose textarea { min-height: 76px; resize: none; overflow-y: hidden; }
.lc-big-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; margin: 0 0 4px auto; align-self: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--text-3); }
.lc-big-btn:hover, .lc-big-btn:focus-visible { color: var(--text); background: var(--glass); }
.lc-big-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* the large writing window: the same composer, lifted over the page */
.lc-big-back { position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, 0.5); animation: fade var(--fast) var(--ease); }
.reply.lc-compose.is-big { position: fixed; z-index: 60; top: 5vh; bottom: 5vh; left: 50%; width: min(920px, 94vw); margin: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; background: #181a1e; border-color: var(--rim-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); animation: fade var(--fast) var(--ease); }
.lc-compose.is-big textarea { flex: 1; min-height: 0; overflow-y: auto; }
.lc-compose.is-big .lc-chips { max-height: 25vh; overflow-y: auto; }
/* the draft line lives in the footer, beside the buttons, so nothing above ever moves */
.reply-foot .lc-draft-bar { padding: 0; min-width: 0; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.reply-foot .lc-draft-bar > span { overflow: hidden; text-overflow: ellipsis; }
/* while the large window is open, the middle column lifts above the list, the assistant and the corner menus */
body.lc-big-open .main { z-index: 61; }

/* the corner gets room to breathe: wider than the list column below it, which keeps its width */
@media (min-width: 1001px) {
  .topbar { width: calc(var(--list) + 72px); gap: 12px; padding: 0 16px; }
  .tenant { gap: 10px; }
  .tenant-btn { max-width: 200px; }
  .sections { gap: 6px; }
  .sections a { width: 44px; }
  body.has-list { --L: calc(var(--list) + 104px); }   /* the case column never runs under the corner */
}
/* the case header: dot, number and subject in one row; the conversations below */
.lc-titlerow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lc-titlerow .dot { width: 8px; height: 8px; }
.dot.closed { border: 1px solid var(--text-3); }
.lc-num { flex: none; color: var(--text-3); font-size: 13px; letter-spacing: 0.04em; }
.lc-titlerow h1.title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-payer { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: 13px; text-decoration: none; }
.lc-payer:hover { color: var(--text-2); }
.case-head .lc-lanes { margin-top: 12px; }
body.case-open .case-head { padding-bottom: 14px; }
/* the large window's button carries the accent */
.lc-big-btn { color: var(--gold); }
.lc-big-btn:hover, .lc-big-btn:focus-visible { color: var(--gold); background: rgba(226, 194, 126, 0.1); }

/* without a top bar, every page starts high; the corner keeps its room, the content never runs under it */
@media (min-width: 1001px) {
  body { --L: calc(var(--list) + 104px); }
  .main { padding-top: 26px; }
  .subtabs { top: 6px; }                                   /* level with the corner's row */
  body.has-subtabs .main { padding-top: calc(var(--subtabs) + 30px); }
  body.has-list .main { padding-top: 18px; }              /* the case's first row sits level with the corner's row */
}
/* the case's first row: number and subject in the same quiet size */
.lc-titlerow { min-height: 20px; }
.lc-titlerow h1.title { font: 500 14px/20px var(--sans); letter-spacing: 0; }
.lc-num { font-size: 14px; line-height: 20px; letter-spacing: 0.02em; }
.lc-payer { line-height: 20px; }
.case-head .lc-lanes { margin-top: 14px; }

/* the corner on the list column's own grid: the avatar where the search field starts, the three sections ending where it ends */
@media (min-width: 1001px) {
  .topbar { width: var(--list); gap: 8px; padding: 0 12px; }
  .tenant { gap: 8px; }
  .tenant-btn { max-width: none; flex: 0 1 auto; }
  .sections { gap: 2px; margin-right: -4px; }
  .sections a { width: 36px; }
  body { --L: calc(var(--list) + 40px); }
  body.has-list { --L: calc(var(--list) + 40px); }
}
/* what you write: the first row's label is a menu, marked as one */
.lc-mode { position: relative; flex: none; min-width: 52px; }
.lc-mode-btn { display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 6px 0 9px; border: 1px solid var(--rim-2); border-radius: 13px; background: var(--glass); color: var(--text-2); font-size: 12.5px; }
.lc-mode-btn:hover, .lc-mode-btn[aria-expanded="true"] { color: var(--text); border-color: var(--gold-rim); }
.lc-mode-btn svg { width: 13px; height: 13px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lc-mode-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 230px; padding: 5px; border: 1px solid var(--rim-2); border-radius: var(--radius-s);
  background: #181a1e; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); animation: pop var(--fast) var(--ease); display: flex; flex-direction: column; }
.lc-mode-menu button { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font-size: 13px; text-align: left; }
.lc-mode-menu button:hover, .lc-mode-menu button:focus-visible { background: var(--glass-2); color: var(--text); }
.lc-mode-menu button[aria-checked="true"] { color: var(--text); }
.lc-mode-menu button[aria-checked="true"]::after { content: ""; width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--gold); }
.lc-note-row .lc-note-hint { border: 0; padding: 0; }
.lc-compose .lc-rcpt:first-child { position: relative; z-index: 2; }
/* the formatting bar: slimmer, the large-window button at its end */
.lc-fmt { align-items: center; padding: 3px 8px 0 10px; }
.lc-fmt button { height: 24px; }
.lc-fmt .lc-big-btn { margin: 0 0 0 auto; width: 26px; height: 24px; }
.lc-compose textarea { padding-top: 8px; }
/* the paperclip alone, in the accent */
.lc-attach { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--gold); cursor: pointer; }
.lc-attach:hover, .lc-attach:focus-visible { background: rgba(226, 194, 126, 0.1); outline: none; }
.lc-attach svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lc-fmt .lc-big-btn, .lc-fmt .lc-big-btn:hover { color: var(--gold); }
/* Chatbot pages: the sub-tab names the page, so the content starts with its first sentence */
.column > h1.sr-only:first-child + .lede, .column > h1.sr-only:first-child + .ap-hint { margin-top: 0; }
.column > h1.sr-only:first-child + .h2 { margin-top: 0; }
/* note mode keeps the composer's height: the text gets the room of the subject row */
.lc-compose.is-note textarea { min-height: calc(76px + var(--lc-row, 41px)); }
/* a Cc or Bcc line can be closed again */
.lc-rclose { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: auto; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); }
.lc-rclose:hover, .lc-rclose:focus-visible { color: var(--text); background: var(--glass); }
.lc-rclose .i { width: 12px; height: 12px; }
/* the composer's footer: as slim as its other rows */
.lc-compose .reply-foot { padding: 5px 8px 5px 10px; }
.lc-compose .reply-foot .btn { height: 32px; }
/* Chatbot › Settings: two settings side by side when the panel is wide enough, stacked otherwise */
.ap-pairs { container-type: inline-size; }
@container (min-width: 600px) {
  .ap-pair { display: grid; grid-template-columns: 1fr 1fr; }
  .ap-pair > .field { align-content: start; }
  .ap-pair > .field + .field { border-top: 0; border-left: 1px solid var(--rim); }
}
/* the add-a-language and team-language boxes as wide as the language list */
#apLangAdd, #apTeamLang { width: 100%; max-width: none; }
/* Insights has no sub-tabs, but its line sits where the Chatbot pages' first line does, as if it had them */
.in-soon { padding-top: calc(var(--subtabs) - 4px); }
@media (max-width: 720px), (min-width: 1001px) { .in-soon { padding-top: calc(var(--subtabs) + 4px); } }
/* without a top bar, the assistant's glass runs all the way up, as it runs all the way down */
@media (min-width: 1001px) { .assistant { --as-mask-y: linear-gradient(rgba(0,0,0,0.995), rgba(0,0,0,0.995)); } }
/* Mails and signature: the automatic customer mails above the signature */
.sl-sub { margin: 6px 0 0; color: var(--text-3); font-size: 13px; }
.ml-form textarea { min-height: 76px; }
.ml-form .panel-row + .field { border-top: 0; padding-top: 0; }
.ml-temp summary { cursor: pointer; color: var(--text-2); font-size: 13px; padding: 6px 0 2px; width: max-content; }
.ml-temp[open] summary { margin-bottom: 8px; }
.ml-temp textarea { width: 100%; }
.ml-until { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ml-until span { color: var(--text-3); font-size: 13px; }
.ml-until input { width: auto; color-scheme: dark; }
.ml-temp-now { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 0; padding: 8px 12px; border: 1px solid var(--gold-rim); border-radius: 8px; color: var(--text-2); font-size: 13px; }
.ml-save .sl-hint { margin: 0; }
/* the personal menu: your mail notifications */
.menu .menu-note { margin: 2px 10px 6px; max-width: 240px; color: var(--text-3); font-size: 12px; line-height: 1.45; }
.menu button[role="menuitemradio"] > .i { color: var(--gold); }
.menu button[data-notify] > span.i { display: inline-block; flex: none; }
/* Users: each member's mail notifications, quiet */
.us-notify { color: var(--text-3); font-size: 12px; white-space: nowrap; }

/* ───────── From 1001 px the Chatbot pages are a list in the left column, under the corner, like the case list;
   every page then starts at the top ───────── */
@media (min-width: 1001px) {
  .subtabs { top: var(--top); bottom: 0; left: 0; right: auto; width: var(--list); height: auto; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .subtabs::after { display: none; }
  .subtabs-in { flex-direction: column; justify-content: flex-start; gap: 1px; height: auto; padding: 14px 8px; }
  .subtabs { pointer-events: none; }   /* only the links take clicks; the empty column below them is the page */
  .subtabs a { pointer-events: auto; }
  .subtabs a { height: 36px; padding: 0 12px; border: 1px solid transparent; border-radius: 10px; font-size: 13.5px; transition: color var(--fast) var(--ease), background var(--fast) var(--ease); }
  .subtabs a:hover { background: var(--glass-2); }
  .subtabs a[aria-current="page"] { background: var(--glass-3); border-color: var(--rim); }
  .subtabs a[aria-current="page"]::after { display: none; }
  body.has-subtabs .main { padding-top: 26px; }
  .in-soon { padding-top: 0; }
  /* Appearance stays centred on the page, clear of the list on both sides */
  body.has-subtabs .main > .column.ap-page { --w: min(1400px, calc(100% - 2 * var(--L))); }
}

/* Appearance: what the design is, then how it gets onto a page */
.ap-embed { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--rim); }
/* the assistant's field never shows a scrollbar for its placeholder; only for text taller than it may grow */
.as-input textarea { overflow-y: hidden; }
.as-input textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1001px) {
  /* the assistant's two icons on the row of the mark, at its left edge */
  .as-head { padding: 12px 64px 8px 14px; }
  /* pages start on the corner's row */
  /* the page's own scrollbar would sit right of the assistant and shift it when it comes and goes: hidden; wheel,
     trackpad and keys still scroll */
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
  .main, body.has-subtabs .main { padding-top: 17px; }
  /* Insights: the idea panel sits at the foot of the page */
  .main > .column:has(> .in-idea) { min-height: calc(100vh - 17px - 32px); display: flex; flex-direction: column; }
  body:has(.column > .in-idea) .main { padding-bottom: 32px; }
  .column > .in-idea { margin-top: auto; }
  .column > :has(+ .in-idea) { margin-bottom: 24px; }
}
.cl-set .info-tip { margin-left: -2px; }
/* a page whose title is for screen readers only starts with its first visible part, without a gap above it */
.column > .sr-only:first-child + * { margin-top: 0; }
/* Embed: the optional page address and Copy iFrame share a row, wrapping when narrow */
.ap-ifr .ap-row { flex-wrap: wrap; }
.ap-ifr .ap-ifr-in { flex: 1 1 160px; min-width: 0; }
.se-label { display: inline-flex; align-items: center; }
/* no spin buttons on number fields: amounts are typed */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* a tip near the top of the window opens downwards (util.js sets .below) */
.info-tip.below .info-pop { bottom: auto; top: calc(100% + 8px); }
/* a tip at the end of a row opens leftwards, inside the page */
.ap-ifr .info-pop { left: auto; right: -6px; transform: none; }
/* Capabilities: what the chatbot may do on its own; planned settings greyed out */
/* one layout row = one line: each setting's label right before its field, compact fields, wrapping only when narrow */
.cl-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cl-in { display: inline-flex; align-items: center; gap: 6px; }
.cl-line .cl-set input[type="number"], .cl-line .cl-set input:not([type]) { width: 68px; text-align: right; }
/* the settings use the whole card width, under the title and the switch */
.cl-row { flex-wrap: wrap; align-items: flex-start; }
.cl-body { flex: 0 0 100%; min-width: 0; }
.cl-body:empty { display: none; }
.cl-body .cl-settings { margin-top: 0; }
.cl-save { display: flex; justify-content: flex-end; }
.cl-line + .cl-line { padding-top: 12px; border-top: 1px solid var(--rim); }
/* a row with only a checkbox belongs with the fields under it: no rule between them */
.cl-line:has(.ap-check):not(:has(input:not([type="checkbox"]), select)) + .cl-line { padding-top: 0; border-top: 0; }
.cl-set .ap-check input { width: auto; height: auto; padding: 0; }

/* Appearance: light or dark previews; the stage behind the closed chat follows, as a page in that mode would */
.ap-scheme { display: inline-flex; gap: 2px; margin-left: 10px; padding: 2px; border: 1px solid var(--rim); border-radius: 999px; }
.ap-scheme button { display: inline-grid; place-items: center; width: 26px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--text-3); cursor: pointer; }
.ap-scheme button svg { width: 14px; height: 14px; }
.ap-scheme button:hover { color: var(--text); }
.ap-scheme button[aria-checked="true"] { background: var(--glass-3); color: var(--gold); }
.ap-dark .ap-open, .ap-dark .ap-stage { background: #1D2022; }
.ap-dark .ap-stage::before { background:
  linear-gradient(#2E3235, #2E3235) 0 0 / 46% 12px no-repeat, linear-gradient(#272A2D, #272A2D) 0 30px / 100% 8px no-repeat,
  linear-gradient(#272A2D, #272A2D) 0 48px / 86% 8px no-repeat, linear-gradient(#272A2D, #272A2D) 0 66px / 92% 8px no-repeat; }
/* Settings: the email confirmation, under the handover choices */
.ap-confirm { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--rim); }
#apConfirmOff { margin-left: 26px; }
/* a case whose address was given in the chat without a code: quiet, but clear */
.lc-unconfirmed { flex: none; display: inline-flex; align-items: center; padding: 1px 4px 1px 8px; border: 1px solid var(--gold-rim); border-radius: 999px; color: var(--gold); font-size: 12px; line-height: 18px; white-space: nowrap; }
.lc-unconfirmed .info-tip { margin-left: 2px; }
.lc-unconfirmed .info-btn { color: var(--gold); }
.lc-unconfirmed .info-pop { left: auto; right: -6px; transform: none; top: calc(100% + 8px); bottom: auto; }
/* the assistant's conversations: a quiet "Pinned" group on top; per conversation a small menu; rename inline */
.as-group { margin: 2px 10px 4px; color: var(--text-3); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; }
.as-group-rest { height: 1px; margin: 8px 10px; background: var(--rim); }
.as-conv { position: relative; }
.as-conv-menu { opacity: 0; transition: opacity var(--fast) var(--ease); }
.as-conv:hover .as-conv-menu, .as-conv-menu:focus-visible, .as-conv.is-menu .as-conv-menu, .as-conv.is-current .as-conv-menu { opacity: 1; }
@media (hover: none) { .as-conv-menu { opacity: 1; } }
.as-conv-pop { position: absolute; z-index: 5; right: 4px; top: calc(100% - 4px); display: grid; min-width: 150px; padding: 4px; border: 1px solid var(--rim-2); border-radius: 10px; background: rgba(24, 26, 30, 0.98); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); }
.as-conv-pop button { padding: 7px 10px; border: 0; border-radius: 7px; background: none; color: var(--text-2); font-size: 13px; text-align: left; cursor: pointer; }
.as-conv-pop button:hover, .as-conv-pop button:focus-visible { background: var(--glass-2); color: var(--text); outline: none; }
.as-conv-pop button.danger { color: var(--danger); }
.as-conv.is-renaming { padding: 4px; }
.as-rename { width: 100%; height: 34px; padding: 0 9px; border: 1px solid var(--gold-rim); border-radius: 8px; background: rgba(255, 255, 255, 0.04); color: var(--text); font-size: 13.5px; }
.as-rename:focus { outline: none; }

/* ── Seller › Email ── */
.em-page h2.h2:first-of-type { margin-top: 28px; }
.em-see, .em-fallback { margin-top: 0; padding: 16px 18px; }
.em-meaning { margin: 0; color: var(--text); }
.em-addr { margin-top: 12px; }
.em-addr code { font-size: 13.5px; color: var(--text); }
.em-line { margin: 12px 0 0; color: var(--text-2); font-size: 13.5px; }
.em-see .em-line:first-child, .em-fallback .em-line:first-child { margin-top: 0; }
.em-steps { display: grid; gap: 10px; }
.em-step { border: 1px solid var(--rim); border-radius: var(--radius); background: rgba(255, 255, 255, 0.018); }
.em-step.open { border-color: var(--rim-2); background: rgba(255, 255, 255, 0.03); }
.em-step-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 18px; border: 0; background: none; color: var(--text); font: 500 14px/1.3 var(--sans); text-align: left; cursor: pointer; }
.em-step-head .grow { flex: 1; min-width: 0; }
.em-step.locked:not(.open) .em-step-head { color: var(--text-3); }
.em-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--rim-2); border-radius: 50%; font-size: 12px; color: var(--text-2); }
.em-step.open .em-num { border-color: var(--gold-rim); color: var(--gold); }
.em-chev { color: var(--text-3); transition: transform var(--fast) var(--ease); }
.em-step.open .em-chev { transform: rotate(180deg); }
.em-step-body { padding: 0 18px 18px 52px; }
.em-step-body > :first-child { margin-top: 0; }
.em-form { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.em-step-body > .em-form:first-child { margin-top: 0; }
.em-form input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--rim); border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: var(--text); }
.em-form input:focus { outline: none; border-color: var(--gold-rim); }
.em-note { margin: 8px 2px 0; }
.em-ok { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; color: #9FD3AE; font-size: 13.5px; }
.em-ok span { color: var(--text-2); }
.em-ok.sm { display: inline-flex; margin: 0 0 0 6px; vertical-align: -3px; }
.em-wait { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--text-2); font-size: 13.5px; }
.em-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: blink 1.6s ease-in-out infinite; }
.em-step-body .sl-err { margin-top: 12px; }
.em-actions { display: flex; gap: 10px; margin-top: 14px; }
.em-dns { margin-top: 12px; border: 1px solid var(--rim); border-radius: 10px; overflow: hidden; font-size: 12.5px; }
.em-dns-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.6fr); gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--rim); }
.em-dns-row:first-child { border-top: 0; }
.em-dns-head { color: var(--text-3); font-size: 11.5px; padding-top: 7px; padding-bottom: 7px; background: rgba(0, 0, 0, 0.18); }
.em-dns-row .d { display: block; color: var(--text-3); font-size: 11.5px; }
.em-cell { display: flex; align-items: center; gap: 4px; min-width: 0; }
.em-cell code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); scrollbar-width: none; }
.em-copy { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer; }
.em-copy:hover { color: var(--text); background: var(--glass-2); }
.em-how { grid-column: 1 / -1; margin: 2px 0 0; padding: 8px 10px; border: 1px solid var(--gold-rim); border-radius: 8px; background: var(--gold-wash); color: var(--text); font-size: 13px; }
.em-warn { display: flex; gap: 8px; margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(231, 201, 160, 0.35); border-radius: 10px; color: #E7C9A0; font-size: 13px; }
.em-warn p { margin: 0; }
.em-warn p + p { margin-top: 4px; }
.em-missing { margin: 6px 0 0; padding-left: 18px; color: var(--text-2); font-size: 13px; }
@media (max-width: 720px) {
  .em-step-body { padding-left: 18px; }
  .em-dns-row { grid-template-columns: minmax(0, 1fr); }
  .em-dns-head { display: none; }
}