#obs-ide {
    --ide-line: rgba(245, 239, 233, 0.14);
    --ide-line-strong: rgba(245, 239, 233, 0.22);
    --ide-panel: rgba(18, 21, 31, 0.94);
    --ide-panel-soft: rgba(11, 14, 22, 0.96);
    --ide-canvas: #080b12;
    --ide-shell-shadow: 0 28px 60px rgba(0, 0, 0, 0.28);
    --ide-scale: 1;
    --ide-font-label: calc(9px * var(--ide-scale));
    --ide-font-body: calc(12px * var(--ide-scale));
    --ide-font-copy: calc(12px * var(--ide-scale));
    --ide-font-title: calc(14px * var(--ide-scale));
    --ide-font-mono: calc(11px * var(--ide-scale));
}

#obs-ide[data-text-scale="small"] { --ide-scale: 0.94; }
#obs-ide[data-text-scale="medium"] { --ide-scale: 1; }
#obs-ide[data-text-scale="large"] { --ide-scale: 1.14; }
#obs-ide[data-text-scale="xlarge"] { --ide-scale: 1.28; }

#obs-ide.active {
    display: flex;
    flex-direction: column;
}

#obs-ide .ide-page-topbar {
    min-height: 72px;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    align-items: flex-end;
    position: relative;
    overflow: visible;
    z-index: 24;
}

#obs-ide .ide-topbar-actions {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-left: auto;
    overflow: visible;
}

#obs-ide .obs-report-issue-btn--ide {
    align-self: flex-end;
}

#obs-ide .ide-topbar-select-shell {
    position: relative;
    display: grid;
    align-content: end;
    gap: 6px;
    min-width: 124px;
    padding-top: 0;
}

#obs-ide .ide-topbar-select-label {
    display: block;
    width: 100%;
    color: var(--text-3, #9399ad);
    font-size: var(--ide-font-label);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
}

#obs-ide .ide-topbar-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-height: 40px;
    width: 100%;
    padding: 0 38px 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(24, 27, 39, 0.96), rgba(16, 18, 28, 0.98)),
        radial-gradient(circle at top right, rgba(110, 95, 255, 0.12), transparent 44%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23f5efe9' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center, center, right 14px center;
    background-size: auto, auto, 10px 6px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 10px 24px rgba(0, 0, 0, 0.18);
    color: var(--text-1, #f5efe9);
    font-family: inherit;
    font-size: var(--ide-font-body);
    font-weight: 700;
    color-scheme: dark;
    cursor: pointer;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

#obs-ide .ide-topbar-select:hover {
    border-color: rgba(255, 255, 255, 0.16);
}

#obs-ide .ide-topbar-select:focus-visible {
    border-color: rgba(110, 95, 255, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 1px rgba(110, 95, 255, 0.2),
        0 12px 26px rgba(0, 0, 0, 0.24);
}

#obs-ide .ide-topbar-select option {
    background: #11141b;
    color: rgba(245, 239, 233, 0.94);
}

#obs-ide .ide-topbar-select option:disabled {
    background: #11141b;
    color: rgba(245, 239, 233, 0.42);
}

#obs-ide .ide-topbar-model-picker {
    position: relative;
    z-index: 40;
}

#obs-ide .ide-topbar-model-picker .obs-model-trigger {
    width: clamp(280px, 24vw, 360px);
    min-width: 280px;
    min-height: 52px;
    align-self: flex-end;
    padding: 12px 16px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(23, 26, 38, 0.98), rgba(12, 15, 24, 0.98)),
        radial-gradient(circle at top right, var(--accent-soft-10), transparent 40%);
    border: 1px solid var(--accent-soft-22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 16px 32px rgba(0, 0, 0, 0.22);
}

#obs-ide .ide-topbar-select,
#obs-ide #obs-ide-credits-chip {
    align-self: flex-end;
}

#obs-ide #obs-ide-model-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    width: min(430px, calc(100vw - 32px));
    max-height: min(64vh, 520px);
    box-sizing: border-box;
    padding: 12px;
    overflow: auto;
    z-index: 80;
    border-radius: 14px;
}

#obs-ide .ide-content-area {
    display: flex;
    flex: 1;
    min-height: 0;
    padding: 6px 8px 10px;
}

#obs-ide .ide-shell-frame {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    min-height: 0;
    height: 100%;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--ide-line-strong);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(18, 21, 31, 0.98), rgba(11, 14, 22, 0.98));
    box-shadow: var(--ide-shell-shadow);
}

#obs-ide .ide-frame-toolbar {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.16fr)
        repeat(4, minmax(88px, auto))
        minmax(156px, auto)
        minmax(220px, 0.92fr)
        minmax(108px, auto)
        minmax(148px, 0.58fr) !important;
    gap: 10px !important;
    align-items: start !important;
    justify-content: stretch !important;
    grid-auto-rows: minmax(52px, auto);
    width: 100%;
}

#obs-ide .ide-frame-toolbar > * {
    min-width: 0;
}

#obs-ide .ide-panel-section {
    border: 1px solid var(--ide-line);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--ide-panel), var(--ide-panel-soft));
}

#obs-ide .ide-top-tile {
    min-width: 0;
    padding: 8px 14px !important;
    box-sizing: border-box;
}

#obs-ide .ide-top-tile--project {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 3px;
    min-height: 70px !important;
    height: auto !important;
    padding: 7px 14px 8px !important;
    align-self: stretch;
    max-width: none !important;
    overflow: hidden;
}

#obs-ide .ide-top-tile--diff,
#obs-ide .ide-top-tile--tokens {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 52px !important;
    height: 52px !important;
    align-self: start !important;
}

#obs-ide .ide-top-tile--diff {
    position: relative;
    isolation: isolate;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5px;
    min-height: 58px !important;
    height: auto !important;
    padding: 6px 14px 8px !important;
    max-width: none !important;
    overflow: hidden;
    border-color: color-mix(in srgb, rgba(110, 182, 255, 0.34) 46%, var(--ide-line-strong));
    background:
        radial-gradient(circle at top right, rgba(116, 86, 255, 0.11), transparent 34%),
        linear-gradient(180deg, rgba(18, 21, 30, 0.98), rgba(10, 13, 21, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 24px rgba(6, 10, 20, 0.18);
}

#obs-ide .ide-top-tile--diff .ide-section-label {
    color: color-mix(in srgb, #a9cfff 50%, var(--text-3, #9399ad) 50%);
}

#obs-ide .ide-top-tile--tokens {
    position: relative;
    isolation: isolate;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
    min-height: 58px !important;
    height: auto !important;
    padding: 6px 14px 7px !important;
    overflow: hidden;
    border-color: color-mix(in srgb, rgba(255, 97, 132, 0.52) 42%, var(--ide-line-strong));
    background:
        radial-gradient(circle at top right, rgba(255, 126, 162, 0.16), transparent 36%),
        linear-gradient(180deg, rgba(57, 20, 30, 0.96), rgba(31, 16, 24, 0.95));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 24px rgba(26, 8, 16, 0.18);
}

#obs-ide .ide-top-tile--tokens .ide-section-label {
    color: color-mix(in srgb, #ffb1c0 52%, var(--text-3, #9399ad) 48%);
}

#obs-ide .ide-section-label {
    color: var(--text-3, #9399ad);
    font-size: var(--ide-font-label);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

#obs-ide .ide-project-name {
    margin-top: 1px;
    color: var(--text-1, #f5efe9);
    font-size: var(--ide-font-title);
    font-weight: 800;
    line-height: 1.18;
    min-height: calc(16px * var(--ide-scale));
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#obs-ide .ide-project-path {
    margin-top: 1px;
    color: var(--text-2, #c7ccda);
    font-size: var(--ide-font-body);
    line-height: 1.25;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#obs-ide .ide-project-path.is-hidden {
    display: none;
}

#obs-ide .ide-project-runtime-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
    min-width: 0;
}

#obs-ide .ide-project-runtime-meta.is-hidden {
    display: none;
}

#obs-ide .ide-meta-chip {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.045);
    color: var(--text-2, #cfd5e4);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

#obs-ide .ide-meta-chip--source {
    border-color: rgba(98, 227, 175, 0.2);
    background: rgba(98, 227, 175, 0.08);
    color: color-mix(in srgb, #7cf0be 70%, white 16%);
}

#obs-ide .ide-meta-chip--runtime {
    border-color: rgba(117, 147, 255, 0.22);
    background: rgba(117, 147, 255, 0.08);
    color: color-mix(in srgb, #b9c9ff 74%, white 14%);
}

#obs-ide .ide-meta-chip--seat {
    border-color: rgba(255, 182, 112, 0.18);
    background: rgba(255, 182, 112, 0.08);
    color: color-mix(in srgb, #ffd19f 76%, white 12%);
}

#obs-ide .ide-diff-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

#obs-ide .ide-diff-pill,
#obs-ide .ide-diff-empty {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: nowrap;
}

#obs-ide .ide-diff-pill-value {
    color: var(--text-1, #f5efe9);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

#obs-ide .ide-diff-pill-label {
    color: var(--text-3, #9399ad);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
}

#obs-ide .ide-diff-pill.is-positive {
    border-color: rgba(109, 248, 155, 0.22);
    background: linear-gradient(180deg, rgba(35, 84, 50, 0.44), rgba(14, 30, 22, 0.72));
}

#obs-ide .ide-diff-pill.is-positive .ide-diff-pill-value {
    color: #9af4bc;
}

#obs-ide .ide-diff-pill.is-accent {
    border-color: rgba(122, 182, 255, 0.22);
    background: linear-gradient(180deg, rgba(26, 48, 76, 0.44), rgba(12, 23, 38, 0.72));
}

#obs-ide .ide-diff-pill.is-accent .ide-diff-pill-value {
    color: #b7d7ff;
}

#obs-ide .ide-diff-pill.is-warm {
    border-color: rgba(255, 195, 122, 0.22);
    background: linear-gradient(180deg, rgba(70, 46, 23, 0.42), rgba(31, 21, 12, 0.72));
}

#obs-ide .ide-diff-pill.is-warm .ide-diff-pill-value {
    color: #ffd3a3;
}

#obs-ide .ide-diff-empty {
    color: var(--text-3, #9399ad);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Per-file diff breakdown rows */
#obs-ide .ide-diff-file-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    margin-top: 4px;
}

#obs-ide .ide-diff-file-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.4;
    background: rgba(255, 255, 255, 0.02);
    min-width: 0;
}

#obs-ide .ide-diff-file-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

#obs-ide .ide-diff-file-status {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

#obs-ide .ide-diff-file-status.is-added {
    background: rgba(78, 201, 120, 0.18);
    color: #7eeaa8;
    border: 1px solid rgba(78, 201, 120, 0.28);
}

#obs-ide .ide-diff-file-status.is-modified {
    background: rgba(100, 160, 255, 0.15);
    color: #a0c4ff;
    border: 1px solid rgba(100, 160, 255, 0.25);
}

#obs-ide .ide-diff-file-status.is-deleted {
    background: rgba(255, 120, 100, 0.15);
    color: #ffb3a0;
    border: 1px solid rgba(255, 120, 100, 0.25);
}

#obs-ide .ide-diff-file-path {
    flex: 1 1 0;
    min-width: 0;
    color: var(--text-2, #c8ccdb);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#obs-ide .ide-diff-file-counts {
    flex: 0 0 auto;
    display: flex;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
}

#obs-ide .ide-diff-file-adds {
    color: #7eeaa8;
}

#obs-ide .ide-diff-file-rems {
    color: #ffb3a0;
}

#obs-ide .ide-action-button,
#obs-ide .ide-chip-button,
#obs-ide .ide-history-close,
#obs-ide .ide-attach-button,
#obs-ide .ide-send-button,
#obs-ide .ide-autoscroll-button {
    appearance: none;
    border: 1px solid var(--ide-line-strong);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    color: var(--text-1, #f5efe9);
    cursor: pointer;
    font: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

#obs-ide .ide-action-button:hover,
#obs-ide .ide-chip-button:hover,
#obs-ide .ide-history-close:hover,
#obs-ide .ide-attach-button:hover,
#obs-ide .ide-send-button:hover,
#obs-ide .ide-autoscroll-button:hover {
    border-color: rgba(255, 255, 255, 0.32);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.03));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 18px rgba(0, 0, 0, 0.16);
    transform: translateY(-1px);
}

#obs-ide .ide-action-button {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 16px !important;
    font-size: 12px !important;
    font-weight: 800;
    letter-spacing: -0.01em;
    border-radius: 14px !important;
    align-self: start !important;
}

#obs-ide .ide-action-button--compact {
    min-width: 0;
}

#obs-ide .ide-action-button--play {
    background: linear-gradient(180deg, #40e57f 0%, #27bb5f 100%);
    border-color: rgba(109, 248, 155, 0.44);
    color: #041109;
    font-weight: 800;
    height: 52px;
    min-height: 52px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px rgba(23, 74, 42, 0.2);
}

#obs-ide .ide-action-button--play:hover {
    border-color: rgba(153, 255, 187, 0.62);
    background: linear-gradient(180deg, #54ed90 0%, #2bc466 100%);
}

#obs-ide .ide-action-button--wide {
    width: 100%;
    height: 34px;
    min-height: 34px;
}

#obs-ide .ide-mode-toggle {
    display: inline-grid;
    grid-auto-flow: column;
    gap: 6px;
    align-items: center;
    align-self: start;
    padding: 6px;
}

#obs-ide .ide-mode-button {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-2, #d7dcea);
    font-size: var(--ide-font-body);
    font-weight: 700;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

#obs-ide .ide-mode-button.is-active,
#obs-ide .ide-mode-button[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--accent, #47d47f) 46%, white 8%);
    background: color-mix(in srgb, var(--accent, #47d47f) 20%, rgba(255, 255, 255, 0.03));
    color: #eefcf3;
}

#obs-ide .ide-token-count {
    color: #fff2f4;
    max-width: 100%;
    font-size: clamp(18px, 1.35vw, 21px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.035em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

#obs-ide .ide-token-meta {
    max-width: 100%;
    color: color-mix(in srgb, #ff98b0 66%, white 16%);
    font-size: calc(8.5px * var(--ide-scale));
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#obs-ide .ide-frame-body {
    display: grid;
    grid-template-columns: minmax(220px, 0.24fr) minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    align-items: stretch;
}

#obs-ide .ide-left-rail {
    display: grid;
    grid-template-rows: auto minmax(190px, 0.8fr) minmax(180px, 1fr);
    gap: 0;
    min-height: 0;
}

#obs-ide .ide-rail-section {
    padding: 0 0 10px;
}

#obs-ide .ide-left-rail .ide-panel-section {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#obs-ide .ide-rail-section + .ide-rail-section {
    padding-top: 10px;
    border-top: 1px solid var(--ide-line);
}

#obs-ide .ide-rail-section--mascot {
    padding-top: 0 !important;
    border-top: 0 !important;
}

#obs-ide .ide-rail-section--tasks,
#obs-ide .ide-rail-section--mascot {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#obs-ide .ide-task-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    margin-top: 8px;
}

#obs-ide .ide-task-empty,
#obs-ide .ide-history-empty {
    color: var(--text-3, #9399ad);
    font-size: 13px;
    line-height: 1.55;
}

#obs-ide .ide-task-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px 6px 10px;
    border-left: 2px solid color-mix(in srgb, var(--accent, #47d47f) 65%, transparent);
    color: var(--text-2, #d3d7e4);
    font-size: 13px;
    line-height: 1.45;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.01);
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

#obs-ide .ide-task-item-mark {
    flex: 0 0 auto;
    width: 16px;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.45;
    opacity: 0.9;
}

#obs-ide .ide-task-item-title {
    flex: 1 1 auto;
}

#obs-ide .ide-task-item-badge {
    flex: 0 0 auto;
    padding: 0 6px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent, #47d47f) 18%, transparent);
    color: var(--text-2, #d3d7e4);
    font-size: 11px;
    line-height: 18px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* --- Stage 5 tick states ------------------------------------------------- */
#obs-ide .ide-task-item--done {
    border-left-color: #47d47f;
    background: color-mix(in srgb, #47d47f 10%, transparent);
    color: color-mix(in srgb, var(--text-2, #d3d7e4) 78%, #47d47f 22%);
}
#obs-ide .ide-task-item--done .ide-task-item-title {
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, #47d47f 80%, transparent);
    text-decoration-thickness: 1.5px;
}
#obs-ide .ide-task-item--done .ide-task-item-mark { color: #47d47f; }

#obs-ide .ide-task-item--active {
    border-left-color: #f2c15a;
    background: color-mix(in srgb, #f2c15a 9%, transparent);
    color: #f6d98a;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #f2c15a 25%, transparent);
}
#obs-ide .ide-task-item--active .ide-task-item-mark { color: #f2c15a; }

#obs-ide .ide-task-item--queued {
    border-left-color: color-mix(in srgb, var(--text-3, #9399ad) 60%, transparent);
    color: var(--text-3, #9399ad);
    opacity: 0.85;
}
#obs-ide .ide-task-item--queued .ide-task-item-mark { color: var(--text-3, #9399ad); }

#obs-ide .ide-task-item--blocked {
    border-left-color: #ff6b6b;
    background: color-mix(in srgb, #ff6b6b 10%, transparent);
    color: #ff9a9a;
}
#obs-ide .ide-task-item--blocked .ide-task-item-mark { color: #ff6b6b; }

#obs-ide .ide-mascot-stage {
    --mascot-stage-top: rgba(30, 28, 42, 0.38);
    --mascot-stage-mid: rgba(16, 19, 30, 0.2);
    --mascot-stage-bottom: rgba(8, 10, 18, 0.08);
    --mascot-stage-floor: rgba(86, 100, 148, 0.08);
    position: relative;
    flex: 1;
    min-height: 198px;
    overflow: hidden;
    isolation: isolate;
    pointer-events: auto;
    cursor: pointer;
    border: 1px solid rgba(108, 119, 151, 0.1);
    border-radius: 20px;
    background:
        radial-gradient(circle at 16% 14%, rgba(255, 255, 255, 0.035), transparent 18%),
        radial-gradient(circle at 82% 0%, rgba(139, 88, 255, 0.08), transparent 34%),
        linear-gradient(180deg, var(--mascot-stage-top) 0%, var(--mascot-stage-mid) 52%, var(--mascot-stage-bottom) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        inset 0 -24px 54px rgba(6, 8, 16, 0.2),
        0 8px 18px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px) saturate(1.02);
    transition: box-shadow 160ms ease, border-color 160ms ease;
}

#obs-ide .ide-mascot-stage:hover {
    border-color: rgba(122, 136, 175, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        inset 0 -26px 58px rgba(6, 8, 16, 0.22),
        0 10px 22px rgba(0, 0, 0, 0.1);
}

#obs-ide .ide-mascot-stage::before,
#obs-ide .ide-mascot-stage::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

#obs-ide .ide-mascot-stage::before {
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 24%),
        radial-gradient(circle at 50% -8%, rgba(255, 255, 255, 0.045), transparent 42%);
    z-index: 0;
}

#obs-ide .ide-mascot-stage::after {
    left: 18px;
    right: 18px;
    bottom: 12px;
    height: 28px;
    border-radius: 999px;
    background: radial-gradient(circle at center, var(--mascot-stage-floor), transparent 72%);
    z-index: 0;
}

#obs-ide .ide-mascot-stage[data-stage-theme="park"] {
    --mascot-stage-top: rgba(42, 72, 50, 0.34);
    --mascot-stage-mid: rgba(18, 30, 21, 0.2);
    --mascot-stage-bottom: rgba(8, 14, 10, 0.08);
    --mascot-stage-floor: rgba(120, 214, 131, 0.1);
}

#obs-ide .ide-mascot-stage[data-stage-theme="shower"] {
    --mascot-stage-top: rgba(55, 80, 102, 0.34);
    --mascot-stage-mid: rgba(21, 31, 43, 0.22);
    --mascot-stage-bottom: rgba(8, 12, 18, 0.08);
    --mascot-stage-floor: rgba(113, 182, 226, 0.08);
}

#obs-ide .ide-mascot-stage[data-stage-theme="lounge"] {
    --mascot-stage-top: rgba(74, 45, 71, 0.32);
    --mascot-stage-mid: rgba(28, 18, 30, 0.2);
    --mascot-stage-bottom: rgba(10, 9, 16, 0.08);
    --mascot-stage-floor: rgba(210, 135, 188, 0.08);
}

#obs-ide .ide-mascot-stage[data-stage-theme="rooftop"] {
    --mascot-stage-top: rgba(20, 30, 56, 0.32);
    --mascot-stage-mid: rgba(12, 18, 31, 0.2);
    --mascot-stage-bottom: rgba(6, 8, 14, 0.08);
    --mascot-stage-floor: rgba(108, 132, 255, 0.08);
}

#obs-ide .ide-mascot-overlay {
    position: absolute;
    left: 2px;
    bottom: 2px;
    width: 82px;
    height: 82px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    image-rendering: pixelated;
    filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.22));
    transform: translate(var(--mascot-x, 0px), var(--mascot-y, 0px)) scale(var(--mascot-scale-x, 1), var(--mascot-scale-y, 1));
    transform-origin: center bottom;
    will-change: transform;
    z-index: 3;
    pointer-events: auto;
    cursor: pointer;
    transition: filter 160ms ease;
}

#obs-ide .ide-mascot-bubble {
    --mascot-bubble-bg: linear-gradient(180deg, rgba(18, 22, 34, 0.34), rgba(8, 10, 18, 0.14));
    --mascot-bubble-border: rgba(145, 156, 194, 0.09);
    position: absolute;
    left: var(--bubble-x, 88px);
    bottom: var(--bubble-bottom, 92px);
    z-index: 4;
    max-width: var(--bubble-max-width, 172px);
    padding: 7px 10px 8px;
    border: 1px solid var(--mascot-bubble-border);
    border-radius: 16px 16px 16px 12px;
    background: var(--mascot-bubble-bg);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px) saturate(1.03);
    color: rgba(247, 242, 236, 0.88);
    font-size: 10.75px;
    font-weight: 620;
    line-height: 1.38;
    letter-spacing: 0.01em;
    white-space: normal;
    pointer-events: none;
    transform: translateX(-50%);
    animation: ide-mascot-bubble-float 5.6s ease-in-out infinite;
}

#obs-ide .ide-mascot-bubble::before,
#obs-ide .ide-mascot-bubble::after {
    content: "";
    position: absolute;
}

#obs-ide .ide-mascot-bubble::before {
    left: 10px;
    right: 10px;
    top: 6px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent);
    opacity: 0.16;
}

#obs-ide .ide-mascot-bubble::after {
    left: var(--bubble-tail-offset, 36px);
    bottom: -3px;
    width: 8px;
    height: 8px;
    border-right: 1px solid var(--mascot-bubble-border);
    border-bottom: 1px solid var(--mascot-bubble-border);
    background: var(--mascot-bubble-bg);
    transform: translateX(-50%) rotate(45deg);
}

#obs-ide .ide-mascot-bubble[hidden] {
    display: none !important;
}

#obs-ide .ide-mascot-bubble[data-tone="park"] {
    --mascot-bubble-bg: linear-gradient(180deg, rgba(18, 34, 22, 0.32), rgba(9, 18, 11, 0.14));
    --mascot-bubble-border: rgba(122, 212, 145, 0.1);
}

