/* Shared chrome for the signed-in workspace. The public site has its own navigation. */
body.workspace-flow-active {
  --shell-accent: #9fbaff;
  --shell-violet: #c0a5f2;
  --shell-mint: #80d7bd;
  --shell-warning: #eab67a;
  --shell-edge: color-mix(in srgb, var(--flow-line) 76%, transparent);
  --shell-fill: color-mix(in srgb, var(--flow-surface) 78%, var(--flow-side));
  --shell-gutter: clamp(20px, 3vw, 48px);
}
body.workspace-flow-active[data-theme="light"] {
  --shell-accent: #385eaa;
  --shell-violet: #7250aa;
  --shell-mint: #236f60;
  --shell-warning: #86520e;
}
.shell-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (min-width: 1024px) {
  body.workspace-flow-active { --ui-bar: 64px; }
}

body.workspace-flow-active #workspace #sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--flow-side) !important;
  color: var(--flow-text);
  border-right: 1px solid var(--shell-edge);

  .sidebar-brand {
    flex: none;
    display: flex;
    align-items: center;
    height: var(--ui-bar);
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 22px;
    border-bottom: 1px solid var(--shell-edge);
  }
  .sidebar-brand img {
    width: 116px !important;
    height: 32px !important;
    object-fit: contain;
    object-position: left center;
  }
  .shell-nav-scroll {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 12px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .shell-nav-scroll:is(:hover, :focus-within) {
    scrollbar-color: var(--flow-line) transparent;
  }
  .side-nav {
    display: flex;
    flex-direction: column;
    gap: 2px !important;
    padding: 0;
    margin: 0;
  }
  .shell-nav-label {
    display: block;
    padding: 13px 11px 4px;
    color: var(--flow-muted);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .045em;
  }
  .side-nav > button[data-view] {
    --nav-tone: var(--shell-accent);
    align-items: center;
    justify-content: flex-start;
    text-align: start;
    gap: 11px !important;
    min-height: 36px !important;
    height: auto;
    padding: 7px 11px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    color: var(--flow-muted) !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.45;
    box-shadow: none !important;
  }
  .side-nav > button[data-view="research"] { --nav-tone: var(--shell-violet); }
  .side-nav > button[data-view="iuai-chat"] { --nav-tone: var(--shell-mint); }
  .nav-icon {
    width: 21px !important;
    height: 21px;
    flex: 0 0 21px !important;
    display: grid;
    place-items: center;
    border: 0 !important;
    border-radius: 0;
    color: inherit;
    background: transparent !important;
  }
  .nav-icon svg { width: 19px; height: 19px; }
  .side-nav > button[data-view]:hover {
    color: var(--flow-text) !important;
    background: var(--flow-hover) !important;
  }
  .side-nav > button[data-view].active {
    color: var(--flow-text) !important;
    border-color: color-mix(in srgb, var(--nav-tone) 26%, transparent) !important;
    background: linear-gradient(100deg, color-mix(in srgb, var(--nav-tone) 18%, var(--flow-side)), color-mix(in srgb, var(--nav-tone) 7%, var(--flow-side))) !important;
    font-weight: 650;
  }
  .side-nav > button.active .nav-icon { color: var(--nav-tone); }
  .side-nav > .iuone-workspace-entry {
    min-height: 44px !important;
    height: auto;
    gap: 10px !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 1px solid color-mix(in srgb, var(--shell-mint) 23%, var(--flow-line)) !important;
    background: color-mix(in srgb, var(--shell-mint) 7%, var(--flow-side)) !important;
    color: var(--flow-text) !important;
    font-size: 14px !important;
    font-weight: 600;
  }
  .iuone-workspace-entry > i {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-inline-start: auto;
    padding: 0;
    color: var(--shell-mint);
    border: 0;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.3;
    opacity: 1;
  }
  .iuone-workspace-entry > i::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
  }
  .side-nav + button {
    display: flex;
    width: 100%;
    min-height: 34px;
    margin-top: 10px;
    justify-content: flex-start;
    gap: 10px;
    background: transparent;
    color: var(--flow-muted);
    border: 0;
    border-top: 1px solid var(--shell-edge);
    border-radius: 0;
    padding: 10px 11px 0;
    font-size: 12px;
    font-weight: 500;
  }
  .side-nav + button:hover { color: var(--flow-text); }
  .side-nav + button::before {
    content: "";
    width: 20px;
    height: 18px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17c2-2 2-4 2-7a5 5 0 0 1 10 0c0 3 0 5 2 7H5Zm5 3a3 3 0 0 0 4 0'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .sidebar-bottom {
    flex: none;
    margin: 0 !important;
    padding: 10px 14px max(10px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid var(--shell-edge);
  }
  .side-plan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    margin: 0;
    padding: 3px 4px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .side-plan > span { font-size: 11px; }
  .side-plan small { grid-area: 1 / 2; font-size: 11px; }
  .side-plan .mini-progress { grid-area: 2 / 1 / 3 / -1; height: 3px !important; margin: 0; }
  .user-chip {
    min-height: 40px;
    margin-top: 2px !important;
    padding: 5px 4px !important;
    color: var(--flow-text);
    border: 0 !important;
    background: transparent;
  }
  .user-chip:hover { background: var(--flow-hover); }
  .user-chip .avatar { width: 31px; height: 31px; border-radius: 50%; }
}

