/* ============================================================
   Vichem — Reports Tab  ·  production stylesheet
   ============================================================ */

@font-face {
  font-family: 'UTM Bebas';
  src: url('/assets/fonts/UTM-Bebas.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---- Shell — column: top bar over a full-bleed report ----- */
/* overflow:clip (not hidden) so the off-screen chat panel is paint-clipped
   WITHOUT making .rt a scroll container — prevents focus-scroll from shifting
   the whole report sideways when the panel opens. */
.rt { display: flex; flex-direction: column; height: 100%; overflow: clip; position: relative; background: var(--surface-page); font-family: var(--font-body); color: var(--text-body); font-size: 14px; }

/* Back arrow — icon only, narrower than it is tall */
.rt-home { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 30px; padding: 0; border: none; border-radius: var(--radius-md); background: rgba(255,255,255,.14); color: #fff; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
.rt-home:hover { background: rgba(255,255,255,.24); }
.rt-home svg { width: 14px; height: 14px; }

/* ---- Dashboard browser ----------------------------------------- */
.rt-dash-browser { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }

.rt-dash-group { position: relative; }

.rt-dash-btn { display: flex; align-items: center; justify-content: center; gap: 3px; height: 30px; min-width: 72px; padding: 0 7px; border-radius: var(--radius-md); border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; font-family: inherit; font-size: 11px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.rt-dash-btn:hover { background: rgba(255,255,255,.22); }
.rt-dash-btn.active { background: rgba(255,255,255,.95); border-color: rgba(255,255,255,.95); color: var(--color-primary); font-weight: 600; }
.rt-dash-btn svg { width: 11px; height: 11px; flex-shrink: 0; }
.rt-caret { transition: transform var(--duration-fast) var(--ease-out); }
.rt-dash-btn.open .rt-caret { transform: rotate(180deg); }

.rt-dash-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 180px; max-width: 260px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: 0 6px 20px rgba(13,20,29,.14); z-index: 200; overflow: hidden; }
.rt-dash-menu.open { display: block; }
.rt-dash-menu-item { display: block; width: 100%; padding: 8px 12px; text-align: left; border: none; background: none; color: var(--text-body); font-family: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-dash-menu-item:hover { background: var(--gray-50); }
.rt-dash-menu-item.active { background: var(--blue-50); color: var(--blue-700); font-weight: 600; }

.rt-topics { display: flex; flex-direction: row; align-items: center; gap: 7px; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.rt-topics::-webkit-scrollbar { display: none; }
.rt-topic { position: relative; display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 7px 13px 7px 9px; border: 1.5px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); border-radius: var(--radius-pill); font-family: inherit; font-size: 12px; color: #fff; cursor: pointer; white-space: nowrap; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.rt-topic:hover { background: rgba(255,255,255,.2); }
.rt-topic-ico { width: 22px; height: 22px; flex-shrink: 0; border-radius: var(--radius-sm); background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; transition: background var(--duration-fast) var(--ease-out); }
.rt-topic-ico i { width: 13px; height: 13px; color: rgba(255,255,255,.9); }
.rt-topic-label { flex: 1; }
.rt-topic.active { background: rgba(255,255,255,.95); color: var(--color-primary); font-weight: 700; border-color: rgba(255,255,255,.9); }
.rt-topic.active .rt-topic-ico { background: var(--color-primary); }
.rt-topic.active .rt-topic-ico i { color: #fff; }

.rt-ai-btn { width: 32px; height: 32px; flex-shrink: 0; border: none; border-radius: var(--radius-md); background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.rt-ai-btn:hover { background: rgba(255,255,255,.28); transform: translateY(-1px); }
.rt-ai-btn:active { transform: translateY(0); }
.rt-ai-btn i { width: 17px; height: 17px; color: #fff; }
.rt-ai-btn.active { background: rgba(255,255,255,.28); box-shadow: 0 0 0 2px rgba(255,255,255,.5); }

/* Dashboard mode: topic chips hidden, browser visible (set via JS — rt-solo kept for compat). */
.rt-solo .rt-topics { display: none; }

/* ---- Report frame (fills the full area) ------------------- */
.rt-frame-wrap { flex: 1; position: relative; overflow: hidden; background: var(--surface-page); min-height: 0; padding: 8px; }
.rt-frame { width: 100%; height: 100%; border: none; display: block; border-radius: var(--radius-md); box-shadow: 0 1px 6px rgba(18,42,73,.09); background: #fff; }
/* text-align + padding matter here because several call sites (openReportViewer's
   404 branch, selectReportTopic's error branch, _buildDashBrowser's no-owner-for-
   topic fallback) set this element's .textContent directly, replacing the icon+span
   markup below with a bare text node — so wrapped lines need centering and edge
   clearance from the container itself, not from a child element that may not exist. */
.rt-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-muted); background: var(--surface-page); pointer-events: none; text-align: center; padding: 0 28px; line-height: 1.5; }
.rt-empty i { width: 30px; height: 30px; color: var(--text-faint); flex-shrink: 0; }

@media (max-width: 600px) {
  .rt-empty { padding: 0 20px; font-size: 13px; gap: 10px; }
  .rt-empty i { width: 26px; height: 26px; }
}

/* ---- Chat: frosted side-panel overlay (toggled) ----------- */
.rt-scrim { position: absolute; inset: 0; z-index: 35; background: rgba(13,20,29,.30); opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-out); }
.rt-scrim.show { opacity: 1; pointer-events: auto; }

.rt-chat { position: absolute; top: 0; right: 0; bottom: 0; z-index: 40; width: min(440px, 92%); display: flex; flex-direction: column; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); border-left: 1px solid rgba(255,255,255,.55); box-shadow: -18px 0 50px rgba(18,42,73,.22); transform: translateX(100%); visibility: hidden; transition: transform var(--duration-base) var(--ease-out), visibility 0s var(--duration-base); }
.rt-chat.open { transform: translateX(0); visibility: visible; transition: transform var(--duration-base) var(--ease-out), visibility 0s; }

.rt-chat-head { display: flex; align-items: center; gap: 9px; padding: 14px 14px 12px; border-bottom: 1px solid rgba(255,255,255,.5); flex-shrink: 0; }
.rt-chat-ava { width: 32px; height: 32px; border-radius: var(--radius-md); flex-shrink: 0; background: var(--gradient-fresh); display: flex; align-items: center; justify-content: center; }
.rt-chat-ava i { width: 17px; height: 17px; color: #fff; }
.rt-chat-titles { flex: 1; min-width: 0; }
.rt-chat-t1 { font-size: 15px; font-weight: 700; color: var(--text-strong); }
.rt-chat-acts { display: flex; gap: 4px; }
.rt-iconbtn { width: 32px; height: 32px; border-radius: var(--radius-sm); border: none; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.rt-iconbtn:hover { background: rgba(255,255,255,.6); color: var(--color-primary); }
.rt-iconbtn i { width: 18px; height: 18px; }

.rt-chat-body { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.rt-chat-body .msg { max-width: 82%; padding: 10px 13px; font-size: 13.5px; line-height: 1.55; border-radius: var(--radius-lg); white-space: pre-wrap; }
.rt-chat-body .msg.bot { align-self: flex-start; background: var(--surface-card); border: 1px solid var(--border-subtle); color: var(--text-body); border-bottom-left-radius: var(--radius-xs); }
.rt-chat-body .msg.user { align-self: flex-end; background: var(--color-primary); color: #fff; border-bottom-right-radius: var(--radius-xs); }
.rt-chat-body .msg.bot b { color: var(--text-strong); }
.rt-chat-body .msg-meta { align-self: flex-start; display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); margin-bottom: -4px; }
.rt-chat-body .msg-meta i { width: 13px; height: 13px; color: var(--green-500); }
.rt-hist-expand { align-self: center; background: none; border: 1px solid var(--border-subtle); border-radius: 99px; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 5px 14px; margin: 2px auto; transition: background .15s, color .15s; }
.rt-hist-expand:hover { background: var(--surface-card); color: var(--text-body); }

.rt-chat-input-row { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.5); align-items: center; flex-shrink: 0; }
.rt-input { flex: 1; min-width: 0; padding: 10px 14px; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); font-family: inherit; font-size: 14px; background: rgba(255,255,255,.85); color: var(--text-strong); outline: none; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.rt-input::placeholder { color: var(--text-faint); }
.rt-input:focus { border-color: var(--color-primary); box-shadow: var(--shadow-focus); background: #fff; }
.rt-send { width: 40px; height: 40px; flex-shrink: 0; border: none; border-radius: var(--radius-md); background: var(--color-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast); }
.rt-send:hover { background: var(--color-primary-hover); }
.rt-send:active { transform: scale(.93); }
.rt-send i { width: 18px; height: 18px; color: #fff; }

/* ---- Mobile: shrink dash-btn labels ----- */
@media (max-width: 600px) {
  .rt-dash-btn span { display: none; }
  .rt-dash-btn { padding: 4px 7px; min-width: 0; }
}