/* app.css — SUPPLEMENTAL styles, loaded AFTER the brand /dist/main.css.
   The brand bundle (Bootstrap 4 + bootstrap-icons + brand) styles the chat,
   navbar, sidebar and cards. This file only adds what the brand doesn't cover:
   the demo banner, user-message alignment, the right-hand signals panel, and
   the SSE frame log. Keep it lean so it never fights the brand. */

/* DEMO tag in the navbar header */
.demo-tag { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #9a6700; background: #fff4e5; border: 1px solid #ffd8a8; border-radius: 4px; padding: 0.1rem 0.4rem; white-space: nowrap; }

/* Demo operator profile banner (/ask-data/) — centered in the content area,
   reusing the .demo-tag badge look. white-space:normal so the longer text wraps
   on narrow widths rather than overflowing the nowrap default. */
/* Replay control bar — floats above the chat content so it stays usable while
   the transcript scrolls. */
.replay-bar { position: sticky; top: 0; z-index: 20; background: #fff; padding: 0.45rem 0.6rem; border: 1px solid #e9ecef; border-radius: 6px; margin-bottom: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); gap: 0.15rem; }
.replay-bar-title { font-weight: 700; font-size: 0.8rem; color: #495057; }

.operator-profile { text-align: center; margin: 0.6rem 0 1rem; padding: 0 1rem; }
.operator-profile .demo-tag { white-space: normal; display: inline-block; max-width: 100%; padding: 0.25rem 0.6rem; vertical-align: middle; }
.operator-profile .operator-profile-text { margin-left: 0.5rem; color: #495057; font-size: 0.9rem; font-weight: 400; text-transform: none; vertical-align: middle; }

/* demo banner (login page) */
.demo-banner { text-align: center; font-size: 0.78rem; color: #9a6700; background: #fff4e5; border: 1px solid #ffd8a8; border-radius: 6px; padding: 0.35rem 0.6rem; margin: 0.5rem 0; }

/* user (asked) messages align right; assistant stays left (brand default) */
.chat-message-wrapper.is-user { align-items: flex-end; }
.chat-message-wrapper.is-user .chat-bubble { background: #eaf2ff !important; }
.chat-message-text.md p:first-child { margin-top: 0; }
.chat-message-text.md p:last-child { margin-bottom: 0; }
.chat-message-text.md ul, .chat-message-text.md ol { margin: 0.3rem 0 0.3rem 1.1rem; padding: 0; }
.chat-message-text.md h1, .chat-message-text.md h2, .chat-message-text.md h3, .chat-message-text.md h4 { margin: 0.5rem 0 0.2rem; font-size: 1rem; }
.chat-message-text.md code { background: #eef0f3; padding: 0 0.25em; border-radius: 3px; font-size: 0.88em; }
.chat-thinking { font-size: 1.4rem; letter-spacing: 0.15em; animation: chat-pulse 1.2s ease-in-out infinite; }
@keyframes chat-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* Match the production layout: the brand app-shell (.chat-page 100dvh +
   .chat-main overflow-y:auto + .chat-history min-height:0) pins the composer and
   scrolls #chat-history. These helpers bound the flex chain so #chat-history is
   the scroller and the composer + footer stay at the bottom. */
body.chat-page:not(.admin-scroll) .chat-main > .row { min-height: 0; }
body.chat-page:not(.admin-scroll) .chat-main > .row > [class*="col"] { min-height: 0; display: flex; flex-direction: column; }
body.chat-page:not(.admin-scroll) .chat-scroll-wrap { flex: 1 1 auto; min-height: 0; }
body.chat-page:not(.admin-scroll) #chat-history { min-height: 0; }

/* Non-chat pages keep the brand theme but must SCROLL — undo the app-shell's
   fixed viewport (.chat-page sets height:100dvh; overflow:hidden). */
body.admin-scroll { height: auto !important; min-height: 100vh; overflow: auto !important; }

/* /ask-data/: breathing room so chat + data panel aren't flush to the window edges */
.signals-row { margin-left: 0; margin-right: 0; padding-left: 1rem; padding-right: 1rem; }

/* right-hand signals panel (full page) — resizable via .signals-resizer */
.signals-panel { width: 300px; flex: 0 0 300px; padding: 0.5rem 0.5rem 0.5rem 0; min-width: 0; }
@media (max-width: 1199px) { .signals-panel { width: auto !important; flex: 1 1 auto !important; } }

/* drag handle on the panel's left border */
.signals-resizer { flex: 0 0 14px; align-self: stretch; display: flex; align-items: center; justify-content: center; cursor: col-resize; color: #adb5bd; background: transparent; border-left: 1px solid #e9ecef; user-select: none; touch-action: none; }
.signals-resizer:hover, .signals-resizer:focus { color: #495057; background: #f1f3f5; outline: none; }
.signals-resizer .bi { font-size: 1.05rem; pointer-events: none; }
@media (max-width: 1199px) { .signals-resizer { display: none; } }
body.resizing-cols { cursor: col-resize; user-select: none; }
.signals-panel .card { margin-bottom: 0.6rem; }
.signals-panel .card-header { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; padding: 0.4rem 0.6rem; }
.signals-panel .card-body { padding: 0.4rem 0.6rem; }
.sig-item { font-size: 0.82rem; padding: 0.2rem 0; border-bottom: 1px solid #f0f1f3; }
.sig-item:last-child { border-bottom: 0; }
.sig-empty { color: #999; font-size: 0.82rem; }
.sig-meta { color: #6c757d; font-size: 0.78rem; }
.sig-soon { display: inline-block; background: #6c757d; color: #fff; font-size: 0.72rem; padding: 0.05rem 0.45rem; border-radius: 9px; }
.sig-tag { display: inline-block; background: #9a6700; color: #fff; font-size: 0.72rem; padding: 0.02rem 0.4rem; border-radius: 9px; }

/* status / error line */
.chat-status { font-size: 0.78rem; color: #6c757d; min-height: 1rem; }

/* replay control bar — fixed header at the top of the chat (does not scroll) */
.replay-bar { flex: 0 0 auto; gap: 0.25rem 0.4rem; padding: 0.5rem 0.75rem; margin: 0 0 0.6rem; background: #f1f5fb; border: 1px solid #cfe0f5; border-radius: 6px; }
.replay-bar-title { font-weight: 700; font-size: 0.85rem; color: #0b62d6; }
.replay-bar-speed { width: auto; min-width: 5.5rem; }

/* login: reuse Bootstrap card; just centre it */
.login-shell { min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 380px; }
.login-logo { display: block; height: 48px; margin: 0 auto 0.8rem; }