/* ==============================
   Quick Chat v2 — layout shell + message bubbles
   Project EB01, Task T5.

   Sidebar ITEM styling (.rlc-chat-item, .rlc-active, .rlc-menu-btn,
   .rlc-context-menu, .rlc-rename-input, etc.) is intentionally NOT
   duplicated here — those are unscoped classes already defined in
   ragteck-saas.css and are reused as-is.

   Only the outer layout shell needs its own rules here, because it uses
   new ids (#ragteck-chatv2-*) instead of the live /chat page's
   #ragteck-loose-chat-* ids, mirroring that page's shell CSS 1:1.
   ============================== */

/* ── Fixed app shell ─────────────────────────────────────────────────────── */
/* T7-UX4 Issue 4 — full "modern AI app" shell: header, sidebar+chat body, and
   input are all position:fixed viewport panels; only #ragteck-chatv2-messages
   scrolls. Supersedes T6-CSS/T7-UX2's flex-chain and T7-UX3's height-calc
   approaches, both of which chased #ragteck-main-content (the shared
   blank.php wrapper, min-height:100vh not height:100vh — out of scope to
   change) and never fully solved it. position:fixed can't be affected by
   that ancestor at all, so this is the definitive fix.
   left/width/top/bottom are all computed and kept in sync by
   updateFixedLayout() in ragteck-chatv2.js — CSS here only sets the
   positioning mode and internal flex layout, not the actual geometry. */
#ragteck-chatv2-header {
    position: fixed;
    top: 0;
    z-index: 100;
    box-sizing: border-box;
}

#ragteck-chatv2-app {
    position: fixed;
    z-index: 90;
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
}

/* ── Left sidebar panel ─────────────────────────────────────────────────── */
/* T7-UX5 Issue 2 — width is now draggable (default 220px, clamped 160-400px
   in ragteck-chatv2.js); this is just the starting/fallback value. */
#ragteck-chatv2-sidebar {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #fafafa;
    overflow: hidden;
}

/* ── Sidebar resize handle ───────────────────────────────────────────────── */
#ragteck-chatv2-resize-handle {
    width: 5px;
    flex-shrink: 0;
    cursor: col-resize;
    background: #e0e0e0;
    transition: background 0.15s;
}

#ragteck-chatv2-resize-handle:hover,
#ragteck-chatv2-resize-handle.chatv2-resizing {
    background: #00d1b2;
}

#ragteck-chatv2-sidebar > div:first-child {
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: #f5f5f5;
}

#ragteck-chatv2-sidebar > div:first-child > span {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#ragteck-chatv2-new-chat {
    background: #fff;
    border: 1px dashed #ccc;
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    line-height: 1.6;
    white-space: nowrap;
}

#ragteck-chatv2-new-chat:hover {
    background: #00d1b2;
    border-color: #00d1b2;
    color: #fff;
}

#ragteck-chatv2-chat-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

#ragteck-chatv2-chat-list .rlc-loading,
#ragteck-chatv2-chat-list .rlc-empty {
    padding: 12px 14px;
    font-size: 12px;
    color: #999;
    font-style: italic;
    cursor: default;
}

/* ── Main chat area ─────────────────────────────────────────────────────── */
#ragteck-chatv2-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background: #F9FAFB; /* v1 .chat-area background — needed for contrast against white bot bubbles */
}

#ragteck-chatv2-messages {
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* Critical for nested flex — without this the column grows
                       to fit content instead of scrolling internally (T6-CSS Issue 4) */
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth; /* T10-SCROLL — CSS-level fallback/reinforcement alongside the JS scrollIntoView({behavior:'smooth'}) call */
}

/* ── Message bubbles ────────────────────────────────────────────────────── */
/* T7-UX B1 — exact values ported from ragteck-schat/src/app/globals.css:179-208
   (.message-row/.user-row/.bot-row/.message-bubble/.bot-bubble/.user-bubble) */
.chatv2-msg {
    display: flex;
    width: 100%;
}

.chatv2-msg.chatv2-user {
    justify-content: flex-end; /* v1 .user-row */
}

.chatv2-msg.chatv2-assistant {
    justify-content: flex-start; /* v1 .bot-row */
}

