:root {
    color-scheme: dark;
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background: #07080b;
    color: #e8e8e8;
}

.wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 18px;
}

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

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.brand-text {
    min-width: 0;
}

.top-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

/* Server-backed diagnostics: grouped for keyboard/screen-reader; no extra logic in the browser */
.top-actions-diagnostics {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 2px 4px;
    background: rgba(0, 0, 0, 0.2);
}

.eye {
    width: 62px;
    height: 62px;
    border-radius: 14px;
    background: radial-gradient(circle at 40% 40%,
    #ffd36a 0%,
    #ff7a18 18%,
    #ff2d2d 36%,
    #7a0b0b 62%,
    #1b0b0b 100%);
    box-shadow: 0 0 18px rgba(255, 120, 40, .25), 0 0 48px rgba(255, 70, 70, .10);
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
}

.eye:before {
    content: "";
    position: absolute;
    inset: -20%;
    background: conic-gradient(from 0deg,
    rgba(255, 160, 60, .0),
    rgba(255, 160, 60, .35),
    rgba(255, 160, 60, .0));
    animation: spin 5s linear infinite;
    filter: blur(1px);
}

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

h1 {
    font-size: 18px;
    margin: 0;
    font-weight: 650;
    letter-spacing: .2px;
}

.sub {
    color: #b7b7b7;
    font-size: 13px;
    margin-top: 2px;
}

.status {
    margin-top: 8px;
    font-size: 12px;
    color: #9ea3aa;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.status .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(130, 255, 170, .9);
    box-shadow: 0 0 10px rgba(130, 255, 170, .25);
}

.status .dot.bad {
    background: rgba(255, 120, 120, .95);
    box-shadow: 0 0 10px rgba(255, 120, 120, .20);
}

.status .sep {
    opacity: .6;
}

.chat {
    margin-top: 16px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    overflow: hidden;
}

.msgs {
    padding: 14px;
    height: 68vh;
    overflow: auto;
    scroll-behavior: smooth;
}

.msgs::-webkit-scrollbar {
    width: 8px;
}

.msgs::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .04);
    border-radius: 4px;
}

.msgs::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .15);
    border-radius: 4px;
}

.msgs::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .25);
}

.row {
    display: flex;
    margin: 10px 0;
}

.me {
    justify-content: flex-end;
}

.bubble {
    max-width: 78%;
    padding: 10px 12px;
    border-radius: 12px;
    line-height: 1.35;
    white-space: pre-wrap;
    word-wrap: break-word;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .25);
}

.answer-confidence {
    margin-top: 6px;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
}

.answer-confidence.ok {
    color: #79d98f;
}

.answer-confidence.low {
    color: #ff9a9a;
    text-transform: uppercase;
}

.llm-answer-provenance {
    margin-top: 6px;
    margin-left: 6px;
    font-size: 12px;
    line-height: 1.35;
    color: #9aa7b8;
}

.llm-answer-provenance--fb {
    border-left: 3px solid #c9a227;
    padding-left: 8px;
}

.llm-fallback-banner {
    max-width: 78%;
    margin: 6px 0 0 2px;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 8px;
    border: 1px solid rgba(201, 162, 39, 0.45);
    background: rgba(201, 162, 39, 0.12);
    color: #e8d9a4;
    padding: 6px 8px;
}

.answer-degradation {
    max-width: 78%;
    margin: 6px 0 0 2px;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(20, 24, 32, 0.35);
    color: #c4cedd;
}

.answer-degradation--notice {
    border-color: rgba(180, 190, 210, 0.2);
    background: rgba(80, 90, 120, 0.12);
}

.answer-degradation--caution {
    border-color: rgba(234, 179, 8, 0.35);
    background: rgba(120, 90, 20, 0.15);
}

.answer-degradation-sum {
    list-style: none;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 6px 10px 6px 8px;
    font-weight: 650;
    user-select: none;
}

.answer-degradation > summary::-webkit-details-marker,
.answer-degradation summary::-webkit-details-marker {
    display: none;
}

.answer-degradation .answer-degradation-sum::before {
    content: "▸";
    display: inline-block;
    font-size: 10px;
    opacity: 0.7;
    margin-right: 2px;
    transform: rotate(0deg);
    transition: transform 0.15s ease;
}

.answer-degradation[open] .answer-degradation-sum::before {
    transform: rotate(90deg);
}