#obs-ide .ide-mascot-bubble[data-tone="shower"] {
    --mascot-bubble-bg: linear-gradient(180deg, rgba(18, 34, 48, 0.3), rgba(9, 16, 24, 0.12));
    --mascot-bubble-border: rgba(114, 188, 236, 0.1);
}

#obs-ide .ide-mascot-bubble[data-tone="lounge"] {
    --mascot-bubble-bg: linear-gradient(180deg, rgba(38, 23, 38, 0.3), rgba(16, 10, 17, 0.12));
    --mascot-bubble-border: rgba(208, 141, 190, 0.1);
}

#obs-ide .ide-mascot-bubble[data-tone="rooftop"] {
    --mascot-bubble-bg: linear-gradient(180deg, rgba(18, 25, 44, 0.3), rgba(8, 10, 19, 0.12));
    --mascot-bubble-border: rgba(120, 140, 255, 0.1);
}

#obs-ide .ide-mascot-prop {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.64;
}

#obs-ide .ide-mascot-scene,
#obs-ide .ide-mascot-scene > div {
    position: absolute;
}

#obs-ide .ide-mascot-scene {
    inset: 0;
    opacity: 0.94;
    filter: saturate(0.74) brightness(0.98);
}

#obs-ide .ide-mascot-monitor {
    left: 18px;
    top: 40px;
    width: 68px;
    height: 42px;
    border: 1px solid rgba(118, 144, 204, 0.22);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(28, 44, 70, 0.72), rgba(9, 16, 28, 0.9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#obs-ide .ide-mascot-monitor::before,
#obs-ide .ide-mascot-monitor::after,
#obs-ide .ide-mascot-crate::before,
#obs-ide .ide-mascot-curtain::before,
#obs-ide .ide-mascot-bench::before,
#obs-ide .ide-mascot-bench::after,
#obs-ide .ide-mascot-couch::before,
#obs-ide .ide-mascot-couch::after,
#obs-ide .ide-mascot-lamp::before,
#obs-ide .ide-mascot-side-table::before,
#obs-ide .ide-mascot-plant::before {
    content: "";
    position: absolute;
}

#obs-ide .ide-mascot-monitor::before {
    left: 9px;
    right: 9px;
    top: 8px;
    bottom: 9px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(56, 236, 205, 0.36), rgba(80, 124, 255, 0.12));
}

#obs-ide .ide-mascot-monitor::after {
    left: 30px;
    bottom: -15px;
    width: 18px;
    height: 16px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(180deg, rgba(122, 132, 160, 0.9), rgba(73, 82, 108, 0.98));
}

#obs-ide .ide-mascot-monitor-glow {
    left: 28px;
    top: 48px;
    width: 50px;
    height: 22px;
    border-radius: 14px;
    background: radial-gradient(circle at center, rgba(74, 244, 219, 0.28), rgba(85, 123, 255, 0.08) 70%, transparent 76%);
    filter: blur(5px);
    animation: ide-mascot-monitor-glow 3.4s ease-in-out infinite;
}

#obs-ide .ide-mascot-crate {
    right: 24px;
    bottom: 24px;
    width: 40px;
    height: 26px;
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(160, 104, 62, 0.82), rgba(90, 54, 31, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 238, 215, 0.12);
}

#obs-ide .ide-mascot-crate::before {
    left: 8px;
    right: 8px;
    top: 13px;
    height: 2px;
    background: rgba(250, 214, 168, 0.7);
    box-shadow: 0 -8px 0 rgba(250, 214, 168, 0.35), 0 8px 0 rgba(250, 214, 168, 0.35);
}

#obs-ide .ide-mascot-cable {
    left: 86px;
    bottom: 18px;
    width: 82px;
    height: 28px;
    border-left: 2px solid rgba(104, 117, 148, 0.28);
    border-bottom: 2px solid rgba(104, 117, 148, 0.28);
    border-radius: 0 0 0 22px;
    opacity: 0.68;
}

#obs-ide .ide-mascot-led {
    top: 18px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    box-shadow: 0 0 10px currentColor;
}

#obs-ide .ide-mascot-led--one {
    right: 28px;
    color: rgba(92, 248, 186, 0.92);
    background: currentColor;
}

#obs-ide .ide-mascot-led--two {
    right: 16px;
    color: rgba(255, 138, 186, 0.92);
    background: currentColor;
}

#obs-ide .ide-mascot-sun {
    top: 16px;
    right: 18px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 35%, rgba(255, 248, 199, 0.98), rgba(255, 197, 94, 0.92) 68%, rgba(255, 141, 74, 0.18) 100%);
    box-shadow: 0 0 18px rgba(255, 197, 94, 0.22);
    animation: ide-mascot-pulse 4s ease-in-out infinite;
}

#obs-ide .ide-mascot-cloud {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    box-shadow: 10px -5px 0 4px rgba(255, 255, 255, 0.46), 24px 0 0 2px rgba(255, 255, 255, 0.38);
    animation: ide-mascot-cloud-drift 8s ease-in-out infinite;
}

#obs-ide .ide-mascot-cloud--one {
    top: 28px;
    left: 20px;
    width: 42px;
    height: 14px;
}

#obs-ide .ide-mascot-cloud--two {
    top: 54px;
    left: 92px;
    width: 36px;
    height: 12px;
    opacity: 0.9;
    animation-duration: 10s;
}

#obs-ide .ide-mascot-hill {
    border-radius: 50%;
}

#obs-ide .ide-mascot-hill--back {
    left: -30px;
    bottom: 42px;
    width: 160px;
    height: 68px;
    background: linear-gradient(180deg, rgba(87, 161, 97, 0.56), rgba(29, 78, 40, 0.8));
}

#obs-ide .ide-mascot-hill--front {
    right: -34px;
    bottom: 28px;
    width: 190px;
    height: 76px;
    background: linear-gradient(180deg, rgba(61, 133, 74, 0.62), rgba(18, 56, 26, 0.86));
}

#obs-ide .ide-mascot-track {
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 28px;
    border-radius: 999px 999px 0 0;
    background:
        linear-gradient(180deg, rgba(250, 233, 214, 0.1), transparent 44%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 10px, transparent 10px 20px),
        linear-gradient(180deg, rgba(79, 92, 116, 0.56), rgba(19, 23, 31, 0.78));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#obs-ide .ide-mascot-bench {
    left: 108px;
    bottom: 44px;
    width: 52px;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(177, 121, 74, 0.7), rgba(101, 61, 34, 0.82));
}

#obs-ide .ide-mascot-bench::before {
    left: 4px;
    width: 50px;
    top: -12px;
    height: 8px;
    border-radius: 999px;
    background: inherit;
}

#obs-ide .ide-mascot-bench::after {
    left: 12px;
    width: 4px;
    bottom: -16px;
    height: 16px;
    background: rgba(91, 57, 33, 0.98);
    box-shadow: 28px 0 0 rgba(91, 57, 33, 0.98);
}

#obs-ide .ide-mascot-flower {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #ff97be;
    box-shadow: 3px 0 0 #ffd36f, -3px 0 0 #8fffb3, 0 -3px 0 #f6f3bb;
    animation: ide-mascot-flower-sway 3.4s ease-in-out infinite;
}

#obs-ide .ide-mascot-flower::after {
    left: 3px;
    top: 7px;
    width: 2px;
    height: 16px;
    border-radius: 999px;
    background: rgba(88, 178, 95, 0.92);
}

#obs-ide .ide-mascot-flower--one {
    left: 28px;
    bottom: 56px;
}

#obs-ide .ide-mascot-flower--two {
    left: 66px;
    bottom: 48px;
    animation-delay: 0.8s;
}

#obs-ide .ide-mascot-tile-wall {
    left: 38%;
    right: 8px;
    top: 8px;
    bottom: 30px;
    border-radius: 24px 18px 28px 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 18%),
        linear-gradient(90deg, rgba(11, 15, 22, 0), rgba(17, 26, 36, 0.18) 22%, rgba(17, 26, 36, 0.34) 100%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 26px),
        linear-gradient(180deg, rgba(88, 134, 168, 0.2), rgba(24, 37, 50, 0.18));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    opacity: 0.58;
}

#obs-ide .ide-mascot-shower-rod {
    left: 46%;
    right: 18px;
    top: 22px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(197, 214, 232, 0.68), rgba(131, 153, 180, 0.78));
    opacity: 0.84;
}

#obs-ide .ide-mascot-curtain {
    top: 30px;
    right: 16px;
    width: 68px;
    height: 108px;
    border-radius: 18px 18px 10px 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 14%),
        repeating-linear-gradient(90deg, rgba(248, 251, 255, 0.4) 0 9px, rgba(219, 228, 244, 0.34) 9px 18px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 14px rgba(0, 0, 0, 0.04);
    animation: ide-mascot-curtain-sway 6.4s ease-in-out infinite;
    opacity: 0.62;
}

#obs-ide .ide-mascot-curtain::before {
    left: 10px;
    right: 12px;
    top: 0;
    bottom: 0;
    background: repeating-linear-gradient(90deg, rgba(120, 153, 191, 0.1) 0 2px, transparent 2px 16px);
}

#obs-ide .ide-mascot-shower-head {
    top: 36px;
    right: 84px;
    width: 18px;
    height: 10px;
    border-radius: 10px 10px 14px 14px;
    background: linear-gradient(180deg, rgba(199, 214, 228, 0.72), rgba(118, 135, 157, 0.8));
}

#obs-ide .ide-mascot-water {
    top: 50px;
    width: 5px;
    height: 92px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(200, 244, 255, 0.02), rgba(126, 214, 255, 0.28), rgba(126, 214, 255, 0.02));
    filter: blur(0.3px);
    animation: ide-mascot-water-fall 2.2s linear infinite;
}

#obs-ide .ide-mascot-water--one {
    right: 90px;
}

#obs-ide .ide-mascot-water--two {
    right: 80px;
    animation-delay: 0.55s;
}

#obs-ide .ide-mascot-steam {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2), transparent 70%);
    filter: blur(3px);
    opacity: 0;
    animation: ide-mascot-steam-rise 3.8s ease-in infinite;
}

#obs-ide .ide-mascot-steam--one {
    right: 96px;
    bottom: 76px;
}

#obs-ide .ide-mascot-steam--two {
    right: 126px;
    bottom: 58px;
    animation-delay: 1.05s;
}

#obs-ide .ide-mascot-steam--three {
    right: 60px;
    bottom: 52px;
    animation-delay: 2.1s;
}

#obs-ide .ide-mascot-bath-mat {
    left: 84px;
    right: 18px;
    bottom: 12px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(156, 220, 255, 0.28), rgba(74, 134, 177, 0.36));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#obs-ide .ide-mascot-rug {
    left: 24px;
    right: 18px;
    bottom: 10px;
    height: 36px;
    border-radius: 999px;
    background: radial-gradient(circle at center, rgba(255, 164, 207, 0.14), rgba(84, 42, 76, 0.5) 72%, rgba(29, 14, 29, 0.72));
}

#obs-ide .ide-mascot-couch {
    left: 62px;
    bottom: 34px;
    width: 104px;
    height: 40px;
    border-radius: 22px 22px 14px 14px;
    background: linear-gradient(180deg, rgba(232, 166, 197, 0.62), rgba(126, 65, 104, 0.78));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

#obs-ide .ide-mascot-couch::before {
    left: 14px;
    right: 14px;
    top: -18px;
    height: 26px;
    border-radius: 18px 18px 6px 6px;
    background: rgba(150, 76, 120, 0.9);
}

#obs-ide .ide-mascot-couch::after {
    left: 18px;
    right: 18px;
    bottom: 8px;
    height: 2px;
    background: rgba(255, 228, 240, 0.24);
    box-shadow: 26px 0 0 rgba(255, 228, 240, 0.24), 52px 0 0 rgba(255, 228, 240, 0.24);
}

#obs-ide .ide-mascot-side-table {
    right: 34px;
    bottom: 36px;
    width: 22px;
    height: 28px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(162, 104, 71, 0.94), rgba(84, 51, 32, 0.98));
}

#obs-ide .ide-mascot-side-table::before {
    left: 6px;
    right: 6px;
    bottom: -16px;
    height: 16px;
    background: rgba(90, 55, 37, 0.96);
    box-shadow: 6px 0 0 rgba(90, 55, 37, 0.96);
}

#obs-ide .ide-mascot-lamp {
    right: 22px;
    bottom: 64px;
    width: 6px;
    height: 44px;
    border-radius: 999px;
    background: rgba(184, 160, 202, 0.84);
}

#obs-ide .ide-mascot-lamp::before {
    left: -16px;
    top: -18px;
    width: 40px;
    height: 24px;
    border-radius: 18px 18px 10px 10px;
    background: linear-gradient(180deg, rgba(255, 226, 179, 0.96), rgba(201, 133, 88, 0.92));
    box-shadow: 0 0 22px rgba(255, 211, 155, 0.22);
}

#obs-ide .ide-mascot-plant {
    left: 24px;
    bottom: 34px;
    width: 22px;
    height: 24px;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(180deg, rgba(161, 106, 63, 0.96), rgba(84, 50, 29, 0.98));
}

#obs-ide .ide-mascot-plant::before {
    left: -10px;
    top: -30px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 18px 18px, rgba(117, 255, 170, 0.94) 0 8px, transparent 9px),
        radial-gradient(circle at 28px 10px, rgba(79, 214, 130, 0.92) 0 8px, transparent 9px),
        radial-gradient(circle at 10px 30px, rgba(102, 238, 154, 0.92) 0 8px, transparent 9px),
        radial-gradient(circle at 32px 30px, rgba(84, 220, 138, 0.9) 0 8px, transparent 9px);
    animation: ide-mascot-flower-sway 4s ease-in-out infinite;
}

#obs-ide .ide-mascot-moon {
    top: 18px;
    right: 24px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 35%, rgba(255, 252, 222, 0.98), rgba(220, 225, 255, 0.88) 68%, transparent 72%);
    box-shadow: 0 0 16px rgba(190, 201, 255, 0.16);
}

#obs-ide .ide-mascot-star {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 250, 221, 0.95);
    animation: ide-mascot-twinkle 2.2s ease-in-out infinite;
}

#obs-ide .ide-mascot-star--one {
    top: 30px;
    left: 28px;
}

#obs-ide .ide-mascot-star--two {
    top: 60px;
    left: 82px;
    animation-delay: 0.7s;
}

#obs-ide .ide-mascot-star--three {
    top: 44px;
    left: 138px;
    animation-delay: 1.2s;
}

#obs-ide .ide-mascot-skyline {
    left: 0;
    right: 0;
    bottom: 18px;
    height: 50px;
    background:
        linear-gradient(180deg, rgba(87, 103, 168, 0.08), transparent 26%),
        repeating-linear-gradient(
            90deg,
            rgba(30, 38, 63, 0.96) 0 16px,
            rgba(16, 22, 40, 0.98) 16px 26px,
            rgba(44, 52, 82, 0.96) 26px 42px
        );
    mask-image: linear-gradient(180deg, transparent, black 22%);
    opacity: 0.68;
}

#obs-ide .ide-mascot-ledge {
    left: 18px;
    right: 18px;
    bottom: 10px;
    height: 16px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(111, 122, 168, 0.18), rgba(31, 36, 56, 0.62));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

@keyframes ide-mascot-bubble-float {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-1px);
    }
}

@keyframes ide-mascot-cloud-drift {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(6px);
    }
}

@keyframes ide-mascot-monitor-glow {
    0%,
    100% {
        opacity: 0.45;
    }
    50% {
        opacity: 0.9;
    }
}

@keyframes ide-mascot-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.92;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes ide-mascot-flower-sway {
    0%,
    100% {
        transform: rotate(-1deg);
    }
    50% {
        transform: rotate(2deg);
    }
}

@keyframes ide-mascot-curtain-sway {
    0%,
    100% {
        transform: translateX(0) skewX(0deg);
    }
    50% {
        transform: translateX(-1px) skewX(-0.6deg);
    }
}

@keyframes ide-mascot-water-fall {
    0% {
        transform: translateY(-4px);
        opacity: 0.14;
    }
    50% {
        opacity: 0.42;
    }
    100% {
        transform: translateY(12px);
        opacity: 0.08;
    }
}

@keyframes ide-mascot-steam-rise {
    0% {
        transform: translateY(8px) scale(0.9);
        opacity: 0;
    }
    30% {
        opacity: 0.2;
    }
    100% {
        transform: translateY(-14px) scale(1.04);
        opacity: 0;
    }
}

@keyframes ide-mascot-twinkle {
    0%,
    100% {
        transform: scale(0.9);
        opacity: 0.38;
    }
    50% {
        transform: scale(1.16);
        opacity: 1;
    }
}

#obs-ide .ide-main-stage {
    min-width: 0;
    min-height: 0;
}

#obs-ide .ide-session-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
    gap: 8px;
    height: 100%;
    min-height: 0;
    padding: 10px;
}

#obs-ide .ide-session-header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 0;
    padding-bottom: 4px;
}

#obs-ide .ide-session-title-label {
    color: var(--text-1, #f5efe9);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
}

#obs-ide .ide-session-title {
    margin-top: 2px;
    color: var(--text-2, #c9cedd);
    font-size: 10px;
    line-height: 1.45;
}

#obs-ide .ide-session-context {
    margin-top: 5px;
    color: color-mix(in srgb, var(--text-3, #9399ad) 74%, white 12%);
    font-size: 10px;
    line-height: 1.35;
}

#obs-ide .ide-session-context.is-hidden {
    display: none;
}

#obs-ide .ide-session-status-panel {
    min-width: 168px;
    max-width: 280px;
    text-align: right;
}

#obs-ide .ide-session-status-copy {
    margin-top: 3px;
    color: color-mix(in srgb, var(--accent, #47d47f) 72%, white 10%);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
}

#obs-ide .ide-session-status-detail {
    margin-top: 4px;
    color: color-mix(in srgb, var(--text-3, #9399ad) 76%, white 14%);
    font-size: 10px;
    line-height: 1.3;
}

#obs-ide .ide-session-status-detail.is-hidden {
    display: none;
}

#obs-ide .ide-session-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    margin-top: 5px;
    padding: 0 8px;
    border: 1px solid var(--ide-line-strong);
    border-radius: 999px;
    color: var(--text-1, #f5efe9);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#obs-ide .ide-session-body {
    min-height: 0;
    min-width: 0;
    height: auto;
    max-height: none;
    align-self: stretch;
}

#obs-ide .ide-agent-scroll {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(109, 123, 160, 0.18);
    border-radius: 16px;
    background:
        radial-gradient(circle at top center, rgba(173, 66, 178, 0.18), transparent 38%),
        radial-gradient(circle at 18% 18%, rgba(35, 232, 200, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(37, 10, 46, 0.78) 0%, rgba(17, 10, 32, 0.88) 32%, rgba(8, 10, 20, 0.98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        0 22px 40px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
}

#obs-ide .ide-agent-scroll::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 22%, rgba(33, 247, 226, 0.04) 72%, rgba(255, 255, 255, 0.02)),
        linear-gradient(90deg, rgba(133, 153, 190, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(133, 153, 190, 0.07) 1px, transparent 1px);
    background-size: 100% 100%, 72px 72px, 72px 72px;
    opacity: 0.34;
    pointer-events: none;
    z-index: 0;
}

#obs-ide .ide-agent-scroll::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 84px;
    height: 1px;
    background: linear-gradient(90deg, rgba(47, 225, 199, 0.55), rgba(188, 85, 249, 0.35), rgba(47, 225, 199, 0.08));
    pointer-events: none;
    z-index: 0;
}

#obs-ide .ide-agent-hud {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 14px;
    z-index: 2;
}

#obs-ide .ide-agent-hud-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

#obs-ide .ide-agent-hud-label {
    color: rgba(233, 225, 244, 0.72);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

#obs-ide .ide-agent-hud-meta {
    color: color-mix(in srgb, #9fe9e4 76%, white 16%);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

#obs-ide .ide-agent-body {
    flex: 1;
    min-height: 0;
    height: auto;
    overflow: auto;
    padding: 14px 16px 96px 14px;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    scrollbar-gutter: stable both-edges;
}

#obs-ide .ide-upgrade-empty {
    min-height: min(46vh, 420px);
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    padding: 44px 18px 120px;
    text-align: center;
    color: var(--text-1, #f5efe9);
}

#obs-ide .ide-upgrade-empty-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 11px;
    border: 1px solid rgba(255, 91, 132, 0.34);
    border-radius: 999px;
    background: rgba(255, 91, 132, 0.1);
    color: #ff8fab;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

#obs-ide .ide-upgrade-empty-title {
    max-width: 520px;
    color: color-mix(in srgb, var(--text-1, #f5efe9) 94%, white 6%);
    font-family: var(--font-ui, inherit);
    font-size: clamp(20px, 3vw, 34px);
    font-weight: 900;
    line-height: 1.08;
}

#obs-ide .ide-upgrade-empty-copy {
    max-width: 540px;
    color: rgba(236, 228, 239, 0.68);
    font-family: var(--font-ui, inherit);
    font-size: var(--ide-font-body);
    font-weight: 650;
    line-height: 1.45;
}

#obs-ide.is-view-only .ide-action-button:disabled,
#obs-ide.is-view-only .ide-chip-button:disabled,
#obs-ide.is-view-only .ide-attach-button:disabled,
#obs-ide.is-view-only .ide-send-button:disabled,
#obs-ide.is-view-only .ide-mode-button:disabled {
    cursor: not-allowed;
    opacity: 0.52;
}

#obs-ide .ide-agent-live-rail {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    z-index: 2;
    display: grid;
    gap: 7px;
    padding: 10px 12px 10px;
    border: 1px solid rgba(110, 228, 209, 0.18);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(12, 16, 28, 0.84), rgba(10, 12, 22, 0.94)),
        radial-gradient(circle at left center, rgba(74, 235, 213, 0.12), transparent 44%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 24px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
}

#obs-ide .ide-agent-live-rail.is-busy {
    border-color: rgba(94, 237, 200, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 12px 28px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(74, 235, 213, 0.05);
}

#obs-ide .ide-agent-live-rail.is-streaming {
    border-color: rgba(245, 129, 199, 0.26);
}

#obs-ide .ide-agent-live-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

#obs-ide .ide-agent-live-signal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 40px;
}

#obs-ide .ide-agent-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(142, 165, 201, 0.54);
    box-shadow: 0 0 10px rgba(74, 235, 213, 0.16);
    animation: ide-agent-live-dot 1.2s ease-in-out infinite;
}

#obs-ide .ide-agent-live-dot:nth-child(2) {
    animation-delay: 0.18s;
}

#obs-ide .ide-agent-live-dot:nth-child(3) {
    animation-delay: 0.36s;
}

#obs-ide .ide-agent-live-rail.is-busy .ide-agent-live-dot,
#obs-ide .ide-agent-live-rail.is-streaming .ide-agent-live-dot {
    background: color-mix(in srgb, var(--accent, #47d47f) 68%, white 16%);
}

#obs-ide .ide-agent-live-rail.is-streaming .ide-agent-live-dot {
    background: rgba(245, 129, 199, 0.88);
    box-shadow: 0 0 12px rgba(245, 129, 199, 0.2);
}

