/* Browser adaptation of the botdesk desktop shell. Account appearance remains authoritative. */
:root, :root[data-theme="light"] {
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --display: var(--sans);
  --heading-track: -.02em;
  --bg: #fafafa;
  --panel: #fff;
  --surface: #f0f0f0;
  --hover: #e9e9e9;
  --line: #e4e4e4;
  --line-strong: #c9c9c9;
  --panel-line: var(--line);
  --text: #252525;
  --muted: #616161;
  --soft: #6b6b6b;
  --sidebar: #f5f5f5;
  --sidebar-text: var(--text);
  --sidebar-muted: var(--muted);
  --sidebar-hover: var(--hover);
  --sidebar-active: #e8e8e8;
  --sidebar-line: var(--line);
  --primary: #d3ac70;
  --primary-hover: #dfba83;
  --primary-ink: #211b13;
  --accent: #856125;
  --accent-soft: #eee5d5;
  --focus: #a37b3b;
  --field-line: var(--line-strong);
  --radius: 7px;
  --btn-radius: 7px;
}
:root[data-theme="dark"] {
  --bg: #171717;
  --panel: #252525;
  --surface: #383838;
  --hover: #303030;
  --line: #333333;
  --line-strong: #555555;
  --text: #ececec;
  --muted: #b0b0b0;
  --soft: #9b9b9b;
  --sidebar: #252525;
  --sidebar-active: #303030;
  --primary: #d3ac70;
  --primary-hover: #dfba83;
  --primary-ink: #211b13;
  --accent: #d3ac70;
  --accent-soft: #30291f;
  --focus: #d3ac70;
}
body { font-size: 13px; line-height: 1.5; }
button, input, textarea { caret-color: var(--accent); }
::selection { background: color-mix(in srgb, var(--primary) 35%, transparent); color: var(--text); }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.btn, .nav a, .field > span, .field > legend { font-family: var(--sans); }
.body.oc-shell { --workspace-width: 220px; grid-template-columns: var(--workspace-width) minmax(0, 1fr) 340px; font-size: 13px; grid-template-rows: 40px minmax(0, 1fr); }
.body.oc-shell.oc-single { grid-template-columns: var(--workspace-width) minmax(0, 1fr); }
.oc-shell, :root[data-theme="dark"] .oc-shell { --oc-accent: var(--accent); --oc-accent-fill: var(--primary); --oc-accent-ink: var(--primary-ink); --oc-accent-soft: var(--accent-soft); }
.oc-shell.desk-accented { --accent: #856125; --focus: #a37b3b; }
:root[data-theme="dark"] .oc-shell.desk-accented { --accent: #d3ac70; --focus: #d3ac70; }
.oc-shell .workspace-navigation.oc-sidewrap { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; background: var(--sidebar); }
.desktop-desk-menu { position: relative; flex: 1; min-width: 0; font-size: 13px; font-weight: 500; }
.desktop-desk-menu summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; padding: 5px; border-radius: 6px; }
.desktop-desk-menu summary::-webkit-details-marker { display: none; }
.desktop-desk-menu summary:hover { background: var(--hover); }
.desktop-desk-list { position: absolute; top: 34px; left: 0; z-index: 40; min-width: 200px; max-width: 280px; max-height: 60vh; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); box-shadow: 0 8px 24px #0002; }
.desktop-desk { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px; background: transparent; text-align: left; font-size: 12px; }
.desktop-desk:hover, .desktop-desk[aria-pressed="true"] { background: var(--hover); }
.desktop-shortcuts button, .desktop-settings-button { display: flex; align-items: center; gap: 9px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); padding: 7px 8px; width: 100%; text-align: left; font-size: 13px; }
.desktop-shortcuts button:hover, .desktop-settings-button:hover { background: var(--hover); }
.oc-shell .desktop-shortcuts.nav { padding: 6px 8px; }
.oc-shell .oc-sidescroll .nav.oc-nav { padding: 6px 8px; }
.oc-shell .oc-nav a { min-height: 34px; height: auto; padding: 7px 8px; font-size: 13px; border-radius: 6px; }
.oc-group { padding: 0 8px; }
.oc-group .oc-sec { margin-top: 12px; }
.oc-sec > button { min-height: 28px; font-size: 12px; font-weight: 400; padding: 4px 8px; }
.oc-row { height: 34px; gap: 8px; padding: 0 9px; font-size: 13px; border-radius: 6px; }
.oc-row-t { line-height: 1.4; }
.oc-chat-row { border-radius: 6px; }
.oc-shell .oc-chat-row.is-on, .oc-shell .oc-project-row.is-on { background: var(--surface); color: var(--text); }
.oc-chat-row.is-on .oc-row > .icon { color: var(--accent); }
.oc-av { width: 22px; height: 22px; font-family: var(--sans); font-size: 10px; }
.oc-more { font-size: 11px; }
.desktop-workspace { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--line); background: var(--sidebar); }
.desktop-workspace-head { height: 40px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 0; font-size: 13px; font-weight: 600; }
.desktop-view-tabs { display: flex; align-items: center; gap: 6px; padding: 5px 12px; min-height: 36px; border-bottom: 1px solid var(--line); }
.desktop-view-tabs button { padding: 4px 10px; background: transparent; border: 0; border-radius: 6px; font-size: 12px; color: var(--muted); }
.desktop-view-tabs button[aria-selected="true"] { color: var(--text); background: var(--surface); }
.oc-shell .main.oc-main { background: var(--panel); }
.oc-mainhead { min-height: 40px; height: 40px; padding: 4px 6px; border-bottom: 1px solid var(--line); background: var(--sidebar); gap: 6px; }
.desktop-page-title { min-width: 0; padding: 0 8px; }
.oc-mainhead .oc-chat-title { font-size: 12px; font-weight: 500; }
.oc-title { display: flex; align-items: center; gap: 8px; font-size: 12px; min-height: 30px; }
.oc-mainhead > .oc-deskfilter, .oc-shell .oc-mfilter { display: none; }
.desktop-agent-bar { padding: 5px 16px; height: 42px; min-height: 42px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.desktop-agent-row { min-height: 32px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.desktop-human { font-size: 11px; padding: 7px 8px; }
.desktop-agent-divider { height: 18px; width: 1px; background: var(--line); margin-right: 3px; }
.desktop-agent { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 6px 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; font-size: 12px; }
.desktop-agent.is-selected { background: var(--surface); border-color: transparent; }
.desktop-agent small { font-size: 10px; color: var(--muted); }
.desktop-agent-access { border: 0; }
.oc-shell .page.oc-pagebody { max-width: 1040px; padding: 24px; }
.oc-shell .page.oc-tab-chat { max-width: none; padding: 0; }
.oc-shell .oc-convo-col { max-width: 900px; padding: 12px 16px 28px; }
.oc-convo .chat-thread, .oc-convo .oc-msgs { gap: 28px; }
.oc-convo .conversation .oc-me, .oc-convo .chat-message.member { justify-self: end; justify-items: end; max-width: 90%; }
.oc-convo .oc-me p, .oc-convo .chat-message.member p { background: var(--surface); border-radius: 12px; padding: 10px 12px; }
.oc-convo .oc-meta, .oc-convo .chat-meta { font-family: var(--sans); font-size: 11px; color: var(--muted); }
.oc-convo .oc-m p, .oc-convo .oc-md, .oc-convo .chat-message p, .oc-convo .chat-md { font-size: 14px; line-height: 1.7; }
.oc-convo .chat-meta strong { font-size: 11px; font-weight: 500; }
.oc-shell .oc-composer-wrap, .oc-shell .oc-composer-wrap.oc-big { padding: 8px 24px 6px; background: var(--panel); border-top: 0; }
.oc-shell .oc-composer-wrap > *, .oc-shell .oc-composer-wrap.oc-big > * { max-width: 900px; }
.oc-composer { border-radius: 14px; box-shadow: none; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 95%, var(--text)); padding: 8px; }
.desktop-composer-context { display: flex; align-items: center; min-height: 24px; padding: 2px 4px 8px; }
.desktop-composer-context .oc-ctx { background: transparent; border: 0; color: var(--muted); font-size: 12px; padding: 0; }
.oc-composer textarea { font-size: 14px; min-height: 44px; height: 44px; padding: 8px 4px; }
.oc-cbar { padding: 6px 0 0; gap: 5px; flex-wrap: wrap; }
.oc-shell .oc-send { border-radius: 7px; background: var(--text); color: var(--panel); width: 28px; height: 28px; }
.oc-shell .oc-send:hover { background: var(--primary-hover); }
.oc-composer-choices .oc-pick { font-size: 11px; background: var(--surface); border-radius: 6px; }
.oc-composer-choices .oc-av { display: inline-grid; }
.oc-shell .home-modules > .oc-ovsec { border: 0; border-radius: 0; padding: 0 0 24px; border-bottom: 1px solid var(--line); }
.oc-shell .home-modules { gap: 28px; }
.oc-ov-head h1 { font-size: 21px; font-weight: 500; }
.oc-ov-head p { font-size: 13px; }
.oc-orow { min-height: 44px; border-radius: 6px; }
.oc-orow-t b { font-size: 12px; font-weight: 500; }
.oc-orow-t small, .oc-subnav { font-size: 11px; }
.oc-subnav a[aria-current] { border-bottom-color: var(--primary); }
.desktop-document-tabs { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 6px; height: 40px; min-height: 40px; padding: 4px 6px; overflow-x: auto; background: var(--sidebar); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.desktop-document-tab { display: flex; align-items: center; flex: 0 0 auto; max-width: 260px; min-width: 140px; height: 30px; border-radius: 6px; color: var(--muted); }
.desktop-document-tab.is-active { background: var(--surface); color: var(--text); }
.desktop-document-tab > button:first-child, .desktop-document-tab > span { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; border: 0; background: transparent; padding: 2px 8px; text-align: left; font-size: 13px; }
.desktop-document-tab > button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desktop-document-tab .oc-ib { flex-shrink: 0; width: 24px; }
.desktop-new-session { flex-shrink: 0; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 4px 8px; font-size: 12px; color: var(--muted); }
.oc-mainhead { background: var(--panel); height: 36px; min-height: 36px; }

.oc-main .oc-page { container-type: inline-size; }
.oc-right, .oc-rhead, .oc-rstatus { background: var(--panel); }
@container (max-width: 600px) {
  .studio, .bookmark-layout, .work-project.has-selection .project-layout { grid-template-columns: minmax(0, 1fr); }
  .draft-list { max-height: 160px; overflow-y: auto; }
  .editor-body { padding: 14px; }
}

.desktop-mobile-nav { display: none; }
.desktop-tab-home { width: 116px; padding-left: 15px; flex-shrink: 0; font-size: 20px; font-weight: 650; text-decoration: none; color: var(--text); }
.desktop-tab-home span { color: var(--primary); }
.oc-shell .workspace-navigation.oc-sidewrap { grid-row: 2; grid-column: 1; }
.oc-shell .main.oc-main { grid-row: 2; grid-column: 2; }
.oc-shell .oc-right { grid-row: 2; grid-column: 3; }
.desktop-view-tabs { flex-direction: row; padding: 0; border: 0; gap: 4px; min-height: 30px; }
.desktop-view-tabs button { padding: 4px 7px; font-size: 12px; }
.desktop-activity-settings.oc-side-foot { position: relative; margin-top: auto; padding: 8px; min-height: 40px; border: 0; }
.oc-shell .desktop-activity-settings .popover.oc-gear { left: 8px; bottom: 44px; width: 260px; right: auto; }
.desktop-workspace-toolbar { display: flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 8px; color: var(--muted); font-size: 12px; }
.desktop-workspace .oc-group { padding: 0 8px; }
.desktop-workspace .oc-sec { margin-top: 6px; }
.desktop-workspace .oc-sec button { font-size: 11px; color: var(--muted); }
.desktop-workspace .oc-row { height: 32px; font-size: 13px; }
.desktop-chat-options { position: relative; }
.desktop-chat-menu { position: absolute; top: 36px; right: 0; width: min(460px, calc(100vw - 24px)); padding: 10px; z-index: 30; }
.desktop-chat-menu > button { background: transparent; border: 0; display: flex; gap: 8px; padding: 8px; color: var(--muted); }
.desktop-chat-menu .oc-thread-head { border: 0; padding: 0; }
.desktop-statusbar { display: flex; flex-shrink: 0; align-items: center; gap: 8px; min-height: 28px; border-top: 1px solid var(--line); padding: 0 12px; font-size: 11px; color: var(--muted); }
.desktop-statusbar button { border: 0; background: transparent; color: inherit; font-size: inherit; }
.oc-shell .oc-composer-choices .oc-pick > span:not(.oc-av) { display: inline; }
.oc-shell .oc-composer-choices .oc-pick .icon { display: inline; }
.oc-convo .oc-me p { border-radius: 20px; padding: 7px 12px; }
.oc-convo .oc-meta { margin-top: 12px; }
.oc-convo .oc-me .oc-meta { margin-top: 5px; }
@media (min-width: 761px) {
  .body.oc-shell.oc-sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr) 340px; }
  .body.oc-shell.oc-single.oc-sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
  .oc-sidebar-collapsed .workspace-navigation.oc-sidewrap { display: none; }
  .oc-sidebar-collapsed .desktop-workspace { display: none; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .body.oc-shell { --workspace-width: 220px; }
  .body.oc-shell.oc-with-panel { grid-template-columns: 220px minmax(0, 1fr) 280px; }
  .body.oc-shell.oc-with-panel.oc-sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr) 280px; }
}
@media (max-width: 760px) {
  .body.oc-shell, .body.oc-shell.oc-single { grid-template-columns: minmax(0, 1fr); grid-template-rows: 40px minmax(0, 1fr); }
  .desktop-mobile-nav { display: inline-grid; flex-shrink: 0; }
  .desktop-tab-home { display: none; }
  .oc-shell .main.oc-main, .oc-shell .oc-right { grid-row: 2; grid-column: 1; }
  .oc-shell .workspace-navigation.oc-sidewrap { display: grid; width: min(280px, calc(100vw - 32px)); grid-template-columns: minmax(0, 1fr); }
  .desktop-agent-bar { padding: 8px; min-height: 49px; }
  .desktop-agent { gap: 4px; padding: 5px; }
  .desktop-agent-bar .oc-av { display: inline-grid; }
  .desktop-agent small { display: none; }
  .desktop-human { padding: 4px; }
  .oc-shell .oc-convo-col { padding: 12px 16px 24px; }
  .oc-shell .oc-composer-wrap, .oc-shell .oc-composer-wrap.oc-big { padding: 8px 8px max(6px, env(safe-area-inset-bottom)); }
  .oc-composer textarea { font-size: 16px; }
  .desktop-statusbar { min-height: 24px; }
  .desktop-document-tab { min-width: 120px; max-width: 200px; }
}

