/* Shared paper-style top bar for authenticated application views. */
:root { --paper-grain:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23777777' opacity='.075' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); --paper-top:#f4f3ef; --paper-ink:#102447; --paper-muted:#63728a; --paper-shadow:1px 1px 0 #fff,0 3px 3px rgb(72 83 102 / .60),0 13px 16px -9px rgb(37 50 71 / .60); --ui-action-shadow:3px 8px 16px 0 rgb(0 0 0 / .50); --ui-action-shadow-hover:0 10px 20px 0 rgb(0 0 0 / .25); }
.app-topbar { min-height:54px; border:1px solid #ffffffb3; border-radius:0 0 20px 20px; background:var(--paper-grain),var(--paper-top); box-shadow:var(--paper-shadow); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 17px 0 15px; position:relative; z-index:1; }
.app-topbar::before { content:""; position:absolute; z-index:-1; left:190px; top:0; width:40%; height:39px; background:var(--paper-grain),#e6e7e5; box-shadow:0 8px 10px #4554663d; transform:skew(-48deg); border-radius:0 0 24px 0; }
.topbar-brand { align-self:stretch; display:flex; align-items:center; gap:12px; min-width:0; }
.topbar-logo { width:38px; height:38px; object-fit:contain; flex:0 0 auto; border-radius:50%; background:linear-gradient(140deg,#1686ef,#0455bb); box-shadow:1px 3px 4px #27354e55; }
.topbar-title { min-width:0; color:var(--paper-ink); font-size:17px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar-controls,.toolbar { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.segmented,.logout-btn { border:1px solid #ffffffb3; border-radius:9px; background:var(--paper-grain),var(--paper-top); box-shadow:var(--paper-shadow); }
.segmented { display:inline-flex; overflow:hidden; }
.segmented button { min-height:34px; min-width:38px; padding:0 12px; border:0; border-right:1px solid #d6d8d9; background:transparent; color:var(--paper-muted); cursor:pointer; font-weight:700; font-size:var(--ui-action-font-size,11px); }
.segmented button:last-child { border-right:0; }
.segmented button.active { background:linear-gradient(140deg,#0874ec,#075bcc); color:#fff; box-shadow:0 3px 5px #1b4c9770; border-radius:5px; }
.logout-btn { min-height:34px; padding:0 14px; color:var(--paper-muted); display:inline-flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer; font-weight:700; font-size:var(--ui-action-font-size,11px); }
.logout-btn:hover { color:var(--paper-ink); filter:brightness(1.04); border-color:#fff; }
/* Shared left-sidebar navigation: the same paper button surface as Configuration. */
.side-nav-link {
  border:1px solid #ffffffb3;
  border-radius:9px;
  background:var(--paper-grain),var(--paper-top);
  box-shadow:var(--paper-shadow);
  color:var(--paper-ink);
  text-decoration:none;
}

/*
  Dark-theme contract for every authenticated view.
  The original "paper" treatment was intentionally applied by the shared
  shell, but it also overrode the page's dark tokens.  Keep paper styling in
  light mode only and make controls, navigation, editors and transcript
  surfaces inherit the active dark palette.
*/
body[data-theme="dark"] {
  --paper-grain: none;
  --paper-top: var(--panel);
  --paper-ink: var(--text);
  --paper-muted: var(--muted);
  --paper-shadow: 0 10px 24px rgb(0 0 0 / .22);
}
body[data-theme="dark"] .app-topbar,
body[data-theme="dark"] .segmented,
body[data-theme="dark"] .logout-btn,
body[data-theme="dark"] .side-nav-link,
body[data-theme="dark"] .sidebar-footer,
body[data-theme="dark"] .profile-card,
body[data-theme="dark"] .selection-card,
body[data-theme="dark"] .ui-form-surface,
body[data-theme="dark"] .shell > aside > .nav-actions,
body[data-theme="dark"] main > aside > .nav-actions {
  background: var(--panel);
  border-color: var(--border);
  box-shadow: none;
  color: var(--text);
}
body[data-theme="dark"] .app-topbar::before {
  background: var(--panel-2);
  box-shadow: none;
}
body[data-theme="dark"] .topbar-title,
body[data-theme="dark"] .side-nav-link,
body[data-theme="dark"] .profile-card,
body[data-theme="dark"] .selection-card,
body[data-theme="dark"] .logout-btn,
body[data-theme="dark"] .segmented button {
  color: var(--text);
}
body[data-theme="dark"] .segmented button,
body[data-theme="dark"] .side-nav-link:hover,
body[data-theme="dark"] .profile-card:hover {
  border-color: var(--border);
  color: var(--text);
}
body[data-theme="dark"] .sidebar-footer:hover,
body[data-theme="dark"] .sidebar-footer:focus-within { box-shadow: 0 14px 28px rgb(0 0 0 / .28); }
body[data-theme="dark"] .ui-form-surface input:not([type="checkbox"]),
body[data-theme="dark"] .ui-form-surface select,
body[data-theme="dark"] .ui-form-surface textarea,
body[data-theme="dark"].bots-view .transcript-box,
body[data-theme="dark"].bots-view .webhook-test-output pre,
body[data-theme="dark"].bots-view .webhook-variable-list,
body[data-theme="dark"].configuration-view .ui-input,
body[data-theme="dark"].configuration-view .ui-select,
body[data-theme="dark"].creator-view .form input:not([type="checkbox"]),
body[data-theme="dark"].creator-view .form select,
body[data-theme="dark"].creator-view .form textarea,
body[data-theme="dark"].creator-view .assistant textarea,
body[data-theme="dark"].creator-view .voice-test-transfer-json,
body[data-theme="dark"].creator-view .voice-test-list,
body[data-theme="dark"].creator-view .transcript-box {
  background: var(--panel-2);
  border-color: var(--border);
  box-shadow: none;
  color: var(--text);
}
body[data-theme="dark"].bots-view main > .panel,
body[data-theme="dark"].bots-view .voice-test,
body[data-theme="dark"].bots-view .tool-form,
body[data-theme="dark"].bots-view .webhook-target-row,
body[data-theme="dark"].configuration-view main > .ui-panel,
body[data-theme="dark"].creator-view .form .panel,
body[data-theme="dark"].creator-view .form .tool-box,
body[data-theme="dark"].creator-view .form .voice-test,
body[data-theme="dark"].creator-view .assistant,
body[data-theme="dark"].creator-view .voice-test {
  background: var(--panel);
  border-color: var(--border);
  box-shadow: none;
  color: var(--text);
}
body[data-theme="dark"].bots-view main button:not(.profile-card):not(.help-icon),
body[data-theme="dark"].configuration-view .ui-button,
body[data-theme="dark"].creator-view .form .ui-button,
body[data-theme="dark"].creator-view .drafts-section .ui-button,
body[data-theme="dark"].creator-view .assistant .ui-button {
  background: var(--panel-2);
  border-color: var(--border);
  box-shadow: none;
  color: var(--text);
}
body[data-theme="dark"].bots-view main button.primary,
body[data-theme="dark"].configuration-view .ui-button--primary,
body[data-theme="dark"].creator-view .form .ui-button--primary,
body[data-theme="dark"].creator-view .drafts-section .ui-button--primary,
body[data-theme="dark"].creator-view .assistant .ui-button--primary,
body[data-theme="dark"] .side-nav-link.active,
body[data-theme="dark"] .profile-card.active,
body[data-theme="dark"] .selection-card.active {
  background: linear-gradient(140deg, #0874ec, #075bcc);
  border-color: #1685e7;
  box-shadow: 0 3px 5px #1b4c9770;
  color: #fff;
}
body[data-theme="dark"].bots-view .panel-head,
body[data-theme="dark"].bots-view .form-head,
body[data-theme="dark"].bots-view .voice-test-head,
body[data-theme="dark"].configuration-view .ui-panel-head,
body[data-theme="dark"].creator-view .assistant-head,
body[data-theme="dark"].creator-view .voice-test-head {
  border-bottom-color: var(--border);
}
/* Call dashboard: these blocks previously carried fixed paper colours. */
body[data-theme="dark"] main > header,
body[data-theme="dark"] .detail,
body[data-theme="dark"] .content > section:last-child,
body[data-theme="dark"] .content > section:last-child .compliance-panel,
body[data-theme="dark"] .content > section:last-child .milestone,
body[data-theme="dark"] .content > section:last-child .json-box {
  background: var(--panel);
  border-color: var(--border);
  box-shadow: none;
  color: var(--text);
}
body[data-theme="dark"] .detail,
body[data-theme="dark"] .content > section:last-child .compliance-panel,
body[data-theme="dark"] .content > section:last-child .milestone,
body[data-theme="dark"] .content > section:last-child .json-box,
body[data-theme="dark"] .msg.user,
body[data-theme="dark"] .msg[data-role="user"] {
  background: var(--panel-2);
  border-color: var(--border);
  color: var(--text);
}
body[data-theme="dark"] .msg.user .who,
body[data-theme="dark"] .msg[data-role="user"] .who,
body[data-theme="dark"] .content > section:last-child .badge,
body[data-theme="dark"] .content > section:last-child .compliance-label,
body[data-theme="dark"] .content > section:last-child .compliance-stat span,
body[data-theme="dark"] .milestone-desc { color: var(--muted); }
body[data-theme="dark"] .content > section:last-child .compliance-value,
body[data-theme="dark"] .content > section:last-child .compliance-stat strong,
body[data-theme="dark"] .milestone-title,
body[data-theme="dark"] .content > section:last-child .json-box summary { color: var(--text); }
body[data-theme="dark"] .content > section:last-child > .section-head,
body[data-theme="dark"] .content > section:last-child .json-box summary { border-bottom-color: var(--border); }
body[data-theme="dark"] .content > section:last-child .compliance-bar { background: rgb(255 255 255 / .12); box-shadow: none; }
body[data-theme="dark"] .content > section:last-child .compliance-stat:nth-child(1) { background: #173c34; }
body[data-theme="dark"] .content > section:last-child .compliance-stat:nth-child(2) { background: #44391d; }
body[data-theme="dark"] .content > section:last-child .compliance-stat:nth-child(3) { background: #482731; }
body[data-theme="dark"][data-calls-view="history"] .call-item {
  background: var(--panel-2);
  border-color: var(--border);
  box-shadow: none;
  color: var(--text);
}
body[data-theme="dark"][data-calls-view="history"] .call-item:hover { border-color: var(--accent); }

/* Inputs are one elevation above their card, so the editable area remains
   obvious even on the BETA dark palette. */
body[data-theme="dark"] input:not([type="checkbox"]),
body[data-theme="dark"] select,
body[data-theme="dark"] textarea {
  background: linear-gradient(180deg, #365d7b 0%, #2d4d67 100%);
  border-color: #5d89ad;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .10), inset 0 -1px 0 rgb(0 0 0 / .18);
  color: var(--text);
}
body[data-theme="dark"] input:not([type="checkbox"]):focus,
body[data-theme="dark"] select:focus,
body[data-theme="dark"] textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* Stronger editor hierarchy for Boty: section → input is intentionally two
   distinct elevations, not two near-identical navy surfaces. */
body[data-theme="dark"].bots-view .form-grid > .field {
  background: #172d3e;
  border-color: #2b4e68;
}
body[data-theme="dark"].bots-view .form-grid > .field > input,
body[data-theme="dark"].bots-view .form-grid > .field > select,
body[data-theme="dark"].bots-view .form-grid > .field > textarea,
body[data-theme="dark"].bots-view .voice-field-row > select {
  background: linear-gradient(180deg, #487393 0%, #395f7e 100%);
  border-color: #78a4c8;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 0 rgb(0 0 0 / .20);
}

body[data-theme="dark"].configuration-view .ui-panel-body.ui-form-surface,
body[data-theme="dark"].creator-view .form .panel,
body[data-theme="dark"].creator-view .form .tool-box,
body[data-theme="dark"].creator-view .assistant {
  background: #172d3e;
}
body[data-theme="dark"].configuration-view .ui-input,
body[data-theme="dark"].configuration-view .ui-select,
body[data-theme="dark"].configuration-view .ui-table input:not([type="checkbox"]),
body[data-theme="dark"].configuration-view .ui-table select,
body[data-theme="dark"].creator-view .form input:not([type="checkbox"]),
body[data-theme="dark"].creator-view .form select,
body[data-theme="dark"].creator-view .form textarea,
body[data-theme="dark"].creator-view .assistant textarea {
  background: linear-gradient(180deg, #487393 0%, #395f7e 100%);
  border-color: #78a4c8;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 0 rgb(0 0 0 / .20);
  color: var(--text);
}
body[data-theme="dark"].configuration-view .ui-table .ui-button {
  background: linear-gradient(180deg, #487393 0%, #395f7e 100%);
  border-color: #78a4c8;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 0 rgb(0 0 0 / .20);
}
.side-nav-link:hover { color:var(--paper-ink); filter:brightness(1.04); border-color:#fff; }
.side-nav-link.active { border-color:#075bcc; background:linear-gradient(140deg,#0874ec,#075bcc); color:#fff; box-shadow:0 3px 5px #1b4c9770; }
/* Keep all footer information together in a paper card at the bottom of the sidebar. */
.sidebar-footer {
  margin: auto 13px 13px;
  border: 1px solid #ffffffb3;
  border-radius: 14px;
  background: var(--paper-grain),var(--paper-top);
  box-shadow: var(--paper-shadow);
}
/* ADVICOS sidebar footer: compact logo expands to the complete company details. */
.sidebar-footer {
  height:72px;
  min-height:72px;
  padding:9px 12px;
  overflow:hidden;
  transition:height .28s ease,min-height .28s ease,box-shadow .2s ease;
}
.sidebar-footer:hover,
.sidebar-footer:focus-within {
  height:194px;
  min-height:194px;
  box-shadow:1px 1px 0 #fff,0 5px 8px #48536642,0 16px 20px -10px #2532478c;
}
.sidebar-footer-logo {
  display:block;
  width:52px;
  height:52px;
  margin:0 auto;
  object-fit:contain;
  border-radius:50%;
  box-shadow:0 2px 4px #25324759;
  transition:width .24s ease,height .24s ease,margin .24s ease,transform .24s ease;
}
.sidebar-footer:hover .sidebar-footer-logo,
.sidebar-footer:focus-within .sidebar-footer-logo {
  width:38px;
  height:38px;
  margin:0 0 7px;
  transform:translateY(-1px);
}
.sidebar-footer-details {
  opacity:0;
  transform:translateY(14px);
  pointer-events:none;
  transition:opacity .16s ease .04s,transform .24s ease .04s;
}
.sidebar-footer:hover .sidebar-footer-details,
.sidebar-footer:focus-within .sidebar-footer-details {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
@media (hover:none) {
  .sidebar-footer { height:auto; min-height:0; }
  .sidebar-footer-logo { width:38px; height:38px; margin:0 0 7px; }
  .sidebar-footer-details { opacity:1; transform:none; pointer-events:auto; }
}
/* Bot profile cards use the same paper-button surface as the sidebar navigation. */
.profile-card {
  border: 1px solid #ffffffb3;
  border-radius: 9px;
  background: var(--paper-grain),var(--paper-top);
  box-shadow: var(--paper-shadow);
  color: var(--paper-ink);
}
.profile-card:hover { color:var(--paper-ink); filter:brightness(1.04); border-color:#fff; }
.profile-card.active,
body[data-layout="alfa"] .profile-card.active {
  border-color:#075bcc;
  background:linear-gradient(140deg,#0874ec,#075bcc);
  box-shadow:0 3px 5px #1b4c9770;
  color:#fff;
}
.profile-card.active strong,.profile-card.active dd { color:#fff; }
.profile-card.active dl { color:#d7e7ff; }
/* Canonical selectable-card contract: use this class for cards that choose an item. */
.selection-card {
  border:1px solid #c5ced9;
  border-radius:9px;
  background:#f6f6f4;
  box-shadow:0 2px 4px #3b4b603d;
  color:var(--paper-ink);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,filter .12s ease;
}
.selection-card:hover { border-color:#fff; filter:brightness(1.04); transform:translateY(-1px); }
.selection-card.active { border-color:#075bcc; background:linear-gradient(140deg,#0874ec,#075bcc); box-shadow:0 3px 5px #1b4c9770; color:#fff; }
/* Shared recessed form surface, introduced from the approved UI Kit FormInput pattern. */
.ui-form-surface {
  background:var(--paper-grain),var(--paper-top);
}
.ui-form-surface input:not([type="checkbox"]),
.ui-form-surface select,
.ui-form-surface textarea {
  border-color:#ffffffb3;
  background:#fff;
  box-shadow:0 1px 0 #fff;
}
.ui-form-surface input:not([type="checkbox"]):hover,
.ui-form-surface select:hover,
.ui-form-surface textarea:hover { border-color:#fff; }
.ui-form-surface input:not([type="checkbox"]):focus,
.ui-form-surface select:focus,
.ui-form-surface textarea:focus { outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent); outline-offset:2px; }
/* Boty: apply the approved UI Kit selection-card language to real panels and actions. */
body.bots-view main > .panel,
body.bots-view .voice-test,
body.bots-view .tool-form,
body.bots-view .webhook-target-row {
  border-color:#ffffffb3;
  border-radius:12px;
  background:var(--paper-grain),var(--paper-top);
  box-shadow:var(--paper-shadow);
}
body.bots-view .panel-head,
body.bots-view .form-head,
body.bots-view .voice-test-head {
  border-bottom-color:#c5ced9;
}
body.bots-view main button:not(.profile-card):not(.help-icon) {
  border-color:#ffffffb3;
  border-radius:9px;
  background:var(--paper-grain),var(--paper-top);
  box-shadow:var(--paper-shadow);
  color:var(--paper-ink);
}
body.bots-view main button:not(.profile-card):not(.help-icon):hover:not(:disabled) {
  border-color:#fff;
  color:var(--paper-ink);
  filter:brightness(1.04);
}
body.bots-view main button.primary {
  border-color:#075bcc;
  background:linear-gradient(140deg,#0874ec,#075bcc);
  box-shadow:0 3px 5px #1b4c9770;
  color:#fff;
}
body.bots-view #saveBtn.primary:not(:disabled) {
  border-color:#c5ced9;
  background:#23845c;
  box-shadow:var(--ui-action-shadow);
  color:#fff;
}
body.bots-view main button.transfer-target-remove,
body.bots-view main button.email-target-remove,
body.bots-view main button.webhook-target-remove {
  border-color:#bc3131;
  background:linear-gradient(140deg,#e85b5b,#bc3131);
  box-shadow:0 3px 5px #8d242866;
  color:#fff;
}
body.bots-view main button:disabled { box-shadow:none; }
body.bots-view .transcript-box,
body.bots-view .webhook-test-output pre,
body.bots-view .webhook-variable-list {
  border-color:#ffffffb3;
  background:#fff;
  box-shadow:0 1px 0 #fff;
  color:var(--paper-ink);
}
/* Bot editor summary: the header hangs below the application topbar like call history. */
body.bots-view .form-shell {
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
body.bots-view .profile-summary-head {
  position:relative;
  z-index:1;
  margin:-18px -18px 16px;
  padding:16px 22px 14px;
  border:1px solid #ffffffb3;
  border-top:0;
  border-radius:0 0 18px 18px;
  background:var(--paper-grain),var(--paper-top);
  box-shadow:var(--paper-shadow);
}
body.bots-view .profile-summary-copy { min-width:0; }
body.bots-view .profile-summary-heading { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
body.bots-view .profile-summary-eyebrow { color:var(--paper-muted); font-size:11px; font-weight:800; letter-spacing:.04em; }
body.bots-view .profile-summary-title { display:block; color:var(--paper-ink); font-size:18px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.bots-view .profile-summary-actions { margin-left:auto; flex:0 0 auto; }
body.bots-view .profile-save-status {
  padding:6px 11px;
  border-radius:11px;
  background:#edf0f3;
  box-shadow:0 3px 4px #4853662e;
  color:var(--paper-muted);
  font-size:var(--ui-action-font-size,11px);
  font-weight:800;
  white-space:nowrap;
}
body.bots-view .profile-save-status.ok { background:linear-gradient(#c5ebd3,#99d6b5); box-shadow:0 3px 4px #58896e45; color:#114b38; }
body.bots-view .profile-save-status.warn { background:linear-gradient(#fff0c6,#f3d78a); color:#745000; }
body.bots-view .profile-save-status.bad { background:linear-gradient(#ffd6d6,#f2a6a6); color:#7d1919; }
body.bots-view .form-body {
  border:1px solid #ffffffb3;
  border-radius:12px;
  box-shadow:var(--paper-shadow);
}
@media(max-width:960px) {
  body.bots-view .profile-summary-head { margin:-12px -12px 12px; padding:14px; align-items:flex-start; }
  body.bots-view .profile-summary-actions { margin-left:0; }
  body.bots-view .profile-summary-title { white-space:normal; }
}
/* Configuration uses the same hanging editor summary and UI Kit panel surface as Bots. */
body.configuration-view .configuration-summary-head { position:relative; z-index:1; margin:-18px -18px 16px; padding:16px 22px 14px; border:1px solid #ffffffb3; border-top:0; border-radius:0 0 18px 18px; background:var(--paper-grain),var(--paper-top); box-shadow:var(--paper-shadow); align-items:center; }
body.configuration-view .configuration-summary-copy { min-width:0; }
body.configuration-view .configuration-summary-heading { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
body.configuration-view .configuration-summary-eyebrow { color:var(--paper-muted); font-size:11px; font-weight:800; letter-spacing:.04em; }
body.configuration-view .configuration-summary-head h1 { color:var(--paper-ink); font-size:18px; }
body.configuration-view .configuration-summary-head .muted { color:var(--paper-muted); font-size:12px; margin-top:3px; }
body.configuration-view .configuration-summary-actions { margin-left:auto; flex:0 0 auto; }
body.configuration-view .configuration-save-status { padding:6px 11px; border-radius:11px; box-shadow:0 3px 4px #58896e45; }
body.configuration-view .configuration-save-status.ok { background:linear-gradient(#c5ebd3,#99d6b5); color:#114b38; }
body.configuration-view .configuration-save-status.warn { background:linear-gradient(#fff0c6,#f3d78a); color:#745000; }
body.configuration-view .configuration-save-status.error { background:linear-gradient(#ffd6d6,#f2a6a6); color:#7d1919; }
body.configuration-view main > .ui-panel { border-color:#ffffffb3; border-radius:12px; background:var(--paper-grain),var(--paper-top); box-shadow:var(--paper-shadow); }
body.configuration-view .ui-panel-head { border-bottom-color:#c5ced9; background:transparent; }
body.configuration-view .ui-panel-body.ui-form-surface { background:var(--paper-grain),var(--paper-top); }
body.configuration-view .ui-button { border-color:#ffffffb3; border-radius:9px; background:var(--paper-grain),var(--paper-top); box-shadow:var(--paper-shadow); color:var(--paper-ink); }
body.configuration-view .ui-button--primary { border-color:#075bcc; background:linear-gradient(140deg,#0874ec,#075bcc); box-shadow:0 3px 5px #1b4c9770; color:#fff; }
body.configuration-view .ui-input,body.configuration-view .ui-select { border-color:#ffffffb3; background:#fff; box-shadow:0 1px 0 #fff; color:var(--paper-ink); }
@media(max-width:980px) { body.configuration-view .configuration-summary-head { margin:-12px -12px 12px; padding:14px; align-items:flex-start; } body.configuration-view .configuration-summary-actions { margin-left:0; } }
/* Creator adopts the UI Kit surface and the same hanging editor header as Bots. */
body.creator-view .creator-summary-head { position:sticky; top:-16px; z-index:5; margin:-16px -16px 16px; padding:16px 18px 14px; border:1px solid #ffffffb3; border-top:0; border-radius:0 0 18px 18px; background:var(--paper-grain),var(--paper-top); box-shadow:var(--paper-shadow); }
body.creator-view .creator-summary-copy { min-width:0; }
body.creator-view .creator-summary-eyebrow { display:block; margin-bottom:4px; color:var(--paper-muted); font-size:11px; font-weight:800; letter-spacing:.04em; }
body.creator-view .creator-summary-head h2 { margin:0; color:var(--paper-ink); font-size:18px; }
body.creator-view .creator-draft-id { display:inline-block; margin-top:5px; color:var(--paper-muted); font:700 11px/1.2 ui-monospace,Consolas,monospace; }
body.creator-view .creator-summary-actions { margin-left:auto; flex:0 0 auto; }
body.creator-view #generatedProfilePanel.generation-ready { animation:creator-generation-ready 1.8s ease-out; }
@keyframes creator-generation-ready { 0% { box-shadow:0 0 0 0 #1685e766, var(--paper-shadow); border-color:#1685e7; } 100% { box-shadow:var(--paper-shadow); } }
body.creator-view .generated-profile-notice { margin:0 0 10px; padding:10px 12px; border:1px solid #8ed8b7; border-radius:9px; background:#e4f8ee; color:#126342; font-size:13px; font-weight:700; box-shadow:0 1px 0 #fff; }
body.creator-view .publish-profile-btn { border-color:#16734e; background:linear-gradient(140deg,#2ab77a,#16734e); box-shadow:0 3px 5px #12634270; color:#fff; }
body.creator-view .publish-profile-btn:hover:not(:disabled) { filter:brightness(1.06); }
body.creator-view .form .ui-button { border-radius:9px; border-color:#ffffffb3; background:var(--paper-grain),var(--paper-top); box-shadow:var(--paper-shadow); color:var(--paper-ink); }
body.creator-view .form .ui-button--primary { border-color:#075bcc; background:linear-gradient(140deg,#0874ec,#075bcc); box-shadow:0 3px 5px #1b4c9770; color:#fff; }
body.creator-view .form .ui-button--danger { border-color:#bc3131; background:linear-gradient(140deg,#e85b5b,#bc3131); box-shadow:0 3px 5px #8d242866; color:#fff; }
body.creator-view .drafts-section .ui-button,body.creator-view .assistant .ui-button { border-color:#ffffffb3; border-radius:9px; background:var(--paper-grain),var(--paper-top); box-shadow:var(--paper-shadow); color:var(--paper-ink); }
body.creator-view .drafts-section .ui-button--primary,body.creator-view .assistant .ui-button--primary { border-color:#075bcc; background:linear-gradient(140deg,#0874ec,#075bcc); box-shadow:0 3px 5px #1b4c9770; color:#fff; }
body.creator-view .form .panel,body.creator-view .form .tool-box,body.creator-view .form .voice-test,body.creator-view .assistant { border-color:#ffffffb3; border-radius:12px; background:var(--paper-grain),var(--paper-top); box-shadow:var(--paper-shadow); }
body.creator-view .form input:not([type="checkbox"]),body.creator-view .form select,body.creator-view .form textarea,body.creator-view .assistant textarea { border-color:#ffffffb3; background:#fff; box-shadow:0 1px 0 #fff; color:var(--paper-ink); }
body.creator-view .assistant-head { border-bottom-color:#c5ced9; background:transparent; }
body.creator-view .draft-row { display:block; }
body.creator-view .draft-item.selection-card { min-height:58px; width:100%; grid-template-columns:30px minmax(0,1fr); gap:9px; align-items:center; }
body.creator-view .draft-item.selection-card:hover { border-color:#fff; filter:brightness(1.04); }
body.creator-view .draft-item.selection-card.active { border-color:#075bcc; background:linear-gradient(140deg,#0874ec,#075bcc); box-shadow:0 3px 5px #1b4c9770; color:#fff; }
body.creator-view .draft-card-icon { display:grid; width:28px; height:28px; place-items:center; border-radius:50%; font-size:16px; font-weight:900; }
body.creator-view .draft-card-copy { display:grid; gap:3px; min-width:0; }
body.creator-view .draft-item--incomplete { border-left:4px solid #e7a02c; }
body.creator-view .draft-item--incomplete .draft-card-icon { background:#fff0cc; color:#a45c00; }
body.creator-view .draft-item--ready { border-left:4px solid #1678d3; }
body.creator-view .draft-item--ready .draft-card-icon { background:#dcecff; color:#075bcc; }
body.creator-view .draft-item--generated { border-left:4px solid #23845c; }
body.creator-view .draft-item--generated .draft-card-icon { background:#dff5e8; color:#16734e; }
body.creator-view .draft-item.active .draft-card-icon { background:#ffffff2c; color:#fff; }
body.creator-view .draft-item.active .small { color:#dceaff; }
body.creator-view .chat-message {
  border-color:#ffffffb3;
  border-radius:12px;
  box-shadow:var(--paper-shadow);
}
body.creator-view .chat-message.user {
  background:var(--paper-grain),var(--paper-top);
  color:var(--paper-ink);
  border-radius:16px 16px 4px 16px;
  margin-left:28px;
}
body.creator-view .chat-message.assistant {
  border-color:#075bcc;
  background:linear-gradient(140deg,#0874ec,#075bcc);
  box-shadow:0 3px 6px #1b4c9770;
  color:#fff;
  border-radius:16px 16px 16px 4px;
  margin-right:28px;
}
body.creator-view .voice-test {
  margin-top:18px;
  border:1px solid #ffffffb3;
  border-radius:14px;
  background:var(--paper-grain),var(--paper-top);
  box-shadow:var(--paper-shadow);
}
body.creator-view .voice-test-head { padding:14px 16px; border-bottom:1px solid #c5ced9; background:transparent; }
body.creator-view .voice-test-body { padding:14px; gap:14px; }
body.creator-view .voice-test-transfer-json { margin:12px 14px 0; border:1px solid #ffffffb3; border-radius:9px; background:#fff; box-shadow:0 1px 0 #fff; }
body.creator-view .voice-test-transfer-json summary { padding:10px 12px; cursor:pointer; color:var(--paper-ink); font-size:12px; font-weight:800; }
body.creator-view .voice-test-transfer-json pre { margin:0; padding:0 12px 12px; overflow:auto; color:var(--paper-ink); font-size:11px; white-space:pre-wrap; }
body.creator-view .voice-test-list,
body.creator-view .transcript-box { border-color:#ffffffb3; border-radius:10px; background:#fff; box-shadow:0 1px 0 #fff; }
body.creator-view .transcript-box { display:grid; align-content:start; gap:10px; padding:12px; }
body.creator-view .voice-chat-message { display:grid; gap:4px; max-width:88%; padding:10px 12px; border:1px solid #ffffffb3; box-shadow:var(--paper-shadow); font-size:13px; line-height:1.45; }
body.creator-view .voice-chat-message.user { margin-left:auto; border-radius:16px 16px 4px 16px; background:var(--paper-grain),var(--paper-top); color:var(--paper-ink); }
body.creator-view .voice-chat-message.assistant { margin-right:auto; border-color:#075bcc; border-radius:16px 16px 16px 4px; background:linear-gradient(140deg,#0874ec,#075bcc); box-shadow:0 3px 6px #1b4c9770; color:#fff; }
body.creator-view .voice-chat-role { font-size:10px; font-weight:800; opacity:.78; }
body.creator-view .voice-chat-content { white-space:pre-wrap; }
body.creator-view .voice-test-item { border-color:#ffffffb3; border-radius:8px; background:var(--paper-grain),var(--paper-top); box-shadow:var(--paper-shadow); color:var(--paper-ink); }
body.creator-view .voice-test-item.active { border-color:#075bcc; background:linear-gradient(140deg,#0874ec,#075bcc); box-shadow:0 3px 5px #1b4c9770; color:#fff; }
body.creator-view .assistant-confirmation-actions { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 2px auto; }
body.creator-view .assistant-confirmation-actions .ui-button { border-color:#ffffffb3; border-radius:9px; background:var(--paper-grain),var(--paper-top); box-shadow:var(--paper-shadow); color:var(--paper-ink); }
body.creator-view .assistant-confirmation-actions .ui-button--primary { border-color:#237e58; background:linear-gradient(140deg,#36b979,#237e58); box-shadow:0 3px 5px #1d684a70; color:#fff; }
body.creator-view .field-pending {
  border-color:#df8a00;
  background:#fff0cc;
  box-shadow:inset 3px 0 0 #df8a00,0 0 0 3px #f5a62338;
  animation:creator-field-proposed 1.35s ease-out both;
}
body.creator-view .field-confirmed {
  border-color:#237e58;
  background:#dff5e8;
  box-shadow:inset 3px 0 0 #237e58,0 0 0 2px #36b97930;
  animation:creator-field-confirmed 2.1s ease both;
}
@keyframes creator-field-proposed {
  0% { border-color:#fff0c6; background:#fffdf8; box-shadow:0 0 0 0 #f5a62300; }
  65% { border-color:#df8a00; background:#fff0cc; box-shadow:inset 3px 0 0 #df8a00,0 0 0 7px #f5a62355; }
  100% { border-color:#df8a00; background:#fff0cc; box-shadow:inset 3px 0 0 #df8a00,0 0 0 3px #f5a62338; }
}
@keyframes creator-field-confirmed {
  0% { border-color:#df8a00; background:#fff0cc; box-shadow:inset 3px 0 0 #df8a00,0 0 0 5px #f5a62348; }
  42% { border-color:#df8a00; background:#fff0cc; box-shadow:inset 3px 0 0 #df8a00,0 0 0 1px #f5a62320; }
  100% { border-color:#237e58; background:#dff5e8; box-shadow:inset 3px 0 0 #237e58,0 0 0 2px #36b97930; }
}
@media(max-width:960px) { body.creator-view .creator-summary-head { top:-12px; margin:-12px -12px 12px; padding:14px; align-items:flex-start; } body.creator-view .creator-summary-actions { margin-left:0; } }
body[data-theme="dark"] .app-topbar,body[data-theme="dark"] .segmented,body[data-theme="dark"] .logout-btn { --paper-top:#283344; --paper-ink:#edf3fc; --paper-muted:#b1bfd1; --paper-shadow:0 4px 9px rgb(0 0 0 / .60); }
body[data-theme="dark"] .app-topbar::before { background:var(--paper-grain),#354256; }
/* All action variants share the approved paper-button depth, regardless of color. */
.segmented button.active,
.side-nav-link.active,
.profile-card.active,
.selection-card.active,
body.bots-view main button.primary,
body.bots-view #saveBtn.primary:not(:disabled),
body.bots-view main button.transfer-target-remove,
body.bots-view main button.email-target-remove,
body.bots-view main button.webhook-target-remove,
body.configuration-view .ui-button--primary,
body.creator-view .publish-profile-btn,
body.creator-view .form .ui-button--primary,
body.creator-view .form .ui-button--danger,
body.creator-view .drafts-section .ui-button--primary,
body.creator-view .assistant .ui-button--primary,
body.creator-view .draft-item.selection-card.active,
body.creator-view .voice-test-item.active,
body.creator-view .assistant-confirmation-actions .ui-button--primary { border-color:#ffffffb3; box-shadow:var(--paper-shadow); }
/* This action is intentionally green; it must override the generic Creator form button surface. */
body.creator-view .form .publish-profile-btn:not(:disabled) {
  border-color:#c5ced9;
  background:#23845c;
  box-shadow:var(--paper-shadow);
  color:#fff;
}
/* Shared action-button contract: colors remain defined by each view or variant. */
body.bots-view main button:not(.profile-card):not(.help-icon),
.logout-btn,
body.creator-view .form .ui-button,
body.creator-view .drafts-section .ui-button,
body.creator-view .assistant .ui-button,
body.configuration-view .ui-button {
  border-width:1px;
  border-radius:10px;
  padding:10px 16px;
  gap:.5rem;
  font-size:var(--ui-action-font-size,11px);
  font-weight:600;
  letter-spacing:0;
  transition:all 180ms ease;
  box-shadow:3px 8px 16px 0 rgb(0 0 0 / .50);
}
body.bots-view main button:not(.profile-card):not(.help-icon):hover:not(:disabled),
.logout-btn:hover,
body.creator-view .form .ui-button:hover:not(:disabled),
body.creator-view .drafts-section .ui-button:hover:not(:disabled),
body.creator-view .assistant .ui-button:hover:not(:disabled),
body.configuration-view .ui-button:hover:not(:disabled) {
  filter:brightness(1.05);
  transform:translateY(-1px);
  box-shadow:0 10px 20px 0 rgb(0 0 0 / .25);
}
body.bots-view main button:not(.profile-card):not(.help-icon):focus-visible,
.logout-btn:focus-visible,
body.creator-view .ui-button:focus-visible,
body.configuration-view .ui-button:focus-visible {
  outline:none;
  box-shadow:0 0 0 3px rgb(59 130 246 / .35),3px 8px 16px 0 rgb(0 0 0 / .50);
}
/* The Bots save action is a legacy raw button, so it needs this final explicit contract. */
body.bots-view #saveBtn.primary:not(:disabled) {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:10px 16px;
  border:1px solid #c5ced9;
  border-radius:10px;
  background:#23845c;
  box-shadow:var(--ui-action-shadow);
  color:#fff;
  cursor:pointer;
  font-size:var(--ui-action-font-size,11px);
  font-weight:600;
  letter-spacing:0;
  transition:all 180ms ease;
}
body.bots-view #saveBtn.primary:not(:disabled):hover {
  filter:brightness(1.05);
  transform:translateY(-1px);
  box-shadow:0 10px 20px 0 rgb(0 0 0 / .25) !important;
}
body.bots-view #saveBtn.primary:not(:disabled):focus-visible {
  outline:none;
  box-shadow:0 0 0 3px rgb(59 130 246 / .35),var(--ui-action-shadow);
}
.mobile-topbar-toggle { display:none; }
@media(max-width:900px) {
  .app-topbar { align-items:center; padding-top:8px; padding-bottom:8px; }
  .app-topbar::before { display:none; }
  .topbar-brand { min-width:0; }
  .topbar-controls { margin-left:auto; }
  .mobile-topbar-toggle {
    display:inline-grid;
    place-items:center;
    width:34px;
    height:34px;
    border:1px solid #ffffffb3;
    border-radius:9px;
    background:var(--paper-grain),var(--paper-top);
    box-shadow:var(--paper-shadow);
    color:var(--paper-ink);
    cursor:pointer;
    font-size:17px;
    font-weight:800;
  }
  .toolbar { display:none; }
  .app-topbar.mobile-controls-open .toolbar {
    position:absolute;
    right:8px;
    top:calc(100% + 7px);
    z-index:10;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:7px;
    width:220px;
    padding:9px;
    border:1px solid #ffffffb3;
    border-radius:12px;
    background:var(--paper-grain),var(--paper-top);
    box-shadow:var(--paper-shadow);
  }
  .app-topbar.mobile-controls-open .toolbar .segmented button:not(.active) { display:none; }
  .app-topbar.mobile-controls-open .toolbar .segmented { flex:0 0 auto; }
  .app-topbar.mobile-controls-open .toolbar .segmented button.active { border-radius:6px; }
  .app-topbar.mobile-controls-open .toolbar [data-theme] { min-width:38px; font-size:0; }
  .app-topbar.mobile-controls-open .toolbar [data-theme]::after { font-size:18px; }
  .app-topbar.mobile-controls-open .toolbar [data-theme="light"]::after { content:"☀"; }
  .app-topbar.mobile-controls-open .toolbar [data-theme="dark"]::after { content:"☾"; }
  .app-topbar.mobile-controls-open .toolbar .logout-btn { min-width:calc(50% - 4px); padding:0 8px; }
  .app-topbar.mobile-controls-open .toolbar .configuration-topbar-link,
  .app-topbar.mobile-controls-open .toolbar .logout-power-button {
    position:relative;
    min-width:38px;
    width:38px;
    padding:0;
    font-size:0;
  }
  .app-topbar.mobile-controls-open .toolbar .configuration-topbar-link {
    border-color:#ffffffb3;
    background:linear-gradient(140deg,#0874ec,#075bcc);
    box-shadow:var(--paper-shadow);
    color:#fff;
  }
  .app-topbar.mobile-controls-open .toolbar .configuration-topbar-link::after {
    content:"⚙";
    font-size:19px;
  }
  .app-topbar.mobile-controls-open .toolbar .logout-power-button::after {
    content:"";
    position:absolute;
    left:9px;
    top:9px;
    width:16px;
    height:16px;
    border:3px solid currentColor;
    border-top-color:transparent;
    border-radius:50%;
  }
  .app-topbar.mobile-controls-open .toolbar .logout-power-button::before {
    content:"";
    position:absolute;
    z-index:1;
    left:16px;
    top:6px;
    width:4px;
    height:12px;
    border-radius:3px;
    background:currentColor;
  }
  /* Compact horizontal navigation for views whose sidebar remains in document flow. */
  .shell > aside > .nav-actions,
  main > aside > .nav-actions {
    display:flex;
    gap:3px;
    overflow:hidden;
    padding:5px;
    border:1px solid #ffffffb3;
    border-radius:14px;
    background:var(--paper-grain),var(--paper-top);
    box-shadow:var(--paper-shadow);
  }
  .shell > aside > .nav-actions .side-nav-link,
  main > aside > .nav-actions .side-nav-link {
    display:inline-flex;
    flex:1 1 0;
    min-width:0;
    min-height:40px;
    padding:7px 3px;
    justify-content:center;
    text-align:center;
    font-size:10px;
    line-height:1.15;
    border:0;
    border-radius:9px;
    background:transparent;
    box-shadow:none;
  }
  .shell > aside > .nav-actions .side-nav-link.active,
  main > aside > .nav-actions .side-nav-link.active {
    background:linear-gradient(140deg,#0874ec,#075bcc);
    color:#fff;
    box-shadow:var(--paper-shadow);
  }
}