@keyframes ide-agent-live-dot {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.42;
    }

    50% {
        transform: translateY(-2px);
        opacity: 1;
    }
}

#obs-ide .ide-agent-live-caret {
    display: inline-block;
    width: 8px;
    height: 12px;
    border-left: 2px solid color-mix(in srgb, #8cf0df 84%, white 10%);
    opacity: 0.88;
    animation: ide-log-caret-blink 1s steps(1, end) infinite;
}

#obs-ide .ide-agent-live-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

#obs-ide .ide-agent-live-title {
    color: #d7fff7;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

#obs-ide .ide-agent-live-detail {
    color: rgba(194, 229, 238, 0.88);
    font-size: 10px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

#obs-ide .ide-agent-live-meta {
    color: rgba(235, 223, 244, 0.74);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: right;
    align-self: start;
    max-width: 168px;
}

#obs-ide .ide-agent-live-workers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

#obs-ide .ide-agent-live-worker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 24px;
    min-width: 0;
    padding: 0 9px 0 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#obs-ide .ide-agent-live-worker.is-active {
    border-color: rgba(94, 237, 200, 0.28);
    background: linear-gradient(180deg, rgba(43, 70, 74, 0.3), rgba(15, 24, 30, 0.34));
}

#obs-ide .ide-agent-live-worker.is-streaming {
    border-color: rgba(245, 129, 199, 0.26);
    background: linear-gradient(180deg, rgba(78, 31, 61, 0.34), rgba(22, 16, 26, 0.38));
}

#obs-ide .ide-agent-live-worker-mark {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(119, 224, 255, 0.92), rgba(73, 147, 242, 0.74));
    color: #0a1321;
    font-size: 8px;
    font-weight: 900;
    flex: 0 0 auto;
}

#obs-ide .ide-agent-live-worker-copy {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

#obs-ide .ide-agent-live-worker-name {
    color: rgba(236, 245, 255, 0.92);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

#obs-ide .ide-agent-live-worker-phase {
    color: rgba(168, 204, 214, 0.72);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

#obs-ide .ide-watermark {
    display: grid;
    place-items: center;
    min-height: 100%;
    color: rgba(245, 239, 233, 0.82);
    font-size: clamp(16px, 2vw, 24px);
    font-weight: 800;
    letter-spacing: -0.04em;
    text-align: center;
    pointer-events: none;
}

#obs-ide .ide-log-entry {
    --ide-log-accent: rgba(118, 199, 255, 0.9);
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 7px;
    padding: 2px 0 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

#obs-ide .ide-log-entry--tool,
#obs-ide .ide-log-entry--runtime,
#obs-ide .ide-log-entry--git {
    --ide-log-accent: rgba(111, 193, 255, 0.92);
}

#obs-ide .ide-log-entry--assistant {
    --ide-log-accent: rgba(248, 132, 202, 0.92);
}

#obs-ide .ide-log-entry--stage {
    padding-bottom: 2px;
}

#obs-ide .ide-log-entry--stage-1 {
    --ide-log-accent: rgba(57, 235, 153, 0.95);
}

#obs-ide .ide-log-entry--stage-2 {
    --ide-log-accent: rgba(176, 124, 255, 0.95);
}

#obs-ide .ide-log-entry--stage-3 {
    --ide-log-accent: rgba(255, 193, 67, 0.95);
}

#obs-ide .ide-log-entry--stage-4 {
    --ide-log-accent: rgba(94, 180, 255, 0.95);
}

#obs-ide .ide-log-entry--error {
    --ide-log-accent: rgba(255, 112, 142, 0.98);
}

#obs-ide .ide-log-entry--user {
    --ide-log-accent: rgba(255, 147, 171, 0.95);
}

#obs-ide .ide-log-entry--status {
    --ide-log-accent: rgba(94, 236, 171, 0.95);
}

#obs-ide .ide-log-entry--activity {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 3px;
    padding-top: 0;
}

#obs-ide .ide-log-entry--activity .ide-log-avatar {
    width: 16px;
    height: 16px;
    font-size: 8px;
    opacity: 0.75;
}

#obs-ide .ide-log-entry--activity .ide-log-head {
    align-items: baseline;
    min-height: 0;
}

#obs-ide .ide-log-entry--activity .ide-log-title,
#obs-ide .ide-log-entry--activity .ide-log-kicker,
#obs-ide .ide-log-entry--activity .ide-log-time {
    font-size: 10px;
}

#obs-ide .ide-log-entry--activity .ide-log-copy {
    margin-top: 0;
    color: rgba(226, 232, 240, 0.82);
    font-size: 12px;
    line-height: 1.28;
}

/* ---------------------------------------------------------------------- */
/* CREW MODE — one card per worker role (IDE_CODER_CREW_MODE).            */
/* Each card gets a tinted left accent plus a subtle tint background so   */
/* Scout/Drafter/Wrench/Sentinel read as distinct workers at a glance.    */
/* ---------------------------------------------------------------------- */
#obs-ide .ide-log-entry--crew {
    --ide-log-accent: rgba(148, 163, 184, 0.9);
    padding: 6px 8px 8px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.12);
    margin-bottom: 8px;
}
#obs-ide .ide-log-entry--tint-cyan {
    --ide-log-accent: rgba(56, 189, 248, 0.95);
    background: rgba(8, 47, 73, 0.35);
    border-color: rgba(56, 189, 248, 0.18);
}
#obs-ide .ide-log-entry--tint-amber {
    --ide-log-accent: rgba(251, 191, 36, 0.95);
    background: rgba(68, 48, 10, 0.30);
    border-color: rgba(251, 191, 36, 0.18);
}
#obs-ide .ide-log-entry--tint-orange {
    --ide-log-accent: rgba(251, 146, 60, 0.95);
    background: rgba(67, 32, 10, 0.32);
    border-color: rgba(251, 146, 60, 0.20);
}
#obs-ide .ide-log-entry--tint-green {
    --ide-log-accent: rgba(74, 222, 128, 0.95);
    background: rgba(13, 50, 28, 0.32);
    border-color: rgba(74, 222, 128, 0.18);
}
#obs-ide .ide-log-entry--tint-violet {
    --ide-log-accent: rgba(167, 139, 250, 0.95);
    background: rgba(37, 20, 66, 0.34);
    border-color: rgba(167, 139, 250, 0.20);
}
#obs-ide .ide-log-entry--crew .ide-log-avatar {
    font-size: 14px;
    line-height: 1;
}
#obs-ide .ide-log-entry--crew .ide-log-title {
    font-weight: 600;
    letter-spacing: 0.015em;
}
#obs-ide .ide-log-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin: 4px 0 6px;
}
#obs-ide .ide-log-badge--tool {
    background: rgba(30, 41, 59, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: rgba(226, 232, 240, 0.92);
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 999px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

#obs-ide .ide-log-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 0;
}

#obs-ide .ide-log-avatar {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--ide-log-accent) 62%, white 12%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--ide-log-accent) 82%, white 8%), color-mix(in srgb, var(--ide-log-accent) 52%, black 22%));
    color: #140a16;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 14px color-mix(in srgb, var(--ide-log-accent) 34%, transparent);
}

#obs-ide .ide-log-thread {
    width: 1px;
    flex: 1 1 auto;
    border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ide-log-accent) 88%, white 10%), color-mix(in srgb, var(--ide-log-accent) 58%, transparent 42%));
    opacity: 0.9;
    min-height: 8px;
}

#obs-ide .ide-log-column {
    min-width: 0;
    padding: 1px 0 0 1px;
}

#obs-ide .ide-log-heading {
    min-width: 0;
    flex: 1 1 220px;
}

#obs-ide .ide-log-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 10px;
    min-width: 0;
}

#obs-ide .ide-log-kicker {
    margin-top: 1px;
    color: color-mix(in srgb, var(--ide-log-accent) 66%, white 12%);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#obs-ide .ide-log-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 6px;
    min-width: 0;
    margin-left: auto;
}

#obs-ide .ide-log-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

#obs-ide .ide-log-badge {
    display: inline-flex;
    align-items: center;
    min-height: 14px;
    padding: 0 5px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-2, #d6dbea);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#obs-ide .ide-log-badge--muted {
    color: var(--text-3, #9399ad);
}

#obs-ide .ide-log-badge--path,
#obs-ide .ide-log-badge--command {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* ── Batch-class classification badges (workspace summary cards) ─────── */
#obs-ide .ide-log-badge--batch {
    font-size: 8px;
    padding: 1px 6px;
    border-radius: 999px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    flex-shrink: 0;
}
#obs-ide .ide-log-badge--batch-write_class {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.38);
    color: #86efac;
}
#obs-ide .ide-log-badge--batch-read_only {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.22);
    color: #94a3b8;
}
#obs-ide .ide-log-badge--batch-preview_only {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.34);
    color: #7dd3fc;
}
#obs-ide .ide-log-badge--batch-write_attempted {
    background: rgba(251, 191, 36, 0.10);
    border-color: rgba(251, 191, 36, 0.32);
    color: #fcd34d;
}
#obs-ide .ide-log-badge--batch-mixed {
    background: rgba(167, 139, 250, 0.12);
    border-color: rgba(167, 139, 250, 0.30);
    color: #c4b5fd;
}

#obs-ide .ide-log-title {
    margin-top: 0;
    color: color-mix(in srgb, var(--ide-log-accent) 82%, white 14%);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -0.015em;
}

#obs-ide .ide-log-copy {
    margin-top: 4px;
    color: #bdf4f3;
    font-size: var(--ide-font-copy);
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-shadow: 0 0 12px rgba(78, 247, 224, 0.05);
}

#obs-ide .ide-log-entry--stage .ide-log-copy {
    margin-top: 1px;
    color: color-mix(in srgb, var(--ide-log-accent) 76%, white 16%);
    font-size: var(--ide-font-copy);
    font-weight: 700;
}

#obs-ide .ide-log-entry--status .ide-log-copy {
    margin-top: 1px;
    color: color-mix(in srgb, var(--ide-log-accent) 78%, white 18%);
    font-size: var(--ide-font-copy);
}

#obs-ide .ide-log-copy.is-streaming {
    min-height: 1.4em;
}

#obs-ide .ide-log-copy-text {
    white-space: inherit;
}

#obs-ide .ide-log-copy-text--rich {
    display: block;
    white-space: normal;
    line-height: 1.62;
}

#obs-ide .ide-log-copy-text--rich p {
    margin: 0 0 0.7em;
}

#obs-ide .ide-log-copy-text--rich p:last-child {
    margin-bottom: 0;
}

#obs-ide .ide-log-copy-text--rich ul {
    margin: 0.25em 0 0.75em 1.25em;
    padding: 0;
}

#obs-ide .ide-log-copy-text--rich li {
    margin: 0.15em 0;
}

#obs-ide .ide-log-caret {
    display: inline-block;
    width: 8px;
    height: 1.02em;
    margin-left: 2px;
    border-left: 2px solid currentColor;
    vertical-align: -0.12em;
    opacity: 0.92;
    animation: ide-log-caret-blink 1s steps(1, end) infinite;
}

@keyframes ide-log-caret-blink {
    0%, 48% {
        opacity: 0.95;
    }

    49%, 100% {
        opacity: 0;
    }
}

#obs-ide .ide-log-detail-toggle {
    margin-top: 3px;
}

#obs-ide .ide-log-detail-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    color: color-mix(in srgb, var(--ide-log-accent) 68%, white 10%);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#obs-ide .ide-log-detail-summary::-webkit-details-marker {
    display: none;
}

#obs-ide .ide-log-detail-summary::before {
    content: '▸';
    font-size: 10px;
    transition: transform 120ms ease;
}

#obs-ide .ide-log-detail-toggle[open] .ide-log-detail-summary::before {
    transform: rotate(90deg);
}

#obs-ide .ide-log-detail {
    margin: 5px 0 0;
    max-height: min(44vh, 420px);
    padding: 8px 10px;
    border: 1px solid rgba(120, 220, 207, 0.14);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(11, 14, 25, 0.54), rgba(9, 11, 21, 0.8));
    color: #c8dbff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    line-height: 1.38;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow: auto;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#obs-ide .ide-log-detail--code {
    color: #bfe6f2;
}

#obs-ide .ide-log-entry--user .ide-log-title,
#obs-ide .ide-log-entry--user .ide-log-copy {
    color: color-mix(in srgb, var(--accent, #ff6b8f) 78%, white 6%);
}

#obs-ide .ide-log-entry--status .ide-log-title {
    color: color-mix(in srgb, var(--accent, #47d47f) 68%, white 12%);
}

#obs-ide .ide-log-entry--error .ide-log-title,
#obs-ide .ide-log-entry--error .ide-log-copy {
    color: #ff7e91;
}

#obs-ide .ide-log-time {
    color: rgba(235, 223, 244, 0.7);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

#obs-ide .ide-stage-task-strip {
    display: grid;
    gap: 3px;
    margin-top: 3px;
}

#obs-ide .ide-stage-task {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    min-width: 0;
    padding: 3px 0 0 2px;
    border: none;
    border-left: 1px solid color-mix(in srgb, var(--ide-log-accent) 38%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#obs-ide .ide-stage-task--active {
    border-left-color: rgba(78, 206, 127, 0.72);
}

#obs-ide .ide-stage-task--blocked,
#obs-ide .ide-stage-task--failed {
    border-left-color: rgba(255, 101, 134, 0.76);
}

#obs-ide .ide-stage-task--watch {
    border-left-color: rgba(255, 194, 86, 0.74);
}

#obs-ide .ide-stage-task-icon,
#obs-ide .ide-stage-task-check {
    margin-top: 1px;
    font-size: 11px;
    line-height: 1;
}

#obs-ide .ide-stage-task-icon {
    filter: saturate(1.08);
}

#obs-ide .ide-stage-task-check {
    color: color-mix(in srgb, var(--ide-log-accent) 74%, white 10%);
}

#obs-ide .ide-stage-task-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 3px 8px;
    min-width: 0;
}

#obs-ide .ide-stage-task-state {
    color: color-mix(in srgb, var(--ide-log-accent) 52%, white 10%);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

#obs-ide .ide-stage-task-title {
    color: var(--text-1, #f5efe9);
    font-size: 10px;
    line-height: 1.34;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#obs-ide .ide-stage-console-list {
    display: grid;
    gap: 4px;
    margin: 6px 0 0;
}

#obs-ide .ide-stage-console-row {
    display: grid;
    grid-template-columns: auto max-content auto minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 2px 0 0 2px;
    border-left: 1px solid color-mix(in srgb, var(--ide-log-accent) 28%, transparent);
}

#obs-ide .ide-stage-console-mark {
    margin-top: 1px;
    color: color-mix(in srgb, var(--ide-log-accent) 82%, white 10%);
    font-size: 11px;
    line-height: 1;
}

#obs-ide .ide-stage-console-key {
    color: color-mix(in srgb, var(--ide-log-accent) 68%, white 10%);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: anywhere;
}

#obs-ide .ide-stage-console-sep {
    color: color-mix(in srgb, var(--ide-log-accent) 52%, white 10%);
    font-size: 10px;
    line-height: 1.2;
}

#obs-ide .ide-stage-console-value {
    color: var(--text-1, #eef2fb);
    font-size: 10.5px;
    line-height: 1.42;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#obs-ide .ide-stage-foldout {
    margin-top: 3px;
}

#obs-ide .ide-stage-foldout[open] {
    padding-bottom: 2px;
}

#obs-ide .ide-stage-foldout-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 1px 0;
    cursor: pointer;
    list-style: none;
    color: #f0edf7;
}

#obs-ide .ide-stage-foldout-summary::-webkit-details-marker {
    display: none;
}

#obs-ide .ide-stage-foldout-summary::before {
    content: '▸';
    margin-right: 6px;
    color: color-mix(in srgb, var(--ide-log-accent) 72%, white 10%);
    font-size: 10px;
    transition: transform 140ms ease;
}

#obs-ide .ide-stage-foldout[open] .ide-stage-foldout-summary::before {
    transform: rotate(90deg);
}

#obs-ide .ide-stage-foldout-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#obs-ide .ide-stage-foldout-title::after {
    content: '';
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--ide-log-accent) 65%, white 8%), transparent);
}

#obs-ide .ide-stage-foldout-meta {
    color: color-mix(in srgb, var(--ide-log-accent) 58%, white 10%);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#obs-ide .ide-autoscroll-button {
    position: absolute;
    right: 14px;
    bottom: 102px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--accent, #47d47f) 68%, white 8%);
    background: rgba(10, 14, 22, 0.94);
    z-index: 2;
}

@media (max-width: 980px) {
    #obs-ide .ide-agent-body {
        padding: 14px 14px 142px 14px;
    }

    #obs-ide .ide-agent-live-main {
        grid-template-columns: auto minmax(0, 1fr);
    }

    #obs-ide .ide-agent-live-meta {
        grid-column: 2;
        text-align: left;
        letter-spacing: 0.05em;
    }

    #obs-ide .ide-autoscroll-button {
        bottom: 112px;
        right: 12px;
    }
}

#obs-ide .ide-autoscroll-button.is-following {
    border-color: color-mix(in srgb, var(--accent, #47d47f) 60%, white 10%);
    box-shadow: 0 0 0 1px rgba(71, 212, 127, 0.18);
}

#obs-ide .ide-composer-shell {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#obs-ide .ide-quick-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 1px;
}

#obs-ide .ide-chip-button {
    height: 24px;
    min-height: 24px;
    padding: 0 10px;
    color: var(--text-2, #d2d6e2);
    font-size: 9px;
    font-weight: 700;
    border-radius: 8px;
}

#obs-ide .ide-composer-row {
    display: grid;
    grid-template-columns: 34px 34px minmax(0, 1fr) 84px;
    gap: 7px;
    align-items: stretch;
    padding: 6px;
    border: 1px solid rgba(177, 84, 226, 0.26);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(31, 12, 33, 0.56), rgba(11, 12, 20, 0.9)),
        radial-gradient(circle at 0% 50%, rgba(52, 236, 203, 0.1), transparent 22%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 18px 32px rgba(0, 0, 0, 0.18);
}

#obs-ide .ide-attach-button,
#obs-ide .ide-send-button {
    height: 34px;
    font-size: 10px;
    font-weight: 800;
}

#obs-ide .ide-attach-button {
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025));
    color: #f2f6ff;
}

#obs-ide .ide-send-button {
    background: color-mix(in srgb, var(--accent, #ff4b78) 82%, #2a0e18 18%);
    color: white;
    min-width: 84px;
}

#obs-ide .ide-stop-button {
    background: linear-gradient(180deg, #d0362f, #8d1a15);
    color: #fff;
    min-width: 84px;
    border: 1px solid rgba(255, 120, 110, 0.45);
    box-shadow: 0 0 0 1px rgba(208, 54, 47, 0.25), 0 6px 14px rgba(208, 54, 47, 0.18);
    animation: ide-stop-pulse 1.6s ease-in-out infinite;
}
#obs-ide .ide-stop-button:hover {
    background: linear-gradient(180deg, #e2453d, #a8201b);
}
#obs-ide .ide-stop-button:active {
    transform: translateY(1px);
}
#obs-ide .ide-stop-button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    animation: none;
}

@keyframes ide-stop-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(208, 54, 47, 0.25), 0 6px 14px rgba(208, 54, 47, 0.18); }
    50%     { box-shadow: 0 0 0 1px rgba(255, 120, 110, 0.6),  0 6px 18px rgba(255, 80, 70, 0.35); }
}

#obs-ide .ide-agent-input {
    min-height: 34px;
    max-height: 148px;
    resize: none;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    outline: none;
    background: rgba(8, 12, 20, 0.72);
    color: #d5fff7;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    line-height: 1.35;
    font-size: var(--ide-font-body);
    padding: 8px 11px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

#obs-ide .ide-agent-input::placeholder {
    color: rgba(175, 194, 223, 0.64);
}

#obs-ide .ide-attachment-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#obs-ide .ide-upload-hint {
    color: var(--text-3, #98a0b3);
    font-size: 10px;
    line-height: 1.45;
    letter-spacing: 0.01em;
    padding: 2px 2px 0;
}

#obs-ide .ide-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--ide-line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-2, #d2d6e2);
    font-size: 12px;
}

#obs-ide .ide-attachment-chip button {
    appearance: none;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
}

#obs-ide .ide-preview-overlay[hidden] {
    display: none !important;
}

#obs-ide .ide-preview-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(16px, 2.6vw, 30px);
    background: rgba(3, 5, 10, 0.72);
    backdrop-filter: blur(14px);
    z-index: 220;
    overflow: auto;
}

#obs-ide .ide-preview-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
    width: min(94vw, 1080px);
    height: min(90vh, 860px);
    min-height: 460px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;
    background:
        radial-gradient(circle at top center, rgba(100, 51, 130, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(8, 10, 15, 0.98), rgba(4, 5, 9, 0.995));
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.52),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    min-height: 0;
    margin: auto;
}

#obs-ide .ide-preview-header,
#obs-ide .ide-history-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 0;
}

#obs-ide .ide-preview-title,
#obs-ide .ide-history-title {
    margin-top: 4px;
    color: var(--text-1, #f5efe9);
    font-size: 18px;
    font-weight: 800;
}

#obs-ide .ide-history-close {
    width: 38px;
    height: 38px;
}

#obs-ide .ide-editor-preview {
    min-height: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(17, 18, 24, 1), rgba(1, 2, 4, 1));
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        inset 0 0 0 1px rgba(255, 255, 255, 0.015);
}

#obs-ide .ide-editor-preview iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

#obs-ide .ide-terminal-output {
    min-height: 72px;
    max-height: 132px;
    overflow: auto;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(5, 7, 11, 0.92);
    color: #b8d2ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

#obs-ide .ide-preview-placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    padding: 20px;
    text-align: center;
    color: #d6def0;
}

#obs-ide .ide-preview-placeholder-card {
    width: min(100%, 380px);
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(18, 20, 28, 0.92), rgba(8, 10, 15, 0.98));
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.26);
}

#obs-ide .ide-preview-placeholder-kicker {
    color: rgba(110, 244, 173, 0.84);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

#obs-ide .ide-preview-placeholder-title {
    margin-top: 10px;
    color: #f5efe9;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

#obs-ide .ide-preview-placeholder-copy {
    margin-top: 8px;
    color: #9ca6ba;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
}

#obs-ide .ide-preview-overlay[data-mode="desktop"] .ide-preview-shell {
    width: min(99vw, 1500px);
    height: min(96vh, 1000px);
    padding: 8px;
    border-radius: 20px;
    gap: 8px;
}

#obs-ide .ide-preview-overlay[data-mode="desktop"] .ide-terminal-output {
    min-height: 38px;
    max-height: 72px;
    padding: 10px 12px;
}

