:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-raised: #1d212b;
  --border: #262b36;
  --text: #e4e7ec;
  --muted: #8a93a6;
  --accent: #f5a623;
  --accent-dim: #8a611c;
  --success: #34d399;
  --error: #f87171;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body, button, input, textarea, select, table {
  font-family: var(--font-ui);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.45;
}

code, pre { font-family: var(--font-mono); }

a { color: var(--accent); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.brand .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.brand small {
  color: var(--muted);
  font-weight: 400;
  font-family: var(--font-ui);
  font-size: 12px;
}

.nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  margin-left: 18px;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
}
.nav a.active, .nav a:hover { color: var(--text); border-bottom-color: var(--accent); }

.container {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 18px;
}

.panel h2 {
  margin: 0 0 4px;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.panel .hint {
  color: var(--muted);
  font-size: 12.5px;
  margin: 0 0 16px;
}

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  font-family: var(--font-ui);
  letter-spacing: 0.01em;
}
.field input:not([type=checkbox]):not([type=radio]),
.field textarea,
.field select,
.data-table input:not([type=checkbox]):not([type=radio]),
.data-table select {
  width: 100%;
  min-height: 40px;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 9px 11px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.3;
  color-scheme: dark;
}
.field select,
.data-table select {
  appearance: auto;
}
.field input:disabled,
.field textarea:disabled,
.field select:disabled,
.data-table input:disabled,
.data-table select:disabled {
  background: #141821;
  color: var(--muted);
  opacity: 1;
}
.field input:focus,
.field textarea:focus,
.field select:focus,
.data-table input:focus,
.data-table select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.field textarea { resize: vertical; min-height: 86px; line-height: 1.4; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .row { grid-template-columns: 1fr; } }

