.ai-mode-tabs { display: inline-flex; align-items: stretch; margin-left: 4px; border: 1px solid #303949; border-radius: 6px; overflow: hidden; background: #111722; }
.ai-mode-tab { min-height: 32px; padding: 6px 12px; border: 0; border-right: 1px solid #303949; background: transparent; color: #aeb8c8; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.ai-mode-tab:last-child { border-right: 0; }
.ai-mode-tab:hover { background: #1b2431; color: #fff; }
.ai-mode-tab.active { background: #2369d8; color: #fff; }
.ai-mode-tab:focus-visible { outline: 2px solid #7db3ff; outline-offset: -2px; }

.ai-meta-readable { color: #e7ebf1; background: #0f1217; font-family: Inter, system-ui, sans-serif; font-size: 13px; line-height: 1.55; white-space: normal; }
.ai-meta-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 0 12px; border-bottom: 1px solid #28303c; }
.ai-meta-family { color: #fff; font-size: 14px; font-weight: 700; }
.ai-meta-badge { padding: 2px 7px; border: 1px solid #3b4657; border-radius: 4px; color: #cbd5e1; font-size: 11px; }
.ai-meta-workflow-summary { flex-basis: 100%; color: #98a5b7; font-size: 12px; }
.ai-meta-section { padding: 13px 0; border-bottom: 1px solid #242b35; }
.ai-meta-section:last-child { border-bottom: 0; }
.ai-meta-section-title { margin: 0 0 8px; color: #d9e2ee; font-size: 12px; font-weight: 700; }
.ai-meta-section.positive .ai-meta-section-title { color: #7fc6ff; }
.ai-meta-section.negative .ai-meta-section-title { color: #ff9ea6; }
.ai-meta-section.loras .ai-meta-section-title { color: #ffb465; }
.ai-meta-prompt-item + .ai-meta-prompt-item, .ai-meta-character + .ai-meta-character { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #2a3340; }
.ai-meta-item-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; color: #8f9daf; font-size: 11px; }
.ai-meta-index { min-width: 20px; height: 20px; display: inline-grid; place-items: center; border: 1px solid #354052; border-radius: 50%; color: #dce5f0; }
.ai-meta-text { margin: 0; color: #f2f4f7; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-meta-token-original, .ai-meta-token-punctuation { color: #f2f4f7; }
.ai-meta-token-translation { color: #69d6a0; }
.ai-meta-expand-btn { margin-top: 7px; padding: 5px 8px; border: 1px solid #39465a; border-radius: 5px; background: #18202b; color: #dce7f5; font-size: 11px; cursor: pointer; }
.ai-meta-expand-btn:hover { background: #202b3a; }
.ai-meta-kv { display: grid; grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr); margin: 0; gap: 0; border-top: 1px solid #29313c; }
.ai-meta-kv.compact { margin-top: 8px; }
.ai-meta-key, .ai-meta-value { margin: 0; padding: 6px 8px; border-bottom: 1px solid #252d37; overflow-wrap: anywhere; }
.ai-meta-key { color: #91a0b5; background: #131922; }
.ai-meta-value { color: #eef2f7; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.ai-meta-assets { display: grid; gap: 5px; }
.ai-meta-asset { display: grid; grid-template-columns: minmax(80px, auto) minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 5px 0; }
.ai-meta-asset-kind { color: #8fa0b4; font-size: 11px; text-transform: uppercase; }
.ai-meta-asset-name { color: #f1f4f8; overflow-wrap: anywhere; }
.ai-meta-asset-extra { color: #ffbd78; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.ai-meta-asset-hash { grid-column: 2 / -1; color: #6f7b8d; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; line-height: 1.3; overflow-wrap: anywhere; word-break: break-all; }
.ai-meta-character-title { margin-bottom: 5px; color: #9fc5f8; font-weight: 700; }
.ai-meta-inline-label { margin: 7px 0 3px; color: #ff9ea6; font-size: 11px; font-weight: 700; }
.ai-meta-pass { border-bottom: 1px solid #27303a; }
.ai-meta-pass-summary { padding: 8px 2px; color: #d8e2ed; cursor: pointer; overflow-wrap: anywhere; }
.ai-meta-pass-body { padding: 2px 8px 10px; }
.ai-meta-empty { padding: 18px 0 8px; color: #b6c0ce; }
.ai-meta-limit-note { margin-top: 8px; color: #9aa8ba; font-size: 11px; }
.ai-meta-limit-note.prominent { padding: 8px 0; border-bottom: 1px solid #28303c; color: #f0ba73; }
.ai-meta-warning-list { margin: 0; padding-left: 18px; color: #e8b879; }
.ai-metadata-view.hidden, .metadata-raw-view.hidden { display: none; }

@media (max-width: 640px) {
  .ai-mode-row { align-items: flex-start; flex-direction: column; }
  .ai-mode-tabs { margin-left: 0; width: 100%; }
  .ai-mode-tab { flex: 1; min-width: 0; padding-inline: 6px; }
  .ai-meta-kv { grid-template-columns: minmax(94px, 0.42fr) minmax(0, 1fr); }
  .ai-meta-asset { grid-template-columns: minmax(70px, auto) minmax(0, 1fr); }
  .ai-meta-asset-extra { grid-column: 2; }
  .ai-meta-asset-hash { grid-column: 2; }
}