/* Configure console visual refresh, from ChatGPT/Codex's concepts, taken in part. Load after theme-merge.css.
   Ink for controls and navigation. Chart and partner colours and the message bubbles keep their own palette. */
:root {
  --console-canvas: #fff;
  --accent-blue: var(--console-accent); /* Legacy token name, monochrome value. */
  --console-surface-subtle: #f7f7f7;
  --console-surface-hover: #ededed;
  --console-text-primary: #141414;
  --console-text-secondary: #525252;
  --console-text-tertiary: #626262;
  --console-border: #d1d1d1;
  --console-border-strong: #b5b5b5;
  --console-accent: #141414;
  --console-focus: #a3a3a3;
  --radius-md: 7px;
  --radius-lg: 10px;
  --radius-xl: 10px;
}

/* Navigation has its own quiet surface; content stays white. */
#app .topbar { border-bottom-color: var(--console-border); box-shadow: none; }
#app .sidebar {
  width: 224px;
  padding: 20px 12px;
  background: #f7f7f7;
  border-right-color: var(--console-border);
}
@media (min-width: 769px) { #app .sidebar.collapsed { width: 0; padding: 0; border-right: 0; } }
#app .acct-chip { margin-bottom: 20px; padding: 9px; border: 1px solid var(--console-border); background: white; border-radius: 8px; }
#app .acct-avatar { border-radius: 6px; background: #fff; }
#app .sidebar-label { padding: 22px 10px 8px; text-transform: none; font-size: 11px; letter-spacing: .02em; }
#app .sidebar-item { min-height: 38px; padding: 9px 10px; margin: 3px 0; border-radius: 7px; color: #525252; }
#app .sidebar-item.active { background: #141414; color: #fff; font-weight: 600; }
#app .sidebar-item.active :is(.sidebar-agent-handle, .sidebar-agent-meta, code, small) { color: #d1d1d1; }
#app .sidebar-item:hover { background: #ededed; color: #141414; }
#app .sidebar-item svg { opacity: .85; }
#app .sidebar-agent-avatar { border-radius: 6px; }
#app .main-content { min-width: 0; padding: 40px 48px 64px; scrollbar-gutter: stable; }
#app .section-content { max-width: 1160px; margin-inline: auto; }
#app .page-header { min-height: 38px; margin-bottom: 28px; gap: 16px; }
/* Previous theme declares title metrics important; these replace those only. */
#app .page-title,
#app .section h1 { font-size: 28px !important; line-height: 36px !important; letter-spacing: -.035em !important; font-weight: 600 !important; }
#app .page-sub { max-width: 68ch; line-height: 1.6; }
#app .card { border-color: var(--console-border); border-radius: 10px; box-shadow: none; margin-bottom: 20px; }
#app .card-header { padding: 16px 20px; font-size: 14px; font-weight: 600; border-bottom-color: var(--console-border); }
#app .card-body { padding: 20px; }
#app .btn { min-height: 34px; border-radius: 7px; font-size: 13px; font-weight: 500; padding: 7px 12px; box-shadow: none; }
#app .btn-primary { background: #141414; border-color: #141414; color: white; }
#app .btn-primary:hover { background: #303030; border-color: #303030; opacity: 1; }
#app .btn:disabled { cursor: not-allowed; }
#app .input { min-height: 38px; border-color: var(--console-border-strong); border-radius: 7px; font-size: 13px; }
#app .input:focus { border-color: var(--console-accent); }
#app .dashboard-tabs,
#app .qs-tabs { gap: 8px; border-bottom: 1px solid var(--console-border); margin-bottom: 28px; }
#app .dashboard-tabs button,
#app .qs-tabs button { padding: 10px 10px 12px; border-radius: 0; font-size: 13px; }
#app .dashboard-tabs button.active,
#app .qs-tabs button.active { color: var(--console-text-primary); border-bottom-color: var(--console-text-primary); background: transparent; }

/* Data surfaces share row rhythm, without touching KPI chart internals. */
#app :is(#section-dashboard, #section-keys, #section-logs, #section-usage, #section-sso, #section-support) table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
#app :is(#section-dashboard, #section-keys, #section-logs, #section-usage, #section-sso, #section-support) th { background: #f7f7f7; color: var(--console-text-secondary); font-weight: 500; }
#app :is(#section-dashboard, #section-keys, #section-logs, #section-usage, #section-sso, #section-support) :is(th, td) { border-bottom-color: var(--console-border); }
#app .table-header { background: #f7f7f7; padding: 11px 20px; color: var(--console-text-secondary); }
#app .table-row { min-height: 52px; padding: 14px 20px; border-color: var(--console-border); }
#app .table-row:hover { background: #fafafa; }
#app .table-toolbar { padding: 16px 20px; }
#app .table-pagination { padding: 14px 20px; border-color: var(--console-border); }
#app .empty-state { padding: 48px 24px; line-height: 1.6; color: var(--console-text-secondary); }
#app #logs-pagination { gap: 12px; flex-wrap: wrap; }

/* Existing metric data and meter semantics remain unchanged. */
#app .usage-grid { gap: 0; border-block: 1px solid var(--console-border); margin-bottom: 28px; }
#app .usage-card { min-width: 0; padding: 22px 20px; border: 0; border-right: 1px solid var(--console-border); border-radius: 0; background: transparent; box-shadow: none; }
#app .usage-card:last-child { border-right: 0; }
#app .usage-card-icon { margin-bottom: 12px; color: var(--console-text-tertiary); }
#app .usage-card-value { font-size: 30px; font-weight: 600; letter-spacing: -.035em; line-height: 1.2; font-variant-numeric: tabular-nums; }
#app .usage-card-label { margin-top: 6px; color: var(--console-text-secondary); font-size: 12px; }
#app .usage-meter-bar { height: 5px; border-radius: 3px; background: #ededed; }
#app .usage-meter-fill { border-radius: 3px; }
#app .usage-meter-label { gap: 8px; flex-wrap: wrap; line-height: 1.5; }

/* Onboarding: a clear reading order and a distinct instruction surface. */
#app #section-quickstart .section-content { max-width: 1040px; }
#app .handoff-headline { font-size: 28px; line-height: 1.25; letter-spacing: -.03em; }
#app .handoff-sub { max-width: 62ch; margin-bottom: 28px; }
#app .handoff-prompt { background: #141414; border-color: #141414; border-radius: 10px; }
#app .handoff-prompt:hover { background: #202020; border-color: #303030; }
#app .handoff-prompt-header { padding: 12px 18px; background: #141414; border-bottom-color: #484848; }
#app .handoff-prompt-helper { color: #d1d1d1; }
#app .handoff-prompt-body { padding: 20px; }
#app .handoff-prompt code { color: #ffffff; line-height: 1.8; }
#app .handoff-copy-btn { background: #303030; border-color: #666666; color: #ffffff; }
#app .handoff-copy-btn:hover { background: #484848; color: white; }
#app .handoff-meta { margin-top: 18px; gap: 20px; }
#app .qs-secondary { gap: 20px; margin-top: 28px; }
#app .step-card { padding: 20px; }
#app .step-number { border-radius: 6px; font-variant-numeric: tabular-nums; }
#app .qs-key-row { padding: 16px 20px; }
#app .qs-key-value { overflow-wrap: anywhere; }
#app .ca-row { padding-block: 18px; gap: 20px; }
#app .ca-code { max-width: 100%; overflow-x: auto; background: #f4f4f4; border: 1px solid var(--console-border); border-radius: 6px; line-height: 1.6; }

/* Account and agent forms use the same label/value/action spacing. */
#app .settings-row,
#app .agent-editor-row { padding: 20px; gap: 20px; border-color: var(--console-border); }
#app .settings-row > div,
#app .agent-editor-row > div { min-width: 0; }
#app .settings-label { font-size: 13px; font-weight: 500; }
#app .settings-value { margin-top: 5px; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
#app .settings-value-mono { overflow-wrap: anywhere; font-size: 12px; }
#app .agent-editor-help { max-width: 66ch; line-height: 1.6; }
#app .agent-editor-actions { gap: 8px; }
#app .key-box { border-color: var(--console-border-strong); background: #f7f7f7; border-radius: 7px; }
#app .key-value { overflow-wrap: anywhere; }

@media (min-width: 769px) and (max-width: 1199px) {
  #app .sidebar { width: 208px; }
  #app .sidebar.collapsed { width: 0; }
  #app .main-content { padding: 32px 28px 56px; }
}
@media (max-width: 768px) {
  #app .sidebar { width: 280px; padding: 60px 12px 20px; }
  #app .main-content { padding: 24px 16px 48px; scrollbar-gutter: auto; }
  /* A page's title and its one action share a row (Refresh beside Dashboard); a long title wraps the action under it. */
  #app .page-header { align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
  /* A user is two lines: who, then one quiet line of facts. The agents take what room is left and end in an ellipsis,
     so the line never wraps; the avatar is 32px plus a 10px gap, which is where the facts line starts. */
  #app .user-row { column-gap: 0; row-gap: 2px; }
  #app .user-row :is(.col-email, .col-agent, .col-count) { flex: 0 0 auto; margin: 0; font-size: 13px; color: var(--console-text-tertiary); }
  /* A real address is long: capped, it ends in an ellipsis instead of pushing the count off the line (the cap is what
     the wrapping row measures, so the line stays one line even at 320px). */
  #app .user-row .col-email { margin-left: 42px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #app .user-row .col-agent { order: 2; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #app .user-row :is(.col-agent, .col-count)::before { content: "\00B7"; margin: 0 6px; }
  #app .user-row .col-agent .chip { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; }
  #app .user-row .col-agent .chip + .chip::before { content: ", "; }
  /* On one user's page the page is about them: the Dashboard title, its Refresh and its tabs step aside, and the way back
     is a text link at the top left, where iOS puts Back. :has() keeps this true however the page was reached. */
  #app #section-dashboard:has(.user-page-head) :is(.page-header, #dashboard-tabs) { display: none; }
  #app .user-page-head { margin-bottom: 8px !important; }
  #app .user-page-head .user-back { padding: 0 !important; border: 0; background: none; box-shadow: none; font-size: 16px !important; }
  /* A panel that failed is a short notice with one way forward; the error text stays in the page for support, out of sight. */
  #app .state-block[data-icon="alert"] { padding: 24px 16px; }
  #app .state-block-detail { display: none; }
  /* An app's own actions sit under its name, side by side; each callback is one line you can copy, its actions beside it. */
  #app .oauth-client-head { flex-direction: column; }
  #app .oauth-client-actions { width: 100%; }
  #app .oauth-client-actions > * { flex: 1 1 0; justify-content: center; padding-inline: 12px; text-align: center; color: var(--console-text-primary); }
  #app .oauth-callback-row { flex-wrap: wrap; }
  #app .oauth-callback-url { flex: 1 1 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Every key reads the same: name and type, then the key with its actions on one line. */
  #app .key-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
  #app .key-row .col-name { overflow-wrap: anywhere; }
  #app .key-row :is(.col-agent, .col-actions) { margin: 0; justify-self: end; }
  #app .key-row .col-key { min-width: 0; }
  #app .page-title,
  #app .section h1 { font-size: 24px !important; line-height: 32px !important; }
  #app .section-content { min-width: 0; width: 100%; }
  #app .dashboard-tabs,
  #app .qs-tabs { gap: 8px; max-width: 100%; overflow-x: auto; }
  #app .dashboard-tabs button,
  #app .qs-tabs button { white-space: nowrap; min-height: 44px; }
  #app .btn { min-height: 44px; }
  #app .input { min-height: 44px; }
  #app .usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .usage-card { padding: 18px 12px; border-bottom: 1px solid var(--console-border); }
  #app .usage-card:nth-child(even) { border-right: 0; }
  #app .usage-card-value { font-size: 26px; }
  #app .settings-row,
  #app .agent-editor-row { padding: 16px; flex-wrap: wrap; gap: 12px; }
  #app .ca-row { flex-wrap: wrap; gap: 12px; }
  #app .ca-l { flex-basis: 100%; }
  #app .handoff-meta { flex-direction: column; gap: 10px; }
  #app .qs-secondary { grid-template-columns: minmax(0, 1fr); }
  #app .handoff-prompt-body { padding: 16px; }
  #app .handoff-headline { font-size: 24px; }
  /* a key wraps in full under its label instead of being cut off; the note goes below it */
  #app .qs-key-row { flex-wrap: wrap; }
  #app .qs-key-value { order: 1; flex-basis: 100%; white-space: normal; text-align: left; }
  #app .qs-key-row .qs-key-note { order: 2; flex-basis: 100%; max-width: none; text-align: left; }
  /* the user count and the pager share one row; they wrap instead of pushing Next past the card */
  #app .table-toolbar { flex-wrap: wrap; padding: 12px 16px; }
  #app .table-toolbar .table-pagination { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #app :is(.sidebar, .sidebar-overlay, .sidebar-item, .btn, .handoff-prompt, .handoff-copy-btn) { transition: none; }
}

/* ---- Touch screens: every control is at least 44px to a finger, and focusing a field never zooms the page.
   Buttons, chips and tabs grow for real. Compact text links keep their look and spacing; an invisible
   pad (padding with a matching negative margin, or a pseudo-element) brings their tap area to 44px. ---- */
@media (pointer: coarse) {
  #app input:not([type=checkbox]):not([type=radio]):not([type=file]), #app select, #app textarea, #app .input { font-size: 16px; }

  #app :is(.row-action, .qs-key-copy, .qs-download-btn, .handoff-copy-btn, .ask-chip, .view-toggle-btn,
    .gtm-chip, .gtm-tab, .gtm-icon-btn, .gtm-live, .support-add, .root-data-toggle, .sidebar-item, .agent-details > summary,
    .table-pagination button, .copy-btn) {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  #app :is(.sidebar-item, .agent-details > summary) { display: flex; }
  #app :is(.dashboard-tabs button, .qs-tabs button) { min-width: 44px; justify-content: center; }
  /* landscape phones and tablets get the wide layout, so the sizes the phone layout sets apply here too */
  #app :is(.btn, input.input, select.input, textarea.input[rows="1"], .cfg-select-trigger, .dashboard-tabs button, .qs-tabs button, .pulse-card-head) { min-height: 44px; }
  #app :is(.ask-send-btn, .sidebar-collapse-btn, .pulse-gid-send) { min-width: 44px; min-height: 44px; }
  #app :is(.pulse-search-input, .gtm-search, #section-gtm button.primary) { min-height: 44px; }
  #app .ask-input-wrap textarea, #app .pulse-gid-input { min-height: 44px; }
  #section-logs .page-header label { min-height: 44px; }

  /* The pad: centered on the link, never smaller than the link, never smaller than 44x44. */
  #app :is(.topbar [data-mode], .topbar-logo, .topbar-link, .pulse-plat, .settings-signout) { position: relative; }
  #app :is(.topbar [data-mode], .topbar-logo, .topbar-link, .pulse-plat, .settings-signout)::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; min-width: 44px; min-height: 44px; transform: translate(-50%, -50%);
  }
  /* the switch's row scrolls sideways on phones, which would clip the pads; full topbar height gives them room */
  #app .topbar-right { align-self: stretch; align-items: center; }
  #app .topbar [data-mode] { min-width: 44px; justify-content: center; }
  /* names cut off with an ellipsis clip their own pseudo-elements, so they take the padding pad instead */
  #app .pulse-person-name { position: relative; padding-block: 14px; margin-block: -8px; min-width: 44px; }
  #app .pulse-step { min-height: 46px; }
  #app .pulse-step-time { position: relative; display: inline-block; padding-block: 14px; margin-block: -14px; }
  #app .pulse-table-view > summary { padding-block: 14px; margin-block: -14px; }
  #app .gtm-chip { min-width: 44px; justify-content: center; }
  #app .gtm-table .col-checkbox { width: 44px; min-width: 44px; }
  #app .gtm-table thead th { height: 44px; }
  #app .gtm-table input[type=checkbox] { position: relative; }
  #app .gtm-table input[type=checkbox]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }

  #app .sidebar-agent-handle, #app .gtm-sort-arrow { font-size: 12px; }
}
/* wide Pulse tables (landscape, tablets): rows far enough apart that number links' pads don't overlap */
@media (pointer: coarse) and (min-width: 641px) {
  #app .pulse-table td { height: 44px; }
}