/* ragteck-studio-v2.css
 * Studio v2 (Project EB03). T2 — Col 2 toggle + column layout scaffold.
 * Chat/project item styling is intentionally NOT redefined here — it
 * already exists in ragteck-saas.css (.rlc-chat-item, .ragteck-col2-*),
 * which loads unconditionally alongside this file.
 */

/* T6 — ragteck-saas.css:250-257's .ragteck-main-content padding (40px top)
 * is shared/unscoped across every SaaS page — do NOT edit that rule.
 * Scoped override, same :has() pattern already used elsewhere in
 * ragteck-saas.css (e.g. line 1916), so this only affects Studio v2. */
#ragteck-main-content:has(.ragteck-sv2-col2) {
    padding-top: 20px;
}

/* T7-FIX3 — <button> elements don't inherit the page font like the
 * "Create App" <a> next to them does; browsers apply their own default UI
 * font to <button> unless overridden. */
#ragteck-chatv2-copy-chat,
#ragteck-chatv2-share-chat {
    font-family: inherit;
}

.sv2-columns {
    display: flex;
    align-items: stretch;
    /* T6 — gap replaced by margin on .sv2-resize-handle (below) now that
     * real drag handles sit between the panes; a uniform flex `gap` would
     * otherwise pad both sides of each handle too, making it look detached. */
    gap: 0;
    min-height: 0;
    /* T4/T5 — fallback only, for the brief window before
     * ragteck-chatv2.js's updateFixedLayout() runs (EB03-BUG-05, T7-FIX3).
     * That function overrides this with an exact value derived from Col 3's
     * own real fixed-position geometry, kept in sync on every window
     * resize — this hardcoded guess is not otherwise the source of truth. */
    height: calc(100vh - 140px);
}

.ragteck-sv2-col2 {
    width: 280px;
    flex: 0 0 280px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sv2-col2-toggle {
    display: flex;
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.sv2-col2-toggle-btn {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #f5f5f5;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.sv2-col2-toggle-btn.sv2-active {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}

.sv2-col2-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.sv2-col2-panel {
    display: none;
}

.sv2-col2-new-btn {
    width: 100%;
    padding: 8px;
    margin-bottom: 8px;
    border: 1px dashed #ccc;
    border-radius: 6px;
    background: #fafafa;
    color: #333;
    font-size: 12px;
    cursor: pointer;
}

.sv2-col2-new-btn:hover {
    background: #f0f0f0;
}

#ragteck-sv2-chat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* T3 — Chat v2's own chat-list sidebar is redundant inside Col 3 (Col 2
 * already owns chat selection). Markup/ids kept intact (see T3 task notes)
 * so ragteck-chatv2.js's existing selectors keep binding harmlessly —
 * just hidden here, scoped to Studio v2 only. */
.ragteck-sv2-col3 #ragteck-chatv2-sidebar,
.ragteck-sv2-col3 #ragteck-chatv2-resize-handle {
    display: none;
}

.ragteck-sv2-col3 {
    /* T6 — was flex:1 (auto-fill remaining space); now an explicit,
     * JS-draggable width like Col 2, so Col 3/Col 4 can be resized
     * independently of Col 2/Col 3. Fallback before JS/localStorage
     * applies a saved width. */
    flex: 0 0 480px;
    min-width: 300px;
    position: relative;
}

/* T7-FIX1 — Col 2/Col 4 both have a visible border; Col 3 looked
 * unfinished without one. #ragteck-chatv2-app (not .ragteck-sv2-col3
 * itself) is the element actually visible on screen — it's position:fixed,
 * so .ragteck-sv2-col3's own box contributes no rendered area. */
.ragteck-sv2-col3 #ragteck-chatv2-app {
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}

/* T12/T13 — same reasoning, App context ([ragteck_saas_app_chatv2]):
 * #ragteck-chatv2-app is position:fixed inside .ragteck-public-chat-area,
 * so it needs its own border/background rather than the wrapper's. This
 * file already loads unconditionally on the App page (blank.php's public-
 * clean shell still includes the same unconditional <head> asset block). */
.ragteck-public-chat-area #ragteck-chatv2-app {
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}

/* T6 — resize handles between Col2/Col3 and Col3/Col4, same visual
 * treatment as ragteck-chatv2.css's own #ragteck-chatv2-resize-handle. */
.sv2-resize-handle {
    width: 5px;
    flex-shrink: 0;
    margin: 0 8px;
    cursor: col-resize;
    background: #e0e0e0;
    border-radius: 3px;
    transition: background 0.15s;
}

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

/* T4/T5 — Col 4 (Ingest top / Documents bottom). Tiles keep Studio v1's
 * own inline styling (white bg, border, border-radius) verbatim; this only
 * sizes the outer column and splits the two tiles evenly, same pattern
 * v1's own ragteck-col3 wrapper uses. */
.ragteck-sv2-col4 {
    flex: 1.2;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ragteck-sv2-col4 > div {
    flex: 1;
    min-height: 0;
}

.sv2-placeholder {
    flex: 1;
    padding: 40px;
    text-align: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #666;
}