:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #192132;
  background: #eef1f6;
  font-synthesis: none;
  --blue: #2457e6;
  --blue-soft: #edf3ff;
  --border: #d7deea;
  --muted: #6b7588;
  --canvas-width: 3600px;
  --canvas-height: 1500px;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, textarea, input, select { font: inherit; }
button {
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  background: var(--blue);
  color: white;
  cursor: pointer;
  font-weight: 650;
}
button:hover:not(:disabled) { filter: brightness(.97); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.secondary { background: white; color: #27324a; border: 1px solid #ced5e2; }
button.danger { background: #fff; color: #a72d2d; border: 1px solid #e2b8b8; }
button.compact { padding: 6px 10px; font-size: 13px; }
button.icon-button { width: 34px; height: 34px; padding: 0; font-size: 21px; line-height: 1; }
input, textarea, select {
  width: 100%;
  border: 1px solid #cbd3e0;
  border-radius: 7px;
  padding: 8px 9px;
  background: white;
  color: #1b2435;
}
textarea { resize: vertical; line-height: 1.4; }
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(36,87,230,.22); border-color: var(--blue); }
input:disabled, textarea:disabled, select:disabled { background: #f2f4f7; color: #7b8494; }
label { display: grid; gap: 5px; font-size: 12px; font-weight: 650; color: #465167; }

.topbar {
  height: 58px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #12182a;
  color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.topbar strong { font-size: 18px; }
.topbar .muted { color: #aeb8ce; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }

.studio-layout {
  height: calc(100vh - 58px);
  display: grid;
  grid-template-columns: 235px minmax(520px, 1fr) 410px;
  gap: 1px;
  background: #ccd3df;
}
.sidebar, .right-panel, .canvas-section { background: white; min-width: 0; }
.sidebar, .right-panel { padding: 15px; overflow: auto; }
.sidebar { display: flex; flex-direction: column; }
.right-panel { padding-bottom: 50px; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-title { font-weight: 760; margin-bottom: 12px; }
.muted { color: var(--muted); }
.small-text { font-size: 12px; }
.flow-list { display: grid; gap: 8px; }
.flow-item {
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  background: #fff;
}
.flow-item:hover { background: #fafbfe; }
.flow-item.active { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(36,87,230,.12); }
.flow-item small { display: block; color: #778196; margin-top: 4px; }
.flow-item .status-line { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.mini-badge { font-size: 10px; border-radius: 99px; padding: 2px 6px; background: #edf1f7; color: #5b667b; }
.mini-badge.draft { background: #fff2d9; color: #78570b; }
.mini-badge.published { background: #e8f7ef; color: #28704e; }
.sidebar-actions { margin-top: auto; padding-top: 16px; }
.chat-link { display: block; color: var(--blue); text-decoration: none; }
.chat-link.disabled { color: #9aa3b2; pointer-events: none; }

.canvas-section { display: flex; flex-direction: column; min-width: 0; }
.canvas-toolbar {
  min-height: 52px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #e0e5ee;
}
.editor-toolbar { min-height: 48px; background: #fafbfc; }
.flow-heading { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; }
.flow-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolbar-actions, .node-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.node-tools select { width: 155px; padding: 7px; }
.badge { margin-left: 8px; padding: 3px 7px; border-radius: 999px; background: #edf1fa; color: #47536b; font-size: 12px; }
.badge.draft { background: #fff2d9; color: #78570b; }
.badge.published { background: #e8f7ef; color: #28704e; }
.dirty-state { margin-left: 8px; font-size: 12px; color: #a76700; }

.flow-canvas {
  position: relative;
  flex: 1;
  min-height: 480px;
  overflow: auto;
  background-color: #f7f8fb;
  background-image: radial-gradient(#cfd6e3 1px, transparent 1px);
  background-size: 18px 18px;
  touch-action: none;
}
.edge-layer, .node-layer { position: absolute; left: 0; top: 0; width: var(--canvas-width); height: var(--canvas-height); }
.edge-layer { overflow: visible; pointer-events: auto; }
.node-layer { pointer-events: none; }
.flow-edge { fill: none; stroke: #9aa6bb; stroke-width: 2.2; pointer-events: none; }
.flow-edge.conditional { stroke-dasharray: 7 5; stroke: #8d6c24; }
.flow-edge.optional { stroke-dasharray: 3 6; stroke: #667b9a; }
.flow-edge.selected { stroke: var(--blue); stroke-width: 3.3; }
.flow-edge-hit { fill: none; stroke: transparent; stroke-width: 18; cursor: pointer; pointer-events: stroke; }
.edge-label { fill: #59657a; font-size: 11px; paint-order: stroke; stroke: #f7f8fb; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.flow-node {
  position: absolute;
  width: 205px;
  min-height: 78px;
  padding: 11px 12px;
  background: white;
  border: 2px solid #ccd4e1;
  border-radius: 11px;
  box-shadow: 0 3px 12px rgba(36,45,66,.09);
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
}
.flow-node.editable { cursor: grab; }
.flow-node.dragging { cursor: grabbing; box-shadow: 0 10px 28px rgba(36,45,66,.2); }
.flow-node.selected { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36,87,230,.14); }
.flow-node[data-type="gate"] { border-color: #d59f2b; background: #fffdf7; }
.flow-node[data-type="tool"] { border-color: #16a085; }
.flow-node[data-type="document_upload"], .flow-node[data-type="document_analysis"] { border-color: #6782c6; }
.flow-node[data-type="end"] { border-color: #8d98aa; background: #f3f5f8; }
.flow-node[data-type="handover"] { border-color: #bb6bd9; }
.flow-node[data-type="nurture"] { border-color: #df8b35; }
.node-title { font-weight: 740; font-size: 13px; margin-bottom: 5px; }
.node-type { font-size: 10px; color: #748096; text-transform: uppercase; letter-spacing: .05em; }
.node-summary { font-size: 11px; color: #5d687c; margin-top: 7px; line-height: 1.3; max-height: 42px; overflow: hidden; }
.selection-hint { min-height: 32px; padding: 7px 12px; border-top: 1px solid #e0e5ee; font-size: 12px; color: #637087; }

.right-panel details > summary { cursor: pointer; font-weight: 760; margin-bottom: 10px; }
.settings-body, .selection-editor { display: grid; gap: 10px; }
.form-grid { display: grid; gap: 9px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #465167; }
.checkbox-row input { width: auto; }
.field-help { font-size: 11px; color: #778196; line-height: 1.35; }
.section-heading { font-size: 12px; font-weight: 760; color: #29344b; margin-top: 4px; }
.inline-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.inline-actions button { flex: 1; }
.empty-state { color: #7b8596; font-size: 12px; padding: 10px; border: 1px dashed #d5dbe5; border-radius: 8px; }
.divider { height: 1px; background: #e1e6ee; margin: 18px 0 14px; }

.gate-paths { display: grid; gap: 10px; }
.gate-path {
  border: 1px solid #d8dfeb;
  border-radius: 9px;
  padding: 10px;
  background: #fafbfc;
  display: grid;
  gap: 8px;
}
.gate-path.fallback { border-color: #b6c1d1; background: #f2f5f9; }
.gate-path-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gate-path-heading strong { font-size: 12px; }
.condition-preview { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; color: #59657a; background: white; border-radius: 6px; padding: 6px; overflow-wrap: anywhere; }

.copilot-panel-inner textarea { margin: 9px 0; }
.copilot-panel-inner > button { width: 100%; }
.selected-nodes { min-height: 32px; font-size: 12px; }
.proposal { margin-top: 14px; }
.proposal-card { border: 1px solid #d7deea; border-radius: 10px; padding: 12px; background: #f9fafc; }
.proposal-card h3 { margin: 0 0 8px; font-size: 15px; }
.proposal-card ul { margin: 6px 0 10px 18px; padding: 0; }
.operation { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; background: white; border: 1px solid #e0e5ed; padding: 7px; border-radius: 6px; margin: 5px 0; overflow-wrap: anywhere; }
.proposal-actions { display: flex; gap: 8px; margin-top: 10px; }
.proposal-actions button { flex: 1; }
.notice { border-radius: 8px; padding: 9px; margin: 8px 0; font-size: 12px; }
.notice.error { background: #fff0f0; color: #9a2525; }
.notice.success { background: #edf9f3; color: #206a47; }
.notice.info { background: #eef4ff; color: #244a9d; }

.modal { width: min(520px, calc(100vw - 30px)); border: 0; border-radius: 14px; padding: 0; box-shadow: 0 24px 80px rgba(18,24,42,.28); }
.modal::backdrop { background: rgba(18,24,42,.48); }
.modal form { padding: 20px; display: grid; gap: 14px; }
.modal-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.modal-heading h2 { margin: 0; font-size: 19px; }
.modal-actions { display: flex; justify-content: flex-end; }

.chat-page { max-width: 860px; margin: 0 auto; padding: 24px 14px 60px; }
.chat-card { background: white; border-radius: 16px; box-shadow: 0 8px 30px rgba(25,33,50,.12); overflow: hidden; }
.chat-header { padding: 18px 20px; background: #12182a; color: white; }
.chat-header strong { display: block; font-size: 19px; margin-bottom: 4px; }
.chat-messages { min-height: 440px; max-height: 68vh; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.message { max-width: 78%; padding: 11px 14px; border-radius: 13px; line-height: 1.48; white-space: pre-wrap; }
.message.bot { align-self: flex-start; background: #eef2f8; }
.message.user { align-self: flex-end; background: var(--blue); color: white; }
.chat-form { display: flex; gap: 8px; padding: 14px; border-top: 1px solid #e0e5ee; }
.chat-form input { flex: 1; min-width: 0; }
.action-box { margin: 0 18px 16px; padding: 12px; border: 1px solid #d8dfeb; border-radius: 10px; background: #fafbfc; }
.action-box input { width: 100%; margin: 5px 0; }
.slot-button { display: block; width: 100%; margin: 6px 0; }

@media (max-width: 1250px) {
  .studio-layout { grid-template-columns: 205px minmax(470px, 1fr) 360px; }
}
@media (max-width: 980px) {
  .studio-layout { grid-template-columns: 180px minmax(450px, 1fr); }
  .right-panel { display: none; }
}

.view-tabs { display: flex; gap: 4px; margin-left: auto; margin-right: 18px; }
.view-tab { background: transparent; color: #aeb8ce; border: 1px solid transparent; padding: 7px 12px; }
.view-tab.active { background: #273049; color: white; border-color: #3a4666; }
.full-width { width: 100%; margin-bottom: 8px; }
.node-reference { display: inline-block; margin-bottom: 5px; padding: 2px 6px; border-radius: 999px; background: #edf1f7; color: #44516a; font: 700 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }

.knowledge-layout {
  height: calc(100vh - 58px);
  display: grid;
  grid-template-columns: 285px minmax(580px, 1fr) 390px;
  gap: 1px;
  background: #ccd3df;
}
.knowledge-sidebar, .knowledge-editor-section, .knowledge-tools-panel { background: white; min-width: 0; overflow: auto; }
.knowledge-sidebar, .knowledge-tools-panel { padding: 15px; }
.knowledge-editor-section { padding: 0 18px 50px; }
.knowledge-toolbar { position: sticky; top: 0; z-index: 4; min-height: 58px; margin: 0 -18px 16px; padding: 10px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid #e0e5ee; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }
.knowledge-filter-grid { display: grid; gap: 7px; margin-bottom: 12px; }
.knowledge-article-list { display: grid; gap: 8px; }
.knowledge-article-item { border: 1px solid var(--border); border-radius: 9px; padding: 10px; cursor: pointer; background: white; }
.knowledge-article-item:hover { background: #fafbfe; }
.knowledge-article-item.active { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(36,87,230,.12); }
.knowledge-article-item strong { display: block; font-size: 13px; }
.knowledge-article-item small { display: block; margin-top: 4px; color: var(--muted); }
.knowledge-form { display: grid; gap: 11px; }
.form-grid.three { grid-template-columns: repeat(3, 1fr); }
.knowledge-tools-panel { padding-bottom: 60px; }
.knowledge-ai-panel > button { width: 100%; margin-top: 9px; }
.knowledge-ai-panel textarea { margin-top: 5px; }
.media-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
.media-picker-item { border: 1px solid #d8dfeb; border-radius: 9px; padding: 8px; background: #fafbfc; display: grid; gap: 6px; }
.media-picker-item.selected { border-color: var(--blue); background: var(--blue-soft); }
.media-picker-item label { display: flex; align-items: center; gap: 7px; }
.media-picker-item input { width: auto; }
.media-thumb { width: 100%; height: 92px; object-fit: cover; border-radius: 7px; background: #e8edf5; }
.media-video-placeholder { width: 100%; height: 92px; display: grid; place-items: center; border-radius: 7px; background: #171f32; color: white; font-size: 24px; }
.file-upload-button { display: block; border: 1px dashed #aeb8ca; border-radius: 9px; padding: 11px; text-align: center; color: #33405a; cursor: pointer; background: #fafbfc; }
.media-library { display: grid; gap: 10px; margin-top: 12px; }
.media-library-item { border: 1px solid #d8dfeb; border-radius: 10px; padding: 9px; background: #fafbfc; display: grid; grid-template-columns: 96px 1fr; gap: 9px; }
.media-library-item .media-thumb, .media-library-item .media-video-placeholder { height: 76px; }
.media-meta { min-width: 0; display: grid; gap: 5px; }
.media-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-meta small { color: var(--muted); }
.upload-progress { margin: 7px 0; padding: 8px; border-radius: 7px; background: #eef4ff; font-size: 12px; }
.consistency-result { margin-top: 16px; }
.consistency-finding { border-left: 4px solid #7c8aa4; padding: 9px 10px; margin: 8px 0; background: #f7f8fb; border-radius: 0 8px 8px 0; }
.consistency-finding.warning { border-left-color: #d49a20; background: #fff9e9; }
.consistency-finding.critical { border-left-color: #c63d3d; background: #fff1f1; }
.proposal-article-preview { white-space: pre-wrap; max-height: 280px; overflow: auto; border: 1px solid #e0e5ed; background: white; border-radius: 7px; padding: 9px; font-size: 12px; }

.chat-preview-badge { display: inline-flex; margin-top: 8px; padding: 3px 8px; border-radius: 999px; background: #fff0c7; color: #5f4500; font-size: 11px; font-weight: 700; }
.message-resources { align-self: flex-start; width: min(78%, 620px); display: grid; gap: 9px; }
.media-card { margin: 0; border: 1px solid #dbe1eb; border-radius: 12px; overflow: hidden; background: white; box-shadow: 0 3px 12px rgba(27,36,53,.08); }
.media-card img, .media-card video { display: block; width: 100%; max-height: 420px; object-fit: contain; background: #111827; }
.media-card figcaption { padding: 9px 11px; color: #4e5a70; font-size: 12px; line-height: 1.4; }
.knowledge-sources { align-self: flex-start; max-width: 78%; color: #718096; font-size: 11px; padding-left: 4px; }

@media (max-width: 1250px) {
  .knowledge-layout { grid-template-columns: 245px minmax(520px, 1fr) 340px; }
}
@media (max-width: 980px) {
  .knowledge-layout { grid-template-columns: 220px 1fr; }
  .knowledge-tools-panel { display: none; }
  .view-tabs { margin-right: 6px; }
}

.node-resource-editor {
  border: 1px solid #dce2ec;
  border-radius: 9px;
  padding: 9px;
  background: #fafbfc;
}
.node-resource-editor > summary { cursor: pointer; font-size: 12px; font-weight: 760; color: #2f3b52; }
.resource-options { display: grid; gap: 6px; max-height: 190px; overflow: auto; padding: 3px 1px; }
.resource-option { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; padding: 7px; border: 1px solid #e0e5ed; border-radius: 7px; background: white; cursor: pointer; }
.resource-option input { width: auto; margin-top: 2px; }
.resource-option span { min-width: 0; display: grid; gap: 2px; }
.resource-option strong { font-size: 11px; color: #303b50; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-option small { font-size: 10px; color: #778196; line-height: 1.3; }

/* --------------------------------------------------------------------------
   Knowledge & Media Workspace · 0.6.0
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.workspace-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #68758e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.text-button {
  width: auto;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}
.text-button:hover:not(:disabled) { filter: none; text-decoration: underline; }

.knowledge-workspace {
  height: calc(100vh - 58px);
  min-height: 0;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  background: #e8ecf3;
  overflow: hidden;
}
.knowledge-navigation {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 22px 15px 16px;
  color: #eef2ff;
  background:
    radial-gradient(circle at 20% -10%, rgba(64,97,203,.42), transparent 38%),
    linear-gradient(180deg, #17213a 0%, #101727 100%);
  border-right: 1px solid rgba(255,255,255,.06);
  overflow: auto;
}
.knowledge-navigation-header { padding: 0 8px 20px; }
.knowledge-navigation-header .workspace-eyebrow { color: #8493b9; }
.knowledge-navigation-header h1 { margin: 0 0 8px; font-size: 21px; letter-spacing: -.02em; }
.knowledge-navigation-header p { margin: 0; color: #aeb9d2; font-size: 12px; line-height: 1.55; }
.knowledge-subnav { display: grid; gap: 6px; }
.knowledge-nav-item {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #c7d0e5;
  text-align: left;
  font-weight: 500;
}
.knowledge-nav-item:hover:not(:disabled) { background: rgba(255,255,255,.06); filter: none; }
.knowledge-nav-item.active {
  border-color: rgba(113,144,255,.34);
  background: linear-gradient(135deg, rgba(55,91,210,.34), rgba(40,60,119,.3));
  color: white;
  box-shadow: inset 3px 0 0 #6f91ff;
}
.knowledge-nav-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255,255,255,.07);
  color: #b9c8f8;
  font-size: 17px;
  font-weight: 700;
}
.knowledge-nav-item.active .knowledge-nav-icon { background: rgba(105,139,255,.22); color: white; }
.knowledge-nav-item > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.knowledge-nav-item strong { font-size: 12px; }
.knowledge-nav-item small { overflow: hidden; color: #8997b6; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-nav-item.active small { color: #bdc9e8; }
.knowledge-nav-count {
  min-width: 23px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #aebbd5;
  font-size: 10px;
  text-align: center;
}
.knowledge-nav-item.active .knowledge-nav-count { background: rgba(255,255,255,.14); color: white; }
.knowledge-navigation-footer { margin-top: auto; padding-top: 18px; }
.knowledge-storage-card {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: start;
  gap: 9px;
  margin-bottom: 12px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  background: rgba(255,255,255,.04);
}
.knowledge-storage-card div { min-width: 0; display: grid; gap: 3px; }
.knowledge-storage-card strong { font-size: 11px; color: #e8edfb; }
.knowledge-storage-card span:last-child { color: #8f9dbc; font-size: 10px; line-height: 1.35; }
.status-dot {
  width: 9px;
  height: 9px;
  margin-top: 3px;
  border-radius: 50%;
  background: #7b879e;
  box-shadow: 0 0 0 4px rgba(123,135,158,.12);
}
.status-dot.ready { background: #37c38a; box-shadow: 0 0 0 4px rgba(55,195,138,.13); }
.status-dot.warning { background: #e3a93b; box-shadow: 0 0 0 4px rgba(227,169,59,.13); }
.knowledge-navigation-footer .secondary {
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.08);
  color: white;
}
.knowledge-navigation-footer .secondary:hover:not(:disabled) { background: rgba(255,255,255,.13); filter: none; }

.knowledge-workspace-content { min-width: 0; min-height: 0; overflow: hidden; }
.knowledge-section {
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #f3f5f9;
}
.knowledge-page-header {
  min-height: 102px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 26px;
  border-bottom: 1px solid #dce2ec;
  background: rgba(255,255,255,.97);
  box-shadow: 0 2px 12px rgba(24,33,51,.035);
  z-index: 5;
}
.knowledge-page-header.compact-header { min-height: 88px; }
.knowledge-page-header h2 { margin: 0 0 5px; color: #1a2437; font-size: 24px; letter-spacing: -.025em; }
.knowledge-page-header p { margin: 0; color: #68748a; font-size: 12px; line-height: 1.45; }
.knowledge-header-actions { display: flex; gap: 8px; flex-shrink: 0; }
.knowledge-overview-scroll,
.knowledge-section-scroll,
.knowledge-editor-scroll {
  min-height: 0;
  overflow: auto;
}
.knowledge-overview-scroll { padding: 22px 26px 44px; }
.knowledge-section-scroll { padding: 22px 26px 46px; }

.knowledge-hero-card {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(280px,.75fr);
  gap: 28px;
  padding: 28px 30px;
  border: 1px solid #ccd7ec;
  border-radius: 18px;
  color: white;
  background:
    radial-gradient(circle at 88% 10%, rgba(111,145,255,.28), transparent 36%),
    linear-gradient(135deg, #172343 0%, #223b7b 100%);
  box-shadow: 0 16px 38px rgba(26,46,95,.16);
}
.knowledge-hero-copy { align-self: center; }
.hero-kicker {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #ccd8ff;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.knowledge-hero-copy h3 { max-width: 760px; margin: 0 0 12px; font-size: clamp(21px,2.1vw,31px); line-height: 1.2; letter-spacing: -.025em; }
.knowledge-hero-copy p { max-width: 700px; margin: 0; color: #c2cdea; font-size: 13px; line-height: 1.65; }
.hero-actions { display: flex; gap: 9px; margin-top: 20px; }
.hero-actions .secondary { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: white; }
.hero-actions .secondary:hover:not(:disabled) { background: rgba(255,255,255,.14); filter: none; }
.knowledge-hero-steps { display: grid; align-content: center; gap: 10px; }
.knowledge-hero-steps > div {
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 12px;
  background: rgba(255,255,255,.055);
}
.knowledge-hero-steps span {
  grid-row: 1 / 3;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(111,145,255,.22);
  color: #dfe6ff;
  font-size: 11px;
  font-weight: 800;
}
.knowledge-hero-steps strong { font-size: 12px; }
.knowledge-hero-steps small { margin-top: 2px; color: #aebbdc; font-size: 10px; }

.knowledge-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 16px;
}
.knowledge-stat-card {
  min-height: 116px;
  display: grid;
  align-content: center;
  padding: 17px 18px;
  border: 1px solid #dce2eb;
  border-radius: 14px;
  background: white;
  box-shadow: 0 5px 16px rgba(23,32,48,.045);
}
.knowledge-stat-card::before {
  content: '';
  width: 28px;
  height: 4px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #6c7d9e;
}
.knowledge-stat-card.approved::before { background: #31a778; }
.knowledge-stat-card.draft::before { background: #d49a2b; }
.knowledge-stat-card.media::before { background: #5179df; }
.stat-label { color: #647087; font-size: 11px; font-weight: 700; }
.knowledge-stat-card strong { margin: 3px 0 1px; color: #1c273b; font-size: 29px; letter-spacing: -.03em; }
.knowledge-stat-card small { color: #8a94a5; font-size: 10px; }

.knowledge-overview-grid {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(320px,.7fr);
  gap: 16px;
  margin-top: 16px;
}
.knowledge-overview-card {
  min-width: 0;
  padding: 19px;
  border: 1px solid #dce2eb;
  border-radius: 15px;
  background: white;
  box-shadow: 0 5px 16px rgba(23,32,48,.04);
}
.overview-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.overview-card-heading h3 { margin: 0; color: #202b3e; font-size: 16px; }
.knowledge-recent-list { display: grid; gap: 7px; }
.knowledge-recent-item {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 11px;
  border: 1px solid #e1e6ee;
  border-radius: 10px;
  background: #fbfcfe;
  color: #273147;
  text-align: left;
  font-weight: 500;
}
.knowledge-recent-item:hover:not(:disabled) { border-color: #b9c8e8; background: #f5f8ff; filter: none; }
.knowledge-recent-item > span:first-child { min-width: 0; display: grid; gap: 3px; }
.knowledge-recent-item strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-recent-item small { color: #7a8598; font-size: 10px; }
.article-status-pill { padding: 3px 7px; border-radius: 999px; background: #edf1f7; color: #627089; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.article-status-pill.approved { background: #e7f7ef; color: #24704e; }
.article-status-pill.draft { background: #fff2d8; color: #7a5709; }
.article-status-pill.archived { background: #eef0f3; color: #6f7786; }
.knowledge-quick-actions { display: grid; gap: 8px; }
.knowledge-quick-actions button {
  width: 100%;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid #e0e5ed;
  border-radius: 11px;
  background: #fbfcfe;
  color: #273147;
  text-align: left;
  font-weight: 500;
}
.knowledge-quick-actions button:hover:not(:disabled) { border-color: #b9c8e8; background: #f4f7ff; filter: none; }
.quick-action-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: #edf3ff; color: #315ac8; font-size: 18px; }
.knowledge-quick-actions button > span:last-child { display: grid; gap: 3px; }
.knowledge-quick-actions strong { font-size: 12px; }
.knowledge-quick-actions small { color: #778297; font-size: 10px; line-height: 1.35; }

.knowledge-articles-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 295px minmax(0,1fr);
  gap: 1px;
  background: #dce2eb;
  overflow: hidden;
}
.knowledge-articles-layout .knowledge-sidebar {
  min-height: 0;
  padding: 14px;
  overflow: auto;
  background: #f8f9fc;
}
.knowledge-list-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  gap: 7px;
  margin: -14px -14px 12px;
  padding: 14px;
  border-bottom: 1px solid #e0e5ed;
  background: rgba(248,249,252,.97);
  backdrop-filter: blur(8px);
}
.knowledge-article-list { display: grid; gap: 7px; }
.knowledge-article-item {
  position: relative;
  padding: 11px 11px 11px 13px;
  border: 1px solid #dce2eb;
  border-radius: 11px;
  cursor: pointer;
  background: white;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.knowledge-article-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #aab4c6;
}
.knowledge-article-item[data-status="approved"]::before { background: #31a778; }
.knowledge-article-item[data-status="draft"]::before { background: #d49a2b; }
.knowledge-article-item:hover { border-color: #b9c6dc; background: #fcfdff; transform: translateY(-1px); }
.knowledge-article-item.active { border-color: #7293e9; background: #f4f7ff; box-shadow: 0 0 0 2px rgba(36,87,230,.09); }
.knowledge-article-item strong { display: block; overflow: hidden; color: #253047; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-article-item small { display: block; margin-top: 4px; overflow: hidden; color: #7b8598; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-editor-section {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: #f3f5f9;
}
.knowledge-editor-section .knowledge-toolbar {
  position: static;
  flex: 0 0 auto;
  min-height: 62px;
  margin: 0;
  padding: 10px 18px;
  background: white;
}
.knowledge-editor-scroll { padding: 17px 20px 50px; }
.knowledge-form { max-width: 1040px; display: grid; gap: 12px; margin: 0 auto; }
.editor-card {
  display: grid;
  gap: 11px;
  padding: 16px;
  border: 1px solid #dce2eb;
  border-radius: 13px;
  background: white;
  box-shadow: 0 4px 14px rgba(23,32,48,.035);
}
.editor-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.editor-card-heading h3 { margin: 0; color: #273249; font-size: 14px; }
.editor-card-heading > small { color: #7a8597; font-size: 10px; }
.knowledge-editor-scroll #knowledge-editor-notice,
.knowledge-editor-scroll .consistency-result { max-width: 1040px; margin-left: auto; margin-right: auto; }

.primary-file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 9px 14px;
  background: var(--blue);
  color: white;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.media-section-scroll { padding-top: 20px; }
.media-top-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(280px,.55fr); gap: 14px; }
.media-upload-card,
.media-guidance-card {
  min-height: 176px;
  border: 1px solid #d8e0eb;
  border-radius: 15px;
  background: white;
  box-shadow: 0 5px 16px rgba(23,32,48,.04);
}
.media-upload-card {
  display: grid;
  grid-template-columns: 58px minmax(0,1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border-style: dashed;
  border-width: 2px;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.media-upload-card.drag-active { border-color: var(--blue); background: #f1f5ff; transform: scale(1.002); }
.media-upload-card h3, .media-guidance-card h3 { margin: 0 0 7px; color: #243047; font-size: 16px; }
.media-upload-card p, .media-guidance-card p { margin: 0 0 7px; color: #6e798d; font-size: 11px; line-height: 1.5; }
.upload-illustration { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: #edf3ff; color: #315bcf; font-size: 28px; }
.media-upload-card .file-upload-button { min-width: 140px; border-style: solid; background: #f8faff; }
.media-guidance-card { padding: 22px; }
.media-guidance-card ul { margin: 12px 0 0 18px; padding: 0; color: #5f6b80; font-size: 11px; line-height: 1.8; }
.media-upload-progress { margin-top: 10px; }
.media-library-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  padding: 4px 1px 10px;
  border-bottom: 1px solid #dce2eb;
}
.media-library-toolbar > div:first-child { display: flex; align-items: baseline; gap: 9px; }
.media-filter-actions { display: grid; grid-template-columns: minmax(210px,300px) 150px; gap: 7px; }
.media-library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 13px;
  margin-top: 14px;
}
.media-library-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d9e0ea;
  border-radius: 13px;
  background: white;
  box-shadow: 0 5px 15px rgba(23,32,48,.04);
}
.media-library-item .media-thumb,
.media-library-item .media-video-placeholder { width: 100%; height: 168px; border-radius: 0; object-fit: cover; }
.media-library-item .media-meta { display: grid; gap: 7px; padding: 12px; }
.media-library-item .media-meta strong { color: #283249; font-size: 12px; }
.media-library-item .media-meta small { font-size: 10px; }
.media-library-item input { padding: 7px 8px; font-size: 11px; }
.media-library-item .save-media-meta { width: 100%; margin-top: 2px; }

.knowledge-copilot-layout {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(300px,.6fr);
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.copilot-composer-card,
.knowledge-copilot-context {
  border: 1px solid #dce2eb;
  border-radius: 15px;
  background: white;
  box-shadow: 0 5px 16px rgba(23,32,48,.04);
}
.copilot-composer-card { padding: 20px; }
.copilot-card-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.copilot-card-heading > div { display: grid; gap: 3px; }
.copilot-card-heading strong { color: #253048; font-size: 15px; }
.copilot-card-heading small { color: #788397; font-size: 10px; }
.copilot-symbol { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg,#e9efff,#f2eaff); color: #5a57c9; font-size: 21px; }
.copilot-composer-card textarea { min-height: 285px; padding: 13px; background: #fbfcfe; font-size: 12px; }
.copilot-options { margin: 12px 0; }
.copilot-selection-card { display: grid; align-content: center; gap: 4px; padding: 8px 10px; border: 1px solid #dce2eb; border-radius: 7px; background: #f8f9fc; }
.copilot-selection-card span { color: #657188; font-size: 10px; font-weight: 700; }
.copilot-selection-card strong { overflow: hidden; color: #303b52; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.copilot-composer-card > button { width: 100%; min-height: 42px; }
.knowledge-copilot-context { padding: 22px; }
.knowledge-copilot-context h3 { margin: 0 0 16px; color: #253048; font-size: 17px; }
.copilot-capability-list { display: grid; gap: 10px; }
.copilot-capability-list > div { display: grid; grid-template-columns: 34px 1fr; align-items: start; gap: 9px; padding: 10px; border: 1px solid #e2e7ef; border-radius: 10px; background: #fafbfc; }
.copilot-capability-list > div > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: #edf3ff; color: #4665b8; font-size: 9px; font-weight: 800; }
.copilot-capability-list p { display: grid; gap: 2px; margin: 0; }
.copilot-capability-list strong { color: #303a50; font-size: 11px; }
.copilot-capability-list small { color: #778297; font-size: 10px; line-height: 1.4; }
.knowledge-proposal-wide { max-width: 1200px; margin: 16px auto 0; }

.media-picker { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.media-picker-item { border-radius: 11px; background: white; }
.media-picker-item.selected { box-shadow: 0 0 0 2px rgba(36,87,230,.1); }

@media (max-width: 1180px) {
  .knowledge-workspace { grid-template-columns: 215px minmax(0,1fr); }
  .knowledge-hero-card { grid-template-columns: 1fr; }
  .knowledge-hero-steps { grid-template-columns: repeat(3,1fr); }
  .knowledge-overview-grid { grid-template-columns: 1fr; }
  .media-top-grid, .knowledge-copilot-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .knowledge-workspace { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
  .knowledge-navigation { padding: 10px 12px; overflow: visible; }
  .knowledge-navigation-header, .knowledge-navigation-footer { display: none; }
  .knowledge-subnav { display: flex; gap: 5px; overflow-x: auto; }
  .knowledge-nav-item { min-width: 155px; min-height: 46px; grid-template-columns: 27px minmax(0,1fr) auto; padding: 6px 8px; }
  .knowledge-nav-icon { width: 26px; height: 26px; border-radius: 7px; font-size: 14px; }
  .knowledge-nav-item small { display: none; }
  .knowledge-page-header { min-height: 84px; padding: 13px 17px; }
  .knowledge-page-header h2 { font-size: 20px; }
  .knowledge-overview-scroll, .knowledge-section-scroll { padding: 16px 17px 36px; }
  .knowledge-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .knowledge-articles-layout { grid-template-columns: 245px minmax(0,1fr); }
  .form-grid.three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .topbar { height: auto; min-height: 58px; flex-wrap: wrap; gap: 6px; padding: 9px 12px; }
  .view-tabs { order: 3; width: 100%; margin: 0; }
  .view-tab { flex: 1; }
  .knowledge-workspace { height: calc(100vh - 104px); }
  .knowledge-page-header { align-items: flex-start; }
  .knowledge-page-header p { display: none; }
  .knowledge-header-actions { flex-direction: column; }
  .knowledge-hero-card { padding: 21px; }
  .knowledge-hero-steps { grid-template-columns: 1fr; }
  .knowledge-stat-grid { grid-template-columns: 1fr 1fr; }
  .knowledge-articles-layout { grid-template-columns: 1fr; overflow: auto; }
  .knowledge-articles-layout .knowledge-sidebar { max-height: 260px; }
  .knowledge-editor-section { min-height: 720px; overflow: visible; }
  .knowledge-editor-scroll { overflow: visible; padding: 14px 12px 35px; }
  .knowledge-editor-section .knowledge-toolbar { position: sticky; top: 0; flex-wrap: wrap; }
  .form-grid.two, .form-grid.three, .copilot-options { grid-template-columns: 1fr; }
  .media-upload-card { grid-template-columns: 1fr; text-align: center; }
  .upload-illustration { margin: 0 auto; }
  .media-filter-actions { grid-template-columns: 1fr; }
  .media-library-toolbar { align-items: stretch; flex-direction: column; }
}

/* MyChatEngine 0.6: getrennte Haupt- und Beratungsdiagramme */
.dialog-library { gap: 14px; margin-top: 12px; }
.flow-library-group { display: grid; gap: 7px; }
.flow-library-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}
.flow-library-heading > div { min-width: 0; display: grid; gap: 2px; }
.flow-library-heading strong { color: #303a50; font-size: 11px; text-transform: uppercase; letter-spacing: .055em; }
.flow-library-heading small { color: #8690a1; font-size: 9px; line-height: 1.35; }
.flow-group-count { min-width: 24px; padding: 2px 7px; border-radius: 999px; background: #edf1f7; color: #5d687b; font-size: 10px; font-weight: 750; text-align: center; }
.flow-library-group.consultation .flow-group-count { background: #f1edff; color: #6856a8; }
.flow-group-list { display: grid; gap: 7px; }
.flow-group-empty { padding: 10px; border: 1px dashed #d8deea; border-radius: 9px; color: #7a8496; background: #fafbfc; font-size: 10px; line-height: 1.45; }
.flow-item {
  width: 100%;
  display: grid;
  grid-template-columns: 25px minmax(0,1fr);
  align-items: start;
  gap: 8px;
  color: inherit;
  text-align: left;
  font-weight: inherit;
}
.flow-item.consultation { border-color: #ddd6f3; background: #fdfcff; }
.flow-item.consultation:hover { background: #f8f5ff; }
.flow-item.consultation.active { border-color: #7762c3; box-shadow: 0 0 0 2px rgba(119,98,195,.13); }
.flow-item-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: #edf3ff; color: #315bcf; font-size: 14px; }
.flow-item.consultation .flow-item-icon { background: #f0ebff; color: #6851b6; }
.flow-item-copy { min-width: 0; display: block; }
.flow-item-copy strong, .flow-item-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge.consultation { box-shadow: inset 0 0 0 1px rgba(104,81,182,.18); }

.dialog-kind-banner {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #d9e1ed;
  border-radius: 10px;
  background: #f7f9fc;
}
.dialog-kind-banner > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #eaf1ff; color: #315bcf; font-size: 18px; }
.dialog-kind-banner > div { display: grid; gap: 2px; }
.dialog-kind-banner strong { font-size: 12px; color: #28344b; }
.dialog-kind-banner small { color: #778196; font-size: 10px; line-height: 1.35; }
.dialog-kind-banner.consultation { border-color: #ddd5f2; background: #faf8ff; }
.dialog-kind-banner.consultation > span { background: #eee9ff; color: #6851b6; }
.acknowledgement-settings { display: grid; gap: 8px; padding: 10px; border: 1px solid #dce3ee; border-radius: 9px; background: #fafbfe; }
.compact-notice { margin: 0; line-height: 1.45; }
.consultation-completion-facts { display: grid; gap: 6px; max-height: 220px; overflow: auto; }

.consultation-binding-editor, .node-resource-editor { border: 1px solid #dce2ec; border-radius: 10px; padding: 9px; background: #fbfcfe; }
.consultation-binding-editor > summary, .node-resource-editor > summary { color: #2f3a52; }
.consultation-flow-options { margin-top: 8px; }
.consultation-choice { border-color: #ddd6f3; background: #fdfcff; }
.consultation-binding-list { display: grid; gap: 9px; }
.consultation-binding-card { display: grid; gap: 8px; padding: 10px; border: 1px solid #d9d1ef; border-radius: 9px; background: white; }
.consultation-binding-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.consultation-binding-heading > div { min-width: 0; display: grid; gap: 2px; }
.consultation-binding-heading strong { color: #3b315f; font-size: 11px; }
.consultation-binding-heading small { overflow: hidden; color: #83779e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.chat-dialog-context {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 9px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #eef1ff;
  font-size: 10px;
  font-weight: 700;
}
.chat-dialog-context::before { content: '↪'; font-size: 12px; }

@media (max-width: 1180px) {
  .studio-layout { grid-template-columns: 220px minmax(480px,1fr) 380px; }
}