.answer-degradation-ico {
    font-size: 12px;
    line-height: 1;
    opacity: 0.75;
    filter: grayscale(0.2);
}

.answer-degradation--notice .answer-degradation-ico {
    color: #a8b4c8;
}

.answer-degradation--caution .answer-degradation-ico {
    color: #facc6b;
}

.answer-degradation-hd {
    color: #d8e2f0;
}

.answer-degradation-n {
    font-size: 11px;
    font-weight: 600;
    color: #8b95a8;
}

.answer-degradation-body {
    padding: 0 10px 8px 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.answer-degradation-list {
    margin: 6px 0 0 0;
    padding: 0 0 0 1rem;
    color: #9aa3b5;
}

.answer-degradation-li {
    margin: 0.35em 0;
}

.answer-degradation-label {
    color: #b8c5d8;
    font-weight: 600;
}

.answer-degradation-detail {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.35;
    color: #7d8899;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

.answer-degradation-hint {
    margin: 6px 0 0 0;
    font-size: 11px;
    line-height: 1.35;
    color: #6b7688;
    font-style: normal;
}

.me .bubble {
    background: rgba(255, 122, 24, .12);
    border-color: rgba(255, 122, 24, .18);
}

.mordor .bubble {
    background: rgba(255, 255, 255, .04);
}

.meta {
    font-size: 12px;
    color: #b7b7b7;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.items {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.item {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .08);
    transition: border-color .15s, background .15s;
}

.item:hover {
    border-color: rgba(255, 122, 24, .2);
    background: rgba(0, 0, 0, .28);
}

.item .t {
    font-weight: 650;
    font-size: 14px;
    color: #f5f6f7;
}

.item .w {
    color: #cfcfcf;
    margin-top: 4px;
}

.item .s {
    color: #9ea3aa;
    margin-top: 6px;
    font-size: 12px;
}

.source-line {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .15px;
}

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

.chip {
    display: inline-block;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: #dce1e8;
    padding: 3px 8px;
    font-size: 11px;
    line-height: 1.2;
}

.chip-model { border-color: rgba(164, 177, 255, .45); }
.chip-project-ref { border-color: rgba(255, 163, 92, .55); }
.chip-customer { border-color: rgba(130, 206, 255, .5); }
.chip-project-type { border-color: rgba(168, 227, 138, .5); }
.chip-tag { border-color: rgba(241, 196, 255, .5); }

.actions {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.feedback-label {
    font-size: 12px;
    color: #9ea3aa;
    margin-right: 4px;
}

.feedback-btn.active {
    opacity: 0.8;
}

.actions-sep {
    color: rgba(255, 255, 255, 0.2);
    font-weight: 400;
    margin: 0 2px;
}

.followup-pills {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.followup-pills .pill {
    cursor: pointer;
}

.bubble.streaming {
    border-color: rgba(255, 122, 24, .3);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

.btn {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    padding: 8px 10px;
    font-weight: 650;
    cursor: pointer;
    font-size: 12px;
}

.btn.primary {
    background: rgba(255, 122, 24, .18);
    border-color: rgba(255, 122, 24, .22);
}

.btn.ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .9);
}

.btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.bar {
    display: flex;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .18);
}

textarea {
    flex: 1;
    resize: none;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    color: #e8e8e8;
    padding: 10px 12px;
    outline: none;
    min-height: 44px;
    max-height: 140px;
}

button#send {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 122, 24, .18);
    color: #fff;
    padding: 10px 14px;
    font-weight: 650;
    cursor: pointer;
}

button#send:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.hint {
    margin-top: 10px;
    color: #9ea3aa;
    font-size: 12px;
}

.hint .ops-map {
    display: block;
    margin: 6px 0 8px 0;
    max-width: 100%;
}

.hint .ops-map-summary {
    cursor: pointer;
    color: #a8b0bd;
    font-size: 11px;
    list-style-position: outside;
}

.hint .ops-map-body {
    margin: 4px 0 0 0;
    color: #8a929e;
    font-size: 11px;
    line-height: 1.45;
    white-space: pre-line;
    max-width: 72ch;
}

.hint-note {
    opacity: .8;
    margin-left: 6px;
}

.version {
    font-size: 11px;
    opacity: .6;
    font-variant-numeric: tabular-nums;
    margin-right: 10px;
}

.ux-banner {
    font-size: 12px;
    line-height: 1.45;
    margin: 0 0 12px 0;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.18);
}

