/* Professional reading workspace. Scoped to the Reecopedia page. */
:root {
  --work-bg:#101820; --work-surface:#16212c; --work-soft:#1d2b37;
  --work-ink:#edf2f5; --work-muted:#b0bdc7; --work-line:#384957;
  --work-accent:#8bd0ae; --work-accent-ink:#112b20;
  --work-user:#203a32;
}
html[data-theme="light"] {
  --work-bg:#f5f6f4; --work-surface:#ffffff; --work-soft:#f0f3f1;
  --work-ink:#202e2a; --work-muted:#56665e; --work-line:#cbd5ce;
  --work-accent:#246747; --work-accent-ink:#ffffff; --work-user:#eaf3ed;
  --fg:var(--work-ink); --muted:var(--work-muted);
}
html, html[data-theme] body, html[data-theme], html:not([data-theme]) body { background:var(--work-bg);color:var(--work-ink); }
body::before,html[data-theme] body::before { display:none; }
body { margin:0; }
header {
  position:relative;top:auto;display:flex;flex-wrap:wrap;gap:10px;
  padding:14px max(20px,calc((100% - 1120px)/2));min-height:76px;
  background:var(--work-surface)!important;border-bottom:1px solid var(--work-line);
  box-shadow:none!important;backdrop-filter:none;z-index:2;
}
header img { height:38px;width:38px;object-fit:contain; }
header h1 {font-size:18px;letter-spacing:.08em;}
html[data-theme] header h1 {color:var(--work-ink);}
header .pill,header .cta,header .btn-ghost,header #roleBadge,header select,header #otpUserPanel .user-panel-btn {
  min-height:36px;height:auto;color:var(--work-ink)!important;background:transparent!important;
  box-shadow:none!important;border-color:var(--work-line)!important;line-height:1.3;
}
header .pill {border-radius:8px;padding:0 8px;gap:4px;}
header .cta {border-radius:8px;text-decoration:none;padding:8px 12px;}
header #roleBadge {font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:0 6px;}
header select {max-width:135px;line-height:1.3;}
header .theme-toggle {min-width:44px;min-height:36px;}
header .theme-toggle,header .theme-toggle-thumb {box-shadow:none!important;}
.wrap {max-width:1120px;width:100%;padding:0 24px;margin:24px auto 12px;}
.layout {display:block;}
.card,html[data-theme] .card {
  background:var(--work-surface)!important;border:1px solid var(--work-line);border-radius:14px;
  box-shadow:none;backdrop-filter:none;min-height:480px;height:calc(100dvh - 190px);max-height:1100px;
  overflow:hidden;
}
.body,html[data-theme] .body {
  order:0;min-height:0;overflow:auto;overscroll-behavior:contain;
  background:var(--work-surface)!important;padding:32px 36px;flex:1 1 auto;
}
.chat {padding:0;margin:0 auto;max-width:780px;gap:28px;min-width:0;}
.msg,html[data-theme] .msg {
  font-size:16px;line-height:1.65;color:var(--work-ink);max-width:100%;min-width:0;
  overflow-wrap:anywhere;overflow:visible;
}
.msg.bot,html[data-theme] .msg.bot {
  width:100%;border:0;border-radius:0;background:transparent;padding:0 0 24px;
  border-bottom:1px solid var(--work-line);align-self:stretch;
}
.msg.me {max-width:85%;padding:12px 18px;border:1px solid var(--work-line);background:var(--work-user);border-radius:12px;white-space:pre-wrap;}
.reply-text {max-width:76ch;}
.reply-text > :first-child {margin-top:0;}
.reply-text p {margin:0 0 1em;}
.reply-text h2 {font-size:22px;line-height:1.3;letter-spacing:-.015em;margin:1.5em 0 .6em;font-weight:650;}
.reply-text h3 {font-size:18px;line-height:1.4;margin:1.3em 0 .5em;}
.reply-text h4,.reply-text h5,.reply-text h6 {font-size:16px;line-height:1.5;margin:1.2em 0 .5em;}
.reply-text ul,.reply-text ol {padding-inline-start:1.5em;margin:0 0 1em;}
.reply-text li {padding-inline-start:.2em;margin:.35em 0;}
.reply-text li > p {margin:.2em 0;}
.reply-text strong {font-weight:650;}
.reply-text blockquote {border-inline-start:3px solid var(--work-accent);padding:4px 16px;margin:1em 0;color:var(--work-muted);}
.reply-text blockquote p:last-child {margin-bottom:0;}
.reply-text a,.reeco-fonti a {color:var(--work-accent);text-decoration:underline;text-underline-offset:3px;}
.reply-text pre {white-space:pre;max-width:100%;overflow:auto;background:var(--work-soft);padding:16px;border-radius:8px;margin:1em 0;}
.reply-text code {font-family:ui-monospace,monospace;font-size:.9em;background:var(--work-soft);padding:2px 4px;border-radius:3px;}
.reply-text pre code {padding:0;}
.reply-text hr {border:0;border-top:1px solid var(--work-line);margin:24px 0;}
.assistant-message .reeco-table-wrapper {width:100%;max-width:100%;overflow:auto;margin:16px 0;border:1px solid var(--work-line);border-radius:8px;}
.assistant-message table {width:100%;border-collapse:collapse;font-size:14px;line-height:1.55;}
.assistant-message th,.assistant-message td,html[data-theme] .assistant-message th,html[data-theme] .assistant-message td {
  padding:10px 14px;text-align:start;vertical-align:top;border:0;border-bottom:1px solid var(--work-line);color:var(--work-ink);background:transparent;
}
.assistant-message th,html[data-theme] .assistant-message th {background:var(--work-soft);font-weight:650;}
.assistant-message tr:nth-child(even) td {background:transparent;}
.reeco-cite {line-height:0;vertical-align:super;margin-inline:3px;}
.reeco-cite a {display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;font-size:11px;line-height:1;border:1px solid var(--work-line);border-radius:5px;text-decoration:none;background:var(--work-soft);}
.reeco-fonti {font-size:13px;margin:16px 0 8px;border:1px solid var(--work-line);border-radius:8px;padding:0 14px;}
.reeco-fonti summary {padding:12px 0;cursor:pointer;font-weight:600;color:var(--work-ink);}
.reeco-fonti ol {padding-inline-start:22px;margin:0 0 12px;}
.reeco-fonti li {padding:12px 4px;border-top:1px solid var(--work-line);scroll-margin:12px;overflow-wrap:anywhere;}
.source-title {font-weight:600;}
.source-excerpt {font-size:13px;margin:8px 0;color:var(--work-muted);white-space:pre-wrap;}
.source-count {font-size:11px;color:var(--work-muted);margin-inline-start:6px;}
.reasoning-trace {font-size:12px;color:var(--work-muted);margin:0 0 14px;}
.reasoning-trace summary {padding:6px 0;cursor:pointer;}
.answer-copy,.thumbs-down-btn,html[data-theme] .thumbs-down-btn {
  position:static;display:inline-flex;align-items:center;min-height:36px;margin:10px 10px 0 0;padding:6px 10px;
  border:1px solid var(--work-line);border-radius:6px;background:transparent;color:var(--work-muted);font:inherit;font-size:12px;cursor:pointer;
}
.controls,html[data-theme] .controls {
  position:relative;bottom:auto;flex:0 0 auto;padding:16px 24px 12px;
  background:var(--work-surface)!important;border-top:1px solid var(--work-line);backdrop-filter:none;
}
.input-box,html[data-theme] .input-box {display:flex;flex-direction:column;align-items:stretch;background:var(--work-soft)!important;border:1px solid var(--work-line);border-radius:10px;padding:8px 12px;box-shadow:none!important;}
.input-box-text {width:100%;min-width:0;}
#q {font-size:16px;line-height:1.5;min-height:44px;max-height:150px;color:var(--work-ink);padding:4px 0;}
.input-box-actions {display:flex;width:100%;justify-content:flex-start;gap:6px;margin-top:4px;align-items:center;}
.icon-btn,html[data-theme] .icon-btn {min-height:38px;min-width:38px;border-radius:7px;padding:6px 10px;border:1px solid var(--work-line);background:transparent!important;color:var(--work-ink);box-shadow:none!important;}
.icon-btn svg {width:18px;height:18px;fill:currentColor;}
.icon-btn .icon-label {display:inline;font-size:12px;}
#sendBtn,html[data-theme] #sendBtn {margin-inline-start:auto;background:var(--work-accent)!important;color:var(--work-accent-ink);border-color:var(--work-accent);min-width:44px;}
.controls-footer {min-height:24px;margin-top:8px;flex-wrap:wrap;font-size:12px;color:var(--work-muted);}
#hint {min-width:0;overflow-wrap:anywhere;}
#clearChatBtn {color:var(--work-muted)!important;}
.workspace-info,#mcpConnect,html[data-theme] #mcpConnect {margin:14px 0 0!important;padding:0!important;border:0;border-radius:0;background:transparent!important;box-shadow:none;}
.workspace-info>summary,#mcpConnect>summary {font-size:13px;color:var(--work-muted);cursor:pointer;padding:8px 0;}
#legend,#mcpConnectBody,html[data-theme] #legend,html[data-theme] #mcpConnectBody {width:100%;margin-top:8px;padding:20px;border:1px solid var(--work-line);background:var(--work-surface);box-shadow:none;border-radius:8px;font-size:14px;line-height:1.6;}
#mcpConnectBody>p,#mcpConnectBody>ul {font-size:14px;line-height:1.6;max-width:80ch;margin:12px 0;}
.client-welcome {padding:24px 0 12px;max-width:660px;margin:auto;}
.workspace-eyebrow {font-size:11px;letter-spacing:.12em;color:var(--work-accent);font-weight:650;margin-bottom:18px;}
.client-welcome h2 {font-size:28px;line-height:1.25;font-weight:600;letter-spacing:-.025em;margin:0 0 14px;max-width:540px;}
.client-welcome>p {font-size:16px;line-height:1.6;color:var(--work-muted);margin:0 0 24px;}
.welcome-prompts {display:flex;flex-direction:column;gap:0;border-top:1px solid var(--work-line);}
.welcome-prompts button {display:block;width:100%;text-align:start;border:0;border-bottom:1px solid var(--work-line);background:transparent;color:var(--work-ink);font:inherit;font-size:14px;line-height:1.5;padding:14px 2px;cursor:pointer;}
.welcome-prompts button:hover {color:var(--work-accent);background:var(--work-soft);}
.client-welcome .welcome-hint {font-size:12px;margin:18px 0 0;}
#footerNote {font-size:11px;color:var(--work-muted);padding:8px 20px;}
#partnerFooter {padding:12px 20px;gap:20px;opacity:.8;}
#partnerFooter img {max-height:25px;max-width:100px;object-fit:contain;}
:where(button,a,summary,textarea,select,[tabindex]):focus-visible,
header select:focus-visible {outline:2px solid var(--work-accent)!important;outline-offset:3px!important;}
#q:focus-visible {outline-offset:0!important;}
.sr-only:focus-visible+label {outline:2px solid var(--work-accent);outline-offset:3px;}
@media (max-width:700px) {
  header {padding:10px 14px;gap:8px;min-height:104px;}
  header h1 {font-size:16px;letter-spacing:.06em;}
  header img {height:30px;width:30px;}
  header .spacer {flex:1;}
  #homeLink {display:none;}
  header .pill {font-size:12px;margin:0;}
  header #roleBadge {padding:0 4px;}
  header select {max-width:110px;}
  header #langLabel {display:none;}
  .wrap {padding:0 10px;margin:12px auto;}
  .card,html[data-theme] .card {height:calc(100dvh - 145px);min-height:440px;border-radius:10px;}
  .body,html[data-theme] .body {padding:22px 16px;}
  .chat {gap:22px;}
  .msg,html[data-theme] .msg {font-size:16px;line-height:1.65;}
  .msg.me {max-width:95%;padding:10px 12px;}
  .reply-text h2 {font-size:21px;}
  .controls,html[data-theme] .controls {padding:10px;}
  .input-box-actions {flex-wrap:nowrap;}
  .icon-btn {padding:6px 8px;}
  .client-welcome {padding:4px 0;}
  .client-welcome h2 {font-size:24px;}
  .client-welcome>p {font-size:14px;}
  .welcome-prompts button {font-size:13px;padding:12px 2px;}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto;}
  *,*::before,*::after {transition:none!important;animation:none!important;}
}

html[data-theme] .input-box-actions .icon-btn,
html[data-theme] .input-box-actions .icon-btn:not(.icon-btn-send):hover,
html[data-theme] .input-box-actions .icon-btn:not(.icon-btn-send).active {
  box-shadow:none!important;transform:none;color:var(--work-ink)!important;
  background:var(--work-surface)!important;border-color:var(--work-line)!important;
}
html[data-theme] .input-box-actions .icon-btn:not(.icon-btn-send).active {border-color:var(--work-accent)!important;box-shadow:inset 0 0 0 1px var(--work-accent)!important;}
html[data-theme] #sendBtn,html[data-theme] #sendBtn:hover,html[data-theme] #sendBtn.active {
  color:var(--work-accent-ink)!important;background:var(--work-accent)!important;border-color:var(--work-accent)!important;box-shadow:none!important;
}
