:root {
  color-scheme: light;
  --bg: #f7faf9;
  --surface: #ffffff;
  --surface-2: #eef5f4;
  --text: #172033;
  --muted: #667085;
  --border: #d7e2df;
  --accent: #0f766e;
  --accent-2: #155e75;
  --danger: #b42318;
  --shadow: 0 18px 45px rgba(15, 35, 55, 0.10);
  --radius: 6px;
  --account-strip-height: 47px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  letter-spacing: 0;
}

button, input, textarea, select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: progress;
  opacity: .68;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: calc(100vh - 45px);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px;
  border-right: 1px solid var(--border);
  background: #fbfdfc;
  overflow: auto;
}

.brand {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 22px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--accent);
  color: white;
  font-weight: 850;
  font-size: 14px;
}

.brain-brand-mark {
  border: 1px solid rgba(192, 38, 211, .35);
  background: #fff1f8;
  color: #c026d3;
}

.brain-brand-mark svg {
  width: 34px;
  height: 34px;
}

.brain-brand-mark .brain-fill {
  fill: #d946ef;
  opacity: .18;
}

.brain-brand-mark .brain-line {
  fill: none;
  stroke-width: 6.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brain-brand-mark .main-left {
  stroke: #c026d3;
}

.brain-brand-mark .main-right {
  stroke: #a21caf;
}

.brain-brand-mark .accent {
  stroke: #db2777;
  stroke-width: 5.2;
}

h1, h2, h3, h4, p {
  margin: 0;
}

h1 { font-size: 19px; line-height: 1.2; }
.brand p, .topbar p, .ai-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.primary-action, .accent-action, .compose-row button, .voice-button {
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  min-height: 40px;
  padding: 0 14px;
}

.secondary-action {
  border: 1px solid var(--border) !important;
  background: #fff !important;
  color: var(--accent-2) !important;
}

.primary-action {
  width: 100%;
  margin-bottom: 18px;
}

.accent-action {
  background: var(--accent-2);
}

.folder-list {
  display: grid;
  gap: 6px;
}

.analytics-view {
  display: block;
}

.analytics-dashboard {
  display: grid;
  gap: 16px;
}

.analytics-alert {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #f4c7c7;
  border-radius: var(--radius);
  background: #fff1f1;
  color: #7a271a;
}

.analytics-alert.danger {
  border-color: #fda29b;
}

.analytics-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.analytics-head p,
.analytics-head span,
.analytics-band p,
.candidate-card small {
  color: var(--muted);
  font-size: 13px;
}

.analytics-head h3 {
  margin-top: 4px;
  font-size: 22px;
}

.analytics-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.metric-card,
.calibration-card,
.analytics-band,
.candidate-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.metric-card {
  display: grid;
  gap: 4px;
  padding: 12px;
}

.metric-card span,
.structured-grid span {
  color: var(--muted);
  font-size: 12px;
}

.metric-card strong {
  font-size: 22px;
}

.calibration-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 10px;
  align-items: end;
}

.calibration-filters label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.calibration-filters select {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  padding: 0 10px;
}

.visible-counter {
  padding: 10px 0;
  color: var(--muted);
}

.calibration-list {
  display: grid;
  gap: 12px;
}

.calibration-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.calibration-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.calibration-card h4 {
  font-size: 17px;
}

.calibration-card header p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.status-pill {
  align-self: start;
  border: 1px solid #f2d18c;
  border-radius: 999px;
  background: #fff8e6;
  color: #7a4d00;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 9px;
  white-space: nowrap;
}

.structured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.structured-grid div {
  display: grid;
  gap: 3px;
  padding: 8px;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.structured-grid strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.calibration-card details,
.weak-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fbfdfc;
  padding: 8px 10px;
}

.calibration-card summary,
.weak-item summary {
  cursor: pointer;
  font-weight: 800;
}

.calibration-card pre {
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
}

.artifact-links,
.corrections {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.artifact-links span,
.corrections span {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 8px;
}

.analytics-band {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.analytics-band.weak {
  border-color: #f2d18c;
  background: #fffbf0;
}

.candidate-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.candidate-card {
  display: grid;
  gap: 6px;
  padding: 10px;
  min-width: 0;
}

.candidate-card[hidden] {
  display: none;
}

.owner-review-candidate {
  container-type: inline-size;
  align-content: start;
  gap: 0;
  padding: 12px;
  box-shadow: 0 8px 22px rgba(15, 35, 55, .06);
}

.owner-review-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 14px;
  align-items: stretch;
  min-width: 0;
}

.owner-review-current,
.owner-error-panel {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  border-radius: var(--radius);
}

.owner-review-current {
  padding: 9px;
  border: 1px solid #dbe4f0;
  background: #fbfcfe;
}

.owner-review-current > strong {
  font-size: 15px;
  line-height: 1.2;
}

.owner-review-current textarea,
.owner-error-panel textarea,
.owner-error-panel input,
.owner-error-panel select {
  width: 100%;
  min-width: 0;
}

.owner-review-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.owner-review-facts div {
  display: grid;
  gap: 3px;
  min-height: 52px;
  min-width: 0;
  padding: 6px 7px;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.owner-review-facts span {
  color: var(--muted);
  font-size: 11px;
}

.owner-review-facts strong {
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.owner-error-panel {
  padding: 9px;
  border: 1px solid #f2d18c;
  border-radius: var(--radius);
  background: #fffaf0;
}

.owner-error-panel header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
  padding-bottom: 6px;
  border-bottom: 1px solid #f7dfb7;
}

.owner-error-panel h5 {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
}

.owner-error-panel header p,
.owner-error-panel header span,
.owner-error-panel label {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.owner-error-panel header span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid #f2d18c;
  border-radius: 999px;
  background: #fff;
  color: #92400e;
  font-weight: 850;
  padding: 0 8px;
  white-space: nowrap;
}

.owner-error-panel label {
  display: grid;
  gap: 5px;
}

.owner-error-panel select,
.owner-error-panel input,
.owner-error-panel textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  padding: 7px 9px;
  line-height: 1.35;
}

.owner-error-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 5px;
}

.owner-error-list label {
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font-weight: 760;
}

.owner-error-list input {
  width: 14px;
  min-width: 14px;
  height: 14px;
  margin: 0;
}

.owner-error-list span {
  font-size: 12px;
  line-height: 1.15;
}

.owner-role-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.owner-feedback-submit {
  min-height: 36px;
  border: 0;
  border-radius: var(--radius);
  background: #92400e;
  color: #fff;
  font-weight: 850;
  padding: 0 12px;
}

.owner-knowledge-details,
.owner-secondary-details {
  display: grid;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

.owner-knowledge-details summary,
.owner-secondary-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 40px;
  padding: 7px 10px;
  cursor: pointer;
  list-style: none;
  color: var(--accent-2);
  font-weight: 850;
  line-height: 1.08;
}

.owner-knowledge-details summary::-webkit-details-marker,
.owner-secondary-details summary::-webkit-details-marker {
  display: none;
}

.owner-knowledge-details summary::after,
.owner-secondary-details summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--accent-2);
  background: var(--surface-2);
  flex: 0 0 auto;
}

.owner-knowledge-details[open] summary::after,
.owner-secondary-details[open] summary::after {
  content: "-";
}

.owner-knowledge-details summary span,
.owner-secondary-details summary span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.owner-knowledge-details summary small,
.owner-secondary-details summary small {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  min-width: 0;
  overflow-wrap: anywhere;
}

.owner-knowledge-details textarea,
.owner-secondary-details textarea {
  min-width: 0;
  max-width: 100%;
  border-width: 1px 0 0;
  border-radius: 0;
}

.owner-knowledge-details > small {
  padding: 0 10px 9px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.recheck-card-details {
  border-color: #86b7a3;
  background: #f0fdf6;
}

.recheck-card-details summary {
  color: #14532d;
  background: #dcfce7;
}

.recheck-card-details summary::after {
  border-color: #86b7a3;
  color: #14532d;
  background: #f0fdf6;
}

.recheck-card-details ul,
.weak-card-details ul {
  margin: 0;
  padding: 10px 14px 12px 28px;
  color: #334155;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.owner-secondary-details .owner-role-grid,
.owner-secondary-details > label {
  margin: 8px 9px 0;
}

.owner-secondary-details > label:last-child {
  margin-bottom: 9px;
}

@media (min-width: 1600px) {
  .candidate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (max-width: 760px) {
  .owner-review-card-grid {
    grid-template-columns: 1fr;
  }

  .owner-review-facts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .owner-review-card-grid,
  .candidate-grid,
  .owner-review-facts {
    grid-template-columns: 1fr;
  }
}

.analytics-loading {
  padding: 20px;
  color: var(--muted);
}

.vocabulary-learning {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #b7e4c7;
  border-radius: var(--radius);
  background: #f2fbf5;
}

.vocabulary-learning header,
.vocab-actions,
.vocab-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.vocabulary-learning header {
  justify-content: space-between;
  align-items: flex-start;
}

.vocabulary-learning header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.vocab-add,
.vocab-submit,
.vocab-reprocess {
  min-height: 38px;
  border: 0;
  border-radius: var(--radius);
  background: #15803d;
  color: #fff;
  font-weight: 850;
  padding: 0 12px;
}

.vocab-reprocess {
  background: var(--accent-2);
}

.vocab-reprocess:disabled {
  opacity: .6;
}

.vocab-rows {
  display: grid;
  gap: 8px;
}

.vocab-row input {
  min-width: 0;
  flex: 1;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  padding: 0 10px;
}

.vocab-row span {
  color: var(--muted);
  font-weight: 900;
}

.vocab-remove {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: var(--radius);
  background: #b42318;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.vocab-notice {
  min-height: 22px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.vocab-notice[data-kind="success"] {
  color: #166534;
}

.vocab-notice[data-kind="error"] {
  color: var(--danger);
}

.folder-row-wrap {
  display: block;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: var(--radius);
}

.folder-row-wrap.active {
  background: var(--surface-2);
  border-color: var(--border);
}

.folder-row-wrap.drop-target {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, white);
}

.folder-row-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.folder-row-line[draggable="true"] .folder-row {
  cursor: grab;
}

.folder-row-line[draggable="true"]:active .folder-row {
  cursor: grabbing;
}

.folder-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  text-align: left;
}

.panel-drag-handle {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--accent-2);
  font-weight: 900;
  cursor: grab;
}

.panel-drag-handle:active {
  cursor: grabbing;
}

.grip-bars {
  width: 16px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 5px / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 10px / 100% 2px no-repeat;
}

.folder-row span {
  font-weight: 760;
  white-space: normal;
  overflow-wrap: anywhere;
}

.folder-row small, .section-head span, .label-row small {
  color: var(--muted);
  font-size: 12px;
}

.folder-icon, .folder-tool svg, .voice-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.folder-tool {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
}

.folder-tool:hover {
  background: white;
  color: var(--accent-2);
}

.folder-tool.danger:hover {
  color: var(--danger);
}

.folder-actions {
  display: flex;
  gap: 6px;
  padding: 0 8px 7px 36px;
}

.labels-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.labels-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.labels-head h2 {
  font-size: 15px;
}

.labels-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.labels-head button {
  border: 0;
  background: transparent;
  color: var(--accent-2);
  font-weight: 800;
}

.labels-list {
  display: grid;
  gap: 4px;
}

.label-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  padding: 0 8px;
  text-align: left;
}

.label-row-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: var(--radius);
}

.label-row-wrap.active,
.label-row.active {
  border-color: var(--border);
  background: var(--surface-2);
}

.label-delete {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
}

.label-delete:hover {
  background: white;
  color: var(--danger);
}

.label-delete svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.label-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--dot);
}

.empty-labels {
  color: var(--muted);
  font-size: 13px;
  padding: 8px;
}

.workspace {
  padding: 22px;
  min-width: 0;
}

.account-strip {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 34px;
  padding: 7px 22px;
  border-bottom: 1px solid var(--border);
  background: #fbfdfc;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.account-strip > span {
  max-width: 42vw;
  overflow: hidden;
  color: var(--text);
  font-weight: 850;
  text-overflow: ellipsis;
}

.account-strip a,
.account-strip button {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 9px;
  background: #fff;
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.account-strip .mobile-main-menu-button,
.mobile-main-menu {
  display: none;
}

.account-strip button {
  cursor: pointer;
}

.account-strip [hidden] {
  display: none;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

.topbar h2 {
  font-size: 24px;
  line-height: 1.16;
}

.topbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mobile-view-switch {
  display: none;
}

.ghost-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--accent-2);
  text-decoration: none;
  font-weight: 760;
  background: white;
}

.icon-button, .delete-note {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: white;
  color: var(--accent-2);
}

.icon-button svg, .delete-note svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-button.small {
  width: 32px;
  height: 32px;
}

.icon-button.danger {
  color: var(--danger);
}

.icon-button.active {
  border-color: color-mix(in srgb, var(--accent-2) 42%, var(--border));
  background: var(--surface-2);
  color: var(--accent-2);
}

.note-row.pinned,
.task-row.pinned {
  border-color: color-mix(in srgb, var(--accent-2) 38%, var(--border));
  background: #fbfefe;
}

.pin-chip {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: var(--accent-2);
  font-weight: 850;
}

.pin-chip svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inline-edit {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #f8fbfb;
}

.folder-edit {
  margin: 0 8px 8px 36px;
  padding: 10px;
}

.inline-edit-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.inline-edit-head strong {
  font-size: 13px;
}

.inline-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.inline-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.mini-action {
  min-height: 34px;
  border: 0;
  border-radius: var(--radius);
  padding: 0 11px;
  background: var(--accent);
  color: white;
  font-weight: 800;
}

.mini-action.ghost {
  border: 1px solid var(--border);
  background: white;
  color: var(--accent-2);
}

.quick-compose, .notes-panel, .tasks-panel, .ai-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.blocks-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: -6px 0 12px;
}

.blocks-toolbar label,
.field-label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.quick-compose {
  display: grid;
  gap: 10px;
  padding: 14px;
  margin-bottom: 18px;
}

input, textarea, select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 11px;
  background: #fff;
  color: var(--text);
  outline: none;
}

.calendar-control {
  position: relative;
  display: block;
}

.calendar-control input {
  padding-right: 46px;
}

.calendar-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--accent-2);
  pointer-events: none;
}

.calendar-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  opacity: 0;
  cursor: pointer;
}

input[type="file"] {
  min-height: 42px;
  padding: 6px;
  color: var(--muted);
  cursor: pointer;
}

input[type="file"]::file-selector-button {
  min-height: 30px;
  margin-right: 10px;
  border: 0;
  border-radius: var(--radius);
  padding: 0 11px;
  background: var(--surface-2);
  color: var(--accent-2);
  font-weight: 850;
  cursor: pointer;
}

textarea {
  resize: vertical;
  min-height: 76px;
  overflow: hidden;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.compose-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
}

.editor-tools {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(220px, 1fr);
  gap: 10px;
  align-items: center;
}

.rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}

.rich-toolbar button,
.rich-toolbar .rich-select {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: #101828;
  font-weight: 900;
}

.rich-toolbar .rich-select {
  width: auto;
  min-width: 112px;
  padding: 0 28px 0 9px;
  background: var(--surface-2);
  font-size: 12px;
  cursor: pointer;
}

.rich-toolbar .rich-select.compact {
  min-width: 76px;
}

.rich-color {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 6px;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 850;
}

.rich-color input {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
}

.rich-swatches {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 4px;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.rich-toolbar button.rich-swatch {
  width: 24px;
  min-width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--swatch) 72%, white);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .78);
}

.rich-toolbar button.rich-swatch:hover,
.rich-toolbar button.rich-swatch:focus-visible {
  border-color: var(--text);
  background: var(--swatch);
}

.rich-toolbar button:hover,
.rich-toolbar button:focus-visible,
.rich-toolbar .rich-select:focus-visible,
.rich-color:focus-within {
  background: var(--surface-2);
  border-color: var(--border);
}

.rich-toolbar button.active,
.rich-toolbar button[aria-pressed="true"] {
  background: var(--accent-2);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(21, 94, 117, .14);
}

.checklist-tool-icon {
  position: relative;
  display: block;
  width: 25px;
  height: 20px;
}

.checklist-tool-icon::before,
.checklist-tool-icon::after {
  content: "";
  position: absolute;
  left: 1px;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.checklist-tool-icon::before {
  top: 0;
  background:
    linear-gradient(135deg, transparent 45%, currentColor 46% 58%, transparent 59%) center / 8px 8px no-repeat;
}

.checklist-tool-icon::after {
  bottom: 0;
}

.checklist-tool {
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-position:
    18px 9px,
    18px 20px;
  background-size:
    11px 2px,
    11px 2px;
  background-repeat: no-repeat;
}

.rich-source-textarea {
  position: absolute;
  width: 1px;
  min-height: 0;
  height: 1px !important;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.single-rich-editor {
  display: grid;
  align-content: start;
  gap: 2px;
  width: 100%;
  min-height: 180px;
  max-height: min(52vh, 520px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  cursor: text;
  line-height: 1.42;
}

.quick-compose.voice-dictating .single-rich-editor {
  min-height: min(460px, 62vh);
  max-height: min(78vh, 820px);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.quick-compose.voice-done .single-rich-editor {
  border-color: #128242;
  box-shadow: 0 0 0 3px rgba(18, 130, 66, .16);
}

.compose-dictation-state {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  margin-top: -2px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #f8fbfb;
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 820;
}

.compose-dictation-state::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}

.compose-dictation-state[data-mode="recording"] {
  border-color: color-mix(in srgb, var(--accent) 45%, white);
  background: color-mix(in srgb, var(--accent) 8%, white);
  color: var(--accent);
}

.compose-dictation-state[data-mode="recording"]::before {
  animation: voicePulse 1s ease-in-out infinite;
}

.compose-dictation-state[data-mode="processing"] {
  border-color: color-mix(in srgb, #155e75 45%, white);
  color: #155e75;
}

.compose-dictation-state[data-mode="done"] {
  border-color: color-mix(in srgb, #128242 45%, white);
  background: color-mix(in srgb, #128242 8%, white);
  color: #128242;
}

.compose-dictation-state[data-mode="error"] {
  border-color: color-mix(in srgb, var(--danger) 45%, white);
  background: color-mix(in srgb, var(--danger) 8%, white);
  color: var(--danger);
}

@keyframes voicePulse {
  0%, 100% {
    opacity: .45;
    transform: scale(.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}

.tiptap-rich-editor {
  display: block;
  position: relative;
}

.tiptap-prosemirror {
  min-height: 156px;
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tiptap-prosemirror p {
  margin: 0 0 7px;
}

.tiptap-prosemirror p:last-child {
  margin-bottom: 0;
}

.tiptap-prosemirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  height: 0;
  color: #98a2b3;
  pointer-events: none;
}

.tiptap-prosemirror a {
  color: var(--accent-2);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tiptap-prosemirror h1,
.tiptap-prosemirror h2,
.tiptap-prosemirror h3,
.rich-text h1,
.rich-text h2,
.rich-text h3 {
  margin: 8px 0 6px;
  color: var(--text);
  line-height: 1.18;
}

.tiptap-prosemirror h1,
.rich-text h1 {
  font-size: 28px;
}

.tiptap-prosemirror h2,
.rich-text h2 {
  font-size: 22px;
}

.tiptap-prosemirror h3,
.rich-text h3 {
  font-size: 18px;
}

.tiptap-prosemirror ul,
.tiptap-prosemirror ol,
.rich-text ul,
.rich-text ol {
  margin: 6px 0 9px;
  padding-left: 22px;
}

.tiptap-prosemirror blockquote,
.rich-text blockquote {
  margin: 8px 0;
  padding: 6px 10px;
  border-left: 4px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, white);
}

.tiptap-prosemirror table,
.rich-text table {
  width: min(520px, 50%);
  border-collapse: collapse;
  margin: 10px 0;
  table-layout: fixed;
}

.tiptap-prosemirror th,
.tiptap-prosemirror td,
.rich-text th,
.rich-text td {
  min-width: 80px;
  border: 1px solid var(--border);
  padding: 7px 8px;
  vertical-align: top;
}

.tiptap-prosemirror th,
.rich-text th {
  background: var(--surface-2);
  color: var(--accent-2);
  font-weight: 850;
}

.tiptap-prosemirror .selectedCell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 118, 110, .13);
  pointer-events: none;
}

.tiptap-prosemirror td,
.tiptap-prosemirror th {
  position: relative;
}

.table-bubble-controls {
  position: sticky;
  bottom: 8px;
  z-index: 2;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
  margin-top: 6px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow);
}

.table-bubble-controls[hidden] {
  display: none;
}

.table-bubble-controls button {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 28px;
  border: 0;
  border-radius: var(--radius);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.table-bubble-controls button.add {
  background: #128242;
}

.table-bubble-controls button.remove {
  background: #b91c1c;
}

.table-bubble-controls button.table {
  min-width: 28px;
}

.editor-inline-image,
.rich-text img.inline-content-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(420px, 52vh);
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  object-fit: contain;
  background: #fff;
}

.note-preview-content img.inline-content-image,
.task-row .rich-text img.inline-content-image {
  max-width: min(240px, 100%);
  max-height: 170px;
  cursor: zoom-in;
}

.fullscreen-edit .editor-inline-image {
  max-height: min(72vh, 760px);
  cursor: zoom-in;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  grid-template-columns: minmax(44px, 72px) minmax(0, 1fr) minmax(44px, 72px);
  place-items: center;
  padding: 28px;
  background: rgba(15, 23, 42, .82);
}

.image-lightbox[hidden] {
  display: none;
}

body.image-lightbox-open {
  overflow: hidden;
}

.image-lightbox figure {
  display: grid;
  gap: 10px;
  justify-items: center;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.image-lightbox img {
  max-width: min(100%, 1180px);
  max-height: calc(100vh - 72px);
  border-radius: var(--radius);
  object-fit: contain;
  background: #fff;
  box-shadow: 0 22px 72px rgba(0, 0, 0, .35);
}

.image-lightbox figcaption {
  max-width: min(100%, 1180px);
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}

.image-lightbox-nav {
  display: grid;
  place-items: center;
  width: 46px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .92);
  color: var(--text);
  font-size: 38px;
  line-height: 1;
}

.image-lightbox-nav[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .image-lightbox {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    padding: 14px;
  }

  .image-lightbox img {
    max-height: calc(100vh - 96px);
  }

  .image-lightbox-nav {
    width: 36px;
    height: 50px;
    font-size: 32px;
  }
}

.image-lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .95);
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  font-weight: 500;
}

.tiptap-task-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tiptap-task-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-height: 25px;
}

.tiptap-task-item > label {
  display: grid;
  place-items: center;
  min-width: 18px;
  margin-top: 3px;
}

.tiptap-task-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent-2);
}

.tiptap-task-item[data-checked="true"] p {
  color: var(--muted);
  text-decoration: line-through;
}

.tiptap-task-item > div {
  min-width: 0;
}

.single-rich-editor:focus-within {
  border-color: color-mix(in srgb, var(--accent-2) 42%, var(--border));
  box-shadow: 0 0 0 3px rgba(21, 94, 117, .10);
}

.single-editor-line {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  min-height: 25px;
  cursor: text;
}

.single-editor-line.plain {
  display: block;
}

.single-editor-text {
  display: block;
  flex: 1;
  width: 100%;
  min-height: 24px;
  min-width: 0;
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  caret-color: var(--accent-2);
}

.single-editor-text b,
.single-editor-text strong {
  font-weight: 900;
}

.single-editor-text u {
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.single-editor-text s,
.single-editor-text strike,
.single-editor-text del {
  text-decoration-thickness: 2px;
}

.editor-inline-link {
  color: var(--accent-2);
  font-weight: 800;
  text-decoration: underline;
}

.single-editor-text:empty::before {
  content: attr(data-placeholder);
  color: #98a2b3;
}

.rich-check-toggle {
  margin-top: 2px;
}

.single-editor-line.done .rich-check-toggle {
  border-color: var(--accent-2);
  background: var(--accent-2);
}

.single-editor-line.done .rich-check-toggle::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.single-editor-line.done .single-editor-text {
  color: var(--muted);
  text-decoration: line-through;
}

.inline-voice {
  min-height: 38px;
}

.compose-row-three {
  grid-template-columns: 150px minmax(0, 1fr) 220px;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  gap: 18px;
  align-items: start;
}

.notes-panel,
.tasks-panel {
  max-height: calc(100vh - 252px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  touch-action: pan-y;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
}

.section-head h3 {
  font-size: 15px;
  line-height: 1.2;
  margin-right: auto;
}

.notes-list, .tasks-list {
  display: grid;
  gap: 7px;
  padding: 10px;
  overflow: visible;
  overscroll-behavior: contain;
  min-height: max-content;
  touch-action: pan-y;
}

.notes-panel.drag-scrolling,
.tasks-panel.drag-scrolling,
.notes-list.drag-scrolling,
.tasks-list.drag-scrolling {
  cursor: grabbing;
  user-select: none;
  scroll-behavior: auto;
}

.record-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fbfdfc;
  overflow: hidden;
}

.record-section[open] {
  overflow: visible;
}

.record-section + .record-section {
  margin-top: 10px;
}

.record-section summary {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  position: sticky;
  top: 45px;
  z-index: 1;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.record-section summary strong {
  min-width: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px 7px;
  background: #fff;
  color: var(--accent-2);
  text-align: center;
  font-size: 12px;
}

.record-section-body {
  display: grid;
  gap: 7px;
  padding: 8px;
}

.note-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  min-width: 0;
}

@supports (content-visibility: auto) {
  .note-row:not(:has(.inline-edit)),
  .task-row:not(:has(.inline-edit)) {
    content-visibility: auto;
    contain-intrinsic-size: 180px;
  }
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
  justify-content: flex-end;
  order: -1;
  min-width: 0;
}

.note-row > div:first-child,
.task-row > div:first-of-type {
  min-width: 0;
}

.note-row h4 {
  font-size: 14px;
  line-height: 1.25;
  margin-bottom: 4px;
}

.note-row p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.formatted-text {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.note-preview-content {
  display: -webkit-box;
  max-height: 11.2em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
}

.rich-text strong,
.rich-text b {
  color: var(--text);
}

.rich-text a {
  color: var(--accent-2);
  font-weight: 800;
}

.checklist-line {
  display: inline-flex;
  gap: 7px;
  align-items: flex-start;
  max-width: 100%;
}

.checklist-line > span {
  min-width: 0;
}

.checklist-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 1px;
  padding: 0;
  border: 2px solid #667085;
  border-radius: 50%;
  background: #fff;
}

.checklist-toggle:hover,
.checklist-toggle:focus-visible {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(21, 94, 117, .12);
}

.checklist-line.done .checklist-toggle {
  border-color: var(--accent-2);
  background: var(--accent-2);
}

.checklist-line.done .checklist-toggle::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checklist-line.done > span {
  color: var(--muted);
  text-decoration: line-through;
}

.rich-text mark {
  border-radius: 3px;
  background: #fde68a;
  color: #111827;
}

.meta-row, .ai-result div {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.meta-row span, .ai-result span {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px 7px;
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 750;
  background: #f8fbfb;
}

.meta-row.compact {
  margin-top: 6px;
}

.label-chip {
  border-color: color-mix(in srgb, var(--chip) 48%, white);
  border-left: 4px solid var(--chip);
  color: color-mix(in srgb, var(--chip) 74%, black);
  background: color-mix(in srgb, var(--chip) 13%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip) 16%, white);
}

.meta-row span,
.label-chip,
.tag-chip,
.taxonomy-chip,
.attachment-chip {
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.tag-chip {
  background: #f3f7ff;
  color: #245195;
}

.taxonomy-picker,
.taxonomy-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.taxonomy-chip-row {
  width: 100%;
}

.selected-taxonomy-row {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 30px;
  padding: 6px;
  border: 1px dashed color-mix(in srgb, var(--accent) 42%, white);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 7%, white);
}

.selected-taxonomy-row span {
  border: 1px solid color-mix(in srgb, var(--accent) 50%, white);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 4px 8px;
  background: #fff;
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 850;
}

.selected-taxonomy-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

.taxonomy-picker:empty {
  display: none;
}

.taxonomy-chip-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  margin-right: 2px;
}

.taxonomy-chip {
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 9px;
  background: white;
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 800;
}

.taxonomy-chip.label-choice {
  border-color: color-mix(in srgb, var(--chip) 46%, white);
  border-left: 4px solid var(--chip);
  background: color-mix(in srgb, var(--chip) 10%, white);
  color: color-mix(in srgb, var(--chip) 72%, black);
}

.taxonomy-chip.tag-choice {
  background: #f3f7ff;
  color: #245195;
}

.taxonomy-chip.selected {
  background: color-mix(in srgb, var(--chip, #0f766e) 18%, white);
  border-color: color-mix(in srgb, var(--chip, #0f766e) 62%, white);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--chip, #0f766e) 18%, transparent);
}

.delete-note {
  color: var(--danger);
  align-self: start;
}

.task-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 6px 9px;
  align-items: start;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  min-width: 0;
}

.task-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  margin: 1px 0 0;
}

.task-row span {
  font-size: 14px;
  line-height: 1.3;
}

.task-title {
  display: block;
  font-size: 14px;
  line-height: 1.25;
  margin-bottom: 4px;
  overflow-wrap: break-word;
}

.task-description {
  display: block;
  color: var(--text);
}

.task-row > .row-actions {
  grid-column: 2;
  order: 0;
}

.task-row > .row-actions .icon-button {
  width: 30px;
  height: 30px;
}

.attachments-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.attachment-item {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
}

.attachment-item.image {
  max-width: min(100%, 240px);
}

.attachment-item.audio {
  width: min(100%, 360px);
}

.attachment-image-card {
  display: grid;
  gap: 5px;
  width: 100%;
  max-width: 240px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px;
  background: #fff;
  color: var(--accent-2);
  text-decoration: none;
  font-size: 12px;
  font-weight: 760;
  cursor: zoom-in;
  contain: content;
}

.attachment-image-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: calc(var(--radius) - 1px);
  object-fit: cover;
  background: var(--surface-2);
}

.attachment-image-card.preview {
  max-width: 320px;
  margin-top: 4px;
}

.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 8px;
  background: #f8fbfb;
  color: var(--accent-2);
  text-decoration: none;
  font-size: 12px;
  font-weight: 760;
}