#obs-ide .ide-virtual-desktop {
    position: relative;
    height: 100%;
    padding: 0;
    --vdesk-shortcut-icon-size: 42px;
    --vdesk-shortcut-width: 74px;
    --vdesk-taskbar-height: 44px;
    --vdesk-window-top: 14px;
    --vdesk-window-left: 94px;
    --vdesk-window-head-1: rgba(50, 93, 178, 0.98);
    --vdesk-window-head-2: rgba(40, 79, 152, 0.98);
    --vdesk-start-1: rgba(82, 170, 88, 0.98);
    --vdesk-start-2: rgba(41, 103, 38, 0.98);
    --vdesk-taskbar-1: rgba(218, 226, 238, 0.94);
    --vdesk-taskbar-2: rgba(181, 193, 212, 0.96);
    --vdesk-taskbar-text: #16233a;
    --vdesk-launcher-bg: rgba(255, 255, 255, 0.56);
    --vdesk-launcher-border: rgba(72, 90, 122, 0.16);
    --vdesk-launcher-text: #1a2941;
    --vdesk-chip-active-border: rgba(101, 241, 189, 0.34);
    --vdesk-chip-active-1: rgba(42, 88, 73, 0.78);
    --vdesk-chip-active-2: rgba(18, 39, 34, 0.9);
    --vdesk-shortcut-fill-1: rgba(111, 218, 255, 0.92);
    --vdesk-shortcut-fill-2: rgba(77, 141, 255, 0.76);
    --vdesk-shortcut-ink: #09101a;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.45), transparent 12%),
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.22), transparent 18%),
        linear-gradient(180deg, rgba(92, 171, 255, 0.95) 0%, rgba(79, 150, 255, 0.92) 52%, rgba(81, 149, 59, 0.92) 53%, rgba(109, 171, 65, 0.96) 100%);
    color: #edf6ff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 26px 56px rgba(0, 0, 0, 0.34);
}

#obs-ide .ide-virtual-desktop[data-wallpaper="custom"] {
    background:
        linear-gradient(180deg, rgba(4, 7, 12, 0.04), rgba(4, 7, 12, 0.18)),
        var(--vdesk-custom-wallpaper) center center / cover no-repeat,
        linear-gradient(180deg, rgba(92, 171, 255, 0.95) 0%, rgba(79, 150, 255, 0.92) 52%, rgba(81, 149, 59, 0.92) 53%, rgba(109, 171, 65, 0.96) 100%);
}

#obs-ide .ide-virtual-desktop[data-wallpaper="sunrise"] {
    background:
        radial-gradient(circle at 22% 14%, rgba(255, 236, 182, 0.32), transparent 22%),
        linear-gradient(180deg, rgba(255, 194, 135, 0.96), rgba(247, 137, 118, 0.9) 48%, rgba(116, 118, 190, 0.94) 100%);
}

#obs-ide .ide-virtual-desktop[data-wallpaper="graphite"] {
    background:
        radial-gradient(circle at 84% 12%, rgba(93, 143, 255, 0.18), transparent 22%),
        linear-gradient(160deg, rgba(25, 29, 40, 0.98), rgba(43, 47, 63, 0.96) 48%, rgba(19, 22, 30, 0.99) 100%);
}

#obs-ide .ide-virtual-desktop[data-wallpaper="cosmos"] {
    background:
        radial-gradient(circle at 20% 16%, rgba(255, 135, 204, 0.2), transparent 24%),
        radial-gradient(circle at 82% 10%, rgba(94, 179, 255, 0.2), transparent 24%),
        linear-gradient(145deg, rgba(33, 18, 76, 0.98), rgba(82, 44, 139, 0.92) 44%, rgba(44, 131, 219, 0.9) 100%);
}

#obs-ide .ide-virtual-desktop[data-wallpaper="lagoon"] {
    background:
        radial-gradient(circle at 78% 14%, rgba(214, 253, 255, 0.2), transparent 18%),
        linear-gradient(160deg, rgba(16, 88, 104, 0.98), rgba(24, 147, 162, 0.9) 52%, rgba(41, 87, 152, 0.92) 100%);
}

#obs-ide .ide-virtual-desktop[data-wallpaper="ember"] {
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 214, 138, 0.22), transparent 20%),
        linear-gradient(180deg, rgba(86, 28, 22, 0.98), rgba(145, 61, 31, 0.92) 52%, rgba(39, 12, 18, 0.98) 100%);
}

#obs-ide .ide-virtual-desktop[data-wallpaper="orchid"] {
    background:
        radial-gradient(circle at 76% 10%, rgba(246, 212, 255, 0.22), transparent 18%),
        linear-gradient(145deg, rgba(96, 44, 150, 0.98), rgba(163, 82, 201, 0.9) 48%, rgba(73, 47, 141, 0.96) 100%);
}

#obs-ide .ide-virtual-desktop[data-wallpaper="glacier"] {
    background:
        radial-gradient(circle at 18% 15%, rgba(255, 255, 255, 0.26), transparent 18%),
        linear-gradient(180deg, rgba(179, 224, 255, 0.96), rgba(106, 172, 223, 0.92) 56%, rgba(72, 114, 172, 0.94) 100%);
}

#obs-ide .ide-virtual-desktop[data-wallpaper="meadow"] {
    background:
        radial-gradient(circle at 82% 14%, rgba(255, 255, 255, 0.18), transparent 16%),
        linear-gradient(180deg, rgba(127, 199, 255, 0.92), rgba(134, 204, 255, 0.88) 46%, rgba(93, 167, 88, 0.92) 47%, rgba(53, 116, 58, 0.96) 100%);
}

#obs-ide .ide-virtual-desktop[data-wallpaper="dusk"] {
    background:
        radial-gradient(circle at 22% 12%, rgba(255, 187, 130, 0.24), transparent 18%),
        linear-gradient(180deg, rgba(88, 88, 153, 0.94), rgba(110, 85, 146, 0.92) 48%, rgba(32, 39, 76, 0.98) 100%);
}

#obs-ide .ide-virtual-desktop[data-wallpaper="circuit"] {
    background:
        linear-gradient(135deg, rgba(13, 23, 34, 0.98), rgba(14, 41, 66, 0.94)),
        repeating-linear-gradient(90deg, rgba(102, 255, 220, 0.06) 0, rgba(102, 255, 220, 0.06) 1px, transparent 1px, transparent 72px),
        repeating-linear-gradient(180deg, rgba(102, 255, 220, 0.05) 0, rgba(102, 255, 220, 0.05) 1px, transparent 1px, transparent 72px);
}

#obs-ide .ide-virtual-desktop[data-wallpaper="sand"] {
    background:
        radial-gradient(circle at 78% 12%, rgba(255, 245, 216, 0.26), transparent 18%),
        linear-gradient(180deg, rgba(255, 215, 162, 0.96), rgba(214, 184, 136, 0.92) 54%, rgba(168, 126, 90, 0.94) 100%);
}

#obs-ide .ide-virtual-desktop[data-wallpaper="cloud"] {
    background:
        radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.32), transparent 20%),
        radial-gradient(circle at 78% 16%, rgba(255, 255, 255, 0.24), transparent 22%),
        linear-gradient(180deg, rgba(195, 221, 255, 0.96), rgba(160, 197, 242, 0.92) 58%, rgba(124, 155, 199, 0.94) 100%);
}

#obs-ide .ide-virtual-desktop[data-wallpaper="midnight"] {
    background:
        radial-gradient(circle at 18% 16%, rgba(235, 128, 255, 0.18), transparent 20%),
        radial-gradient(circle at 82% 12%, rgba(93, 199, 255, 0.22), transparent 24%),
        linear-gradient(135deg, rgba(58, 21, 89, 0.98), rgba(59, 72, 168, 0.9) 44%, rgba(74, 187, 255, 0.9) 100%);
}

#obs-ide .ide-virtual-desktop[data-wallpaper="emerald"] {
    background:
        linear-gradient(180deg, rgba(17, 131, 132, 0.98), rgba(15, 132, 133, 0.98)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
}

#obs-ide .ide-virtual-desktop[data-density="compact"] {
    --vdesk-shortcut-icon-size: 36px;
    --vdesk-shortcut-width: 66px;
    --vdesk-taskbar-height: 40px;
    --vdesk-window-top: 12px;
    --vdesk-window-left: 84px;
}

#obs-ide .ide-virtual-desktop[data-palette="cobalt"] {
    --vdesk-window-head-1: rgba(43, 109, 214, 0.98);
    --vdesk-window-head-2: rgba(29, 77, 164, 0.98);
    --vdesk-start-1: rgba(70, 132, 255, 0.98);
    --vdesk-start-2: rgba(32, 73, 168, 0.98);
    --vdesk-chip-active-border: rgba(118, 180, 255, 0.38);
    --vdesk-chip-active-1: rgba(30, 64, 131, 0.82);
    --vdesk-chip-active-2: rgba(18, 35, 86, 0.92);
}

#obs-ide .ide-virtual-desktop[data-palette="mint"] {
    --vdesk-window-head-1: rgba(36, 148, 127, 0.98);
    --vdesk-window-head-2: rgba(18, 101, 88, 0.98);
    --vdesk-start-1: rgba(62, 191, 142, 0.98);
    --vdesk-start-2: rgba(28, 118, 83, 0.98);
    --vdesk-chip-active-border: rgba(122, 255, 214, 0.34);
    --vdesk-chip-active-1: rgba(23, 92, 72, 0.82);
    --vdesk-chip-active-2: rgba(13, 51, 41, 0.92);
}

#obs-ide .ide-virtual-desktop[data-palette="ember"] {
    --vdesk-window-head-1: rgba(170, 72, 47, 0.98);
    --vdesk-window-head-2: rgba(121, 44, 30, 0.98);
    --vdesk-start-1: rgba(214, 96, 44, 0.98);
    --vdesk-start-2: rgba(135, 49, 20, 0.98);
    --vdesk-chip-active-border: rgba(255, 173, 120, 0.36);
    --vdesk-chip-active-1: rgba(110, 49, 24, 0.84);
    --vdesk-chip-active-2: rgba(63, 24, 13, 0.94);
}

#obs-ide .ide-virtual-desktop[data-palette="orchid"] {
    --vdesk-window-head-1: rgba(143, 72, 187, 0.98);
    --vdesk-window-head-2: rgba(95, 39, 139, 0.98);
    --vdesk-start-1: rgba(187, 87, 218, 0.98);
    --vdesk-start-2: rgba(110, 45, 154, 0.98);
    --vdesk-chip-active-border: rgba(233, 154, 255, 0.36);
    --vdesk-chip-active-1: rgba(92, 43, 122, 0.84);
    --vdesk-chip-active-2: rgba(55, 23, 78, 0.94);
}

#obs-ide .ide-virtual-desktop[data-palette="sun"] {
    --vdesk-window-head-1: rgba(210, 134, 52, 0.98);
    --vdesk-window-head-2: rgba(158, 92, 27, 0.98);
    --vdesk-start-1: rgba(232, 166, 47, 0.98);
    --vdesk-start-2: rgba(171, 102, 17, 0.98);
    --vdesk-chip-active-border: rgba(255, 219, 117, 0.36);
    --vdesk-chip-active-1: rgba(110, 77, 22, 0.82);
    --vdesk-chip-active-2: rgba(68, 41, 9, 0.94);
}

#obs-ide .ide-virtual-desktop[data-palette="mono"] {
    --vdesk-window-head-1: rgba(99, 110, 129, 0.98);
    --vdesk-window-head-2: rgba(60, 68, 84, 0.98);
    --vdesk-start-1: rgba(128, 138, 157, 0.98);
    --vdesk-start-2: rgba(72, 81, 96, 0.98);
    --vdesk-chip-active-border: rgba(205, 216, 231, 0.28);
    --vdesk-chip-active-1: rgba(58, 66, 80, 0.82);
    --vdesk-chip-active-2: rgba(27, 31, 40, 0.92);
}

#obs-ide .ide-virtual-desktop[data-palette="lime"] {
    --vdesk-window-head-1: rgba(99, 168, 58, 0.98);
    --vdesk-window-head-2: rgba(59, 109, 26, 0.98);
    --vdesk-start-1: rgba(128, 196, 72, 0.98);
    --vdesk-start-2: rgba(70, 123, 27, 0.98);
    --vdesk-chip-active-border: rgba(191, 255, 124, 0.34);
    --vdesk-chip-active-1: rgba(53, 90, 24, 0.82);
    --vdesk-chip-active-2: rgba(29, 55, 14, 0.92);
}

#obs-ide .ide-vdesk-desktop-plane,
#obs-ide .ide-vdesk-desktop-surface {
    position: relative;
    min-height: 0;
    height: 100%;
}

#obs-ide .ide-vdesk-desktop-surface {
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
        radial-gradient(circle at 84% 16%, rgba(255, 255, 255, 0.11), transparent 24%);
}

#obs-ide .ide-vdesk-kicker {
    color: rgba(233, 244, 255, 0.86);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

#obs-ide .ide-vdesk-title {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.24);
}

#obs-ide .ide-vdesk-meta {
    color: rgba(244, 249, 255, 0.82);
    font-size: 10px;
    line-height: 1.45;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

#obs-ide .ide-vdesk-watermark {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 1;
    pointer-events: none;
    display: grid;
    justify-items: end;
    gap: 2px;
    max-width: 220px;
    padding: 6px 10px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(10, 19, 33, 0.2), rgba(10, 19, 33, 0.04));
    backdrop-filter: blur(6px);
    opacity: 0.84;
}

#obs-ide .ide-vdesk-icon-grid {
    position: absolute;
    top: 14px;
    left: 8px;
    bottom: calc(var(--vdesk-taskbar-height) + 10px);
    width: 70px;
    display: grid;
    align-content: start;
    gap: 5px;
    padding-right: 0;
    overflow: hidden;
    z-index: 1;
}

#obs-ide .ide-vdesk-icon-grid::-webkit-scrollbar {
    display: none;
}

#obs-ide .ide-vdesk-shortcut,
#obs-ide .ide-vdesk-action,
#obs-ide .ide-vdesk-chip,
#obs-ide .ide-vdesk-dock-item,
#obs-ide .ide-vdesk-window-title,
#obs-ide .ide-vdesk-window-close,
#obs-ide .ide-vdesk-window-control,
#obs-ide .ide-vdesk-file-row,
#obs-ide .ide-vdesk-start-button,
#obs-ide .ide-vdesk-task-launcher,
#obs-ide .ide-vdesk-start-item {
    appearance: none;
    border: 0;
    cursor: pointer;
    font: inherit;
}

#obs-ide .ide-vdesk-shortcut {
    display: grid;
    justify-items: center;
    gap: 3px;
    width: var(--vdesk-shortcut-width);
    padding: 5px 3px;
    border-radius: 12px;
    background: transparent;
    color: #fff;
    text-align: center;
}

#obs-ide .ide-vdesk-shortcut.is-selected,
#obs-ide .ide-vdesk-shortcut:hover {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

#obs-ide .ide-vdesk-shortcut-icon {
    position: relative;
    width: var(--vdesk-shortcut-icon-size);
    height: var(--vdesk-shortcut-icon-size);
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(216, 228, 252, 0.58));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 10px 18px rgba(0, 0, 0, 0.16);
}

#obs-ide .ide-vdesk-shortcut-icon::after {
    content: '';
    position: absolute;
    inset: 7px 6px 6px;
    border-radius: 9px;
    border: 1px solid rgba(6, 18, 36, 0.1);
    background: linear-gradient(180deg, var(--vdesk-shortcut-fill-1), var(--vdesk-shortcut-fill-2));
    opacity: 0.96;
}

#obs-ide .ide-vdesk-shortcut-icon--drive::after,
#obs-ide .ide-vdesk-start-item-mark--drive {
    background: linear-gradient(180deg, rgba(255, 210, 119, 0.96), rgba(237, 163, 56, 0.82));
}

#obs-ide .ide-vdesk-shortcut-icon--settings::after,
#obs-ide .ide-vdesk-start-item-mark--settings {
    background: linear-gradient(180deg, rgba(195, 183, 255, 0.96), rgba(116, 108, 237, 0.82));
}

#obs-ide .ide-vdesk-shortcut-icon--project::after,
#obs-ide .ide-vdesk-start-item-mark--project {
    background: linear-gradient(180deg, rgba(143, 255, 201, 0.96), rgba(67, 194, 119, 0.82));
}

#obs-ide .ide-vdesk-shortcut-icon--sync::after,
#obs-ide .ide-vdesk-start-item-mark--sync {
    background: linear-gradient(180deg, rgba(255, 182, 235, 0.96), rgba(221, 88, 188, 0.82));
}

#obs-ide .ide-vdesk-shortcut-icon--app::after,
#obs-ide .ide-vdesk-start-item-mark--app {
    background: linear-gradient(180deg, rgba(123, 228, 255, 0.98), rgba(54, 135, 255, 0.82));
}

#obs-ide .ide-vdesk-shortcut-glyph {
    position: relative;
    z-index: 1;
    color: var(--vdesk-shortcut-ink);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#obs-ide .ide-vdesk-shortcut-label {
    max-width: 100%;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.36);
    word-break: break-word;
}

#obs-ide .ide-vdesk-shortcut-copy {
    display: none;
}

#obs-ide .ide-vdesk-file-mark {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(126, 211, 255, 0.94), rgba(76, 147, 246, 0.74));
    color: #08111f;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#obs-ide .ide-vdesk-project-title,
#obs-ide .ide-vdesk-file-name,
#obs-ide .ide-vdesk-file-preview-title {
    color: #14253d;
    font-size: 12px;
    font-weight: 800;
}

#obs-ide .ide-vdesk-project-meta,
#obs-ide .ide-vdesk-file-meta,
#obs-ide .ide-vdesk-file-preview-meta,
#obs-ide .ide-vdesk-settings-label {
    color: #4b5e7b;
    font-size: 10px;
    line-height: 1.45;
}

#obs-ide .ide-vdesk-window-layer {
    position: absolute;
    inset: var(--vdesk-window-top) 6px calc(var(--vdesk-taskbar-height) + 4px) var(--vdesk-window-left);
    overflow: hidden;
    z-index: 2;
}

#obs-ide .ide-vdesk-window {
    position: absolute;
    top: var(--window-y, calc(8px + (var(--window-offset, 0) * 12px)));
    left: var(--window-x, calc(8px + (var(--window-offset, 0) * 14px)));
    width: min(var(--window-width, 82vw), calc(100% - 8px));
    min-height: 280px;
    max-width: calc(100% - 8px);
    height: min(var(--window-height, 84vh), calc(100% - 4px));
    max-height: calc(100% - 4px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px 10px 8px 8px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(248, 250, 254, 0.98), rgba(237, 242, 250, 0.97));
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(0, 0, 0, 0.12);
    z-index: 2;
}

#obs-ide .ide-vdesk-window.is-active {
    border-color: rgba(255, 255, 255, 0.4);
    z-index: 4;
}

#obs-ide .ide-vdesk-window.is-maximized {
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
}

#obs-ide .ide-vdesk-window-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(10, 18, 31, 0.12);
    background: linear-gradient(180deg, var(--vdesk-window-head-1), var(--vdesk-window-head-2));
    position: relative;
    z-index: 2;
}

#obs-ide .ide-vdesk-window-title {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: transparent;
    color: #f7fbff;
    text-align: left;
    font-size: 12px;
    font-weight: 800;
}

#obs-ide .ide-vdesk-window-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#obs-ide .ide-vdesk-window-control,
#obs-ide .ide-vdesk-window-close {
    width: 28px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.12);
    color: #f8fbff;
}

#obs-ide .ide-vdesk-window-body,
#obs-ide .ide-vdesk-window-scroll {
    min-height: 0;
    height: 100%;
}

#obs-ide .ide-vdesk-window-body,
#obs-ide .ide-vdesk-window-scroll,
#obs-ide .ide-vdesk-settings {
    position: relative;
    z-index: 1;
}

#obs-ide .ide-vdesk-window-body iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #eef3fb;
}

#obs-ide .ide-vdesk-preview-framewrap {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
}

#obs-ide .ide-vdesk-preview-diagnostics {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: grid;
    gap: 4px;
    max-height: 38%;
    overflow: auto;
    padding: 9px 10px;
    border: 1px solid rgba(245, 158, 11, 0.42);
    border-radius: 8px;
    background: rgba(17, 24, 39, 0.88);
    color: #fff7ed;
    font-size: 12px;
    line-height: 1.35;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.28);
}

#obs-ide .ide-vdesk-window-scroll,
#obs-ide .ide-vdesk-settings {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 10px;
    overflow: auto;
    background: linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(243, 247, 252, 0.96));
}

#obs-ide .ide-vdesk-project-card,
#obs-ide .ide-vdesk-file-row,
#obs-ide .ide-vdesk-file-preview,
#obs-ide .ide-vdesk-empty,
#obs-ide .ide-vdesk-hint {
    border: 1px solid rgba(21, 32, 54, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

#obs-ide .ide-vdesk-project-card,
#obs-ide .ide-vdesk-file-preview,
#obs-ide .ide-vdesk-empty,
#obs-ide .ide-vdesk-hint {
    padding: 14px;
}

#obs-ide .ide-vdesk-project-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#obs-ide .ide-vdesk-project-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(83, 199, 149, 0.16);
    color: rgba(21, 88, 58, 0.92);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#obs-ide .ide-vdesk-file-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 13px;
    text-align: left;
}

#obs-ide .ide-vdesk-file-mark--config {
    background: linear-gradient(180deg, rgba(255, 211, 116, 0.94), rgba(232, 163, 58, 0.78));
}

#obs-ide .ide-vdesk-file-mark--media {
    background: linear-gradient(180deg, rgba(255, 163, 196, 0.94), rgba(214, 95, 173, 0.78));
}

#obs-ide .ide-vdesk-file-mark--code,
#obs-ide .ide-vdesk-file-mark--script {
    background: linear-gradient(180deg, rgba(128, 255, 204, 0.94), rgba(56, 194, 132, 0.78));
}

#obs-ide .ide-vdesk-file-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

#obs-ide .ide-vdesk-file-preview-head {
    display: grid;
    gap: 2px;
    margin-bottom: 10px;
}

#obs-ide .ide-vdesk-file-code {
    margin: 0;
    padding: 14px;
    border-radius: 14px;
    background: rgba(18, 24, 37, 0.96);
    color: #d8eefc;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow: auto;
}

#obs-ide .ide-vdesk-empty,
#obs-ide .ide-vdesk-hint {
    color: rgba(53, 72, 98, 0.86);
    font-size: 11px;
    line-height: 1.5;
}

#obs-ide .ide-vdesk-hint {
    position: absolute;
    right: 18px;
    bottom: calc(var(--vdesk-taskbar-height) + 18px);
    max-width: 320px;
    background: rgba(10, 18, 31, 0.54);
    color: rgba(244, 249, 255, 0.88);
    backdrop-filter: blur(16px);
}

#obs-ide .ide-vdesk-window-resize {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 3;
    width: 18px;
    height: 18px;
    border-radius: 6px 0 10px 0;
    border: 1px solid rgba(81, 103, 139, 0.22);
    background:
        linear-gradient(135deg, transparent 0 42%, rgba(81, 103, 139, 0.18) 42% 56%, transparent 56% 66%, rgba(81, 103, 139, 0.34) 66% 78%, transparent 78% 100%),
        rgba(255, 255, 255, 0.82);
    cursor: nwse-resize;
}

#obs-ide .ide-vdesk-settings-group {
    display: grid;
    gap: 8px;
}