.checkbox-field { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.checkbox-field label { font-size: 13px; color: var(--text); font-family: var(--font-ui); }

button {
  background: var(--accent);
  color: #1a1300;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
button:hover { filter: brightness(1.08); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.status-line {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 10px;
}
.status-line .ok { color: var(--success); }
.status-line .err { color: var(--error); }

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.badge.set { color: var(--success); border-color: var(--success); }

/* --- Chat page --- */
.chat-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
}
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
.msg {
  max-width: 78%;
  padding: 10px 13px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.msg.user {
  background: var(--accent);
  color: #1a1300;
  margin-left: auto;
  border-bottom-right-radius: 2px;
}
.msg.bot {
  background: var(--panel-raised);
  border: 1px solid var(--border);
  margin-right: auto;
  border-bottom-left-radius: 2px;
}
.msg .meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 6px;
}
.msg img { max-width: 220px; border-radius: 6px; display: block; margin-bottom: 6px; }

.composer {
  border-top: 1px solid var(--border);
  background: var(--panel);
  padding: 14px 20px;
}
.composer-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.composer input[type=text] {
  flex: 1;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  padding: 10px 16px;
  font-size: 14px;
}
.icon-btn {
  background: var(--panel-raised);
  border: 1px solid var(--border);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
}
.icon-btn.recording { background: var(--error); color: #1a0000; border-color: var(--error); }
.send-btn { border-radius: 20px; padding: 10px 20px; }
.preview-strip {
  max-width: 760px;
  margin: 0 auto 8px;
  display: flex;
  gap: 8px;
}
.preview-chip {
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.preview-chip button {
  background: transparent;
  color: var(--muted);
  padding: 0;
  font-size: 13px;
}

.quick-actions {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chip-btn {
  background: var(--panel-raised);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.chip-btn:hover { border-color: var(--accent); }

.confirm-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.confirm-row button {
  padding: 7px 16px;
  font-size: 12.5px;
  border-radius: 6px;
}
.confirm-row .yes { background: var(--success); color: #04140d; }
.confirm-row .no { background: transparent; color: var(--text); border: 1px solid var(--border); }



/* Product suggestions are compact order rows: quantity can be typed or changed with -/+, then ✓ adds directly to cart. */
.product-reply-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  min-width: min(440px, 100%);
}
.product-reply-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(255,255,255,0.02);
}
.product-reply-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.product-reply-name {
  font-size: 12.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.product-reply-code {
  font-size: 11px;
  color: var(--muted);
}
.product-qty-box {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.product-qty-btn,
.product-accept-btn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.product-qty-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.product-qty-input {
  width: 48px;
  height: 30px;
  padding: 3px 4px;
  text-align: center;
  border-radius: 6px;
}
.product-accept-btn {
  background: var(--accent);
  color: #111;
  border: 0;
  font-weight: 800;
}
@media (max-width: 620px) {
  .product-reply-row { align-items: flex-start; }
  .product-qty-box { margin-top: 1px; }
}

/* Channel-neutral workflow choices rendered by the Web test chat. */
.reply-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.reply-options button { padding: 6px 10px; font-size: 12px; }
.reply-options select {
  min-width: 220px;
  max-width: 100%;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 12px;
}

/* --- Backoffice dashboard / client management --- */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}
.stat-label, .summary-label {
  display: block;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 11px;
  margin-bottom: 6px;
}
.stat-value {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 10px;
}
.stat-link { font-size: 12px; text-decoration: none; }
.table-wrap { width: 100%; overflow-x: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th {
  text-align: left;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  padding: 9px 10px;
  white-space: nowrap;
}
.data-table td {
  border-bottom: 1px solid var(--border);
  padding: 11px 10px;
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.table-empty { color: var(--muted); text-align: center; padding: 22px !important; }
.error-text { color: var(--error); }
.actions-column { width: 1%; white-space: nowrap; }
.table-actions { white-space: nowrap; }
.action-buttons { display: inline-flex; gap: 8px; align-items: center; justify-content: flex-end; }
.icon-action {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
}
.icon-action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.icon-action:hover { border-color: var(--accent); color: var(--accent); filter: none; }
.icon-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.button-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: b1chat-spin .8s linear infinite;
}
@keyframes b1chat-spin { to { transform: rotate(360deg); } }
.icon-action.danger:hover { border-color: var(--error); color: var(--error); }
.panel-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-heading-row .hint { margin-bottom: 0; }
.compact-row { align-items: end; }
/* Portal form actions stay compact instead of stretching across a grid column. */
.action-row { grid-template-columns: minmax(0, 1fr) auto; }
.action-row .action-field {
  min-width: 170px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}
.action-field button { width: auto; max-width: 100%; white-space: nowrap; }
.page-actions { margin: 0 0 14px; font-size: 13px; }
.client-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 16px;
}
@media (max-width: 620px) {
  .client-summary-grid { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; gap: 12px; }
  .nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 14px; }
  .nav a { margin-left: 0; }
}


/* --- Shared Backoffice controls / pagination --- */
.data-table td input:not([type=checkbox]):not([type=radio]),
.data-table td select {
  min-width: 120px;
  max-width: 100%;
}
.data-table td input[type=checkbox] {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
}
.data-table td button {
  min-height: 36px;
  white-space: nowrap;
}
.data-table td .action-buttons button,
.data-table td .action-buttons a {
  flex: 0 0 auto;
}
.pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  min-height: 36px;
}
.pager:empty { display: none; }
.pager .pager-info {
  color: var(--muted);
  font-size: 12.5px;
  margin-right: auto;
}
.pager button {
  min-width: 38px;
  min-height: 34px;
  padding: 6px 10px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.pager button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  filter: none;
}
.pager button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1300;
}
.pager button:disabled { opacity: .4; }
@media (max-width: 620px) {
  .pager { justify-content: center; }
  .pager .pager-info { width: 100%; margin-right: 0; text-align: center; }
}


/* --- Activation QR modal --- */
.modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.72); }
.modal-backdrop[hidden] { display: none !important; }
.modal-card { width: min(440px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.modal-head h2 { margin: 0; font-size: inherit; }
.qr-card { text-align: center; }
.qr-card .modal-head, .qr-card .hint { text-align: left; }
.activation-qr { display: block; width: min(320px, 85vw); height: auto; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 8px; padding: 10px; margin: 16px auto; }

/* --- Documents navigation grouping --- */
.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.nav-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 18px;
}
.nav-group > .nav-group-trigger {
  margin-left: 0;
  appearance: none;
  background: transparent;
  color: var(--muted);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0 0 4px;
  font: inherit;
  font-size: 13px;
  line-height: inherit;
  cursor: pointer;
}
.nav-group > .nav-group-trigger:hover,
.nav-group > .nav-group-trigger:focus-visible,
.nav-group.open > .nav-group-trigger,
.nav-group.active > .nav-group-trigger { color: var(--text); border-bottom-color: var(--accent); }
.nav-submenu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  display: none;
  min-width: 168px;
  padding: 6px;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,.32);
}
.nav-group:hover .nav-submenu,
.nav-group:focus-within .nav-submenu,
.nav-group.open .nav-submenu { display: block; }
.nav-submenu a {
  display: block;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  white-space: nowrap;
}
.nav-submenu a:hover,
.nav-submenu a.active {
  color: var(--text);
  background: var(--panel);
  border: 0;
}
@media (max-width: 620px) {
  .nav-group { margin-left: 0; gap: 8px; }
  .nav-submenu {
    position: static;
    display: inline-flex;
    min-width: 0;
    padding: 0;
    gap: 8px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .nav-submenu a { padding: 0 0 4px; border-radius: 0; }
  .nav-submenu a:hover,
  .nav-submenu a.active { background: transparent; border-bottom: 2px solid var(--accent); }
}
/* Platform billing / inline CardCode editor */
.table-inline-edit{display:flex;align-items:center;gap:6px;min-width:180px;}
.table-inline-edit input{min-width:105px;width:120px;margin:0;}
.table-inline-edit button{white-space:nowrap;margin:0;}
.billing-filter-row{align-items:end;}
.billing-filter-action{justify-content:flex-end;}
.billing-filter-action button{margin-bottom:0;}
.billing-details-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;}
.billing-details-head h3{margin:0;}
@media(max-width:720px){.table-inline-edit{min-width:150px;}.billing-details-head{align-items:flex-start;flex-direction:column;}}


