/* Shared dashboard bars. Solid surfaces, native controls, no blur or layout loops. */
html[data-theme] #app.shell{
  --bar-bg:#111b2b;--bar-control:#19263a;--bar-hover:#24334b;
  --bar-line:#34445e;--bar-ink:#f3f5ff;--bar-muted:#c0cadd;
  --bar-selected:#302a4b;--bar-accent:#c9baff;
  --bar-primary:#b7a4ff;--bar-primary-ink:#171329;
}
html[data-theme=light] #app.shell{
  --bar-bg:#f9faff;--bar-control:#fff;--bar-hover:#edf1fa;
  --bar-line:#c5cfe0;--bar-ink:#1b2740;--bar-muted:#475873;
  --bar-selected:#eee9ff;--bar-accent:#5937bd;
  --bar-primary:#6243c8;--bar-primary-ink:#fff;
}

/* Header: one quiet tray; controls keep their original names and handlers. */
html[data-theme] #app.shell .top{gap:18px;flex-wrap:wrap;padding-bottom:20px;border-bottom:0}
html[data-theme] #app.shell .top h1{white-space:normal;line-height:1.25}
html[data-theme] #app.shell .top-actions{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
  gap:10px;width:100%;max-width:none;margin:0;padding:12px;
  border:1px solid var(--bar-line);border-radius:18px;background:var(--bar-bg);
  box-shadow:none;box-sizing:border-box;
}
html[data-theme] #app.shell .top-actions :is(.tool-group,.view-tools){
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;width:auto;min-width:0;
  margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;
}
html[data-theme] #app.shell .top-actions :is(.btn,.user-btn,.theme-toggle,select){
  min-height:44px;border:1px solid var(--bar-line);border-radius:11px;
  padding:10px 13px;font-size:14px!important;line-height:1.3;font-weight:600;
  color:var(--bar-ink);background:var(--bar-control);box-shadow:none;text-decoration:none;
}
html[data-theme] #app.shell .top-actions [data-theme-toggle]{
  width:44px!important;height:44px!important;min-width:44px!important;
  padding:8px;font-size:20px!important;
}
html[data-theme] #app.shell .top-actions .user-menu{margin-left:auto}
html[data-theme] #app.shell .top-actions .data-sync{color:var(--bar-muted);font-size:13px}
html[data-theme] #app.shell #headerReplySwitch[aria-checked=true]{
  border-color:var(--bar-accent);background:var(--bar-selected);color:var(--bar-accent);
}

/* Sidebar: readable rows and a single selection marker instead of a glow. */
html[data-skin][data-theme] #app.shell>.side{
  border-color:var(--bar-line);border-radius:24px;background:var(--bar-bg);
  box-shadow:none;scrollbar-width:thin;scrollbar-color:var(--bar-line) transparent;
}
html[data-theme] #app.shell .side .brand :is(strong,small){color:var(--bar-ink)}
html[data-theme] #app.shell .side :is(.workspace-card,.side-note){
  border:1px solid var(--bar-line);border-radius:14px;background:var(--bar-control);box-shadow:none;
}
html[data-theme] #app.shell .side :is(.workspace-card,.side-note) :is(strong,small,span){color:var(--bar-muted)}
html[data-theme] #app.shell .side :is(.menu-search,.mobile-menu-toggle){
  min-height:46px;border:1px solid var(--bar-line);border-radius:12px;
  background:var(--bar-control);color:var(--bar-muted);font-size:14px;box-shadow:none;
}
html[data-theme] #app.shell .workspace-nav{gap:6px}
html[data-theme] #app.shell .workspace-nav .nav{
  min-height:48px;height:auto;padding:10px 12px;border:1px solid transparent;
  border-radius:12px;background:transparent;color:var(--bar-muted);
  font-size:15px;font-weight:600;line-height:1.4;box-shadow:none;transform:none;
}
html[data-theme] #app.shell .workspace-nav .nav b{
  display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;
  border-radius:9px;background:var(--bar-control);color:var(--bar-muted);box-shadow:none;
}
html[data-theme] #app.shell .workspace-nav .nav.active{
  border-color:var(--bar-line);background:var(--bar-selected);color:var(--bar-ink);
  box-shadow:inset 3px 0 var(--bar-accent);transform:none;
}
html[data-theme] #app.shell .workspace-nav .nav.active b{color:var(--bar-accent);background:var(--bar-bg)}
html[data-theme] #app.shell .workspace-nav .nav:before{display:none}