#obs-ide .ide-vdesk-project-actions,
#obs-ide .ide-vdesk-chip-row,
#obs-ide .ide-vdesk-dock-items,
#obs-ide .ide-vdesk-taskbar-left,
#obs-ide .ide-vdesk-task-launchers,
#obs-ide .ide-vdesk-tray {
    display: flex;
    align-items: center;
    gap: 8px;
}

#obs-ide .ide-vdesk-chip-row--wrap {
    flex-wrap: wrap;
}

#obs-ide .ide-vdesk-action,
#obs-ide .ide-vdesk-chip,
#obs-ide .ide-vdesk-dock-item,
#obs-ide .ide-vdesk-start-button,
#obs-ide .ide-vdesk-task-launcher {
    position: relative;
    z-index: 1;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(18, 30, 49, 0.62);
    color: #eef7ff;
    font-size: 11px;
    font-weight: 700;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

#obs-ide .ide-vdesk-action:not(.ide-vdesk-action--ghost),
#obs-ide .ide-vdesk-chip.is-active,
#obs-ide .ide-vdesk-dock-item.is-active,
#obs-ide .ide-vdesk-start-button.is-active {
    border-color: var(--vdesk-chip-active-border);
    background: linear-gradient(180deg, var(--vdesk-chip-active-1), var(--vdesk-chip-active-2));
}

#obs-ide .ide-vdesk-action--ghost {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(221, 234, 251, 0.86);
}

#obs-ide .ide-vdesk-taskbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: var(--vdesk-taskbar-height);
    padding: 6px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(180deg, var(--vdesk-taskbar-1), var(--vdesk-taskbar-2)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

#obs-ide .ide-vdesk-start-button {
    min-width: 104px;
    background: linear-gradient(180deg, var(--vdesk-start-1), var(--vdesk-start-2));
    border-color: rgba(40, 82, 38, 0.58);
    color: #f7fff7;
    font-weight: 800;
}

#obs-ide .ide-vdesk-task-launcher {
    min-width: 64px;
    padding-inline: 10px;
    background: var(--vdesk-launcher-bg);
    border-color: var(--vdesk-launcher-border);
    color: var(--vdesk-launcher-text);
}

#obs-ide .ide-vdesk-dock-items {
    min-width: 0;
    overflow: auto;
    flex-wrap: nowrap;
}

#obs-ide .ide-vdesk-dock-item {
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(255, 255, 255, 0.58);
    border-color: rgba(61, 79, 110, 0.14);
    color: var(--vdesk-taskbar-text);
}

#obs-ide .ide-vdesk-tray {
    justify-content: flex-end;
    min-width: 0;
}

#obs-ide .ide-vdesk-dock-status {
    max-width: 240px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(16, 28, 46, 0.72);
    color: rgba(245, 250, 255, 0.94);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#obs-ide .ide-vdesk-tray-meta,
#obs-ide .ide-vdesk-clock {
    color: var(--vdesk-taskbar-text);
    font-size: 11px;
    font-weight: 700;
}

#obs-ide .ide-vdesk-clock {
    min-width: 58px;
    text-align: right;
}

#obs-ide .ide-vdesk-start-menu {
    position: absolute;
    left: 12px;
    bottom: calc(var(--vdesk-taskbar-height) + 10px);
    z-index: 5;
    width: min(420px, calc(100% - 24px));
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(15, 23, 40, 0.94), rgba(11, 16, 29, 0.96)),
        radial-gradient(circle at top left, rgba(111, 218, 255, 0.14), transparent 42%);
    box-shadow:
        0 30px 54px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
}

#obs-ide .ide-vdesk-start-head {
    display: grid;
    gap: 2px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#obs-ide .ide-vdesk-start-kicker {
    color: rgba(173, 220, 255, 0.72);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

#obs-ide .ide-vdesk-start-title {
    color: #f8fbff;
    font-size: 15px;
    font-weight: 800;
}

#obs-ide .ide-vdesk-start-meta {
    color: rgba(198, 214, 236, 0.76);
    font-size: 10px;
}

#obs-ide .ide-vdesk-start-section {
    display: grid;
    gap: 8px;
}

#obs-ide .ide-vdesk-start-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    text-align: left;
    background: rgba(255, 255, 255, 0.04);
    color: #edf6ff;
}

#obs-ide .ide-vdesk-start-item--wide {
    background: rgba(255, 255, 255, 0.05);
}

#obs-ide .ide-vdesk-start-item-mark {
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    min-height: 36px;
    border-radius: 12px;
    color: #08111f;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#obs-ide .ide-vdesk-start-item-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

#obs-ide .ide-vdesk-start-item-label {
    color: #f7fbff;
    font-size: 12px;
    font-weight: 800;
}

#obs-ide .ide-vdesk-start-item-meta {
    color: rgba(198, 214, 236, 0.74);
    font-size: 10px;
    line-height: 1.4;
}

#obs-ide .ide-vdesk-action:hover,
#obs-ide .ide-vdesk-chip:hover,
#obs-ide .ide-vdesk-dock-item:hover,
#obs-ide .ide-vdesk-start-button:hover,
#obs-ide .ide-vdesk-task-launcher:hover,
#obs-ide .ide-vdesk-window-close:hover,
#obs-ide .ide-vdesk-window-control:hover,
#obs-ide .ide-vdesk-file-row:hover,
#obs-ide .ide-vdesk-start-item:hover,
#obs-ide .ide-vdesk-shortcut:hover,
#obs-ide .ide-vdesk-window-title:hover {
    transform: translateY(-1px);
}

#obs-ide .ide-vdesk-action:hover,
#obs-ide .ide-vdesk-chip:hover,
#obs-ide .ide-vdesk-dock-item:hover,
#obs-ide .ide-vdesk-start-item:hover,
#obs-ide .ide-vdesk-file-row:hover {
    border-color: rgba(126, 211, 255, 0.28);
    background: rgba(16, 42, 72, 0.04);
}

#obs-ide .ide-vdesk-action:focus-visible,
#obs-ide .ide-vdesk-chip:focus-visible,
#obs-ide .ide-vdesk-dock-item:focus-visible,
#obs-ide .ide-vdesk-start-button:focus-visible,
#obs-ide .ide-vdesk-task-launcher:focus-visible,
#obs-ide .ide-vdesk-window-control:focus-visible,
#obs-ide .ide-vdesk-window-close:focus-visible,
#obs-ide .ide-vdesk-file-row:focus-visible,
#obs-ide .ide-vdesk-shortcut:focus-visible,
#obs-ide .ide-vdesk-start-item:focus-visible,
#obs-ide .ide-vdesk-window-title:focus-visible {
    outline: 2px solid rgba(126, 211, 255, 0.74);
    outline-offset: 2px;
}

@media (max-width: 980px) {
    #obs-ide .ide-preview-overlay[data-mode="desktop"] .ide-preview-shell {
        width: min(98vw, 1280px);
        height: min(94vh, 920px);
        padding: 10px;
    }

    #obs-ide .ide-vdesk-icon-grid {
        top: 14px;
        left: 10px;
        width: 68px;
        bottom: calc(var(--vdesk-taskbar-height) + 8px);
    }

    #obs-ide .ide-vdesk-window-layer {
        inset: 14px 8px calc(var(--vdesk-taskbar-height) + 8px) 82px;
    }

    #obs-ide .ide-vdesk-window {
        width: calc(100% - 12px);
        max-width: calc(100% - 12px);
        height: min(58vh, 520px);
    }

    #obs-ide .ide-vdesk-hint {
        max-width: 280px;
    }

    #obs-ide .ide-vdesk-taskbar {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 6px;
        padding-top: 8px;
    }

    #obs-ide .ide-vdesk-dock-items,
    #obs-ide .ide-vdesk-tray {
        justify-content: flex-start;
    }

    #obs-ide .ide-vdesk-tray {
        flex-wrap: wrap;
    }

    #obs-ide .ide-vdesk-start-menu {
        width: min(360px, calc(100% - 24px));
    }
}

#obs-ide .ide-history-drawer[hidden] {
    display: none !important;
}

#obs-ide .ide-history-drawer {
    position: absolute;
    top: 18px;
    right: 18px;
    bottom: 18px;
    width: min(360px, calc(100vw - 54px));
    z-index: 4;
}

#obs-ide .ide-history-drawer-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    padding: 18px;
    border: 1px solid var(--ide-line);
    border-radius: 24px;
    background: linear-gradient(180deg, var(--ide-panel), var(--ide-panel-soft));
    box-shadow: var(--ide-shell-shadow);
}

#obs-ide .ide-saved-workspaces-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow: auto;
}

#obs-ide .ide-history-card {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--ide-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

#obs-ide .ide-history-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#obs-ide .ide-history-project-row {
    position: relative;
    display: block;
}

#obs-ide .ide-history-card--project {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.025));
}

#obs-ide .ide-history-card--with-delete {
    padding-right: 60px;
}

#obs-ide .ide-history-delete {
    appearance: none;
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    min-width: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(27, 31, 43, 0.94), rgba(18, 21, 31, 0.98)),
        radial-gradient(circle at top, rgba(255, 118, 130, 0.1), transparent 62%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 18px rgba(0, 0, 0, 0.16);
    color: rgba(255, 179, 188, 0.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(-50%);
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

#obs-ide .ide-history-delete:hover {
    border-color: rgba(255, 130, 142, 0.3);
    background:
        linear-gradient(180deg, rgba(73, 22, 33, 0.9), rgba(42, 16, 24, 0.98)),
        radial-gradient(circle at top, rgba(255, 132, 143, 0.18), transparent 58%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 10px 22px rgba(0, 0, 0, 0.2);
    color: #ffd0d6;
    transform: translateY(-50%) scale(1.03);
}

#obs-ide .ide-history-delete:focus-visible {
    outline: none;
    border-color: rgba(255, 130, 142, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 1px rgba(255, 130, 142, 0.18),
        0 10px 22px rgba(0, 0, 0, 0.22);
}

#obs-ide .ide-history-delete-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#obs-ide .ide-history-delete-icon svg {
    width: 16px;
    height: 16px;
}

#obs-ide .ide-history-checkpoints {
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

#obs-ide .ide-history-checkpoints[open] {
    border-color: rgba(255, 255, 255, 0.08);
}

#obs-ide .ide-history-checkpoints-summary {
    padding: 11px 14px;
    color: var(--text-2, #d6d9e5);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

#obs-ide .ide-history-checkpoints-summary::-webkit-details-marker {
    display: none;
}

#obs-ide .ide-history-checkpoints-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 10px 10px;
}

#obs-ide .ide-history-card--checkpoint {
    padding: 12px 13px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
}

#obs-ide .ide-history-card:hover {
    border-color: var(--ide-line-strong);
    background: rgba(255, 255, 255, 0.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 10px 22px rgba(0, 0, 0, 0.14);
    transform: translateY(-1px);
}

#obs-ide .ide-history-card:disabled,
#obs-ide .ide-history-delete:disabled {
    opacity: 0.58;
    cursor: default;
    transform: none;
}

#obs-ide .ide-history-card:disabled:hover {
    border-color: var(--ide-line);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transform: none;
}

#obs-ide .ide-history-delete:disabled:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(180deg, rgba(27, 31, 43, 0.94), rgba(18, 21, 31, 0.98)),
        radial-gradient(circle at top, rgba(255, 118, 130, 0.1), transparent 62%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 18px rgba(0, 0, 0, 0.16);
    color: rgba(255, 179, 188, 0.92);
    transform: translateY(-50%);
}

#obs-ide .ide-history-card.is-active {
    border-color: color-mix(in srgb, var(--accent, #47d47f) 54%, white 10%);
}

#obs-ide .ide-history-card-title {
    color: var(--text-1, #f5efe9);
    font-size: 14px;
    font-weight: 700;
}

#obs-ide .ide-history-card-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#obs-ide .ide-model-route-card {
    width: 100%;
    min-height: 100px;
    gap: 5px;
    padding: 10px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018)),
        rgba(20, 22, 30, 0.98);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 18px rgba(0, 0, 0, 0.14);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#obs-ide .ide-model-route-card .obs-model-card-tier {
    top: 9px;
    right: 9px;
}

#obs-ide .ide-model-route-card:hover,
#obs-ide .ide-model-route-card.is-active {
    border-color: var(--accent-line);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 26px rgba(0, 0, 0, 0.22);
}

#obs-ide .ide-model-route-card.is-active {
    background:
        linear-gradient(180deg, rgba(28, 20, 30, 0.98), rgba(20, 15, 24, 0.98)),
        radial-gradient(circle at top right, var(--accent-soft-14), transparent 34%);
}

#obs-ide .ide-model-route-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding-top: 20px;
}

#obs-ide .ide-model-route-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

#obs-ide .ide-model-route-title {
    color: var(--text-1, #f5efe9);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

#obs-ide .ide-model-route-kicker {
    color: var(--text-3, rgba(178, 196, 226, 0.74));
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

#obs-ide .ide-model-price-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    max-width: 94px;
    padding: 0 7px;
    border-radius: 999px;
    border: 1px solid var(--accent-line);
    background: var(--accent-soft-12);
    color: var(--accent-text);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

#obs-ide .ide-history-card-meta {
    margin-top: 6px;
    color: var(--text-3, #9399ad);
    font-size: 12px;
    line-height: 1.5;
}

#obs-ide .ide-history-card-meta--pricing {
    color: rgba(211, 230, 219, 0.86);
}

#obs-ide .ide-model-route-desc,
#obs-ide .ide-model-route-meta {
    margin-top: 0;
    font-size: 10px;
    line-height: 1.25;
}

#obs-ide .ide-model-route-desc {
    color: var(--text-3, rgba(223, 229, 240, 0.86));
}

#obs-ide .ide-model-route-meta {
    color: rgba(186, 205, 223, 0.72);
}

#obs-ide #obs-ide-model-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#obs-ide .ide-model-route-card .obs-model-card-tags {
    gap: 4px;
    min-height: 18px;
    margin-top: 0;
}

#obs-ide .ide-model-route-card .obs-model-card-tag {
    min-height: 17px;
    padding: 1px 6px;
    font-size: 9px;
}

#obs-ide .ide-cli-download-overlay[hidden] {
    display: none !important;
}

#obs-ide .ide-cli-download-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(4, 6, 10, 0.68);
    backdrop-filter: blur(14px);
    z-index: 145;
}

#obs-ide .ide-project-name-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(4, 6, 10, 0.68);
    backdrop-filter: blur(12px);
}

#obs-ide .ide-project-name-dialog {
    width: min(440px, calc(100vw - 40px));
    display: grid;
    gap: 16px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(16, 19, 28, 0.98), rgba(7, 9, 14, 0.99));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

#obs-ide .ide-project-name-dialog-title {
    margin: 0;
    color: var(--text-1, #f4f7fb);
    font-size: 1.15rem;
    font-weight: 760;
}

#obs-ide .ide-project-name-field {
    display: grid;
    gap: 8px;
    color: rgba(221, 229, 239, 0.78);
    font-size: 0.78rem;
    font-weight: 680;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

#obs-ide .ide-project-name-field input {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    padding: 0 12px;
    color: var(--text-1, #f4f7fb);
    background: rgba(255, 255, 255, 0.055);
    font: 600 0.96rem/1.2 var(--font-ui, "Inter", sans-serif);
    outline: none;
}

#obs-ide .ide-project-name-field input:focus {
    border-color: rgba(64, 224, 166, 0.58);
    box-shadow: 0 0 0 3px rgba(64, 224, 166, 0.13);
}

#obs-ide .ide-project-name-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#obs-ide .ide-cli-download-shell {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) 1px minmax(250px, 0.78fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 26px 28px;
    width: min(1040px, calc(100vw - 40px));
    min-height: 520px;
    padding: 28px 30px 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 32px;
    background:
        radial-gradient(circle at top left, rgba(111, 63, 149, 0.2), transparent 34%),
        radial-gradient(circle at 82% 6%, rgba(106, 177, 255, 0.1), transparent 28%),
        linear-gradient(180deg, rgba(10, 12, 18, 0.985), rgba(4, 6, 10, 0.995));
    box-shadow:
        0 34px 88px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

#obs-ide .ide-cli-download-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 18%, transparent 74%, rgba(255, 255, 255, 0.02));
    pointer-events: none;
}

#obs-ide .ide-cli-download-header {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 2px 56px 4px 0;
    text-align: center;
    position: relative;
    z-index: 1;
}

#obs-ide .ide-cli-download-header .ide-section-label {
    color: color-mix(in srgb, var(--text-3, #9399ad) 86%, white 14%);
}

#obs-ide .ide-cli-download-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    backdrop-filter: blur(8px);
}

#obs-ide .ide-cli-download-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    z-index: 1;
}

#obs-ide .ide-cli-download-column--copy {
    gap: 14px;
    justify-content: flex-start;
    padding: 4px 10px 2px 0;
    min-height: 0;
}

#obs-ide .ide-cli-download-column--platforms {
    gap: 16px;
    justify-content: flex-start;
    padding: 4px 26px 2px 0;
}

#obs-ide .ide-cli-download-title {
    max-width: 18ch;
    color: var(--text-1, #f5efe9);
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    text-wrap: balance;
}

#obs-ide .ide-cli-download-copy {
    max-width: 52ch;
    color: var(--text-2, #d6d9e5);
    font-size: 15px;
    line-height: 1.72;
}

#obs-ide .ide-cli-download-copy p {
    margin: 0;
    color: #cfd5e3;
}

#obs-ide .ide-cli-download-copy code {
    padding: 1px 7px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.95em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#obs-ide .ide-cli-download-guides {
    display: grid;
    gap: 12px;
    min-height: 0;
    overflow: auto;
    padding-right: 6px;
}

#obs-ide .ide-cli-download-guide {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(20, 23, 33, 0.82), rgba(8, 10, 16, 0.92));
    overflow: hidden;
}

#obs-ide .ide-cli-download-guide[open] {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#obs-ide .ide-cli-download-guide-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    color: var(--text-1, #f5efe9);
    cursor: pointer;
    list-style: none;
}

#obs-ide .ide-cli-download-guide-summary::-webkit-details-marker {
    display: none;
}

#obs-ide .ide-cli-download-guide-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

#obs-ide .ide-cli-download-guide-status {
    flex-shrink: 0;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-3, #9399ad);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#obs-ide .ide-cli-download-guide-status.is-available {
    border-color: rgba(109, 248, 155, 0.26);
    background: rgba(53, 198, 102, 0.12);
    color: #90f0ab;
}

#obs-ide .ide-cli-download-guide-body {
    display: grid;
    gap: 10px;
    padding: 0 16px 16px;
}

#obs-ide .ide-cli-download-guide-body p {
    margin: 0;
    color: var(--text-3, #9399ad);
    font-size: 12px;
    line-height: 1.6;
}

#obs-ide .ide-cli-download-steps {
    margin: 0;
    padding-left: 22px;
    display: grid;
    gap: 8px;
    color: var(--text-2, #d6d9e5);
}

#obs-ide .ide-cli-download-steps li {
    padding-left: 2px;
}

#obs-ide .ide-cli-download-steps li::marker {
    color: rgba(245, 239, 233, 0.78);
    font-weight: 700;
}

#obs-ide .ide-cli-download-note {
    max-width: 52ch;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-3, #9399ad);
    font-size: 11.5px;
    line-height: 1.7;
    letter-spacing: 0.04em;
}

#obs-ide .ide-cli-download-divider {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.18), rgba(121, 198, 255, 0.22), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03));
    border-radius: 999px;
    opacity: 0.92;
}

#obs-ide .ide-cli-download-platforms {
    display: grid;
    gap: 16px;
}

#obs-ide .ide-cli-download-platform {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    width: 100%;
    min-height: 122px;
    padding: 18px 18px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(23, 25, 34, 0.94), rgba(9, 11, 17, 0.985));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 12px 28px rgba(0, 0, 0, 0.18);
    color: var(--text-1, #f5efe9);
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

#obs-ide .ide-cli-download-platform:not([disabled]):hover {
    transform: translateY(-2px);
    border-color: rgba(102, 242, 146, 0.42);
    background: linear-gradient(180deg, rgba(26, 42, 34, 0.96), rgba(9, 13, 17, 0.99));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 18px 34px rgba(0, 0, 0, 0.28);
}

#obs-ide .ide-cli-download-platform:not([disabled]):focus-visible {
    outline: none;
    border-color: rgba(102, 242, 146, 0.52);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 1px rgba(102, 242, 146, 0.2),
        0 18px 34px rgba(0, 0, 0, 0.28);
}

#obs-ide .ide-cli-download-platform[disabled] {
    cursor: default;
    opacity: 0.76;
    border-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(20, 22, 30, 0.92), rgba(10, 11, 17, 0.97));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    transform: none;
}

#obs-ide .ide-cli-download-platform-title {
    color: var(--text-1, #f5efe9);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}

#obs-ide .ide-cli-download-platform-copy {
    color: var(--text-3, #9399ad);
    font-size: 12px;
    line-height: 1.6;
}

#obs-ide .ide-cli-download-platform-badge {
    justify-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(109, 248, 155, 0.28);
    background: rgba(53, 198, 102, 0.12);
    color: #90f0ab;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#obs-ide .ide-cli-download-platform-badge.is-unavailable {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-3, #9399ad);
}

/* ======================================================================
   REDESIGN — Task Timeline + Bitsy HUD + Task Progress
   Design 1 (mascot front-and-center) + Design 4 (task timeline nodes)
   + Design 2 (task completion %)
   ====================================================================== */

/* Reset margin-top now that the task-header sits above the list */
#obs-ide .ide-task-list {
    margin-top: 0;
}

/* ── Task section header with completion progress ─────────────────────── */
#obs-ide .ide-task-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

#obs-ide .ide-task-progress {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    min-width: 0;
}

#obs-ide .ide-task-progress[hidden] {
    display: none !important;
}

#obs-ide .ide-task-progress-text {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-3, #9399ad);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

#obs-ide .ide-task-progress-pct {
    color: color-mix(in srgb, var(--accent, #47d47f) 90%, white 10%);
}

#obs-ide .ide-task-progress-bar {
    width: 52px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

#obs-ide .ide-task-progress-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent, #47d47f), color-mix(in srgb, var(--accent, #47d47f) 55%, #a8f0c2 45%));
    transition: width 480ms cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 3px;
}

/* ── Task timeline track ──────────────────────────────────────────────── */
#obs-ide .ide-task-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
}

#obs-ide .ide-task-timeline-track {
    position: absolute;
    left: 11px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.07);
    z-index: 0;
    pointer-events: none;
}

/* ── Task timeline node ───────────────────────────────────────────────── */
#obs-ide .ide-task-node {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 18px;
    position: relative;
    z-index: 1;
}

#obs-ide .ide-task-node:last-child {
    padding-bottom: 4px;
}

#obs-ide .ide-task-node-dot {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    border: 2px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-4, #6b7280);
    transition: border-color 240ms ease, background 240ms ease, color 240ms ease, box-shadow 240ms ease;
}

