/* Single-row document command bar. Loaded after legacy styles.css. */
#topbar {
  --toolbar-control-width: clamp(40px, 2.3vw, 44px);
  --toolbar-icon-size: 19px;
  --toolbar-label-gap: 7px;
  width: 100vw !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 7px 10px 9px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(5px, .4vw, 8px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: #8b6cf0 rgba(255, 255, 255, .08) !important;
  scrollbar-gutter: stable !important;
  background: #090e1d !important;
  box-shadow: 0 8px 24px rgba(2, 6, 16, .28) !important;
}

#topbar::-webkit-scrollbar { display: block !important; height: 5px !important; }
#topbar::-webkit-scrollbar-track { background: rgba(255, 255, 255, .07) !important; border-radius: 999px !important; }
#topbar::-webkit-scrollbar-thumb { min-width: 100px !important; background: #8b6cf0 !important; border-radius: 999px !important; }

/* Flatten the two legacy groups into one visible command row. */
#topbar .topbar-primary,
#topbar .topbar-document-tools { display: contents !important; }
#topbar > .spacer,
#topbar .topbar-project-title { display: none !important; }

#topbar .topbar-primary > * { order: 5; }
#topbar .topbar-document-tools > * { order: 10; }
#topbar #backToProjects { order: 0; }
#topbar #aiToolBtn { order: 1; }
#topbar #projectSearchForm { order: 2; }
#topbar #projectCompareBtn { order: 3; }
#topbar #birkiNavBtn { order: 4; }

#topbar .btn,
#topbar .seg,
#topbar .counter,
#topbar #aiToolBtn,
#topbar .topbar-action-btn,
#topbar .topbar-back-compact {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 10px !important;
  flex: 0 0 auto !important;
}

#topbar .btn {
  gap: 6px !important;
  padding: 0 10px !important;
  font: 680 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: .005em !important;
}

#topbar .btn,
#topbar .seg,
#topbar .project-search {
  transition:
    color .16s ease,
    border-color .16s ease,
    background-color .16s ease,
    box-shadow .16s ease !important;
}

#topbar button.btn.topbar-expandable {
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  padding-inline: 10px !important;
  gap: var(--toolbar-label-gap) !important;
  justify-content: center !important;
  overflow: visible !important;
  transition:
    color .16s ease,
    border-color .16s ease,
    background-color .16s ease,
    box-shadow .16s ease !important;
}

#topbar .btn-icon-only {
  color: #d8deec !important;
  border-color: rgba(148, 163, 184, .18) !important;
  background: rgba(255, 255, 255, .045) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
  transition:
    color .16s ease,
    border-color .16s ease,
    background-color .16s ease,
    box-shadow .16s ease !important;
}

#topbar .btn-icon-only:hover:not(:disabled),
#topbar .btn-icon-only:focus-visible {
  color: #f5f3ff !important;
  border-color: rgba(167, 139, 250, .46) !important;
  background: rgba(124, 92, 255, .13) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 5px 14px rgba(2, 6, 23, .2) !important;
}

#topbar .btn-icon-only.active,
#topbar .btn-icon-only.active:hover,
#topbar .btn-icon-only[aria-pressed="true"],
#topbar #rulerToolBtn.calibrating,
#topbar #rulerToolBtn.calibrating:hover {
  color: #ffffff !important;
  border-color: rgba(167, 139, 250, .72) !important;
  background: linear-gradient(180deg, rgba(108, 75, 190, .72), rgba(74, 49, 139, .78)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 0 0 1px rgba(139, 92, 246, .08),
    0 5px 16px rgba(20, 13, 43, .28) !important;
}

#topbar .btn-icon-only:disabled {
  color: #6f7b90 !important;
  border-color: rgba(100, 116, 139, .13) !important;
  background: rgba(255, 255, 255, .025) !important;
  box-shadow: none !important;
}

#topbar .topbar-action-btn {
  color: #d8deec !important;
  border-color: rgba(148, 163, 184, .18) !important;
  background: rgba(255, 255, 255, .045) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

#topbar .topbar-action-btn:hover:not(:disabled),
#topbar .topbar-action-btn:focus-visible {
  color: #f5f3ff !important;
  border-color: rgba(167, 139, 250, .46) !important;
  background: rgba(124, 92, 255, .13) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 5px 14px rgba(2, 6, 23, .2) !important;
  transform: translateY(-1px) !important;
}
#topbar .btn.topbar-back-compact {
  width: var(--toolbar-control-width) !important;
  min-width: var(--toolbar-control-width) !important;
  max-width: var(--toolbar-control-width) !important;
  padding: 0 !important;
}

#topbar button.btn.topbar-expandable > svg,
#topbar button.btn.topbar-expandable .tape-measure-icon,
#topbar #aiToolBtn.topbar-expandable > svg {
  width: var(--toolbar-icon-size) !important;
  height: var(--toolbar-icon-size) !important;
  flex: 0 0 var(--toolbar-icon-size) !important;
}

/* Action labels stay fully visible. Geometry never changes on hover/focus. */
#topbar button.btn.topbar-expandable .btn-label-text,
#topbar #aiToolBtn.topbar-expandable .btn-label-text {
  display: inline-block !important;
  position: static !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  overflow: visible !important;
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  font: inherit !important;
  text-overflow: clip !important;
  transition: none !important;
}

#topbar button.btn.topbar-expandable:hover,
#topbar button.btn.topbar-expandable:hover:not(:disabled),
#topbar button.btn.topbar-expandable:focus-visible {
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  padding-inline: 10px !important;
  gap: var(--toolbar-label-gap) !important;
  transform: none !important;
}

#topbar button.btn.topbar-expandable:disabled:hover {
  transform: none !important;
}