/* Section navigation and panel pages share the same segmented-bar treatment. */
html[data-theme] #app.shell :is(.section-navigation,.panel-work-tabs,.view-tabs,.ig-tabs){
  padding:6px;border:1px solid var(--bar-line);border-radius:15px;
  background:var(--bar-bg);box-shadow:none;scrollbar-width:thin;
}
html[data-theme] #app.shell .section-navigation>div:not([hidden]){display:flex;flex-wrap:wrap;gap:4px}
html[data-theme] #app.shell .panel-work-tabs{flex-wrap:wrap;overflow:visible}
html[data-theme] #app.shell .panel-work-tabs button{flex:1 1 auto;max-width:100%;white-space:normal;word-break:normal;overflow-wrap:normal}
html[data-theme] #app.shell :is(.section-navigation,.panel-work-tabs,.view-tabs,.ig-tabs) button{
  min-height:44px;padding:10px 15px;border:1px solid transparent;border-radius:10px;
  background:transparent;color:var(--bar-muted);font-size:15px;line-height:1.4;
  font-weight:500;box-shadow:none;text-align:center;
}
html[data-theme] #app.shell :is(.section-navigation,.panel-work-tabs,.view-tabs,.ig-tabs) button:is([aria-current=page],[aria-selected=true],.active){
  border-color:var(--bar-line);background:var(--bar-selected);
  color:var(--bar-accent);font-weight:700;box-shadow:inset 0 -2px var(--bar-accent);
}

/* Calling is an explicit action tray, not another translucent settings card. */
html[data-theme] #app.shell #voiceAssistantPanel{container-type:inline-size}
html[data-theme] #app.shell #voiceAssistantPanel>.panel-work-tabs button{padding:10px 6px;font-size:14px}
html[data-theme] #app.shell #voiceAssistantPanel .voice-call-dock{
  padding:18px;border:1px solid var(--bar-line);border-radius:20px;
  border-top:3px solid var(--bar-accent);background:var(--bar-bg);
  color:var(--bar-ink);box-shadow:0 8px 20px #0000001a;
}
html[data-theme] #app.shell #voiceAssistantPanel .voice-call-dock :is(button,select){
  min-height:46px;border:1px solid var(--bar-line);border-radius:11px;
  background:var(--bar-control);color:var(--bar-ink);box-shadow:none;
}
html[data-theme] #app.shell #voiceAssistantPanel .voice-call-bar{padding-bottom:12px;border-bottom:1px solid var(--bar-line)}
html[data-theme] #app.shell #voiceAssistantPanel .voice-call-dock #voiceToggle[aria-checked=true]{
  background:var(--bar-selected);border-color:var(--bar-accent);color:var(--bar-accent);
}
html[data-theme] #app.shell #voiceAssistantPanel #voiceCall{
  background:var(--bar-primary);border-color:var(--bar-primary);color:var(--bar-primary-ink);
}
html[data-theme] #app.shell #voiceAssistantPanel .voice-call-dock #voiceCall:disabled{
  opacity:1;background:var(--bar-control);border-color:var(--bar-line);color:var(--bar-muted);
}
html[data-theme] #app.shell #voiceAssistantPanel .voice-call-dock #voiceStop{color:#ffbdc3;background:#3b202e;border-color:#805363}
html[data-theme=light] #app.shell #voiceAssistantPanel .voice-call-dock #voiceStop{color:#9c233e;background:#fff0f3;border-color:#d48b9c}
html[data-theme] #app.shell #voiceAssistantPanel .voice-call-dock :is(#voiceReason,#voiceState){color:var(--bar-muted)}