.attachment-audio-card {
  display: grid;
  gap: 6px;
  width: 100%;
  min-width: min(100%, 260px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px;
  background: #fff;
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 760;
}

.attachment-audio-card span,
.attachment-audio-card a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--accent-2);
  overflow-wrap: anywhere;
}

.attachment-audio-card audio {
  width: 100%;
  max-width: 100%;
}

.attachment-audio-card.preview {
  max-width: 420px;
}

.attachment-delete {
  display: inline-grid;
  place-items: center;
  width: 28px;
  min-height: 28px;
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: #fff;
  color: var(--danger);
  font-weight: 900;
}

.attachment-item .attachment-chip {
  border-radius: var(--radius) 0 0 var(--radius);
}

.attachment-preview {
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 760;
  padding: 4px 2px 0;
}

.attachment-preview-list {
  display: grid;
  gap: 6px;
}

.single-rich-editor.file-drop-active,
.tiptap-rich-editor.file-drop-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.file-field {
  margin-top: 4px;
}

.mobile-folder-browser {
  display: none;
}

input.datetime-spinning {
  cursor: ns-resize;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}

.app-toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 120;
  max-width: min(420px, calc(100vw - 28px));
  transform: translateX(-50%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #102033;
  color: #fff;
  box-shadow: var(--shadow);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 760;
  text-align: center;
}

.app-toast[hidden] {
  display: none;
}

.attachment-chip svg,
.attachment-audio-card svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fullscreen-edit {
  position: fixed;
  top: calc(var(--account-strip-height) + 18px);
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 100;
  margin: 0;
  padding: 18px;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  box-shadow: var(--shadow);
}

.task-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.task-row.done span,
.task-row.done .task-title {
  text-decoration: line-through;
  color: var(--muted);
}

.empty-state {
  min-height: 90px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
  padding: 16px;
}

.ai-panel {
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: calc(max(22px, env(safe-area-inset-bottom)) + 82px);
  z-index: 120;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: min(760px, calc(100vw - 44px));
  height: min(760px, calc(100vh - 132px));
  padding: 16px;
  border: 1px solid rgba(80, 108, 111, .22);
  border-radius: 22px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 24px 70px rgba(15, 35, 55, .22);
  overflow: hidden;
}

.ai-panel h3 {
  font-size: 22px;
  line-height: 1.15;
}

.ai-panel[hidden] {
  display: none;
}

.ai-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}

.ai-head > div:first-child {
  min-width: 0;
}

.ai-head-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
}

.ai-clear-chat-button {
  color: #64748b;
}

.ai-clear-chat-button:hover,
.ai-clear-chat-button:focus-visible {
  border-color: rgba(220, 38, 38, .28);
  background: #fff7f7;
  color: var(--danger);
}

.ai-panel textarea {
  width: 100%;
  min-width: 0;
  font-size: 14px;
  line-height: 1.42;
}

.chat-messages {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  overflow-x: hidden;
  padding: 14px;
  border: 1px solid rgba(80, 108, 111, .16);
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbfb 0%, #ffffff 100%);
}

.chat-empty {
  min-height: 64px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 13px;
}

.chat-message {
  max-width: min(86%, 560px);
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(80, 108, 111, .16);
  border-radius: 16px;
  background: white;
  box-shadow: 0 8px 24px rgba(15, 35, 55, .06);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.chat-message.user {
  justify-self: end;
  background: #e9f6f4;
  border-color: #bddcd8;
}

.chat-message.ai {
  justify-self: start;
}

.chat-message.thinking {
  min-width: min(320px, 92%);
  border-color: rgba(15, 118, 110, .18);
  background: linear-gradient(180deg, #ffffff 0%, #f5fbfa 100%);
}

.chat-message small {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.chat-message-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  min-width: 0;
}

.chat-message-head small {
  margin-bottom: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-copy-message-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  min-height: 26px;
  max-width: 128px;
  border: 1px solid rgba(80, 108, 111, .24);
  border-radius: 7px;
  background: rgba(255, 255, 255, .82);
  color: var(--accent-2);
  padding: 0 8px;
  font-size: 11px;
  font-weight: 820;
  line-height: 1;
}

.chat-copy-message-button:hover,
.chat-copy-message-button:focus-visible {
  border-color: rgba(15, 118, 110, .42);
  background: #ffffff;
  color: var(--accent);
}

.chat-copy-message-button.copied {
  border-color: rgba(15, 118, 110, .48);
  background: #e9f6f4;
  color: var(--accent);
}

.chat-copy-message-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 520px) {
  .chat-copy-message-button {
    width: 30px;
    padding: 0;
    justify-content: center;
  }

  .chat-copy-message-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.chat-message p {
  color: var(--text);
  font-size: 13px;
  line-height: 1.42;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hermes-thinking {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.hermes-thinking-orbit {
  position: relative;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(15, 118, 110, .14);
  border-top-color: var(--accent);
  border-right-color: rgba(15, 118, 110, .55);
  border-radius: 50%;
  animation: hermes-spin .9s linear infinite;
}

.hermes-thinking-orbit::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(15, 118, 110, .28);
  animation: hermes-beat 1.05s ease-in-out infinite;
}

.hermes-thinking-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.hermes-thinking-copy strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}

.hermes-thinking-copy span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-message.deferred-job .hermes-thinking-copy span {
  white-space: normal;
  text-overflow: clip;
}

.hermes-thinking-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.hermes-thinking-elapsed {
  min-width: 48px;
  padding: 4px 7px;
  border: 1px solid rgba(15, 118, 110, .16);
  border-radius: 7px;
  background: rgba(255, 255, 255, .72);
  color: var(--text);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 780;
  text-align: center;
}

.hermes-progress-journal {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 118, 110, .12);
}

.hermes-progress-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
}

.hermes-progress-head strong {
  color: var(--text);
}

.hermes-progress-head span {
  min-width: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: right;
  word-break: break-word;
}

.hermes-progress-journal ol {
  display: grid;
  gap: 7px;
  max-height: 108px;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  padding-right: 5px;
  scrollbar-color: rgba(15, 118, 110, .34) transparent;
  scrollbar-width: thin;
  list-style: none;
}

.hermes-progress-journal ol::-webkit-scrollbar {
  width: 6px;
}

.hermes-progress-journal ol::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(15, 118, 110, .28);
}

.hermes-progress-journal li {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-left: 10px;
  border-left: 2px solid rgba(15, 118, 110, .32);
}

.chat-message.deferred-job {
  border-color: rgba(37, 99, 235, .18);
  background: linear-gradient(180deg, #f7fbff 0%, #f6fbfa 100%);
}

.chat-message.deferred-job .hermes-progress-head {
  padding: 7px 8px;
  border: 1px solid rgba(37, 99, 235, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
}

.chat-message.deferred-job .hermes-progress-journal li {
  border-left-color: rgba(37, 99, 235, .42);
}

.chat-message.deferred-job .hermes-thinking-orbit {
  border-color: rgba(37, 99, 235, .14);
  border-top-color: #2563eb;
  border-right-color: rgba(15, 118, 110, .55);
}

.hermes-progress-journal li strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hermes-progress-journal li span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.32;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hermes-progress-journal li:last-child {
  border-left-color: var(--accent);
}

.hermes-progress-journal li:last-child strong {
  color: var(--accent-2);
}

.chat-message.progress-complete {
  border-color: rgba(15, 118, 110, .16);
  background: #f7fcfb;
}

.chat-message.progress-complete .hermes-thinking-orbit,
.chat-message.progress-complete .hermes-thinking-orbit::after {
  animation: none;
}

.chat-message.progress-complete .hermes-thinking-orbit {
  border-color: rgba(15, 118, 110, .24);
  background: rgba(15, 118, 110, .08);
}

.hermes-thinking-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .32;
  animation: hermes-dot 1.1s ease-in-out infinite;
}

.hermes-thinking-dots i:nth-child(2) {
  animation-delay: .16s;
}

.hermes-thinking-dots i:nth-child(3) {
  animation-delay: .32s;
}

@keyframes hermes-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes hermes-beat {
  0%,
  100% {
    transform: scale(.76);
    box-shadow: 0 0 0 0 rgba(15, 118, 110, .24);
  }

  50% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(15, 118, 110, 0);
  }
}

@keyframes hermes-dot {
  0%,
  100% {
    opacity: .28;
    transform: translateY(0);
  }

  45% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hermes-thinking-orbit,
  .hermes-thinking-orbit::after,
  .hermes-thinking-dots i {
    animation: none;
  }
}

@media (max-width: 560px) {
  .hermes-thinking {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }

  .hermes-thinking-dots {
    display: none;
  }

  .hermes-progress-head {
    display: grid;
    gap: 3px;
    justify-content: stretch;
  }

  .hermes-progress-head span {
    text-align: left;
  }
}

.chat-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.chat-attachment-list span,
.ai-attachment-chip {
  border: 1px solid rgba(80, 108, 111, .16);
  border-radius: 999px;
  background: #fff;
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 780;
  padding: 5px 8px;
}

.ai-attachment-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 34px;
  margin: 10px 0 0;
  overflow: auto;
}

.ai-attachment-chip {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  max-width: 250px;
  min-height: 32px;
  cursor: pointer;
}

.ai-attachment-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-attachment-chip small {
  color: var(--muted);
  font-size: 11px;
}

.ai-drop-hint {
  display: grid;
  place-items: center;
  min-height: 46px;
  margin-top: 10px;
  border: 1px dashed var(--accent);
  border-radius: 16px;
  background: #edf8f6;
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 850;
}

.ai-panel.dragging-files {
  border-color: var(--accent);
}

.chat-composer {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 10px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(80, 108, 111, .2);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(15, 35, 55, .08);
}

.chat-composer textarea {
  min-height: 44px;
  max-height: 168px;
  border: 0;
  resize: none;
  padding: 11px 2px;
  outline: none;
  background: transparent;
  color: var(--text);
}

.chat-send-stack {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.ai-long-task-toggle {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(80, 108, 111, .18);
  border-radius: 999px;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.ai-long-task-toggle input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
}

.ai-long-task-toggle:has(input:checked) {
  border-color: rgba(15, 118, 110, .38);
  background: rgba(15, 118, 110, .08);
  color: var(--accent-2);
}

.chat-icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 1px solid rgba(80, 108, 111, .18);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, color .16s ease, background .16s ease;
}

.chat-icon-button:hover,
.chat-icon-button:focus-visible {
  border-color: var(--accent);
  color: var(--accent-2);
  transform: translateY(-1px);
}

.chat-icon-button svg,
.floating-ai-chat-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-icon-button.send {
  background: #172033;
  color: #fff;
  border-color: #172033;
}

.chat-icon-button.voice.recording {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.chat-icon-button:disabled {
  cursor: wait;
  opacity: .56;
  transform: none;
}

.floating-ai-chat-button {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 121;
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(23, 32, 51, .18);
  border-radius: 50%;
  background: #172033;
  color: #fff;
  box-shadow: 0 18px 48px rgba(15, 35, 55, .28);
  cursor: pointer;
}

.floating-ai-chat-button.active {
  display: none;
}

.mobile-nav {
  display: none;
}

.floating-voice-button {
  position: fixed;
  right: calc(max(18px, env(safe-area-inset-right)) + 76px);
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 121;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  box-shadow: 0 16px 36px rgba(15, 118, 110, .32);
}

.floating-voice-button.recording {
  background: var(--danger);
}

.floating-voice-button svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.floating-voice-status {
  position: fixed;
  right: calc(max(18px, env(safe-area-inset-right)) + 76px);
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 76px);
  z-index: 122;
  width: min(320px, calc(100vw - 36px));
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: white;
  box-shadow: var(--shadow);
}

.floating-voice-status[hidden] {
  display: none;
}

.floating-voice-status strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}

.floating-voice-status p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.voice-recording-meter {
  --voice-level: 0;
  display: grid;
  grid-template-columns: auto auto minmax(120px, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 38px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(15, 118, 110, .2);
  border-radius: 14px;
  background: #f4fbfa;
  color: var(--accent-2);
}

.voice-recording-meter[hidden] {
  display: none;
}

#ai-voice-meter {
  margin: 10px 2px 0;
}

.voice-recording-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 0 rgba(220, 38, 38, .34);
  animation: voiceDotPulse 1.25s ease-in-out infinite;
}

.voice-recording-copy {
  white-space: nowrap;
  font-size: 12px;
  font-weight: 880;
}

.voice-meter-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(15, minmax(3px, 1fr));
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 18px;
  overflow: hidden;
}

.voice-meter-track span {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: rgba(21, 94, 117, .36);
  transform: scaleY(calc(.8 + var(--voice-level) * 4));
  transform-origin: center;
  transition: height .12s ease, transform .12s ease, background .12s ease;
}

.voice-recording-meter[data-speaking="false"] .voice-meter-track span {
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(21, 94, 117, .42) 0 8px, transparent 8px 13px);
  animation: voiceIdleDots 1.1s linear infinite;
}

.voice-recording-meter[data-speaking="true"] .voice-meter-track span {
  height: 10px;
  background: linear-gradient(180deg, #0f766e, #155e75);
  animation: voiceWave 620ms ease-in-out infinite;
}

.voice-recording-meter[data-speaking="true"] .voice-meter-track span:nth-child(2n) {
  animation-delay: -120ms;
}

.voice-recording-meter[data-speaking="true"] .voice-meter-track span:nth-child(3n) {
  animation-delay: -240ms;
}

.voice-recording-meter[data-speaking="true"] .voice-meter-track span:nth-child(5n) {
  animation-delay: -360ms;
}

@keyframes voiceDotPulse {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .34); }
  70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

@keyframes voiceIdleDots {
  from { opacity: .48; transform: translateX(-4px) scaleY(.9); }
  to { opacity: .84; transform: translateX(4px) scaleY(.9); }
}

@keyframes voiceWave {
  0%, 100% { transform: scaleY(calc(.8 + var(--voice-level) * 2.5)); }
  50% { transform: scaleY(calc(1.2 + var(--voice-level) * 5.5)); }
}

body[data-network="offline"] #network-status {
  color: var(--danger);
}