.ux-banner-title {
    font-weight: 700;
    color: #d8e2f0;
    margin-bottom: 4px;
}

.ux-banner-body {
    color: #9aa3b5;
    font-size: 12px;
}

.ux-muted {
    color: #8b95a8;
    font-size: 12px;
}

.eg-no-run.ux-banner {
    border-color: rgba(234, 179, 8, 0.25);
    background: rgba(90, 70, 20, 0.12);
}

.retrieval-panel-hint {
    margin: 0 0 8px 0;
}

.retrieval-evidence-empty,
.retrieval-zero-rows {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: #a8b4c8;
    line-height: 1.4;
}

.config-strip {
    font-size: 10px;
    opacity: 0.55;
    max-width: min(420px, 46vw);
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    margin-right: 8px;
    color: #9aa3b3;
}

.pill {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .05);
    cursor: pointer;
    margin-left: 6px;
    color: #e8e8e8;
}

.pill:hover {
    background: rgba(255, 255, 255, .08);
}

a {
    color: #ffb37c;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Odoo links in answers: compact pill style */
.bubble a[href*="/web#"] {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 2px;
    font-size: 0.9em;
    border-radius: 6px;
    background: rgba(255, 122, 24, 0.15);
    border: 1px solid rgba(255, 122, 24, 0.3);
    color: #ffb37c;
}

.bubble a[href*="/web#"]:hover {
    background: rgba(255, 122, 24, 0.25);
    border-color: rgba(255, 122, 24, 0.5);
}

.eye-img {
    width: 62px;
    height: 62px;
    border-radius: 14px;
    display: block;
    object-fit: contain;
    background: #0b0d12;
    box-shadow: 0 0 18px rgba(255, 120, 40, .25), 0 0 48px rgba(255, 70, 70, .10);
}

.bubble-ts {
    font-size: 10px;
    color: #9ea3aa;
    align-self: flex-end;
    margin-left: 6px;
}

.lang-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 2px;
    color: #cfd4db;
    font-size: 12px;
}
.lang-icon {
    font-size: 16px;
}
.lang-select {
    padding: 6px 10px;
    min-width: 108px;
    cursor: pointer;
    color: #fff;
    background: rgba(255, 255, 255, .06);
}
.badge {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    background: rgba(255, 122, 24, .4);
    color: #fff;
}
.badge.hidden {
    display: none;
}

.bar-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn.active {
    background: rgba(255, 122, 24, .15);
    border-color: rgba(255, 122, 24, .3);
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .7);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal.open {
    display: flex;
}
.modal-content {
    background: #0f1115;
    border-radius: 14px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, .1);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.modal-header h2 {
    margin: 0;
    font-size: 18px;
}
.modal-close {
    background: none;
    border: none;
    color: #9ea3aa;
    font-size: 24px;
    cursor: pointer;
}
.modal-body {
    padding: 16px;
}
.chart-container {
    height: 240px;
}

/* Questions menu */
.modal-content.modal-questions {
    max-width: 520px;
}
.questions-menu {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.questions-section h3 {
    margin: 0 0 10px 0;
    font-size: 13px;
    font-weight: 600;
    color: #ff7a18;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.questions-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.questions-section li {
    margin: 4px 0;
}
.question-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 8px;
    color: #e8e8e8;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.question-item:hover {
    background: rgba(255, 122, 24, .12);
    border-color: rgba(255, 122, 24, .25);
}
.btn-icon {
    margin-right: 6px;
}
.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.view-toggle {
    display: flex;
    gap: 4px;
}
.items.hidden {
    display: none !important;
}
.ref-section {
    margin-top: 6px;
}
.ref-section-title {
    font-size: 12px;
    color: #9ea3aa;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin: 4px 2px 6px 2px;
}
.task-card {
    border-color: rgba(255, 122, 24, .35);
    background: rgba(255, 122, 24, .08);
}
.video-card {
    border-color: rgba(33, 194, 255, .35);
    background: rgba(33, 194, 255, .08);
}

.video-card .t {
    font-size: 15px;
}

.cta-video {
    color: #7dd8ff;
    font-weight: 800;
}

.cta-video-inline {
    border-color: rgba(33, 194, 255, .45);
    background: rgba(33, 194, 255, .20);
}

.chip-project { border-color: rgba(86, 179, 255, .55); }
.chip-task { border-color: rgba(255, 179, 86, .55); }