.chatv2-msg-content {
    padding: 0.50rem;      /* v1 .message-bubble */
    border-radius: 5px;
    max-width: 80%;
    width: fit-content;    /* size to content, not a full-width block */
    font-size: 15px;       /* T7-UX4 Issue 1 — bumped from 14px */
    line-height: 1.5;
    word-break: break-word;
}

/* T7-UX2 Issue 2 — pre-wrap belongs on the plain-text user bubble only.
   On the shared rule it doubled assistant spacing: marked.js already emits
   block HTML with its own margins, and pre-wrap turned every literal \n
   inside those text nodes into an ADDITIONAL visual line break on top. */
.chatv2-user .chatv2-msg-content {
    white-space: pre-wrap;
    background-color: #000000; /* v1 .user-bubble */
    color: #ffffff;
    border-radius: 10px;
}

/* T10-SCROLL2 — long user questions collapse to ~3 lines by default, with a
   Show more/less toggle (added by JS only when the text actually overflows).
   The full text always stays in the DOM — this is visual truncation only,
   so Copy/Share (which read the original string, not this element) are
   unaffected. */
.chatv2-user-text.chatv2-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chatv2-user-text.chatv2-clamped.chatv2-expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.chatv2-show-more {
    display: block;
    margin-top: 4px;
    padding: 0;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.chatv2-show-more:hover {
    color: #ffffff;
}

.chatv2-assistant .chatv2-msg-content {
    background-color: #ffffff; /* v1 .bot-bubble */
    color: #1f2937;
}

/* ── Status row (thinking indicator) ────────────────────────────────────── */
/* T7-UX B3/B4 — spinner + rotating message + elapsed counter.
   T7-UX3 Issue 2 — the elapsed "Ns" counter used to be pushed to the far
   right via justify-content:space-between, disconnected from the status
   text. Now it sits directly after the message as one continuous line
   ("Thinking really hard... 12s"), inside .chatv2-status-left itself. */
.chatv2-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    opacity: 0.7;
}

.chatv2-status-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chatv2-status-elapsed {
    font-size: 12px;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

/* Dual-dot "orbit" loader — ported verbatim from globals.css:277-317 */
.inline-spinner {
    width: 18px;
    height: 18px;
    display: inline-block;
    position: relative;
}

.inline-spinner::before,
.inline-spinner::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    transform-origin: -6px 0;
}

.inline-spinner::before {
    background-color: #000000;
    animation: ragteck-orbit 0.9s linear infinite;
}

.inline-spinner::after {
    background-color: #ffffff;
    border: 2px solid #000000;
    animation: ragteck-orbit 0.9s linear infinite reverse;
}

@keyframes ragteck-orbit {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── Markdown — scoped to .chatv2-markdown only ─────────────────────────── */
/* T7-UX B2 — exact values ported from globals.css:378-433 (.bot-markdown) */
.chatv2-markdown strong,
.chatv2-markdown b {
    font-weight: 700;
}

.chatv2-markdown em,
.chatv2-markdown i {
    font-style: italic;
}

.chatv2-markdown h1,
.chatv2-markdown h2,
.chatv2-markdown h3,
.chatv2-markdown h4,
.chatv2-markdown h5,
.chatv2-markdown h6 {
    font-size: 1.1em;
    font-weight: 700;
    line-height: 1.4;
    margin: 0.75em 0 0.4em 0;
}

.chatv2-markdown p {
    margin: 0.4em 0;
    line-height: 1.5;
}
.chatv2-markdown p:first-child { margin-top: 0; }
.chatv2-markdown p:last-child  { margin-bottom: 0; }

.chatv2-markdown ul {
    list-style: disc;
    margin: 0.5em 0 0.5em 1.25em;
    padding-left: 0.25em;
}

.chatv2-markdown ol {
    list-style: decimal;
    margin: 0.5em 0 0.5em 1.25em;
    padding-left: 0.25em;
}

.chatv2-markdown li {
    margin: 0.2em 0;
    line-height: 1.5;
}

/* T7-UX2 Issue 2 — table support was omitted from the original B2 port.
   Ported verbatim from globals.css:464-483. */
.chatv2-markdown table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75em 0;
    font-size: 0.9em;
}
.chatv2-markdown table th,
.chatv2-markdown table td {
    border: 1px solid #d1d5db;
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
}
.chatv2-markdown table th {
    background: #f3f4f6;
    font-weight: 600;
}
.chatv2-markdown table tr:nth-child(even) {
    background: #f9fafb;
}