.desktop-titlebar { display: flex; align-items: center; grid-column: 1 / -1; grid-row: 1; min-width: 0; height: 40px; background: var(--sidebar); border-bottom: 1px solid var(--line); }
.desktop-titlebar .desktop-document-tabs { min-width: 0; flex: 1; border-bottom: 0; }
.desktop-tools-toggle { flex: 0 0 40px; height: 32px; margin: 0 6px; }
.desktop-tools-toggle[aria-expanded="true"] { background: var(--surface); color: var(--text); }
.body.oc-shell.oc-tools-open { grid-template-columns: var(--workspace-width) minmax(0, 1fr) 420px; }
.body.oc-shell.oc-tools-open.oc-sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr) 420px; }
.workspace-tools { position: fixed; top: 40px; right: 0; bottom: 0; z-index: 25; width: 420px; display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-left: 1px solid var(--line); color: var(--text); font: 13px/1.5 var(--sans); }
.workspace-tools [hidden], .workspace-tools[hidden] { display: none; }
.tools-header { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; height: 40px; flex-shrink: 0; border-bottom: 1px solid var(--line); }
.tools-header strong { font-weight: 500; }
.workspace-tools button, .tools-file { color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; font: inherit; cursor: pointer; }
.tools-header button { border: 0; background: transparent; font-size: 22px; }
.tools-tabs { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.tools-tabs button { background: transparent; border-color: transparent; color: var(--muted); }
.tools-tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); }
.tools-browser, .tools-images { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.tools-address { display: flex; gap: 6px; padding: 12px 12px 6px; }
.tools-address input { width: 0; min-width: 0; flex: 1; padding: 7px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--text); background: var(--bg); font: inherit; }
.tools-browser-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; }
.workspace-tools a { color: var(--accent); }
.tools-browser-note, .tools-image-note, .tools-image-status, .tools-error { padding: 0 12px; font-size: 11px; color: var(--muted); }
.tools-error { color: var(--text); }
.tools-browser-empty { margin: auto; padding: 24px; color: var(--muted); text-align: center; }
.tools-browser iframe { display: block; border: 0; width: 100%; min-height: 0; flex: 1; background: white; }
.tools-images { overflow-y: auto; }
.tools-image-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 12px 0; }
.tools-image-preview { padding: 12px; text-align: center; }
.tools-image-preview > img { display: block; max-width: 100%; max-height: 45vh; margin: 0 auto 8px; object-fit: contain; }
.tools-image-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; }
.tools-image-list button { min-width: 0; padding: 6px; text-align: left; }
.tools-image-list img { width: 100%; height: 100px; object-fit: contain; }
.tools-image-list span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
@media (min-width: 761px) and (max-width: 1100px) {
  .body.oc-shell.oc-tools-open { grid-template-columns: 0 minmax(0, 1fr) 360px; }
  .oc-tools-open .workspace-navigation.oc-sidewrap { display: none; }
  .oc-tools-open .desktop-workspace { display: none; }
  .workspace-tools { width: 360px; }
  .body.oc-shell.oc-tools-open.oc-sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr) 360px; }
}
@media (max-width: 760px) {
  .body.oc-shell.oc-tools-open, .body.oc-shell.oc-tools-open.oc-sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }
  .workspace-tools { width: 100%; }
  .tools-address input { font-size: 16px; }
}

.tools-file:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (max-width: 760px) { .oc-tools-open .main.oc-main { visibility: hidden; } }

.desktop-sidebar-toggle { flex: 0 0 32px; margin-left: 6px; }
@media (max-width: 760px) { .desktop-sidebar-toggle { display: none; } }