/* Project detail: split layout, tabs, tasks, deploy, log */
/* --- Project Detail --- */
.project-detail {
    display: flex;
    flex-direction: column;
    /* Definite height so the side-by-side chat panel (.chat-messages is
   flex:1 + overflow-y:auto) is height-bounded and scrolls internally,
   landing on the latest message. When the split stacks (<=1024px) this
   switches to auto so the page grows instead - see the media query.
 */
    height: calc(100vh - var(--navbar-height) - 48px);
}

.project-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.project-detail-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.project-detail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.project-detail-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.project-detail-name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.project-detail-repo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 2px;
    transition: color var(--transition-speed);
}

.project-detail-repo:hover {
    color: var(--text-secondary);
}

.no-repo {
    font-style: italic;
    opacity: 0.5;
}

.project-detail-repo svg {
    flex-shrink: 0;
}

.project-detail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Active Work Banner --- */
.active-work-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.active-work-text {
    flex: 1;
    font-size: 14px;
    color: var(--text-secondary);
}

/* --- New Repo Banner --- */
.new-repo-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 8px;
    margin-bottom: 12px;
    color: #f59e0b;
    flex-shrink: 0;
}

.new-repo-banner-text {
    flex: 1;
    font-size: 14px;
    color: var(--text-secondary);
}

.new-repo-banner-link {
    color: #f59e0b;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.new-repo-banner-link:hover {
    color: #fbbf24;
}

.new-repo-banner-close {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.new-repo-banner-close:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

/* Deploy-context credit warning, above the Deploy button. Amber when the
   balance is approaching the threshold, red once deploys are paused. */
.deploy-credit-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    border: 1px solid transparent;
}

/* The banner sets its own accent color; the icon (fill: currentColor) and CTA
   (color: inherit) pick it up, so the tier only needs to vary one property. */
.deploy-credit-banner.approaching {
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    border-color: color-mix(in srgb, var(--warning) 30%, transparent);
    color: var(--warning);
}

.deploy-credit-banner.blocked {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
    color: var(--danger);
}

.deploy-credit-icon {
    flex-shrink: 0;
}

.deploy-credit-text {
    /* No flex-grow: the text keeps its natural width so the "Add credits" CTA
       sits right after it instead of being pushed to the far edge on wide
       banners, where it's easy to miss. */
    color: var(--text-secondary);
}

.deploy-credit-cta {
    flex-shrink: 0;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

/* --- Split Layout --- */
.split-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 0;
}

.left-panel {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.split-divider {
    width: 1px;
    background: var(--border);
    flex-shrink: 0;
    cursor: col-resize;
    position: relative;
}

.split-divider::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3px;
    right: -3px;
}

/* Standalone legacy/imported Project workspaces use the same roomy 50/50
   conversation surface as Idea Design. The visible divider remains a single
   hairline while the full 32px gutter is available as a drag target. */
.project-workspace-splitter {
    position: relative;
    z-index: 4;
    width: 32px;
    flex: 0 0 32px;
    cursor: col-resize;
    touch-action: none;
    background: transparent;
}

.project-workspace-splitter::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15px;
    width: 1px;
    background: var(--border);
    transition: width 120ms ease, left 120ms ease, background 120ms ease;
}

.project-workspace-splitter:hover::before,
.project-workspace-splitter:focus-visible::before,
.project-workspace-splitter.dragging::before {
    left: 14px;
    width: 3px;
    background: var(--accent);
}

.project-workspace-splitter:focus-visible {
    outline: none;
}

.resizable-project-chat-panel {
    transition: none;
    background: var(--bg-primary);
}

/* Legacy and imported repositories use the same framed workspace as Idea
   Design. Embedded Build continuations already live inside that frame. */
.project-detail:not(.embedded-project-workspace) > .project-workspace-split {
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-primary);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

.right-panel {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    transition: flex var(--transition-speed), min-width var(--transition-speed);
}

.right-panel.folded {
    flex: 0;
    min-width: 44px;
    max-width: 44px;
}

.right-panel.folded .chat-header {
    flex-direction: column;
    padding: 10px 6px;
    gap: 10px;
}

.right-panel.folded .chat-title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 14px;
    white-space: nowrap;
}

