/* ============================================================
   Agent Browser — full-screen workspace overlay (Governed Web Execution).
   Its own surface, launched on demand; does NOT alter the portal baseline
   (backgrounds, cards, header, sidebar). Uses design tokens with safe fallbacks.
   ============================================================ */

.ab-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 18, 26, 0.62);
    backdrop-filter: blur(3px);
    padding: 24px;
}

.ab-shell {
    display: flex;
    flex-direction: column;
    width: min(1280px, 96vw);
    height: min(840px, 92vh);
    background: var(--color-card, #fff);
    border: 1px solid var(--color-border, #e6e8ee);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

/* Header */
.ab-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border, #e6e8ee);
}
.ab-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 650;
    font-size: 15px;
    color: var(--color-text, #1c2230);
}
.ab-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--color-primary, #5b6cff);
    box-shadow: 0 0 0 4px rgba(91, 108, 255, 0.18);
}
.ab-status { margin-left: auto; }
.ab-st-pill {
    font-size: 12px; font-weight: 600;
    padding: 4px 11px; border-radius: 999px;
    background: var(--color-bg-muted, #f1f3f8);
    color: var(--color-text-faint, #6a7384);
}
.ab-st--work { background: rgba(91, 108, 255, 0.12); color: var(--color-primary, #5b6cff); }
.ab-st--warn { background: rgba(214, 158, 46, 0.16); color: #b7791f; }
.ab-st--user { background: rgba(56, 161, 105, 0.14); color: #2f855a; }
.ab-st--ok { background: rgba(56, 161, 105, 0.16); color: #2f855a; }
.ab-st--fail { background: rgba(229, 62, 62, 0.14); color: #c53030; }

.ab-x {
    border: 1px solid var(--color-border, #e6e8ee);
    background: var(--color-card, #fff);
    color: var(--color-text-faint, #6a7384);
    font-size: 13px; font-weight: 600;
    padding: 6px 14px; border-radius: 8px; cursor: pointer;
}
.ab-x:hover { background: var(--color-bg-muted, #f1f3f8); color: var(--color-text, #1c2230); }

/* Body split */
.ab-body { display: flex; flex: 1; min-height: 0; }
.ab-live-wrap {
    flex: 1; min-width: 0; position: relative;
    background: #0f121a;
    display: flex; align-items: center; justify-content: center;
}
.ab-live-ph { color: rgba(255, 255, 255, 0.6); font-size: 14px; }
.ab-live { width: 100%; height: 100%; border: 0; display: block; }
.ab-live--readonly { pointer-events: none; }

/* Side panel */
.ab-side {
    width: 360px; flex-shrink: 0;
    display: flex; flex-direction: column;
    border-left: 1px solid var(--color-border, #e6e8ee);
    background: var(--color-card, #fff);
}
.ab-log {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 14px; display: flex; flex-direction: column; gap: 9px;
}
.ab-msg {
    font-size: 13px; line-height: 1.45;
    padding: 9px 11px; border-radius: 10px;
    background: var(--color-bg-muted, #f1f3f8);
    color: var(--color-text, #1c2230);
    white-space: pre-line;
}
.ab-msg--agent { background: rgba(91, 108, 255, 0.08); }
.ab-msg--system { background: transparent; color: var(--color-text-faint, #6a7384); font-style: italic; padding: 2px 4px; }
.ab-msg--action { background: var(--color-bg-muted, #f1f3f8); color: var(--color-text-faint, #55607a); font-size: 12px; }
.ab-msg--approve { background: rgba(214, 158, 46, 0.12); color: #b7791f; font-weight: 600; }
.ab-msg--input { background: rgba(214, 158, 46, 0.12); color: #b7791f; }
.ab-msg--blocked { background: rgba(229, 62, 62, 0.10); color: #c53030; font-size: 12px; }
.ab-msg--error { background: rgba(229, 62, 62, 0.12); color: #c53030; }

.ab-controls {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 14px; border-top: 1px solid var(--color-border, #e6e8ee);
}
.ab-btn {
    flex: 1; min-width: 120px;
    border: 1px solid var(--color-border, #d8dce6);
    background: var(--color-card, #fff);
    color: var(--color-text, #1c2230);
    font-size: 13px; font-weight: 600;
    padding: 9px 14px; border-radius: 9px; cursor: pointer;
}
.ab-btn:hover { background: var(--color-bg-muted, #f1f3f8); }
.ab-btn--primary { background: var(--color-primary, #5b6cff); border-color: var(--color-primary, #5b6cff); color: #fff; }
.ab-btn--primary:hover { filter: brightness(1.05); background: var(--color-primary, #5b6cff); }
.ab-btn--ghost { flex: 0 0 auto; min-width: 0; border-color: transparent; color: var(--color-text-faint, #6a7384); }

@media (max-width: 820px) {
    .ab-body { flex-direction: column; }
    .ab-side { width: auto; border-left: 0; border-top: 1px solid var(--color-border, #e6e8ee); max-height: 42%; }
}