/* =====================================================================
 * Artifacts pane — Claude-style sidebar + detail panel.
 *
 * The pane is positioned absolutely off the right edge of `.main-content`
 * so it can slide in/out without re-flowing the chat / code areas.
 * Three visibility states (modifiers on `#artifacts-pane`):
 *   .open-detail   — only the detail panel visible (auto-popped on
 *                    the first artifact_added event of a turn)
 *   .open-sidebar  — only the sidebar visible (Artifacts grid mode)
 *   .open-both     — sidebar AND detail visible side-by-side
 *
 * The body class `artifacts-open` lets per-tab layouts add right-edge
 * padding when the pane is on screen so chat content doesn't sit
 * underneath it. The default `--artifacts-pane-w` math approximates
 * Claude's resting width: a 280px sidebar + a clamp()'d detail panel.
 * ===================================================================== */

.artifacts-pane {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    background: transparent;
    pointer-events: none;       /* See `.open-*` overrides below */
    z-index: 50;
    /* Default (no `.open-*` modifier) = completely invisible. Without
       this, the pane's box still occupies the right portion of
       `.main-content` (its width = sidebar 280px + detail clamp(...)),
       so the sidebar's `translateX(100%)` only slides it into the
       detail's slot — leaving an empty "Artifacts 0" rectangle in
       view. visibility on the parent collapses everything inside.
       Delayed transition lets close animations finish before the
       pane disappears. */
    visibility: hidden;
    transition: visibility 0s 220ms;
}
.artifacts-pane.open-sidebar,
.artifacts-pane.open-detail,
.artifacts-pane.open-both {
    visibility: visible;
    transition-delay: 0s;
}