.right-panel.folded .chat-participants {
    flex-direction: column;
    gap: 4px;
}

/* Below 1024px (incl. zoomed-in desktop) the split gets too cramped, so
   stack the panels into one column and let the page scroll instead of clipping.
   The mobile DOM swap only happens at <=768px and isn't re-evaluated on zoom,
   so this CSS is what keeps the mounted desktop layout usable as it narrows. */
@media (max-width: 1024px) {
    /* Stacked: let the page grow and scroll instead of clipping to viewport
       height. (Side-by-side keeps its definite height so chat scrolls inside.) */
    .project-detail {
        height: auto;
        min-height: calc(100vh - var(--navbar-height) - 48px);
    }

    .split-layout {
        flex-direction: column;
    }

    .split-divider {
        display: none;
    }

    .project-workspace-splitter {
        display: none;
    }

    .left-panel,
    .right-panel,
    .right-panel.folded {
        flex: none;
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    /* Left panel flows into the page scroll; the chat panel keeps a usable
       height and scrolls internally as on desktop. */
    .left-panel {
        overflow: visible;
    }

    .right-panel,
    .right-panel.folded {
        min-height: 70vh;
    }

    .right-panel.resizable-project-chat-panel {
        flex: none !important;
    }

    /* Composer stays in document flow under the message list; avoid fixed
       overlays that would sit under mobile chrome or clip on zoom. */
    .right-panel .chat-input-area,
    .project-chat-panel .chat-input-area {
        position: relative;
        z-index: 1;
    }
}

/* Phone-width project chrome: stack header actions, shrink card padding. */
@media (max-width: 480px) {
    .projects-listing .dashboard-header {
        flex-direction: column;
        align-items: stretch;
    }

    .projects-header-actions {
        justify-content: stretch;
    }

    .projects-header-actions .project-create-action,
    .projects-header-actions .project-create-action.single,
    .projects-header-actions .project-import-action {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
    }

    .project-detail-header {
        align-items: flex-start;
    }

    .project-detail-actions {
        flex-wrap: wrap;
        width: 100%;
    }
}

.chat-fold-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-speed), color var(--transition-speed);
}

.chat-fold-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* --- Panel Tabs --- */
.panel-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    padding: 0 16px;
    height: 42px;
}

.panel-tab {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: color var(--transition-speed), border-color var(--transition-speed);
    white-space: nowrap;
}

.panel-tab:hover {
    color: var(--text-secondary);
}

.panel-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
}

.panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}


