/* AiDocViewer — component-specific styles (aidoc- prefix) */

/* State banner rendered above the viewer when audit_status isn't yet
   Validated. Wrapper just provides bottom spacing — the banner div
   itself carries the visual style (dash-doc-banner-* in Dashboard.css). */
.aidoc-banner-wrap {
  margin-bottom: var(--kr-sp-4);
}

/* ── Root container ──────────────────────────────────── */
.aidoc-root {
  display: flex;
  max-height: 400px;
  border: 1px solid var(--kr-border-light);
  border-radius: var(--kr-r-lg);
  overflow: hidden;
  background: var(--kr-bg-scrim);
}

/* ── Loading / empty ─────────────────────────────────── */
.aidoc-loading {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-4);
  padding: var(--kr-sp-8);
  color: var(--kr-text-muted);
  font-size: var(--kr-fs-base);
}

.aidoc-empty {
  padding: var(--kr-sp-8);
  color: var(--kr-text-dim);
  font-size: var(--kr-fs-base);
}

/* ── File tree panel ─────────────────────────────────── */
.aidoc-tree-panel {
  width: 30%;
  min-width: 170px;
  border-right: 1px solid var(--kr-border-light);
  display: flex;
  flex-direction: column;
}

.aidoc-search-wrap {
  padding: 6px 6px 4px;
  border-bottom: 1px solid var(--kr-border-ghost);
}

.aidoc-search-box {
  position: relative;
}

.aidoc-search-icon {
  position: absolute;
  left: 7px;
  top: 6px;
  color: var(--kr-text-ghost);
  pointer-events: none;
}

.aidoc-search-input {
  width: 100%;
  padding: 4px 22px 4px 22px;
  background: var(--kr-bg-hover);
  border: 1px solid var(--kr-border);
  border-radius: var(--kr-r-sm);
  color: var(--kr-text-primary);
  font-size: var(--kr-fs-xs);
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}

.aidoc-search-clear {
  position: absolute;
  right: 4px;
  top: 3px;
  background: none;
  border: none;
  color: var(--kr-text-dim);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

/* ── Search results bar ──────────────────────────────── */
.aidoc-search-results {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: var(--kr-fs-xs);
}

.aidoc-search-position {
  color: rgba(var(--kr-accent-rgb), 0.7);
}

.aidoc-search-files-count {
  color: var(--kr-text-ghost);
  margin-left: 2px;
}

.aidoc-search-no-results {
  color: var(--kr-text-dim);
}

.aidoc-search-nav {
  margin-left: auto;
  display: flex;
  gap: 2px;
}

.aidoc-nav-btn {
  background: none;
  border: 1px solid var(--kr-border-medium);
  border-radius: var(--kr-r-xs);
  color: var(--kr-text-tertiary);
  cursor: pointer;
  padding: 1px 3px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* ── Tree list ───────────────────────────────────────── */
.aidoc-tree-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.aidoc-tree-dir {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-tertiary);
  user-select: none;
}

.aidoc-tree-dir-icon {
  color: rgba(var(--kr-accent-rgb), 0.5);
}

.aidoc-tree-file {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: var(--kr-fs-sm);
}

.aidoc-tree-file[data-selected="true"] {
  color: var(--kr-accent);
  background: rgba(var(--kr-accent-rgb), 0.06);
  border-right: 2px solid var(--kr-accent);
}

.aidoc-tree-file[data-selected="false"] {
  color: var(--kr-text-secondary);
  background: transparent;
  border-right: 2px solid transparent;
}

.aidoc-tree-file[data-dimmed="true"] {
  color: var(--kr-text-ghost);
  opacity: 0.5;
}

.aidoc-tree-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.aidoc-match-badge {
  font-size: var(--kr-fs-2xs);
  padding: 0 5px;
  border-radius: var(--kr-r-lg);
  font-weight: 600;
  flex-shrink: 0;
  background: rgba(var(--kr-accent-rgb), 0.12);
  color: rgba(var(--kr-accent-rgb), 0.8);
}

/* ── Content panel ───────────────────────────────────── */
.aidoc-content-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.aidoc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px solid var(--kr-border-ghost);
  flex-shrink: 0;
  gap: var(--kr-sp-4);
}

.aidoc-toolbar-path {
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-dim);
  font-family: var(--kr-font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aidoc-discuss-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--kr-r-sm);
  font-size: var(--kr-fs-xs);
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  background: rgba(var(--kr-accent-rgb), 0.06);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.15);
  color: var(--kr-accent);
}

/* Tech-debt variant (0.8.1): when viewing a `TD-*.md` file under
   `tech-debt/`, the button is reframed as a resolution CTA. Warning-
   toned + bolder to read as "actionable now" vs. the neutral discuss
   variant. */
.aidoc-discuss-btn-fix {
  background: rgba(var(--kr-warning-rgb), 0.14);
  border-color: rgba(var(--kr-warning-rgb), 0.35);
  color: var(--kr-warning-soft);
  font-weight: 600;
}

.aidoc-discuss-btn-fix:hover {
  background: rgba(var(--kr-warning-rgb), 0.22);
}

.aidoc-content-area {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

.aidoc-select-file {
  color: var(--kr-text-dim);
  font-size: var(--kr-fs-base);
}

/* ── Markdown (shared with disc-md) ──────────────────── */
.aidoc-md {
  font-size: var(--kr-fs-md);
  line-height: 1.55;
}

.aidoc-md p { margin: 4px 0; }
.aidoc-md h1 { font-size: 18px; font-weight: 700; margin: 12px 0 6px; color: var(--kr-text-primary); }
.aidoc-md h2 { font-size: 16px; font-weight: 700; margin: 10px 0 4px; color: var(--kr-text-primary); }
.aidoc-md h3 { font-size: 14px; font-weight: 600; margin: 8px 0 4px; color: var(--kr-text-primary); }
.aidoc-md ul { margin: 4px 0; padding-left: 20px; }
.aidoc-md ol { margin: 4px 0; padding-left: 20px; }
.aidoc-md li { margin: 2px 0; }
.aidoc-md code { background: var(--kr-bg-active); padding: 1px 5px; border-radius: 4px; font-size: 12px; font-family: monospace; }
.aidoc-md pre { background: var(--kr-bg-code); color: var(--kr-text-on-dark); padding: 10px 12px; border-radius: 8px; overflow-x: auto; margin: 6px 0; border: 1px solid var(--kr-border-light); --kr-accent: #c8ff00; }
.aidoc-md pre code, .aidoc-md-pre-code { background: none; padding: 0; font-size: 12px; font-family: monospace; color: var(--kr-accent); }
.aidoc-md table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 12px; }
.aidoc-md th { border: 1px solid var(--kr-border-strong); padding: 6px 10px; background: var(--kr-bg-hover); font-weight: 600; text-align: left; }
.aidoc-md td { border: 1px solid var(--kr-border); padding: 5px 10px; }
.aidoc-md blockquote { border-left: 3px solid rgba(var(--kr-accent-rgb), 0.3); margin: 6px 0; padding-left: 12px; color: var(--kr-text-secondary); }
.aidoc-md hr { border: none; border-top: 1px solid var(--kr-border-medium); margin: 10px 0; }
.aidoc-md a { color: var(--kr-accent); text-decoration: underline; }
.aidoc-md strong { font-weight: 700; color: var(--kr-text-primary); }