@media (max-width: 1120px) {
  .app-shell {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .content-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-panel {
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 76px);
    width: min(680px, calc(100vw - 28px));
    height: min(720px, calc(100vh - 108px));
  }
}

@media (max-width: 760px) {
  body {
    padding-bottom: 156px;
  }

  .app-shell {
    display: block;
  }

  .sidebar {
    position: static;
    height: auto;
    padding: 14px 14px 8px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .workspace {
    padding: 12px 14px 18px;
  }

  .account-strip {
    justify-content: flex-start;
    gap: 6px;
    min-height: 44px;
    margin: 0;
    padding: 8px 14px;
    overflow-x: auto;
  }

  .mobile-main-menu-button {
    display: inline-grid !important;
    flex: 0 0 auto;
    place-items: center;
    gap: 3px;
    width: 38px;
    min-width: 38px;
    height: 34px;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    background: #fff !important;
    padding: 0 !important;
  }

  .mobile-main-menu-button span {
    display: block;
    width: 17px;
    height: 2px;
    border-radius: 999px;
    background: var(--text);
  }

  .account-strip > span {
    flex: 0 0 auto;
    max-width: 46vw;
  }

  #account-name {
    margin-left: auto;
  }

  .mobile-main-menu {
    position: fixed;
    z-index: 95;
    inset: var(--account-strip-height) 0 0 0;
    background: rgba(15, 23, 42, .32);
  }

  .mobile-main-menu:not([hidden]) {
    display: block;
  }

  .mobile-main-menu-panel {
    width: min(330px, calc(100vw - 46px));
    min-height: 100%;
    padding: 14px;
    border-right: 1px solid var(--border);
    background: #fbfdfc;
    box-shadow: 18px 0 45px rgba(15, 35, 55, .16);
  }

  .mobile-main-menu-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }

  .mobile-main-menu-panel header strong {
    font-size: 18px;
  }

  .mobile-main-menu-panel header button {
    min-height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--accent-2);
    font-weight: 850;
    padding: 0 10px;
  }

  .mobile-main-menu-panel nav {
    display: grid;
    gap: 8px;
  }

  .mobile-main-menu-panel nav button {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 46px;
    border: 1px solid #d8e2ea;
    border-radius: 7px;
    background: #fff;
    color: var(--text);
    padding: 6px 10px;
    text-align: left;
    font-weight: 850;
  }

  .mobile-main-menu-panel nav button.active {
    border-color: var(--accent);
    background: #e7f5f2;
    color: #0f513b;
  }

  .mobile-main-menu-panel nav button:disabled {
    opacity: .48;
  }

  .mobile-menu-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background: #172033;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
  }

  [data-mobile-app-view="knowledge"] .mobile-menu-mark {
    background: #7c3aed;
  }

  [data-mobile-app-view="task-center"] .mobile-menu-mark {
    background: #b45309;
  }

  [data-mobile-app-view="analytics"] .mobile-menu-mark {
    background: #155e75;
  }

  [data-mobile-app-view="settings"] .mobile-menu-mark {
    background: #475467;
  }

  body[data-mobile-mode="folders"] .sidebar {
    display: none;
  }

  .topbar {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
  }

  .topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .brand {
    display: none;
  }

  #add-folder,
  #add-label,
  .label-delete {
    display: none;
  }

  .mobile-view-switch {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
  }

  .mobile-view-switch button {
    min-height: 34px;
    border: 0;
    border-radius: 999px;
    padding: 0 12px;
    background: transparent;
    color: var(--muted);
    font-weight: 850;
  }

  .mobile-view-switch button.active {
    background: var(--surface-2);
    color: var(--accent-2);
  }

  .ghost-link {
    display: none;
  }

  .compose-row, .compose-row-three, .content-grid, .editor-tools {
    grid-template-columns: 1fr;
  }

  body.ai-chat-open {
    overflow: hidden;
  }

  body.ai-chat-open .mobile-nav,
  body.ai-chat-open .floating-voice-button,
  body.ai-chat-open .floating-voice-status {
    display: none;
  }

  .ai-panel {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 240;
    width: auto;
    height: auto;
    max-height: none;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    border-radius: 0;
    border: 0;
  }

  .ai-head {
    margin-bottom: 8px;
  }

  .ai-panel h3 {
    font-size: 19px;
  }

  .ai-head p {
    font-size: 12px;
    line-height: 1.28;
  }

  .chat-messages {
    gap: 9px;
    padding: 10px;
    border-radius: 16px;
  }

  .chat-message {
    max-width: 96%;
  }

  .chat-composer {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border-radius: 18px;
  }

  #ai-attach {
    grid-column: 1;
    grid-row: 2;
  }

  .chat-composer textarea {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 108px;
    max-height: 260px;
    padding: 12px 4px;
    font-size: 16px;
  }

  .chat-send-stack {
    grid-column: 3;
    grid-row: 2;
    flex-direction: row;
    gap: 6px;
    justify-content: end;
  }

  .ai-long-task-toggle {
    min-height: 32px;
    padding: 5px 8px;
    font-size: .72rem;
  }

  .chat-icon-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  .floating-ai-chat-button {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(84px, calc(env(safe-area-inset-bottom) + 84px));
    width: 54px;
    height: 54px;
  }

  .quick-compose {
    display: none;
  }

  body.compose-open .quick-compose {
    display: grid;
  }

  .blocks-toolbar {
    display: none;
  }

  .notes-panel,
  .tasks-panel {
    max-height: none;
    overflow: visible;
  }

  body[data-mobile-view="tasks"] .notes-panel,
  body[data-mobile-view="notes"] .tasks-panel {
    display: none;
  }

  body[data-mobile-mode="folders"][data-mobile-folder="root"] .content-grid {
    display: none;
  }

  body[data-mobile-mode="folders"][data-mobile-folder="root"] .quick-compose {
    display: none;
  }

  .label-row small {
    display: none;
  }

  .label-row {
    grid-template-columns: 10px minmax(0, 1fr);
  }

  .fullscreen-edit {
    top: var(--account-strip-height);
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0;
    padding: 16px;
  }

  .quick-compose, .notes-panel, .tasks-panel {
    box-shadow: none;
  }

  .record-section-body {
    padding: 8px;
  }

  .note-row,
  .task-row {
    padding: 10px;
  }

  .row-actions {
    justify-content: flex-start;
  }

  .note-preview-content {
    max-height: 13.5em;
    -webkit-line-clamp: 10;
  }

  .folder-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 1fr);
    grid-template-columns: none;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .folder-row-line {
    grid-template-columns: minmax(0, 1fr);
  }

  .folder-row-line[draggable="true"] .folder-row {
    cursor: pointer;
  }

  .folder-row {
    min-height: 46px;
    padding: 0 8px;
    scroll-snap-align: start;
  }

  .folder-row small {
    display: none;
  }

  .folder-row-wrap {
    display: block;
  }

  .folder-actions {
    display: none;
  }

  .panel-drag-handle {
    display: none;
  }

  .inline-edit-grid {
    grid-template-columns: 1fr;
  }

  .labels-section {
    margin-top: 14px;
    padding-top: 12px;
  }

  .labels-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    overflow: visible;
  }

  .label-row-wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .label-row {
    min-height: 36px;
    border-color: var(--border);
    background: #fff;
  }

  .mobile-nav {
    position: fixed;
    z-index: 30;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px max(14px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));
    border-top: 1px solid var(--border);
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(14px);
  }

  .mobile-folder-browser {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
  }

  .mobile-folder-browser[hidden] {
    display: none;
  }

  .mobile-folder-root-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 2px;
  }

  .mobile-folder-root-head h3 {
    font-size: 26px;
    line-height: 1.1;
  }

  .mobile-folder-root-head span {
    color: var(--muted);
    font-weight: 800;
  }

  .mobile-folder-list {
    display: grid;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
  }

  .mobile-folder-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto 20px;
    gap: 10px;
    align-items: center;
    min-height: 62px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 9px 10px;
    background: #fff;
    color: var(--text);
    text-align: left;
  }

  .mobile-folder-card:last-child {
    border-bottom: 0;
  }

  .mobile-folder-card-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    background: color-mix(in srgb, #d7a928 16%, white);
    color: #b8890d;
  }

  .mobile-folder-card-icon svg,
  .mobile-folder-card-chevron,
  .mobile-folder-back svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-folder-card-text {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .mobile-folder-card-text strong {
    overflow-wrap: anywhere;
    font-size: 17px;
    line-height: 1.18;
  }

  .mobile-folder-card-text small,
  .mobile-folder-card-count {
    color: var(--muted);
    font-size: 14px;
    font-weight: 760;
  }

  .mobile-folder-card-chevron {
    color: #98a2b3;
  }

  .mobile-folder-header {
    position: sticky;
    top: 0;
    z-index: 12;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 58px;
    margin: -2px -2px 8px;
    padding: 6px 2px;
    background: color-mix(in srgb, var(--bg) 86%, white);
    backdrop-filter: blur(14px);
  }

  .mobile-folder-back {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: #101828;
    box-shadow: 0 8px 22px rgba(15, 35, 55, .10);
  }

  .mobile-folder-header strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 21px;
    line-height: 1.1;
  }

  .mobile-folder-header span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 760;
  }

  .floating-voice-button {
    display: grid;
    right: calc(max(14px, env(safe-area-inset-right)) + 68px);
    bottom: max(84px, calc(env(safe-area-inset-bottom) + 84px));
    width: 54px;
    height: 54px;
  }

  .floating-voice-status {
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 142px);
  }

  .mobile-search-wrap {
    position: relative;
  }

  .mobile-search-label {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 35, 55, .08);
  }

  .mobile-search-label svg,
  .mobile-action-row svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-search-label input {
    border: 0;
    padding: 0;
    box-shadow: none;
    min-height: 44px;
    font-weight: 760;
  }

  .mobile-search-results {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 10px);
    max-height: min(58vh, 460px);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 8px;
  }

  .mobile-search-result {
    display: grid;
    gap: 3px;
    width: 100%;
    min-height: 64px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    padding: 8px 6px;
    color: var(--text);
    text-align: left;
  }

  .mobile-search-result:last-child {
    border-bottom: 0;
  }

  .mobile-search-result span,
  .mobile-search-result small,
  .search-empty {
    color: var(--muted);
    font-size: 13px;
  }

  .mobile-search-result mark {
    background: #fde68a;
    color: #111827;
  }

  .mobile-action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
  }

  .mobile-action-group {
    display: inline-flex;
    gap: 12px;
  }

  .mobile-action-group.primary {
    justify-content: flex-end;
  }

  .mobile-action-row button {
    display: grid;
    place-items: center;
    width: 56px;
    min-width: 56px;
    height: 56px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #101828;
    font-weight: 820;
    box-shadow: 0 10px 26px rgba(15, 35, 55, .12);
  }

  .mobile-action-group.primary button {
    background: var(--surface-2);
    color: var(--accent-2);
  }

  .mobile-mode-toggle.active {
    background: #102033;
    color: #fff;
  }
}


/* Task Center C2 foundation */
.app-menu{display:grid;gap:6px;margin:14px 0}.app-menu button{width:100%;border:1px solid #dbe4f0;background:#fff;color:#172033;border-radius:8px;padding:10px 12px;text-align:left;font-weight:800;cursor:pointer}.app-menu button.active{background:#0f766e;color:#fff;border-color:#0f766e}.app-menu button:disabled{opacity:.45;cursor:not-allowed}body[data-app-view="task-center"] .quick-compose,body[data-app-view="task-center"] .blocks-toolbar,body[data-app-view="task-center"] .content-grid,body[data-app-view="task-center"] #mobile-folder-browser{display:none}body[data-app-view="notes"] #task-center-view{display:none}.task-center-view{padding:0 0 42px}.task-center-page{display:grid;gap:16px}.task-center-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid #dbe4f0;padding-bottom:14px}.task-center-head h2{margin:0 0 6px;font-size:28px}.task-center-head p,.task-center-notices p{margin:0;color:#667085;line-height:1.45}.task-center-badge{border:1px solid #0f766e;color:#0f766e;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;text-transform:uppercase}.task-center-notices{display:grid;gap:8px;background:#f7fbfa;border:1px solid #cce7e2;border-radius:8px;padding:14px}.task-center-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.task-center-section{border:1px solid #dbe4f0;border-radius:8px;background:#fff;padding:14px;min-width:0}.task-center-section:first-child{grid-column:1/-1}.task-center-section h3{margin:0 0 12px;font-size:18px}.task-center-draft{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;border:1px solid #edf1f6;border-radius:8px;padding:12px;margin-bottom:10px}.task-center-draft h3{margin:0 0 6px;font-size:16px}.task-center-draft p{margin:0 0 8px;color:#475467;line-height:1.4}.task-center-actions{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;justify-content:flex-end}.task-center-actions button,.task-center-validation-row button{border:1px solid #dbe4f0;background:#fff;border-radius:8px;padding:8px 10px;font-weight:800;cursor:pointer}.task-center-actions button:first-child{background:#0f766e;border-color:#0f766e;color:#fff}.task-center-validation-row{display:grid;gap:6px;border-top:1px solid #edf1f6;padding:10px 0}.task-center-validation-row:first-of-type{border-top:0}.task-center-validation-row span,.task-center-validation-row small{color:#667085}.task-center-validation-row.warning{background:#fff8f0;border:1px solid #fed7aa;border-radius:8px;padding:10px}.empty-state.error{color:#b42318;background:#fff1f0;border-color:#ffd0cc}@media (max-width:900px){.task-center-grid{grid-template-columns:1fr}.task-center-draft{grid-template-columns:1fr}.task-center-actions{justify-content:flex-start}}


/* Notes submenu scope hotfix */
body[data-app-view="task-center"] #add-folder,
body[data-app-view="task-center"] #folders-list,
body[data-app-view="task-center"] .labels-section,
body[data-app-view="task-center"] .mobile-nav {
  display: none !important;
}

body[data-app-view="knowledge"] .mobile-nav {
  display: none !important;
}


/* Notes submenu order hotfix */
.notes-submenu {
  display: grid;
  gap: 8px;
  margin: 2px 0 10px;
}
.notes-submenu[hidden] {
  display: none !important;
}
body[data-app-view="task-center"] .notes-submenu {
  display: none !important;
}
body[data-app-view="analytics"] .notes-submenu,
body[data-app-view="analytics"] .quick-compose,
body[data-app-view="analytics"] .blocks-toolbar,
body[data-app-view="analytics"] .content-grid,
body[data-app-view="analytics"] #mobile-folder-browser {
  display: none !important;
}
.app-menu .notes-submenu button {
  width: auto;
  text-align: inherit;
}
.app-menu .notes-submenu #add-folder {
  width: 100%;
  margin: 4px 0 8px;
  border: 0;
  background: var(--accent);
  color: #fff;
  text-align: center;
}
.app-menu .notes-submenu .labels-head button {
  width: auto;
  border: 0;
  background: transparent;
  color: var(--accent-2);
  padding: 4px 6px;
  min-height: 30px;
  text-align: center;
}