#obs-ide .ide-task-node.is-done .ide-task-node-dot {
    background: color-mix(in srgb, var(--accent, #47d47f) 100%, transparent);
    border-color: var(--accent, #47d47f);
    color: #041109;
    font-size: 10px;
}

#obs-ide .ide-task-node.is-active .ide-task-node-dot {
    background: rgba(255, 88, 88, 0.12);
    border-color: rgba(255, 88, 88, 0.72);
    color: #ff9090;
    box-shadow: 0 0 0 3px rgba(255, 88, 88, 0.10), 0 0 10px rgba(255, 88, 88, 0.30);
    animation: ide-task-node-pulse 2.2s ease-in-out infinite;
}

#obs-ide .ide-task-node.is-blocked .ide-task-node-dot {
    background: rgba(255, 107, 107, 0.1);
    border-color: rgba(255, 107, 107, 0.52);
    color: #ff9a9a;
}

@keyframes ide-task-node-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255, 88, 88, 0.08), 0 0 8px rgba(255, 88, 88, 0.22); }
    50% { box-shadow: 0 0 0 4px rgba(255, 88, 88, 0.14), 0 0 16px rgba(255, 88, 88, 0.44); }
}

#obs-ide .ide-task-node-body {
    flex: 1;
    min-width: 0;
    padding-top: 3px;
}

#obs-ide .ide-task-node-title {
    font-size: var(--ide-font-body);
    line-height: 1.4;
    color: var(--text-2, #d3d7e4);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

#obs-ide .ide-task-node.is-done .ide-task-node-title {
    color: var(--text-3, #9399ad);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--accent, #47d47f) 58%, transparent);
    text-decoration-thickness: 1.5px;
}

#obs-ide .ide-task-node.is-active .ide-task-node-title {
    color: var(--text-1, #f5efe9);
    font-weight: 600;
}

#obs-ide .ide-task-node-sub {
    font-size: 9.5px;
    margin-top: 3px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#obs-ide .ide-task-node.is-done .ide-task-node-sub {
    color: color-mix(in srgb, var(--accent, #47d47f) 78%, white 10%);
}

#obs-ide .ide-task-node.is-active .ide-task-node-sub {
    color: #ff9090;
}

#obs-ide .ide-task-node.is-blocked .ide-task-node-sub {
    color: #ff9a9a;
}

/* ══════════════════════════════════════════════════════════════════════
   BITSY HUD — Design 1 style: in-flow header card at top of stream
   ══════════════════════════════════════════════════════════════════════ */

#obs-ide .ide-agent-hud {
    /* In-flow: sits above the scrollable body, always visible */
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 20px 24px;
    margin: 14px 14px 0;
    border-radius: 16px;
    min-height: 96px;
    background:
        radial-gradient(ellipse at 25% 60%, rgba(147, 115, 255, 0.14), transparent 55%),
        linear-gradient(135deg, rgba(20, 14, 38, 0.98) 0%, rgba(12, 10, 26, 0.97) 100%);
    border: 1px solid rgba(167, 139, 255, 0.16);
    border-bottom: 1px solid rgba(167, 139, 255, 0.10);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 4px 16px rgba(0, 0, 0, 0.28);
    z-index: 2;
}

/* ── Bitsy identity block (left side) ── */
#obs-ide .ide-agent-hud-bitsy {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* ── Mascot outer wrapper — sizing + bob animation (Design 1 size=52) ── */
#obs-ide .ide-agent-hud-mascot {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    position: relative;
    overflow: visible; /* antenna protrudes above */
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    animation: ide-hud-bob 3.2s ease-in-out infinite;
}

/* Fast bob when active */
#obs-ide .ide-agent-hud[data-streaming="true"] .ide-agent-hud-mascot,
#obs-ide .ide-agent-hud[data-busy="true"] .ide-agent-hud-mascot {
    animation: ide-hud-bob-fast 0.8s ease-in-out infinite;
}

/* Antenna stick — fixed px per primitives.jsx (not proportional): top:-6, height:10, width:2 */
#obs-ide .ide-hud-bitsy-antenna-stick {
    position: absolute;
    left: 50%;
    top: -6px;
    transform: translateX(-50%);
    width: 2px;
    height: 10px;
    background: rgba(180, 170, 210, 0.55);
    border-radius: 1px;
}

/* Antenna orb — fixed px per primitives.jsx: top:-10, 6×6, glows in mood color */
#obs-ide .ide-hud-bitsy-antenna-orb {
    position: absolute;
    left: 50%;
    top: -10px;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hud-mood-color);
    box-shadow: 0 0 8px var(--hud-mood-color), 0 0 14px rgba(74, 235, 201, 0.3);
    animation: ide-hud-orb-pulse 1.6s ease-in-out infinite;
}

/* Robot body — border-radius: 52*0.22=11.44≈11px */
#obs-ide .ide-hud-bitsy-body {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #2a2335 0%, #1a1622 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 11px;
    box-shadow:
        inset 0 -6px 12px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.36);
}

/* Dark visor panel — s=52: top:s*.20=10, left/right:s*.14=7, bottom:s*.32=17, radius:s*.10=5 */
#obs-ide .ide-hud-bitsy-visor {
    position: absolute;
    top: 10px;
    left: 7px;
    right: 7px;
    bottom: 17px;
    background: linear-gradient(180deg, #0a0910 0%, #1a1525 100%);
    border-radius: 5px;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
    padding: 0 4px;
}

/* Glowing eyes — s=52: 6px, glow s*0.15=7.8≈8px, wander + blink animations */
#obs-ide .ide-hud-bitsy-eye {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hud-mood-color);
    box-shadow:
        0 0 8px var(--hud-mood-color),
        0 0 16px rgba(74, 235, 201, 0.3);
    transition: background 400ms ease, box-shadow 400ms ease;
    /* blink + wander side-to-side */
    animation:
        ide-hud-blink     4.2s ease-in-out infinite,
        ide-hud-eye-look  6.8s ease-in-out infinite;
}

/* Eyes blink & wander slightly offset from each other */
#obs-ide .ide-hud-bitsy-eye:nth-child(2) {
    animation-delay: 0.07s, 0.4s;
}

/* Mouth bar — s=52: width s*.28=14.6≈15px, bottom s*.14=7.3≈7px */
#obs-ide .ide-hud-bitsy-mouth {
    position: absolute;
    left: 50%;
    bottom: 7px;
    transform: translateX(-50%);
    width: 15px;
    height: 3px;
    border-radius: 2px;
    background: rgba(170, 160, 200, 0.30);
    transition: background 400ms ease;
}

/* Status dot (top-right corner) */
#obs-ide .ide-hud-bitsy-status {
    position: absolute;
    right: -2px;
    top: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(160, 155, 190, 0.5); /* dim when idle */
    border: 2px solid #0a0a14;
    transition: background 300ms ease, box-shadow 300ms ease;
}

/* ── Mood color: idle / context-ready — cyan (matches primitives.jsx "thinking" default) ── */
#obs-ide .ide-agent-hud:not([data-busy]):not([data-streaming]) {
    --hud-mood-color: #4aebc9;
}
/* Dim the status dot when idle (no active run) */
#obs-ide .ide-agent-hud:not([data-busy]):not([data-streaming]) .ide-hud-bitsy-status {
    background: rgba(74, 235, 201, 0.35);
    box-shadow: 0 0 4px rgba(74, 235, 201, 0.25);
}

/* ── Mood color: busy / thinking — cyan ── */
#obs-ide .ide-agent-hud[data-busy="true"] {
    --hud-mood-color: #4aebc9;
}
#obs-ide .ide-agent-hud[data-busy="true"] .ide-hud-bitsy-status {
    background: #4aebc9;
    box-shadow: 0 0 6px rgba(74, 235, 201, 0.7);
}
#obs-ide .ide-agent-hud[data-busy="true"] .ide-hud-bitsy-mouth {
    background: rgba(74, 235, 201, 0.25);
}

/* ── Mood color: streaming / typing — mint ── */
#obs-ide .ide-agent-hud[data-streaming="true"] {
    --hud-mood-color: #47d47f;
}
#obs-ide .ide-agent-hud[data-streaming="true"] .ide-hud-bitsy-status {
    background: #47d47f;
    box-shadow: 0 0 6px rgba(71, 212, 127, 0.7);
}
#obs-ide .ide-agent-hud[data-streaming="true"] .ide-hud-bitsy-mouth {
    background: rgba(71, 212, 127, 0.25);
}

/* ── Animations ── */

/* Idle bob — gentle float with slight lean */
@keyframes ide-hud-bob {
    0%   { transform: translateY(0)    rotate(0deg);    }
    25%  { transform: translateY(-2px) rotate(0.6deg);  }
    50%  { transform: translateY(-4px) rotate(0deg);    }
    75%  { transform: translateY(-1px) rotate(-0.6deg); }
    100% { transform: translateY(0)    rotate(0deg);    }
}

/* Active bob — fast bounce with more energy */
@keyframes ide-hud-bob-fast {
    0%   { transform: translateY(0)    rotate(-1.5deg); }
    25%  { transform: translateY(-3px) rotate(0deg);    }
    50%  { transform: translateY(0)    rotate(1.5deg);  }
    75%  { transform: translateY(-2px) rotate(0deg);    }
    100% { transform: translateY(0)    rotate(-1.5deg); }
}

/* Antenna orb pulse */
@keyframes ide-hud-orb-pulse {
    0%, 100% { opacity: 1;    transform: translateX(-50%) scale(1);    }
    50%      { opacity: 0.45; transform: translateX(-50%) scale(0.78); }
}

/* Eye blink — matches s=52 eye height of 6px */
@keyframes ide-hud-blink {
    0%, 88%, 96%, 100% { height: 6px; }
    92%                { height: 1px; }
}

/* Eye wander — looks left, then right, then center */
@keyframes ide-hud-eye-look {
    0%,  12%, 38%, 52%, 78%, 100% { transform: translateX(0);   }
    18%, 32%                      { transform: translateX(-2px); }
    58%, 72%                      { transform: translateX(2px);  }
}

/* ── Identity text ── */
#obs-ide .ide-agent-hud-identity {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

#obs-ide .ide-agent-hud-name {
    color: rgba(247, 242, 236, 0.96);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

/* Status text — teal color, same as Design 1's "● pair-coding..." */
#obs-ide .ide-agent-hud-identity .ide-agent-hud-meta {
    font-size: 13px;
    font-weight: 600;
    color: color-mix(in srgb, #5ee8d4 80%, white 12%);
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 360px;
}

/* ── Stream label + badges (right side) ── */
#obs-ide .ide-agent-hud-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 0;
    flex-shrink: 0;
}

#obs-ide .ide-agent-hud-label {
    color: rgba(233, 225, 244, 0.50);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* Badge pills — Design 1's "● CONTEXT READY" / "4 ACTIVE" */
#obs-ide .ide-agent-hud-badges {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#obs-ide .ide-hud-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid;
    line-height: 1;
}

#obs-ide .ide-hud-badge--mint {
    color: color-mix(in srgb, #47d47f 90%, white 10%);
    background: rgba(71, 212, 127, 0.10);
    border-color: rgba(71, 212, 127, 0.28);
}

#obs-ide .ide-hud-badge--violet {
    color: color-mix(in srgb, #b085ff 90%, white 10%);
    background: rgba(167, 139, 255, 0.10);
    border-color: rgba(167, 139, 255, 0.28);
}

#obs-ide .ide-hud-badge--amber {
    color: color-mix(in srgb, #f5c542 90%, white 10%);
    background: rgba(245, 197, 66, 0.10);
    border-color: rgba(245, 197, 66, 0.28);
}

/* ══════════════════════════════════════════════════════════════════════
   CENTERED STREAM COLUMN — Design 1's max-width constrained feel
   ══════════════════════════════════════════════════════════════════════ */

/* The body scrolls with horizontally centered content — max 880px (Design 1 = 900px) */
#obs-ide .ide-agent-body {
    padding-top: 16px;
    padding-left: max(24px, calc((100% - 880px) / 2));
    padding-right: max(24px, calc((100% - 880px) / 2));
}

/* Bring live-rail into the same centered column */
#obs-ide .ide-agent-live-rail {
    left: max(16px, calc((100% - 904px) / 2));
    right: max(16px, calc((100% - 904px) / 2));
}

/* HUD card centred too */
#obs-ide .ide-agent-hud {
    margin-left: max(16px, calc((100% - 900px) / 2)) !important;
    margin-right: max(16px, calc((100% - 900px) / 2)) !important;
}

/* ── Design 1 section cards — one per stage section ─────────────────── */
#obs-ide .ide-log-entry--section {
    display: block;
    padding: 9px 14px 9px 14px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-left: 3px solid var(--ide-log-accent);
    margin-bottom: 5px;
    transition: background 140ms ease;
}
#obs-ide .ide-log-entry--section:hover {
    background: rgba(255, 255, 255, 0.038);
}
#obs-ide .ide-log-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}
#obs-ide .ide-log-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: color-mix(in srgb, var(--ide-log-accent) 80%, white 14%);
    text-transform: uppercase;
}
#obs-ide .ide-log-entry--section .ide-log-copy {
    margin-top: 0;
    color: var(--text-1, #f5efe9);
    font-size: 12.5px;
    line-height: 1.5;
}
#obs-ide .ide-log-entry--section .ide-log-time {
    font-size: 10px;
    color: var(--text-3);
    flex-shrink: 0;
}

/* ── Workspace summary card (turn-end write summary) ─────────────────── */
#obs-ide .ide-log-entry--workspace-summary {
    border-left-color: #86efac;
    background: rgba(74, 222, 128, 0.04);
}
#obs-ide .ide-log-entry--workspace-summary .ide-log-section-label {
    color: #86efac;
}
#obs-ide .ide-log-entry--workspace-summary .ide-log-section-head {
    justify-content: flex-start;
    gap: 6px;
}

/* ── Log entry card style — Design 1 card treatment ─────────────────── */
/* Stage and assistant entries get a surface card */
#obs-ide .ide-log-entry--stage,
#obs-ide .ide-log-entry--assistant {
    padding: 12px 16px 12px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.028);
    border: 1px solid rgba(255, 255, 255, 0.062);
    border-left: 3px solid var(--ide-log-accent);
    margin-bottom: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: background 160ms ease;
}

#obs-ide .ide-log-entry--stage:hover,
#obs-ide .ide-log-entry--assistant:hover {
    background: rgba(255, 255, 255, 0.040);
}

/* User messages — subtle warm card */
#obs-ide .ide-log-entry--user {
    padding: 12px 16px 12px 10px;
    border-radius: 12px;
    background: rgba(255, 147, 171, 0.07);
    border: 1px solid rgba(255, 147, 171, 0.12);
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* Status / system messages — compact, less prominent */
#obs-ide .ide-log-entry--status {
    padding: 6px 10px 6px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-left: 2px solid var(--ide-log-accent);
    margin-bottom: 6px;
}

/* ── Session header — constrain width + boost title size ─────────────── */
#obs-ide .ide-session-header {
    padding: 4px 8px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 0;
}

#obs-ide .ide-session-title-label {
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3, #9399ad);
    font-weight: 700;
}

#obs-ide .ide-session-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-1, #f5efe9);
    letter-spacing: -0.01em;
    margin-top: 3px;
}

@media (max-width: 1400px) {
    #obs-ide .ide-frame-toolbar {
        grid-template-columns:
            minmax(210px, 1fr)
            repeat(4, minmax(88px, auto))
            minmax(150px, auto)
            minmax(220px, 0.95fr)
            minmax(102px, auto)
            minmax(148px, 0.58fr);
    }
}

@media (max-width: 1220px) {
    #obs-ide .ide-shell-frame {
        width: 100%;
    }

    #obs-ide .ide-frame-toolbar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #obs-ide .ide-top-tile--project,
    #obs-ide .ide-top-tile--diff,
    #obs-ide .ide-top-tile--tokens {
        grid-column: span 3;
    }

    #obs-ide .ide-mode-toggle {
        grid-column: span 3;
        justify-content: stretch;
    }

    #obs-ide .ide-mode-button {
        width: 100%;
    }
}

@media (max-width: 980px) {
    #obs-ide .ide-content-area {
        padding: 14px;
    }

    #obs-ide .ide-shell-frame {
        padding: 14px;
        border-radius: 24px;
    }

    #obs-ide .ide-frame-body {
        grid-template-columns: 1fr;
    }

    #obs-ide .ide-left-rail {
        grid-template-rows: auto auto auto;
    }

    #obs-ide .ide-session-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #obs-ide .ide-session-status-panel {
        text-align: left;
        min-width: 0;
    }
}

@media (max-width: 720px) {
    #obs-ide #obs-ide-model-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #obs-ide .ide-model-route-card {
        min-height: 0;
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        column-gap: 10px;
        row-gap: 4px;
        padding: 10px 11px;
        border-radius: 12px;
    }

    #obs-ide .ide-model-route-card::before {
        content: attr(data-short);
        grid-row: 1 / span 4;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 11px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.055);
        color: var(--text-2, rgba(238, 243, 255, 0.82));
        font-size: 10px;
        font-weight: 900;
    }

    #obs-ide .ide-model-route-head {
        gap: 8px;
    }

    #obs-ide .ide-model-route-title {
        font-size: 13px;
    }

    #obs-ide .ide-model-route-kicker,
    #obs-ide .ide-model-price-badge {
        font-size: 9px;
    }

    #obs-ide .ide-model-route-desc,
    #obs-ide .ide-model-route-meta {
        margin-top: 6px;
        font-size: 10.5px;
        line-height: 1.28;
    }

    #obs-ide .ide-frame-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #obs-ide .ide-top-tile--project,
    #obs-ide .ide-top-tile--diff,
    #obs-ide .ide-top-tile--tokens {
        grid-column: span 2;
    }

    #obs-ide .ide-mode-toggle {
        grid-column: span 2;
    }

    #obs-ide .ide-composer-row {
        grid-template-columns: 34px 34px minmax(0, 1fr) 78px;
    }

    #obs-ide .ide-preview-overlay {
        padding: 14px;
    }

    #obs-ide .ide-preview-shell {
        width: min(94vw, 700px);
        height: min(88vh, 700px);
        min-height: 360px;
    }

    #obs-ide .ide-cli-download-overlay {
        padding: 14px;
    }

    #obs-ide .ide-cli-download-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        min-height: 0;
        gap: 18px;
        padding: 22px 20px 20px;
    }

    #obs-ide .ide-cli-download-header {
        justify-items: flex-start;
        padding: 4px 54px 2px 0;
        text-align: left;
    }

    #obs-ide .ide-cli-download-title {
        max-width: none;
        font-size: clamp(28px, 7vw, 38px);
    }

    #obs-ide .ide-cli-download-column--copy,
    #obs-ide .ide-cli-download-column--platforms {
        justify-content: flex-start;
        padding-right: 0;
    }

    #obs-ide .ide-cli-download-guides {
        overflow: visible;
        padding-right: 0;
    }

    #obs-ide .ide-cli-download-divider {
        width: 100%;
        height: 1px;
    }

    #obs-ide .ide-cli-download-platform {
        min-height: 0;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   DESIGN 1 FULL LAYOUT OVERHAUL
   Transforms the IDE from a grid-of-boxes into a centered stream layout.
   Design 1 (centered column feel) + Design 4 task rail.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Bitsy body — primitives.jsx dark colors, no override needed ── */
/* Body: #2a2335→#1a1622 and visor: #0a0910→#1a1525 are set in the Bitsy HUD section above */

/* ── 2. Open up the outer shell — remove the border-box look ── */
#obs-ide .ide-shell-frame {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 0 !important;
}

/* ── 3. Frame toolbar → Design 1 flat tool-strip ── */
#obs-ide .ide-frame-toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 7px 14px !important;
    min-height: 46px !important;
    height: auto !important;
    grid-template-columns: none !important;
    grid-auto-rows: none !important;
    background: linear-gradient(180deg, rgba(18, 14, 32, 0.99), rgba(12, 9, 22, 0.98)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055) !important;
    border-radius: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ── 4. Project tile → slim inline identity (no box, no labels) ── */
#obs-ide .ide-top-tile--project {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 52px !important;   /* cap tile so toolbar stays single height */
    padding: 0 12px 0 0 !important;
    border: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
    max-width: 200px !important;
    overflow: hidden !important;
    align-self: center !important;
}
/* Hide the "CURRENT PROJECT NAME" label */
#obs-ide .ide-top-tile--project .ide-section-label {
    display: none !important;
}
/* Hide path (too long for strip) */
#obs-ide .ide-project-path {
    display: none !important;
}
/* Runtime-meta tags (SESSION/VOXBOX/HOT) — single row below project name */
#obs-ide .ide-frame-toolbar .ide-project-runtime-meta {
    display: flex !important;
    flex-wrap: nowrap !important;   /* never wrap to 2nd row */
    margin-top: 2px !important;
    gap: 4px !important;
    overflow: hidden !important;
    max-width: 200px !important;
}
/* Compact the chips — Design 1: height:16, padding: 0 6px, truncate if too long */
#obs-ide .ide-frame-toolbar .ide-project-runtime-meta .ide-meta-chip {
    min-height: 16px !important;
    height: 16px !important;
    padding: 0 6px !important;
    font-size: 8.5px !important;
    max-width: 80px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
#obs-ide .ide-project-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 200px !important;
    letter-spacing: -0.01em !important;
}

/* ── 5. Diff tile → inline chip cluster (no box) ── */
#obs-ide .ide-top-tile--diff {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 10px !important;
    border: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 3px !important;
    flex-shrink: 0 !important;
    align-self: center !important;
}
#obs-ide .ide-top-tile--diff .ide-section-label {
    display: none !important;
}

/* ── 6. Tokens tile → inline mini meter (no box) ── */
#obs-ide .ide-top-tile--tokens {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 2px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 10px !important;
    border: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    align-self: center !important;
}
#obs-ide .ide-top-tile--tokens .ide-section-label {
    font-size: 8px !important;
    letter-spacing: 0.12em !important;
    color: rgba(200, 195, 230, 0.40) !important;
    display: block !important;
}
#obs-ide .ide-token-count {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: rgba(255, 180, 195, 0.9) !important;
}
#obs-ide .ide-token-meta {
    font-size: 10px !important;
    color: rgba(200, 180, 210, 0.5) !important;
}

/* ── 7. Right-side group: ↓Download → Play → tokens all float right together ── */
#obs-ide .ide-action-button--play {
    margin-left: 0 !important;   /* Play stays next to Download */
    height: 32px !important;
    padding: 0 20px !important;
    font-size: 13px !important;
}
/* ↓ Download is the anchor that pushes everything right of it to the far right */
#obs-ide #ide-export-toolbar {
    margin-left: auto !important;
}

/* ── 8. Action buttons (CLI, New Folder, etc.) — compact pill style ── */
/* Base .ide-action-button has height:52px !important; min-height:52px !important — override both */
#obs-ide .ide-frame-toolbar .ide-action-button {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
}
/* Play/Preview button stays taller and green */
#obs-ide .ide-frame-toolbar .ide-action-button--play {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 22px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
}
/* ↓ Download and export-toolbar inline with other compact buttons */
#obs-ide #ide-export-toolbar {
    height: 30px !important;
    min-height: 30px !important;
}

/* Mode toggle — strip its panel-section box too */
#obs-ide .ide-mode-toggle {
    border-radius: 8px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: none !important;
    align-self: center !important;
}
#obs-ide .ide-mode-button {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
}