/* --- Tenant dashboard billing usage --- */
.usage-chart {
  min-height: 230px;
}
.usage-chart-scroll {
  overflow-x: auto;
  padding: 8px 0 4px;
}
.usage-chart-bars {
  display: grid;
  grid-template-columns: repeat(12, minmax(44px, 1fr));
  gap: 10px;
  align-items: end;
  min-width: 660px;
  height: 220px;
  padding: 0 4px;
}
.usage-bar-item {
  display: grid;
  grid-template-rows: 22px 160px 28px;
  gap: 4px;
  min-width: 0;
  text-align: center;
}
.usage-bar-value {
  align-self: end;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}
.usage-bar-track {
  position: relative;
  height: 160px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to top, rgba(255,255,255,.018), rgba(255,255,255,.004));
}
.usage-bar-fill {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  min-height: 0;
  background: var(--accent);
  border-radius: 5px 5px 0 0;
}
.usage-bar-label {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.usage-filter-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto;
  gap: 14px;
  align-items: end;
  margin-top: 14px;
}
.usage-filter-row .field { margin-bottom: 14px; }
.usage-filter-action button { min-height: 40px; white-space: nowrap; }
.usage-user-table th:nth-child(n+3),
.usage-user-table td:nth-child(n+3) { text-align: right; }
.usage-user-table tfoot td {
  border-top: 1px solid var(--border);
  padding: 12px 10px;
  font-weight: 600;
}
.usage-total-row td { background: var(--panel-raised); }
@media (max-width: 620px) {
  .usage-filter-row { grid-template-columns: 1fr; gap: 0; }
  .usage-filter-action label { display: none; }
  .usage-filter-action button { width: auto; margin-bottom: 14px; }
}

/* Document Extraction JSON editors/results */
.code-input,
.code-result {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
}
.code-result {
  min-height: 220px;
  max-height: 520px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-raised);
}


/* Chat composer module icons: Document Intelligence, Document Extraction, camera, voice. */
.composer-inner .icon-btn { flex: 0 0 40px; }
@media (max-width: 720px) {
  .composer { padding: 10px 8px; }
  .composer-inner { gap: 6px; max-width: none; }
  .composer-inner .icon-btn { width: 40px; height: 40px; flex-basis: 40px; }
  .composer input[type=text] { min-width: 0; padding-left: 12px; padding-right: 12px; }
  .send-btn { padding-left: 14px; padding-right: 14px; }
}

/* Document Extraction settings/review */
.advanced-block{margin:14px 0;border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:rgba(255,255,255,.015);}
.advanced-block summary{cursor:pointer;font-weight:600;}
.advanced-content{margin-top:14px;}
.review-card{margin-top:18px;padding:16px;border:1px solid var(--border);border-radius:12px;}
.review-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;}
.review-lines td{vertical-align:top;}
.review-lines small,.muted{opacity:.72;display:block;margin-top:4px;}
.review-warning{margin-top:5px;font-size:12px;font-weight:600;}
.queue-row{cursor:pointer;}
.queue-row:hover{background:rgba(255,255,255,.035);}
.button-link{display:inline-flex;align-items:center;text-decoration:none;padding:9px 13px;border:1px solid var(--border);border-radius:8px;font-weight:600;}


