/* Browser mode: tabs, toolbar, page, Design panel, Tools menu and the agent beside it */
.a-browser { flex-direction: row; }
.bw-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bw-tabs { display: flex; align-items: center; gap: 8px; padding: 8px 12px 0; }
.bw-tab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9px 9px 0 0; background: #1c1c1c; color: var(--a-heading); font-size: 13.5px; }
.bw-tab .ic { width: 14px; height: 14px; color: var(--a-text-3); }
.bw-tab i { font-style: normal; color: var(--a-text-3); margin-left: 6px; }
.bw-plus { color: var(--a-text-3); }
.bw-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #1c1c1c; color: var(--a-text-3); }
.bb { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; transition: background 0.2s, color 0.2s; }
.bb.fw .ic { transform: scaleX(-1); }
.bb.on { background: #33373d; color: #fff; }
.bw-omni { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 460px; padding: 6px 14px; border-radius: 999px; background: var(--a-panel-2); color: var(--a-text-2); font-size: 13.5px; }
.bw-omni .lock { width: 8px; height: 8px; border-radius: 50%; background: var(--a-ok); }
.bw-omni .url { flex: 1; }
.bw-omni .net { padding: 1px 8px; border-radius: 999px; background: rgba(255, 178, 36, 0.16); color: var(--a-warn); font-size: 11.5px; }
.bw-omni .net[hidden] { display: none; }
.zm { margin-left: auto; font-size: 13px; }

.bw-body { flex: 1; display: flex; min-height: 0; }
.bw-stage { flex: 1; min-width: 0; display: flex; justify-content: center; background: #0d0d0d; overflow: hidden; }
.bw-vp { width: 100%; background: #101010; overflow: hidden; transition: width 0.7s var(--ease), margin 0.7s var(--ease), border-radius 0.7s; }
.bw-vp.phone { width: 320px; margin: 22px 0; border-radius: 26px; border: 8px solid #262626; }

.pg { height: 100%; padding: 30px 44px; background: linear-gradient(160deg, #1b1b1b, #0f0f0f); color: #f3f3f3; transition: background 0.5s, color 0.5s; }
.bw-vp.phone .pg { padding: 22px 20px; }
.pg-nav { display: flex; align-items: center; gap: 18px; margin-bottom: 64px; font-size: 14px; color: #8a8a8a; }
.pg-nav b { color: #eee; }
.pg-nav em { margin-left: auto; font-style: normal; }
.bw-vp.phone .pg-nav span { display: none; }
.pg h1 { display: inline-block; margin: 0 0 0 -8px; padding: 4px 8px; border: 1.5px solid transparent; border-radius: 6px; font: 500 34px/1.12 'Inter', sans-serif; letter-spacing: 0; color: #f3f3f3; transition: font-size 0.9s var(--ease), border-color 0.2s, background 0.2s, color 0.3s; }
.bw-vp.phone .pg h1 { font-size: 30px !important; }
.pg h1.hover, .pg h1.picked { border-color: #0d99ff; background: rgba(13, 153, 255, 0.1); }
.pg p { margin: 14px 0 22px; max-width: 360px; font-size: 15px; color: #8a8a8a; }
.pg-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.pg-cta, .pg-ghost { padding: 9px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 500; }
.pg-cta { background: #f2f2f2; color: #111; }
.pg-ghost { border: 1px solid #333; color: #ccc; }
.pg.light { background: #fafafa; color: #111; }
.pg.light h1 { color: #111 !important; }
.pg.light p, .pg.light .pg-nav { color: #666; }
.pg.light .pg-nav b { color: #111; }
.pg.light .pg-cta { background: #111; color: #fff; }
.pg.light .pg-ghost { border-color: #ccc; color: #333; }

/* Design panel */
.bw-editor { flex: none; width: 0; overflow: hidden; background: var(--a-side); border-left: 1px solid transparent; transition: width 0.6s var(--ease); }
.bw-editor.open { width: 310px; border-left-color: var(--a-border); }
.be-in { width: 310px; height: 100%; display: flex; flex-direction: column; }
.be-head { display: flex; align-items: center; gap: 9px; padding: 11px 14px; color: var(--a-heading); font-size: 14px; }
.be-head b { flex: 1; font-weight: 600; }
.be-head span { color: var(--a-text-3); font-size: 17px; }
.be-dot { width: 8px; height: 8px; border-radius: 2px; background: #0d99ff; box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.16); }
.be-target { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #1a1a1a; font-size: 12.5px; color: var(--a-text-2); white-space: nowrap; overflow: hidden; }
.be-target .tag { color: #0d99ff; font-weight: 600; }
.be-target .nm { overflow: hidden; text-overflow: ellipsis; }
.be-target .sz { margin-left: auto; color: var(--a-text-3); font-size: 11px; }
.be-target .hint { color: var(--a-text-3); }
.be-scroll { flex: 1; min-height: 0; overflow: hidden; padding: 2px 14px; }
.be-empty { padding: 34px 6px; text-align: center; color: var(--a-text-3); font-size: 13px; line-height: 1.7; }
.bg { padding: 12px 0; }
.bh { margin-bottom: 9px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-text-3); }
.be-align { display: flex; gap: 4px; }
.be-align i { flex: 1; height: 26px; display: grid; place-items: center; border-radius: 6px; background: #1e1e1e; color: var(--a-text-3); font-style: normal; font-size: 13px; }
.be-align .gap { flex: 0 0 8px; background: none; }
.bgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.bf.wide { grid-column: 1 / -1; }
.bf label { display: block; margin-bottom: 4px; font-size: 11.5px; color: var(--a-text-3); cursor: ew-resize; }
.bl { display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 7px; background: #1c1c1c; font-size: 13px; color: var(--a-heading); font-variant-numeric: tabular-nums; }
.bl em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--a-text-3); }
.sw { width: 15px; height: 15px; border-radius: 4px; background: #f3f3f3; border: 1px solid #444; transition: background 0.3s; }
.rng { flex: 1; height: 4px; border-radius: 2px; background: #333; position: relative; }
.rng i { position: absolute; inset: 0; border-radius: 2px; background: #0d99ff; }
.be-queue { padding: 10px 14px 14px; background: #141414; }
.be-queue .bh { display: flex; align-items: center; gap: 7px; }
.cnt { padding: 0 6px; border-radius: 999px; background: #0d99ff; color: #fff; font-size: 10px; line-height: 15px; letter-spacing: 0; }
.none { padding: 8px 0; font-size: 12px; color: var(--a-text-3); }
.be-el { font-size: 12px; color: var(--a-text-2); margin-bottom: 4px; }
.be-el .tag { color: #0d99ff; font-weight: 600; margin-right: 7px; }
.be-row { display: flex; gap: 8px; align-items: center; padding: 2px 0; font: 11.5px var(--a-mono); color: var(--a-text-3); animation: chipIn 0.25s var(--ease); }
.be-row .p { width: 96px; color: var(--a-text-2); }
.be-row .n { color: #7ee29a; }
.be-send { width: 100%; margin-top: 10px; padding: 8px; border: 0; border-radius: 8px; background: #0d99ff; color: #fff; font: 500 13px 'Inter', sans-serif; transition: background 0.3s, opacity 0.3s; }
.be-send:disabled { background: #2a2a2a; color: #888; }

/* Tools menu */
.bt-menu { position: absolute; left: 50%; top: 78px; z-index: 10; width: 430px; margin-left: -215px; padding: 14px; border-radius: 14px; background: #1c1c1c; box-shadow: 0 26px 70px rgba(0, 0, 0, 0.7); }
.bt-menu[hidden] { display: none; }
.bt-title { display: flex; justify-content: space-between; padding: 0 4px 8px; color: var(--a-heading); font-weight: 600; font-size: 14.5px; }
.bt-title span { color: var(--a-text-3); }
.bt-group { padding: 8px 4px 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-text-3); }
.bt-row { display: flex; align-items: center; gap: 12px; padding: 5px 4px; }
.bt-row label { width: 64px; font-size: 13px; color: var(--a-text-2); }
.seg { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: #141414; }
.seg i { padding: 3px 11px; border-radius: 6px; font-style: normal; font-size: 12.5px; color: var(--a-text-3); transition: background 0.2s, color 0.2s; }
.seg i.on { background: #33373d; color: #fff; }
.bt-item { display: flex; justify-content: space-between; margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: #232323; font-size: 13px; color: var(--a-heading); }
.bt-item span { color: var(--a-text-3); font-size: 12px; }
.bt-item.close { justify-content: center; margin-top: 10px; color: var(--a-text-2); }

/* Agent beside the browser */
.bw-agent { flex: none; width: 320px; display: flex; flex-direction: column; background: var(--a-side); min-height: 0; }
.bwa-bar { display: flex; align-items: center; gap: 9px; padding: 11px 14px; color: var(--a-heading); font-size: 14px; }
.bwa-bar .pd { margin: 0 2px 0 0; }
.bwa-bar b { font-weight: 500; }
.bwa-bar span { margin-left: auto; color: var(--a-text-3); }
.bwa-msgs { flex: 1; padding: 16px 14px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.bwa-msgs .empty { margin: auto; max-width: 200px; text-align: center; color: #5a5a5a; font-size: 13.5px; }
.bu { align-self: flex-end; padding: 8px 14px; border-radius: 14px; background: var(--a-panel-2); color: var(--a-text-2); font-size: 14px; animation: chipIn 0.25s var(--ease); }
.bu code, .bt code { padding: 1px 6px; border-radius: 5px; background: #0a0a0a; font: 0.9em var(--a-mono); color: var(--a-code); }
.ba { display: flex; gap: 10px; color: var(--a-text); font-size: 14px; line-height: 1.6; }
.ba .mark { margin-top: 2px; flex: none; }
.bwa-comp { margin: 0 12px 12px; padding: 10px 12px; border-radius: 14px; background: var(--a-composer); }
.bwa-chips:not(:empty) { margin-bottom: 8px; }
.bchip { display: inline-block; padding: 3px 10px; border-radius: 7px; background: rgba(13, 153, 255, 0.14); color: #7cc2ff; font-size: 12.5px; }
.bwa-in { min-height: 24px; font-size: 14px; color: #efefef; white-space: nowrap; overflow: hidden; }
.bwa-in:empty::before { content: 'Plan, build, / for commands'; color: #6b6b6b; }
.bwa-in.typing::after { content: ''; display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: text-bottom; background: #fff; animation: blink 0.9s steps(2) infinite; }
.bwa-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; color: var(--a-text-3); font-size: 13px; }
.bwa-row .send { margin-left: auto; width: 28px; height: 28px; }