/* ── 9. Frame body: Design 1 — NO left rail, single full-width column ── */
#obs-ide .ide-frame-body {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    background: linear-gradient(160deg, rgba(14, 10, 26, 0.99) 0%, rgba(8, 6, 16, 1) 100%) !important;
    border-radius: 0 !important;
    min-height: 0 !important;
}

/* ── 10. Left rail: HIDDEN — Design 1 has no sidebar ── */
#obs-ide .ide-left-rail {
    display: none !important;
}
#obs-ide .ide-rail-section--mascot {
    display: none !important;
}

/* ── 11. Main stage: open, no panel box ── */
#obs-ide .ide-main-stage {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
#obs-ide .ide-session-shell {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    height: 100% !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* ── 12. Session header: Design 1 — bold user-query title + inline task panel ── */
#obs-ide .ide-session-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 24px 24px 20px !important;
    padding-left: max(24px, calc((100% - 900px) / 2)) !important;
    padding-right: max(24px, calc((100% - 900px) / 2)) !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055) !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
/* Heading grows to fill space left of task panel */
#obs-ide .ide-session-heading {
    flex: 1 !important;
    min-width: 0 !important;
}
/* "CONTEXT WINDOW" eyebrow label — Design 1 shows it above the title */
#obs-ide .ide-session-title-label {
    display: block !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--text-3, rgba(200, 195, 230, 0.55)) !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
}
/* Big bold session title — matches Design 1's 20px/800 user query line */
#obs-ide .ide-session-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
    color: var(--ide-text, #f5efe9) !important;
    margin-top: 0 !important;
}
/* Workspace meta line — Design 1's mono subtitle */
#obs-ide .ide-session-context {
    margin-top: 5px !important;
    font-size: 12px !important;
    font-family: var(--ide-mono, monospace) !important;
    color: rgba(200, 195, 230, 0.50) !important;
    line-height: 1.4 !important;
}
/* Inline task panel — sits to the RIGHT of the title (Design 1 top-right task list) */
#obs-ide .ide-inline-task-panel {
    flex: 0 0 220px !important;
    width: 220px !important;
    overflow: hidden !important;
}
#obs-ide .ide-inline-task-panel .ide-eyebrow {
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(200, 195, 230, 0.55) !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 7px !important;
}
#obs-ide .ide-inline-task-panel .ide-task-progress {
    margin-bottom: 8px !important;
    display: block !important;
}
#obs-ide .ide-inline-task-panel .ide-task-node {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
#obs-ide .ide-inline-task-panel .ide-task-node:last-child {
    border-bottom: none !important;
}
#obs-ide .ide-inline-task-panel .ide-task-node-title {
    font-size: 11.5px !important;
    line-height: 1.3 !important;
}
#obs-ide .ide-inline-task-panel .ide-task-node-dot {
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 3px !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Done node — mint filled */
#obs-ide .ide-inline-task-panel .ide-task-node.is-done .ide-task-node-dot {
    background: var(--ide-mint, #47d47f) !important;
    border: none !important;
    color: #04130c !important;
}
#obs-ide .ide-inline-task-panel .ide-task-node.is-done .ide-task-node-title {
    text-decoration: line-through !important;
    color: rgba(200, 195, 230, 0.45) !important;
}
/* Active node — red border + glow dot */
#obs-ide .ide-inline-task-panel .ide-task-node.is-active .ide-task-node-dot {
    border: 1.5px solid var(--ide-red, #ef3a5c) !important;
    color: var(--ide-red, #ef3a5c) !important;
}
#obs-ide .ide-inline-task-panel .ide-task-node.is-active .ide-task-node-title {
    color: var(--ide-text, #f5efe9) !important;
}
/* Pending / blocked nodes */
#obs-ide .ide-inline-task-panel .ide-task-node.is-pending .ide-task-node-dot,
#obs-ide .ide-inline-task-panel .ide-task-node.is-blocked .ide-task-node-dot {
    border: 1.5px solid rgba(200, 195, 230, 0.25) !important;
    color: rgba(200, 195, 230, 0.35) !important;
}
#obs-ide .ide-inline-task-panel .ide-task-node.is-pending .ide-task-node-title {
    color: rgba(200, 195, 230, 0.6) !important;
}
/* Hide the track inside the inline panel (Design 1 uses no track line here) */
#obs-ide .ide-inline-task-panel .ide-task-timeline-track {
    display: none !important;
}

/* ── 13. Ambient glow behind stream ── */
#obs-ide .ide-session-body {
    position: relative !important;
    background:
        radial-gradient(ellipse 60% 50% at 70% 15%, rgba(167, 139, 255, 0.08), transparent 65%),
        radial-gradient(ellipse 40% 40% at 20% 85%, rgba(239, 58, 92, 0.05), transparent 60%),
        linear-gradient(180deg, rgba(10, 8, 20, 0.99), rgba(6, 5, 14, 1)) !important;
}

/* ── 14. Agent scroll: no inner border box ── */
#obs-ide .ide-agent-scroll {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
#obs-ide .ide-agent-scroll::before,
#obs-ide .ide-agent-scroll::after {
    display: none !important;
}

/* ── 15. Bitsy HUD — centred in the stream column, ambient glow ── */
#obs-ide .ide-agent-hud {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
    margin-left: max(16px, calc((100% - 900px) / 2)) !important;
    margin-right: max(16px, calc((100% - 900px) / 2)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 6px 24px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(167, 139, 255, 0.08) !important;
}

/* ── 16. Composer shell: transparent bg, no panel box ── */
#obs-ide .ide-composer-shell {
    background: linear-gradient(0deg, rgba(8, 6, 16, 0.99) 72%, rgba(8, 6, 16, 0)) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ── 17. Override responsive grid-column spans that break flex layout ── */
@media (max-width: 1400px) {
    #obs-ide .ide-frame-toolbar {
        grid-template-columns: none !important;
    }
}
@media (max-width: 1220px) {
    #obs-ide .ide-frame-toolbar {
        grid-template-columns: none !important;
    }
    #obs-ide .ide-top-tile--project,
    #obs-ide .ide-top-tile--diff,
    #obs-ide .ide-top-tile--tokens {
        grid-column: auto !important;
    }
    #obs-ide .ide-mode-toggle {
        grid-column: auto !important;
        justify-content: flex-start !important;
    }
    #obs-ide .ide-mode-button {
        width: auto !important;
    }
}
@media (max-width: 980px) {
    #obs-ide .ide-shell-frame {
        padding: 0 !important;
        border-radius: 0 !important;
    }
    #obs-ide .ide-frame-body {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 720px) {
    #obs-ide .ide-frame-toolbar {
        grid-template-columns: none !important;
    }
    #obs-ide .ide-top-tile--project,
    #obs-ide .ide-top-tile--diff,
    #obs-ide .ide-top-tile--tokens {
        grid-column: auto !important;
    }
    #obs-ide .ide-mode-toggle {
        grid-column: auto !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   DESIGN 1 — FINAL POLISH
   ══════════════════════════════════════════════════════════════════════ */

/* Collapse inline task panel below 600px — too narrow for side-by-side */
@media (max-width: 600px) {
    #obs-ide .ide-session-header {
        flex-direction: column !important;
    }
    #obs-ide .ide-inline-task-panel {
        flex: 0 0 auto !important;
        width: 100% !important;
    }
}

/* Make the "idle / no project" session title slightly dimmer */
#obs-ide .ide-session-title:not(:empty) {
    /* full bright handled above */
}

/* Remove top-level page topbar bottom line — the toolbar already has one */
#obs-ide .ide-page-topbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Toolbar separator dividers — slim 1px vertical lines between groups */
#obs-ide .ide-frame-toolbar .ide-toolbar-divider {
    width: 1px !important;
    height: 24px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    flex-shrink: 0 !important;
    margin: 0 3px !important;
}

/* ↓ Download toolbar button — same as other compact action buttons */
#obs-ide #ide-export-toolbar {
    flex-shrink: 0 !important;
}

/* Ensure session-shell fills the main stage vertically */
#obs-ide .ide-main-stage {
    height: 100% !important;
}
#obs-ide .ide-session-shell {
    display: flex !important;
    flex-direction: column !important;
}
#obs-ide .ide-session-body {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════════════════
   DESIGN 1 — PART 3: HUD OPEN LOOK · CREW STRIP · COMPOSER CENTERING
   All three fixes from the "middle context + bottom bar" pass.
   ══════════════════════════════════════════════════════════════════════ */

/* ── A. Bitsy HUD — strip the card, open row matching Design 1 ────── */
/* Remove the rounded dark card; make HUD transparent, just a content row */
#obs-ide .ide-agent-hud {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
    /* Horizontally centred in the 900px column, flush with session header */
    padding: 20px max(24px, calc((100% - 880px) / 2)) 16px !important;
    margin: 0 !important;
    z-index: 1 !important;
}

/* Name: 18px/800 matching Design 1 */
#obs-ide .ide-agent-hud-name {
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    color: rgba(247, 242, 236, 0.96) !important;
}

/* Status meta: mint teal, 12px — "● pair-coding your workspace" */
#obs-ide .ide-agent-hud-identity .ide-agent-hud-meta {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #47d47f !important;
    margin-top: 2px !important;
}

/* Right-side label: right-aligned eyebrow */
#obs-ide .ide-agent-hud-label {
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-align: right !important;
    color: rgba(200, 195, 230, 0.50) !important;
    margin-bottom: 4px !important;
    display: block !important;
}

/* Badges row: right-aligned */
#obs-ide .ide-agent-hud-badges {
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* ── B. Live Rail — Design 1 crew strip (slim divider + pills) ─────── */
/* Remove the heavy dark card; make it a full-width transparent strip */
#obs-ide .ide-agent-live-rail {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2 !important;
    background: rgba(8, 6, 16, 0.88) !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    /* Centred content within 900px column */
    padding: 9px max(24px, calc((100% - 880px) / 2)) 10px !important;
}

/* Main status row: compact flex (signal · title · [meta right]) */
#obs-ide .ide-agent-live-main {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    grid-template-columns: none !important;
    min-width: 0 !important;
}

/* Signal dots: no extra min-width */
#obs-ide .ide-agent-live-signal {
    min-width: 0 !important;
    flex-shrink: 0 !important;
}

/* Title: dimmed, Design 1 scale */
#obs-ide .ide-agent-live-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: rgba(200, 195, 230, 0.65) !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/* Detail text: hidden — crew strip shows agent pills, not prose */
#obs-ide .ide-agent-live-detail {
    display: none !important;
}

/* Meta (AWAITING RUN / token·time readout): right side */
#obs-ide .ide-agent-live-meta {
    flex-shrink: 0 !important;
    margin-left: auto !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    color: rgba(200, 195, 230, 0.45) !important;
    white-space: nowrap !important;
    text-align: right !important;
    max-width: none !important;
}

/* Workers: horizontal pill row (Design 1 agent chips: ZIC/C2/DIR/SYN) */
#obs-ide .ide-agent-live-workers {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    overflow: hidden !important;
    min-width: 0 !important;
}

/* Each worker pill: bordered, coloured dot + initials + role text */
#obs-ide .ide-agent-live-worker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 11px !important;
    min-height: 26px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: none !important;
    font-size: 10.5px !important;
}

/* Reduce body bottom-padding to match the slimmer rail */
#obs-ide .ide-agent-body {
    padding-bottom: 80px !important;
}

/* ── C. Composer shell — centred 900px column, gradient fade ────────── */
#obs-ide .ide-composer-shell {
    /* Gradient wipe: transparent top → opaque dark at bottom */
    background: linear-gradient(0deg,
        rgba(8, 6, 16, 1.00) 72%,
        rgba(8, 6, 16, 0.00)) !important;
    /* Centre content within the 900px stream column */
    padding: 20px max(24px, calc((100% - 880px) / 2)) 14px !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Quick tools row (Scan / Bugs / Refactor / Tests): pill style */
#obs-ide .ide-quick-tools {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin: 0 !important;
}

#obs-ide .ide-chip-button {
    height: 27px !important;
    min-height: 27px !important;
    padding: 0 14px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    color: rgba(210, 205, 240, 0.80) !important;
    transition: background 120ms ease, border-color 120ms ease !important;
    letter-spacing: 0 !important;
}

#obs-ide .ide-chip-button:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: rgba(240, 235, 255, 0.95) !important;
}

/* Composer row: flex layout (override the grid), Design 1 bordered box */
#obs-ide .ide-composer-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(167, 139, 255, 0.20) !important;
    background: rgba(16, 11, 30, 0.96) !important;
    box-shadow:
        0 0 0 3px rgba(167, 139, 255, 0.05),
        0 8px 24px rgba(0, 0, 0, 0.28) !important;
    /* Kill the original grid definition */
    grid-template-columns: none !important;
    grid-auto-rows: none !important;
}

/* Attach buttons: fixed square */
#obs-ide .ide-composer-row .ide-attach-button {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 10px !important;
}

/* Textarea grows to fill row */
#obs-ide .ide-agent-input {
    flex: 1 !important;
    min-width: 0 !important;
    align-self: center !important;
    border: none !important;
    background: transparent !important;
    padding: 0 4px !important;
}

/* Send button: taller, prominent */
#obs-ide .ide-composer-row .ide-send-button {
    flex: 0 0 auto !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 24px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

/* Stop button: slightly less tall */
#obs-ide .ide-composer-row .ide-stop-button {
    flex: 0 0 auto !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
}

/* Upload hint text below composer row */
#obs-ide .ide-upload-hint {
    font-size: 10.5px !important;
    color: var(--text-3, rgba(200, 195, 230, 0.38)) !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   DESIGN 1 — SITE THEME INTEGRATION
   Wire all hardcoded dark-purple tones to the global CSS vars so the IDE
   inherits the same background / accent / border as the rest of the site.
   Vars defined in obsidian_base.css:
     --bg-0  #0d0d0d   page background
     --bg-1  #141414   panel / topbar surface
     --bg-2  #1a1a1a   raised card / input surface
     --bg-3  #222      elevated surface
     --bg-hover  #2a2a2a
     --text  #e8e4de   --text-2  #a09888   --text-3  #665e52
     --border  #2a2622   --border-bright  #3a3630
     --accent  hsl(h,s,l)   --accent-dim  --accent-mid  --accent-glow
   ══════════════════════════════════════════════════════════════════════ */

/* ── Page topbar ("IDE / Workspace" breadcrumb bar) ── */
#obs-ide .ide-page-topbar {
    background: var(--bg-1) !important;
    border-bottom-color: var(--border) !important;
}

/* ── Tool strip (toolbar with project name + buttons) ── */
#obs-ide .ide-frame-toolbar {
    background: var(--bg-1) !important;
    border-bottom-color: var(--border) !important;
}

/* ── Frame body (the scrollable stage area) ── */
#obs-ide .ide-frame-body {
    background: var(--bg-0) !important;
}

/* ── Session body (stream area background) ── */
#obs-ide .ide-session-body {
    background: var(--bg-0) !important;
}

/* ── Session header bottom separator ── */
#obs-ide .ide-session-header {
    border-bottom-color: var(--border) !important;
}

/* ── Session title (main heading) ── */
#obs-ide .ide-session-title {
    color: var(--text) !important;
}

/* ── Session context / mono subtitle ── */
#obs-ide .ide-session-context {
    color: var(--text-3) !important;
}

/* ── Project name in toolbar ── */
#obs-ide .ide-project-name {
    color: var(--text) !important;
}

/* ── Toolbar action buttons (CLI / New Folder / etc.) ── */
#obs-ide .ide-frame-toolbar .ide-action-button:not(.ide-action-button--play) {
    background: var(--bg-2) !important;
    border: 1px solid var(--border-bright) !important;
    color: var(--text-2) !important;
}
#obs-ide .ide-frame-toolbar .ide-action-button:not(.ide-action-button--play):hover {
    border-color: var(--accent-mid) !important;
    color: var(--accent) !important;
    background: var(--bg-hover) !important;
}

/* ── Mode toggle (Siege / Phased) ── */
#obs-ide .ide-mode-toggle {
    background: var(--bg-2) !important;
    border-color: var(--border-bright) !important;
}
#obs-ide .ide-mode-button {
    color: var(--text-2) !important;
}
#obs-ide .ide-mode-button.is-active,
#obs-ide .ide-mode-button[data-active="true"],
#obs-ide .ide-mode-button[aria-pressed="true"] {
    background: var(--accent-dim) !important;
    color: var(--accent) !important;
    border-color: var(--accent-mid) !important;
}

/* ── HUD separator line ── */
#obs-ide .ide-agent-hud {
    border-bottom-color: var(--border) !important;
}

/* ── Live rail (crew strip) ── */
#obs-ide .ide-agent-live-rail {
    background: var(--bg-0) !important;
    border-top-color: var(--border) !important;
}

/* ── Worker pills ── */
#obs-ide .ide-agent-live-worker {
    background: var(--bg-2) !important;
    border-color: var(--border-bright) !important;
    color: var(--text-2) !important;
}

/* ── Composer shell gradient ── */
#obs-ide .ide-composer-shell {
    background: linear-gradient(0deg,
        var(--bg-0) 72%,
        transparent) !important;
}

/* ── Composer row: surface card + accent glow on border ── */
#obs-ide .ide-composer-row {
    background: var(--bg-1) !important;
    border-color: var(--border-bright) !important;
    box-shadow:
        0 0 0 3px var(--accent-dim),
        0 8px 24px rgba(0, 0, 0, 0.30) !important;
}

/* ── Quick-tool chip buttons ── */
#obs-ide .ide-chip-button {
    background: var(--bg-2) !important;
    border-color: var(--border-bright) !important;
    color: var(--text-2) !important;
}
#obs-ide .ide-chip-button:hover {
    background: var(--bg-hover) !important;
    border-color: var(--accent-mid) !important;
    color: var(--accent) !important;
}

/* ── Textarea inside composer row ── */
#obs-ide .ide-agent-input {
    color: var(--text) !important;
}
#obs-ide .ide-agent-input::placeholder {
    color: var(--text-3) !important;
}

/* ── Send button: uses theme accent ── */
#obs-ide .ide-send-button:not(.ide-stop-button) {
    background: var(--accent) !important;
    color: var(--bg-0) !important;
    border: none !important;
}
#obs-ide .ide-send-button:not(.ide-stop-button):hover {
    filter: brightness(1.12) !important;
}
#obs-ide .ide-send-button:not(.ide-stop-button)[disabled] {
    background: var(--bg-3) !important;
    color: var(--text-3) !important;
    filter: none !important;
}

/* ── Log entry message cards: site surface colors ── */
#obs-ide .ide-log-entry--stage,
#obs-ide .ide-log-entry--assistant {
    background: var(--bg-1) !important;
    border-color: var(--border) !important;
    /* colored left border kept from earlier section — just override bg + side border */
}
#obs-ide .ide-log-entry--stage:hover,
#obs-ide .ide-log-entry--assistant:hover {
    background: var(--bg-2) !important;
}

/* ── User message card ── */
#obs-ide .ide-log-entry--user {
    background: var(--bg-2) !important;
    border-color: var(--border-bright) !important;
}
#obs-ide .ide-log-entry--user:hover {
    background: var(--bg-3) !important;
}

/* ── Inline task panel node borders ── */
#obs-ide .ide-inline-task-panel .ide-task-node {
    border-bottom-color: var(--border) !important;
}

/* ── Diff chips in toolbar ── */
#obs-ide .ide-top-tile--diff {
    border-left-color: var(--border) !important;
    border-right-color: var(--border) !important;
}
#obs-ide .ide-top-tile--tokens {
    border-left-color: var(--border) !important;
}
#obs-ide .ide-top-tile--project {
    border-right-color: var(--border) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   DESIGN 1 — PART 4: TOOLBAR SYMMETRY · ACTIVE COLOR · STREAM GRAY
   ══════════════════════════════════════════════════════════════════════ */

/* ── A. Stream area: dark gray (#141414) instead of pure black ──────── */
/* bg-0 (#0d0d0d) is too dark; bg-1 (#141414) reads as "dark gray" */
#obs-ide .ide-frame-body {
    background: var(--bg-1) !important;
}
#obs-ide .ide-session-body {
    background: var(--bg-1) !important;
}
/* Agent scroll + body inherit from session-body; make transparent so bg shows through */
#obs-ide .ide-agent-scroll,
#obs-ide .ide-agent-body {
    background: transparent !important;
}
/* Composer gradient now starts from bg-1 */
#obs-ide .ide-composer-shell {
    background: linear-gradient(0deg,
        var(--bg-1) 72%,
        transparent) !important;
}
/* Live rail matches the stream bg */
#obs-ide .ide-agent-live-rail {
    background: var(--bg-1) !important;
}
/* Message cards now sit on bg-2 (slightly lighter than bg-1 stream) */
#obs-ide .ide-log-entry--stage,
#obs-ide .ide-log-entry--assistant {
    background: var(--bg-2) !important;
}
#obs-ide .ide-log-entry--stage:hover,
#obs-ide .ide-log-entry--assistant:hover {
    background: var(--bg-3) !important;
}
#obs-ide .ide-log-entry--user {
    background: var(--bg-3) !important;
    border-color: var(--border-bright) !important;
}
#obs-ide .ide-log-entry--user:hover {
    background: var(--bg-hover) !important;
}

/* ── B. Toolbar symmetry: all buttons same height + center-aligned ──── */
/* Base .ide-action-button has align-self:start; override to center */
#obs-ide .ide-frame-toolbar .ide-action-button {
    align-self: center !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    letter-spacing: 0 !important;
}

/* Play button stays taller + green, also centered */
#obs-ide .ide-frame-toolbar .ide-action-button--play {
    align-self: center !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 20px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
}

/* ── Mode toggle: invisible wrapper → looks like two separate pills ── */
/* Strip the ide-panel-section card look from the toggle wrapper */
#obs-ide .ide-mode-toggle {
    display: flex !important;
    flex-direction: row !important;
    gap: 5px !important;
    align-items: center !important;
    align-self: center !important;
    /* No wrapper box — just a row of buttons */
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Each mode button matches action button exactly */
#obs-ide .ide-mode-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-bright) !important;
    background: var(--bg-2) !important;
    color: var(--text-2) !important;
    cursor: pointer !important;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease !important;
    letter-spacing: 0 !important;
}
#obs-ide .ide-mode-button:hover {
    background: var(--bg-hover) !important;
    border-color: var(--accent-mid) !important;
    color: var(--accent) !important;
}

/* Active / selected mode button: matches site nav .active pattern */
#obs-ide .ide-mode-button.is-active,
#obs-ide .ide-mode-button[aria-pressed="true"],
#obs-ide .ide-mode-button[data-active="true"] {
    background: var(--accent-dim) !important;
    border-color: var(--accent-mid) !important;
    color: var(--accent) !important;
    font-weight: 700 !important;
}

/* ── C. Diff tile in toolbar: slim, no panel box ── */
/* Strip ide-panel-section styles off the diff tile (already done earlier but reinforce) */
#obs-ide .ide-top-tile--diff {
    background: transparent !important;
    border: none !important;
    border-left: 1px solid var(--border) !important;
    border-right: 1px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    align-self: center !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 10px !important;
}

/* Diff label: hide section label (too tall) */
#obs-ide .ide-top-tile--diff .ide-section-label {
    display: none !important;
}

