/*
 * Intelleqt Platform v2 — Work screen styles
 *
 * Three-pane CSS Grid: band on top, three columns below. Mobile fallback
 * collapses to a single column (chat first).
 *
 * a0.11.5 — palette flipped from dark to light. The dark theme was chosen
 * to match Claude.ai's default, but on a light parent-themed WP site it
 * read as out-of-place. The token redefinitions below scope a light
 * palette to .ip-work without touching the rest of the plugin. Every
 * existing `var(--ip-surface, #0b1220)` reference now resolves to a
 * light value because .ip-work locally redefines --ip-surface.
 */

/* a0.19.4 — Universal [hidden] override. Several work-screen rules
   set display: flex/block on elements that ALSO use the [hidden]
   attribute for show/hide (rail items panel, rail forms, thread
   overlay, board iframe, action modal, attach chips wrap, etc).
   `display: <anything>` overrides [hidden]'s UA `display: none`, so
   without this rule, hide-by-attribute silently fails everywhere.
   Single sweeping override fixes it for the whole tree. */
.ip-work [hidden] { display: none !important; }
.ip-work-action-modal[hidden],
.ip-work-thread-overlay[hidden] { display: none !important; }

/* a0.32.0 — Form controls do not inherit font-family by default, so
   parent themes' decorative input/textarea fonts (the cursive Save-note
   body) bled through. Force inherit across the workspace + modal. */
.ip-work input, .ip-work textarea, .ip-work select, .ip-work button,
.ip-work-action-modal input, .ip-work-action-modal textarea,
.ip-work-action-modal select, .ip-work-action-modal button {
    font-family: inherit !important;
}
.ip-work-action-modal,
.ip-work-toast {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
}

