:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202824;
  background: #f4f6f5;
  font-synthesis: none;
}

* { box-sizing: border-box; }
.staff-layout { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); border-top: 1px solid #d8dedb; min-height: 400px; }
.staff-directory { padding: 12px 16px 12px 0; border-right: 1px solid #d8dedb; min-width: 0; }
.staff-directory button { text-align: left; width: 100%; overflow-wrap: anywhere; }
.staff-entry { display: grid; gap: 5px; border: 0; border-bottom: 1px solid #d8dedb; background: transparent; padding: 14px 10px; color: inherit; cursor: pointer; }
.staff-entry[aria-current="true"] { background: #e5f1eb; box-shadow: inset 3px 0 #1c765d; }
.staff-entry span { font-size: 12px; color: #5d6863; }
.staff-conversation { min-width: 0; padding: 16px 0 16px 24px; }
.staff-conversation-heading { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid #d8dedb; padding-bottom: 14px; }
.staff-conversation-heading h3 { font-size: 17px; margin: 0; overflow-wrap: anywhere; }
.staff-conversation-heading p { margin: 6px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.staff-control-actions { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.staff-transcript { display: grid; gap: 0; }
.staff-message { padding: 16px 0; border-bottom: 1px solid #e2e6e4; min-width: 0; }
.staff-message header { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 13px; }
.staff-message time, .staff-message small { color: #69736e; font-size: 12px; }
.staff-message p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; font-size: 14px; margin: 8px 0 0; }
.staff-message.agent { border-left: 3px solid #7c9bb3; padding-left: 12px; }
.staff-reply-form { display: grid; gap: 10px; margin-top: 18px; }
.staff-reply-form[hidden] { display: none; }
.staff-reply-form textarea { box-sizing: border-box; width: 100%; min-width: 0; resize: vertical; font: inherit; padding: 10px; border: 1px solid #b9c8c0; border-radius: 4px; }
.staff-reply-receipts > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 10px; font-size: 13px; }
#staff-reply-status { font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .staff-layout { grid-template-columns: minmax(0, 1fr); }
  .staff-directory { padding: 0 0 12px; border-right: 0; border-bottom: 1px solid #d8dedb; max-height: 220px; overflow-y: auto; }
  .staff-conversation { padding: 16px 0; }
}
[hidden] { display: none !important; }
html, body { min-width: 320px; min-height: 100%; }
body { margin: 0; }
button, textarea, input, select { font: inherit; }
.playbook-field { display: grid; gap: 8px; margin-bottom: 12px; }
.playbook-field select { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px; border: 1px solid #cbd5ce; border-radius: 4px; font: inherit; background: #fff; color: inherit; }
.playbook-panel { padding: 20px; background: #fff; border: 1px solid #dce2df; border-radius: 6px; max-width: 1240px; margin: 16px auto 0; }
.playbook-panel .section-heading { margin-bottom: 14px; }
.playbook-save-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; margin: 16px -20px -20px; padding: 12px 20px; background: #fff; border-top: 1px solid #e5e9e7; border-radius: 0 0 6px 6px; }
.playbook-save-bar .secondary-button { min-width: 140px; }
.playbook-field textarea { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px; resize: vertical; border: 1px solid #cbd5ce; border-radius: 4px; line-height: 1.5; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #1c765d;
  outline-offset: 2px;
}

.login-view {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 24px;
  background: #edf1ef;
}
.login-panel {
  width: min(400px, 100%);
  padding: 32px;
  background: #fff;
  border: 1px solid #d8dedb;
  border-radius: 8px;
  box-shadow: 0 16px 44px rgb(24 38 32 / 10%);
}
.login-brand, .brand-row { display: flex; align-items: center; gap: 11px; }
.login-brand strong, .brand-row strong { font-size: 16px; }
.login-copy { margin: 34px 0 24px; }
.login-copy h1 { margin: 0; font-size: 24px; letter-spacing: 0; }
.login-copy p { margin: 8px 0 0; color: #6e7974; font-size: 14px; }
.login-form { display: grid; gap: 16px; }
.login-form label span,
.management-panel label > span,
.compact-field > span {
  display: block;
  margin-bottom: 6px;
  color: #5d6863;
  font-size: 12px;
  font-weight: 650;
}
.login-form input,
.management-panel input:not([type="checkbox"]),
.management-panel select {
  width: 100%;
  height: 40px;
  padding: 0 11px;
  color: #202824;
  background: #fff;
  border: 1px solid #c8d0cc;
  border-radius: 5px;
}
.login-form input:focus,
.management-panel input:focus,
.management-panel select:focus {
  border-color: #438875;
  outline: 2px solid #dcece7;
}
.management-panel input[readonly] { color: #6f7975; background: #f5f7f6; }
.login-error, .dialog-error, .workspace-error {
  padding: 9px 11px;
  color: #8b302b;
  background: #fff0ef;
  border: 1px solid #edc4c1;
  border-radius: 5px;
  font-size: 12px;
}
.login-submit {
  height: 42px;
  margin-top: 4px;
  color: #fff;
  background: #176f58;
  border: 1px solid #176f58;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
}
.login-submit:hover { background: #105d4a; }
.login-submit:disabled { cursor: wait; opacity: .6; }

.app-shell {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #f7f8f7;
}
.sidebar {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 14px 16px;
  color: #f2f5f3;
  background: #1c2421;
  border-right: 1px solid #303a36;
}
.brand-row { min-height: 40px; padding: 0 8px; }
.brand-row > div:last-child { min-width: 0; }
.brand-row strong { display: block; }
.brand-row span { display: block; margin-top: 2px; color: #9eaaa5; font-size: 11px; }
.brand-mark, .empty-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  color: #fff;
  background: #1b8063;
  border-radius: 6px;
  font-weight: 750;
}
.primary-nav { display: grid; gap: 3px; margin-top: 22px; }
.nav-group-label { margin: 14px 10px 4px; color: #7f8b86; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nav-group-label:first-child { margin-top: 0; }
.nav-icon { width: 17px; height: 17px; flex: 0 0 auto; color: #8f9b96; }
.nav-item.active .nav-icon, .nav-item:hover .nav-icon { color: #c7f0e2; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  color: #bac3bf;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
}
.nav-item:hover { color: #fff; background: #27312d; }
.nav-item.active { color: #fff; background: #303b36; border-color: #3b4842; }
.nav-glyph {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  color: #9eaaa5;
  border: 1px solid #53605a;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 750;
}
.nav-item.active .nav-glyph { color: #c7f0e2; border-color: #518e7b; background: #244c40; }
.nav-separator { height: 1px; margin: 12px 10px; background: #36413c; }
.sidebar-footer { display: grid; gap: 9px; margin-top: auto; padding: 14px 8px 0; border-top: 1px solid #35403b; }
.runtime-state { color: #b8c1bd; font-size: 11px; display: flex; align-items: center; gap: 6px; }
.runtime-label { color: #7f8b86; }
.runtime-label::after { content: ":"; }
.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  background: #d1a149;
  border-radius: 50%;
}
.status-dot.ready { background: #4fbe91; }
.status-dot.error { background: #df655f; }
.sign-out-button {
  height: 32px;
  padding: 0;
  color: #9eaaa5;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 11px;
  text-align: left;
}
.sign-out-button:hover { color: #fff; }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 73px auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  background: #f7f8f7;
}
.workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 30px;
  background: #fff;
  border-bottom: 1px solid #dde2df;
}
.workspace-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.workspace-heading > div { min-width: 0; }
.title-row { display: flex; align-items: center; gap: 9px; }
.title-row h1 { margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: 0; }
.workspace-heading p { margin: 4px 0 0; color: #74807a; font-size: 11px; }
.debug-badge {
  padding: 3px 6px;
  color: #775715;
  background: #fff4d8;
  border: 1px solid #ead49c;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}
.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-button, .send-button, .nav-toggle, .activity-replay {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.icon-button, .nav-toggle, .activity-replay { color: #56625c; background: transparent; font-size: 19px; }
.icon-button:hover, .nav-toggle:hover, .activity-replay:hover { background: #edf1ef; }
.icon-button:disabled, .activity-replay:disabled { cursor: wait; opacity: .45; }
.nav-toggle { display: none; font-size: 20px; }
.workspace-error { margin: 12px 30px 0; }
.workspace-body { min-height: 0; overflow: auto; }
.dashboard-view { display: none; min-height: 100%; padding: 28px 30px 40px; }
.dashboard-view.active { display: block; }
.page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto 20px;
}
.page-heading h2 { margin: 0; font-size: 16px; letter-spacing: 0; }
.page-heading p { margin: 5px 0 0; color: #76817c; font-size: 12px; }
.count-label { color: #63706a; font-size: 11px; font-weight: 650; }
label > span > .count-label { margin-left: 8px; font-weight: 500; }
.dashboard-view > .management-panel + .management-panel, .dashboard-view > .management-panel + .dashboard-grid, .integration-stack > .management-panel + .management-panel { margin-top: 16px; }
.section-heading > div > h3 + span, .section-heading > h3 + .count-label { margin-top: 3px; }
.section-actions { display: flex; align-items: center; gap: 8px; }
.view-toolbar { display: flex; justify-content: flex-end; max-width: 1240px; margin: -8px auto 4px; }
.view-tabs { display: flex; gap: 4px; max-width: 1240px; margin: 16px auto 0; border-bottom: 1px solid #dce2df; }
.view-tabs [role="tab"] { padding: 10px 14px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #63706a; font-size: 13px; font-weight: 650; cursor: pointer; }
.view-tabs [role="tab"]:hover { color: #1c2421; }
.view-tabs [role="tab"][aria-selected="true"] { color: #176f58; border-bottom-color: #176f58; }
[role="tabpanel"] > .playbook-panel:first-child { margin-top: 16px; }
[role="tabpanel"] > .dashboard-grid:first-child { margin-top: 16px; }
.owner-panel { margin-top: 16px; }
.owner-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.owner-row label { display: grid; gap: 6px; }
.owner-row select { width: 100%; min-width: 0; padding: 10px; border: 1px solid #cbd5ce; border-radius: 4px; background: #fff; }
@media (max-width: 720px) { .owner-row { grid-template-columns: 1fr; } }
.status-tag { display: inline-block; padding: 1px 8px; border-radius: 4px; border: 1px solid #b8cdc5; background: #f1f7f5; color: #215b4a; font-size: 11px; font-weight: 650; }
.status-tag.bad { border-color: #d9a8a2; background: #fbeeec; color: #8a2a21; }
.status-tag.pending { border-color: #d9c48f; background: #fbf3dc; color: #7a5a00; }
.status-tag.plain { border-color: #d8dedb; background: #f4f6f5; color: #5d6863; }

.management-panel {
  min-width: 0;
  padding: 20px;
  background: #fff;
  border: 1px solid #dce2df;
  border-radius: 6px;
}
.dashboard-view > .management-panel,
.dashboard-grid,
.integration-stack { max-width: 1240px; margin-right: auto; margin-left: auto; }
.dashboard-grid { display: grid; gap: 16px; margin-top: 16px; }
.two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.integration-stack { display: grid; gap: 16px; }
.section-heading, .instruction-review-header, .activity-heading-row, .integration-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.section-heading h3, .instruction-review-header h3 { margin: 0; font-size: 14px; letter-spacing: 0; }
.section-heading span, .instruction-review-header span { display: block; margin-top: 3px; color: #78837e; font-size: 10px; }
.agent-settings-fields { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.2fr); gap: 18px; }
.agent-create-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.coach-settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 8px; margin-top: 16px; }
.coach-settings > button { grid-column: 1 / -1; justify-self: end; }
#communication-identities { margin-bottom: 16px; }
#communication-identities .instruction-review-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; overflow-wrap: anywhere; font-size: 13px; }
#communication-identities .link-list:empty::before { content: "No LINE account is linked to you yet."; display: block; color: #7a8580; font-size: 12px; padding: 10px 0; }
#communication-identities .playbook-field { margin-top: 12px; }
#communication-link-status:empty { display: none; }
.instruction-review-actions { align-items: center; }
.instruction-review-actions > span { font-size: 12px; color: #7a5a00; }
#communication-link-command { width: 100%; min-width: 0; padding: 10px; border: 1px solid #c8d0cc; border-radius: 4px; }
.integration-account-row { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) minmax(140px, 2fr) auto; align-items: center; gap: 12px; padding: 12px 0; font-size: 13px; border-bottom: 1px solid #dce2df; }
.integration-account-row > * { min-width: 0; overflow-wrap: anywhere; }
.line-webhook-state { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
.line-webhook-state > span { flex: 1 1 240px; overflow-wrap: anywhere; }
@media (max-width: 640px) { .integration-account-row { grid-template-columns: minmax(0, 1fr) auto; } .integration-account-row > span { grid-column: 1; } .integration-account-row > button { grid-column: 2; grid-row: 1 / span 3; } }
#coaching-queue-list textarea { min-width: 0; padding: 10px; border: 1px solid #c8d0cc; border-radius: 4px; resize: vertical; }
.coach-settings + .coach-settings { padding-top: 16px; border-top: 1px solid #e7ebe9; }
.guidance-editor { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e7ebe9; }
.guidance-authorities { display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0; }
.guidance-responsibility-row { padding: 12px 0; border-top: 1px solid #e8ecea; }
.guidance-responsibility-row:first-child { margin-top: 14px; }
.guidance-responsibility-row strong { display: block; font-size: 12px; }
.guidance-responsibility-row p { margin: 4px 0; color: #5e6964; font-size: 11px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 18px; margin-top: 18px; }
.wide-field { grid-column: 1 / -1; }
.compact-field { width: min(260px, 45%); }
.checkbox-row, .checkbox-field, .permission-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}
.checkbox-row { margin-top: 16px; }
.checkbox-row input, .checkbox-field input, .permission-toggle input { width: 16px; height: 16px; margin: 0; accent-color: #176f58; }
.checkbox-row > span, .checkbox-field > span, .permission-toggle > span { margin: 0 !important; color: #46524c !important; font-size: 11px !important; }
.health-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.integration-health {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 0 11px;
  color: #68736e;
  background: #f6f8f7;
  border: 1px solid #e4e8e6;
  border-radius: 5px;
  font-size: 10px;
}
.integration-health strong { color: #147258; font-size: 11px; }
.integration-health strong.failed { color: #99352f; }
.diagnostic-health { padding-right: 4px; }
.diagnostic-health .secondary-button { height: 30px; }
.integration-settings-fields { margin-top: 18px; }
.integration-actions, .panel-actions, .scheduled-task-create-actions, .instruction-review-actions, .drive-space-actions, .dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.panel-actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e5e9e7; }
.integration-actions { margin-top: 16px; }
.integration-actions .danger-button, .panel-actions .danger-button { margin-right: auto; }
.drive-space-create { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; padding-top: 18px; border-top: 1px solid #e5e9e7; }
.drive-space-row, .media-extraction-row, .permission-grant-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid #e8ecea;
}
.drive-space-row p, .media-extraction-row p, .permission-grant-row p, .instruction-review-row p {
  margin: 0;
  color: #35403b;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.media-extraction-list { display: grid; margin-top: 12px; border-top: 1px solid #e8ecea; }
.instruction-review-empty { margin: 14px 0 0; color: #7a8580; font-size: 12px; }
.instruction-review-row { padding: 14px 0; border-bottom: 1px solid #e8ecea; }
.instruction-review-meta { display: block; margin-top: 5px; color: #7a8580; font-size: 10px; overflow-wrap: anywhere; }
.instruction-review-actions { margin-top: 10px; }
.instruction-review-actions .danger-button { margin-right: 0; }
.permission-toggle { cursor: pointer; }
.scheduled-task-create > summary { cursor: pointer; font-size: 14px; font-weight: 700; list-style: none; }
.scheduled-task-create > summary::before { content: "+"; display: inline-block; width: 18px; color: #176f58; font-weight: 800; }
.scheduled-task-create[open] > summary::before { content: "–"; }
.scheduled-task-create[open] > summary { margin-bottom: 18px; }
.scheduled-task-create .schedule-form-grid { margin-top: 0; }
.scheduled-task-create-actions { margin-top: 18px; }
.task-row-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.schedule-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 18px; }
.schedule-purpose { grid-column: 1 / -1; }
.task-list-panel { margin-top: 16px; }
.task-list-panel .section-heading { margin-bottom: 4px; }
.scheduled-run-list { display: grid; gap: 4px; margin-top: 9px; padding-left: 10px; color: #66716c; border-left: 2px solid #d9e3df; font-size: 10px; }
.drive-run-list { grid-column: 1 / -1; }
.activity-replay { width: 30px; height: 30px; font-size: 17px; }
.runtime-panel dl, .activity-panel dl { margin: 14px 0 0; }
.runtime-panel dl > div, .activity-panel dl > div { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid #e8ecea; }
.runtime-panel dt, .activity-panel dt { color: #7a8580; font-size: 11px; }
.runtime-panel dd, .activity-panel dd { margin: 0; color: #2c3732; font-size: 11px; text-align: right; overflow-wrap: anywhere; }
.activity-panel > p { margin: 14px 0 0; color: #7a8580; font-size: 12px; }

.primary-button, .secondary-button, .danger-button {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.primary-button { color: #fff; background: #176f58; border: 1px solid #176f58; }
.primary-button:hover { background: #105e4a; }
.secondary-button { color: #215b4a; background: #f1f7f5; border: 1px solid #b8cdc5; }
.secondary-button:hover { background: #e4f0ec; }
.danger-button { color: #96342f; background: #fff; border: 1px solid #dfb6b3; }
.primary-button:disabled, .secondary-button:disabled, .danger-button:disabled { cursor: default; opacity: .5; }

.debug-view.active { display: block; height: 100%; padding: 0; overflow: hidden; }
.debug-chat { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100%; min-height: 0; background: #fbfcfb; }
.debug-context { grid-row: 1; }
.simulation-controls { grid-row: 2; }
.debug-chat > .messages { grid-row: 3; }
.debug-chat > .composer { grid-row: 4; }
.debug-context { padding: 13px 30px; background: #fff9eb; border-bottom: 1px solid #eadfbe; }
.debug-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.debug-toolbar .spacer { flex: 1 1 auto; }
.debug-context h2 { display: inline; margin: 0; color: #5d4a20; font-size: 12px; }
.debug-context span { margin-left: 8px; color: #89764c; font-size: 10px; }
.inspector-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.inspector-filters label { display: grid; gap: 6px; font-size: 12px; flex: 1 1 180px; min-width: 0; }
.inspector-filters input, .inspector-filters select { width: 100%; min-width: 0; padding: 9px; border: 1px solid #c8d0cc; border-radius: 4px; background: #fff; }
.inspection-capture { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; font-size: 12px; }
.inspector-layout { display: grid; grid-template-columns: minmax(220px,300px) minmax(0,1fr); gap: 24px; margin-top: 16px; }
.inspector-ingress-panel { margin-top: 16px; }
.inspector-ingress-panel > summary { cursor: pointer; font-size: 14px; font-weight: 700; }
.inspection-empty { margin: 0; padding: 28px 12px; color: #7a8580; font-size: 13px; text-align: center; border: 1px dashed #d5dcd8; border-radius: 6px; }
.inspection-directory h3 { margin: 6px 0 4px; }
.inspection-capture { margin: 16px 0 0; align-items: center; }
.inspection-capture span { color: #7a8580; }
.inspector-layout > * { min-width: 0; }
.inspection-directory { border-right: 1px solid #dce2df; padding-right: 16px; }
.inspection-directory h3, #inspector-trace h3 { font-size: 14px; }
.inspection-choice { display: block; width: 100%; border: 0; border-bottom: 1px solid #dce2df; background: transparent; text-align: left; padding: 12px 6px; cursor: pointer; overflow-wrap: anywhere; font-size: 12px; }
.inspection-choice:hover, .inspection-choice[aria-pressed="true"] { background: #e5efeb; }
#inspector-trace { overflow-wrap: anywhere; }
#inspector-trace pre, #inspector-ingress pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; max-height: 420px; overflow-y: auto; background: #fff; padding: 12px; border: 1px solid #dce2df; }
#inspector-trace details, #inspector-ingress details { margin: 12px 0; border-bottom: 1px solid #dce2df; padding-bottom: 10px; }
#inspector-trace summary { cursor: pointer; font-size: 13px; }
.inspection-work { border-top: 2px solid #b3c8be; margin-top: 20px; padding-top: 12px; }
.inspection-media-actions { display: flex; gap: 8px; margin-top: 10px; }
.inspection-media-refresh { width: 36px; height: 36px; padding: 0; flex: 0 0 36px; }
.work-memory-editor { display: grid; gap: 10px; min-width: 0; }
.work-memory-editor label { display: grid; gap: 6px; font-size: 12px; }
.work-memory-editor textarea, .work-memory-editor input:not([type="checkbox"]) { width: 100%; min-width: 0; padding: 8px; border: 1px solid #c8d0cc; border-radius: 4px; font: inherit; }
.work-memory-editor input[type="checkbox"] { width: 16px; height: 16px; }
#inspector-error { color: #982b25; }
.message-trace-link { font-size: 11px; padding: 4px 0; border: 0; background: transparent; color: #287359; cursor: pointer; text-decoration: underline; }
@media (max-width: 720px) { .inspector-layout { grid-template-columns: minmax(0,1fr); } .inspection-directory { border-right: 0; padding-right: 0; } }
.chat-identities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.chat-identities > * { min-width: 0; }
.chat-identities label, .debug-context .chat-identities span { display: block; margin: 0; font-size: 11px; color: #59645e; }
.chat-identities strong { display: block; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; margin-top: 6px; }
.chat-identities select { width: 100%; min-width: 0; margin-top: 5px; padding: 7px; background: white; border: 1px solid #c8d0cc; border-radius: 4px; }
@media (max-width: 720px) { .chat-identities { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .chat-identities > label { grid-column: 1 / -1; } }
.messages { min-height: 0; overflow-y: auto; padding: 28px max(24px, calc((100% - 760px) / 2)); }
.empty-state { max-width: 430px; margin: 14vh auto 0; text-align: center; }
.empty-state .empty-mark { width: 42px; height: 42px; margin: 0 auto 17px; }
.empty-state h2 { margin: 0; font-size: 18px; letter-spacing: 0; }
.empty-state p { margin: 9px 0 0; color: #6f7a75; font-size: 13px; line-height: 1.5; }
.message-row { display: flex; margin: 0 0 18px; }
.message-row.user { justify-content: flex-end; }
.message-bubble {
  max-width: min(620px, 82%);
  padding: 11px 14px;
  color: #25302b;
  background: #fff;
  border: 1px solid #dfe5e2;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.message-row.user .message-bubble { color: #fff; background: #196f59; border-color: #196f59; }
.message-meta { margin: 5px 2px 0; color: #84908b; font-size: 10px; }
.message-row.user .message-meta { text-align: right; }
.continuation-row {
  width: min(620px, 88%);
  margin: 0 0 18px;
  padding: 14px;
  background: #fff;
  border: 1px solid #d8dfdc;
  border-left: 3px solid #d29a38;
  border-radius: 6px;
}
.continuation-row.resolved { border-left-color: #4b9d7d; }
.continuation-heading { font-size: 13px; font-weight: 700; }
.continuation-row p { margin: 6px 0 14px; color: #66726d; font-size: 12px; line-height: 1.5; }
.continuation-actions { display: flex; justify-content: flex-end; gap: 8px; }
.continuation-actions button, .clarification-form button {
  min-width: 76px;
  height: 32px;
  padding: 0 12px;
  color: #46524d;
  background: #fff;
  border: 1px solid #cbd3cf;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
}
.continuation-actions button.primary, .clarification-form button.primary { color: #fff; background: #176f58; border-color: #176f58; }
.clarification-form { display: flex; gap: 8px; }
.clarification-form input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid #cbd3cf; border-radius: 5px; }
.thinking { display: inline-flex; align-items: center; gap: 4px; height: 20px; }
.thinking i { width: 5px; height: 5px; background: #82908a; border-radius: 50%; animation: pulse 1s infinite ease-in-out; }
.thinking i:nth-child(2) { animation-delay: .14s; }
.thinking i:nth-child(3) { animation-delay: .28s; }
@keyframes pulse { 0%, 70%, 100% { opacity: .35; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-2px); } }
.composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 0 max(24px, calc((100% - 760px) / 2)) 24px;
  padding: 10px;
  background: #fff;
  border: 1px solid #ccd4d0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgb(25 42 36 / 6%);
}
.composer:focus-within { border-color: #4d8e7b; }
.composer textarea { width: 100%; min-height: 38px; max-height: 160px; padding: 9px 8px; resize: none; color: #1d2824; background: transparent; border: 0; outline: 0; line-height: 1.45; }
.composer textarea::placeholder { color: #8a9691; }
.send-button { color: #fff; background: #176f58; font-size: 18px; }
.send-button:hover { background: #105d4a; }
.send-button:disabled { cursor: default; color: #a4aca8; background: #e7ebe9; }
.error-banner { margin: 12px 30px 0; }

.settings-dialog {
  width: min(620px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow-y: auto;
  color: #202824;
  background: #fff;
  border: 1px solid #ccd4d0;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgb(20 35 29 / 24%);
}
.settings-dialog::backdrop { background: rgb(15 24 21 / 48%); }
.settings-dialog form { padding: 22px; }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.dialog-header h2 { margin: 0; font-size: 16px; letter-spacing: 0; }
.dialog-header p { margin: 4px 0 0; color: #77827e; font-size: 11px; overflow-wrap: anywhere; }
.replay-tool-list { border-top: 1px solid #e2e7e4; }
.replay-tool-row { padding: 16px 0 2px; border-bottom: 1px solid #e2e7e4; }
.replay-tool-toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.replay-tool-toggle input { width: 16px; height: 16px; margin: 0; }
.replay-tool-toggle span, .replay-tool-row label > span { color: #4a5650; font-size: 11px; }
.replay-tool-result {
  width: 100%;
  min-height: 92px;
  max-height: 240px;
  padding: 9px 10px;
  resize: vertical;
  color: #1d2824;
  background: #fff;
  border: 1px solid #cbd3cf;
  border-radius: 5px;
  line-height: 1.45;
}
.replay-tool-result:disabled { color: #77827e; background: #f4f6f5; }
.dialog-actions { margin-top: 20px; }

@media (max-width: 900px) {
  .two-column { grid-template-columns: 1fr; }
  .agent-settings-fields { grid-template-columns: 1fr; }
  .health-grid { grid-template-columns: 1fr; }
  .drive-space-create { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drive-space-create .secondary-button { width: 100%; }
}

@media (max-width: 720px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(270px, calc(100vw - 48px));
    transform: translateX(-100%);
    box-shadow: 12px 0 36px rgb(18 28 24 / 24%);
    transition: transform 160ms ease;
  }
  .sidebar.open { transform: translateX(0); }
  .nav-toggle { display: grid; }
  .workspace-header { padding: 0 16px; }
  .workspace-heading p { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dashboard-view { padding: 22px 16px 32px; }
  .workspace-error, .error-banner { margin-right: 16px; margin-left: 16px; }
  .form-grid, .schedule-form-grid, .drive-space-create { grid-template-columns: 1fr; }
  .wide-field, .schedule-purpose { grid-column: auto; }
  .compact-field { width: 100%; }
  .integration-title { align-items: flex-start; flex-direction: column; }
  .agent-create-row, .coach-settings { grid-template-columns: 1fr; }
  .agent-create-row button, .coach-settings button { width: 100%; }
  .debug-context { padding: 11px 16px; }
  .debug-context span { display: none; }
  .messages { padding: 20px 16px; }
  .empty-state { margin-top: 10vh; }
  .composer { margin: 0 12px 12px; }
  .message-bubble { max-width: 90%; }
}

@media (max-width: 430px) {
  .login-view { padding: 16px; }
  .login-panel { padding: 26px 22px; }
  .workspace-heading p { max-width: 150px; }
  .management-panel { padding: 16px; }
  .page-heading { align-items: flex-start; }
  .drive-space-row, .media-extraction-row { grid-template-columns: 1fr; }
  .drive-space-actions { justify-content: flex-start; }
}
.staff-access-dialog { width: 440px; max-width: calc(100vw - 32px); }
.staff-access-dialog form > label { display: grid; gap: 8px; }
.staff-access-dialog select { width: 100%; min-width: 0; padding: 8px; border: 1px solid #c8d0cc; border-radius: 4px; background: #fff; }
.staff-access-dialog fieldset { border: 0; padding: 16px 0; display: grid; gap: 12px; }
.staff-access-dialog p { overflow-wrap: anywhere; }
.staff-access-dialog fieldset > label { display: grid; gap: 8px; }
.staff-access-dialog fieldset > label:has(input[type="checkbox"]) { display: block; }
.staff-access-dialog textarea { box-sizing: border-box; width: 100%; min-width: 0; resize: vertical; padding: 8px; font: inherit; border: 1px solid #c8d0cc; border-radius: 4px; }
.staff-recovery-preview { white-space: pre-wrap; max-height: 180px; overflow-y: auto; margin: 0; font-size: 13px; }
.simulation-controls { padding: 12px 18px; border-bottom: 1px solid #dce2df; }
.simulation-actions pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 300px; overflow: auto; font-size: 12px; }
.simulation-selectors { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 12px 0; }
.simulation-selectors label { display: grid; gap: 5px; min-width: 0; font-size: 12px; }
.simulation-selectors select { width: 100%; min-width: 0; padding: 7px; border: 1px solid #c8d0cc; border-radius: 4px; background: #fff; }
#debug-simulation-status { font-size: 13px; color: #995116; overflow-wrap: anywhere; }
@media (max-width: 700px) { .simulation-selectors { grid-template-columns: minmax(0,1fr); } }

/* Coding tickets: a read-only account of commissioned work. */
.codex-note, .codex-muted { color: #6f7a75; font-size: 12px; margin: 10px 0 0; line-height: 1.5; }
.codex-limits { display: grid; gap: 10px; margin-top: 12px; }
.codex-limit { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 16px; padding: 12px 0; border-top: 1px solid #e5e9e7; }
.codex-limit dt { color: #76817c; font-size: 10px; text-transform: uppercase; letter-spacing: 0; margin: 0; }
.codex-limit dd { margin: 3px 0 0; font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.codex-limit .project { grid-column: 1 / -1; font-weight: 650; font-size: 13px; }
.codex-filters { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 12px; }
.codex-filters label { display: grid; gap: 5px; font-size: 11px; color: #63706a; font-weight: 650; }
.codex-ticket { display: grid; gap: 5px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #e8ecea; background: transparent; padding: 12px 10px; color: inherit; cursor: pointer; }
.codex-ticket[aria-current="true"] { background: #e5f1eb; box-shadow: inset 3px 0 #1c765d; }
.codex-ticket .request { font-size: 13px; overflow-wrap: anywhere; }
.codex-ticket .meta, .codex-session .meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 11px; color: #69736e; align-items: center; }
.codex-tag { display: inline-block; padding: 1px 8px; border-radius: 4px; border: 1px solid #b8cdc5; background: #f1f7f5; color: #215b4a; font-size: 11px; font-weight: 650; overflow-wrap: anywhere; }
.codex-tag.bad { border-color: #d9a8a2; background: #fbeeec; color: #8a2a21; }
.codex-tag.pending { border-color: #d9c48f; background: #fbf3dc; color: #7a5a00; }
.codex-tag.plain { border-color: #d8dedb; background: #f4f6f5; color: #5d6863; }
.codex-session { padding: 14px 0; border-top: 1px solid #e8ecea; }
.codex-session h4 { margin: 0 0 6px; font-size: 13px; }
.codex-session dl, dl.codex-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 8px 0 0; font-size: 12px; }
.codex-session dt, dl.codex-facts dt { color: #76817c; }
.codex-session dd, dl.codex-facts dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.codex-session .report { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.55; margin: 8px 0 0; padding: 10px; background: #f5f7f6; border-radius: 4px; }
.codex-release { margin-top: 14px; padding: 12px; border: 1px solid #d9e3df; border-left: 3px solid #176f58; border-radius: 4px; background: #f7faf9; font-size: 12px; }
.codex-release code { font-size: 12px; }
@media (max-width: 760px) { .codex-grid { grid-template-columns: minmax(0, 1fr); } }
.codex-proposals h4 { margin: 0 0 4px; font-size: 13px; }
.codex-proposals .codex-session { border-top: 1px solid #d9e3df; }

.sms-deliveries { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.sms-deliveries th { text-align: left; color: #76817c; font-weight: 600; padding: 4px 8px 4px 0; border-bottom: 1px solid #e8ecea; }
.sms-deliveries td { padding: 6px 8px 6px 0; border-bottom: 1px solid #f0f3f2; vertical-align: top; overflow-wrap: anywhere; }
.codex-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
@media (max-width: 720px) { .sms-deliveries { display: block; overflow-x: auto; white-space: nowrap; } }
/* Audience settings share the playbook save and revision boundary. */
.audience-editor { margin-block: 20px; border-top: 1px solid #d5d9dd; padding-top: 12px; min-width: 0; }
.audience-editor h3 { margin: 0 0 4px; }
.audience-intro { margin: 0 0 16px; color: #4c5752; font-size: 13px; line-height: 1.5; }
.audience-section { border: 1px solid #d5d9dd; border-radius: 6px; padding: 12px 14px; margin-bottom: 14px; min-width: 0; }
.audience-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.audience-section h4 { margin: 0; font-size: 13px; }
.audience-section h5 { margin: 4px 0 8px; font-size: 12px; color: #4c5752; }
.audience-count { color: #78837e; font-size: 12px; }
.audience-hint { margin: 4px 0 12px; color: #78837e; font-size: 12px; line-height: 1.5; }
.audience-field-hint { color: #78837e; font-size: 11px; line-height: 1.4; }
.audience-profile-row { border: 1px solid #e3e7e5; border-radius: 6px; padding: 12px; margin: 0 0 10px; min-width: 0; background: #fafbfa; }
.audience-profile-row .playbook-field { margin-bottom: 8px; }
.audience-profile-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: start; }
.audience-profile-head .secondary-button { margin-top: 22px; }
.audience-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.audience-key-invalid { border-color: #c0392b !important; }
.audience-interfaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 16px; }
.audience-binding-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; margin-bottom: 12px; }
.audience-binding-row .playbook-field { margin-bottom: 0; }
.audience-editor select, .audience-editor input, .audience-editor textarea { max-width: 100%; min-width: 0; width: 100%; box-sizing: border-box; }
.audience-editor input { padding: 10px; border: 1px solid #cbd5ce; border-radius: 4px; background: #fff; color: inherit; }
@media (max-width: 640px) {
  .audience-binding-row { grid-template-columns: minmax(0, 1fr); }
  .audience-profile-head { grid-template-columns: minmax(0, 1fr); }
  .audience-profile-head .secondary-button { margin-top: 0; justify-self: start; }
}

/* Message inspector: the conversation as a readable thread, with each reply's
   reasoning laid out as steps under the message that caused it. */
.inspection-thread-pane { min-width: 0; }
.thread-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid #e2e6e4; }
.thread-toolbar h3 { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.thread-subtitle { display: block; margin-top: 3px; color: #78837e; font-size: 12px; }
.thread { display: grid; gap: 14px; }
.thread-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; min-width: 0; }
.thread-row.agent { grid-template-columns: minmax(0, 1fr) 32px; }
.thread-row.agent > .thread-avatar { order: 2; }
.thread-row.agent > .thread-body { order: 1; }
.thread-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e4ebe8; color: #2f4a40; font-size: 12px; font-weight: 700; }
.thread-row.agent .thread-avatar { background: #176f58; color: #fff; }
.thread-body { min-width: 0; }
.thread-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 12px; color: #69736e; margin-bottom: 4px; }
.thread-meta strong { color: #202824; }
.thread-row.agent .thread-meta { justify-content: flex-end; }
.thread-bubble { display: inline-block; max-width: min(640px, 100%); padding: 10px 13px; border: 1px solid #dfe5e2; border-radius: 8px; background: #fff; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.thread-row.agent .thread-bubble { background: #e9f4ef; border-color: #cfe3da; }
.thread-row.agent .thread-body { text-align: right; }
.thread-row.agent .thread-bubble { text-align: left; }
.thread-actions { margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.thread-link { padding: 4px 0; border: 0; background: transparent; color: #176f58; font-size: 12px; font-weight: 650; cursor: pointer; }
.thread-link:hover { text-decoration: underline; }
.thread-link[aria-expanded="true"]::before { content: "▾ "; }
.thread-link[aria-expanded="false"]::before { content: "▸ "; }
.reason { margin: 8px 0 4px; padding: 12px 14px 12px 14px; border: 1px solid #d9e3df; border-left: 3px solid #176f58; border-radius: 6px; background: #f7faf9; text-align: left; }
.reason > p.inspection-empty { padding: 12px; }
.reason-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.reason-step { position: relative; padding-left: 26px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.reason-step::before { content: ""; position: absolute; left: 6px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: #9fb8ae; }
.reason-step.good::before { background: #2f8f6c; }
.reason-step.bad::before { background: #c8463e; }
.reason-step.pending::before { background: #d29a38; }
.reason-step + .reason-step::after { content: ""; position: absolute; left: 10px; top: -12px; height: 12px; border-left: 1px solid #cfdcd6; }
.reason-step strong { display: block; font-size: 13px; }
.reason-step .reason-meta { color: #69736e; font-size: 12px; }
.reason-step .reason-quote { margin: 4px 0 0; padding: 8px 10px; background: #fff; border: 1px solid #e2e6e4; border-radius: 5px; white-space: pre-wrap; font-size: 13px; }
.reason-step .reason-code { margin: 4px 0 0; padding: 6px 8px; background: #fff; border: 1px solid #e2e6e4; border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; white-space: pre-wrap; max-height: 160px; overflow: auto; }
.reason-step ul { margin: 4px 0 0; padding-left: 18px; }
.reason-raw { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #d5dcd8; }
.reason-raw > summary { cursor: pointer; font-size: 12px; color: #63706a; }
.reason-raw .inspection-work { margin-top: 10px; }
@media (max-width: 720px) { .thread-row, .thread-row.agent { grid-template-columns: 28px minmax(0, 1fr); } .thread-row.agent > .thread-avatar { order: 1; } .thread-row.agent > .thread-body { order: 2; text-align: left; } .thread-row.agent .thread-meta { justify-content: flex-start; } }