/* AI chat's existing toolbar/composer use the same surfaces, without new layers. */
html[data-theme] #app.shell .chat-tools{border:1px solid var(--bar-line);border-radius:15px;background:var(--bar-bg)}
html[data-theme] #app.shell .sw-toolbar{background:var(--bar-bg);border-color:var(--bar-line);color:var(--bar-ink)}
html[data-theme] #app.shell .sw-toolbar button{border-radius:10px;border-color:var(--bar-line);background:var(--bar-control);color:var(--bar-ink)}
html[data-theme] #app.shell .sw-composer-actions{border-color:var(--bar-line)}

/* Focus is deliberately stronger than hover. No position/size animations. */
html[data-theme] #app.shell :is(.top-actions,.workspace-nav,.section-navigation,.panel-work-tabs,.view-tabs,.ig-tabs,.voice-call-dock) :is(button,a,select){
  transition:background-color 120ms ease,color 120ms ease,border-color 120ms ease;
}
html[data-theme] #app.shell :is(.top-actions,.workspace-nav,.section-navigation,.panel-work-tabs,.view-tabs,.ig-tabs,.voice-call-dock) :is(button,a,select):focus-visible{
  outline:3px solid var(--bar-accent);outline-offset:3px;
}
@media(hover:hover){
  html[data-theme] #app.shell .top-actions :is(button,a):hover,
  html[data-theme] #app.shell .workspace-nav .nav:not(.active):hover,
  html[data-theme] #app.shell :is(.section-navigation,.panel-work-tabs,.view-tabs,.ig-tabs) button:not([aria-selected=true]):not(.active):hover{
    background:var(--bar-hover);color:var(--bar-ink);transform:none;
  }
}
@media(max-width:780px){
  html[data-theme] #app.shell .top{gap:12px;padding-bottom:12px}
  html[data-theme] #app.shell .top-actions{gap:8px;padding:10px;border-radius:15px}
  html[data-theme] #app.shell .top-actions .user-menu{margin-left:0}
  html[data-theme] #app.shell .top-actions .view-tools{margin-left:auto}
  html[data-theme] #app.shell .top-actions .data-sync{display:none}
  html[data-theme] #app.shell .top-actions :is(.btn,.user-btn,select){padding-inline:10px}
  html[data-theme] #app.shell :is(.section-navigation,.panel-work-tabs,.view-tabs,.ig-tabs) button{padding:10px 11px;font-size:14px}
  html[data-theme] #app.shell #voiceAssistantPanel .voice-call-dock{padding:12px;border-radius:16px}
}
@container(max-width:640px){
  html[data-theme] #app.shell #voiceAssistantPanel>.panel-work-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container(max-width:330px){
  html[data-theme] #app.shell #voiceAssistantPanel>.panel-work-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  html[data-theme] #app.shell .top-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  html[data-theme] #app.shell .top-actions :is(.tool-group,.view-tools){display:contents}
  html[data-theme] #app.shell .top-actions :is(#shadowHomeButton,#refresh,.user-menu,[data-lang-picker]){grid-column:span 2;min-width:0;width:100%}
  html[data-theme] #app.shell .top-actions #headerReplySwitch{grid-column:span 3;justify-content:space-between}
  html[data-theme] #app.shell .top-actions [data-theme-toggle]{justify-self:end}
  html[data-theme] #app.shell .top-actions .user-btn{width:100%;justify-content:center;padding-inline:8px}
  html[data-theme] #app.shell .top-actions .data-sync{display:none}
  html[data-theme] #app.shell .top-actions [data-lang-picker] select{max-width:100%;width:100%;padding-inline:8px}
  html[data-theme] #app.shell #voiceAssistantPanel>.panel-work-tabs button{padding-inline:4px}
}
@media(prefers-reduced-motion:reduce){
  html[data-theme] #app.shell :is(.top-actions,.workspace-nav,.section-navigation,.panel-work-tabs,.view-tabs,.ig-tabs,.voice-call-dock) :is(button,a,select){transition:none}
}