/* Diff summary chips: match Design 1 tag style */
#obs-ide .ide-diff-summary {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

/* Diff empty state: dimmed text, same height as buttons */
#obs-ide .ide-diff-empty {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-3) !important;
    white-space: nowrap !important;
    line-height: 30px !important;
}

/* Token tile in toolbar: slim inline */
#obs-ide .ide-top-tile--tokens {
    background: transparent !important;
    border: none !important;
    border-left: 1px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    align-self: center !important;
    padding: 0 10px !important;
    min-height: 0 !important;
    height: auto !important;
}
#obs-ide .ide-top-tile--tokens .ide-section-label {
    display: block !important;
    font-size: 8px !important;
    color: var(--text-3) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}
#obs-ide .ide-token-count {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    line-height: 1.2 !important;
}
#obs-ide .ide-token-meta {
    font-size: 10px !important;
    color: var(--text-3) !important;
    line-height: 1.2 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   DESIGN 1 — PART 5: THEME-VAR CLEANUP
   Replace every remaining hardcoded rgba color in Part 3 overrides with
   the proper site CSS variables so every theme (purple/blue/red/etc.)
   correctly inherits into the IDE without leftover dark-purple tones.
   ══════════════════════════════════════════════════════════════════════ */

/* ── HUD text: site text vars ──────────────────────────────────────── */
#obs-ide .ide-agent-hud-name {
    color: var(--text) !important;
}

/* HUD meta ("pair-coding…") uses the IDE's mint green — intentional status colour */
#obs-ide .ide-agent-hud-identity .ide-agent-hud-meta {
    color: var(--ide-mint, #47d47f) !important;
}

/* Right-side eyebrow label above the badge row */
#obs-ide .ide-agent-hud-label {
    color: var(--text-3) !important;
}

/* ── Live rail text: site text vars ────────────────────────────────── */
#obs-ide .ide-agent-live-title {
    color: var(--text-2) !important;
}
#obs-ide .ide-agent-live-meta {
    color: var(--text-3) !important;
}

/* ── Session header: use theme border ──────────────────────────────── */
#obs-ide .ide-session-header {
    border-bottom-color: var(--border) !important;
}

/* ── Session context mono line: use theme text-3 ───────────────────── */
#obs-ide .ide-session-context {
    color: var(--text-3) !important;
}

/* ── Inline task-panel eyebrow + node subtle borders ───────────────── */
#obs-ide .ide-inline-task-panel .ide-eyebrow {
    color: var(--text-3) !important;
}
#obs-ide .ide-inline-task-panel .ide-task-node {
    border-bottom-color: var(--border) !important;
}
#obs-ide .ide-inline-task-panel .ide-task-node.is-pending .ide-task-node-title {
    color: var(--text-2) !important;
}

/* ── Live rail worker pills: site surface ───────────────────────────── */
#obs-ide .ide-agent-live-worker {
    background: var(--bg-2) !important;
    border-color: var(--border-bright) !important;
    color: var(--text-2) !important;
}

/* ── Page topbar: explicitly use theme surface ─────────────────────── */
#obs-ide .ide-page-topbar {
    background: var(--bg-1) !important;
    border-bottom-color: var(--border) !important;
}

/* ── HUD bottom divider: theme border ──────────────────────────────── */
#obs-ide .ide-agent-hud {
    border-bottom-color: var(--border) !important;
}

/* ── Composer: gradient wipe from exact bg-1 ───────────────────────── */
#obs-ide .ide-composer-shell {
    background: linear-gradient(0deg,
        var(--bg-1) 80%,
        transparent) !important;
}

/* ── Composer row: bg-2 card so it reads above bg-1 stream ─────────── */
#obs-ide .ide-composer-row {
    background: var(--bg-2) !important;
    border-color: var(--border-bright) !important;
    box-shadow:
        0 0 0 3px var(--accent-dim),
        0 8px 24px rgba(0, 0, 0, 0.28) !important;
}

/* ── Quick-tool chips: bg-2/border-bright ──────────────────────────── */
#obs-ide .ide-chip-button {
    background: var(--bg-2) !important;
    border-color: var(--border-bright) !important;
    color: var(--text-2) !important;
}
#obs-ide .ide-chip-button:hover {
    background: var(--bg-hover) !important;
    border-color: var(--accent-mid) !important;
    color: var(--accent) !important;
}

/* ── Toolbar dividers ───────────────────────────────────────────────── */
#obs-ide .ide-frame-toolbar .ide-toolbar-divider {
    background: var(--border-bright) !important;
}

/* ── Upload hint below composer ────────────────────────────────────── */
#obs-ide .ide-upload-hint {
    color: var(--text-3) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   DESIGN 1 — PART 6: LEFT RAIL — THREE INVISIBLE BOXES
   Token graph / Workspace diff / Task list live in a 220px left column.
   All from Design 2 (run meter + task list) and Design 4 (diff block).
   "Invisible" = transparent bg, no shadow, just a hairline separator.
   ══════════════════════════════════════════════════════════════════════ */

/* ── A. Frame body: re-enable 220px left column ─────────────────────── */
#obs-ide .ide-frame-body {
    grid-template-columns: 220px minmax(0, 1fr) !important;
}

/* ── B. Left rail: visible, same bg as toolbar/topbar (bg-1) ────────── */
#obs-ide .ide-left-rail {
    display: flex !important;
    flex-direction: column !important;
    width: 220px !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
    border-right: 1px solid var(--border) !important;
    background: var(--bg-1) !important;
    overflow: hidden !important;
    height: 100% !important;
}

/* ── C. All rail sections: no card — just a thin bottom hairline ─────── */
#obs-ide .ide-left-rail .ide-rail-section {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
    padding: 16px 18px !important;
    flex-shrink: 0 !important;
}

/* ── D. Section label eyebrow (shared across all 3 boxes) ───────────── */
#obs-ide .ide-left-rail .ide-section-label {
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--text-3) !important;
    margin-bottom: 10px !important;
    display: block !important;
    line-height: 1 !important;
}

/* ── E. BOX 1 — Token graph ─────────────────────────────────────────── */
#obs-ide .ide-rail-section--tokens .ide-token-count {
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
    color: var(--text) !important;
}
#obs-ide .ide-rail-section--tokens .ide-token-meta {
    font-size: 11px !important;
    color: var(--text-3) !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
}
/* Sparkline SVG */
#obs-ide .ide-token-sparkline {
    width: 100% !important;
    height: 28px !important;
    display: block !important;
    margin-top: 12px !important;
    overflow: visible !important;
}
#obs-ide .ide-sparkline-fill {
    fill: var(--accent-dim) !important;
    opacity: 0.7 !important;
}
#obs-ide .ide-sparkline-line {
    fill: none !important;
    stroke: var(--accent) !important;
    stroke-width: 1.5 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* ── F. BOX 2 — Workspace diff ──────────────────────────────────────── */
#obs-ide .ide-rail-section--diff .ide-diff-summary {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    align-items: center !important;
    min-height: 24px !important;
}
#obs-ide .ide-rail-section--diff .ide-diff-empty {
    font-size: 11.5px !important;
    color: var(--text-3) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}
/* Diff chips inside the left rail */
#obs-ide .ide-rail-section--diff .ide-diff-chip {
    font-size: 10px !important;
    height: 20px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ── G. BOX 3 — Task list ───────────────────────────────────────────── */
#obs-ide .ide-rail-section--tasks {
    flex: 1 !important;
    overflow-y: auto !important;
    border-bottom: none !important;
    padding: 14px 16px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}
#obs-ide .ide-rail-section--tasks .ide-task-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 2px !important;
    flex-shrink: 0 !important;
}
#obs-ide .ide-task-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    flex: 1 !important;
    overflow-y: auto !important;
}
/* Suppress old timeline track inside the left rail */
#obs-ide .ide-task-list .ide-task-timeline-track { display: none !important; }
#obs-ide .ide-task-list .ide-task-node-sub { display: none !important; }
/* Empty state */
#obs-ide .ide-task-empty {
    font-size: 11.5px !important;
    color: var(--text-3) !important;
    line-height: 1.55 !important;
    padding: 4px 0 !important;
}
/* ── Design 2 card rows ─────────────────────────────────────────────── */
#obs-ide .ide-task-list .ide-task-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
}
#obs-ide .ide-task-list .ide-task-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 6px 9px !important;
    border-radius: 7px !important;
    border: 1px solid var(--border) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    min-width: 0 !important;
}
#obs-ide .ide-task-list .ide-task-card.is-active {
    background: rgba(239, 58, 92, 0.07) !important;
    border-color: rgba(239, 58, 92, 0.22) !important;
}
#obs-ide .ide-task-list .ide-task-card.is-blocked {
    background: rgba(255, 107, 107, 0.07) !important;
    border-color: rgba(255, 107, 107, 0.22) !important;
}
#obs-ide .ide-task-list .ide-task-card.is-done {
    opacity: 0.60 !important;
}
#obs-ide .ide-task-list .ide-task-card-icon {
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    margin-top: 1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#obs-ide .ide-task-list .ide-task-card-title {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    color: var(--text-2) !important;
    word-break: break-word !important;
}
#obs-ide .ide-task-list .ide-task-card-copy {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex: 1 !important;
}
#obs-ide .ide-task-list .ide-task-card-reason {
    display: block !important;
    color: rgba(238, 232, 224, 0.50) !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
}
#obs-ide .ide-task-list .ide-task-card.is-done .ide-task-card-title {
    text-decoration: line-through !important;
    color: var(--text-3) !important;
}
#obs-ide .ide-task-list .ide-task-card.is-done .ide-task-card-reason {
    color: rgba(121, 236, 167, 0.70) !important;
}
#obs-ide .ide-task-list .ide-task-card.is-active .ide-task-card-title {
    color: var(--text-1, #f5efe9) !important;
    font-weight: 500 !important;
}
#obs-ide .ide-task-list .ide-task-card.is-active .ide-task-card-reason {
    color: rgba(255, 218, 143, 0.76) !important;
}
#obs-ide .ide-task-list .ide-task-card.is-blocked .ide-task-card-title {
    color: #ff9a9a !important;
}
#obs-ide .ide-task-list .ide-task-card.is-blocked .ide-task-card-reason {
    color: rgba(255, 169, 169, 0.82) !important;
}

/* ── H. Download footer ─────────────────────────────────────────────── */
#obs-ide .ide-rail-footer {
    flex-shrink: 0 !important;
    padding: 12px 16px 14px !important;
    border-top: 1px solid var(--border) !important;
    margin-top: auto !important;
}
#obs-ide .ide-rail-footer .ide-action-button {
    width: 100% !important;
    justify-content: center !important;
    height: 30px !important;
    font-size: 11.5px !important;
    background: var(--bg-2) !important;
    border-color: var(--border-bright) !important;
    color: var(--text-2) !important;
}
#obs-ide .ide-rail-footer .ide-action-button:hover {
    background: var(--bg-hover) !important;
    border-color: var(--accent-mid) !important;
    color: var(--accent) !important;
}

/* ── I. Mascot section: truly gone ──────────────────────────────────── */
#obs-ide .ide-rail-section--mascot {
    display: none !important;
}

/* ── Director/User chat bubbles: conversational layer, not raw log cards ── */
#obs-ide .ide-log-entry--chat-bubble {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(860px, calc(100% - 28px));
    padding: 12px 14px 13px !important;
    border-radius: 11px !important;
    border: 1px solid var(--border) !important;
    border-left: 3px solid var(--ide-log-accent) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018)),
        var(--bg-2) !important;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

#obs-ide .ide-log-entry--chat-bubble:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.024)),
        var(--bg-2) !important;
}

#obs-ide .ide-log-entry--chat-bubble .ide-log-rail {
    display: none !important;
}

#obs-ide .ide-log-entry--chat-bubble .ide-log-column {
    min-width: 0;
    padding: 0 !important;
}

#obs-ide .ide-log-entry--chat-bubble .ide-log-head {
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

#obs-ide .ide-log-entry--chat-bubble .ide-log-title {
    color: color-mix(in srgb, var(--ide-log-accent) 82%, white 12%) !important;
    font-size: 11px;
    line-height: 1;
}

#obs-ide .ide-log-entry--chat-bubble .ide-log-kicker,
#obs-ide .ide-log-entry--chat-bubble .ide-log-badge {
    display: none !important;
}

#obs-ide .ide-log-entry--chat-bubble .ide-log-time {
    color: var(--text-3) !important;
    font-size: 9px;
}

#obs-ide .ide-log-entry--chat-bubble .ide-log-copy {
    margin-top: 0 !important;
    color: #e8ecea !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 560 !important;
    line-height: 1.62 !important;
    white-space: normal !important;
    text-shadow: none !important;
}

#obs-ide .ide-log-entry--chat-bubble .ide-log-copy-text--rich {
    line-height: 1.62;
}

#obs-ide .ide-log-entry--chat-bubble .ide-log-copy-text--rich h4 {
    margin: 0 0 0.55em;
    color: var(--text-1);
    font-size: 13px;
    line-height: 1.25;
}

#obs-ide .ide-log-entry--chat-bubble .ide-log-copy-text--rich p {
    margin: 0 0 0.76em;
}

#obs-ide .ide-log-entry--chat-bubble .ide-log-copy-text--rich ul,
#obs-ide .ide-log-entry--chat-bubble .ide-log-copy-text--rich ol {
    margin: 0.28em 0 0.8em 1.35em;
}

#obs-ide .ide-log-entry--chat-bubble .ide-log-copy-text--rich strong {
    color: #ffffff;
    font-weight: 850;
}

#obs-ide .ide-log-entry--chat-bubble .ide-log-copy-text--rich code {
    display: inline-block;
    max-width: 100%;
    padding: 1px 5px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.24);
    color: #f4d6e4;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.94em;
    overflow-wrap: anywhere;
}

#obs-ide .ide-log-entry--user.ide-log-entry--chat-bubble {
    width: min(780px, calc(100% - 36px));
    margin-left: auto;
    border-left-width: 1px !important;
    border-right: 3px solid var(--ide-log-accent) !important;
    background:
        linear-gradient(180deg, rgba(255, 70, 124, 0.065), rgba(255, 70, 124, 0.028)),
        var(--bg-2) !important;
}

#obs-ide .ide-log-entry--user.ide-log-entry--chat-bubble .ide-log-head {
    justify-content: flex-end;
}

#obs-ide .ide-log-entry--user.ide-log-entry--chat-bubble .ide-log-heading {
    text-align: right;
}

#obs-ide .ide-log-entry--user.ide-log-entry--chat-bubble .ide-log-copy {
    color: color-mix(in srgb, var(--accent, #ff2f6d) 80%, white 10%) !important;
}

#obs-ide .ide-log-entry--assistant.ide-log-entry--chat-bubble {
    margin-right: auto;
    border-left-color: rgba(255, 55, 122, 0.95) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018)),
        #1c1c1f !important;
}

/* Activity ledger rows use the same transcript card surface as Director notes. */
#obs-ide .ide-log-entry--activity.ide-log-entry--chat-bubble {
    --ide-log-accent: rgba(255, 68, 126, 0.95);
    width: min(780px, calc(100% - 36px));
    margin: 8px auto 10px;
    padding: 10px 12px 11px !important;
    border-color: rgba(255, 68, 126, 0.24) !important;
    border-left-color: var(--ide-log-accent) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.017)),
        #1c1c1f !important;
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.032) !important;
}

#obs-ide .ide-log-entry--activity.ide-log-entry--chat-bubble:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.047), rgba(255, 255, 255, 0.022)),
        #1c1c1f !important;
}

#obs-ide .ide-log-entry--activity.ide-log-entry--error.ide-log-entry--chat-bubble {
    --ide-log-accent: rgba(255, 112, 142, 0.98);
    border-color: rgba(255, 112, 142, 0.28) !important;
}

#obs-ide .ide-log-entry--activity.ide-log-entry--chat-bubble .ide-log-head {
    margin-bottom: 6px;
}

#obs-ide .ide-log-entry--activity.ide-log-entry--chat-bubble .ide-log-title {
    color: color-mix(in srgb, var(--ide-log-accent) 84%, white 12%) !important;
}

#obs-ide .ide-log-entry--activity.ide-log-entry--chat-bubble .ide-log-copy {
    color: rgba(232, 236, 234, 0.9) !important;
    font-size: 12px !important;
    line-height: 1.48 !important;
}

#obs-ide .ide-log-entry--activity.ide-log-entry--chat-bubble .ide-log-detail-toggle {
    margin-top: 8px;
}

/* ── J. Toolbar: remove now-gone diff/token tile styling leftovers ──── */
#obs-ide .ide-top-tile--diff,
#obs-ide .ide-top-tile--tokens {
    display: none !important;
}

/* ── K. Responsive: collapse rail below 860px ───────────────────────── */
@media (max-width: 860px) {
    #obs-ide .ide-frame-body {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    #obs-ide .ide-left-rail {
        display: none !important;
    }
}

@media (max-width: 820px) {
    #obs-ide .ide-topbar-actions {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 6px;
        min-width: 0;
        margin-left: auto;
    }

    #obs-ide .ide-topbar-actions .obs-report-issue-btn,
    #obs-ide .ide-topbar-select-shell {
        display: none !important;
    }

    #obs-ide #obs-ide-credits-chip {
        align-self: center;
        flex: 0 0 auto;
        max-width: min(48vw, 160px);
        min-height: 36px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 11px;
        gap: 0;
        border-radius: 999px;
    }

    #obs-ide #obs-ide-credits-chip .credits-chip-main {
        min-width: 0;
        gap: 6px;
    }

    #obs-ide #obs-ide-credits-chip .credits-chip-label {
        font-size: 9px;
    }

    #obs-ide #obs-ide-credits-chip .credits-chip-value {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
    }

    #obs-ide #obs-ide-credits-chip .credits-chip-plan {
        display: none !important;
    }
}

/* ── L. Director chat focus mode: keep the control room out of the transcript ── */
#obs-ide .ide-session-title-label,
#obs-ide #ide-session-context,
#obs-ide .ide-agent-hud-copy,
#obs-ide .ide-agent-live-workers,
#obs-ide .ide-agent-live-meta,
#obs-ide .ide-agent-live-detail,
#obs-ide .ide-quick-tools,
#obs-ide .ide-upload-hint {
    display: none !important;
}

#obs-ide .ide-session-header {
    padding-top: 10px !important;
    padding-bottom: 8px !important;
    min-height: 0 !important;
}

#obs-ide .ide-session-title {
    font-size: 20px !important;
    line-height: 1.18 !important;
    max-width: min(880px, 100%) !important;
}

#obs-ide .ide-session-body {
    min-height: 0 !important;
}

#obs-ide .ide-agent-scroll {
    padding-top: 10px !important;
}

#obs-ide .ide-agent-hud {
    min-height: 48px !important;
    padding: 8px max(22px, calc((100% - 880px) / 2)) !important;
}

#obs-ide .ide-agent-body {
    padding-bottom: 34px !important;
}

#obs-ide .ide-agent-live-rail {
    padding: 4px max(22px, calc((100% - 880px) / 2)) 6px !important;
    min-height: 30px !important;
}

#obs-ide .ide-agent-live-main {
    gap: 8px !important;
}

#obs-ide .ide-agent-live-title {
    font-size: 11px !important;
    color: var(--text-2, #a09888) !important;
}

#obs-ide .ide-composer-shell {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    gap: 0 !important;
}

/* Merge the prompt title and Bitsy status into one compact conversation header. */
#obs-ide .ide-session-shell {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
}

#obs-ide .ide-session-header {
    display: none !important;
}

#obs-ide .ide-agent-scroll {
    padding-top: 0 !important;
}

#obs-ide .ide-agent-hud {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    min-height: 86px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 14px max(22px, calc((100% - 880px) / 2)) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06)) !important;
}

#obs-ide .ide-agent-hud::before {
    content: attr(data-session-title);
    display: block;
    order: 2;
    flex: 0 1 420px;
    max-width: min(420px, 42vw);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(242, 238, 232, 0.72);
    font-size: 16px;
    font-weight: 750;
    line-height: 1.2;
}

#obs-ide .ide-agent-hud-bitsy {
    order: 1 !important;
    flex: 0 0 auto !important;
    justify-self: auto !important;
    gap: 14px !important;
}

#obs-ide .ide-agent-hud-mascot {
    width: 56px !important;
    height: 56px !important;
    flex-basis: 56px !important;
}

#obs-ide .ide-agent-hud-name {
    font-size: 22px !important;
    letter-spacing: -0.01em !important;
}

#obs-ide .ide-agent-hud-identity .ide-agent-hud-meta {
    font-size: 12px !important;
    font-weight: 800 !important;
}

@media (max-width: 980px) {
    #obs-ide .ide-agent-hud {
        justify-content: flex-start !important;
        min-height: 64px !important;
    }

    #obs-ide .ide-agent-hud::before {
        max-width: 48vw;
    }

    #obs-ide .ide-agent-hud-bitsy {
        justify-self: auto !important;
    }
}

#obs-ide .ide-log-progress-list {
    margin-top: 11px;
    display: grid;
    gap: 7px;
    padding: 9px 0 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

#obs-ide .ide-log-progress-item {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    color: rgba(238, 232, 224, 0.72);
    font-size: 12px;
    line-height: 1.35;
}

#obs-ide .ide-log-progress-dot {
    width: 7px;
    height: 7px;
    margin-top: 4px;
    border-radius: 999px;
    background: rgba(255, 46, 112, 0.35);
    box-shadow: 0 0 0 3px rgba(255, 46, 112, 0.07);
}

#obs-ide .ide-log-progress-item.is-current {
    color: rgba(255, 246, 235, 0.92);
}

#obs-ide .ide-log-progress-item.is-current .ide-log-progress-dot {
    background: var(--accent, #ff2d73);
    box-shadow: 0 0 0 3px rgba(255, 46, 112, 0.13), 0 0 12px rgba(255, 46, 112, 0.32);
}

#obs-ide .ide-log-entry--progress-done.ide-log-entry--chat-bubble {
    border-left-color: rgba(68, 214, 126, 0.88) !important;
}

#obs-ide .ide-log-entry--progress-stale.ide-log-entry--chat-bubble {
    border-left-color: rgba(255, 255, 255, 0.18) !important;
}

#obs-ide .ide-log-entry--progress-done .ide-log-progress-item {
    color: rgba(221, 246, 228, 0.84);
}

#obs-ide .ide-log-progress-item.is-done .ide-log-progress-dot,
#obs-ide .ide-log-entry--progress-done .ide-log-progress-dot {
    background: #44d67e;
    box-shadow: 0 0 0 3px rgba(68, 214, 126, 0.12), 0 0 12px rgba(68, 214, 126, 0.25);
}

#obs-ide .ide-log-progress-item.is-stale {
    color: rgba(238, 232, 224, 0.54);
}

#obs-ide .ide-log-progress-item.is-stale .ide-log-progress-dot,
#obs-ide .ide-log-entry--progress-stale .ide-log-progress-dot {
    background: rgba(238, 232, 224, 0.24);
    box-shadow: none;
}

#obs-ide .ide-log-progress-item.is-active {
    color: rgba(255, 246, 235, 0.92);
}