/* ── Citations ("Sources:" line) ─────────────────────────────────────────── */
/* T7-UX2 Issue 3 */
.chatv2-citations {
    font-size: 12px;
    color: #6b7280;
    margin: -6px 0 0 0.50rem; /* pull up against the bot bubble above it */
    max-width: 80%;
}

/* ── Message action buttons (Copy / Share) ──────────────────────────────── */
/* T7-UX B5 — mirrors globals.css:614-655 (.msg-actions / .msg-action-btn) */
.chatv2-msg-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.chatv2-msg-actions--bot  { justify-content: flex-start; padding-left: 2px; }
.chatv2-msg-actions--user { justify-content: flex-end;   padding-right: 2px; }

.chatv2-msg-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 3px 5px;
    border-radius: 4px;
    cursor: pointer;
    color: #9ca3af;
    transition: color 0.15s, background-color 0.15s;
    line-height: 1;
}

.chatv2-msg-action-btn:hover {
    color: #374151;
    background-color: #f3f4f6;
}

.chatv2-msg-action-tooltip {
    font-size: 11px;
    font-weight: 600;
    color: #16a34a;
    white-space: nowrap;
    padding: 0 2px;
}

/* ── Input row ───────────────────────────────────────────────────────────── */
/* T7-UX3 Issue 1 — pinned to the viewport like a mobile keyboard bar. Now one
   panel of three (header/app/input) all kept in sync by the single
   updateFixedLayout() function in ragteck-chatv2.js (T7-UX4 Issue 4).
   left/width are set to match #ragteck-chatv2-main's actual position/width —
   narrower than the header/app, so it sits only under the message column,
   not the chat-list sidebar — so it doesn't overlap the site's left nav or
   stretch full browser width either.
   T7-UX6 — bottom offset (was flush 0) so it has breathing room from the
   viewport edge. Kept in sync with #ragteck-chatv2-app's own bottom bound
   via INPUT_ROW_BOTTOM_OFFSET in ragteck-chatv2.js — if this value changes,
   update that constant too so #app's box still lines up exactly against the
   input row's top edge (no gap, no overlap). */
#ragteck-chatv2-input-row {
    position: fixed;
    bottom: 10px;
    z-index: 100;
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #e0e0e0;
    background: #EBEBEB; /* T7-UX4 Issue 3 — was #fafafa, barely distinguishable from the white textarea */
}

#ragteck-chatv2-input {
    flex: 1;
    resize: none;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 0.2s, background 0.2s;
}

#ragteck-chatv2-input:focus {
    outline: none;
    border-color: #00d1b2;
}

#ragteck-chatv2-input:disabled {
    background: #f0f0f0;
    color: #999;
    cursor: not-allowed;
}

#ragteck-chatv2-send {
    background: #00d1b2;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0 18px;
    height: 38px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

#ragteck-chatv2-send:hover:not(:disabled) {
    background: #00b89c;
}

#ragteck-chatv2-send:disabled {
    background: #ccc;
    color: #f5f5f5;
    cursor: not-allowed;
}

/* T7-UX5 Issue 1 — real Stop button while a request is in flight. Stays
   enabled+clickable (not :disabled) so it can be clicked to abort. */
#ragteck-chatv2-send.chatv2-send-busy {
    background: #ef4444;
    cursor: pointer;
}

#ragteck-chatv2-send.chatv2-send-busy:hover {
    background: #dc2626;
}

/* T7-UX2 Issue 5 / T7-UX5 Issue 3 — hover states for the header's inline-styled
   Copy/Share Full Chat buttons (inline style can't declare :hover itself). */
#ragteck-chatv2-copy-chat:hover,
#ragteck-chatv2-share-chat:hover {
    background: #4b5563 !important;
}

/* ── Mobile: sidebar collapses ──────────────────────────────────────────── */
@media (max-width: 768px) {
    #ragteck-chatv2-sidebar {
        display: none !important;
    }
}