:root { --nio-dark: #0d442e; --nio-neon: #29f000; --nio-pale: #f1f6ed; --ink: #173328; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--nio-pale); color: var(--ink); font: 16px Arial, sans-serif; }
.topbar { min-height: 72px; padding: 14px 5%; display: flex; align-items: center; gap: 28px; background: var(--nio-dark); color: white; }
.brand { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 1.1rem; }
.logo { color: var(--nio-neon); font-size: 2.4rem; letter-spacing: -3px; line-height: 1; }
.profile { margin-left: auto; font-size: .9rem; }
.admin-link { display: inline-block; margin-left: 12px; text-decoration: none; }
.admin-link[hidden] { display: none; }
.profile .warning, .warning { color: #ffd85c; }
.action, .send { border: 0; background: var(--nio-neon); color: #07321f; cursor: pointer; font-weight: 700; padding: 11px 16px; }
.layout { max-width: 1250px; margin: 28px auto; padding: 0 20px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; }
.conversation, .sources-panel { background: white; border: 1px solid #dce7d8; box-shadow: 0 3px 12px #0d442e12; }
.messages { min-height: 490px; padding: 30px; overflow-y: auto; }
.welcome { text-align: center; margin: 130px auto; color: #52645b; }
.welcome h1 { color: var(--nio-dark); }
.message { max-width: 85%; padding: 14px 17px; margin: 12px 0; border-radius: 10px; line-height: 1.5; white-space: pre-wrap; }
.message.user { margin-left: auto; background: var(--nio-dark); color: white; }
.message.assistant { background: #eef6e9; }
.customer-type-options { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.customer-type-option { border: 1px solid var(--nio-dark); background: white; color: var(--nio-dark); cursor: pointer; font: inherit; font-weight: 700; padding: 10px 14px; }
.customer-type-option:hover, .customer-type-option:focus { background: var(--nio-neon); outline: 2px solid #29f00055; }
.composer { display: flex; gap: 10px; padding: 16px; border-top: 1px solid #dce7d8; }
.composer-fields { flex: 1; display: grid; gap: 8px; }
.scope-toggle { color: var(--nio-dark); font-size: .85rem; }
.scope-toggle input { accent-color: var(--nio-dark); }
textarea { flex: 1; resize: vertical; min-height: 48px; border: 1px solid #afc4b1; padding: 13px; font: inherit; }
.sources-panel { padding: 22px; }
.sources-panel h2 { margin-top: 0; color: var(--nio-dark); font-size: 1.1rem; }
.source { border-left: 4px solid var(--nio-neon); padding: 10px 0 10px 12px; margin: 12px 0; }
.source a { color: var(--nio-dark); font-weight: 700; }
.source-asset { display: inline-block; margin-top: 8px; font-size: .85rem; }
.source-preview { display: block; max-width: 100%; max-height: 180px; margin-top: 8px; border: 1px solid #dce7d8; }
.source-meta { display: block; margin-top: 5px; color: #52645b; }
.source-assets { margin-top: 8px; }
.source-assets summary { color: var(--nio-dark); cursor: pointer; font-size: .85rem; font-weight: 700; }
.source-asset-list { display: grid; gap: 8px; margin-top: 8px; }
.source-asset { color: var(--nio-dark); }
.muted, .notice { color: #6d7d73; font-size: .85rem; }
.answer-like { display: block; margin-top: 10px; border: 1px solid #a8c9af; background: #fff; color: var(--nio-dark); padding: 6px 10px; cursor: pointer; font: inherit; font-size: .82rem; }
.answer-like.selected { background: #e7f8e3; border-color: var(--nio-neon); }
.notice { padding: 0 16px 16px; margin: 0; }
.login-card h1 { margin: 0; color: var(--nio-dark); }
.login-logo { display: block; width: 132px !important; height: auto; align-self: center; object-fit: contain; border-radius: 8px; }
.brand img { width: 58px; height: 34px; object-fit: contain; background: var(--nio-neon); border-radius: 5px; }
.login-view { min-height: calc(100vh - 72px); display: grid; place-items: center; padding: 28px; }
.login-card { width: min(420px, 100%); display: grid; gap: 10px; padding: 30px; background: white; border: 1px solid #dce7d8; box-shadow: 0 3px 12px #0d442e12; }
.login-card h1 { margin: 0; color: var(--nio-dark); }
.login-card p { color: #52645b; line-height: 1.4; }
.login-card input { border: 1px solid #afc4b1; padding: 12px; font: inherit; }
.error { color: #9b1c1c !important; }
.secondary { background: transparent; color: white; border: 1px solid var(--nio-neon); }
#feedback-dialog .secondary { color: var(--nio-dark); border-color: var(--nio-dark); }
.feedback-panel { display: flex; align-items: center; gap: 12px; padding: 14px 16px 0; }
.feedback-trigger { font-size: .9rem; }
.feedback-status { margin: 0; color: var(--nio-dark); font-size: .9rem; }
.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; }
dialog { width: min(520px, calc(100% - 32px)); border: 1px solid #afc4b1; padding: 0; color: var(--ink); box-shadow: 0 12px 40px #0d442e40; }
dialog::backdrop { background: #0d442e80; }
dialog form { display: grid; gap: 10px; padding: 24px; }
dialog h2 { margin: 0; color: var(--nio-dark); }
dialog label { font-weight: 700; }
dialog select, dialog textarea { width: 100%; border: 1px solid #afc4b1; padding: 12px; font: inherit; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.admin-layout { max-width: 1400px; margin: 28px auto; padding: 0 20px; display: grid; grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr); gap: 22px; align-items: start; }
.admin-card { background: white; border: 1px solid #dce7d8; box-shadow: 0 3px 12px #0d442e12; padding: 22px; }
.admin-card h1, .admin-card h2, .admin-card h3 { color: var(--nio-dark); }
.admin-card h1 { margin-top: 0; }
.filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.filter-grid label { display: grid; gap: 6px; font-weight: 700; font-size: .9rem; }
.filter-grid select, .filter-grid input, .review-comment { width: 100%; border: 1px solid #afc4b1; padding: 10px; font: inherit; }
.filter-actions, .admin-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.queue-status { min-height: 1.4em; }
.feedback-queue { display: grid; gap: 10px; margin-top: 14px; }
.feedback-card { display: grid; gap: 6px; width: 100%; text-align: left; padding: 14px; border: 1px solid #cbdac7; background: #f7fbf4; color: var(--ink); cursor: pointer; }
.feedback-card:hover, .feedback-card:focus { border-color: var(--nio-dark); outline: 3px solid #29f00055; }
.feedback-card strong { color: var(--nio-dark); }
.feedback-card small { color: #52645b; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.detail-block { border-top: 1px solid #dce7d8; padding-top: 14px; margin-top: 16px; }
.detail-block h3 { margin: 0 0 8px; }
.detail-value { white-space: pre-wrap; line-height: 1.5; }
.detail-list { margin: 0; padding-left: 20px; }
.review-comment { min-height: 70px; resize: vertical; margin-top: 8px; }
.admin-actions .action { min-width: 110px; }
.admin-actions .secondary { color: var(--nio-dark); border-color: var(--nio-dark); }
.extra-content-panel { grid-column: 1 / -1; }
.learning-panel { grid-column: 1 / -1; }
.learning-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 24px; }
.learning-metric-card { padding: 16px; border: 1px solid #cbdac7; border-top: 4px solid var(--nio-neon); background: #f7fbf4; }
.learning-metric-card h3 { margin: 0 0 14px; color: var(--nio-dark); font-size: 1rem; }
.learning-metric-card dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0; font-size: .9rem; }
.learning-metric-card dt { color: #52645b; }
.learning-metric-card dd { margin: 0; color: var(--nio-dark); font-weight: 700; }
.validated-answer-list { display: grid; gap: 12px; }
#guidance-list, #validated-answers { max-height: min(65vh, 720px); overflow-y: auto; padding: 4px 10px 4px 4px; border: 1px solid #dce7d8; background: #fbfdf9; scrollbar-gutter: stable; }
#managed-users, #active-sessions { max-height: 280px; overflow-y: auto; padding: 4px 10px 4px 4px; border: 1px solid #dce7d8; background: #fbfdf9; scrollbar-gutter: stable; }
#guidance-list:empty, #validated-answers:empty { border: 0; background: transparent; padding: 0; }
.validated-answer { padding: 14px; border: 1px solid #cbdac7; background: #f7fbf4; }
.validated-answer h3 { margin: 0 0 8px; color: var(--nio-dark); font-size: 1rem; }
.validated-answer p { margin: 8px 0; white-space: pre-wrap; line-height: 1.45; }
.validated-answer small { color: #52645b; }
.extra-content-form { display: grid; gap: 14px; }
.extra-content-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.extra-content-fields label { display: grid; gap: 6px; font-weight: 700; font-size: .9rem; }
.extra-content-fields input, .extra-content-fields select { width: 100%; border: 1px solid #afc4b1; padding: 10px; font: inherit; }
.extra-content-form-actions, .extra-content-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.extra-content-form-actions .secondary { color: var(--nio-dark); border-color: var(--nio-dark); }
.extra-content-actions .secondary { color: var(--nio-dark); border-color: var(--nio-dark); }
.extra-content-item .secondary { color: var(--nio-dark); border-color: var(--nio-dark); }
.extra-content-list { display: grid; gap: 12px; margin-top: 16px; }
.extra-content-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 14px; border: 1px solid #cbdac7; background: #f7fbf4; }
.extra-content-metadata { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.extra-content-field { display: grid; gap: 4px; min-width: 0; }
.extra-content-field strong { color: var(--nio-dark); font-size: .85rem; }
.extra-content-field span { overflow-wrap: anywhere; }
.extra-content-actions { align-self: center; justify-content: flex-end; }
@media (max-width: 920px) { .admin-layout { grid-template-columns: 1fr; } }
@media (max-width: 920px) { .learning-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .topbar { flex-wrap: wrap; gap: 12px; } .profile { order: 3; width: 100%; margin-left: 0; } .layout { grid-template-columns: 1fr; margin-top: 14px; } .messages { min-height: 380px; padding: 18px; } .extra-content-fields, .extra-content-metadata, .extra-content-row, .learning-metric-grid { grid-template-columns: 1fr; } #guidance-list, #validated-answers { max-height: 55vh; padding-right: 8px; } }