.video-excerpt {
    margin-top: 8px;
    border-left: 3px solid rgba(33, 194, 255, .5);
    padding-left: 10px;
}

.video-excerpt-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #88cfee;
    font-weight: 700;
}

.video-excerpt-body {
    margin-top: 4px;
    color: #d4e4ef;
    font-size: 13px;
    line-height: 1.45;
}
.ref-table-el {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ref-table-el th,
.ref-table-el td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ref-table-el th {
    color: #9ea3aa;
    font-weight: 600;
}
.ref-table-el .mono {
    font-family: ui-monospace, monospace;
    font-size: 12px;
}
.btn.small {
    padding: 4px 8px;
    font-size: 11px;
}

.action-link {
    font-weight: 650;
}

.empty-state {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, .16);
    color: #aeb4bd;
    font-size: 13px;
}

.modal-dq {
    max-width: min(920px, 96vw);
}

.dq-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 8px;
}

.dq-served {
    font-size: 12px;
    color: #a8b0c4;
    word-break: break-all;
}

.dq-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .04em;
}

.dq-badge.dq-pass {
    background: rgba(34, 197, 94, .22);
    color: #bbf7d0;
    border: 1px solid rgba(34, 197, 94, .45);
}

.dq-badge.dq-warn {
    background: rgba(234, 179, 8, .2);
    color: #fef08a;
    border: 1px solid rgba(234, 179, 8, .4);
}

.dq-badge.dq-fail {
    background: rgba(239, 68, 68, .22);
    color: #fecaca;
    border: 1px solid rgba(239, 68, 68, .4);
}

.dq-badge.dq-unk {
    background: rgba(100, 116, 139, 0.22);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.4);
    font-size: 12px;
    letter-spacing: 0.06em;
}

.dq-note {
    font-size: 12px;
    color: #9aa3b5;
    line-height: 1.45;
    margin: 0 0 12px 0;
}

.dq-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    margin-bottom: 16px;
}

.dq-metric {
    background: rgba(0, 0, 0, .2);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    padding: 8px 10px;
}

.dq-metric-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8b95a8;
    margin-bottom: 4px;
}

.dq-metric-value {
    font-size: 16px;
    font-weight: 700;
    color: #e8edf7;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.dq-h3 {
    font-size: 14px;
    margin: 12px 0 8px 0;
    color: #b8c9e8;
}

.dq-checks {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
    max-height: 220px;
    overflow: auto;
}

.dq-check-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .12);
    border: 1px solid rgba(255, 255, 255, .08);
}

.dq-check-id {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    color: #c8d0e0;
    flex: 1;
    min-width: 120px;
}

.dq-check-meta {
    color: #8b95a8;
    font-size: 11px;
}

.chart-dq {
    min-height: 200px;
    max-height: 360px;
}

.modal-eval-gates {
    max-width: 720px;
    max-height: min(92vh, 860px);
    display: flex;
    flex-direction: column;
}

.modal-eval-gates .modal-body {
    overflow: auto;
}

.br-enf-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}

.br-enf-lab {
  color: #8fa0b0;
  font-weight: 600;
}

p.br-cli-hint {
  margin: 0.2rem 0 0.75rem 0;
  font-size: 0.8rem;
}

.modal-beta-readiness {
    max-width: min(800px, 96vw);
    max-height: min(92vh, 880px);
    display: flex;
    flex-direction: column;
}

.modal-beta-readiness .modal-body {
    overflow: auto;
}

.br-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 6px;
}

.br-meta {
    font-size: 12px;
    color: #8b95a8;
    word-break: break-all;
    flex: 1 1 200px;
}

.br-note {
    font-size: 12px;
    color: #9aa3b5;
    line-height: 1.45;
    margin: 0 0 12px 0;
}

.br-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.br-item {
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 10px;
}

.br-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 6px;
}

.br-label {
    font-size: 14px;
    font-weight: 600;
    color: #d8e2f2;
    flex: 1 1 200px;
}

.br-pre {
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
    max-height: 200px;
    overflow: auto;
    color: #9aa3b5;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.br-err {
    color: #fecaca;
    font-size: 13px;
    padding: 8px 10px;
    background: rgba(239, 68, 68, 0.12);
    border-radius: 6px;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.eg-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 6px;
}