/* Document Extraction review uses the available desktop width; tables remain scrollable on small screens. */
.document-extraction-review-page .container {
  max-width: 1280px;
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
}
.document-extraction-review-page .panel { width: 100%; }
.document-extraction-review-page .queue-table { min-width: 980px; }
.document-extraction-review-page .queue-table th:last-child,
.document-extraction-review-page .queue-table td:last-child { width: 178px; min-width: 178px; }
.document-extraction-review-page .queue-actions-cell { white-space: nowrap; }
.document-extraction-review-page .queue-actions {
  display: grid;
  grid-template-columns: repeat(4, 34px);
  gap: 8px;
  align-items: center;
  justify-content: start;
  width: 160px;
}
.document-extraction-review-page .queue-action-slot,
.document-extraction-review-page .queue-action-placeholder {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.document-extraction-review-page .review-lines-wrap {
  width: 100%;
  overflow: auto;
  max-height: min(62vh, 720px);
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  scrollbar-gutter: stable both-edges;
}
.document-extraction-review-page .review-lines {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}
.document-extraction-review-page .review-lines thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
}
.document-extraction-review-page .review-lines th,
.document-extraction-review-page .review-lines td {
  white-space: nowrap;
  vertical-align: middle;
}
.document-extraction-review-page .review-lines tbody tr { height: auto; }
.document-extraction-review-page .review-lines .review-col { min-width: 132px; max-width: 240px; }
.document-extraction-review-page .review-lines .review-col-index { min-width: 44px; width: 44px; max-width: 44px; text-align: center; }
/* Keep the mandatory SAP resolution field visible at the start of item rows while scrolling. */
.document-extraction-review-page .review-lines th.review-col-index,
.document-extraction-review-page .review-lines td.review-col-index {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--panel);
}
.document-extraction-review-page .review-lines th.review-col-sap-item,
.document-extraction-review-page .review-lines td.review-col-sap-item {
  position: sticky;
  left: 44px;
  z-index: 3;
  background: var(--panel);
  box-shadow: 1px 0 0 var(--border);
}
.document-extraction-review-page .review-lines thead th.review-col-index,
.document-extraction-review-page .review-lines thead th.review-col-sap-item { z-index: 4; }
.document-extraction-review-page .review-lines .review-col-description { min-width: 260px; max-width: 360px; }
.document-extraction-review-page .review-lines .review-col-barcode,
.document-extraction-review-page .review-lines .review-col-bpCatalogNumber,
.document-extraction-review-page .review-lines .review-col-manufacturerCode,
.document-extraction-review-page .review-lines .review-col-sap-item { min-width: 240px; max-width: 300px; }
.document-extraction-review-page .review-lines .review-col-quantity,
.document-extraction-review-page .review-lines .review-col-unitPrice,
.document-extraction-review-page .review-lines .review-col-discountPercent,
.document-extraction-review-page .review-lines .review-col-vatPercent,
.document-extraction-review-page .review-lines .review-col-lineTotal { min-width: 120px; max-width: 150px; }
.document-extraction-review-page .review-lines .review-col-po { min-width: 230px; max-width: 300px; }
.document-extraction-review-page .review-lines input:not([type=checkbox]) { width: 100%; min-width: 0; }
.document-extraction-review-page .sap-item-input-action { display:flex; align-items:flex-start; gap:6px; }
.document-extraction-review-page .sap-item-input-action .sap-item-code { flex:1 1 auto; min-width:0; }
.document-extraction-review-page .sap-item-input-action .sap-item-find { flex:0 0 34px; }
.document-extraction-review-page .review-cell-subtext,
.document-extraction-review-page .po-match-text {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
  opacity: .72;
}
.document-extraction-review-page .po-match-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  overflow: hidden;
}
.document-extraction-review-page .po-match-compact .po-use { flex: 0 0 auto; white-space: nowrap; }
.document-extraction-review-page .po-match-compact .po-match-text { flex: 1 1 auto; min-width: 0; margin-top: 0; }

/* Compact portal actions: icon-only for repetitive utilities, icon+text for primary actions. */
.icon-action svg,
.icon-text-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.icon-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  white-space: nowrap;
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.toolbar-icon { min-width: 36px; }

/* --- UX/accessibility hardening --- */
button { min-height: 40px; }
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button.danger-button,
.danger-button {
  background: var(--error);
  color: #1a0909;
}
.action-buttons { flex-wrap: wrap; }
.status-line:empty { display: none; }
.status-line.error { color: var(--error); }
.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.status-badge.success { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.status-badge.warning { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.status-badge.error { color: var(--error); border-color: color-mix(in srgb, var(--error) 45%, var(--border)); }
button.status-badge.status-action {
  appearance: none;
  background: transparent;
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
}
button.status-badge.status-action:hover,
button.status-badge.status-action:focus-visible {
  background: color-mix(in srgb, var(--error) 10%, transparent);
  border-color: var(--error);
  filter: none;
}
.section-actions,
.inline-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.permission-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.permission-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  white-space: nowrap;
}
.permission-toggle:has(input:disabled) { opacity: .55; }
.editor-list { display: grid; gap: 10px; margin-bottom: 12px; }
.editor-row {
  display: grid;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(255,255,255,.012);
}
.editor-row.documents { grid-template-columns: minmax(130px,.8fr) minmax(150px,1fr) 110px minmax(180px,1.4fr) auto; }
.editor-row.rules { grid-template-columns: minmax(130px,.8fr) minmax(130px,.9fr) 120px minmax(150px,1fr) 105px minmax(180px,1.3fr) auto; }
.editor-row.photos { grid-template-columns: minmax(130px,.8fr) minmax(150px,1fr) 110px 105px minmax(180px,1.3fr) auto; }
.editor-row .field { margin: 0; }
.editor-row .remove-row { min-width: 40px; padding: 8px 10px; }
.app-dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}
.app-dialog::backdrop { background: rgba(0,0,0,.7); }
.app-dialog-card { padding: 18px; }
.app-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-dialog-head h2 { margin: 0; font-size: 16px; }
.app-dialog-message { color: var(--muted); margin: 12px 0 18px; white-space: pre-line; }
.app-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.app-dialog.runtime-dialog { width: min(980px, calc(100vw - 40px)); max-width: none; }
.runtime-dialog-card .table-wrap { max-height: min(520px, calc(100vh - 250px)); overflow: auto; }

