/*
 * 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.
 */

.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. */

    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";
    height: 100vh;
    width: 100%;
    background: var(--ip-surface, #0b1220);
    color: var(--ip-text, #e2e8f0);
    overflow: hidden;
}

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

.ip-work-band {
    grid-area: band;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    border-bottom: 1px solid var(--ip-border, rgba(255,255,255,0.08));
    background: var(--ip-surface-elevated, #0f172a);
}

.ip-work-band-titles {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.ip-work-band-case {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ip-work-band-status {
    font-size: 13px;
    color: var(--ip-text-muted, #94a3b8);
}

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

.ip-work-depth-btn {
    background: transparent;
    border: 1px solid var(--ip-border, rgba(255,255,255,0.12));
    color: var(--ip-text-muted, #94a3b8);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: background 120ms, color 120ms, border-color 120ms;
}
.ip-work-depth-btn:hover {
    background: var(--ip-surface-hover, rgba(255,255,255,0.04));
    color: var(--ip-text, #e2e8f0);
}

/* ─── 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)); }
.ip-work-right { grid-area: right; border-left:  1px solid var(--ip-border, rgba(255,255,255,0.08)); }

.ip-work-rail-head {
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--ip-border, rgba(255,255,255,0.06));
}
.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;
}

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

.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;
    background: var(--ip-surface, #0b1220);
    overflow: hidden;
    min-width: 0;
}

.ip-work-mode {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--ip-border, rgba(255,255,255,0.06));
}
.ip-work-mode-btn {
    background: transparent;
    border: 1px solid var(--ip-border, rgba(255,255,255,0.12));
    color: var(--ip-text-muted, #94a3b8);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: background 120ms, color 120ms;
}
.ip-work-mode-btn.is-active {
    background: var(--ip-primary, #6366f1);
    color: #fff;
    border-color: var(--ip-primary, #6366f1);
}
.ip-work-mode-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
.ip-work-mode-spacer { flex: 1; }
.ip-work-mode-menu {
    background: transparent;
    border: 1px solid var(--ip-border, rgba(255,255,255,0.12));
    color: var(--ip-text-muted, #94a3b8);
    width: 32px; height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}
.ip-work-mode-menu:hover {
    background: var(--ip-surface-hover, rgba(255,255,255,0.04));
    color: var(--ip-text, #e2e8f0);
}

.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;
}
.ip-work-thread-empty {
    margin: auto;
    color: var(--ip-text-muted, #94a3b8);
    font-size: 14px;
    text-align: center;
}

.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;
}
.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);
}
.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;
}
.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;
}
.ip-work-rail-item:hover {
    background: var(--ip-surface-hover, rgba(255,255,255,0.06));
}
.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));
}
.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;
}

.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) ──────── */

.ip-work-band-rail-btn {
    background: transparent;
    border: 1px solid var(--ip-border, rgba(255,255,255,0.12));
    color: var(--ip-text-muted, #94a3b8);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    display: none;  /* shown only in depth-wide */
}
.ip-work-band-rail-btn:hover {
    background: var(--ip-surface-hover, rgba(255,255,255,0.04));
    color: var(--ip-text, #e2e8f0);
}

/* ─── 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: block;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ip-border, rgba(255,255,255,0.04));
    color: var(--ip-text, #e2e8f0);
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
    transition: background 100ms;
}
.ip-work-thread-item:hover {
    background: var(--ip-surface-hover, rgba(255,255,255,0.04));
}
.ip-work-thread-item.is-active {
    background: rgba(99,102,241,0.1);
    border-left: 3px solid var(--ip-primary, #6366f1);
    padding-left: 13px;
}
.ip-work-thread-item-snippet {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--ip-text-muted, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ip-work-thread-item-ts {
    display: block;
    margin-top: 2px;
    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;
}
/* In Wide, the band shows rail-access buttons so the rails aren't lost. */
.ip-work-depth-wide .ip-work-band-rail-btn {
    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;
    }
}

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

body.page-template-platform-work #wpadminbar { display: none; }
body.page-template-platform-work { padding-top: 0 !important; margin-top: 0 !important; }