/* Shared Web shell primitives. Keep SVG geometry and sidebar rows independent
   of page-specific styles; never apply these rules to the canvas renderer. */
.ui-icon, .nav-icon, .tool-icon, .side-chevron {
  display:inline-block; width:18px; height:18px; flex:0 0 18px;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:middle;
}
.ui-icon [fill="currentColor"] { stroke:none; }
.inline-arrow, .side-chevron { width:14px; height:14px; flex-basis:14px; }
.brand-row .brand-home { display:flex; align-items:center; gap:8px; min-width:0; }
.brand-logo { display:block; width:32px; height:28px; flex:0 0 32px; }
.brand-row { height:52px; padding:0 7px 12px; }
.sidebar-collapse { display:grid; place-items:center; width:24px; height:28px; padding:0; flex:0 0 24px; }
.nav-icon { width:20px; height:20px; flex-basis:20px; }
.primary-nav { padding-top:12px; }
.nav-item { height:36px; gap:8px; }
.topbar .top-actions { flex-shrink:0; }
.top-pill, .top-icon { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.top-pill span { margin:0; white-space:nowrap; }
.points-pill { white-space:nowrap; flex-shrink:0; }
.points-pill .points-icon { width:14px; height:14px; flex-basis:14px; color:#35b9fa; }
.notification-dot { width:13px; height:13px; right:3px; top:2px; display:grid; place-items:center; font-size:9px; font-style:normal; background:#078bce; color:white; }
.tool-select { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; }
.tool-select .tool-icon { width:16px; height:16px; flex-basis:16px; }
.tool-select > b .ui-icon { width:12px; height:12px; }
.composer-tools { min-width:0; }
.tool-circle, .voice-btn, .send-btn { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.side-section { flex-shrink:0; padding-top:24px; }
.side-section-heading { display:flex; align-items:center; justify-content:space-between; height:28px; padding:0 3px 0 7px; margin-bottom:6px; }
.side-section-toggle { display:flex; align-items:center; padding:0; background:none; color:#b2b2b2; font-size:12px; min-width:0; }
.section-toggle-content, .side-section-actions { display:flex; align-items:center; gap:6px; }
/* Match JiMeng: section actions stay quiet until the section header is hovered or keyboard-focused. */
.side-section-actions { opacity:0; pointer-events:none; transition:opacity .15s ease; }
.side-section-heading:hover .side-section-actions,
.side-section-heading:focus-within .side-section-actions { opacity:1; pointer-events:auto; }
.section-chevron { flex:0 0 16px; opacity:0; transition:transform .15s,opacity .15s; }
.side-section-heading:hover .section-chevron, .side-section-heading:focus-within .section-chevron { opacity:1; }
.side-section.collapsed .section-chevron { transform:rotate(-90deg); opacity:1; }
.side-section.collapsed .side-section-content { display:none; }
.side-plus { display:grid; place-items:center; width:24px; height:24px; padding:0; color:#ffffff99; background:none; border-radius:6px; }
.side-plus:hover { background:transparent; color:#fff; }
.canvas-all-link:hover { background:#ffffff0d; color:#fff; }
.canvas-all-link { padding:4px; font-size:11px; color:#858585; background:none; border-radius:4px; }
.side-tooltip-trigger { position:relative; display:flex; }
/* Fixed coordinates keep right-side hints outside the sidebar scroll clipping.
   positionSideTooltips supplies viewport coordinates on entry/focus/scroll. */
.side-tooltip {
  display:none; position:fixed; z-index:90;
  left:var(--side-tooltip-left); top:var(--side-tooltip-top); transform:translateY(-50%);
  padding:8px 16px; border:0; border-radius:8px; white-space:nowrap;
  font-size:12px; font-weight:400; line-height:20px; color:#fff; background:#333;
  box-shadow:0 8px 56px #0000003d; pointer-events:none;
}
.side-tooltip-trigger:hover .side-tooltip, .side-tooltip-trigger:has(.side-plus:focus-visible) .side-tooltip { display:block; }
.conversation-history, .canvas-history { display:grid; gap:2px; }
.conversation-row, .canvas-row { position:relative; display:flex; align-items:center; width:100%; min-width:0; height:36px; border-radius:8px; }
.conversation-row:hover, .canvas-row:hover, .conversation-row.active { background:#ffffff08; }
.conversation-item, .canvas-item { display:flex; align-items:center; gap:8px; flex:1; min-width:0; height:36px; padding:0 7px; border-radius:8px; color:#bfc0c2; background:none; text-align:left; font-size:12px; }
.conversation-title, .canvas-item-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversation-thumb, .canvas-item-thumb, .canvas-item-icon { display:grid; place-items:center; width:24px; height:24px; flex:0 0 24px; object-fit:cover; border-radius:5px; overflow:hidden; background:#2a2a2a; color:#787878; }
.conversation-thumb .ui-icon, .canvas-item-icon .ui-icon { width:16px; height:16px; }
.conversation-more, .canvas-more, .canvas-open { display:grid; place-items:center; width:24px; height:26px; padding:0; background:none; color:#888; flex:0 0 24px; border-radius:5px; }
.conversation-more, .canvas-item-actions { opacity:0; pointer-events:none; }
.canvas-item-actions { display:flex; align-items:center; position:absolute; right:3px; background:#222; border-radius:5px; }
.conversation-row:hover .conversation-more, .conversation-row:focus-within .conversation-more,
.canvas-row:hover .canvas-item-actions, .canvas-row:focus-within .canvas-item-actions { opacity:1; pointer-events:auto; }
.canvas-row:hover .canvas-item, .canvas-row:focus-within .canvas-item { padding-right:54px; }
.conversation-more:hover, .canvas-more:hover, .canvas-open:hover { background:#ffffff12; color:#fff; }
.conversation-pin, .canvas-pin { display:flex; margin-left:auto; color:#777; }
.side-empty { margin:8px; color:#727272; font-size:12px; }
.side-more { justify-content:flex-start; gap:5px; }
.side-more[hidden], #composerSuggestions[hidden] { display:none; }
.sidebar-item-menu { position:fixed; z-index:100; display:flex; flex-direction:column; gap:4px; padding:5px; border-radius:10px; background:#262626; box-shadow:0 12px 40px #0006; }
.sidebar-item-menu button { display:flex; align-items:center; gap:9px; min-height:34px; padding:7px 10px; border-radius:6px; background:none; color:#ddd; text-align:left; font-size:12px; }
.sidebar-item-menu button:hover { background:#ffffff0d; }
.sidebar-item-menu button[data-sidebar-menu-action="delete"] { color:#fa8585; }
.sidebar-collapsed .brand-row .brand-home, .sidebar-collapsed .side-section { display:none; }
.sidebar-collapsed .brand-row { justify-content:center; padding:0 0 12px; }
.sidebar-collapsed .sidebar-collapse { margin:0; }
@media (max-width:760px) {
  .brand-row .brand-home, .sidebar .side-section { display:none; }
  .brand-row { justify-content:center; padding:0 0 12px; }
  .sidebar-collapse { margin:0; }
  .topbar { padding:0 12px; }
  .topbar .breadcrumb, .top-actions .top-pill, .top-actions [data-action="gift"], .points-pill small { display:none; }
  .topbar { justify-content:flex-end; }
  .top-actions { gap:6px; }
}
@media (hover:none) { .conversation-more, .canvas-item-actions { opacity:1; pointer-events:auto; } .canvas-item { padding-right:54px; } }
/* Composer affordances also use dedicated SVG classes, not .ui-icon. */
.tool-chevron, .reference-icon, .send-icon {
  display:block; width:18px; height:18px; flex:0 0 18px;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.tool-chevron { width:12px; height:12px; flex-basis:12px; }
.reference-add-icon { width:22px; height:22px; }
.reference-add-icon .reference-icon { width:22px; height:22px; }
.sidebar .side-section.canvas-section { opacity:1; }