/* Browser workspace: progressive disclosure, scoped to the browser view. */
#view-browser { max-width: 1320px; margin: 0 auto; }
#view-browser [hidden] { display: none !important; }
#view-browser .browser-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }
#view-browser .browser-heading h2 { font-size:clamp(26px,3vw,36px); letter-spacing:-1px; margin:8px 0; }
#view-browser p { line-height:1.6; }
#view-browser button { min-height:42px; cursor:pointer; }
#view-browser button:disabled { opacity:.45; cursor:not-allowed; }
#view-browser button:focus-visible, #view-browser summary:focus-visible { outline:2px solid #a5b4fc; outline-offset:4px; }
#view-browser .card { margin:0; padding:24px; border:1px solid #ffffff12; box-shadow:none; min-width:0; }
#view-browser h3 { margin:0 0 12px; font-size:20px; }
#view-browser h4 { margin:20px 0 12px; }
#view-browser .browser-workspace { display:grid; grid-template-columns:minmax(250px, .8fr) minmax(0,1.7fr); gap:24px; align-items:start; }
#view-browser .browser-context, #view-browser .browser-main { display:grid; gap:16px; min-width:0; }
#view-browser .browser-page-card { background:linear-gradient(145deg,#20283f,#151b30); }
#view-browser .browser-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
#view-browser .browser-card-top .eyebrow { font-size:10px; }
#view-browser .browser-status { display:inline-flex; border-radius:30px; padding:5px 10px; background:#ffffff0a; color:#c3cbde; font-size:12px; }
#view-browser .browser-status[data-state=connected] { color:#86efac; background:#22c55e15; }
#view-browser .browser-status[data-state=stale] { color:#fcd34d; background:#f59e0b15; }
#browser-page { overflow-wrap:anywhere; }
#browser-page h3 { line-height:1.4; }
#browser-page .browser-url { font-size:13px; color:#a5b4fc; }
#view-browser .browser-caption { font-size:12px; color:#a7b0c6; line-height:1.6; }
#view-browser details summary { cursor:pointer; font-weight:600; line-height:1.5; }
#browser-page details { margin-top:18px; font-size:13px; }
#browser-page details p { max-height:280px; overflow:auto; padding-right:8px; }
#view-browser .browser-button-row { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 10px; }
#view-browser .browser-button-row button { flex:1; margin:0; font-size:13px; }
#view-browser .browser-tools { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:5px; border:1px solid #ffffff12; border-radius:14px; background:#101629; }
#view-browser .browser-tools button { border:0; margin:0; background:transparent; color:#abb5cd; border-radius:9px; padding:12px 6px; font-size:14px; }
#view-browser .browser-tools button[aria-selected=true] { background:#6366f1; color:white; box-shadow:0 3px 12px #0003; }
#view-browser .browser-suggestions { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
#view-browser .browser-suggestions button { background:#6366f110; border:1px solid #818cf840; color:#d3d7ff; font-size:13px; border-radius:24px; margin:0; }
#view-browser .browser-composer { border-color:#818cf84a; }
#view-browser label { display:block; font-size:13px; color:#c3cbe0; margin:0 0 8px; }
#view-browser input:not([type=checkbox]), #view-browser textarea, #view-browser select { width:100%; min-width:0; margin:8px 0 12px; font:inherit; font-size:16px; padding:12px; border-radius:10px; background:#0b1020; color:var(--text); border:1px solid #ffffff20; }
#view-browser textarea { resize:vertical; min-height:100px; }
#view-browser .browser-composer-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; }
#view-browser #browser-ask, #view-browser #browser-compare { white-space:nowrap; background:#6366f1; color:white; border:0; padding:12px 20px; }
#view-browser .browser-feedback { margin:0; padding:14px 18px; background:#818cf112; border-left:3px solid #818cf8; border-radius:8px; overflow-wrap:anywhere; }
#view-browser .browser-feedback:empty { display:none; }
#view-browser .browser-field { border-bottom:1px solid #ffffff12; padding:12px 0; }
#view-browser .browser-field label { display:flex; align-items:center; gap:10px; }
#view-browser input[type=checkbox] { width:18px; height:18px; accent-color:#818cf8; }
#view-browser #browser-review:not(:empty) { padding:18px; margin-top:20px; border:1px solid #a5b4fc; border-radius:12px; overflow-wrap:anywhere; }
#view-browser .browser-search-row { display:flex; gap:10px; align-items:center; }
#view-browser .browser-links { display:grid; gap:8px; max-height:360px; overflow:auto; margin-top:12px; }
#view-browser .browser-links button { text-align:left; display:block; width:100%; margin:0; padding:12px; overflow-wrap:anywhere; }
#view-browser .browser-links small { display:block; color:#a7b0c6; margin-top:5px; }
#view-browser .browser-history { padding:18px; }
#view-browser .browser-activity-item { padding:16px 0; border-bottom:1px solid #ffffff12; font-size:13px; overflow-wrap:anywhere; }
#view-browser .browser-activity-item p { margin:6px 0; }
#view-browser .browser-clip-item { padding:12px 0; border-bottom:1px solid #ffffff12; overflow-wrap:anywhere; }
#view-browser .browser-clip-item small { display:block; color:#a7b0c6; margin-top:5px; }
#view-browser .browser-setup { margin-bottom:24px; }
#view-browser .browser-setup-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:24px; }
#view-browser .browser-setup-grid h3 { font-size:16px; }
#view-browser .browser-setup-grid p { font-size:14px; }
#view-browser .browser-settings-row { display:flex; align-items:center; gap:20px; margin-top:20px; padding-top:20px; border-top:1px solid #ffffff12; }
#view-browser .browser-settings-row label { flex:1; }
#view-browser .browser-result { overflow-wrap:anywhere; border-top:3px solid #818cf8; }
#view-browser .browser-result table { display:block; max-width:100%; overflow:auto; }
#browser-answer { line-height:1.7; }
#browser-answer pre { overflow:auto; }
#view-browser hr { border:0; border-top:1px solid #ffffff12; margin:24px 0; }
@media(max-width:760px) {
 #view-browser .browser-workspace { grid-template-columns:1fr; gap:18px; }
 #view-browser .browser-heading { align-items:flex-start; gap:12px; }
 #view-browser .browser-heading>button { font-size:12px; max-width:110px; }
 #view-browser .browser-heading p { font-size:14px; }
 #view-browser .card { padding:18px; }
 #view-browser .browser-setup-grid { grid-template-columns:1fr; gap:16px; }
 #view-browser .browser-settings-row { flex-direction:column; align-items:stretch; }
 #view-browser .browser-tools button { font-size:12px; }
 #view-browser .browser-composer-footer { flex-wrap:wrap; }
 #view-browser .browser-composer-footer button { width:100%; }
 #view-browser .browser-context { gap:10px; }
 #view-browser .browser-page-card { padding:16px; }
 #view-browser .browser-page-card .browser-card-top { margin-bottom:10px; }
 #view-browser .browser-page-card h3 { font-size:17px; margin-bottom:4px; }
 #view-browser .browser-page-card p { margin:6px 0; }
}

#view-browser .browser-command-status { font-size:13px; padding:12px; border-radius:8px; background:#818cf118; color:#d3d7ff; }
@media(max-width:760px) {
 #view-browser .browser-suggestions { gap:6px; margin-top:12px; }
 #view-browser .browser-suggestions button { font-size:12px; min-height:36px; padding:8px 10px; }
 #view-browser .browser-tool-panel>p { font-size:14px; }
}

@media(max-width:760px) {
 #view-browser .browser-heading { margin-bottom:16px; }
 #view-browser .browser-heading .eyebrow { font-size:9px; letter-spacing:1px; }
 #view-browser .browser-heading h2 { font-size:25px; letter-spacing:-.6px; }
 #view-browser .browser-heading p { margin:8px 0 0; }
 #view-browser .browser-context { display:contents; }
 #view-browser .browser-page-card { order:0; }
 #view-browser .browser-main { order:1; }
 #view-browser .browser-history { order:2; }
 #view-browser .browser-page-card>.browser-caption, #view-browser .browser-checkin-detail, #browser-page>.browser-caption { display:none; }
 #view-browser .browser-page-card .browser-button-row { margin:12px 0 0; }
 #view-browser #browser-page details { margin-top:10px; }
}