/* Document Extraction SAP item lookup: intentionally large and content-height independent. */
.app-dialog.item-lookup-dialog {
  width: min(1600px, calc(100vw - 40px));
  height: min(960px, calc(100vh - 40px));
  max-width: none;
  max-height: none;
}
.item-lookup-card {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.item-lookup-search-row { margin-top: 8px; flex: 0 0 auto; }
.item-lookup-status { min-height: 22px; flex: 0 0 auto; }
.item-lookup-results-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.item-lookup-table { width: 100%; min-width: 1040px; }
.item-lookup-table th { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.item-lookup-table td:nth-child(1) { min-width: 120px; }
.item-lookup-table td:nth-child(2) { min-width: 360px; white-space: normal; }
.item-lookup-table td:nth-child(3) { min-width: 170px; }
.item-lookup-table td:nth-child(4) { min-width: 220px; }
.item-lookup-table td:last-child { width: 96px; }
.item-lookup-pager { flex: 0 0 auto; margin-top: 10px; }
.item-lookup-pager .pager-ellipsis { color: var(--muted); padding: 0 2px; }
.item-lookup-actions { flex: 0 0 auto; margin-top: 8px; }
@media (max-width: 700px) {
  .app-dialog.item-lookup-dialog {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
  }
}
.queue-state { display: inline-flex; align-items: center; gap: 6px; }
.queue-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.queue-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.review-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.review-summary-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

@media (max-width: 900px) {
  .editor-row.documents,
  .editor-row.rules,
  .editor-row.photos { grid-template-columns: 1fr 1fr; }
  .editor-row .remove-row { width: 100%; }
}
@media (max-width: 620px) {
  .container { padding-left: 14px; padding-right: 14px; }
  .action-row { grid-template-columns: 1fr; }
  .action-row .action-field { min-width: 0; }
  .panel { padding: 16px; }
  button, .button-link { min-height: 44px; }
  .editor-row.documents,
  .editor-row.rules,
  .editor-row.photos { grid-template-columns: 1fr; }
  .app-dialog-actions { flex-direction: column-reverse; }
  .app-dialog-actions button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.settings-save-bar {
  position: sticky;
  top: 10px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: -12px 0 14px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(8px);
}
@media (max-width: 620px) { .settings-save-bar { top: 6px; } .settings-save-bar button { flex: 0 0 auto; } }

.composer-actions{display:flex;gap:6px;align-items:center;flex:0 0 auto;}

/* Icon-only editor row removal stays compact at tablet/mobile breakpoints. */
@media (max-width: 900px) {
  .editor-row .remove-row.icon-action { width: 40px; justify-self: end; }
}

/* 2026-08-20 clients/mobile UX */
.page-tabs { display:flex; gap:8px; margin:0 0 16px; border-bottom:1px solid var(--border); }
.page-tab { border-radius:8px 8px 0 0; background:transparent; border:1px solid transparent; border-bottom:0; color:var(--muted); }
.page-tab.active { color:var(--text); background:var(--panel); border-color:var(--border); }
.input-action { display:flex; align-items:stretch; gap:6px; }
.input-action input { flex:1; min-width:0; }
.grow-field { flex:1 1 420px; }
.customer-picker-card { width:min(1050px,95vw); max-width:1050px; }
.permission-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px 12px; margin-top:12px; }
.table-actions .action-buttons { flex-wrap:nowrap; white-space:nowrap; }
.mobile-edit-link { background:transparent; border:0; color:inherit; padding:0; min-height:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.clients-page .tab-pane[hidden] { display:none !important; }

/* 2026-08-20 visual supplier layout designer */
.layout-designer-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:18px; align-items:start; }
.layout-canvas { position:relative; width:100%; max-height:75vh; overflow:auto; background:#fff; border:1px solid var(--border); border-radius:8px; user-select:none; }
.layout-page-stage { position:relative; width:100%; line-height:0; }
.layout-canvas img { display:block; width:100%; height:auto; }
.layout-overlay { position:absolute; inset:0; cursor:crosshair; }
.layout-overlay.fixed-mode { cursor:default; }
.mapped-area,.drawing-area { position:absolute; border:2px solid currentColor; background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); border-radius:3px; min-height:0; padding:0; }
.mapped-area span { position:absolute; left:0; top:0; transform:translateY(-100%); background:var(--panel); color:var(--text); font-size:11px; padding:2px 4px; white-space:nowrap; border-radius:3px; }
.layout-assignment { position:sticky; top:12px; }
.annotation-list { display:grid; gap:6px; margin-top:12px; max-height:380px; overflow:auto; }
.annotation-row.fixed-assignment { border-left:3px solid var(--accent); padding-left:8px; }
.fixed-value-add { margin-top:8px; width:max-content; }
.annotation-row { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 9px; border:1px solid var(--border); border-radius:7px; font-size:12px; }
@media (max-width:900px){.layout-designer-grid{grid-template-columns:1fr}.layout-assignment{position:static}}

/* 2026-08-20 simplified portal-user administration */
.portal-module-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.portal-user-actions{display:flex;gap:6px;flex-wrap:nowrap;align-items:center}
.portal-user-modules td{padding-top:7px;padding-bottom:12px;border-top:0}
.portal-user-modules td>strong{display:inline-block;margin-right:12px;font-size:.85rem;color:var(--muted)}
.portal-user-modules .portal-module-row{display:inline-flex;vertical-align:middle}
.portal-users-table .portal-user-main td{border-bottom:0}

/* 2026-08-20 supplier layout rectangle move/resize */
.mapped-area { cursor:move; touch-action:none; z-index:2; }
.mapped-area.selected { outline:2px solid var(--text); outline-offset:2px; z-index:3; }
.resize-handle { position:absolute; width:12px; height:12px; border:2px solid var(--panel); background:var(--accent); border-radius:50%; z-index:4; touch-action:none; }
.resize-nw{left:0;top:0;transform:translate(-50%,-50%);cursor:nwse-resize}.resize-n{left:50%;top:0;transform:translate(-50%,-50%);cursor:ns-resize}.resize-ne{right:0;top:0;transform:translate(50%,-50%);cursor:nesw-resize}.resize-e{right:0;top:50%;transform:translate(50%,-50%);cursor:ew-resize}.resize-se{right:0;bottom:0;transform:translate(50%,50%);cursor:nwse-resize}.resize-s{left:50%;bottom:0;transform:translate(-50%,50%);cursor:ns-resize}.resize-sw{left:0;bottom:0;transform:translate(-50%,50%);cursor:nesw-resize}.resize-w{left:0;top:50%;transform:translate(-50%,-50%);cursor:ew-resize}
.annotation-row.annotation-selectable { cursor:pointer; }
.annotation-row.annotation-selectable.selected { outline:1px solid var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); }

.review-calculated-total {
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.4;
}
.review-calculated-total.warning { color: var(--accent); }
.module-license-grid{display:grid;grid-template-columns:repeat(2,minmax(100px,1fr));gap:4px 10px;min-width:230px}.module-license-grid label{font-size:12px;white-space:nowrap;display:flex;align-items:center;gap:5px}.module-license-grid .save-modules{grid-column:1/-1;justify-self:end}

/* 2026-08-21 compact Platform customer grid and module-scoped Clients navigation. */
.platform-customers-table-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
  overscroll-behavior-x: contain;
}
.platform-customers-table {
  min-width: 1180px;
  width: 100%;
}
.platform-customers-table th,
.platform-customers-table td {
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: middle;
}
.platform-customers-table .table-inline-edit {
  min-width: 170px;
}
.platform-customers-table .action-buttons {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: max-content;
}
.platform-customers-table .module-license-grid {
  display: grid;
  grid-template-columns: minmax(92px,auto) minmax(92px,auto) 34px;
  grid-template-rows: repeat(2, 25px);
  align-items: center;
  gap: 2px 8px;
  min-width: 245px;
}
.platform-customers-table .module-license-grid label {
  margin: 0;
  line-height: 1.15;
}
.platform-customers-table .module-license-grid .save-modules {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
}
.platform-customers-table .icon-action {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
}
.compact-page-heading { margin: 0 0 12px; }
.compact-page-heading h1 { margin: 0; font-size: 17px; line-height: 1.25; }
.module-settings-links { padding-top: 14px; padding-bottom: 14px; }
.module-settings-links .action-buttons { flex-wrap: wrap; }
.secondary-link-button {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
}
.secondary-link-button:hover { border-color: var(--accent); color: var(--accent); }

