/* Unified first-party workspace navigation. Keep feature routes and localization intact. */
:root { --chat-sidebar-width: 224px; }
.chat-sidebar {
  --nav-text: #cbd5e3;
  --nav-muted: #98a8bd;
  --nav-icon: #8594a9;
  --nav-hover: #202b3b;
  --nav-active: #20334f;
  --nav-accent: #8bb8ff;
  --nav-divider: #293445;
  width: var(--chat-sidebar-width);
  padding: 0 12px 14px;
  background: linear-gradient(180deg,#17202d 0%,#151d29 100%);
  border-right: 1px solid #2b3545;
  scrollbar-width: thin;
  scrollbar-color: #3c4a5e transparent;
}
.chat-sidebar .chat-brand {
  height: 76px;
  flex-basis: 76px;
  gap: 10px;
  margin: 0 0 13px;
  padding: 0 8px;
  border-bottom: 1px solid var(--nav-divider);
}
.chat-sidebar .chat-brand img { width: 33px; height: 33px; flex-basis: 33px; }
.chat-sidebar .chat-brand-name { font-size: 14px; font-weight: 650; letter-spacing: -.2px; }
.chat-sidebar .chat-brand-primary { color: #e6edf8; }
.chat-sidebar .chat-brand-accent { color: #94aedd; margin-left: 2px; }
.chat-sidebar .chat-nav-label {
  display: flex;
  align-items: center;
  min-height: 25px;
  margin: 0;
  padding: 0 12px 7px;
  border: 0;
  color: var(--nav-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .04em;
  line-height: 1.6;
}
.chat-sidebar :is(.recharge-zone-label,.after-sales-label,.chat-nav-label-spaced) {
  min-height: 0;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--nav-divider);
  color: var(--nav-muted);
}
.chat-sidebar .recharge-zone-label::before { content: none; display: none; box-shadow: none; }
.chat-sidebar .chat-nav { display: grid; gap: 4px; margin: 0; }
.chat-sidebar .chat-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: initial;
  gap: 11px;
  width: 100%;
  height: 41px;
  min-height: 41px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--nav-text);
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.chat-sidebar .chat-nav-item > svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--nav-icon);
  stroke-width: 1.8;
}
.chat-sidebar .chat-nav-item > :is(.chat-nav-text,.service-nav-full) {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-sidebar .service-nav-short { display: none; }
.chat-sidebar .chat-nav-item > svg.chat-nav-external {
  width: 13px;
  height: 13px;
  flex-basis: 13px;
  margin-left: auto;
  color: #64758e;
  opacity: .75;
}
.chat-sidebar .chat-nav-item:hover { color: #edf3fc; background: var(--nav-hover); border-color: #344155; }
.chat-sidebar .chat-nav-item:hover > svg { color: #bacce4; }
.chat-sidebar .chat-nav-item.active,
.chat-sidebar .chat-nav-item[aria-expanded="true"] {
  color: var(--nav-accent);
  background: var(--nav-active);
  border-color: #345077;
  border-radius: 8px;
  box-shadow: none;
  font-weight: 700;
}
.chat-sidebar .chat-nav-item.active > svg,
.chat-sidebar .chat-nav-item[aria-expanded="true"] > svg { color: var(--nav-accent); }
.chat-sidebar .chat-nav-item:focus-visible { outline: 2px solid #84b4ff; outline-offset: 2px; }
.chat-sidebar .chat-sidebar-spacer { flex: 1 0 18px; min-height: 18px; }
.chat-sidebar .chat-sidebar-foot { margin-top: 18px; padding: 15px 11px 2px; border-color: var(--nav-divider); }
.chat-sidebar .chat-sidebar-branding { gap: 4px; color: #6f8098; font-size: 10px; line-height: 1.45; }
.chat-sidebar .chat-sidebar-branding > :first-child { color: #9cacc3; font-size: 11px; font-weight: 550; }
html .chat-topbar { left: var(--chat-sidebar-width); }
html .chat-main { margin-left: var(--chat-sidebar-width); }
html body:not([data-page="chat"]) > .app-shell > .workspace { margin-left: var(--chat-sidebar-width); }

html[data-workbench-theme="light"] .chat-sidebar {
  --nav-text: #3e5068;
  --nav-muted: #63748b;
  --nav-icon: #8090a4;
  --nav-hover: #edf1f6;
  --nav-active: #e8f0fd;
  --nav-accent: #326dd1;
  --nav-divider: #e3e8ef;
  background: #f8fafd;
  border-color: #e0e6ee;
  scrollbar-color: #c5cfdb transparent;
}
html[data-workbench-theme="light"] .chat-sidebar .chat-brand-primary { color: #34465f; }
html[data-workbench-theme="light"] .chat-sidebar .chat-brand-accent { color: #5e76a0; }
html[data-workbench-theme="light"] .chat-sidebar .chat-nav-item { color: var(--nav-text); }
html[data-workbench-theme="light"] .chat-sidebar .chat-nav-item:hover { color: #263b56; background: var(--nav-hover); border-color: #dde4ed; }
html[data-workbench-theme="light"] .chat-sidebar .chat-nav-item.active,
html[data-workbench-theme="light"] .chat-sidebar .chat-nav-item[aria-expanded="true"] { color: var(--nav-accent); background: var(--nav-active); border-color: #cdddf6; }
html[data-workbench-theme="light"] .chat-sidebar .chat-sidebar-branding > :first-child { color: #647993; }

/* Keep every group usable on phones instead of hiding history/support links. */
@media(max-width:760px) {
  :root { --chat-sidebar-width: 0px; }
  .chat-sidebar { position: relative; inset: auto; width: 100%; max-height: none; height: auto; padding: 0 12px 14px; }
  .chat-sidebar .chat-brand { height: 58px; flex-basis: 58px; margin-bottom: 12px; }
  .chat-sidebar .chat-nav-label { padding-left: 4px; }
  .chat-sidebar :is(.recharge-zone-label,.after-sales-label,.chat-nav-label-spaced) { margin-top: 12px; padding-top: 12px; }
  .chat-sidebar .chat-nav { display: flex; flex-wrap: wrap; gap: 5px; }
  .chat-sidebar .chat-nav-item { width: auto; max-width: 100%; height: 37px; min-height: 37px; flex: 0 1 auto; padding: 0 10px; font-size: 13px; }
  .chat-sidebar .chat-nav-item > svg { width: 16px; height: 16px; flex-basis: 16px; }
  .chat-sidebar .chat-nav-item > :is(.chat-nav-text,.service-nav-full) { flex: initial; }
  .chat-sidebar .secondary-nav { display: flex; }
  .chat-sidebar .chat-sidebar-spacer,.chat-sidebar .chat-sidebar-foot { display: none; }
  html .chat-topbar { left: 0; }
  html .chat-main { margin-left: 0; }
  html body:not([data-page="chat"]) > .app-shell > .workspace { margin-left: 0; }
}
@media(prefers-reduced-motion:reduce) {
  .chat-sidebar .chat-nav-item { transition: none; }
}

/* Refined sidebar control: rounded-square outline and state-aware panel icon. */
html[data-workbench-theme] #chatTopbar #sidebarToggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;min-width:36px;padding:0;border:1px solid #3e4d61;border-radius:8px;background:#202d3d;color:#bdcce0;box-shadow:0 1px 2px #0002;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
html[data-workbench-theme] #chatTopbar #sidebarToggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html[data-workbench-theme] #chatTopbar #sidebarToggle .sidebar-toggle-divider{opacity:.65}
html[data-workbench-theme] #chatTopbar #sidebarToggle .sidebar-toggle-arrow{transform-origin:15px 12px;transition:transform .18s ease}
html[data-workbench-theme] #chatTopbar #sidebarToggle[aria-expanded="false"] .sidebar-toggle-arrow{transform:rotate(180deg)}
html[data-workbench-theme] #chatTopbar #sidebarToggle:hover{background:#2c3d52;border-color:#6984a7;color:#e8f2ff}
html[data-workbench-theme] #chatTopbar #sidebarToggle:active{background:#172739;box-shadow:inset 0 1px 3px #0003}
html[data-workbench-theme] #chatTopbar #sidebarToggle:focus-visible{outline:2px solid #8abaff;outline-offset:3px}
html[data-workbench-theme="light"] #chatTopbar #sidebarToggle{border-color:#d0dbe8;background:#fff;color:#50647e;box-shadow:0 1px 3px #2137560d}
html[data-workbench-theme="light"] #chatTopbar #sidebarToggle:hover{border-color:#9ab6db;background:#edf4ff;color:#245b9d}
html[data-workbench-theme="light"] #chatTopbar #sidebarToggle:active{background:#e1ebf8;box-shadow:inset 0 1px 3px #21375612}
@media(prefers-reduced-motion:reduce){html[data-workbench-theme] #chatTopbar #sidebarToggle,html[data-workbench-theme] #chatTopbar #sidebarToggle .sidebar-toggle-arrow{transition:none}}