body.workspace-flow-active #workspace .app-topbar {
  gap: 12px;
  border-bottom: 1px solid var(--shell-edge);
  background: var(--flow-bg);
  color: var(--flow-text);
  .app-search {
    flex: 1 1 290px;
    min-width: 0;
    max-width: 460px;
    height: 38px;
    padding: 0 11px;
    gap: 9px;
    border: 1px solid var(--shell-edge);
    border-radius: 10px;
    background: var(--shell-fill);
    color: var(--flow-muted);
    cursor: text;
  }
  .app-search:focus-within {
    border-color: var(--shell-accent);
    outline: 2px solid color-mix(in srgb, var(--shell-accent) 22%, transparent);
  }
  .app-search svg { width: 17px; height: 17px; }
  .app-search input {
    flex: 1;
    height: 100%;
    font: inherit;
    font-size: 13px;
    color: var(--flow-text);
  }
  .app-search input::placeholder { color: var(--flow-muted); opacity: 1; }
  .app-search input:focus-visible { outline: 0; box-shadow: none; }
  .app-search kbd {
    flex: none;
    display: grid;
    place-items: center;
    width: 19px;
    height: 20px;
    border: 1px solid var(--flow-line);
    border-radius: 5px;
    color: var(--flow-muted);
    font: 12px/1 ui-monospace, monospace;
  }
  .shell-search-toggle, .shell-search-toggle .close-symbol { display: none; }
  .topbar-actions { gap: 6px; height: auto; }
  .iuone-top-entry {
    min-height: 38px;
    padding: 5px 8px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--flow-text);
  }
  .iuone-top-entry i { display: none; }
  .iuone-top-entry .iuone-entry-mark { width: 24px; height: 24px; flex-basis: 24px; }
  #system-chip {
    min-height: 0;
    height: auto;
    gap: 7px;
    padding: 0 10px;
    color: var(--shell-mint) !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 12px;
    font-weight: 500 !important;
    cursor: default;
  }
  #system-chip i {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50%;
    background: currentColor !important;
    box-shadow: none !important;
  }
  #system-chip.offline { color: var(--shell-warning) !important; }
  .app-lang .lang-toggle, #theme-toggle, #sidebar-toggle, .shell-search-toggle {
    align-items: center;
    justify-content: center;
    color: var(--flow-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    box-shadow: none;
  }
  .app-lang .lang-toggle { min-width: 0; height: 38px; min-height: 38px; gap: 5px; padding: 0 8px; font-size: 12px; }
  #theme-toggle { width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
  :is(#theme-toggle, #sidebar-toggle, .shell-search-toggle, .iuone-top-entry, .lang-toggle):hover,
  .app-lang.open .lang-toggle {
    color: var(--flow-text) !important;
    background: var(--flow-hover) !important;
  }
  #top-new-research {
    height: 38px;
    min-height: 38px;
    padding: 0 14px;
    gap: 6px;
    border: 1px solid #697dda;
    border-radius: 10px;
    background: linear-gradient(110deg, #3e60b0, #5c4eac);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
  }
  #top-new-research svg { display: block; width: 17px; height: 17px; }
  #top-new-research:is(:hover, [aria-expanded="true"]) { background: linear-gradient(110deg, #486cc0, #6859bb); }
  #top-avatar { width: 34px; height: 34px; min-height: 34px; min-width: 34px; margin-inline-start: 4px; border-radius: 50%; }
  #top-avatar img { border-radius: inherit; object-fit: cover; }
  .lang-popover {
    max-height: min(60dvh, 440px);
    overflow-y: auto;
    border: 1px solid var(--flow-line);
    border-radius: 12px;
    padding: 5px;
    background: var(--flow-surface);
    color: var(--flow-text);
    box-shadow: 0 10px 28px #0002;
  }
}
body.workspace-flow-active #iuai-top-new-menu {
  background: var(--flow-surface);
  border: 1px solid var(--flow-line);
  color: var(--flow-text);
}
body.workspace-flow-active #iuai-top-new-menu button {
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--flow-text);
}
body.workspace-flow-active #iuai-top-new-menu button:is(:hover, :focus-visible) { background: var(--flow-hover); }
body.workspace-flow-active .iuai-nav-toggle-v232 {
  border-color: transparent !important;
  color: var(--flow-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.workspace-flow-active .iuai-nav-toggle-v232:is(:hover, :focus-visible) {
  background: var(--flow-hover) !important;
  color: var(--flow-text) !important;
}
body.workspace-flow-active :is(#sidebar, .app-topbar, #iuai-top-new-menu) :is(button, a):focus-visible,
body.workspace-flow-active .iuai-nav-toggle-v232:focus-visible {
  outline: 2px solid var(--shell-accent) !important;
  outline-offset: 2px;
}
@media (min-width: 1024px) {
  body.workspace-flow-active #workspace .app-topbar {
    padding-inline: max(var(--shell-gutter), calc((100% - 1380px) / 2));
  }
}
@media (min-width: 950px) {
  /* The restored panel toggles occupy the physical left edge of the header. */
  body.workspace-flow-active:is(.iuai-primary-nav-collapsed-v232, .iuai-ai-panel-collapsed-v232, .iuai-research-panel-collapsed-v1) #workspace .app-topbar { padding-left: max(56px, var(--shell-gutter)) !important; }
  body.workspace-flow-active.iuai-primary-nav-collapsed-v232:is(.iuai-ai-panel-collapsed-v232, .iuai-research-panel-collapsed-v1) #workspace .app-topbar { padding-left: max(96px, var(--shell-gutter)) !important; }
}
@media (max-width: 1023px) {
  body.workspace-flow-active #workspace #sidebar .side-nav > button[data-view] { min-height: 44px !important; }
  body.workspace-flow-active #workspace #sidebar .sidebar-brand { height: calc(60px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  body.workspace-flow-active #workspace #sidebar .iuai-drawer-close { top: calc(9px + env(safe-area-inset-top)); right: 12px; background: transparent; color: var(--flow-muted); border-color: transparent; }
}
@media (max-width: 767px) {
  body.workspace-flow-active #workspace .app-topbar {
    gap: 4px !important;
    .mobile-workspace-brand { order: 1; }
    .shell-search-toggle, #sidebar-toggle, #top-avatar {
      flex: 0 0 44px !important;
      width: 44px !important;
      min-width: 44px !important;
      height: 44px !important;
    }
    .shell-search-toggle { display: grid; place-items: center; order: 2; padding: 0; }
    #sidebar-toggle { order: 0 !important; }
    #top-new-research { order: 3; height: 44px !important; }
    #top-avatar { order: 4; margin: 0; }
    .app-search, .app-search kbd { display: none; }
    &.shell-search-open {
      .app-search { display: flex !important; order: 0; max-width: none; height: 44px; }
      .app-search input { font-size: 16px; }
      #sidebar-toggle, .mobile-workspace-brand, .topbar-actions, .search-symbol { display: none !important; }
      .close-symbol { display: block; }
    }
  }
}
@media (pointer: coarse) {
  body.workspace-flow-active #workspace .app-topbar .app-search kbd { display: none; }
}
@media (max-height: 480px) {
  body.workspace-flow-active #workspace #sidebar { overflow-y: auto !important; }
  body.workspace-flow-active #workspace #sidebar .shell-nav-scroll { flex: none; overflow: visible; }
}