#topbar button.btn.topbar-expandable:hover .btn-label-text,
#topbar button.btn.topbar-expandable:hover:not(:disabled) .btn-label-text,
#topbar button.btn.topbar-expandable:focus-visible .btn-label-text,
#topbar #aiToolBtn.topbar-expandable:hover .btn-label-text,
#topbar #aiToolBtn.topbar-expandable:focus-visible .btn-label-text {
  max-width: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) !important;
  font: inherit !important;
  transition-delay: 0s !important;
}

/* One restrained motion language replaces the competing infinite icon loops. */
#topbar .btn-icon-only > svg {
  transition: transform .18s cubic-bezier(.2, .8, .2, 1) !important;
}

#topbar .btn-icon-only:hover:not(:disabled) > svg,
#topbar .btn-icon-only:focus-visible > svg {
  transform: none !important;
}

#topbar #rulerToolBtn:hover .tape-tongue,
#topbar #rulerToolBtn:focus-visible .tape-tongue {
  animation: none !important;
  transform: none !important;
}

#topbar #selectBtn:hover .blade-top,
#topbar #selectBtn:focus-visible .blade-top {
  animation: none !important;
  transform: none !important;
}

#topbar #selectBtn:hover .blade-bottom,
#topbar #selectBtn:focus-visible .blade-bottom {
  animation: none !important;
  transform: none !important;
}

#topbar #textToolBtn:hover svg,
#topbar #textToolBtn:focus-visible svg,
#topbar #extractPagesBtn:hover .extract-icon,
#topbar #extractPagesBtn:focus-visible .extract-icon,
#topbar #topbarPrintTiledBtn:hover .printer-icon,
#topbar #topbarPrintTiledBtn:focus-visible .printer-icon {
  animation: none !important;
}

#topbar #extractPagesBtn:hover .arrow-up,
#topbar #extractPagesBtn:focus-visible .arrow-up {
  animation: none !important;
  transform: none !important;
}

#topbar #topbarPrintTiledBtn:hover .paper-out,
#topbar #topbarPrintTiledBtn:focus-visible .paper-out {
  animation: none !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #topbar .topbar-expandable,
  #topbar .topbar-expandable .btn-label-text,
  #topbar .topbar-expandable > svg,
  #topbar .topbar-expandable svg * {
    animation: none !important;
    transition-duration: 0s !important;
  }
}

#topbar #aiToolBtn.topbar-expandable {
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  padding-inline: 10px !important;
  gap: var(--toolbar-label-gap) !important;
  color: #ffffff !important;
  border-color: rgba(196, 181, 253, .58) !important;
  background: linear-gradient(180deg, #7854dc 0%, #643bc3 100%) !important;
  background-size: 100% 100% !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 5px 15px rgba(53, 31, 104, .32) !important;
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
}

#topbar #aiToolBtn.topbar-expandable:hover,
#topbar #aiToolBtn.topbar-expandable:focus-visible {
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  padding-inline: 10px !important;
  gap: var(--toolbar-label-gap) !important;
  color: #ffffff !important;
  border-color: rgba(221, 214, 254, .78) !important;
  background: linear-gradient(180deg, #8461e6 0%, #6c43cb 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .17),
    0 6px 17px rgba(53, 31, 104, .38) !important;
  transform: none !important;
  animation: none !important;
  filter: none !important;
}

#topbar .project-search {
  width: clamp(270px, 16vw, 310px) !important;
  min-width: clamp(270px, 16vw, 310px) !important;
  max-width: clamp(270px, 16vw, 310px) !important;
  height: 40px !important;
  flex: 0 0 clamp(270px, 16vw, 310px) !important;
  padding: 0 6px 0 10px !important;
  gap: 6px !important;
  border-radius: 10px !important;
}

#topbar .project-search input { min-width: 0 !important; font-size: 12px !important; }
#topbar .project-search-run {
  min-width: 54px !important;
  height: 30px !important;
  padding: 0 9px !important;
  font: 680 11.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
#topbar .project-search-nav {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 30px !important;
  flex: 0 0 72px !important;
}
#topbar .project-search-nav button {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  flex: 0 0 18px !important;
  padding: 0 !important;
}
#topbar .project-search-nav span {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  flex: 0 0 36px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#topbar .seg,
#topbar .counter { flex: 0 0 auto !important; }
#topbar .seg { min-width: max-content !important; }
#topbar .seg-btn { width: 32px !important; min-width: 32px !important; flex-basis: 32px !important; font-size: 18px !important; }
#topbar .seg-mid { min-width: 64px !important; padding: 0 8px !important; font-size: 12px !important; }
#topbar .zoom-mid { min-width: 58px !important; font-size: 12px !important; }
#topbar .counter { min-width: 104px !important; padding: 0 10px !important; font-size: 12px !important; }

.main, .projects-view { top: 56px !important; }
.projects-view { height: calc(100% - 56px) !important; }
.ai-sidebar { top: 56px !important; height: calc(100dvh - 56px) !important; }
.welcome-toast { top: 68px !important; }

/* Старый технический выбор контекста больше не является частью продукта. */
.ai-project-context-modes,
.ai-pdf-context { display: none !important; }

.ai-context-toolbar {
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto) !important;
  padding: 10px 12px !important;
}

.ai-selection-count:empty { display: none !important; }

@media (max-width: 760px) {
  #topbar .project-search { width: 240px !important; min-width: 240px !important; max-width: 240px !important; flex-basis: 240px !important; }
}

@media (max-width: 1400px) {
  #topbar { gap: 4px !important; }
  #topbar .project-search { width: 240px !important; min-width: 240px !important; max-width: 240px !important; flex-basis: 240px !important; }
}

@media (max-width: 1300px) {
  #topbar { gap: 3px !important; }
}