.ip-work {
    /* Bind to the viewport rather than the document so the band+chat fit
       exactly one screen and the composer stays pinned. */
    --ip-work-band-h: 48px;
    --ip-work-rail-w: 280px;

    /* ─── Light-mode palette (a0.11.5) ───────────────────────────────
       Redefined locally inside .ip-work so every nested var(--ip-X)
       picks them up. Falls back to the parent-theme value only OUTSIDE
       the work screen, which doesn't affect us. */
    --ip-surface:           #f8fafc;   /* page background — cool off-white */
    --ip-surface-elevated:  #ffffff;   /* rails, bubbles, panels */
    --ip-surface-hover:     rgba(15, 23, 42, 0.045);
    --ip-text:              #0f172a;   /* near-black, slate-900 */
    --ip-text-muted:        #64748b;   /* slate-500 */
    --ip-border:            #e2e8f0;   /* slate-200 */
    --ip-border-bright:     #cbd5e1;   /* slate-300 */
    /* --ip-primary keeps whatever the vertical config injected
       (default #6366f1). User bubble + accents read against light bg. */

    /* ─── a0.32.0 — Typography normalization ─────────────────────────
       One sans stack for the whole workspace, system-native so there is
       zero webfont load and it always matches the OS. Parent themes
       often style <textarea>/<input> with their own (sometimes
       decorative) fonts — form controls do NOT inherit font-family by
       default, hence the cursive textareas. Forced inherit below. */
    --ip-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, sans-serif;
    --ip-font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo,
                    Consolas, monospace;
    font-family: var(--ip-font-sans);

    display: grid;
    grid-template-columns: var(--ip-work-rail-w) 1fr var(--ip-work-rail-w);
    grid-template-rows: var(--ip-work-band-h) 1fr;
    grid-template-areas:
        "band   band   band"
        "left   center right";
    /* a0.18.1 — viewport sizing. 100vh on mobile Safari etc misses the
       browser chrome reservation; 100dvh (dynamic viewport) accounts
       for it. Fallback to 100vh for older browsers.
       a0.44.2 — position:fixed pins the app to the VIEWPORT, immune to
       document-level offsets (the admin-bar's html padding pushed the
       grid down ~32px for logged-in admins, clipping the rail footers —
       "+ via chat" / "+ Create" — below the fold). */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    width: 100%;
    background: var(--ip-surface, #0b1220);
    color: var(--ip-text, #e2e8f0);
    overflow: hidden;
    z-index: 100;
}

/* a0.44.2 — belt-and-braces: neutralize the admin-bar offset + hide the
   bar itself on the work screen (this stylesheet only loads there). */
html.wp-toolbar { padding-top: 0 !important; margin-top: 0 !important; }
#wpadminbar { display: none !important; }

/* ─── Identity band ────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────
   Identity band — a0.29.1 polish pass
   The band is the work-screen's topbar: case picker on the left, status
   pill, then rail toggles + depth + Share on the right. The polish goal
   is clear visual hierarchy: title group feels editorial (large, quiet),
   action group feels utility (ghost buttons + a single primary Share).
   ────────────────────────────────────────────────────────────────── */
.ip-work-band {
    grid-area: band;
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 0 22px;
    /* Layered border: hairline top accent + crisp 1px bottom. The top
       inset shadow gives the band a tiny lift you read more than see. */
    border-bottom: 1px solid var(--ip-border, #e5e9f0);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    /* Subtle vertical gradient — barely-there warm-to-cool tilt that
       makes the band feel like a surface instead of flat fill. */
    background: linear-gradient(180deg, #fdfdfe 0%, #f6f7fa 100%);
    min-height: var(--ip-work-band-h);
    height: var(--ip-work-band-h);
    z-index: 30;
    visibility: visible !important;
    box-sizing: border-box;
}
.ip-work-band > * {
    visibility: visible !important;
}

.ip-work-band-titles {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    position: relative;  /* anchor for the picker dropdown */
}

/* a0.29.1 — Picker becomes a ghost button. No border by default → the
   case name reads as the page's headline. On hover the affordance
   surfaces as a soft fill + faint border. */
.ip-work-band-picker {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ip-text, #0f172a) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 12px;
    margin-left: -10px;  /* visually anchor headline flush to left padding */
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
    min-width: 0;
    max-width: 100%;
}
.ip-work-band-picker:hover,
.ip-work-band-picker:focus-visible {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.08);
    outline: none;
}
.ip-work-band-picker[aria-expanded="true"] {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.ip-work-band-case {
    font-size: 15.5px;
    font-weight: 650;
    letter-spacing: -0.005em;
    color: var(--ip-text, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ip-work-band-picker-caret {
    color: var(--ip-text-muted, #94a3b8);
    flex: 0 0 auto;
    transition: transform 160ms ease, color 120ms ease;
}
.ip-work-band-picker:hover .ip-work-band-picker-caret { color: var(--ip-text, #475569); }
.ip-work-band-picker[aria-expanded="true"] .ip-work-band-picker-caret {
    transform: rotate(180deg);
    color: var(--ip-text, #334155);
}

/* a0.26.0 — Picker dropdown. */
.ip-work-picker-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 320px;
    max-width: 420px;
    background: var(--ip-surface-elevated, #fff);
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 10px 36px rgba(15, 23, 42, 0.14);
    z-index: 200;
    overflow: hidden;
    animation: ip-work-slash-in 140ms ease-out;
}
.ip-work-picker-search-wrap {
    padding: 8px;
    border-bottom: 1px solid var(--ip-border, #e2e8f0);
}
.ip-work-picker-search {
    width: 100%;
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 7px;
    background: var(--ip-surface, #f8fafc);
    color: var(--ip-text, #0f172a);
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
}
.ip-work-picker-search:focus {
    outline: none;
    border-color: var(--ip-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}
.ip-work-picker-body {
    max-height: 360px;
    overflow-y: auto;
    padding: 6px;
}
.ip-work-picker-section-label {
    padding: 8px 8px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ip-text-muted, #94a3b8);
}
.ip-work-picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--ip-text, #0f172a);
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
    transition: background 100ms;
}
.ip-work-picker-item:hover {
    background: var(--ip-surface-hover, rgba(15, 23, 42, 0.045));
}
.ip-work-picker-item.is-active {
    background: rgba(99, 102, 241, 0.06);
}
.ip-work-picker-item-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.ip-work-picker-item-role {
    font-size: 11px;
    color: var(--ip-text-muted, #64748b);
    text-transform: capitalize;
}
.ip-work-picker-item-badge {
    font-size: 10px;
    color: var(--ip-primary, #6366f1);
    background: rgba(99, 102, 241, 0.10);
    padding: 1px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.ip-work-picker-foot {
    padding: 8px 14px;
    border-top: 1px solid var(--ip-border, #e2e8f0);
    background: var(--ip-surface, #f8fafc);
    /* a0.44.1 — footer can hold two links (Browse + admin Manager). */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ip-work-picker-admin { color: var(--ip-text-muted, #64748b); }
.ip-work-picker-admin:hover { color: var(--ip-primary, #6366f1); }

/* a0.47.0 — personal flavor picker row beneath the picker footer. */
.ip-work-picker-flavor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px 10px;
    border-top: 1px solid var(--ip-border, #e2e8f0);
    background: rgba(99, 102, 241, 0.03);
}
.ip-work-picker-flavor label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ip-text-muted, #94a3b8);
    white-space: nowrap;
}
.ip-work-picker-flavor select {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 6px;
    background: #fff;
    color: var(--ip-text, #0f172a);
    font-size: 12px;
    font-family: inherit;
    padding: 4px 8px;
}
.ip-work-picker-flavor select:focus {
    outline: none;
    border-color: var(--ip-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}
.ip-work-picker-browse {
    color: var(--ip-primary, #6366f1);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
}
.ip-work-picker-browse:hover { text-decoration: underline; }

/* a0.29.1 — Share is the band's primary action.
   Filled dark to anchor the right side and signal "publish outward."
   Slate-900 fill works regardless of vertical's --ip-primary so the
   chip is brand-neutral; the hover state lifts subtly.
   a0.29.2 — !important on background + border. Parent themes often
   ship a `button { background: transparent; }` reset that wins on
   specificity and leaves the button invisible until :hover lights up. */
.ip-work-band-share-btn {
    background: #0f172a !important;
    border: 1px solid #0f172a !important;
    color: #ffffff !important;
    padding: 6px 14px 6px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.005em;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    font-family: inherit;
    transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-shadow: none;
    opacity: 1;
}
.ip-work-band-share-btn:hover {
    background: #1e293b !important;
    border-color: #1e293b !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transform: translateY(-1px);
}
.ip-work-band-share-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}
.ip-work-band-share-btn:focus-visible {
    outline: 2px solid var(--ip-primary, #6366f1);
    outline-offset: 2px;
}
.ip-work-band-share-btn svg { opacity: 0.92; }
.ip-work-band-share-label { white-space: nowrap; }

/* a0.26.0 — Share modal content. */
.ip-work-share-section { margin-bottom: 12px; }
.ip-work-share-link-row {
    display: flex;
    gap: 6px;
    align-items: stretch;
    margin-top: 12px;
}
.ip-work-share-link {
    flex: 1;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
}
.ip-work-share-generate,
.ip-work-share-copy {
    background: var(--ip-primary, #6366f1);
    color: #fff;
    border: 0;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.ip-work-share-generate:hover,
.ip-work-share-copy:hover { background: var(--ip-primary-hover, #5558d4); }
.ip-work-share-generate:disabled { opacity: 0.6; cursor: wait; }

/* a0.29.1 — Status becomes a real pill with a tonal dot.
   Same chrome regardless of tone; only the dot color changes. */
.ip-work-band-status {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 8px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ip-text-muted, #64748b) !important;
    background: rgba(15, 23, 42, 0.045);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    flex: 0 0 auto;
    white-space: nowrap;
}
.ip-work-band-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #94a3b8;
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.18);
    flex: 0 0 auto;
}
.ip-work-band-status-label { display: inline-block; }
/* Tonal variants. The dot carries the color; the chip stays neutral. */
.ip-work-band-status--open .ip-work-band-status-dot     { background: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.22); }
.ip-work-band-status--progress .ip-work-band-status-dot { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.22); }
.ip-work-band-status--solved .ip-work-band-status-dot   { background: #10b981; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.22); }
.ip-work-band-status--cold .ip-work-band-status-dot     { background: #64748b; box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.22); }

.ip-work-band-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* a0.38.0 — Chat|Board segmented control in the band. The buttons keep
   the .ip-work-mode-btn class for JS compatibility; this block restyles
   them as a joined pill group for the light band. */
.ip-work-band-mode {
    display: inline-flex !important;
    align-items: center;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}
.ip-work-band-mode .ip-work-mode-btn {
    background: transparent;
    border: 0;
    color: var(--ip-text-muted, #475569);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    align-items: center;
    transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.ip-work-band-mode .ip-work-mode-btn:hover {
    color: var(--ip-text, #0f172a);
}
.ip-work-band-mode .ip-work-mode-btn.is-active {
    background: #fff;
    color: var(--ip-text, #0f172a);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

/* a0.38.0 — Threads button is always visible (unlike the rail toggles
   that share its base class). */
.ip-work-band-threads { display: inline-flex !important; }

/* a0.29.1 — vertical divider between titles and actions. */
.ip-work-band-divider {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.12) 50%, transparent 100%);
    margin: 0 4px;
    flex: 0 0 auto;
}

/* a0.29.1 — Depth button is ghost-style, paired visually with rail buttons. */
.ip-work-depth-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ip-text-muted, #475569) !important;
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.005em;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}
.ip-work-depth-btn:hover {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.08);
    color: var(--ip-text, #0f172a) !important;
}
.ip-work-depth-btn:focus-visible {
    outline: none;
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.14);
}
.ip-work-depth-btn svg { color: var(--ip-text-muted, #94a3b8); }
.ip-work-depth-btn:hover svg { color: var(--ip-text, #475569); }
.ip-work-depth-label { line-height: 1; }

/* ─── Rails (shared shell) ─────────────────────────────────────── */

.ip-work-left,
.ip-work-right {
    display: flex;
    flex-direction: column;
    background: var(--ip-surface-elevated, #0f172a);
    border-color: var(--ip-border, rgba(255,255,255,0.08));
    overflow: hidden;
}
.ip-work-left  { grid-area: left;  border-right: 1px solid var(--ip-border, rgba(255,255,255,0.08)); position: relative; }
.ip-work-right { grid-area: right; border-left:  1px solid var(--ip-border, rgba(255,255,255,0.08)); position: relative; }

/* ─── a0.26.0 — Case plate at top of left rail ─────────────────── */

.ip-work-rail-plate {
    position: relative;
    height: 120px;
    background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(99,102,241,0.05));
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--ip-border, #e2e8f0);
    overflow: hidden;
    flex: 0 0 auto;
}
.ip-work-rail-plate-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ip-text-muted, #94a3b8);
    opacity: 0.5;
}
.ip-work-rail-plate-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 14px;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0));
    color: #fff;
}
.ip-work-rail-plate-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ip-work-rail-plate-status {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.78);
    margin-top: 2px;
    text-transform: capitalize;
}

.ip-work-rail-head {
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--ip-border, rgba(255,255,255,0.06));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ip-work-rail-head h2 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ip-text-muted, #94a3b8);
    margin: 0;
}

/* a0.19.3 — per-rail collapse chevron in the rail header. */
.ip-work-rail-collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--ip-text-muted, #64748b);
    border-radius: 5px;
    cursor: pointer;
    transition: background 100ms, color 100ms, border-color 100ms;
    padding: 0;
}
.ip-work-rail-collapse:hover {
    background: var(--ip-surface-hover, rgba(15, 23, 42, 0.045));
    border-color: var(--ip-border, #e2e8f0);
    color: var(--ip-text, #0f172a);
}
.ip-work-rail-collapse svg { display: block; }

.ip-work-rail-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

/* ─── a0.19.3 — Subtle scrollbars across the work screen ────────
   The default browser scrollbar reads as chrome. Inside a chat-first
   workspace it should fade into the surface. Thin track, soft thumb
   that brightens on hover. Applied to every scroll container inside
   .ip-work. */
.ip-work *,
.ip-work {
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}
.ip-work *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.ip-work *::-webkit-scrollbar-track {
    background: transparent;
}
.ip-work *::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.16);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.ip-work *::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.32);
    background-clip: padding-box;
}
.ip-work *::-webkit-scrollbar-corner { background: transparent; }

.ip-work-rail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    color: var(--ip-text, #e2e8f0);
    text-decoration: none;
    font-size: 13px;
    transition: background 100ms;
    cursor: pointer;
}
.ip-work-rail-row:hover {
    background: var(--ip-surface-hover, rgba(255,255,255,0.04));
}
.ip-work-rail-row-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ip-work-rail-row-count,
.ip-work-rail-row-meta {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--ip-text-muted, #94a3b8);
    background: var(--ip-surface, rgba(255,255,255,0.04));
    padding: 2px 8px;
    border-radius: 10px;
}
.ip-work-rail-row-meta {
    background: transparent;
    padding: 0;
}

.ip-work-rail-foot {
    padding: 12px 16px;
    border-top: 1px solid var(--ip-border, rgba(255,255,255,0.06));
}
.ip-work-rail-add {
    width: 100%;
    background: transparent;
    border: 1px dashed var(--ip-border, rgba(255,255,255,0.18));
    color: var(--ip-text-muted, #94a3b8);
    padding: 8px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: color 120ms, border-color 120ms;
}
.ip-work-rail-add:hover:not([disabled]) {
    color: var(--ip-text, #e2e8f0);
    border-color: var(--ip-border-bright, rgba(255,255,255,0.3));
}
.ip-work-rail-add[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}
.ip-work-rail-add-enabled {
    background: rgba(99,102,241,0.1);
    color: var(--ip-text, #e2e8f0);
    border-color: rgba(99,102,241,0.3);
}
.ip-work-rail-add-enabled:hover {
    background: rgba(99,102,241,0.18);
    border-color: rgba(99,102,241,0.5);
}

/* ─── Center pane ──────────────────────────────────────────────── */

.ip-work-center {
    grid-area: center;
    display: flex;
    flex-direction: column;
    /* a0.19.2 — center every child horizontally. Combined with
       max-width on the mode bar / thread / meta / composer, this
       reads-in-a-column the way Claude.ai does at wide widths:
       chat hugs an ~860px column centered in the viewport, not
       sprawling edge-to-edge. */
    align-items: center;
    background: var(--ip-surface, #0b1220);
    overflow: hidden;
    min-width: 0;
}
/* a0.19.2 — keep the chat column readable on wide viewports. Each
   child takes the smaller of (parent width) and (860px). On a 1860px
   viewport in Wide mode this caps content at 860px centered, with
   ~500px breathing room either side — same shape as Claude. */
.ip-work-center > .ip-work-thread,
.ip-work-center > .ip-work-meta,
.ip-work-center > .ip-work-composer {
    width: 100%;
    max-width: 860px;
    box-sizing: border-box;
}
/* Board mode iframe keeps the full center pane — board needs the
   canvas real estate. */
.ip-work-center > .ip-work-board-iframe {
    width: 100%;
    max-width: none;
}

/* a0.42.1 cleanup — the center-pane mode header (.ip-work-mode,
   .ip-work-mode-spacer, .ip-work-mode-menu) was removed in a0.38.0;
   the Chat|Board buttons now live in the band and are fully styled by
   the .ip-work-band-mode block near the top of this file. */

.ip-work-thread {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* B0.5 — Board iframe. Hidden by default; .is-board-mode flips it on
   and hides the thread + composer. */
.ip-work-board-iframe {
    flex: 1;
    width: 100%;
    border: 0;
    background: var(--ip-surface, #0b1220);
}
.ip-work.is-board-mode .ip-work-thread,
.ip-work.is-board-mode .ip-work-meta,
.ip-work.is-board-mode .ip-work-composer {
    display: none;
}
.ip-work.is-board-mode .ip-work-board-iframe {
    display: block;
}

/* ─── a0.20.0 — Right rail output rows ────────────────────────── */

.ip-work-output-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ip-border, #e2e8f0);
    cursor: pointer;
    transition: background 100ms;
    position: relative;
}
.ip-work-output-row:hover {
    background: var(--ip-surface-hover, rgba(15, 23, 42, 0.045));
}
.ip-work-output-row-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.ip-work-output-row-icon {
    font-size: 16px;
    line-height: 1;
    flex: 0 0 auto;
    filter: saturate(0.85);
}
.ip-work-output-row-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.ip-work-output-row-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ip-text, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ip-work-output-row-meta {
    font-size: 11px;
    color: var(--ip-text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ip-work-output-row-meta.is-not-started {
    color: var(--ip-text-muted, #94a3b8);
    font-style: italic;
}
.ip-work-output-row-meta.is-draft {
    color: #92400e;  /* amber-800 */
}
/* a0.21.0 — stale beats draft: the deliverable is older than the
   latest case edit. Same warm hue family but more saturated so it
   reads as actionable, not informational. */
.ip-work-output-row-meta.is-stale {
    color: #c2410c;  /* orange-700 */
    font-weight: 600;
}
.ip-work-output-row-meta.is-stale::before {
    content: "⚠ ";
}
.ip-work-output-row-meta.is-published {
    color: #166534;  /* green-800 */
    font-weight: 600;
}

.ip-work-output-row-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 120ms ease-out;
}
.ip-work-output-row:hover .ip-work-output-row-actions,
.ip-work-output-row-actions:focus-within {
    opacity: 1;
}
@media (hover: none) {
    .ip-work-output-row-actions { opacity: 0.55; }
}

.ip-work-output-action {
    width: 26px;
    height: 26px;
    background: transparent;
    border: 0;
    color: var(--ip-text-muted, #64748b);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 100ms, color 100ms;
}
.ip-work-output-action:hover {
    background: var(--ip-surface-hover, rgba(15, 23, 42, 0.06));
    color: var(--ip-primary, #6366f1);
}
.ip-work-output-action.is-running {
    color: var(--ip-primary, #6366f1);
    cursor: wait;
}
.ip-work-output-action.is-running svg {
    animation: ip-work-spinner 800ms linear infinite;
}

.ip-work-output-divider {
    padding: 14px 16px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ip-text-muted, #94a3b8);
    border-bottom: 1px solid var(--ip-border, #e2e8f0);
    background: var(--ip-surface, #f8fafc);
}

/* a0.25.0 — Right-rail deliverable delete (hover ✕ + inline confirm). */
.ip-work-output-row-delete {
    background: transparent;
    border: 0;
    color: var(--ip-text-muted, #94a3b8);
    width: 22px;
    height: 22px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    opacity: 0;
    transition: opacity 120ms, background 100ms, color 100ms;
    margin-left: 4px;
}
.ip-work-output-row:hover .ip-work-output-row-delete,
.ip-work-output-row-delete:focus-visible { opacity: 1; }
.ip-work-output-row-delete:hover {
    background: rgba(185, 28, 28, 0.10);
    color: #b91c1c;
}
.ip-work-output-row.is-confirming {
    background: rgba(185, 28, 28, 0.06);
}
.ip-work-output-row.is-confirming .ip-work-output-row-main,
.ip-work-output-row.is-confirming .ip-work-output-row-actions {
    opacity: 0.4;
    pointer-events: none;
}
.ip-work-output-row-confirm {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
}
.ip-work-output-row-confirm-msg {
    margin-right: auto;
    font-size: 12px;
    font-weight: 600;
    color: #b91c1c;
}
.ip-work-output-row-confirm-yes,
.ip-work-output-row-confirm-no {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--ip-border, #e2e8f0);
    background: var(--ip-surface-elevated, #fff);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}
.ip-work-output-row-confirm-yes {
    color: #b91c1c;
    border-color: rgba(185, 28, 28, 0.4);
}
.ip-work-output-row-confirm-yes:hover:not(:disabled) {
    background: #b91c1c;
    color: #fff;
}
.ip-work-output-row-confirm-no:hover:not(:disabled) {
    background: var(--ip-surface-hover, rgba(15, 23, 42, 0.045));
}
.ip-work-output-row-confirm-yes:disabled,
.ip-work-output-row-confirm-no:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ─── a0.25.0 — Rail-overlay resize handle ────────────────────── */

.ip-work-rail-resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    background: transparent;
    transition: background 120ms;
    z-index: 5;
    /* Hidden by default; only meaningful when the rail floats as an
       overlay (Wide-mode band button). */
    display: none;
}
.ip-work-left.ip-work-rail-overlay  .ip-work-rail-resize-handle { display: block; right: -3px; }
.ip-work-right.ip-work-rail-overlay .ip-work-rail-resize-handle { display: block; left:  -3px; }
.ip-work-rail-resize-handle:hover {
    background: rgba(99, 102, 241, 0.2);
}
body.ip-work-resizing {
    cursor: col-resize !important;
    user-select: none;
}
body.ip-work-resizing * {
    cursor: col-resize !important;
}

/* ─── a0.25.0 — Arrow-key focus ring on rail items ────────────── */

.ip-work-rail-item:focus-visible,
.ip-work-output-row:focus-visible,
.ip-work-rail-showall:focus-visible {
    outline: 2px solid var(--ip-primary, #6366f1);
    outline-offset: -2px;
}
.ip-work-rail-row:focus-visible {
    outline: 2px solid var(--ip-primary, #6366f1);
    outline-offset: -2px;
    border-radius: 4px;
}

.ip-work-thread-empty {
    margin: auto;
    color: var(--ip-text-muted, #94a3b8);
    font-size: 14px;
    text-align: center;
    /* a0.13.0 — richer empty state. Center-stacks the case summary
       and the suggested-starter list. Constrains width so the list
       reads as one column. */
    max-width: 560px;
    width: 100%;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.ip-work-empty-headline h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--ip-text, #0f172a);
    line-height: 1.25;
}
.ip-work-empty-summary {
    margin: 0;
    font-size: 13px;
    color: var(--ip-text-muted, #64748b);
}
.ip-work-empty-starters {
    text-align: left;
}
.ip-work-empty-starters-lead {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ip-text-muted, #64748b);
    text-align: left;
}
.ip-work-empty-starters-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ip-work-empty-starter {
    background: var(--ip-surface-elevated, #fff);
    border: 1px solid var(--ip-border, #e2e8f0);
    color: var(--ip-text, #0f172a);
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.45;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: background 100ms, border-color 100ms, transform 80ms;
    font-family: inherit;
}
.ip-work-empty-starter:hover {
    background: rgba(99, 102, 241, 0.04);
    border-color: rgba(99, 102, 241, 0.32);
}
.ip-work-empty-starter:active {
    transform: scale(0.995);
}
.ip-work-empty-starter-arrow {
    color: var(--ip-primary, #6366f1);
    font-weight: 700;
    flex: 0 0 auto;
    margin-top: 1px;
}
.ip-work-empty-starter-text {
    flex: 1;
    min-width: 0;
}

.ip-work-msg {
    max-width: 760px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.55;
    word-wrap: break-word;
    /* a0.11.4 — explicit text color on every bubble. Without this the
       parent theme's `.entry-content` color bleeds through and the
       assistant body reads near-invisible on the dark bubble. */
    color: var(--ip-text, #e2e8f0);
}
.ip-work-msg-user {
    align-self: flex-end;
    background: var(--ip-primary, #6366f1);
    color: #fff;
}
.ip-work-msg-assistant {
    align-self: flex-start;
    background: var(--ip-surface-elevated, #0f172a);
    border: 1px solid var(--ip-border, rgba(255,255,255,0.08));
    color: var(--ip-text, #e2e8f0);
}
.ip-work-msg-who {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ip-text-muted, #94a3b8);
    margin-bottom: 6px;
}

/* a0.11.4 — full markdown typography pass for the chat body. The
   default `pre-wrap` had no styling for headers, lists, code, links,
   etc., and parent-theme rules won by specificity. Authoring this
   once here is much cleaner than fighting cascade per-deploy. */
.ip-work-msg-body {
    color: inherit;
}
.ip-work-msg-body :first-child { margin-top: 0; }
.ip-work-msg-body :last-child  { margin-bottom: 0; }

.ip-work-msg-body p {
    margin: 0 0 10px;
    color: inherit;
}
.ip-work-msg-body p:last-child { margin-bottom: 0; }

/* Headers — used by SOL for section labels. Visible but not overlarge;
   these are CHAT bubbles, not articles. */
.ip-work-msg-body h1,
.ip-work-msg-body h2,
.ip-work-msg-body h3,
.ip-work-msg-body h4 {
    color: var(--ip-text, #0f172a);
    font-weight: 700;
    margin: 14px 0 6px;
    line-height: 1.3;
}
.ip-work-msg-body h1 { font-size: 18px; }
.ip-work-msg-body h2 { font-size: 16px; }
.ip-work-msg-body h3 { font-size: 14px; }
.ip-work-msg-body h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ip-text-muted, #94a3b8);
}
.ip-work-msg-body h1:first-child,
.ip-work-msg-body h2:first-child,
.ip-work-msg-body h3:first-child,
.ip-work-msg-body h4:first-child { margin-top: 0; }

.ip-work-msg-body strong,
.ip-work-msg-body b {
    color: var(--ip-text, #0f172a);
    font-weight: 600;
}
.ip-work-msg-body em,
.ip-work-msg-body i { color: inherit; }

.ip-work-msg-body a {
    color: #4f46e5;  /* indigo-600 — readable on light bg */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.ip-work-msg-body a:hover { color: #3730a3; }

.ip-work-msg-body ul,
.ip-work-msg-body ol {
    margin: 6px 0 10px;
    padding-left: 22px;
}
.ip-work-msg-body li {
    margin: 3px 0;
    color: inherit;
}
.ip-work-msg-body li::marker {
    color: var(--ip-text-muted, #94a3b8);
}

.ip-work-msg-body code {
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 0.88em;
    background: rgba(15, 23, 42, 0.06);
    padding: 1px 5px;
    border-radius: 4px;
    color: #be185d;  /* pink-700 — readable inline-code accent on light */
}
.ip-work-msg-body pre {
    background: #f1f5f9;  /* slate-100 — soft card on light bg */
    padding: 12px 14px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 10px 0;
    font-size: 12.5px;
    line-height: 1.5;
    border: 1px solid var(--ip-border, #e2e8f0);
}
.ip-work-msg-body pre code {
    background: transparent;
    padding: 0;
    color: var(--ip-text, #0f172a);
    font-size: inherit;
}

.ip-work-msg-body blockquote {
    margin: 10px 0;
    padding: 4px 0 4px 14px;
    border-left: 3px solid var(--ip-primary, #6366f1);
    color: var(--ip-text-muted, #64748b);
}

.ip-work-msg-body hr {
    border: 0;
    border-top: 1px solid var(--ip-border, #e2e8f0);
    margin: 14px 0;
}

.ip-work-msg-body img {
    max-width: 100%;
    border-radius: 6px;
    margin: 8px 0;
}

/* User bubble: the purple background already carries the brand, so
   accents stay white. */
.ip-work-msg-user .ip-work-msg-body strong,
.ip-work-msg-user .ip-work-msg-body b,
.ip-work-msg-user .ip-work-msg-body h1,
.ip-work-msg-user .ip-work-msg-body h2,
.ip-work-msg-user .ip-work-msg-body h3,
.ip-work-msg-user .ip-work-msg-body h4 {
    color: #fff;
}
.ip-work-msg-user .ip-work-msg-body a { color: #fff; }
.ip-work-msg-user .ip-work-msg-body code {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* ─── a0.27.0 — per-bubble sources footnotes ──────────────────── */

.ip-work-msg-sources {
    margin-top: 14px;
    padding: 10px 12px;
    background: rgba(99, 102, 241, 0.04);
    border: 1px solid rgba(99, 102, 241, 0.16);
    border-radius: 8px;
}
.ip-work-msg-sources-headline {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ip-text-muted, #64748b);
    margin-bottom: 6px;
}
.ip-work-msg-sources-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ip-work-msg-sources-list li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.4;
}
.ip-work-msg-sources-num {
    flex: 0 0 auto;
    color: var(--ip-text-muted, #94a3b8);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    width: 18px;
    text-align: right;
}
.ip-work-msg-sources-link {
    color: #4f46e5;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.ip-work-msg-sources-link:hover {
    color: #3730a3;
}

/* User-bubble sources stay readable on the purple background. */
.ip-work-msg-user .ip-work-msg-sources {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.20);
}
.ip-work-msg-user .ip-work-msg-sources-headline,
.ip-work-msg-user .ip-work-msg-sources-num {
    color: rgba(255, 255, 255, 0.7);
}
.ip-work-msg-user .ip-work-msg-sources-link {
    color: #fff;
}

/* ─── a0.15.0 — per-bubble provenance footer ──────────────────── */

.ip-work-msg-provenance {
    margin-top: 10px;
    padding-top: 8px;
    font-size: 11px;
    color: var(--ip-text-muted, #64748b);
    font-variant-numeric: tabular-nums;
    border-top: 1px dashed var(--ip-border, #e2e8f0);
    /* Soft - meant to be glanced, not read closely. */
    opacity: 0.85;
}
.ip-work-msg-user .ip-work-msg-provenance {
    color: rgba(255, 255, 255, 0.7);
    border-top-color: rgba(255, 255, 255, 0.18);
}

/* ─── a0.32.0 — Visual artifacts in assistant bubbles ───────────── */

/* Maps — embedded interactive frame, 16:10, soft chrome. */
.ip-work-vis-map {
    margin: 14px 0;
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    background: var(--ip-surface, #f8fafc);
}
.ip-work-vis-map iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border: 0;
}
.ip-work-vis-map figcaption {
    padding: 8px 14px 0;
    font-size: 12.5px;
    color: var(--ip-text-muted, #64748b);
    font-style: italic;
}
.ip-work-vis-map-link {
    display: block;
    padding: 6px 14px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ip-primary, #6366f1);
    text-decoration: none;
}
.ip-work-vis-map-link:hover { text-decoration: underline; }

/* Timelines — vertical rule + dots. */
.ip-work-vis-timeline {
    list-style: none;
    margin: 14px 0;
    padding: 4px 0 4px 4px;
    position: relative;
}
.ip-work-vis-timeline::before {
    content: '';
    position: absolute;
    left: 96px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg,
        rgba(99, 102, 241, 0.35),
        rgba(99, 102, 241, 0.12));
    border-radius: 2px;
}
.ip-work-vis-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 7px 0;
    position: relative;
}
.ip-work-vis-timeline-item::before {
    content: '';
    position: absolute;
    left: 91.5px;
    top: 13px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ip-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.ip-work-vis-timeline-date {
    flex: 0 0 84px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: var(--ip-text-muted, #64748b);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
}
.ip-work-vis-timeline-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 8px;
}
.ip-work-vis-timeline-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ip-text, #0f172a);
    line-height: 1.4;
}
.ip-work-vis-timeline-detail {
    font-size: 12.5px;
    color: var(--ip-text-muted, #64748b);
    line-height: 1.45;
}

/* a0.34.0 — Mermaid diagrams (flowcharts, relationship graphs,
   sequence diagrams). The SVG scales to the bubble width. */
.ip-work-vis-mermaid {
    margin: 14px 0;
    padding: 14px;
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 12px;
    background: #fff;
    overflow-x: auto;
    text-align: center;
}
.ip-work-vis-mermaid svg {
    max-width: 100%;
    height: auto;
}
.ip-work-vis-mermaid-fail {
    font-size: 12px;
    color: #b91c1c;
    margin-bottom: 8px;
    text-align: left;
}
.ip-work-vis-mermaid-raw {
    text-align: left;
    font-family: var(--ip-font-mono, ui-monospace, Menlo, monospace);
    font-size: 11.5px;
    background: var(--ip-surface, #f8fafc);
    border-radius: 8px;
    padding: 10px;
    overflow-x: auto;
    margin: 0;
}

/* a0.35.0 — Save-artifact-to-case affordances. */
.ip-work-vis-save-row {
    display: flex;
    gap: 6px;
    padding: 8px 14px 10px;
    border-top: 1px dashed var(--ip-border, #e2e8f0);
    margin-top: 4px;
}
.ip-work-vis-timeline-wrap { margin: 14px 0; }
.ip-work-vis-timeline-wrap .ip-work-vis-save-row { padding: 8px 0 0; }
.ip-work-vis-mermaid .ip-work-vis-save-row { padding: 10px 0 0; text-align: left; }
.ip-work-vis-save-btn {
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.28);
    color: var(--ip-primary, #6366f1);
    padding: 4px 11px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 100ms ease, border-color 100ms ease;
}
.ip-work-vis-save-btn:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: var(--ip-primary, #6366f1);
}
.ip-work-vis-save-btn:disabled {
    opacity: 0.75;
    cursor: default;
}

/* Hover save button on image-search tiles. */
.ip-work-vis-images-save {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 0;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 120ms ease, background 100ms ease, transform 80ms ease;
    padding: 0;
}
.ip-work-vis-images-item:hover .ip-work-vis-images-save,
.ip-work-vis-images-save.is-saved,
.ip-work-vis-images-save:disabled { opacity: 1; }
.ip-work-vis-images-save:hover { background: var(--ip-primary, #6366f1); transform: scale(1.08); }
.ip-work-vis-images-save.is-saved { background: #10b981; }

/* a0.34.0 — Direct map-provider embeds (Google Maps / Mapbox / OSM
   iframes SOL emits inline, whitelisted in renderMarkdown). */
.ip-work-embed-frame {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 12px;
    margin: 14px 0;
    background: var(--ip-surface, #f8fafc);
}

/* Image-search strips — a0.33.0. Real results from the Serper proxy,
   rendered as a clickable thumbnail grid. */
.ip-work-vis-images {
    margin: 14px 0;
}
.ip-work-vis-images-loading {
    padding: 18px 14px;
    border: 1px dashed var(--ip-border-bright, #cbd5e1);
    border-radius: 10px;
    background: var(--ip-surface, #f8fafc);
    color: var(--ip-text-muted, #64748b);
    font-size: 12.5px;
    text-align: center;
}
.ip-work-vis-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.ip-work-vis-images-item {
    position: relative;
    display: block;
    border-radius: 9px;
    overflow: hidden;
    border: 1px solid var(--ip-border, #e2e8f0);
    background: var(--ip-surface, #f8fafc);
    aspect-ratio: 4 / 3;
    transition: transform 100ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.ip-work-vis-images-item:hover {
    transform: translateY(-2px);
    border-color: var(--ip-primary, #6366f1);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);
}
.ip-work-vis-images-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ip-work-vis-images-src {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 10px 8px 5px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.75));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ip-work-vis-images figcaption {
    padding: 8px 2px 0;
    font-size: 12.5px;
    color: var(--ip-text-muted, #64748b);
    font-style: italic;
}

/* Inline images — bounded, rounded, with click-through. Broken images
   collapse into a source-link chip (the JS swaps them on error). */
.ip-work-msg-img {
    display: block;
    max-width: 100%;
    max-height: 420px;
    border-radius: 10px;
    border: 1px solid var(--ip-border, #e2e8f0);
    margin: 12px 0;
    object-fit: contain;
    background: var(--ip-surface, #f8fafc);
}
.ip-work-msg-img-broken {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
    padding: 6px 12px;
    border: 1px dashed var(--ip-border-bright, #cbd5e1);
    border-radius: 8px;
    background: var(--ip-surface, #f8fafc);
    color: var(--ip-text-muted, #64748b);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}
.ip-work-msg-img-broken:hover {
    color: var(--ip-primary, #6366f1);
    border-color: var(--ip-primary, #6366f1);
}

/* Markdown tables in assistant replies — GFM tables render bare by
   default; style them as data tables. */
.ip-work-msg-body table {
    border-collapse: collapse;
    margin: 14px 0;
    width: 100%;
    font-size: 13px;
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
}
.ip-work-msg-body th {
    text-align: left;
    padding: 8px 12px;
    background: var(--ip-surface, #f8fafc);
    border-bottom: 2px solid var(--ip-border, #e2e8f0);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ip-text-muted, #475569);
}
.ip-work-msg-body td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--ip-border, #e2e8f0);
    vertical-align: top;
    line-height: 1.45;
}
.ip-work-msg-body tr:last-child td { border-bottom: 0; }
.ip-work-msg-body tbody tr:nth-child(even) td {
    background: rgba(15, 23, 42, 0.015);
}

/* ─── a0.12.0 — per-bubble affordances ────────────────────────── */

.ip-work-msg-actions {
    display: flex;
    gap: 2px;
    margin-top: 8px;
    margin-left: -6px;  /* nudge to look hung from the bubble's left edge */
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 140ms ease-out, transform 140ms ease-out;
    pointer-events: none;
}
/* Reveal on hover OR when any button inside is focused (keyboard nav). */
.ip-work-msg:hover .ip-work-msg-actions,
.ip-work-msg-actions:focus-within {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* On touch screens (no hover), always show the row at low opacity so
   it's discoverable. */
@media (hover: none) {
    .ip-work-msg-actions {
        opacity: 0.55;
        pointer-events: auto;
        transform: none;
    }
}

.ip-work-msg-action {
    width: 26px;
    height: 26px;
    padding: 4px;
    border: 0;
    background: transparent;
    color: var(--ip-text-muted, #64748b);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 100ms, color 100ms;
}
.ip-work-msg-action svg {
    width: 14px;
    height: 14px;
    display: block;
}
.ip-work-msg-action:hover {
    background: var(--ip-surface-hover, rgba(15, 23, 42, 0.045));
    color: var(--ip-text, #0f172a);
}
.ip-work-msg-action[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
.ip-work-msg-action.is-confirmed {
    color: rgb(22, 163, 74);  /* green-600 */
    background: rgba(22, 163, 74, 0.10);
}
/* User-bubble actions sit ON the purple primary surface — invert
   the muted color so they read against it. */
.ip-work-msg-user .ip-work-msg-action {
    color: rgba(255, 255, 255, 0.7);
}
.ip-work-msg-user .ip-work-msg-action:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.ip-work-msg-user .ip-work-msg-action.is-confirmed {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* ─── a0.12.0 — action modal (save-as-note / promote-to-claim) ─── */

.ip-work-action-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    align-items: center;
    justify-content: center;
}
.ip-work-action-modal:not([hidden]) { display: flex; }
.ip-work-action-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}
.ip-work-action-modal-card {
    position: relative;
    width: min(540px, 92vw);
    max-height: 86vh;
    background: var(--ip-surface-elevated, #fff);
    color: var(--ip-text, #0f172a);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    animation: ip-work-modal-in 200ms ease-out;
}
@keyframes ip-work-modal-in {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ip-work-action-modal-head {
    padding: 16px 20px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--ip-border, #e2e8f0);
}
.ip-work-action-modal-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}
.ip-work-action-modal-close {
    background: transparent;
    border: 0;
    color: var(--ip-text-muted, #64748b);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.ip-work-action-modal-close:hover { color: var(--ip-text, #0f172a); }

.ip-work-action-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.ip-work-modal-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ip-text-muted, #64748b);
    margin: 10px 0 6px;
}
.ip-work-modal-label:first-child { margin-top: 0; }

.ip-work-modal-conf-val {
    font-variant-numeric: tabular-nums;
    color: var(--ip-text, #0f172a);
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.ip-work-modal-input,
.ip-work-modal-textarea {
    width: 100%;
    background: var(--ip-surface, #f8fafc);
    color: var(--ip-text, #0f172a);
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    line-height: 1.5;
    font-family: inherit;
    box-sizing: border-box;
}
.ip-work-modal-textarea {
    resize: vertical;
    min-height: 80px;
    max-height: 320px;
}
.ip-work-modal-input:focus,
.ip-work-modal-textarea:focus {
    outline: none;
    border-color: var(--ip-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}
.ip-work-modal-range {
    width: 100%;
    accent-color: var(--ip-primary, #6366f1);
}
.ip-work-modal-hint {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--ip-text-muted, #64748b);
}

/* a0.15.1 — inline error banner inside the modal body for missing-field
   feedback. Auto-removes after 2.4s. */
.ip-work-modal-error {
    background: rgba(185, 28, 28, 0.08);
    border: 1px solid rgba(185, 28, 28, 0.25);
    color: #b91c1c;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    margin-bottom: 12px;
}

.ip-work-action-modal-foot {
    padding: 12px 20px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--ip-border, #e2e8f0);
}
.ip-work-action-modal-btn {
    background: transparent;
    border: 1px solid var(--ip-border, #e2e8f0);
    color: var(--ip-text, #0f172a);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 100ms, border-color 100ms;
}
.ip-work-action-modal-btn:hover { background: var(--ip-surface-hover, rgba(15, 23, 42, 0.045)); }
.ip-work-action-modal-save {
    background: var(--ip-primary, #6366f1);
    border-color: var(--ip-primary, #6366f1);
    color: #fff;
}
.ip-work-action-modal-save:hover {
    background: var(--ip-primary-hover, #5558d4);
    border-color: var(--ip-primary-hover, #5558d4);
}
.ip-work-action-modal-save.is-loading {
    opacity: 0.7;
    cursor: wait;
}

/* ─── a0.30.0 — Section-list modal variant ────────────────────────
   Replaces the broken iframe-the-casefile "Show all" approach with a
   native list view rendered inside the existing action-modal chrome.
   The `.ip-work-action-modal--list` class on the outer modal swaps it
   into wide read-only browse mode. */

.ip-work-action-modal--list .ip-work-action-modal-card {
    max-width: 760px;
    width: min(760px, 96vw);
}
.ip-work-action-modal--list .ip-work-action-modal-body {
    max-height: 70vh;
    overflow-y: auto;
    padding: 16px 20px 20px;
}
/* List view is read-only — kill the footer save flow. The header's ×
   plus Esc are the only exits we need. */
.ip-work-action-modal--list .ip-work-action-modal-foot { display: none; }

.ip-work-section-list-head {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ip-text-muted, #64748b);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ip-border, #e2e8f0);
}

.ip-work-section-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
@media (max-width: 560px) {
    .ip-work-section-list-grid { grid-template-columns: 1fr; }
}

/* The cards reuse .ip-work-rail-item base styling; the --list modifier
   gives them a touch more breathing room since they have a full modal
   to live in. */
.ip-work-section-list-item {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--ip-surface, #f8fafc);
    border: 1px solid transparent;
    transition: background 120ms, border-color 120ms, transform 80ms;
}
.ip-work-section-list-item:hover {
    background: #fff;
    border-color: var(--ip-border, #e2e8f0);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.ip-work-section-list-loading,
.ip-work-section-list-error,
.ip-work-section-list-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--ip-text-muted, #64748b);
    font-size: 14px;
}
.ip-work-section-list-empty-hint {
    font-size: 12.5px;
    color: var(--ip-text-muted, #94a3b8);
    margin-top: 8px;
}
.ip-work-section-list-error { color: #b91c1c; }

/* a0.31.3 — Quick-add modal (Focus-mode + button → action-modal).
   Slim, like a dialog, with the form's own field styles taking over. */
.ip-work-action-modal--quickadd .ip-work-action-modal-card {
    max-width: 480px;
    width: min(480px, 96vw);
}
.ip-work-action-modal--quickadd .ip-work-action-modal-body {
    padding: 18px 22px 20px;
}
.ip-work-action-modal--quickadd .ip-work-rail-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ip-work-action-modal--quickadd .ip-work-rail-form-label,
.ip-work-action-modal--quickadd .ip-work-rail-form-body,
.ip-work-action-modal--quickadd .ip-work-rail-form-type {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 7px;
    background: #fff;
    color: var(--ip-text, #0f172a);
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}
.ip-work-action-modal--quickadd .ip-work-rail-form-body { min-height: 100px; resize: vertical; }

/* ─── a0.30.3 — Entity-view modal variant ──────────────────────────
   Read view for research / claim / question — the kinds without a slide-
   in drawer schema. Reuses action-modal chrome with the `--view` class.
   Like `--list`, hides the save footer (close via × / Esc). */

.ip-work-action-modal--view .ip-work-action-modal-card {
    max-width: 640px;
    width: min(640px, 96vw);
}
.ip-work-action-modal--view .ip-work-action-modal-body {
    max-height: 70vh;
    overflow-y: auto;
    padding: 20px 24px 24px;
}
.ip-work-action-modal--view .ip-work-action-modal-foot { display: none; }

.ip-work-entity-view-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 11.5px;
    color: var(--ip-text-muted, #64748b);
}
.ip-work-entity-view-type {
    text-transform: capitalize;
    background: rgba(15, 23, 42, 0.05);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.01em;
}
.ip-work-entity-view-chip {
    background: rgba(99, 102, 241, 0.10);
    color: var(--ip-primary, #6366f1);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
}
.ip-work-entity-view-chip.is-high   { background: rgba(239, 68, 68, 0.12);  color: #b91c1c; }
.ip-work-entity-view-chip.is-low    { background: rgba(100, 116, 139, 0.12); color: #475569; }
.ip-work-entity-view-date {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--ip-text-muted, #94a3b8);
}

.ip-work-entity-view-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--ip-text, #0f172a);
}

/* a0.30.5 — Entity-view attachment preview.
   Image: large clickable preview that opens full-size in a new tab.
   File:  rich chip with format icon + filename + download arrow. */
.ip-work-entity-view-image {
    display: block;
    margin: 4px 0 18px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid var(--ip-border, #e2e8f0);
    text-align: center;
    transition: border-color 120ms ease;
    line-height: 0;
}
.ip-work-entity-view-image:hover { border-color: var(--ip-primary, #6366f1); }
.ip-work-entity-view-image img {
    display: block;
    width: 100%;
    max-height: 380px;
    object-fit: contain;
    background: #fff;
}

.ip-work-entity-view-file {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 10px;
    background: var(--ip-surface, #f8fafc);
    color: var(--ip-text, #0f172a);
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, transform 80ms ease, box-shadow 120ms ease;
}
.ip-work-entity-view-file:hover {
    background: #fff;
    border-color: var(--ip-primary, #6366f1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.14);
}
.ip-work-entity-view-file-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--ip-primary, #6366f1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ip-work-entity-view-file-icon svg { width: 20px; height: 20px; }
.ip-work-entity-view-file-icon[data-type="pdf"]  { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.ip-work-entity-view-file-icon[data-type="text"] { background: rgba(15, 23, 42, 0.07);  color: #475569; }
.ip-work-entity-view-file-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.ip-work-entity-view-file-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ip-text, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ip-work-entity-view-file-hint {
    font-size: 11.5px;
    color: var(--ip-text-muted, #64748b);
}
.ip-work-entity-view-file-arrow {
    flex: 0 0 16px;
    color: var(--ip-text-muted, #94a3b8);
    transition: color 120ms ease, transform 120ms ease;
}
.ip-work-entity-view-file:hover .ip-work-entity-view-file-arrow {
    color: var(--ip-primary, #6366f1);
    transform: translate(2px, -2px);
}

.ip-work-entity-view-body {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ip-text, #0f172a);
    padding-top: 12px;
    border-top: 1px solid var(--ip-border, #e2e8f0);
}
.ip-work-entity-view-body p:first-child { margin-top: 0; }
.ip-work-entity-view-body p:last-child  { margin-bottom: 0; }
.ip-work-entity-view-body a {
    color: var(--ip-primary, #6366f1);
    text-decoration: none;
    border-bottom: 1px solid rgba(99, 102, 241, 0.3);
}
.ip-work-entity-view-body a:hover { border-bottom-color: var(--ip-primary, #6366f1); }
.ip-work-entity-view-body hr {
    margin: 16px 0;
    border: 0;
    border-top: 1px solid var(--ip-border, #e2e8f0);
}
.ip-work-entity-view-body code {
    background: rgba(15, 23, 42, 0.05);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12.5px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.ip-work-entity-view-empty {
    color: var(--ip-text-muted, #94a3b8);
    font-style: italic;
    font-size: 13px;
}

/* a0.37.0 — Document-intelligence block in the upload modal. */
.ip-work-doc-intel {
    margin: 4px 0 16px;
    padding: 14px 16px;
    background: rgba(99, 102, 241, 0.04);
    border: 1px solid rgba(99, 102, 241, 0.16);
    border-radius: 10px;
}
.ip-work-doc-summary {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ip-text, #0f172a);
}
.ip-work-doc-facts-head {
    margin-top: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ip-text-muted, #475569);
}
.ip-work-doc-facts {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ip-text, #0f172a);
}
.ip-work-doc-facts li { margin-bottom: 3px; }
.ip-work-doc-extract { margin-top: 12px; }
.ip-work-doc-extract summary {
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ip-primary, #6366f1);
    user-select: none;
}
.ip-work-doc-extract summary:hover { text-decoration: underline; }
.ip-work-doc-extract-pre {
    margin: 10px 0 0;
    padding: 12px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 8px;
    font-family: var(--ip-font-mono, ui-monospace, Menlo, monospace);
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--ip-text, #0f172a);
}

/* a0.31.0 — Actions row in the entity-view modal. */
   Buttons sit at the bottom; Delete on the left, Edit on the right.
   Inline delete-confirm replaces the row with msg + Cancel + Yes. */
.ip-work-entity-view-actions {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--ip-border, #e2e8f0);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ip-work-entity-view-actions > [data-entity-delete] { margin-right: auto; }

.ip-work-entity-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--ip-border, #e2e8f0);
    background: #fff;
    color: var(--ip-text, #0f172a);
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 100ms ease, border-color 100ms ease, color 100ms ease, transform 80ms ease, box-shadow 100ms ease;
}
.ip-work-entity-view-btn:hover {
    background: var(--ip-surface-hover, rgba(15, 23, 42, 0.045));
    border-color: var(--ip-border-bright, #cbd5e1);
}
.ip-work-entity-view-btn:active { transform: translateY(1px); }
.ip-work-entity-view-btn[disabled] { opacity: 0.6; cursor: wait; }
.ip-work-entity-view-btn svg { color: var(--ip-text-muted, #64748b); flex: 0 0 auto; }

/* Edit — subtle indigo treatment. */
.ip-work-entity-view-btn-edit {
    border-color: rgba(99, 102, 241, 0.30);
    color: var(--ip-primary, #6366f1);
    background: rgba(99, 102, 241, 0.06);
}
.ip-work-entity-view-btn-edit:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: var(--ip-primary, #6366f1);
}
.ip-work-entity-view-btn-edit svg { color: var(--ip-primary, #6366f1); }

/* Delete — quiet red until confirm. */
.ip-work-entity-view-btn-delete {
    border-color: rgba(220, 38, 38, 0.22);
    color: #b91c1c;
    background: rgba(220, 38, 38, 0.05);
}
.ip-work-entity-view-btn-delete:hover {
    background: rgba(220, 38, 38, 0.10);
    border-color: rgba(220, 38, 38, 0.4);
}
.ip-work-entity-view-btn-delete svg { color: #b91c1c; }

/* Confirm-delete (the Yes button) — filled red. */
.ip-work-entity-view-btn-delete-yes {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}
.ip-work-entity-view-btn-delete-yes:hover { background: #991b1b; border-color: #991b1b; }

/* Save — filled primary. */
.ip-work-entity-view-btn-save {
    background: var(--ip-primary, #6366f1);
    border-color: var(--ip-primary, #6366f1);
    color: #fff;
}
.ip-work-entity-view-btn-save:hover {
    background: var(--ip-primary-hover, #5558d4);
    border-color: var(--ip-primary-hover, #5558d4);
}

/* Inline delete-confirm message. */
.ip-work-entity-view-confirm-msg {
    margin-right: auto;
    font-size: 13px;
    color: var(--ip-text, #0f172a);
    font-weight: 500;
}

/* Edit form */
.ip-work-entity-edit {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ip-work-entity-edit-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ip-work-entity-edit-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ip-text-muted, #475569);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ip-work-entity-edit-input,
.ip-work-entity-edit-select,
.ip-work-entity-edit-textarea {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 7px;
    background: #fff;
    color: var(--ip-text, #0f172a);
    font-size: 13.5px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ip-work-entity-edit-input:focus,
.ip-work-entity-edit-select:focus,
.ip-work-entity-edit-textarea:focus {
    outline: none;
    border-color: var(--ip-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}
.ip-work-entity-edit-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.45;
}
.ip-work-entity-edit-range {
    width: 100%;
    accent-color: var(--ip-primary, #6366f1);
}
.ip-work-entity-edit-conf-val {
    font-variant-numeric: tabular-nums;
    color: var(--ip-primary, #6366f1);
    font-weight: 700;
}
.ip-work-entity-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--ip-border, #e2e8f0);
}

/* Current-attachment block inside edit form. */
.ip-work-entity-edit-attach-current {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    max-width: 100%;
}
.ip-work-entity-edit-attach-current img {
    max-width: 100%;
    max-height: 180px;
    display: block;
    border-radius: 6px;
}
.ip-work-entity-edit-attach-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ip-text, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.ip-work-entity-edit-attach-remove {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 0;
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.ip-work-entity-edit-attach-remove:hover { background: rgba(220, 38, 38, 0.22); }
.ip-work-entity-edit-attach-file .ip-work-entity-edit-attach-remove {
    position: static;
    margin-left: auto;
}

/* ─── a0.41.0 — SOL action proposals (accept-to-commit cards) ────
   Parallel to the main reply, an intent parse can propose case writes.
   Nothing is written without the user clicking Add. */
.ip-work-proposal-card .ip-work-msg-who::after {
    content: ' · needs your OK';
    color: var(--ip-primary, #6366f1);
    font-weight: 600;
}
.ip-work-proposals {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ip-work-proposal {
    border: 1px solid rgba(99, 102, 241, 0.28);
    background: rgba(99, 102, 241, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    transition: opacity 150ms ease;
}
.ip-work-proposal.is-skipped {
    opacity: 0.45;
}
.ip-work-proposal.is-skipped .ip-work-proposal-actions { display: none; }
.ip-work-proposal-head {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ip-primary, #6366f1);
    margin-bottom: 4px;
}
.ip-work-proposal-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ip-text, #0f172a);
    line-height: 1.4;
}
.ip-work-proposal-detail {
    font-size: 12.5px;
    color: var(--ip-text, #334155);
    margin-top: 2px;
    line-height: 1.45;
}
.ip-work-proposal-rationale {
    font-size: 12px;
    color: var(--ip-text-muted, #64748b);
    font-style: italic;
    margin-top: 4px;
}
.ip-work-proposal-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}
.ip-work-proposal-confirm {
    background: var(--ip-primary, #6366f1);
    border: 1px solid var(--ip-primary, #6366f1);
    color: #fff;
    padding: 5px 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 100ms ease;
}
.ip-work-proposal-confirm:hover:not([disabled]) { background: var(--ip-primary-hover, #5558d4); }
.ip-work-proposal-confirm[disabled] { opacity: 0.85; cursor: default; }
.ip-work-proposal-confirm.is-done {
    background: #10b981;
    border-color: #10b981;
}
.ip-work-proposal-skip {
    background: transparent;
    border: 1px solid var(--ip-border, #e2e8f0);
    color: var(--ip-text-muted, #64748b);
    padding: 5px 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.ip-work-proposal-skip:hover { background: var(--ip-surface-hover, rgba(15,23,42,0.045)); }

/* ─── a0.12.0 — toast notifications ───────────────────────────── */

.ip-work-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    z-index: 1200;
    background: var(--ip-text, #0f172a);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    opacity: 0;
    transition: opacity 200ms, transform 200ms;
    pointer-events: none;
    max-width: 90vw;
}
.ip-work-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.ip-work-toast.is-error {
    background: #b91c1c;  /* red-700 */
}

.ip-work-msg.is-thinking {
    /* a0.11.0 — the thinking bubble is no longer a single line; it
       hosts the stages list. Drop the italic/opacity styling that
       implied "this is just a placeholder" — the stages are real
       reportable progress. */
    opacity: 1;
    font-style: normal;
}

/* ─── Thinking stages (a0.11.0) ───────────────────────────────── */

.ip-work-thinking-stages {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ip-work-stage {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ip-text-muted, #94a3b8);
    /* New stages slide in softly so the user notices the transition. */
    animation: ip-work-stage-in 220ms ease-out;
}
.ip-work-stage.is-done {
    color: var(--ip-text, #e2e8f0);
}
.ip-work-stage.is-running {
    color: var(--ip-text, #e2e8f0);
}

@keyframes ip-work-stage-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ip-work-stage-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    font-size: 11px;
    border-radius: 50%;
    font-weight: 700;
}

.ip-work-stage-icon.is-done {
    background: rgba(34, 197, 94, 0.18);
    color: rgb(86, 213, 130);
}

/* Running = soft animated spinner ring. Pure CSS, no JS animation
   loop. The border-top-color contrasts against border-color to give
   the spin direction. */
.ip-work-stage-icon.is-running {
    background: transparent;
    border: 2px solid rgba(99, 102, 241, 0.25);
    border-top-color: rgba(99, 102, 241, 0.9);
    animation: ip-work-spinner 800ms linear infinite;
    box-sizing: border-box;
    /* Nudge the spinner to match the visual weight of the ✓ */
    width: 14px;
    height: 14px;
    flex-basis: 14px;
}

@keyframes ip-work-spinner {
    to { transform: rotate(360deg); }
}

.ip-work-stage-icon.is-pending {
    color: var(--ip-text-muted, #64748b);
    background: rgba(15, 23, 42, 0.05);
}

.ip-work-stage-label {
    /* The label carries the action verb — "Reading the case",
       "Asking SOL". Plain weight; the icon already says "this is a
       step". */
    font-weight: 500;
}

.ip-work-stage-meta {
    font-size: 12px;
    color: var(--ip-text-muted, #94a3b8);
    font-variant-numeric: tabular-nums;
}

.ip-work-meta {
    padding: 0 32px 4px;
    font-size: 11px;
    color: var(--ip-text-muted, #94a3b8);
    min-height: 14px;
    font-variant-numeric: tabular-nums;
}

.ip-work-composer {
    padding: 12px 32px 20px;
    border-top: 1px solid var(--ip-border, rgba(255,255,255,0.08));
    background: var(--ip-surface, #0b1220);
    /* a0.14.0 — drag target. is-drag-over flips the dashed inset border
       on so the user sees the whole composer area is a valid drop zone. */
    position: relative;
}
/* ─── a0.22.0 — Slash command menu ────────────────────────────── */

.ip-work-slash-menu {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: calc(100% + 8px);  /* float above the composer */
    max-width: 480px;
    background: var(--ip-surface-elevated, #fff);
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12);
    z-index: 20;
    overflow: hidden;
    animation: ip-work-slash-in 140ms ease-out;
}
@keyframes ip-work-slash-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ip-work-slash-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 320px;
    overflow-y: auto;
}
.ip-work-slash-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 80ms;
}
.ip-work-slash-item.is-active {
    background: rgba(99, 102, 241, 0.08);
}
.ip-work-slash-item-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ip-surface, #f8fafc);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1;
}
.ip-work-slash-item.is-active .ip-work-slash-item-icon {
    background: rgba(99, 102, 241, 0.15);
    color: var(--ip-primary, #6366f1);
}
.ip-work-slash-item-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.ip-work-slash-item-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ip-text, #0f172a);
}
.ip-work-slash-item-hint {
    font-size: 11px;
    color: var(--ip-text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ip-work-slash-item-key {
    font-size: 10.5px;
    color: var(--ip-text-muted, #94a3b8);
    background: var(--ip-surface, #f8fafc);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--ip-border, #e2e8f0);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.ip-work-slash-item.is-active .ip-work-slash-item-key {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.3);
    color: var(--ip-primary, #6366f1);
}
.ip-work-slash-empty {
    padding: 14px;
    text-align: center;
    color: var(--ip-text-muted, #94a3b8);
    font-style: italic;
    font-size: 13px;
}
.ip-work-slash-foot {
    padding: 8px 12px;
    border-top: 1px solid var(--ip-border, #e2e8f0);
    background: var(--ip-surface, #f8fafc);
    font-size: 11px;
    color: var(--ip-text-muted, #64748b);
}
.ip-work-slash-foot kbd {
    background: var(--ip-surface-elevated, #fff);
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 3px;
    padding: 0 4px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10px;
    margin: 0 2px;
}

/* ─── a0.23.0 — Mention autocomplete (twin of slash menu) ─────── */

.ip-work-mention-menu {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: calc(100% + 8px);
    max-width: 380px;
    background: var(--ip-surface-elevated, #fff);
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12);
    z-index: 20;
    overflow: hidden;
    animation: ip-work-slash-in 140ms ease-out;
}
.ip-work-mention-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 320px;
    overflow-y: auto;
}
.ip-work-mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 80ms;
}
.ip-work-mention-item.is-active {
    background: rgba(99, 102, 241, 0.08);
}
.ip-work-mention-item-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ip-surface, #f8fafc);
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
}
.ip-work-mention-item.is-active .ip-work-mention-item-icon {
    background: rgba(99, 102, 241, 0.15);
}
.ip-work-mention-item-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.ip-work-mention-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--ip-text, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ip-work-mention-item-meta {
    font-size: 11px;
    color: var(--ip-text-muted, #64748b);
    text-transform: capitalize;
}
.ip-work-mention-empty {
    padding: 14px;
    text-align: center;
    color: var(--ip-text-muted, #94a3b8);
    font-style: italic;
    font-size: 13px;
}
.ip-work-mention-foot {
    padding: 8px 12px;
    border-top: 1px solid var(--ip-border, #e2e8f0);
    background: var(--ip-surface, #f8fafc);
    font-size: 11px;
    color: var(--ip-text-muted, #64748b);
}
.ip-work-mention-foot kbd {
    background: var(--ip-surface-elevated, #fff);
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 3px;
    padding: 0 4px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10px;
    margin: 0 2px;
}

.ip-work-composer.is-drag-over::before {
    content: "Drop to attach";
    position: absolute;
    inset: 4px 8px;
    border: 2px dashed var(--ip-primary, #6366f1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.08);
    color: var(--ip-primary, #6366f1);
    font-weight: 600;
    font-size: 14px;
    pointer-events: none;
    z-index: 5;
}
.ip-work-composer-input {
    width: 100%;
    background: var(--ip-surface-elevated, #0f172a);
    color: var(--ip-text, #e2e8f0);
    border: 1px solid var(--ip-border, rgba(255,255,255,0.12));
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
    font-family: inherit;
    resize: vertical;
    min-height: 44px;
    max-height: 280px;
}
.ip-work-composer-input:focus {
    outline: none;
    border-color: var(--ip-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
}
.ip-work-composer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

/* a0.14.0 — paperclip attach button on the left of the actions row. */
.ip-work-attach-btn {
    background: transparent;
    border: 1px solid var(--ip-border, #e2e8f0);
    color: var(--ip-text-muted, #64748b);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 100ms, color 100ms, border-color 100ms;
}
.ip-work-attach-btn:hover {
    background: var(--ip-surface-hover, rgba(15, 23, 42, 0.045));
    color: var(--ip-text, #0f172a);
    border-color: var(--ip-border-bright, #cbd5e1);
}
.ip-work-attach-input { display: none; }

/* a0.14.0 — attachment chips above the textarea. */
.ip-work-attach-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.ip-work-attach-chips:empty { display: none; }

.ip-work-attach-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px 5px 10px;
    background: var(--ip-surface-elevated, #fff);
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 16px;
    font-size: 12.5px;
    color: var(--ip-text, #0f172a);
    max-width: 280px;
}
.ip-work-attach-chip.is-uploading {
    background: rgba(99, 102, 241, 0.06);
    border-color: rgba(99, 102, 241, 0.3);
    color: var(--ip-text-muted, #64748b);
}
.ip-work-attach-chip.is-error {
    background: rgba(185, 28, 28, 0.06);
    border-color: rgba(185, 28, 28, 0.3);
    color: #b91c1c;
}
.ip-work-attach-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 14px;
    line-height: 1;
}
.ip-work-attach-chip-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.ip-work-attach-chip-meta {
    font-size: 11px;
    color: var(--ip-text-muted, #64748b);
    font-variant-numeric: tabular-nums;
}
.ip-work-attach-chip-remove {
    background: transparent;
    border: 0;
    color: var(--ip-text-muted, #64748b);
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    border-radius: 4px;
}
.ip-work-attach-chip-remove:hover {
    background: rgba(15, 23, 42, 0.08);
    color: var(--ip-text, #0f172a);
}
.ip-work-attach-chip-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(99, 102, 241, 0.25);
    border-top-color: rgba(99, 102, 241, 0.9);
    border-radius: 50%;
    animation: ip-work-spinner 800ms linear infinite;
    box-sizing: border-box;
}
.ip-work-composer-hint {
    font-size: 11px;
    color: var(--ip-text-muted, #94a3b8);
}
.ip-work-composer-send {
    background: var(--ip-primary, #6366f1);
    color: #fff;
    border: 0;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms;
}
.ip-work-composer-send:hover { background: var(--ip-primary-hover, #5558d4); }
.ip-work-composer-send[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ─── Rail sections (B0.2 — expandable) ───────────────────────── */

.ip-work-rail-section {
    border-bottom: 1px solid var(--ip-border, rgba(255,255,255,0.04));
}
.ip-work-rail-section:last-child { border-bottom: 0; }

.ip-work-rail-row {
    /* The .ip-work-rail-row anchor from B0.1 becomes a button here so it
       can be a section toggle. Inheriting the same look for both forms. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    color: var(--ip-text, #e2e8f0);
    text-decoration: none;
    font-size: 13px;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 100ms;
    font-family: inherit;
}
.ip-work-rail-row:hover {
    background: var(--ip-surface-hover, rgba(255,255,255,0.04));
}
.ip-work-rail-row-caret {
    display: inline-block;
    width: 12px;
    font-size: 10px;
    color: var(--ip-text-muted, #94a3b8);
    transition: transform 150ms ease-out;
}
.ip-work-rail-row-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--ip-text-muted, #94a3b8);
    /* Hidden in Full / Wide; shown only in Focus. */
    display: none;
}
.ip-work-rail-section.is-open .ip-work-rail-row-caret {
    transform: rotate(90deg);
}
.ip-work-rail-row[aria-expanded="true"] {
    background: var(--ip-surface-hover, rgba(255,255,255,0.04));
}

.ip-work-rail-items {
    padding: 4px 8px 8px 28px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ip-work-rail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    color: var(--ip-text, #e2e8f0);
    text-decoration: none;
    font-size: 12px;
    transition: background 100ms, opacity 220ms, transform 220ms;
    position: relative;
}
.ip-work-rail-item:hover {
    background: var(--ip-surface-hover, rgba(255,255,255,0.06));
}

/* a0.24.0 — hover ✕ on every mini-card. Quiet by default; visible on
   row hover. */
.ip-work-rail-item-delete {
    background: transparent;
    border: 0;
    color: var(--ip-text-muted, #94a3b8);
    width: 18px;
    height: 18px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    opacity: 0;
    transition: opacity 120ms, background 100ms, color 100ms;
    flex: 0 0 18px;
    margin-left: auto;
}
.ip-work-rail-item:hover .ip-work-rail-item-delete,
.ip-work-rail-item-delete:focus-visible {
    opacity: 1;
}
.ip-work-rail-item-delete:hover {
    background: rgba(185, 28, 28, 0.10);  /* red-700 wash */
    color: #b91c1c;
}
@media (hover: none) {
    .ip-work-rail-item-delete { opacity: 0.5; }
}

/* a0.24.0 — Inline confirm state. The mini-card body fades; a small
   "Delete? ✓ ✕" cluster appears over it. */
.ip-work-rail-item.is-confirming {
    background: rgba(185, 28, 28, 0.06);
}
.ip-work-rail-item.is-confirming .ip-work-rail-item-thumb,
.ip-work-rail-item.is-confirming .ip-work-rail-item-body,
.ip-work-rail-item.is-confirming .ip-work-rail-item-delete {
    opacity: 0.4;
    pointer-events: none;
}
.ip-work-rail-item-confirm {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 0 8px;
    background: transparent;
}
.ip-work-rail-item-confirm-msg {
    margin-right: auto;
    font-size: 11.5px;
    font-weight: 600;
    color: #b91c1c;
    padding-left: 6px;
}
.ip-work-rail-item-confirm-yes,
.ip-work-rail-item-confirm-no {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid var(--ip-border, #e2e8f0);
    background: var(--ip-surface-elevated, #fff);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    padding: 0;
    transition: background 100ms, color 100ms, border-color 100ms;
}
.ip-work-rail-item-confirm-yes {
    color: #b91c1c;
    border-color: rgba(185, 28, 28, 0.4);
}
.ip-work-rail-item-confirm-yes:hover:not(:disabled) {
    background: #b91c1c;
    color: #fff;
}
.ip-work-rail-item-confirm-no:hover:not(:disabled) {
    background: var(--ip-surface-hover, rgba(15, 23, 42, 0.045));
    color: var(--ip-text, #0f172a);
}
.ip-work-rail-item-confirm-yes:disabled,
.ip-work-rail-item-confirm-no:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* a0.24.0 — Animated remove on successful delete. */
.ip-work-rail-item.is-removing {
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
}
.ip-work-rail-item-thumb {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--ip-surface, rgba(255,255,255,0.08));
}
.ip-work-rail-item-thumb-empty {
    background-image: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(99,102,241,0.05));
}
/* a0.30.5 — File-type icon thumb (PDF / text / generic file).
   Lives where the image thumb would. Format-specific tint via data-type. */
.ip-work-rail-item-thumb-file {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(99, 102, 241, 0.10);
    color: var(--ip-primary, #6366f1);
}
.ip-work-rail-item-thumb-file svg { width: 14px; height: 14px; }
.ip-work-rail-item-thumb-file[data-type="pdf"]  { background-color: rgba(239, 68, 68, 0.10);  color: #dc2626; }
.ip-work-rail-item-thumb-file[data-type="text"] { background-color: rgba(15, 23, 42, 0.07);   color: #475569; }
.ip-work-rail-item-body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ip-work-rail-item-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ip-work-rail-item-meta {
    font-size: 10px;
    color: var(--ip-text-muted, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ip-work-rail-empty {
    padding: 6px 8px;
    font-size: 12px;
    color: var(--ip-text-muted, #94a3b8);
    font-style: italic;
}

/* ─── a0.19.0 — Left rail quick-add (+ button + inline form) ──── */

.ip-work-rail-add-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 6px;
    border-radius: 5px;
    background: transparent;
    color: var(--ip-text-muted, #64748b);
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    transition: background 100ms, color 100ms;
    opacity: 0;
    flex: 0 0 20px;
}
/* Reveal on row hover / focus-within. */
.ip-work-rail-row:hover .ip-work-rail-add-mini,
.ip-work-rail-row:focus-within .ip-work-rail-add-mini,
.ip-work-rail-section.is-open .ip-work-rail-add-mini {
    opacity: 1;
}
.ip-work-rail-add-mini:hover {
    background: rgba(99, 102, 241, 0.12);
    color: var(--ip-primary, #6366f1);
}
.ip-work-rail-add-mini:focus-visible {
    outline: 2px solid var(--ip-primary, #6366f1);
    outline-offset: 2px;
}
@media (hover: none) {
    .ip-work-rail-add-mini { opacity: 1; }
}

.ip-work-rail-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px 10px;
    background: rgba(99, 102, 241, 0.04);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 8px;
    margin-bottom: 8px;
    animation: ip-work-form-in 160ms ease-out;
}
@keyframes ip-work-form-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ip-work-rail-form-label,
.ip-work-rail-form-type,
.ip-work-rail-form-body {
    width: 100%;
    background: var(--ip-surface-elevated, #fff);
    color: var(--ip-text, #0f172a);
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 6px;
    padding: 6px 9px;
    font-size: 12.5px;
    font-family: inherit;
    box-sizing: border-box;
}
.ip-work-rail-form-body {
    resize: vertical;
    min-height: 48px;
    line-height: 1.45;
}
.ip-work-rail-form-label:focus,
.ip-work-rail-form-type:focus,
.ip-work-rail-form-body:focus {
    outline: none;
    border-color: var(--ip-primary, #6366f1);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
}
.ip-work-rail-form-conf-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ip-text-muted, #64748b);
}
.ip-work-rail-form-conf-val {
    font-size: 12px;
    color: var(--ip-text, #0f172a);
    text-transform: none;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.ip-work-rail-form-conf {
    width: 100%;
    accent-color: var(--ip-primary, #6366f1);
}
.ip-work-rail-form-hint {
    margin: 0;
    font-size: 11px;
    color: var(--ip-text-muted, #64748b);
}

/* a0.30.1 — Stylized file attach affordance.
   Native <input type="file"> is visually hidden but kept in the
   accessibility tree (and click-driven via the surrounding label).
   The visible row is a hint label + faux "Choose file" button +
   filename chip + ✕ clear control. has-file state gives it the
   "this is set" look. */
.ip-work-rail-form-file {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border: 1px dashed var(--ip-border, #cbd5e1);
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.03);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
    position: relative;
}
.ip-work-rail-form-file:hover {
    background: rgba(99, 102, 241, 0.06);
    border-color: var(--ip-primary, #6366f1);
}
.ip-work-rail-form-file.has-file {
    border-style: solid;
    border-color: rgba(99, 102, 241, 0.36);
    background: rgba(99, 102, 241, 0.05);
}

.ip-work-rail-form-file-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ip-text-muted, #475569);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
}

.ip-work-rail-form-file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Faux "Choose file" button — looks like a real button. */
.ip-work-rail-form-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #fff;
    border: 1px solid var(--ip-border, #cbd5e1);
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ip-text, #0f172a);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transition: background 100ms ease, border-color 100ms ease, box-shadow 100ms ease, transform 80ms ease;
    flex: 0 0 auto;
    line-height: 1;
}
.ip-work-rail-form-file:hover .ip-work-rail-form-file-btn {
    background: #fff;
    border-color: var(--ip-primary, #6366f1);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.14);
}
.ip-work-rail-form-file:active .ip-work-rail-form-file-btn {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.ip-work-rail-form-file-btn svg {
    color: var(--ip-primary, #6366f1);
    flex: 0 0 auto;
}

/* Filename chip. Muted "No file selected" when empty;
   tinted-primary when set. */
.ip-work-rail-form-file-name {
    font-size: 11.5px;
    color: var(--ip-text-muted, #94a3b8);
    font-weight: 500;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.ip-work-rail-form-file-name.has-file {
    color: var(--ip-primary, #6366f1);
    font-weight: 600;
}

/* ✕ clear control — only visible when a file is picked. */
.ip-work-rail-form-file-clear {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 0;
    background: rgba(99, 102, 241, 0.12);
    color: var(--ip-primary, #6366f1);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 100ms ease, transform 80ms ease;
}
.ip-work-rail-form-file-clear:hover {
    background: rgba(99, 102, 241, 0.22);
}
.ip-work-rail-form-file-clear:active { transform: scale(0.92); }

/* Hide the native input visually but keep it tab-focusable.
   Pattern: zero-size + opacity:0 still triggers click via the
   wrapping <label>. We bump tap target by sizing the label.
   a0.30.4 — pointer-events MUST stay default; setting it to `none`
   prevented label-click → input-click in some browser engines and
   killed the file picker entirely. */
.ip-work-rail-form-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
/* Keyboard focus on the (hidden) native input → ring around the label. */
.ip-work-rail-form-file:focus-within {
    border-color: var(--ip-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
    outline: none;
}

.ip-work-rail-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 2px;
}
.ip-work-rail-form-cancel,
.ip-work-rail-form-save {
    background: transparent;
    border: 1px solid var(--ip-border, #e2e8f0);
    color: var(--ip-text, #0f172a);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.ip-work-rail-form-cancel:hover { background: var(--ip-surface-hover, rgba(15, 23, 42, 0.045)); }
.ip-work-rail-form-save {
    background: var(--ip-primary, #6366f1);
    border-color: var(--ip-primary, #6366f1);
    color: #fff;
}
.ip-work-rail-form-save:hover { background: var(--ip-primary-hover, #5558d4); }
.ip-work-rail-form-save:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* a0.19.0 — Drag-drop target on the Evidence section. */
.ip-work-rail-section[data-section="evidence"] {
    position: relative;
}
.ip-work-rail-section[data-section="evidence"].is-drag-over {
    background: rgba(99, 102, 241, 0.06);
    box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.5);
    border-radius: 6px;
}
.ip-work-rail-section[data-section="evidence"].is-drag-over::after {
    content: "Drop to upload";
    position: absolute;
    top: 6px;
    right: 32px;
    font-size: 10px;
    color: var(--ip-primary, #6366f1);
    background: rgba(99, 102, 241, 0.12);
    padding: 2px 7px;
    border-radius: 999px;
    font-weight: 600;
    pointer-events: none;
}

.ip-work-rail-showall {
    display: block;
    padding: 6px 8px;
    margin-top: 4px;
    border-radius: 6px;
    font-size: 11px;
    color: var(--ip-primary, #8b5cf6);
    text-decoration: none;
    text-align: right;
    transition: background 100ms;
}
.ip-work-rail-showall:hover {
    background: var(--ip-surface-hover, rgba(255,255,255,0.04));
}

/* ─── Band rail-buttons (B0.2 — overlay triggers in Wide) ────────
   a0.29.1: ghost-button look, matched to the depth button so the
   action row reads as a cohesive group. */
.ip-work-band-rail-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ip-text-muted, #475569) !important;
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.005em;
    cursor: pointer;
    display: none;  /* shown only in depth-wide or when paired rail is hidden */
    align-items: center;
    gap: 6px;
    font-family: inherit;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ip-work-band-rail-btn:hover {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.08);
    color: var(--ip-text, #0f172a) !important;
}
.ip-work-band-rail-btn:focus-visible {
    outline: none;
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.14);
}
.ip-work-band-rail-btn svg { color: var(--ip-text-muted, #94a3b8); }
.ip-work-band-rail-btn:hover svg { color: var(--ip-text, #475569); }

/* ─── Thread menu overlay (B0.2) ───────────────────────────────── */

.ip-work-thread-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    justify-content: flex-end;
}
/* a0.11.3 — only flex-layout when NOT hidden. Bare `display: flex`
   overrode the [hidden] attribute, so the overlay rendered on every
   page load (dimming everything behind it). The hidden attribute
   now correctly suppresses display. */
.ip-work-thread-overlay:not([hidden]) {
    display: flex;
}
.ip-work-thread-overlay-backdrop {
    position: absolute;
    inset: 0;
    /* a0.11.3 — backdrop softened. The chat behind the panel should
       stay readable — opening Conversations is a focus shift, not a
       modal trap. Drop the blur (made text illegible) and lighten
       the dim. */
    background: rgba(0, 0, 0, 0.28);
}
.ip-work-thread-panel {
    position: relative;
    width: min(380px, 90vw);
    background: var(--ip-surface-elevated, #0f172a);
    border-left: 1px solid var(--ip-border, rgba(255,255,255,0.08));
    display: flex;
    flex-direction: column;
    animation: ip-work-slide-in 200ms ease-out;
}
@keyframes ip-work-slide-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
.ip-work-thread-panel-head {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--ip-border, rgba(255,255,255,0.08));
}
.ip-work-thread-panel-head h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}
.ip-work-thread-panel-close {
    background: transparent;
    border: 0;
    color: var(--ip-text-muted, #94a3b8);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.ip-work-thread-panel-close:hover { color: var(--ip-text, #e2e8f0); }

.ip-work-thread-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.ip-work-thread-panel-loading,
.ip-work-thread-panel-empty {
    padding: 24px 16px;
    color: var(--ip-text-muted, #94a3b8);
    font-size: 13px;
    text-align: center;
}

.ip-work-thread-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ip-border, #e2e8f0);
    color: var(--ip-text, #0f172a);
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
    transition: background 100ms;
}
.ip-work-thread-item:hover {
    background: var(--ip-surface-hover, rgba(15, 23, 42, 0.045));
}
.ip-work-thread-item.is-active {
    background: rgba(99,102,241,0.08);
    border-left: 3px solid var(--ip-primary, #6366f1);
    padding-left: 13px;
}
.ip-work-thread-item-headline {
    display: block;
    font-weight: 500;
    color: var(--ip-text, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* a0.16.0 — gentle shimmer on rows that are generating their title */
.ip-work-thread-item.is-titling .ip-work-thread-item-headline {
    color: var(--ip-text-muted, #64748b);
    background: linear-gradient(
        90deg,
        var(--ip-text-muted, #64748b) 0%,
        var(--ip-text, #0f172a)       50%,
        var(--ip-text-muted, #64748b) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    animation: ip-work-title-shimmer 1.6s ease-in-out infinite;
}
@keyframes ip-work-title-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
.ip-work-thread-item-snippet {
    display: block;
    font-size: 11.5px;
    color: var(--ip-text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ip-work-thread-item-ts {
    display: block;
    font-size: 10px;
    color: var(--ip-text-muted, #94a3b8);
    font-variant-numeric: tabular-nums;
}

.ip-work-thread-panel-foot {
    padding: 12px 16px;
    border-top: 1px solid var(--ip-border, rgba(255,255,255,0.08));
}
.ip-work-thread-panel-new {
    width: 100%;
    background: var(--ip-primary, #6366f1);
    color: #fff;
    border: 0;
    padding: 9px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.ip-work-thread-panel-new:hover { background: var(--ip-primary-hover, #5558d4); }

/* ─── Depth states ─────────────────────────────────────────────── */

.ip-work-depth-focus {
    grid-template-columns: 56px 1fr 56px;
}
.ip-work-depth-focus .ip-work-rail-head h2 {
    /* Replace text rail title with a thin top border accent. */
    display: none;
}
.ip-work-depth-focus .ip-work-rail-head {
    padding: 8px 0;
    text-align: center;
}
/* In Focus, each section becomes an icon-only row: hide label,
   hide caret, hide items-by-default. Show icon + count badge. */
.ip-work-depth-focus .ip-work-rail-row-caret,
.ip-work-depth-focus .ip-work-rail-row-label,
.ip-work-depth-focus .ip-work-rail-row-meta {
    display: none;
}
.ip-work-depth-focus .ip-work-rail-row-icon {
    display: inline-block;
}
.ip-work-depth-focus .ip-work-rail-row {
    flex-direction: column;
    gap: 4px;
    padding: 12px 4px;
    align-items: center;
    text-align: center;
}
.ip-work-depth-focus .ip-work-rail-row-count {
    font-size: 10px;
    padding: 1px 6px;
    line-height: 1.5;
}
.ip-work-depth-focus .ip-work-rail-items,
.ip-work-depth-focus .ip-work-rail-foot {
    display: none;
}
/* When a section is expanded as overlay in Focus mode, show its items
   panel. Same width as the Wide-mode overlay (320px) — the
   ip-work-rail-overlay class handles the geometry. */
.ip-work-depth-focus .ip-work-left.ip-work-rail-overlay .ip-work-rail-row-icon { display: none; }
.ip-work-depth-focus .ip-work-left.ip-work-rail-overlay .ip-work-rail-row-caret,
.ip-work-depth-focus .ip-work-left.ip-work-rail-overlay .ip-work-rail-row-label,
.ip-work-depth-focus .ip-work-left.ip-work-rail-overlay .ip-work-rail-row-meta,
.ip-work-depth-focus .ip-work-left.ip-work-rail-overlay .ip-work-rail-row-count,
.ip-work-depth-focus .ip-work-left.ip-work-rail-overlay .ip-work-rail-foot {
    display: revert;
}
.ip-work-depth-focus .ip-work-left.ip-work-rail-overlay .ip-work-rail-row {
    flex-direction: row;
    padding: 10px 16px;
    text-align: left;
    align-items: center;
}
.ip-work-depth-focus .ip-work-left.ip-work-rail-overlay .ip-work-rail-row-count {
    font-size: 12px;
    padding: 2px 8px;
}
.ip-work-depth-focus .ip-work-left.ip-work-rail-overlay .ip-work-rail-head h2 {
    display: revert;
    padding: 0 16px;
}
.ip-work-depth-focus .ip-work-left.ip-work-rail-overlay .ip-work-rail-head {
    padding: 12px 0;
    text-align: left;
}

.ip-work-depth-wide {
    grid-template-columns: 0 1fr 0;
}
.ip-work-depth-wide .ip-work-left,
.ip-work-depth-wide .ip-work-right {
    display: none;
}

/* ─── a0.19.3 — Per-rail collapse (independent of depth) ────────
   Two new class flags on .ip-work let either rail be hidden
   regardless of depth mode. The collapse chevron in each rail's
   header toggles the corresponding flag. Wins over Full depth's
   column sizing because these rules come later in the cascade. */
.ip-work.is-left-hidden:not(.ip-work-depth-wide) {
    grid-template-columns: 0 1fr var(--ip-work-rail-w);
}
.ip-work.is-right-hidden:not(.ip-work-depth-wide) {
    grid-template-columns: var(--ip-work-rail-w) 1fr 0;
}
.ip-work.is-left-hidden.is-right-hidden {
    grid-template-columns: 0 1fr 0;
}
.ip-work.is-left-hidden  .ip-work-left,
.ip-work.is-right-hidden .ip-work-right {
    display: none;
}
/* When a rail is hidden by either mechanism (Wide depth OR explicit
   collapse), surface the band's rail-access button so the user can
   reopen it from the band. */
.ip-work-depth-wide .ip-work-band-rail-btn,
.ip-work.is-left-hidden  #ip-work-band-left,
.ip-work.is-right-hidden #ip-work-band-right {
    display: inline-block;
}

/* Rail-as-overlay: when a band button is clicked in Wide, the rail
   floats over the chat as an overlay. */
.ip-work-rail-overlay {
    position: absolute !important;
    top: var(--ip-work-band-h);
    bottom: 0;
    z-index: 50;
    display: flex !important;
    width: 320px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.10);
}
.ip-work-left.ip-work-rail-overlay  { left: 0; }
.ip-work-right.ip-work-rail-overlay { right: 0; }
.ip-work-depth-wide.ip-work-has-overlay .ip-work-center {
    /* leave center alone; overlay floats above */
}
.ip-work-depth-wide { position: relative; }

/* ─── Responsive: tablet collapses rails to overlay ────────────── */

@media (max-width: 1024px) {
    .ip-work {
        grid-template-columns: 0 1fr 0;
    }
    .ip-work-left,
    .ip-work-right {
        display: none;
    }
}

/* ─── a0.19.1 — Strip ALL chrome above .ip-work ──────────────────
   The platform-header.php partial injects:
     - .ip-topbar (position: sticky, z-index 100)
     - .ip-wrap / .ip-main-card / .ip-tab-body (nested wrappers with
       padding, max-width, box-shadow)
   None of those belong on the work template — the work screen is the
   experience. Without these overrides, the wrappers pushed .ip-work
   down past the viewport (band + left rail clipped off the top). */

body.page-template-platform-work .ip-topbar,
body.page-template-platform-work .ip-platform-topbar { display: none !important; }

body.page-template-platform-work .ip-wrap {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.page-template-platform-work .ip-main-card,
body.page-template-platform-work .ip-tab-body,
body.page-template-platform-work #ip-page-content {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ─── Hide WP topbar on this page (chat is the experience) ─────── */

body.page-template-platform-work #wpadminbar { display: none; }
body.page-template-platform-work,
html.wp-toolbar:has(body.page-template-platform-work) {
    /* a0.18.1 — kill every chrome offset WP injects. The 32px admin-bar
       margin on html was pushing .ip-work down 32px past the bottom of
       the viewport, hiding the composer Send button. */
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.page-template-platform-work {
    /* Pin the body itself — prevents any theme footer / surrounding
       chrome from extending the page beyond the viewport. */
    overflow: hidden !important;
    height: 100vh;
    height: 100dvh;
}
html.wp-toolbar body.page-template-platform-work {
    /* The wp-toolbar class on html still tries to push body down via
       theme overrides; double-down on the reset. */
    margin-top: 0 !important;
    padding-top: 0 !important;
}