/* Sidebar (collapsed by default; opens with .open-sidebar / .open-both) */
.artifacts-sidebar {
    width: 280px;
    max-width: 280px;
    flex-shrink: 0;
    background: var(--bg-secondary, #f7f7f8);
    border-left: 1px solid var(--border, var(--border-color, #e5e5e7));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 200ms ease;
    pointer-events: auto;
    order: 1;                   /* sidebar to the LEFT of the detail panel */
}

.artifacts-pane.open-sidebar .artifacts-sidebar,
.artifacts-pane.open-both .artifacts-sidebar {
    transform: translateX(0);
}

.artifacts-sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Match the right-pane header height — the detail header runs
       slightly taller because it contains a .btn-icon (close), so we
       pin both to the same min-height to keep the dividing line
       between header and body aligned across the two panels. */
    min-height: 52px;
    box-sizing: border-box;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border, var(--border-color, #e5e5e7));
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}
.artifacts-sidebar-count {
    margin-left: auto;
    background: var(--bg-input, rgba(0, 0, 0, 0.06));
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
}

.artifacts-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.artifacts-empty {
    color: var(--text-tertiary);
    font-size: 12px;
    text-align: center;
    padding: 24px 12px;
}

.artifact-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border, var(--border-color, #e5e5e7));
    border-radius: 8px;
    background: var(--bg-primary, #fff);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    min-width: 0;
}
.artifact-card:hover {
    background: var(--bg-input, rgba(0, 0, 0, 0.04));
}
.artifact-card.active {
    border-color: var(--primary, #6390ea);
    background: var(--bg-input, rgba(99, 144, 234, 0.08));
}
.artifact-card-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--bg-secondary, #f0f0f2);
    color: var(--text-secondary);
}
.artifact-card-icon i { font-size: 16px; }
.artifact-card-text {
    flex: 1;
    min-width: 0;
}
.artifact-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.artifact-card-sub {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.artifact-card-version {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--accent-light, rgba(99, 144, 234, 0.1));
    color: var(--accent, var(--primary, #6390ea));
    letter-spacing: 0.3px;
}

/* Detail panel (collapsed by default; opens with .open-detail / .open-both)
 *
 * Width is read from a CSS custom property so the resize handle can
 * mutate it via JS without rewriting `width:` every frame. Default
 * value mirrors the previous clamp() resting size — gets overwritten
 * by --artifacts-detail-w once the user (or the persisted preference)
 * has set one. */
.artifacts-detail {
    position: relative;                 /* anchor for the resize handle */
    width: var(--artifacts-detail-w, clamp(420px, 48vw, 760px));
    flex-shrink: 0;
    background: var(--bg-primary, #fff);
    border-left: 1px solid var(--border, var(--border-color, #e5e5e7));
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 220ms ease;
    pointer-events: auto;
    order: 2;
}
/* Drop the width transition while a drag is in progress so the panel
   tracks the cursor 1:1 instead of easing into each new width. */
body.artifacts-resizing .artifacts-detail {
    transition: none;
}

/* Mid-drag the cursor frequently enters the detail iframe / file
   viewer. A nested document captures mouse events away from us, so
   the parent `document` stops receiving `mousemove` (and `mouseup`)
   and the drag appears to "stick" or stop tracking the cursor.
   Disabling pointer-events on the iframes only while dragging keeps
   the parent in control of both events without breaking normal
   iframe interaction at rest. */
body.artifacts-resizing .artifact-iframe {
    pointer-events: none;
}

/* Resize handle — sits on the left edge of the detail panel. The hit
   area is 6px wide (comfortable for mouse drag) but visually the
   colored bar is only 2px so it doesn't compete with content. */
.artifacts-detail-resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 6px;
    margin-left: -3px;                  /* straddle the panel's left edge */
    cursor: ew-resize;
    z-index: 5;
    background: transparent;
    transition: background 120ms ease;
}
.artifacts-detail-resize-handle:hover,
body.artifacts-resizing .artifacts-detail-resize-handle {
    background: var(--accent, var(--primary, #6390ea));
    opacity: 0.65;
}
body.artifacts-resizing {
    cursor: ew-resize;
    user-select: none;
}

.artifacts-pane.open-detail .artifacts-detail,
.artifacts-pane.open-both .artifacts-detail {
    transform: translateX(0);
}

.artifacts-detail-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;                   /* paired with sidebar header */
    box-sizing: border-box;
    padding: 6px 14px;
    border-bottom: 1px solid var(--border, var(--border-color, #e5e5e7));
    background: var(--bg-secondary, #f7f7f8);
}
.artifacts-detail-header .spacer { flex: 1; }
.artifacts-detail-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}
.artifacts-detail-version {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--accent-light, rgba(99, 144, 234, 0.1));
    color: var(--accent, var(--primary, #6390ea));
    letter-spacing: 0.3px;
}

.artifacts-detail-body {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary, #fff);
}

.artifacts-detail-loading,
.artifacts-detail-error {
    padding: 24px;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
}
.artifacts-detail-error { color: #b91c1c; }

/* Empty state shown when the detail panel is open but no artifact is
   selected (toggle just opened, or the user X'd a previous selection).
   Vertically centered so the prompt sits visually anchored to the
   middle of the panel regardless of viewport height. */
.artifacts-detail-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 24px;
    text-align: center;
}
.artifacts-detail-empty-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-secondary, #f0f0f2);
    color: var(--text-tertiary);
    margin-bottom: 4px;
}
.artifacts-detail-empty-icon i { font-size: 22px; }
.artifacts-detail-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.artifacts-detail-empty-desc {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-tertiary);
    max-width: 260px;
}

.artifact-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.artifact-iframe {
    flex: 1;
    width: 100%;
    border: 0;
    background: white;
    /* Min-height keeps PDF / dev-server iframes usable when the
       detail panel is short (e.g. small viewport heights). */
    min-height: 320px;
}

.artifact-markdown {
    padding: 18px 22px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    overflow-x: auto;
}
.artifact-markdown > *:first-child { margin-top: 0; }
.artifact-markdown > *:last-child  { margin-bottom: 0; }
.artifact-markdown pre {
    background: var(--bg-input, #f4f4f5);
    border-radius: 6px;
    padding: 10px 12px;
    overflow: auto;
    font-size: 12.5px;
}
.artifact-markdown code {
    background: var(--bg-input, #f4f4f5);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.92em;
}
.artifact-markdown pre code {
    background: transparent;
    padding: 0;
}
.artifact-markdown table {
    border-collapse: collapse;
    width: 100%;
    margin: 8px 0;
    font-size: 13px;
}
.artifact-markdown th,
.artifact-markdown td {
    border: 1px solid var(--border, var(--border-color, #e5e5e7));
    padding: 6px 10px;
    text-align: left;
}
.artifact-markdown th {
    background: var(--bg-secondary, #f7f7f8);
    font-weight: 600;
}

.artifact-file-image {
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: var(--bg-secondary, #f7f7f8);
    padding: 12px;
}
.artifact-file-video {
    flex: 1;
    width: 100%;
    background: black;
}

/* Topbar Artifacts toggle button — purely a visibility tweak. The
   .btn-icon styling lives in style.css. */
.btn-artifacts-toggle[hidden] { display: none !important; }

/* When a panel is open, give the user a visible click-anywhere fallback
   to dismiss the detail. Keep the detail panel itself blocking clicks. */
.artifacts-pane.open-detail::before,
.artifacts-pane.open-both::before {
    /* No-op slot — kept for future overlay if we want a dim
       background. Left empty to preserve current "no scrim" UX. */
    content: none;
}

/* =====================================================================
 * Inline trigger card — a compact, claude-style preview button rendered
 * inside an assistant message. Click → ArtifactsUI.openDetail() opens
 * the right-pane detail. The card itself never embeds the artifact
 * body (sidebar is the single render surface); it's purely a way back
 * into the panel after the user closed it.
 * ===================================================================== */
.artifact-inline-cards {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}
.artifact-inline-cards:empty { display: none; }

.artifact-inline-card {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border, var(--border-color, #e5e5e7));
    border-radius: 8px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: background 120ms ease, border-color 120ms ease;
    min-width: 0;
}
.artifact-inline-card:hover {
    background: var(--bg-input, rgba(0, 0, 0, 0.04));
    border-color: var(--accent, var(--primary, #6390ea));
}
.artifact-inline-card:focus-visible {
    outline: 2px solid var(--accent, var(--primary, #6390ea));
    outline-offset: 2px;
}
.artifact-inline-card-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--bg-secondary, #f0f0f2);
    color: var(--text-secondary);
}
.artifact-inline-card-icon i { font-size: 15px; }
.artifact-inline-card-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.artifact-inline-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}
.artifact-inline-card-sub {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.artifact-inline-card-open {
    flex-shrink: 0;
    color: var(--text-tertiary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
}
.artifact-inline-card:hover .artifact-inline-card-open {
    color: var(--accent, var(--primary, #6390ea));
}

/* Mobile fallback — sidebar + detail stack on top of each other and
   take the full viewport. The user dismisses via the close X. */
@media (max-width: 768px) {
    .artifacts-sidebar { width: 100%; max-width: 100%; }
    .artifacts-detail  { width: 100%; }
    /* Hide the resize handle on mobile — the panel is full-width
       anyway, dragging it would have no useful effect. */
    .artifacts-detail-resize-handle { display: none; }
}