/* Local shares Brain's glass surfaces. Keep these rules scoped: Wings also uses lo-card. */
#app:has(.lo-wrap) { flex:0 0 auto; height:100dvh; min-height:0; }
.layout:has(.lo-wrap) { grid-template-rows:minmax(0,1fr); }
.content:has(> .lo-wrap) { display:flex; flex-direction:column; min-height:0; padding-bottom:24px; }
.content:has(> .lo-wrap) > .breadcrumb, .lo-page-header { flex-shrink:0; }
.lo-page-header { align-items:flex-start; gap:16px 24px; }
.lo-header-actions { gap:8px; max-width:100%; }
.lo-header-actions .btn { border-radius:10px; min-height:34px; padding:7px 13px; }
#loWebStatus { order:1; flex-basis:100%; text-align:right; font:11px/1.5 'Jost',sans-serif; color:var(--muted); }
#loWebStatus:empty { display:none; }
#loSub { max-width:560px; line-height:1.5; }

.lo-wrap { grid-template-columns:minmax(0,1fr); gap:0; flex:1; height:auto; min-height:360px; }
:is(.lo-wrap, #loSidebar) .lo-side { gap:12px; padding:1px 3px 3px 1px; }
:is(.lo-wrap, #loSidebar) .lo-card {
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px;
  box-shadow:var(--glass-hi),0 4px 16px rgba(24,34,60,.035);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  flex-shrink:0; min-width:0;
}
:is(.lo-wrap, #loSidebar) .lo-card h4 { margin-bottom:12px; font-size:12px; letter-spacing:.025em; color:var(--muted); }
:is(.lo-wrap, #loSidebar) .lo-status { font-family:'Jost',sans-serif; font-size:12px; line-height:1.5; }
:is(.lo-wrap, #loSidebar) .lo-status.bad { color:#9b3f42; }
:is(.lo-wrap, #loSidebar) .lo-sel, :is(.lo-wrap, #loSidebar) .lo-in {
  min-width:0; min-height:38px; border-color:var(--border); background-color:var(--input);
  border-radius:9px; box-shadow:inset 0 1px 0 rgba(255,255,255,.7); font-size:13px;
  transition:border-color .15s,box-shadow .15s;
}
:is(.lo-wrap, #loSidebar) .lo-sel {
  appearance:none; -webkit-appearance:none; color-scheme:light; padding:9px 30px 9px 11px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%235a6474' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; cursor:pointer;
  text-overflow:ellipsis;
}
:is(.lo-wrap, #loSidebar) .lo-sel:hover, :is(.lo-wrap, #loSidebar) .lo-in:hover { border-color:var(--border-strong); }
:is(.lo-wrap, #loSidebar) .lo-sel:focus-visible, :is(.lo-wrap, #loSidebar) .lo-in:focus-visible {
  outline:2px solid var(--blu); outline-offset:2px;
}
#loModel { font-size:12px; }
#loChatOptions { margin-top:12px; padding-top:7px; border-top:1px solid var(--border); }
:is(.lo-wrap, #loSidebar) .lo-setting-row { justify-content:space-between; gap:12px; padding:4px 0; }
:is(.lo-wrap, #loSidebar) .lo-setting-row .lo-sel { width:83px; min-height:31px; padding:5px 28px 5px 10px; }
:is(.lo-wrap, #loSidebar) .lo-toggle {
  display:flex; flex-direction:row-reverse; justify-content:space-between; gap:12px;
  align-items:center; margin-top:12px; cursor:pointer; color:var(--text);
}
.lo-toggle small { display:block; color:var(--muted); font-size:11px; line-height:1.4; }
.lo-toggle input {
  appearance:none; -webkit-appearance:none; position:relative; flex:0 0 30px;
  width:30px; height:18px; margin:0; border:1px solid var(--border-strong); border-radius:99px;
  background:rgba(90,100,116,.16); cursor:pointer; transition:background .16s,border-color .16s;
}
.lo-toggle input::after {
  content:''; position:absolute; width:12px; height:12px; left:2px; top:2px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(24,34,60,.2); transition:transform .16s;
}
.lo-toggle input:checked { background:var(--blu); border-color:var(--blu); }
.lo-toggle input:checked::after { transform:translateX(12px); }
.lo-toggle input:focus-visible { outline:2px solid var(--blu); outline-offset:3px; }
.lo-toggle input:disabled { opacity:.5; cursor:default; }
#loDisk { border-top:1px solid var(--border); padding-top:11px; margin-top:14px !important; font-size:11px; }
#loHf:empty { display:none; }
:is(.lo-wrap, #loSidebar) .lo-badge { font:10px/1.4 'Jost',sans-serif; border-radius:99px; padding:2px 7px; background:rgba(255,255,255,.4); }
:is(.lo-wrap, #loSidebar) .lo-badge.internal { color:#28714f; border-color:rgba(40,113,79,.18); background:rgba(40,113,79,.06); }
:is(.lo-wrap, #loSidebar) .lo-badge.nvme1 { color:#26748d; border-color:rgba(43,158,196,.22); background:rgba(43,158,196,.06); }
:is(.lo-wrap, #loSidebar) .lo-badge.vision { color:#8b681d; border-color:rgba(139,104,29,.2); background:rgba(139,104,29,.06); }
:is(.lo-wrap, #loSidebar) .lo-chats-card { display:flex; flex-direction:column; flex:1 0 180px; min-height:180px; overflow:hidden; padding:16px 9px 9px; }
:is(.lo-wrap, #loSidebar) .lo-chats-card h4 { padding:0 7px; }
#loConvos { min-height:0; overflow-y:auto; gap:3px; }
#loConvos .lo-item { min-height:38px; padding:9px 10px; font-size:13px; line-height:1.4; transition:background .15s; }
#loConvos .lo-item:hover { background:rgba(255,255,255,.55); }
#loConvos .lo-item.active {
  background:rgba(43,158,196,.10); border-color:rgba(43,158,196,.14); box-shadow:inset 2px 0 0 var(--blu);
}
#loConvos .lo-item .x { padding:3px; font-size:16px; opacity:.55; }
#loConvos .lo-item:hover .x { opacity:1; }
:is(.lo-wrap, #loSidebar) .lo-library-card { padding:0; }
.lo-library-card summary { cursor:pointer; padding:14px 16px; font-size:12px; color:var(--text); }
.lo-library-card summary::marker { color:var(--muted); font-size:10px; }
.lo-library-card summary span { float:right; color:var(--muted); font-size:11px; }
.lo-library-body { padding:0 12px 14px; }
:is(.lo-wrap, #loSidebar) .lo-row .lo-in { flex:1; width:0; }
.lo-library-body .btn { padding:8px 10px; border-radius:9px; }
:is(.lo-wrap, #loSidebar) .lo-hfrow { background:rgba(255,255,255,.4); }

#loPane { padding:18px 20px 16px; border-radius:16px; background:rgba(255,255,255,.56); box-shadow:var(--glass-hi),0 8px 32px rgba(24,34,60,.055); min-width:0; min-height:0; height:auto; }
#loPane .stem-pane-head { flex-wrap:wrap; gap:7px 12px; padding:0 0 14px; margin-bottom:0; letter-spacing:0; }
#loTitle { font-size:14px; font-weight:500; text-transform:none; overflow-wrap:anywhere; }
#loStat { margin-left:auto; font-size:11px; letter-spacing:0; }
#loStat.thinking { color:var(--muted); }
#loStat .pulse { background:var(--blu); width:5px; height:5px; }
#loStat .lo-esc { color:var(--muted); opacity:.7; }
#loChat { padding:18px 6px 22px; gap:14px; scrollbar-width:thin; scroll-padding-block:18px; }
#loChat .sm { flex-shrink:0; font-size:14px; line-height:1.7; }
#loChat .sm.assistant:not(.lo-pending) {
  max-width:min(100%,760px); padding:8px 2px; background:transparent; border:0; border-radius:0;
  box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
}
#loChat .sm.assistant p { margin-bottom:12px; }
#loChat .sm.assistant p:last-child { margin-bottom:0; }
#loChat .sm.user { max-width:85%; background:rgba(43,158,196,.08); border-color:rgba(43,158,196,.15); border-radius:14px 14px 4px 14px; padding:10px 15px; }
#loChat .sm.assistant pre { background:rgba(255,255,255,.6); border-color:var(--border); border-radius:10px; padding:13px 15px; margin:12px 0; white-space:pre; max-width:100%; }
#loChat .sm.assistant code { font-size:12px; background:rgba(90,100,116,.07); border-radius:4px; padding:1px 4px; }
#loChat .sm.assistant pre code { background:none; padding:0; }
#loChat .sm-ev { max-width:100%; font:11.5px/1.6 'Jost',sans-serif; padding:0 2px; }
#loChat .sm-ev.info { color:var(--muted); opacity:.8; }
#loChat .sm-ev.error { color:#963d44; background:rgba(180,60,70,.06); border:1px solid rgba(180,60,70,.13); border-radius:10px; padding:10px 13px; line-height:1.6; }
#loChat .tool-group { max-width:100%; color:var(--muted); }
#loChat .tool-group-head { display:inline-block; font:11px/1.5 'Jost',sans-serif; padding:5px 10px; border:1px solid var(--border); border-radius:99px; background:rgba(255,255,255,.4); }
#loChat .tool-group-body { margin:8px 0 0; border-color:var(--border); }
#loChat .tool-group-body .sm-ev { font:11px/1.6 ui-monospace,Menlo,monospace; }
#loChat .empty-page { margin:auto; max-width:360px; color:var(--muted); line-height:1.8; }
#loPane .stem-compose {
  flex-shrink:0; gap:8px; padding:8px; border:1px solid var(--border); border-radius:14px;
  background:rgba(255,255,255,.65); box-shadow:var(--glass-hi),0 3px 12px rgba(24,34,60,.025);
}
#loPane .stem-compose:focus-within { border-color:rgba(43,158,196,.45); box-shadow:0 0 0 2px rgba(43,158,196,.08); }
#loInput { min-width:0; min-height:40px; padding:10px 4px; border:0; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
#loInput::placeholder { color:var(--muted); opacity:.7; }
#loPane .stem-compose .mic { display:inline-flex; align-items:center; justify-content:center; flex:0 0 38px; width:38px; height:38px; border-color:transparent; background:transparent; color:var(--muted); }
#loPane .stem-compose .mic:hover { background:rgba(43,158,196,.07); color:var(--text); }
#loPane .stem-compose .mic svg { width:18px; height:18px; }
#loSend { min-height:38px; padding:8px 17px; border-radius:10px; font-size:13px; box-shadow:0 2px 8px rgba(24,34,60,.04); }
#loSend::after { border-radius:10px; padding:1px; }
#loChips:empty { display:none; }
#loChips:not(:empty) { padding:2px 3px 5px; }
#loContentLabel { padding:3px 5px 0; }
#loDecision { gap:12px; padding:16px 0; }
#loDecision .lo-decision-head select { padding-right:30px; }
#loPane.lo-drop { border-color:var(--blu); box-shadow:0 0 0 2px rgba(43,158,196,.18) inset; }

/* Local lives in the existing Brain sidebar; all other pages keep their layout. */
#sidebar:has(#loSidebar) { gap:0; }
#sidebar:has(#loSidebar) .account { flex-shrink:0; }
#loBrainNav { flex-shrink:0; margin:0 0 12px; border-bottom:1px solid var(--border); padding-bottom:10px; }
#loBrainNav > summary {
  display:flex; align-items:center; gap:9px; padding:8px 10px; cursor:pointer;
  font-size:13px; color:var(--muted); list-style:none; border-radius:8px;
}
#loBrainNav > summary::-webkit-details-marker { display:none; }
#loBrainNav > summary:hover { background:rgba(255,255,255,.5); color:var(--text); }
#loBrainNav > summary svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; }
#loBrainNav > summary span { flex:1; }
#loBrainNav > summary svg:last-child { width:12px; height:12px; }
#loBrainNav[open] > summary svg:last-child { transform:rotate(180deg); }
#loBrainNav #nav { max-height:38dvh; overflow-y:auto; padding:5px 0; }
#loBrainNav .nav-item { font-size:13px; padding:8px 10px; }
#loBrainNav .nav-item svg { width:16px; height:16px; }
#loBrainNav .nav-menu { position:static; margin:4px 0; box-shadow:none; }
#loSidebar { display:flex; flex:1; flex-direction:column; gap:12px; min-height:260px; max-height:none; padding:0; overflow:visible; }
#loSidebar .lo-card { padding:0 5px; background:transparent; border:0; border-radius:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
#loSidebar .lo-card h4 { padding:0; margin-bottom:10px; }
#loSidebar .lo-model-card { padding-bottom:12px; border-bottom:1px solid var(--border); }
#loSidebar #loModel { font-size:11px; padding-left:8px; }
#loSidebar .lo-model-settings { margin-top:10px; }
#loSidebar .lo-model-settings > summary { cursor:pointer; color:var(--muted); font-size:11px; padding:4px 0; }
#loSidebar .lo-model-settings > summary::marker { font-size:9px; }
#loSidebar #loChatOptions { margin-top:6px; padding-top:7px; }
#loSidebar .lo-status { font-size:11px; }
#loSidebar .lo-badge { font-size:9px; padding:2px 5px; }
#loSidebar #loDisk { font-size:10px; }
#loSidebar .lo-chats-card { flex:1 0 180px; min-height:180px; padding:0; overflow:hidden; }
#loSidebar .lo-chats-card h4 { padding:0 5px; }
#loSidebar #loNewButton { padding:4px 7px; font-size:11px; border-radius:7px; background:rgba(255,255,255,.4); }
#loSidebar #loConvos { flex:1; }
#loSidebar .lo-item { font-size:12px; padding:8px; }
#loSidebar .lo-library-card { flex-shrink:0; border-top:1px solid var(--border); padding-top:7px; }
#loSidebar .lo-library-card > summary { padding:7px 0; font-size:11px; }
#loSidebar .lo-library-card > summary span { font-size:10px; }
#loSidebar .lo-library-body { padding:8px 0; }
#loSidebar .lo-library-body .lo-row { flex-wrap:wrap; }
#loSidebar .lo-library-body .lo-in { flex-basis:100%; }
.lo-nav-trigger { display:none; }
@media (max-width:860px) {
  .lo-nav-trigger { display:inline-flex; }
  .lo-page-header { gap:12px; }
  .lo-header-actions { flex:1 1 100%; justify-content:flex-start; }
  #loWebStatus { text-align:left; }
  #sidebar:has(#loSidebar) { width:280px; }
}
@media (max-width:600px) {
  #loPane { padding:14px 12px 12px; }
  #loChat { padding:14px 2px; }
  #loChat .sm.user { max-width:92%; }
  #loStat { margin-left:0; }
  #loDecision { grid-template-columns:minmax(0,1fr); }
  #loDecision .lo-decision-head { flex-wrap:wrap; }
  #loInput { font-size:16px; }
  .lo-header-actions { gap:6px; }
  .lo-header-actions .btn { padding:7px 10px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .lo-toggle input, .lo-toggle input::after { transition:none; }
}