.overview-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.overview-stat {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.overview-stat-value {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.overview-stat-label {
    font-size: 14px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.overview-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.overview-tasks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.overview-task-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.overview-task-name {
    font-size: 14px;
    font-weight: 500;
    width: 160px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overview-task-bar {
    flex: 1;
    min-width: 60px;
}

/* --- Tasks Tab --- */
.tasks-table {
    display: flex;
    flex-direction: column;
}

.tasks-table-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--border);
}

.th-name { flex: 2; }
.th-progress { flex: 2.5; }
.th-status { flex: 0.8; }
.th-issues { width: 60px; text-align: center; flex-shrink: 0; }
.th-time { width: 70px; text-align: right; flex-shrink: 0; }
.th-estimate { width: 70px; text-align: right; flex-shrink: 0; }

.task-row-group {
    border-bottom: 1px solid var(--border);
}

.task-row {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;
    cursor: pointer;
    transition: background var(--transition-speed);
}

.task-row:hover {
    background: var(--bg-secondary);
}

.task-row.expanded {
    background: var(--bg-secondary);
}

.td-name {
    flex: 2;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.td-status {
    flex: 0.8;
    display: flex;
    align-items: center;
}

.expand-arrow {
    font-size: 14px;
    color: var(--text-muted);
    transition: transform var(--transition-speed);
    display: inline-block;
}

.expand-arrow.expanded {
    transform: rotate(90deg);
}

.td-progress {
    flex: 2.5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.td-progress-pct {
    font-size: 14px;
    color: var(--text-muted);
    width: 30px;
    text-align: right;
    flex-shrink: 0;
}

.td-issues {
    width: 60px;
    text-align: center;
    flex-shrink: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

/* 4-column task table - CSS Grid
   The header and every row share ONE column definition, so column edges
   can't drift the way they did with per-row flex (the header had no gap;
   rows had gap:8px, nudging each data column right of its label). Scoped
   to `.tasks-table-grid` so the 6-column mock table keeps its flex layout.
 */
.tasks-table-grid .tasks-table-header,
.tasks-table-grid .task-row {
    display: grid;
    /* Progress floor stays small so the name column (the primary identifier)
   keeps priority when the panel is narrow - e.g. the 50/50 split just above
   the 1024px stack breakpoint. A ~40px bar still reads; a clipped name doesn't.
 */
    grid-template-columns: minmax(0, 3fr) minmax(80px, 2fr) 104px 44px;
    align-items: center;
    gap: 14px;
}

/* Status badge stays left-aligned (conventional - badge left edges line up) but
   gets a left inset so it sits a touch further from the progress %, and the Issues
   count is left-aligned (below) so the two right columns read as one tight cluster
   instead of a wide STATUS - ISSUES void. The 104px track leaves room for the inset
   while still fitting the widest label ("In Progress").
 */
.tasks-table-grid .td-status,
.tasks-table-grid .th-status {
    padding-left: 18px;
}

/* Name gets the most room (3fr) instead of losing it to a 6px bar; block-level
   so `text-overflow: ellipsis` renders the ... on overflow (a flex container
   hard-clips with no ellipsis). Full name stays recoverable via the `title`
   tooltip on hover.
 */
.tasks-table-grid .td-name {
    display: block;
}

/* Issues count: left-aligned so it sits close to the Status column (tightens the
   right side instead of pinning the number to the far edge); tabular figures keep
   digit widths even. The progress % below stays right-aligned against its bar. */
.tasks-table-grid .th-issues,
.tasks-table-grid .td-issues {
    width: auto;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.tasks-table-grid .td-progress-pct {
    font-variant-numeric: tabular-nums;
}

.td-time, .td-estimate {
    width: 70px;
    text-align: right;
    flex-shrink: 0;
    font-size: 14px;
    color: var(--text-muted);
}

.status-analyzing {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.status-todo {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

/* Task expanded content */
.task-expanded-content {
    padding: 8px 12px 12px 32px;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.task-expanded-header {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.task-expanded-issue {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-size: 14px;
}

.issue-id-badge {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(59, 130, 246, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

.issue-title-inline {
    flex: 1;
    color: var(--text-primary);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.issue-status {
    font-size: 14px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

.issue-status.done {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.issue-status.working {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.issue-status.open {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.issue-status.failed {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.issue-status.todo {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.issue-status.queued {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.issue-status.paused {
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
}

.issue-pr-link {
    font-size: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* --- Issues Tab --- */
.issues-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.issues-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Dropup menu */
.dropup-container {
    position: relative;
}

.dropup-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dropup-arrow {
    font-size: 14px;
    transition: transform var(--transition-speed);
}

.dropup-arrow.open {
    transform: rotate(180deg);
}

.dropup-menu {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
    z-index: 20;
    display: flex;
    flex-direction: column;
}

.dropup-item {
    display: block;
    width: 100%;
    padding: 7px 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-speed), color var(--transition-speed);
}

.dropup-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dropup-item.active {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent);
}

.issues-sync-note {
    font-size: 14px;
    color: var(--text-muted);
}

.issues-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.issues-table-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-secondary);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--border);
}

.ith-id { width: 55px; flex-shrink: 0; }
.ith-title { flex: 2; min-width: 0; }
.ith-task { flex: 1; min-width: 0; }
.ith-status { width: 90px; flex-shrink: 0; }
.ith-pr { width: 65px; flex-shrink: 0; }
.ith-updated { width: 80px; flex-shrink: 0; }

.issue-row {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-speed);
}

.issue-row:last-child {
    border-bottom: none;
}

.issue-row:hover {
    background: var(--bg-secondary);
}

.issue-row.done {
    opacity: 0.7;
}

.itd-id { width: 55px; flex-shrink: 0; }
.itd-title { flex: 2; min-width: 0; color: var(--text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.itd-task { flex: 1; min-width: 0; color: var(--text-muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.itd-status { width: 90px; flex-shrink: 0; display: flex; align-items: center; }
.itd-pr { width: 65px; flex-shrink: 0; font-size: 14px; color: var(--text-muted); }
.itd-updated { width: 80px; flex-shrink: 0; font-size: 14px; color: var(--text-muted); }

/* --- Deployment Tab --- */
.deployment-tab {
    padding: 12px;
    display: grid;
    gap: 12px;
}

.deployment-tab-empty {
    padding: 0;
}

.deployment-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
}

.deployment-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.deployment-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.deployment-url {
    display: inline-block;
    font-size: 14px;
    color: var(--accent);
    text-decoration: none;
    word-break: break-all;
}

.deployment-url:hover {
    text-decoration: underline;
}

.deployment-address-list {
    display: grid;
    gap: 8px;
}

.deployment-address-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.deployment-address-label {
    flex: 0 0 106px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.deployment-address-row .deployment-url {
    min-width: 0;
}

@media (max-width: 520px) {
    .deployment-address-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }
}
.deployment-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.deployment-progress .progress-bar {
    flex: 1;
}
.deployment-progress-pct {
    font-size: 14px;
    color: var(--text-muted);
    min-width: 32px;
    text-align: right;
}

.deployment-env-list {
    display: grid;
    gap: 10px;
}

.deployment-env-row {
    display: grid;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.deployment-env-row:first-child {
    padding-top: 0;
    border-top: 0;
}

.deployment-env-key {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.deployment-env-value {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Project Status Bar --- */
.project-status-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 8px;
}
.project-status-bar.working { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.project-status-bar.completed { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.project-status-bar.pending { background: rgba(148, 163, 184, 0.15); color: var(--text-muted); }
.project-workspace-toolbar {
    flex: 0 0 auto;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
}
.project-workspace-toolbar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.project-workspace-status-slot {
    min-width: 0;
    flex: 1 1 auto;
}
.project-workspace-status-slot .project-status-bar {
    width: 100%;
    margin-bottom: 0;
}
.project-status-bar-spacer {
    min-height: 36px;
}
.project-workspace-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}
.build-control-menu {
    position: relative;
    /* The popover sits below the trigger. Keep its 6px visual separation inside
       this hover target so crossing from Build to a menu item never fires the
       container's mouseleave. The negative margin keeps the toolbar height. */
    padding-bottom: 6px;
    margin-bottom: -6px;
}
.build-control-trigger {
    min-width: 36px;
    padding-inline: 10px;
    font-size: 20px;
    line-height: 1;
}
.build-control-popover {
    position: absolute;
    z-index: 40;
    top: 100%;
    right: 0;
    display: flex;
    min-width: 156px;
    padding: 4px;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}
.build-control-item {
    padding: 8px 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    font-size: 14px;
    cursor: pointer;
}
.build-control-item:hover:not(:disabled) { background: var(--bg-hover); }
.build-control-item:disabled { opacity: .45; cursor: default; }
.build-control-item.danger { color: #ef4444; }
.build-control-item.danger:disabled { color: var(--text-muted); }
.build-control-error { padding: 5px 7px; color: #ef4444; font-size: 12px; }
.project-workspace-toolbar > .deploy-action-error {
    display: block;
    margin: 6px 0 0 auto;
    text-align: right;
}
.project-workspace-toolbar > .deploy-credit-banner {
    margin: 8px 0 0;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.working { background: #22c55e; animation: pulse 2s infinite; }
.status-dot.completed { background: #22c55e; }
.status-dot.pending { background: var(--text-muted); }
.status-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-progress { margin-left: auto; font-size: inherit; color: inherit; white-space: nowrap; flex-shrink: 0; }
.issue-link { color: var(--accent); text-decoration: none; }
.issue-link:hover { text-decoration: underline; }

/* --- Project Log tab --- */
.log-tab { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; }
.log-filters { display: flex; gap: 6px; padding: 4px 0 10px; flex-wrap: wrap; }
.log-chip {
    font-size: 14px; padding: 3px 10px; border-radius: 999px;
    background: var(--bg-tertiary); color: var(--text-secondary);
    border: 1px solid var(--border); cursor: pointer;
}
.log-chip:hover { background: var(--bg-hover); color: var(--text-primary); }
.log-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.log-stream {
    flex: 1; min-height: 0; overflow-y: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px; line-height: 1.5;
    background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px;
    padding: 6px 0;
}
.log-empty {
    margin: 0; padding: 8px 12px;
    color: var(--text-tertiary); font-size: 14px;
}
.log-older, .chat-load-older {
    display: block; margin: 2px auto 8px; padding: 3px 12px;
    font-size: 14px; color: var(--text-secondary);
    background: var(--bg-tertiary); border: 1px solid var(--border);
    border-radius: 999px; cursor: pointer;
}
.log-older:hover:not(:disabled), .chat-load-older:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
.log-older:disabled, .chat-load-older:disabled { opacity: 0.6; cursor: default; }
/* "Jump to latest" re-arms chat auto-tail. Inline (not absolute) so it never
   overlaps the composer; shown only while scrolled up. */
.chat-jump {
    display: block; flex-shrink: 0; margin: 0 auto 4px; padding: 6px 14px;
    background: var(--accent); color: #fff; border: none; border-radius: 999px;
    font-size: 14px; cursor: pointer;
}
.chat-jump:hover { background: var(--accent-hover); }
.log-row {
    display: flex; align-items: baseline; gap: 8px;
    padding: 2px 12px; white-space: nowrap;
}
.log-row:hover { background: var(--bg-hover); }
.log-time { color: var(--text-muted); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.log-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; align-self: center; }
.log-dot-info { background: var(--text-muted); }
.log-dot-success { background: var(--success); }
.log-dot-warn { background: var(--warning); }
.log-dot-error { background: var(--danger); }
.log-badge {
    flex: 0 0 auto; font-size: 14px; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--text-secondary); background: var(--bg-tertiary);
    border-radius: 4px; padding: 0 5px;
}
.log-msg {
    flex: 1 1 auto; min-width: 0; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis;
}
.log-level-warn .log-msg { color: var(--warning); }
.log-level-error .log-msg { color: var(--danger); }
.log-issue {
    flex: 0 0 auto; color: var(--accent); background: none; border: none;
    cursor: pointer; font-family: inherit; font-size: inherit; padding: 0;
}
.log-issue:hover { text-decoration: underline; }
.log-jump {
    position: absolute; right: 14px; bottom: 14px;
    background: var(--accent); color: #fff; border: none; border-radius: 999px;
    padding: 6px 14px; font-size: 14px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.log-jump:hover { background: var(--accent-hover); }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* --- Deliverables Tab --- */
.deliverables-tab {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.deliverable-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    flex-wrap: wrap;
}

.deliverable-card.latest {
    border-color: var(--accent);
}

.deliverable-card.release {
    border-color: var(--success);
    background: rgba(34, 197, 94, 0.04);
}

.deliverables-section {
    margin-bottom: 16px;
}

.deliverables-section:last-child {
    margin-bottom: 0;
}

.deliverables-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.deliverables-count {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.deliverable-release-badge {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.deliverable-url.release {
    color: var(--success);
    font-weight: 600;
}

.delivery-dot.release {
    background: var(--success);
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.deliverable-empty {
    font-size: 14px;
    color: var(--text-muted);
    padding: 16px;
    text-align: center;
    background: var(--bg-secondary);
    border: 1px dashed var(--border);
    border-radius: 8px;
}

.deliverable-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.deliverable-version {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.deliverable-latest-badge {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent);
}

.deliverable-label {
    font-size: 14px;
    color: var(--text-muted);
}

.deliverable-url {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: var(--success);
    flex: 1;
    transition: opacity var(--transition-speed);
}

.deliverable-url:hover {
    opacity: 0.8;
}

.deliverable-updated {
    font-size: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* --- History Tab --- */
.history-tab {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 16px;
    border-left: 2px solid var(--border);
}

.history-entry {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    position: relative;
}

.history-time {
    width: 80px;
    flex-shrink: 0;
    font-size: 14px;
    color: var(--text-muted);
    text-align: right;
}

.history-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: 4px;
    flex-shrink: 0;
    position: relative;
}

.history-dot::before {
    content: "";
    position: absolute;
    left: -21px;
    top: 1px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 2px solid var(--border);
}

.history-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.history-action {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.history-detail {
    font-size: 14px;
    color: var(--text-muted);
}