.eg-meta {
    flex: 1 1 180px;
    font-size: 12px;
    color: #8b95a8;
    word-break: break-all;
}

.eg-note {
    font-size: 12px;
    color: #8b95a8;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.eg-warning {
    background: rgba(200, 140, 50, 0.15);
    border: 1px solid rgba(200, 160, 80, 0.35);
    color: #f0d4a0;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    margin-bottom: 10px;
    line-height: 1.45;
}

.eg-h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9aa3b5;
    margin: 14px 0 6px 0;
    font-weight: 650;
}

.eg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 6px 12px;
}

.eg-metric {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 4px 0;
}

.eg-metric-label {
    color: #b8c6e6;
}

.eg-metric-value {
    font-family: ui-monospace, monospace;
    color: #e6edf3;
    text-align: right;
}

.eg-hard {
    font-size: 12px;
}

.eg-kv {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 6px;
}

.eg-mono {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: #c5d0e3;
    white-space: pre-wrap;
    word-break: break-all;
}

.eg-gate-row,
.eg-regr-row {
    display: grid;
    grid-template-columns: 1fr 52px 52px 52px 52px;
    gap: 6px 8px;
    align-items: start;
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.eg-gate-row .eg-gid {
    color: #e6edf3;
    word-break: break-all;
}

.eg-regr-h {
    font-size: 11px;
    color: #7d8699;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
    display: grid;
    grid-template-columns: 1fr 52px 52px 52px 52px;
    gap: 6px 8px;
}

.eg-bad {
    color: #f59b7b;
}

.eg-ok {
    color: #7dd3a0;
}

@media (max-width: 640px) {
    .eg-gate-row,
    .eg-regr-row,
    .eg-regr-h {
        grid-template-columns: 1fr;
    }
}

.operator-panel {
    margin-top: 8px;
    border: 1px solid rgba(120, 180, 255, .25);
    background: rgba(60, 100, 170, .08);
    border-radius: 10px;
    padding: 10px 12px;
}

.operator-summary {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: 8px;
}

.operator-kv {
    font-size: 12px;
    color: #d9e3f7;
}

.operator-evidence-list {
    display: grid;
    gap: 8px;
}

.operator-evidence-card {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: rgba(0, 0, 0, .18);
    padding: 8px 10px;
}

.operator-ev-title {
    font-size: 12px;
    font-weight: 700;
    color: #eef2ff;
}

.operator-ev-meta,
.operator-ev-reasons {
    margin-top: 4px;
    font-size: 12px;
    color: #b8c6e6;
}

.operator-empty {
    font-size: 12px;
    color: #b8c6e6;
}

.mordor-debug-trace {
    margin-top: 10px;
    width: 100%;
    max-width: 100%;
    border: 1px solid rgba(130, 160, 220, 0.3);
    border-radius: 10px;
    background: rgba(15, 25, 50, 0.45);
    padding: 0 10px 8px 10px;
}

.mordor-debug-trace-hd {
    cursor: pointer;
    font-size: 13px;
    font-weight: 650;
    color: #c5d0e3;
    padding: 8px 4px 4px 4px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mordor-debug-trace-hd::-webkit-details-marker {
    display: none;
}

.mordor-debug-trace-ico {
    opacity: 0.85;
    font-size: 14px;
}

.mordor-debug-trace-note {
    font-size: 11px;
    color: #8b95a8;
    line-height: 1.4;
    margin: 0 4px 8px 4px;
}

.mordor-debug-trace-sections {
    max-height: min(52vh, 480px);
    overflow: auto;
    padding: 0 0 4px 0;
}

.mordor-debug-trace-sub {
    margin: 0 0 6px 0;
    border: 1px solid rgba(120, 140, 200, 0.15);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    padding: 0 0 0 0;
}

.mordor-debug-trace-sub-hd {
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #a8b6d0;
    padding: 6px 8px;
    list-style: none;
}
.mordor-debug-trace-sub-hd::-webkit-details-marker {
    display: none;
}

.mordor-debug-trace-json {
    margin: 0;
    padding: 0 8px 8px 8px;
    font-size: 10px;
    line-height: 1.45;
    color: #9fb0cc;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 220px;
    overflow: auto;
}

.mordor-debug-trace-empty {
    font-size: 12px;
    color: #7d8699;
    padding: 4px 8px;
}

.retrieval-evidence-panel {
    width: 100%;
    max-width: 100%;
    margin-top: 6px;
    border: 1px solid rgba(160, 200, 150, .28);
    background: rgba(30, 70, 45, .2);
    border-radius: 10px;
    padding: 0;
}

.retrieval-evidence-panel > summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 650;
    color: #d4ecda;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
}

.retrieval-evidence-panel > summary::-webkit-details-marker {
    display: none;
}

.retrieval-evidence-panel > summary::before {
    content: "▸ ";
    display: inline-block;
    transform: translateY(-1px);
    opacity: .7;
}

.retrieval-evidence-panel[open] > summary::before {
    content: "▾ ";
}

.retrieval-evidence-body {
    padding: 0 8px 10px 12px;
}

.retrieval-evidence-hdr {
    font-size: 12px;
    color: #a8c9b0;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.retrieval-evidence-deg {
    border-left: 3px solid rgba(255, 180, 100, .7);
    padding: 6px 8px;
    margin-bottom: 10px;
    background: rgba(80, 50, 20, .2);
    border-radius: 6px;
    font-size: 12px;
    color: #f0d9c2;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 9rem;
    overflow: auto;
}

.retrieval-evidence-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .1);
}