/* Task Center D1/D2 balanced foundation */
.task-center-tabs{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid #dbe4f0;padding-bottom:10px}.task-center-tabs button{border:1px solid #dbe4f0;background:#fff;border-radius:8px;padding:8px 10px;font-weight:800;cursor:pointer}.task-center-tabs button.active{background:#172033;color:#fff;border-color:#172033}.task-center-details{border:1px solid #edf1f6;border-radius:8px;padding:10px;margin-top:10px;background:#fbfcfe}.task-center-details summary{cursor:pointer;font-weight:800}.preview-grid,.queue-strip{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.preview-grid span,.queue-strip span{border:1px solid #dbe4f0;border-radius:8px;background:#fff;padding:6px 8px;font-size:12px;font-weight:800;color:#344054}.raw-json-wrap{margin-top:8px}.raw-json-wrap>button{border:1px solid #dbe4f0;background:#fff;border-radius:8px;padding:6px 8px;font-weight:800;cursor:pointer}.raw-json-wrap pre{display:none;max-height:320px;overflow:auto;background:#111827;color:#f9fafb;border-radius:8px;padding:12px;font-size:12px;line-height:1.45}.raw-json-wrap.open pre{display:block}.transcript-box{white-space:pre-wrap;max-height:420px;overflow:auto;background:#f8fafc;border:1px solid #dbe4f0;border-radius:8px;padding:12px;line-height:1.55}.task-center-section ul{margin:8px 0 0;padding-left:20px}.task-center-section code{font-size:12px;word-break:break-word}@media (max-width:900px){.task-center-tabs{display:grid;grid-template-columns:1fr 1fr}.queue-strip{display:grid}.transcript-box{max-height:300px}}

/* Task Center D3 publish preview */
.preview-label{display:grid;gap:6px;margin:0 0 10px;font-weight:800;color:#344054}.preview-label input,.preview-label textarea{width:100%;border:1px solid #dbe4f0;border-radius:8px;padding:10px;font:inherit;background:#fff;color:#172033}.preview-label textarea{resize:vertical;line-height:1.5}

/* CRM voice calibration refinement */
.transcript-panel{display:grid;gap:8px;border:1px solid var(--border);border-radius:var(--radius);background:#fbfdfc;padding:8px 10px}
.panel-head{display:flex;gap:8px;align-items:center;justify-content:space-between}
.transcript-panel button[data-panel-toggle],.weak-item button{width:100%;border:0;background:transparent;color:var(--text);text-align:left;font-weight:850;padding:4px 0}
.transcript-panel button[data-panel-toggle]::after,.weak-item button::after{content:" раскрыть";color:var(--muted);font-size:12px;font-weight:700}
.transcript-panel button[data-panel-toggle][aria-expanded="true"]::after,.weak-item button[aria-expanded="true"]::after{content:" скрыть"}
.copy-button{border:1px solid var(--border);border-radius:var(--radius);background:#fff;color:var(--accent-2);font-size:12px;font-weight:850;min-height:30px;padding:0 9px;white-space:nowrap}
.inline-voice-detail{margin-top:12px;border-style:dashed;background:#fbfdfc}
.voice-drilldown-page .inline-voice-detail{display:grid;margin-top:0;border-style:solid;background:#fff}
.watch-voice-button{width:100%;min-height:48px;margin-top:auto;border:1px solid var(--accent);border-radius:var(--radius);background:var(--accent);color:#fff;font-weight:850;padding:0 12px;text-align:center}
.voice-drilldown-top{display:flex;justify-content:flex-end}
.client-knowledge-box{display:grid;gap:8px;border:1px solid #cce7e2;border-radius:var(--radius);background:#f7fbfa;padding:10px}
.client-knowledge-box h5,.vocabulary-learning h5{margin:0;font-size:15px}
.client-knowledge-box div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:8px;border-top:1px solid #dbeeea;padding-top:6px}
.client-knowledge-box span{color:var(--muted);font-size:12px}
.client-knowledge-box strong{min-height:18px;overflow-wrap:anywhere}
.vocabulary-learning.compact{background:#f7fbfa}
.knowledge-candidate textarea{width:100%;border:1px solid var(--border);border-radius:var(--radius);padding:10px;resize:vertical;line-height:1.45}
.knowledge-candidate textarea[readonly]{background:#f8fafc;color:#475467}
.knowledge-candidate.editing{border-color:#0f766e;box-shadow:0 0 0 2px rgba(15,118,110,.12)}
.knowledge-candidate label{display:grid;gap:5px;color:var(--muted);font-size:12px;font-weight:800}
.knowledge-candidate select{min-height:38px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;padding:0 10px}
.candidate-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch;justify-items:stretch}
.candidate-actions button{width:100%;min-height:44px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;color:var(--accent-2);font-weight:850;padding:0 10px;text-align:center}
.candidate-actions button:nth-child(1),.candidate-actions button:nth-child(2){grid-column:1 / -1}
.candidate-actions button:first-child,.candidate-actions button:nth-child(2){background:#15803d;border-color:#15803d;color:#fff}
.candidate-actions .danger-action{background:#b42318;border-color:#b42318;color:#fff}
.approved-card pre{white-space:pre-wrap;overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.5}
@media (max-width:760px){.client-knowledge-box div{grid-template-columns:1fr}}

/* F7 owner review card polish */
.owner-review-candidate .knowledge-candidate textarea,
.owner-review-current textarea[data-knowledge-text] {
  height: 190px;
  max-height: 220px;
  min-height: 150px;
  overflow: auto;
  resize: vertical;
  font-size: 13px;
  line-height: 1.42;
}

.owner-review-current .candidate-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.owner-review-current .candidate-actions button {
  min-height: 36px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 1.18;
}

.owner-review-current .candidate-actions button:nth-child(1),
.owner-review-current .candidate-actions button:nth-child(2) {
  grid-column: 1 / -1;
}

.owner-review-current .candidate-actions button:nth-child(1) {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
}

.owner-review-current .candidate-actions button:nth-child(2) {
  background: #fff;
  border-color: #b7c2d0;
  color: #475467;
}

.owner-review-current .candidate-actions button:nth-child(3) {
  background: #fffbeb;
  border-color: #f2d18c;
  color: #92400e;
}

.owner-review-current .candidate-actions button:nth-child(4) {
  background: #fff;
  border-color: #b7c2d0;
  color: #475467;
}

.owner-review-current .candidate-actions button:nth-child(3),
.owner-review-current .candidate-actions button:nth-child(4),
.owner-review-current .candidate-actions button:nth-child(5) {
  min-height: 34px;
}

.owner-review-current .candidate-actions button:nth-child(5) {
  grid-column: 1 / -1;
}

.owner-review-current .candidate-actions .danger-action {
  background: #b42318;
  border-color: #b42318;
  color: #fff;
}

.knowledge-candidate {
  position: relative;
  overflow: hidden;
  transform-origin: center top;
}

.knowledge-candidate[data-decision-busy="1"] {
  border-color: rgba(21, 128, 61, .42);
  box-shadow: 0 14px 34px rgba(21, 128, 61, .12);
}

.knowledge-candidate.decision-exiting {
  z-index: 4;
  pointer-events: none;
  will-change: transform, opacity, filter;
  animation: knowledge-card-dive-away 820ms cubic-bezier(.2,.78,.12,1) both;
}

.knowledge-candidate.decision-exiting::before {
  content: attr(data-exit-label);
  position: absolute;
  inset: 12px 12px auto auto;
  z-index: 3;
  border: 1px solid rgba(21, 128, 61, .26);
  border-radius: 999px;
  background: #ecfdf3;
  color: #166534;
  box-shadow: 0 10px 22px rgba(21, 128, 61, .14);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
}

.knowledge-candidate.decision-exiting::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.82) 42%, rgba(255,255,255,0) 68%),
    radial-gradient(circle at 20% 18%, rgba(21,128,61,.16), rgba(21,128,61,0) 34%);
  animation: knowledge-card-confirm-flash 620ms ease-out both;
}

@keyframes knowledge-card-dive-away {
  0% {
    opacity: 1;
    filter: saturate(1);
    transform: translate3d(0,0,0) rotateX(0deg) rotateZ(0deg) scale(1);
  }
  18% {
    opacity: 1;
    filter: saturate(1.05);
    transform: translate3d(0,-18px,0) rotateX(7deg) rotateZ(0deg) scale(1.012);
  }
  58% {
    opacity: .86;
    filter: saturate(1.04);
    transform: translate3d(var(--knowledge-exit-mid-x, 26vw), 20px, 0) rotateX(15deg) rotateZ(3deg) scale(.94);
  }
  100% {
    opacity: 0;
    filter: saturate(.9) blur(1px);
    transform: translate3d(var(--knowledge-exit-x, 52vw), 92px, 0) rotateX(22deg) rotateZ(8deg) scale(.78);
  }
}

@keyframes knowledge-card-confirm-flash {
  0% { opacity: 0; transform: translateX(-44%); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translateX(44%); }
}

@media (prefers-reduced-motion: reduce) {
  .knowledge-candidate.decision-exiting {
    animation: knowledge-card-fade-away 180ms ease-out both;
  }
  .knowledge-candidate.decision-exiting::after {
    animation: none;
  }
}

@keyframes knowledge-card-fade-away {
  from { opacity: 1; }
  to { opacity: 0; }
}

.owner-review-current .watch-voice-button {
  min-height: 38px;
  margin-top: 0;
  font-size: 13px;
}

.owner-error-panel textarea[data-owner-feedback-notes] {
  height: 92px;
  min-height: 82px;
  max-height: 150px;
  resize: vertical;
  font-size: 13px;
}

.voice-audio-player{border:1px solid #dbe4f0;background:#fbfcfe;border-radius:8px;padding:12px;margin:12px 0;display:grid;gap:8px}
.voice-audio-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.voice-audio-head strong{font-size:14px;color:var(--text)}
.voice-audio-head a{border:1px solid #dbe4f0;border-radius:8px;background:#fff;color:var(--text);font-size:12px;font-weight:800;padding:6px 9px;text-decoration:none}
.voice-audio-player audio{width:100%;height:36px}
.voice-audio-player small{color:var(--muted);font-size:12px}

.calibration-ops{display:grid;grid-template-columns:minmax(220px,1fr) 160px;gap:10px;margin:12px 0}
.calibration-ops label{display:grid;gap:5px;color:var(--muted);font-size:12px;font-weight:800}
.calibration-ops input,.calibration-ops select{min-height:38px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;padding:0 10px}
.domain-strip{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}
.domain-strip span{border:1px solid #dbe4f0;background:#fff;border-radius:8px;padding:7px 9px;font-size:12px;color:var(--muted)}
.pagination-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0;color:var(--muted);font-size:12px;font-weight:800}
.pagination-row div{display:flex;gap:8px}
.pagination-row button{border:1px solid #dbe4f0;background:#fff;border-radius:8px;padding:7px 10px;font-weight:800;cursor:pointer}
.pagination-row button:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:760px){.calibration-ops{grid-template-columns:1fr}.pagination-row{align-items:flex-start;flex-direction:column}}

.voice-confidence-layer{display:grid;gap:10px;margin:12px 0;padding:12px;border:1px solid rgba(80,94,120,.22);border-radius:8px;background:#f8fafc;}
.confidence-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;}
.confidence-grid span,.crm-identity-strip span,.failure-strip span{display:inline-flex;gap:6px;align-items:center;padding:6px 8px;border-radius:6px;background:#fff;border:1px solid rgba(80,94,120,.16);font-size:12px;}
.crm-identity-strip,.failure-strip{display:flex;flex-wrap:wrap;gap:8px;}

/* Alt3 navigation, boot guard and tag surfaces - 2026-05-23 */
body.app-booting .quick-compose,
body.app-booting .blocks-toolbar,
body.app-booting .content-grid,
body.app-booting #task-center-view,
body.app-booting #analytics-view,
body.app-booting #knowledge-center-view,
body.app-booting #mobile-folder-browser {
  visibility: hidden;
}

.app-menu {
  gap: 8px;
}

.app-menu > button[data-app-view] {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  border-color: #d8e2ea;
  background: #fff;
  color: #1f2937;
  border-radius: 7px;
  padding: 6px 10px;
}

.app-menu > button[data-app-view="notes"]::after {
  content: "⌄";
  justify-self: end;
  color: var(--muted);
  font-size: 14px;
  transition: transform .16s ease;
}

.app-menu > button[data-app-view="notes"][aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.app-menu > button[data-app-view].active {
  border-color: #0f766e;
  background: #e7f5f2;
  color: #0f513b;
}

.app-menu > button[data-app-view]:disabled {
  cursor: not-allowed;
}

.menu-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: #172033;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.menu-icon svg,
.mobile-menu-mark svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-menu > button[data-app-view="knowledge"] .menu-icon {
  background: #2563eb;
}

.app-menu > button[data-app-view="task-center"] .menu-icon {
  background: #b45309;
}

.app-menu > button[data-app-view="analytics"] .menu-icon {
  background: #155e75;
}

.app-menu > button[data-app-view="agent-training"] .menu-icon {
  background: #047857;
}

.app-menu > button[data-app-view="settings"] .menu-icon {
  background: #475467;
}

.knowledge-center-submenu,
.agent-training-submenu {
  display: none;
  gap: 6px;
  margin: -2px 0 4px 34px;
}

body[data-app-view="knowledge"] .knowledge-center-submenu,
body[data-app-view="agent-training"] .agent-training-submenu {
  display: grid;
}

.knowledge-center-submenu button,
.agent-training-submenu button {
  width: 100%;
  border: 1px solid #cce7e2;
  border-radius: 8px;
  background: #f7fbfa;
  color: #0f4f48;
  padding: 8px 10px;
  text-align: left;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

body[data-app-view="knowledge"] .knowledge-center-submenu button,
body[data-app-view="agent-training"] .agent-training-submenu button {
  background: #e6f6f2;
  border-color: #9ed8cd;
  color: #0f766e;
}

body[data-app-view="knowledge"] .knowledge-center-submenu button.active,
body[data-app-view="agent-training"] .agent-training-submenu button.active {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}

/* Google Calendar settings admin - 2026-06-22 */
body[data-app-view="settings"] .quick-compose,
body[data-app-view="settings"] .blocks-toolbar,
body[data-app-view="settings"] .content-grid,
body[data-app-view="settings"] #mobile-folder-browser {
  display: none;
}

.settings-view {
  padding: 0 0 42px;
}

.settings-dashboard {
  --settings-bg: #f7fbfa;
  --settings-surface: #ffffff;
  --settings-border: #dbe4f0;
  --settings-text: #172033;
  --settings-muted: #667085;
  --settings-accent: #0f766e;
  --settings-info: #155e75;
  --settings-success: #047857;
  --settings-warning: #b45309;
  --settings-danger: #b42318;
  display: grid;
  gap: 16px;
}

.settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--settings-border);
  padding-bottom: 14px;
}

.settings-head h2 {
  margin: 0 0 6px;
  font-size: 28px;
  color: var(--settings-text);
}

.settings-head p {
  margin: 0;
  color: var(--settings-muted);
  line-height: 1.45;
}

.settings-primary-link,
.settings-actions a,
.settings-actions button,
.settings-table button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--settings-border);
  border-radius: 8px;
  background: #fff;
  color: var(--settings-text);
  padding: 8px 11px;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

.settings-primary-link {
  background: var(--settings-accent);
  border-color: var(--settings-accent);
  color: #fff;
}

.settings-primary-link.disabled,
.settings-actions a.disabled,
.settings-actions button:disabled,
.settings-table button:disabled {
  background: #f3f6f8;
  border-color: #d7e0ea;
  color: #98a2b3;
  opacity: 1;
  pointer-events: none;
  cursor: not-allowed;
}

.settings-primary-link svg,
.settings-actions svg,
.settings-table button svg,
.settings-panel header svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.settings-statusbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  border: 1px solid var(--settings-border);
  padding: 5px 10px;
  background: #fff;
  color: var(--settings-muted);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.settings-chip.success { border-color: #a7f3d0; background: #ecfdf5; color: var(--settings-success); }
.settings-chip.warning { border-color: #fed7aa; background: #fff7ed; color: var(--settings-warning); }
.settings-chip.danger { border-color: #fecaca; background: #fff1f0; color: var(--settings-danger); }
.settings-chip.info { border-color: #bae6fd; background: #f0f9ff; color: var(--settings-info); }

.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 14px;
}

.settings-panel {
  min-width: 0;
  border: 1px solid var(--settings-border);
  border-radius: 8px;
  background: var(--settings-surface);
  padding: 14px;
}

.settings-panel.wide {
  display: grid;
  gap: 12px;
}

.settings-panel header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--settings-text);
}

.settings-panel header h3 {
  margin: 0;
  font-size: 18px;
}

.settings-kv {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 9px 12px;
  margin: 0;
}

.settings-kv dt {
  color: var(--settings-muted);
  font-size: 13px;
  font-weight: 800;
}

.settings-kv dd {
  margin: 0;
  min-width: 0;
  color: var(--settings-text);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.settings-kv code,
.settings-table code {
  font-size: 12px;
  color: #344054;
  overflow-wrap: anywhere;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.settings-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #edf1f6;
  border-radius: 8px;
}

.settings-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: #fff;
}

.settings-table.compact {
  min-width: 680px;
}

.settings-table th,
.settings-table td {
  border-bottom: 1px solid #edf1f6;
  padding: 10px;
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}

.settings-table th {
  background: #f8fafc;
  color: #475467;
  font-weight: 850;
}

.settings-table tr:last-child td {
  border-bottom: 0;
}

.settings-empty,
.settings-loading,
.settings-alert {
  border: 1px solid var(--settings-border);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  color: var(--settings-muted);
  line-height: 1.45;
}

.settings-alert {
  display: grid;
  gap: 4px;
}

.settings-alert.success { border-color: #a7f3d0; background: #ecfdf5; color: var(--settings-success); }
.settings-alert.danger { border-color: #fecaca; background: #fff1f0; color: var(--settings-danger); }

@media (max-width: 900px) {
  .settings-head {
    display: grid;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .settings-kv {
    grid-template-columns: 1fr;
  }

  .settings-primary-link,
  .settings-actions a,
  .settings-actions button {
    width: 100%;
  }
}

.tag-scroll-box {
  display: grid;
  gap: 4px;
  max-height: 344px;
  min-height: 170px;
  padding: 7px;
  overflow: auto;
  resize: vertical;
  border: 1px solid #d8e2ea;
  border-radius: 7px;
  background: #fff;
}

.tag-scroll-box .label-row-wrap:nth-child(n+11) {
  margin-top: 0;
}

@media (max-width: 760px) {
  .app-menu {
    display: block;
  }

  .app-menu > button[data-app-view] {
    display: none;
  }

  .app-menu > .notes-submenu {
    display: grid;
    margin-top: 0;
  }

  .labels-list,
  .tag-scroll-box {
    display: grid;
    max-height: 308px;
    min-height: 150px;
    overflow: auto;
    resize: vertical;
  }
}

/* Alt 3 owner review transparency */
.transparency-band {
  display: grid;
  gap: 12px;
}
.transparency-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.transparency-head h3,
.transparency-head p {
  margin: 0;
}
.transparency-head p {
  color: #667085;
  line-height: 1.45;
}
.transparency-head > span {
  border: 1px solid #cfe8e2;
  color: #0f766e;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.transparency-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.transparency-controls {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(220px, 1fr);
  gap: 10px;
}
.transparency-controls label {
  display: grid;
  gap: 6px;
  color: #475467;
  font-size: 12px;
  font-weight: 800;
}
.transparency-controls select,
.transparency-controls input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: #172033;
}
.transparency-table {
  display: grid;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.transparency-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(180px, 1.2fr) minmax(180px, 1.2fr) minmax(160px, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid #edf1f6;
  align-items: start;
  min-width: 0;
}
.transparency-row:first-child {
  border-top: 0;
}
.transparency-row.head {
  background: #f6f8fb;
  color: #475467;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.transparency-row span {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.transparency-row strong,
.transparency-row b {
  display: block;
  color: #172033;
  font-size: 13px;
}
.transparency-row small {
  display: block;
  color: #667085;
  margin-top: 3px;
}
.transparency-row[data-route-action="approve_to_knowledge"] {
  border-left: 4px solid #0f766e;
}
.transparency-row[data-route-action="retry_to_review"] {
  border-left: 4px solid #d97706;
}
.transparency-row[data-route-action="rejected_negative_learning"],
.transparency-row[data-route-action="keep_untrusted_negative_learning"] {
  border-left: 4px solid #b42318;
}
.transparency-row[data-route-action="quarantine"] {
  border-left: 4px solid #7c2d12;
}
@media (max-width: 980px) {
  .transparency-metrics,
  .transparency-controls,
  .transparency-row {
    grid-template-columns: 1fr;
  }
  .transparency-head {
    display: grid;
  }
}

/* Alt 3 dashboard navigation and hidden-state fix - 2026-05-25 */
[hidden] {
  display: none !important;
}
body[data-app-view="notes"] #analytics-view,
body[data-app-view="task-center"] #analytics-view,
body[data-app-view="agent-training"] #analytics-view {
  display: none !important;
}
body[data-app-view="analytics"] .quick-compose,
body[data-app-view="analytics"] .blocks-toolbar,
body[data-app-view="analytics"] .content-grid,
body[data-app-view="analytics"] #mobile-folder-browser,
body[data-app-view="knowledge"] .quick-compose,
body[data-app-view="knowledge"] .blocks-toolbar,
body[data-app-view="knowledge"] .content-grid,
body[data-app-view="knowledge"] #mobile-folder-browser,
body[data-app-view="agent-training"] .quick-compose,
body[data-app-view="agent-training"] .blocks-toolbar,
body[data-app-view="agent-training"] .content-grid,
body[data-app-view="agent-training"] #mobile-folder-browser,
body[data-app-view="notes"] #knowledge-center-view,
body[data-app-view="task-center"] #knowledge-center-view,
body[data-app-view="analytics"] #knowledge-center-view,
body[data-app-view="agent-training"] #knowledge-center-view,
body[data-app-view="notes"] #agent-training-view,
body[data-app-view="task-center"] #agent-training-view,
body[data-app-view="analytics"] #agent-training-view {
  display: none !important;
}

/* Second Brain knowledge center - isolated route/view/data source - 2026-05-28 */
.knowledge-center-view {
  display: block;
}

.knowledge-loading {
  display: grid;
  place-items: center;
  min-height: 360px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #475467;
  font-weight: 850;
}

.knowledge-load-error {
  display: grid;
  gap: 6px;
  border: 1px solid #ffd0cc;
  border-radius: 8px;
  background: #fff1f0;
  color: #b42318;
  padding: 14px;
}

.knowledge-load-error span {
  color: #7a271a;
}

.knowledge-center-page {
  --kc-bg: #f7fafc;
  --kc-surface: #ffffff;
  --kc-ink: #172033;
  --kc-muted: #667085;
  --kc-border: #dbe4f0;
  --kc-accent: #2563eb;
  --kc-success: #0f766e;
  --kc-warning: #b45309;
  --kc-danger: #b42318;
  display: grid;
  gap: 14px;
  padding-bottom: 42px;
  color: var(--kc-ink);
}

.knowledge-center-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--kc-border);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff 0%, #eef7ff 100%);
}

.knowledge-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
}

.knowledge-center-head h2 {
  margin: 8px 0 4px;
  font-size: 28px;
  line-height: 1.12;
}

.knowledge-center-head p {
  max-width: 760px;
  margin: 0;
  color: var(--kc-muted);
  line-height: 1.45;
}

.knowledge-head-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.knowledge-head-actions button,
.knowledge-context-button,
.knowledge-context-pack button {
  border: 1px solid var(--kc-accent);
  border-radius: 8px;
  background: var(--kc-accent);
  color: #fff;
  padding: 9px 12px;
  font-weight: 900;
  cursor: pointer;
}

.knowledge-mode {
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #f0fdf4;
  color: #166534;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.knowledge-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 10px;
}

.knowledge-search {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--kc-border);
  border-radius: 8px;
  background: #fff;
  padding: 9px 12px;
}

.knowledge-search svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: #475467;
  stroke-width: 2;
}

.knowledge-search input,
.knowledge-toolbar select {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--kc-ink);
  font: inherit;
  outline: 0;
}

.knowledge-toolbar select {
  border: 1px solid var(--kc-border);
  border-radius: 8px;
  background: #fff;
  padding: 9px 12px;
  font-weight: 800;
}

.knowledge-filters {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 10px;
}

.knowledge-filters fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--kc-border);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.knowledge-filters legend {
  padding: 0 5px;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
}

.knowledge-filters label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  border: 1px solid #edf1f6;
  border-radius: 999px;
  padding: 4px 8px;
  background: #fbfcfe;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.knowledge-filters label.active {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}

.knowledge-filters input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #2563eb;
  cursor: pointer;
}

.knowledge-layout {
  display: grid;
  grid-template-columns: minmax(220px, 270px) minmax(420px, 1fr) minmax(280px, 340px);
  gap: 12px;
  align-items: start;
}

.knowledge-tree,
.knowledge-graph-panel,
.knowledge-inspector {
  min-width: 0;
  border: 1px solid var(--kc-border);
  border-radius: 8px;
  background: #fff;
}

.knowledge-tree,
.knowledge-inspector {
  max-height: calc(100vh - 190px);
  overflow: auto;
}

.knowledge-panel-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--kc-border);
  background: rgba(255, 255, 255, .96);
  padding: 10px 12px;
}

.knowledge-panel-head strong {
  font-size: 13px;
  text-transform: uppercase;
}

.knowledge-panel-head span {
  color: var(--kc-muted);
  font-size: 12px;
  font-weight: 850;
}

.knowledge-tree-group {
  border-bottom: 1px solid #edf1f6;
  padding: 0 8px 8px;
}

.knowledge-tree-group summary {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  padding: 10px 3px;
  color: #344054;
  font-size: 13px;
  font-weight: 900;
}

.knowledge-tree-node {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 7px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  padding: 7px;
  color: var(--kc-ink);
  text-align: left;
  cursor: pointer;
}

.knowledge-tree-node span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 850;
}

.knowledge-tree-node small {
  grid-column: 2;
  color: var(--kc-muted);
  font-size: 11px;
}

.knowledge-tree-node.active,
.knowledge-tree-node:hover {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.knowledge-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.knowledge-metrics div,
.knowledge-metrics button {
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfcfe;
  padding: 9px;
}

.knowledge-metrics button {
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.knowledge-metrics strong {
  display: block;
  font-size: 20px;
  line-height: 1;
}

.knowledge-metrics span {
  color: var(--kc-muted);
  font-size: 12px;
  font-weight: 850;
}

.knowledge-graph {
  position: relative;
  height: 620px;
  margin: 0 10px 10px;
  overflow: hidden;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background:
    linear-gradient(#eef2f7 1px, transparent 1px),
    linear-gradient(90deg, #eef2f7 1px, transparent 1px),
    #f8fafc;
  background-size: 34px 34px;
}

.knowledge-graph svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.knowledge-edge line {
  stroke: #94a3b8;
  stroke-width: 1.25;
  stroke-opacity: .58;
}

.knowledge-edge text {
  fill: #475467;
  font-size: 11px;
  font-weight: 800;
  paint-order: stroke;
  stroke: #f8fafc;
  stroke-width: 4px;
}

.knowledge-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 104px;
  min-height: 46px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .13);
  color: #111827;
  padding: 7px;
  text-align: center;
  cursor: pointer;
}

.knowledge-node span {
  font-size: 11px;
  font-weight: 900;
  line-height: 1.16;
}

.knowledge-node.active {
  outline: 3px solid #93c5fd;
  box-shadow: 0 12px 28px rgba(37, 99, 235, .24);
}

.knowledge-node.status-owner_review {
  border-style: dashed;
}

.knowledge-node.status-placeholder {
  opacity: .72;
}

.kc-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #64748b;
}

.type-project,
.kc-dot.type-project { background: #2563eb; color: #fff; }
.type-api,
.kc-dot.type-api { background: #0891b2; color: #fff; }
.type-db,
.kc-dot.type-db { background: #7c3aed; color: #fff; }
.type-menu,
.kc-dot.type-menu { background: #475569; color: #fff; }
.type-ui,
.kc-dot.type-ui { background: #0f766e; color: #fff; }
.type-agent,
.kc-dot.type-agent { background: #047857; color: #fff; }
.type-memory,
.kc-dot.type-memory { background: #b45309; color: #fff; }
.type-risk,
.kc-dot.type-risk { background: #b42318; color: #fff; }
.type-contract,
.kc-dot.type-contract { background: #334155; color: #fff; }

.knowledge-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 10px 12px;
}

.knowledge-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #edf1f6;
  border-radius: 999px;
  padding: 4px 7px;
  color: #344054;
  font-size: 11px;
  font-weight: 850;
}

.knowledge-inspector-card {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.knowledge-node-title {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.knowledge-node-title h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
}

.knowledge-node-title p,
.knowledge-inspector-card p {
  margin: 3px 0 0;
  color: var(--kc-muted);
  line-height: 1.45;
}

.knowledge-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.knowledge-status-row span {
  border: 1px solid #edf1f6;
  border-radius: 999px;
  padding: 4px 8px;
  background: #fbfcfe;
  color: #344054;
  font-size: 11px;
  font-weight: 900;
}

.knowledge-status-row .status-owner_review { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.knowledge-status-row .status-canonical { background: #ecfdf3; border-color: #bbf7d0; color: #166534; }
.knowledge-status-row .status-retrieval_safe { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.knowledge-status-row .status-placeholder { background: #f2f4f7; border-color: #d0d5dd; color: #475467; }

.knowledge-list-section {
  border-top: 1px solid #edf1f6;
  padding-top: 10px;
}

.knowledge-list-section h4,
.knowledge-relation-box h4,
.knowledge-context-pack h4 {
  margin: 0 0 7px;
  font-size: 13px;
  text-transform: uppercase;
}

.knowledge-list-section ul {
  margin: 0;
  padding-left: 18px;
  color: #344054;
  line-height: 1.45;
}

.knowledge-relation-box {
  display: grid;
  gap: 8px;
  border-top: 1px solid #edf1f6;
  padding-top: 10px;
}

.knowledge-relation-box div {
  display: grid;
  gap: 6px;
}

.knowledge-relation-box button {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 7px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfcfe;
  padding: 7px;
  color: #172033;
  text-align: left;
  cursor: pointer;
}

.knowledge-relation-box button span {
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
}

.knowledge-context-pack {
  display: grid;
  gap: 8px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  padding: 10px;
}

.knowledge-context-pack pre {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  border-radius: 8px;
  background: #101828;
  color: #f9fafb;
  padding: 10px;
  font-size: 11px;
  line-height: 1.45;
}

.knowledge-muted {
  color: var(--kc-muted);
  font-size: 12px;
}

@media (max-width: 1180px) {
  .knowledge-layout {
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
  }
  .knowledge-inspector {
    grid-column: 1 / -1;
    max-height: none;
  }
}

@media (max-width: 760px) {
  .knowledge-center-head,
  .knowledge-toolbar,
  .knowledge-filters,
  .knowledge-layout {
    grid-template-columns: 1fr;
  }
  .knowledge-center-head {
    display: grid;
  }
  .knowledge-head-actions {
    justify-items: stretch;
  }
  .knowledge-tree,
  .knowledge-inspector {
    max-height: none;
  }
  .knowledge-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .knowledge-graph {
    height: 560px;
    overflow: auto;
  }
  .knowledge-node {
    width: 96px;
  }
}


/* Alt 3 transparency route modal - 2026-05-25 */
.transparency-source-button {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.transparency-source-button:hover strong,
.transparency-source-button:focus-visible strong {
  color: #0f766e;
  text-decoration: underline;
}

/* Agent training packages - 2026-05-26 */
.agent-training-view {
  display: block;
}

.agent-training-head h3 {
  font-size: 24px;
}

.agent-training-brief {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid #cce7e2;
  border-radius: 8px;
  background: #f7fbfa;
  padding: 12px 14px;
  color: #0f4f48;
}

.agent-training-brief strong {
  font-size: 13px;
}

.agent-training-brief span {
  font-size: 13px;
  line-height: 1.45;
}

.agent-quality-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
  gap: 14px;
  align-items: stretch;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .06);
}

.agent-quality-chart,
.agent-learning-summary {
  min-width: 0;
  border: 1px solid #e6edf4;
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
  padding: 14px;
}

.agent-quality-chart {
  display: grid;
  gap: 10px;
}

.agent-quality-head,
.agent-learning-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.agent-quality-head p,
.agent-quality-status,
.agent-learning-summary small {
  color: #667085;
  font-size: 12px;
  line-height: 1.45;
}

.agent-quality-head h3 {
  margin-top: 3px;
  font-size: 19px;
}

.agent-quality-score {
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
}

.agent-quality-score strong {
  color: #172033;
  font-size: 32px;
  line-height: 1;
}

.agent-quality-score span {
  color: #475467;
  font-size: 12px;
  font-weight: 850;
}

.agent-accuracy-svg {
  display: block;
  width: 100%;
  min-height: 230px;
}

.agent-zone {
  stroke: none;
}

.agent-zone.critical {
  fill: #fff1f1;
}

.agent-zone.minimum {
  fill: #fff7d6;
}

.agent-zone.desired {
  fill: #eaf8ee;
}

.agent-zone.premium {
  fill: #e8f8fc;
}

.agent-accuracy-grid {
  stroke: #dbe4f0;
  stroke-width: 1;
}

.agent-accuracy-scale-label,
.agent-accuracy-label {
  fill: #667085;
  font-size: 12px;
  font-weight: 750;
}

.agent-accuracy-value {
  fill: #172033;
  font-size: 12px;
  font-weight: 900;
}

.agent-accuracy-area {
  pointer-events: none;
}

.agent-accuracy-line {
  fill: none;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.agent-accuracy-point {
  fill: #fff;
  stroke: currentColor;
  stroke-width: 3;
}

.agent-quality-critical .agent-accuracy-point,
.agent-quality-critical .agent-quality-score strong {
  color: #dc2626;
}

.agent-quality-minimum .agent-accuracy-point,
.agent-quality-minimum .agent-quality-score strong {
  color: #d97706;
}

.agent-quality-desired .agent-accuracy-point,
.agent-quality-desired .agent-quality-score strong {
  color: #16a34a;
}

.agent-quality-premium .agent-accuracy-point,
.agent-quality-premium .agent-quality-score strong {
  color: #0891b2;
}

.agent-quality-scale {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.agent-quality-scale span {
  min-height: 28px;
  border: 1px solid #e6edf4;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.agent-quality-scale .critical {
  background: #fff1f1;
  color: #991b1b;
}

.agent-quality-scale .minimum {
  background: #fff7d6;
  color: #92400e;
}

.agent-quality-scale .desired {
  background: #eaf8ee;
  color: #166534;
}

.agent-quality-scale .premium {
  background: #e8f8fc;
  color: #155e75;
}

.agent-learning-summary {
  display: grid;
  gap: 14px;
  width: 100%;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.agent-learning-summary:hover,
.agent-learning-summary:focus-visible {
  border-color: #0f766e;
  box-shadow: 0 14px 30px rgba(15, 118, 110, .12);
  outline: none;
}

.agent-learning-summary-head strong {
  font-size: 17px;
}

.agent-learning-number-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.agent-learning-number-grid span {
  display: grid;
  gap: 3px;
  min-height: 72px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfcfe;
  padding: 10px;
}

.agent-learning-number-grid strong {
  color: #172033;
  font-size: 25px;
  line-height: 1;
}

.agent-learning-number-grid small {
  color: #667085;
  font-size: 12px;
  line-height: 1.25;
}

.agent-learning-panel {
  width: min(1180px, 96vw);
}

.agent-learning-modal-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 18px 18px;
}

.agent-learning-detail-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  padding: 13px;
}

.agent-learning-detail-card.main {
  grid-column: 1 / -1;
}

.agent-learning-detail-card h4 {
  font-size: 15px;
}

.agent-learning-detail-card p {
  color: #667085;
  line-height: 1.45;
}

.agent-learning-big-score {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.agent-learning-big-score strong {
  color: #0f766e;
  font-size: 42px;
  line-height: .9;
}

.agent-learning-big-score span {
  color: #475467;
  font-weight: 900;
}

.agent-learning-progress-list,
.agent-skill-list {
  display: grid;
  gap: 8px;
}

.agent-learning-progress-list span,
.agent-skill-list article,
.agent-domain-score {
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfcfe;
  padding: 9px 10px;
}

.agent-skill-list article {
  display: grid;
  gap: 4px;
}

.agent-skill-list small {
  color: #0f766e;
  font-weight: 900;
}

.agent-learning-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.agent-learning-tags span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 30px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 6px 8px;
  color: #46536a;
  overflow-wrap: anywhere;
}

.agent-learning-two-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.agent-learning-number-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agent-domain-score-list {
  display: grid;
  gap: 8px;
}

.agent-domain-score {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.agent-domain-score.critical {
  border-color: #fecaca;
  background: #fff1f1;
}

.agent-domain-score.minimum {
  border-color: #fde68a;
  background: #fff7d6;
}

.agent-domain-score.desired {
  border-color: #bbf7d0;
  background: #eaf8ee;
}

.agent-domain-score.premium {
  border-color: #bae6fd;
  background: #e8f8fc;
}

.agent-training-mode-pill {
  display: flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  color: #475467;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
}

.agent-training-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.agent-package-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.agent-package-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.agent-package-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.agent-package-card h4 {
  margin: 3px 0 0;
  font-size: 17px;
  line-height: 1.25;
}

.agent-package-card small,
.agent-package-card p {
  color: #667085;
  line-height: 1.4;
}

.agent-package-card header > span {
  flex: 0 0 auto;
  border: 1px solid #f2d18c;
  border-radius: 999px;
  background: #fffbeb;
  color: #92400e;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 900;
}

.agent-package-progress {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf1f6;
}

.agent-package-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f766e, #15803d);
}

.agent-package-counters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.agent-package-counters span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfcfe;
  color: #667085;
  padding: 7px 8px;
  font-size: 12px;
}

.agent-package-counters strong {
  color: #172033;
}

.agent-package-open {
  min-height: 42px;
  border: 1px solid #0f766e;
  border-radius: 8px;
  background: #0f766e;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.agent-training-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.agent-training-voice-modal .transparency-modal-panel {
  max-width: 1040px;
}

/* Librarian agent training - 2026-05-27 */
.librarian-training-dashboard {
  --librarian-accent: #155e75;
  --librarian-safe: #0f766e;
  --librarian-warn: #b45309;
  --librarian-danger: #b42318;
}

.librarian-training-head h3 {
  color: #123044;
}

.librarian-brief {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #123044;
}

.librarian-quality-panel {
  border-color: #c7d2fe;
  background: #fff;
}

.librarian-control-grid,
.librarian-domain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.librarian-control-card,
.librarian-domain-card,
.librarian-tool-card,
.librarian-plan-list article {
  min-width: 0;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  padding: 13px;
}

.librarian-control-card {
  display: grid;
  gap: 10px;
  border-top: 4px solid var(--librarian-safe);
}

.librarian-control-card.warning {
  border-top-color: var(--librarian-warn);
  background: #fffdf7;
}

.librarian-control-card.danger {
  border-top-color: var(--librarian-danger);
  background: #fff8f8;
}

.librarian-control-card h4,
.librarian-domain-card h4,
.librarian-tool-card h4 {
  margin: 0;
  font-size: 15px;
}

.librarian-control-card ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: #475467;
  line-height: 1.35;
}

.librarian-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.librarian-tool-card {
  display: grid;
  gap: 8px;
}

.librarian-tool-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.librarian-tool-card header strong {
  overflow-wrap: anywhere;
  color: #172033;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
}

.librarian-tool-card header span,
.librarian-domain-card > span,
.librarian-plan-list small {
  flex: 0 0 auto;
  border: 1px solid #cfe8e2;
  border-radius: 999px;
  background: #f7fbfa;
  color: #0f766e;
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 900;
}

.librarian-tool-card p,
.librarian-domain-card p,
.librarian-plan-list span {
  margin: 0;
  color: #667085;
  line-height: 1.42;
}

.librarian-domain-card {
  display: grid;
  gap: 7px;
  border-left: 4px solid #155e75;
}

.librarian-domain-card small {
  color: #155e75;
  font-weight: 900;
}

.librarian-plan-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.librarian-plan-list article {
  display: grid;
  gap: 6px;
}

.librarian-plan-list strong {
  color: #155e75;
  font-size: 18px;
}

@media (max-width: 980px) {
  .agent-quality-panel,
  .agent-package-grid,
  .agent-training-card-grid,
  .agent-training-brief,
  .agent-learning-modal-body,
  .agent-learning-two-cols,
  .librarian-control-grid,
  .librarian-domain-grid,
  .librarian-tool-grid,
  .librarian-plan-list {
    grid-template-columns: 1fr;
  }

  .agent-quality-scale,
  .agent-learning-number-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-learning-panel {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }

  .agent-learning-panel header,
  .agent-learning-panel header > div,
  .agent-learning-modal-body,
  .agent-learning-detail-card,
  .agent-learning-progress-list span,
  .agent-skill-list article {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .agent-learning-panel header p {
    white-space: normal;
  }

  .agent-learning-modal-body {
    overflow-x: hidden;
  }
}
.transparency-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, .42);
}

.transparency-review-panel {
  width: min(1240px, 98vw);
}
.transparency-modal-card {
  display: grid;
  gap: 12px;
  padding: 14px 18px 18px;
}
.transparency-modal-card .owner-review-candidate {
  margin: 0;
  border: 1px solid #0f766e;
  background: #fff;
}
.transparency-modal-card .voice-drilldown-top {
  margin-bottom: 10px;
}
.transparency-route-summary-card {
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
}
.transparency-modal-panel {
  width: min(1120px, 96vw);
  max-height: 88vh;
  overflow: auto;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #f8fbfb;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .28);
}
.transparency-modal-panel > header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid #dbe4f0;
  background: #fff;
}
.transparency-modal-panel h3,
.transparency-modal-panel h4,
.transparency-modal-panel p {
  margin: 0;
}
.transparency-modal-panel h3 {
  overflow-wrap: anywhere;
}
.transparency-modal-panel header button {
  width: 36px;
  height: 36px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  color: #172033;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.transparency-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 18px;
}
.transparency-modal-grid section {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}
.transparency-modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.transparency-modal-tags span,
.transparency-modal-muted {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 30px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 6px 8px;
  color: #46536a;
  overflow-wrap: anywhere;
}
.transparency-modal-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0 18px 16px;
}
.transparency-modal-voice {
  padding: 0 18px 18px;
}
.transparency-modal-voice .inline-voice-detail {
  margin: 0;
}
@media (max-width: 760px) {
  .transparency-modal {
    padding: 10px;
  }
  .transparency-modal-grid {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .transparency-modal-actions,
  .transparency-modal-voice {
    padding-inline: 12px;
  }

  .transparency-modal-card {
    padding: 12px;
  }
}

.transparency-evidence-preview {
  display: grid;
  gap: 10px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}
.transparency-evidence-preview pre {
  max-height: 52vh;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  background: #0f172a;
  color: #f8fafc;
  font-size: 12px;
  line-height: 1.45;
}

/* Knowledge graph redesign: domain clusters, Russian labels and draggable canvas - 2026-05-28 */
.graph-redesign .knowledge-center-head {
  background: linear-gradient(135deg, #ffffff 0%, #eef6ff 55%, #f2fbf7 100%);
}

.graph-redesign .knowledge-center-head h2 {
  font-size: 30px;
}

.graph-redesign .knowledge-mode {
  max-width: 320px;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

.graph-redesign .knowledge-layout {
  grid-template-columns: minmax(230px, 300px) minmax(560px, 1fr) minmax(300px, 360px);
}

.graph-redesign .knowledge-graph-panel {
  overflow: hidden;
  background: #0f172a;
  color: #e5edf7;
}

.knowledge-graph-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, .22);
  background: #111827;
}

.graph-redesign .knowledge-metrics {
  padding: 0;
}

.graph-redesign .knowledge-metrics div,
.graph-redesign .knowledge-metrics button {
  border-color: rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .72);
  color: #f8fafc;
}

.graph-redesign .knowledge-metrics button.active,
.graph-redesign .knowledge-metrics button:hover {
  border-color: rgba(96, 165, 250, .72);
  background: rgba(37, 99, 235, .34);
}

.graph-redesign .knowledge-metrics span {
  color: #b6c2d2;
}

.knowledge-graph-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 7px;
  min-width: 0;
}

.knowledge-graph-controls-secondary button {
  border-color: rgba(96, 165, 250, .32);
}

.knowledge-graph-controls-rescue {
  align-items: center;
}

.knowledge-graph-controls button {
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 8px;
  background: rgba(30, 41, 59, .84);
  color: #e2e8f0;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.knowledge-graph-controls button.active,
.knowledge-graph-controls button:hover {
  border-color: #93c5fd;
  background: #2563eb;
  color: #fff;
}

.knowledge-graph-controls button.danger-soft {
  border-color: rgba(248, 113, 113, .54);
  background: rgba(127, 29, 29, .34);
  color: #fee2e2;
}

.knowledge-graph-controls button.danger-soft:hover {
  border-color: #fecaca;
  background: #b91c1c;
  color: #fff;
}

.knowledge-graph-controls .knowledge-visual-mode {
  border-color: rgba(45, 212, 191, .38);
}

.knowledge-graph-controls .knowledge-visual-mode.active {
  background: #0f766e;
  border-color: #5eead4;
}

.knowledge-metric-details {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(96, 165, 250, .30);
  border-radius: 8px;
  background: rgba(15, 23, 42, .92);
  padding: 10px;
}

.knowledge-metric-details > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.knowledge-metric-details strong {
  color: #f8fafc;
  font-size: 13px;
}

.knowledge-metric-details > div:first-child button {
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 8px;
  background: rgba(30, 41, 59, .78);
  color: #cbd5e1;
  padding: 6px 9px;
  font-weight: 850;
  cursor: pointer;
}

.knowledge-metric-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: 230px;
  overflow: auto;
}

.knowledge-metric-list button {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, .20);
  border-radius: 8px;
  background: rgba(15, 23, 42, .64);
  color: #e2e8f0;
  padding: 7px 9px;
  text-align: left;
  cursor: pointer;
}

.knowledge-metric-list button:hover {
  border-color: rgba(125, 211, 252, .62);
  background: rgba(14, 116, 144, .24);
}

.knowledge-metric-list span,
.knowledge-metric-list small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-metric-list span {
  font-size: 12px;
  font-weight: 900;
}

.knowledge-metric-list small,
.knowledge-metric-details p {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 750;
}

.graph-redesign .knowledge-graph.canvas-graph,
.graph-redesign .knowledge-graph.webgl-graph {
  height: 650px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(37, 99, 235, .20), transparent 34%),
    linear-gradient(135deg, #020617 0%, #07111f 52%, #030712 100%);
  cursor: grab;
  touch-action: none;
}

.graph-redesign[data-visual-mode="nodes"] .knowledge-graph.canvas-graph,
.graph-redesign[data-visual-mode="nodes"] .knowledge-graph.webgl-graph {
  background:
    linear-gradient(rgba(30, 41, 59, .36) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 41, 59, .36) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, rgba(14, 116, 144, .12), transparent 44%),
    #020617;
  background-size: 42px 42px, 42px 42px, auto, auto;
}

.graph-redesign[data-visual-mode="map"] .knowledge-graph.canvas-graph,
.graph-redesign[data-visual-mode="map"] .knowledge-graph.webgl-graph {
  background:
    linear-gradient(rgba(30, 41, 59, .42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 41, 59, .42) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(15, 118, 110, .16), transparent 46%),
    #020617;
  background-size: 42px 42px, 42px 42px, auto, auto;
}

.graph-redesign .knowledge-graph.canvas-graph:active,
.graph-redesign .knowledge-graph.webgl-graph:active {
  cursor: grabbing;
}

.knowledge-graph canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.knowledge-graph [data-knowledge-label-canvas] {
  pointer-events: none;
}

.knowledge-graph-hint {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: calc(100% - 24px);
  pointer-events: none;
}

.knowledge-graph-hint span {
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 999px;
  background: rgba(15, 23, 42, .72);
  color: #dbeafe;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

.knowledge-graph-a11y {
  display: none;
}

.graph-redesign .domain-legend {
  padding: 10px;
  border-top: 1px solid rgba(148, 163, 184, .22);
  background: #111827;
}

.graph-redesign .domain-legend span {
  border-color: rgba(148, 163, 184, .22);
  background: rgba(15, 23, 42, .72);
  color: #e2e8f0;
}

.graph-redesign .knowledge-tree-group > summary,
.graph-redesign .knowledge-tree-subgroup > summary {
  align-items: center;
  min-height: 42px;
  border-radius: 8px;
  list-style: none;
  padding: 8px 7px;
}

.graph-redesign .knowledge-tree-group > summary::-webkit-details-marker,
.graph-redesign .knowledge-tree-subgroup > summary::-webkit-details-marker {
  display: none;
}

.graph-redesign .knowledge-tree-group > summary::before,
.graph-redesign .knowledge-tree-subgroup > summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: rotate(-45deg);
  transition: transform .16s ease;
}

.graph-redesign .knowledge-tree-group[open] > summary::before,
.graph-redesign .knowledge-tree-subgroup[open] > summary::before {
  transform: rotate(45deg);
}

.graph-redesign .knowledge-tree-summary {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.graph-redesign .knowledge-tree-summary > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.graph-redesign .knowledge-tree-summary small {
  border: 1px solid color-mix(in srgb, var(--domain-main) 24%, #e5e7eb);
  border-radius: 999px;
  background: color-mix(in srgb, var(--domain-soft) 70%, #ffffff);
  color: color-mix(in srgb, var(--domain-main) 62%, #0f172a);
  padding: 2px 7px;
  font-size: 11px;
  line-height: 1.2;
}

.graph-redesign .knowledge-tree-group > summary button,
.graph-redesign .knowledge-tree-subgroup > summary button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border: 1px solid color-mix(in srgb, var(--domain-main) 26%, #e5e7eb);
  border-radius: 8px;
  background: color-mix(in srgb, var(--domain-soft) 64%, #ffffff);
  color: var(--domain-main);
  padding: 0;
  cursor: pointer;
}

.graph-redesign .knowledge-tree-group > summary button svg,
.graph-redesign .knowledge-tree-subgroup > summary button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.graph-redesign .knowledge-tree-node {
  border-color: transparent;
}

.graph-redesign .knowledge-tree-node:hover,
.graph-redesign .knowledge-tree-node.active {
  border-color: color-mix(in srgb, var(--domain-main) 48%, #ffffff);
  background: color-mix(in srgb, var(--domain-soft) 74%, #ffffff);
}

.graph-redesign .knowledge-tree-node span {
  white-space: normal;
  line-height: 1.24;
}

.graph-redesign .knowledge-tree-hierarchy {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.graph-redesign .knowledge-tree-subgroup {
  border: 1px solid color-mix(in srgb, var(--domain-main) 18%, #e5e7eb);
  border-radius: 8px;
  background: color-mix(in srgb, var(--domain-soft) 35%, #ffffff);
  padding: 3px;
}

.graph-redesign .knowledge-tree-subgroup > summary {
  min-height: 38px;
  background: rgba(255, 255, 255, .68);
}

.graph-redesign .knowledge-tree-subsummary > span {
  font-weight: 650;
}

.graph-redesign .knowledge-tree-children {
  display: grid;
  gap: 5px;
  padding: 5px 0 2px 14px;
  border-left: 1px solid color-mix(in srgb, var(--domain-main) 20%, #e5e7eb);
  margin: 4px 0 0 12px;
}

.graph-redesign .knowledge-tree-children .knowledge-tree-node {
  min-height: 48px;
  background: rgba(255, 255, 255, .78);
}

.graph-redesign .knowledge-tree-empty {
  margin: 6px 0 6px 4px;
  color: #64748b;
  font-size: 12px;
}

.graph-redesign .knowledge-inspector-card {
  border-left: 4px solid var(--domain-main);
  background: linear-gradient(180deg, color-mix(in srgb, var(--domain-soft) 46%, #ffffff), #ffffff 190px);
}

.graph-redesign .knowledge-relation-box button {
  grid-template-columns: 130px minmax(0, 1fr);
}

.graph-redesign .knowledge-relation-box button span {
  color: var(--domain-main);
}

.graph-redesign .knowledge-status-row .status-owner_review {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.graph-redesign .knowledge-status-row .status-candidate {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

@media (max-width: 1440px) {
  .graph-redesign .knowledge-layout {
    grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
  }
  .graph-redesign .knowledge-inspector {
    grid-column: 1 / -1;
    max-height: none;
  }
}

@media (max-width: 1180px) {
  .graph-redesign .knowledge-layout {
    grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
  }
  .graph-redesign .knowledge-graph-panel {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .graph-redesign .knowledge-layout,
  .knowledge-graph-toolbar {
    grid-template-columns: 1fr;
  }
  .knowledge-graph-controls {
    justify-content: stretch;
    min-width: 0;
  }
  .knowledge-graph-controls button {
    flex: 1 1 42%;
  }
  .graph-redesign .knowledge-graph.canvas-graph {
    height: 560px;
  }
  .graph-redesign .knowledge-graph.webgl-graph {
    height: 560px;
  }
  .knowledge-graph-hint {
    position: static;
    padding: 8px;
    background: #111827;
  }
  .graph-redesign .domain-legend {
    max-height: 160px;
    overflow: auto;
  }
}

.graph-redesign .knowledge-graph-panel:fullscreen {
  position: relative;
  display: block;
  width: 100vw;
  height: 100vh;
  border: 0;
  border-radius: 0;
  background: #020617;
  overflow: hidden;
  isolation: isolate;
}

.graph-redesign .knowledge-graph-panel.knowledge-fullscreen-fallback {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: block;
  width: 100vw;
  height: 100vh;
  border: 0;
  border-radius: 0;
  background: #020617;
  overflow: hidden;
  isolation: isolate;
}

body.knowledge-fullscreen-open {
  overflow: hidden;
}

.graph-redesign .knowledge-graph-panel[data-fullscreen-active="true"]::before,
.graph-redesign .knowledge-graph-panel[data-fullscreen-active="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  height: 120px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease;
}

.graph-redesign .knowledge-graph-panel[data-fullscreen-active="true"]::before {
  top: 0;
  background: linear-gradient(180deg, rgba(2, 6, 23, .78), rgba(2, 6, 23, 0));
}

.graph-redesign .knowledge-graph-panel[data-fullscreen-active="true"]::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(2, 6, 23, .82), rgba(2, 6, 23, 0));
}

.graph-redesign .knowledge-graph-panel[data-fullscreen-active="true"][data-cinema-chrome="visible"]::before,
.graph-redesign .knowledge-graph-panel[data-fullscreen-active="true"][data-cinema-chrome="visible"]::after {
  opacity: 1;
}

.graph-redesign .knowledge-graph-panel:fullscreen .knowledge-graph-toolbar,
.graph-redesign .knowledge-graph-panel.knowledge-fullscreen-fallback .knowledge-graph-toolbar {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 7;
  grid-template-columns: minmax(260px, .72fr) minmax(300px, 1fr);
  max-height: min(42vh, 340px);
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 8px;
  background: rgba(15, 23, 42, .76);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-100% - 22px));
  transition: opacity .22s ease, transform .24s ease;
  backdrop-filter: blur(18px);
}

.graph-redesign .knowledge-graph-panel:fullscreen .knowledge-graph.webgl-graph,
.graph-redesign .knowledge-graph-panel:fullscreen .knowledge-graph.canvas-graph,
.graph-redesign .knowledge-graph-panel.knowledge-fullscreen-fallback .knowledge-graph.webgl-graph,
.graph-redesign .knowledge-graph-panel.knowledge-fullscreen-fallback .knowledge-graph.canvas-graph {
  position: absolute;
  inset: 0;
  z-index: 1;
  height: 100vh;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 52%, rgba(56, 189, 248, .14), transparent 36%),
    radial-gradient(circle at 50% 50%, rgba(15, 118, 110, .12), transparent 56%),
    #020617;
}

.graph-redesign .knowledge-graph-panel:fullscreen .domain-legend,
.graph-redesign .knowledge-graph-panel.knowledge-fullscreen-fallback .domain-legend {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 7;
  max-height: min(19vh, 112px);
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 8px;
  background: rgba(15, 23, 42, .76);
  box-shadow: 0 22px 64px rgba(0, 0, 0, .32);
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(100% + 22px));
  transition: opacity .22s ease, transform .24s ease;
  backdrop-filter: blur(18px);
}

.graph-redesign .knowledge-graph-panel:fullscreen .knowledge-graph-hint,
.graph-redesign .knowledge-graph-panel.knowledge-fullscreen-fallback .knowledge-graph-hint {
  position: absolute;
  z-index: 8;
  bottom: min(142px, 22vh);
  left: 18px;
  max-width: min(720px, calc(100vw - 36px));
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity .22s ease, transform .24s ease;
}

.graph-redesign .knowledge-graph-panel[data-fullscreen-active="true"][data-cinema-chrome="visible"] .knowledge-graph-toolbar,
.graph-redesign .knowledge-graph-panel[data-fullscreen-active="true"] .knowledge-graph-toolbar:hover,
.graph-redesign .knowledge-graph-panel[data-fullscreen-active="true"] .knowledge-graph-toolbar:focus-within,
.graph-redesign .knowledge-graph-panel[data-fullscreen-active="true"][data-cinema-chrome="visible"] .domain-legend,
.graph-redesign .knowledge-graph-panel[data-fullscreen-active="true"] .domain-legend:hover,
.graph-redesign .knowledge-graph-panel[data-fullscreen-active="true"][data-cinema-chrome="visible"] .knowledge-graph-hint {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (max-width: 760px) {
  .graph-redesign .knowledge-graph-panel:fullscreen .knowledge-graph-toolbar,
  .graph-redesign .knowledge-graph-panel.knowledge-fullscreen-fallback .knowledge-graph-toolbar {
    top: 10px;
    left: 10px;
    right: 10px;
    grid-template-columns: 1fr;
    max-height: 46vh;
    padding: 8px;
  }

  .graph-redesign .knowledge-graph-panel:fullscreen .domain-legend,
  .graph-redesign .knowledge-graph-panel.knowledge-fullscreen-fallback .domain-legend {
    right: 10px;
    bottom: 10px;
    left: 10px;
    max-height: 22vh;
  }

  .graph-redesign .knowledge-graph-panel:fullscreen .knowledge-graph-hint,
  .graph-redesign .knowledge-graph-panel.knowledge-fullscreen-fallback .knowledge-graph-hint {
    left: 10px;
    bottom: min(152px, 24vh);
    max-height: 22vh;
    overflow: auto;
    padding: 0;
    background: transparent;
  }
}