/* Supplier Layout designer: AI assist + optional multiple line areas */
.layout-assignment-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.layout-assignment-heading h3 { margin:0; }
.compact-button { min-height:32px; padding:5px 10px; width:auto; }
.line-area-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px; align-items:center; }
#lineAreaName { margin-top:6px; }

/* 2026-08-22: compact portal grids. Table-level helper text must not inherit the
   panel hint's 16px bottom margin; that was the main cause of oversized billing rows. */
.data-table { line-height: 1.25; }
.data-table th { padding: 7px 8px; }
.data-table td { padding: 7px 8px; }
.data-table .hint { margin: 2px 0 0; font-size: 11.5px; line-height: 1.25; }
.data-table td input:not([type=checkbox]):not([type=radio]),
.data-table td select { min-height: 32px; padding: 5px 8px; }
.data-table td button { min-height: 32px; }
.data-table .icon-action { width: 30px; height: 30px; min-width: 30px; }
.table-empty { padding: 14px 8px !important; }
.platform-billing-table { font-size: 12px; }
.platform-billing-table th,
.platform-billing-table td { white-space: nowrap; }
.platform-billing-table td:nth-child(2),
.platform-billing-table td:nth-child(6),
.platform-billing-table td:nth-child(7),
.platform-billing-table td:nth-child(8),
.platform-billing-table td:nth-child(10) { white-space: normal; min-width: 115px; }
.billing-details-head { margin-top: 14px; }
.pager { margin-top: 9px; min-height: 32px; }
.sync-action-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:10px; }
.sync-action-item { border:1px solid var(--border); border-radius:8px; padding:12px; display:flex; flex-direction:column; gap:7px; min-width:0; }
.sync-action-item > .hint { margin:0; flex:1 1 auto; }
.sync-action-item .action-buttons { justify-content:flex-start; }
.sync-status-block { white-space:pre-line; margin-top:12px; }
@media (max-width:760px) { .sync-action-grid { grid-template-columns:1fr; } }
.help-part { border-left:3px solid var(--accent); padding-top:16px; padding-bottom:16px; }
.help-part-kicker { color:var(--accent); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; margin-bottom:4px; }
.help-part-nav { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.help-part-nav a { color:var(--text); text-decoration:none; border:1px solid var(--border); border-radius:999px; padding:6px 10px; font-size:12px; }
.help-part-nav a:hover { border-color:var(--accent); color:var(--accent); }
.manual-note { border:1px solid var(--border); border-radius:8px; padding:12px; margin:14px 0; background:var(--panel-raised); }
.manual-note h3 { margin:0 0 8px; font-size:13px; }
.manual-note p:last-child { margin-bottom:0; }

/* Immutable catalogue thumbnails in chat product choices. */
.product-reply-thumb { width:48px; height:48px; flex:0 0 48px; object-fit:cover; border-radius:8px; border:1px solid var(--border); background:#fff; }
@media (max-width: 560px) { .product-reply-thumb { width:42px; height:42px; flex-basis:42px; } }

/* 2026-08-22: Help AI Assistant. The assistant is intentionally compact and local-first;
   the full manual remains the primary source and can be used even when AI is unavailable. */
.help-assistant-panel { border:1px solid var(--border); }
.help-assistant-head { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.help-assistant-head h2 { margin-top:0; margin-bottom:4px; }
.help-ai-mode-badge,.help-ai-answer-mode { display:inline-flex; align-items:center; white-space:nowrap; border:1px solid var(--border); border-radius:999px; padding:4px 9px; font-size:11px; font-weight:700; color:var(--muted); background:var(--panel-raised); }
.help-ai-mode-badge.ai-fallback { border-color:var(--accent); color:var(--accent); }
.help-ai-form { margin-top:12px; }
.help-ai-input-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:stretch; }
.help-ai-input-row textarea { min-height:64px; resize:vertical; margin:0; }
.help-ai-input-row button { align-self:stretch; min-width:112px; justify-content:center; }
.help-ai-quick { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.help-ai-chip { border:1px solid var(--border); background:var(--panel-raised); color:var(--text); border-radius:999px; padding:5px 9px; font-size:11.5px; font-weight:600; }
.help-ai-chip:hover { border-color:var(--accent); color:var(--accent); }
.help-ai-answer { margin-top:12px; padding:13px 14px; border:1px solid var(--border); border-radius:8px; background:var(--panel-raised); }
.help-ai-answer-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; }
.help-ai-answer-text { white-space:pre-wrap; margin:0 0 8px; }
.help-ai-answer h3 { font-size:12px; margin:11px 0 5px; }
.help-ai-answer ol,.help-ai-answer ul { margin-top:5px; margin-bottom:5px; }
.help-ai-example { margin:5px 0; padding:8px 10px; border-left:2px solid var(--accent); background:var(--panel); border-radius:4px; white-space:pre-wrap; }
.help-ai-sources { display:flex; flex-wrap:wrap; gap:7px; }
.help-ai-source { display:inline-flex; flex-wrap:wrap; align-items:center; gap:5px; border:1px solid var(--border); border-radius:6px; padding:5px 7px; font-size:11.5px; }
.help-ai-source a { text-decoration:none; }
.help-ai-direct-link { color:var(--muted); border-left:1px solid var(--border); padding-left:6px; }
@media (max-width:700px) {
  .help-assistant-head { display:block; }
  .help-ai-mode-badge { margin-top:8px; }
  .help-ai-input-row { grid-template-columns:1fr; }
  .help-ai-input-row button { min-height:38px; }
}

/* Tenant-owned chat intelligence editors */
.tenant-config-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}.tenant-config-heading h2{margin-top:0}.tenant-config-list{display:grid;gap:12px}.tenant-config-card{border:1px solid var(--border);border-radius:10px;padding:14px;background:var(--surface, #fff)}.tenant-config-card .tenant-config-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.tenant-config-card .tenant-config-title strong{font-size:1rem}.tenant-config-card .row{align-items:flex-end}.tenant-config-card textarea{min-height:74px}.tenant-config-card .credential-state{display:inline-block;margin-top:5px;font-size:.82rem}.tenant-config-empty{padding:14px;border:1px dashed var(--border);border-radius:10px;color:var(--muted);text-align:center}.compact-actions{margin:0;display:flex;gap:8px;flex-wrap:wrap}.danger-link{background:transparent!important;border:0!important;box-shadow:none!important;padding:4px 6px!important;color:var(--danger, #b42318)!important;min-height:auto!important}.tenant-config-card details{margin-top:8px}.tenant-config-card details>summary{cursor:pointer;font-weight:600}.tenant-config-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.tenant-config-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}@media(max-width:800px){.tenant-config-heading{display:block}.tenant-config-heading>.page-actions,.tenant-config-heading>button{margin-top:10px}.tenant-config-grid-3,.tenant-config-grid-2{grid-template-columns:1fr}}

/* --- Contextual field Help AI (portal settings) --- */
.field-help-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin-left: 5px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: color-mix(in srgb, var(--panel-raised) 90%, transparent);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  vertical-align: 1px;
  cursor: help;
  user-select: none;
}
.field-help-trigger:hover,
.field-help-trigger:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}
.field-help-dialog {
  width: min(700px, calc(100vw - 28px));
  max-width: none;
  max-height: min(780px, calc(100vh - 28px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}
.field-help-dialog::backdrop { background: rgba(0,0,0,.68); }
.field-help-card {
  display: flex;
  flex-direction: column;
  max-height: min(780px, calc(100vh - 28px));
  padding: 16px;
  box-sizing: border-box;
}
.field-help-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.field-help-heading { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.field-help-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}
.field-help-head h2 { margin: 1px 0 2px; font-size: 15px; }
.field-help-context { color: var(--muted); font-size: 11.5px; }
.field-help-close {
  min-width: 30px;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  flex: 0 0 30px;
}
.field-help-sensitive {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 7px;
  color: var(--accent);
  font-size: 11.5px;
  line-height: 1.4;
}
.field-help-thread {
  min-height: 140px;
  max-height: 360px;
  overflow: auto;
  padding: 12px 2px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.field-help-message {
  max-width: 92%;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 12.5px;
  line-height: 1.45;
}
.field-help-message.user {
  align-self: flex-end;
  background: color-mix(in srgb, var(--accent) 18%, var(--panel-raised));
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
}
.field-help-message.assistant {
  align-self: flex-start;
  background: var(--panel-raised);
  border: 1px solid var(--border);
}
.field-help-message-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.field-help-message-meta { margin-top: 6px; color: var(--muted); font-size: 10.5px; }
.field-help-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 9px; }
button.field-help-chip {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-raised);
  color: var(--text);
  font-size: 11px;
  font-weight: 500;
}
button.field-help-chip:hover { border-color: var(--accent); }
.field-help-composer { display: flex; gap: 7px; align-items: center; }
.field-help-composer input {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  padding: 8px 10px;
  font-family: var(--font-ui);
  font-size: 12.5px;
}
.field-help-composer input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field-help-composer button { min-height: 38px; padding: 8px 14px; }
.field-help-status { min-height: 16px; margin-top: 7px; color: var(--muted); font-size: 10.5px; }
.field-help-status.error { color: var(--error); }
@media (max-width: 620px) {
  .field-help-card { padding: 13px; }
  .field-help-thread { max-height: 320px; }
  .field-help-message { max-width: 96%; }
  .field-help-composer { align-items: stretch; }
}