.retrieval-evidence-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.retrieval-evidence-table th,
.retrieval-evidence-table td {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding: 6px 7px;
    text-align: left;
    vertical-align: top;
}

.retrieval-evidence-table th {
    color: #9ed4ab;
    font-weight: 650;
    position: sticky;
    top: 0;
    background: rgba(15, 30, 22, .95);
    z-index: 1;
}

.retrieval-evidence-table td.missing {
    color: #f0a8a0;
    font-style: italic;
}

.retrieval-evidence-table .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.retrieval-chunktext {
    margin-top: 6px;
    padding: 6px 8px;
    font-size: 11px;
    background: rgba(0, 0, 0, .3);
    border-radius: 6px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 10rem;
    overflow: auto;
    color: #c8d8d0;
}

.knowledge-lanes-panel {
    max-width: 100%;
    margin-top: 4px;
    border-radius: 10px;
    border: 1px solid rgba(255, 122, 24, 0.22);
    background: rgba(0, 0, 0, 0.18);
}

.knowledge-lanes-panel > .knowledge-lanes-summary,
.knowledge-lanes-panel > summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 650;
    color: #e4ebe5;
    user-select: none;
}

.knowledge-lanes-panel[open] > .knowledge-lanes-summary,
.knowledge-lanes-panel[open] > summary {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.knowledge-lanes-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.knowledge-lanes-hdr {
    font-size: 12px;
    font-weight: 600;
    color: #9fb0a3;
    margin-top: 2px;
}

.knowledge-lanes-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    color: #d5ded8;
}

.knowledge-lanes-intent .knowledge-lanes-sub {
    color: #9fb0a3;
    font-weight: 400;
}

.knowledge-lanes-kpath,
.knowledge-lanes-kv {
    font-size: 11.5px;
    line-height: 1.35;
}

.knowledge-lanes-chart-host {
    position: relative;
    width: 100%;
    height: 220px;
    min-height: 180px;
}

.knowledge-lanes-recency-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 720px) {
    .knowledge-lanes-recency-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.knowledge-lanes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

.knowledge-lanes-table th,
.knowledge-lanes-table td {
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
}

.knowledge-lanes-table th {
    background: rgba(0, 0, 0, 0.25);
    color: #c5cfca;
    font-weight: 600;
}

.knowledge-lanes-td-clip {
    max-width: 0;
    word-break: break-word;
    line-height: 1.3;
    font-size: 11px;
}

.knowledge-lanes-reasons {
    margin: 0 0 0 1.1em;
    padding: 0;
    font-size: 11.5px;
    color: #c4d0c7;
    line-height: 1.45;
}

.knowledge-lanes-reasons li {
    margin-bottom: 3px;
}

.knowledge-lanes-top-wrap {
    max-height: 22rem;
    overflow: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.knowledge-lanes-empty {
    color: #8f9a94;
    font-style: italic;
    font-size: 11.5px;
}

.pending-row {
    opacity: .95;
}

.pending-bubble {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 122, 24, .3);
}

.pending-title {
    font-weight: 700;
    font-size: 13px;
}

.pending-sub {
    color: #aeb4bd;
    margin-top: 4px;
    font-size: 12px;
}

.pending-skeleton {
    margin-top: 10px;
    display: grid;
    gap: 6px;
}

.pending-skeleton .line {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.16), rgba(255,255,255,.08));
    background-size: 180% 100%;
    animation: shimmer 1.2s linear infinite;
}

.pending-skeleton .line.w1 { width: 88%; }
.pending-skeleton .line.w2 { width: 72%; }
.pending-skeleton .line.w3 { width: 54%; }

@keyframes shimmer {
    from { background-position: 180% 0; }
    to { background-position: -180% 0; }
}

.items.collapsed {
    display: none !important;
}

.kommodo-embed-wrap {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

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

.video-head-title {
    font-size: 12px;
    color: #9ccce3;
    text-transform: uppercase;
    letter-spacing: .35px;
    font-weight: 700;
}

.kommodo-iframe-box {
    margin-top: 8px;
    border-radius: 8px;
    overflow: hidden;
    background: #0a0a0c;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    max-height: 420px;
    transition: max-height .24s ease, opacity .24s ease, transform .24s ease;
    opacity: 1;
    transform: translateY(0);
}
.kommodo-iframe-box.is-collapsed {
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    padding-bottom: 0;
    margin-top: 0;
}
.kommodo-embed-fallback {
    padding: 8px;
    font-size: 12px;
    color: #9ea3aa;
}
.kommodo-embed-fallback a {
    color: #f59e0b;
}
.kommodo-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
a.kommodo-link {
    color: #f59e0b;
}

.modal-providers .modal-content {
    max-width: 720px;
}
.provider-modal-body {
    max-height: min(78vh, 34rem);
    overflow: auto;
}
.prov-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.prov-h {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ba3a8;
    margin: 14px 0 6px;
}
.prov-last-answer {
    font-size: 12.5px;
    line-height: 1.45;
    color: #dbe5df;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(0,0,0,.2);
    border: 1px solid rgba(255,255,255,.06);
    white-space: pre-wrap;
    word-break: break-word;
}
.prov-mono {
    font-size: 11.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    line-height: 1.4;
    color: #c8d4cd;
    padding: 6px 0;
}
.prov-fb-note {
    font-size: 11.5px;
    color: #9fb0a3;
    margin: 0 0 6px 0;
}
.prov-table-wrap, .prov-route-table, .prov-trace-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}
.prov-route-table th, .prov-route-table td, .prov-trace-table th, .prov-trace-table td {
    border: 1px solid rgba(255,255,255,.08);
    padding: 5px 7px;
    text-align: left;
    vertical-align: top;
}
.prov-route-table th, .prov-trace-table th {
    background: rgba(0,0,0,.22);
    color: #b8c2bc;
    font-weight: 600;
}
.prov-trace { overflow: auto; max-width: 100%; }
.prov-health-line {
    margin: 6px 0 10px;
    font-size: 12.5px;
    line-height: 1.45;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}
.prov-label { font-weight: 600; color: #a8b2ad; }
.prov-dot { font-size: 11.5px; }
.prov-dot.ok { color: #34d399; }
.prov-dot.bad { color: #f87171; }
.prov-dot.unk { color: #9ca3af; }
.prov-oll-url { color: #93c5af; }
.prov-skip, .prov-lat { color: #8a9394; font-size: 11.5px; }
.prov-err {
    flex-basis: 100%;
    color: #fca5a5;
    font-size: 11px;
    margin-top: 4px;
    word-break: break-word;
}

.top-actions .btn span:not(.badge):not(.lang-icon) {
    white-space: nowrap;
}
@media (max-width: 640px) {
    .top-actions #btnQuestions [data-i18n] { display: none; }
    .top-actions #btnQuestions .btn-icon { margin-right: 0; }
}

/* Responsive */
@media (max-width: 768px) {
    .wrap { padding: 12px; }
    .top { flex-direction: column; align-items: stretch; }
    .top-actions { flex-wrap: wrap; justify-content: flex-start; }
    .brand { flex-direction: column; align-items: flex-start; }
    .bubble { max-width: 95%; }
    .bar { flex-direction: column; align-items: stretch; }
    .bar textarea { min-height: 80px; }
    .bar-buttons { justify-content: flex-end; }
    .hint { font-size: 11px; }
    .hint .pill { margin-top: 4px; }
    .eye, .eye-img { width: 48px; height: 48px; border-radius: 10px; }
    .msgs { height: 55vh; }
}