/* Shared header + hamburger-menu + agent-sidebar styling for every ported page that
   uses partials/header-and-sidebar.html. works2.html is the canonical/"latest" source
   for these rules — edit THIS file, not per-page <style> blocks (there shouldn't be
   any of these rules left there). Page-specific overrides (repo-list, catalog listing,
   listing modal, etc.) stay local to each page's own <style> block. */

/* Agent sidebar (push layout, same technique as the React app) */
.agent-sidebar {
  flex-shrink: 0;
  width: 0;
  align-self: stretch;
  overflow: hidden;
  transition: width 0.25s ease;
}
.agent-sidebar.open {
  width: 30vw;
}
.agent-sidebar-inner {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30vw;
  background: var(--base);
  border-left: 1px solid var(--st-muted);
  display: flex;
  flex-direction: column;
  z-index: 110;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.agent-sidebar.open .agent-sidebar-inner {
  transform: translateX(0);
}
.agent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--st-muted);
}
.agent-header-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.agent-icon-btn {
  background: none;
  border: none;
  color: var(--t-medium);
  cursor: pointer;
  padding: 0.4rem;
  display: flex;
  border-radius: 6px;
  font-size: 2.2rem;
}
.agent-icon-btn:hover {
  background: var(--base-tint);
}
.agent-settings-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1.25rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  border-bottom: 1px solid transparent;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
}
.agent-settings-panel.open {
  max-height: 40rem;
  opacity: 1;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--st-muted);
  background: var(--base-tint);
}
.agent-settings-label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--t-medium);
}
.agent-input {
  font: inherit;
  font-size: 1.6rem;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--st-muted);
  background: var(--base);
  color: var(--t-bright);
  width: 100%;
}
.agent-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.agent-message {
  max-width: 90%;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  font-size: 1.6rem;
  line-height: 1.4;
  white-space: pre-wrap;
}
.agent-message-user {
  align-self: flex-end;
  background: var(--accent);
  color: #061019;
}
.agent-message-assistant {
  align-self: flex-start;
  background: var(--base-tint);
  border: 1px solid var(--st-muted);
  color: var(--t-bright);
}
.agent-error {
  margin: 0 1.25rem 0.5rem;
  color: #ff6b6b;
  font-size: 1.4rem;
}
.agent-input-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0;
  border-top: 1px solid var(--st-muted);
}
.agent-input-row .agent-input {
  flex: 1;
  background: var(--base-tint);
  border: 0px;
  border-radius: 0px;
  padding: 1.1rem 1.8rem;
}
.agent-input-row .agent-input:focus {
  outline: none;
  border-color: var(--accent);
}
.agent-clone-result {
  margin-top: 0.6rem;
  padding: 0.6rem;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--base);
}
.agent-clone-result code {
  display: block;
  margin: 0.35rem 0 0.6rem;
  word-break: break-all;
  font-size: 1.3rem;
}
.agent-clone-actions {
  display: flex;
  gap: 0.5rem;
}

/* Keep the header pinned instead of scrolling away with the page, and give the
   sticky background band symmetric top/bottom padding. .mxd-header's native inset is
   asymmetric (left:3rem, but the right-side gap is 8.6rem) — extra room was reserved
   on the right for the original floating hamburger. That hamburger is now
   invisible/inert (#header-hamburger-proxy is the one users see, living inside the
   header itself), so nothing needs that space anymore. Overriding both header and
   every .grid-container on the page to the SAME symmetric inset (header's own left
   value, used on both sides) is the only way to guarantee they align exactly instead
   of approximating two different vendor systems against each other. */
#mxd-page-wrap .mxd-header {
  position: sticky;
  top: 0;
  left: 3rem;
  width: calc(100% - 6rem);
  background: rgba(var(--base-rgb), 0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding-bottom: 3rem;
  transition: left 0.25s ease, width 0.25s ease;
}
/* The header's own box (left/width above) only spans the inset content area, not
   the full page — the 3rem/6rem/9rem margin outside it is still real empty space
   with nothing painted in it, showing whatever's behind #mxd-page-wrap through as
   "holes" at the true left/right edges. This pseudo-element bleeds the header's own
   background out to fill exactly that margin at each breakpoint, so the header
   reads as a full-width bar while its actual content still lines up with the
   equally-inset .grid-container sections below it. */
#mxd-page-wrap .mxd-header::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3rem;
  right: -3rem;
  opacity: 1;
  background: rgba(var(--base-rgb), 1);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: -1;
  transition: left 0.25s ease, right 0.25s ease;
}
#mxd-page-wrap .mxd-header.is-hidden {
  transform: none;
  opacity: 1;
}
#mxd-page-wrap .mxd-container.grid-container {
  padding: 0 3rem;
  transition: padding 0.25s ease;
}
@media only screen and (min-width: 768px) {
  #mxd-page-wrap .mxd-header {
    left: 6rem;
    width: calc(100% - 12rem);
    padding-bottom: 4rem;
  }
  #mxd-page-wrap .mxd-header::before {
    left: -6rem;
    right: -6rem;
  }
  #mxd-page-wrap .mxd-container.grid-container {
    padding: 0 6rem;
  }
  /* Less side padding/inset once the agent sidebar has already squeezed the main
     content column narrower — #app-row is the shared ancestor of #mxd-page-wrap and
     #agent-sidebar, so :has() lets both react to the sidebar's own .open class, and
     the transitions above make the change slide instead of snap. */
  #app-row:has(.agent-sidebar.open) #mxd-page-wrap .mxd-container.grid-container {
    padding: 0 3rem;
  }
  #app-row:has(.agent-sidebar.open) #mxd-page-wrap .mxd-header {
    left: 3rem;
    width: calc(100% - 6rem);
  }
  #app-row:has(.agent-sidebar.open) #mxd-page-wrap .mxd-header::before {
    left: -3rem;
    right: -3rem;
  }
}
@media only screen and (min-width: 1600px) {
  #mxd-page-wrap .mxd-header {
    left: 9rem;
    width: calc(100% - 18rem);
  }
  #mxd-page-wrap .mxd-header::before {
    left: -9rem;
    right: -9rem;
  }
  #mxd-page-wrap .mxd-container.grid-container {
    padding: 0 9rem;
  }
}

/* The real .mxd-nav__hamburger has to stay in the DOM at its normal size/position —
   app.min.js's menu-open logic is bound to that exact node, and the full-screen menu
   overlay's own open animation scales up from this element's box. Just invisible/
   inert; #header-hamburger-proxy below is the one users actually see and click. */
.mxd-nav__contain {
  opacity: 0 !important;
  pointer-events: none !important;
}
.header-hamburger-proxy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  justify-content: center;
  align-items: center;
  width: 4.6rem;
  height: 4.6rem;
  cursor: pointer;
}
@media only screen and (min-width: 768px) {
  .header-hamburger-proxy {
    width: 5.6rem;
    height: 5.6rem;
  }
}
/* Hamburger <-> X: the homepage's real .mxd-nav__hamburger gets this exact morph for
   free from app.min.js's own GSAP timeline (it rotates the two real lines +/-45deg).
   The proxy button's lines are a separate DOM clone GSAP never touches, so the same
   effect is replicated here in pure CSS, driven off the same .is-open class shared-
   chrome.js already keeps in sync via a MutationObserver on the real hamburger. */
.header-hamburger-proxy .hamburger__line {
  position: absolute;
  left: 50%;
  top: 50%;
  transition: transform 0.25s ease;
}
.header-hamburger-proxy .hamburger__line:nth-child(2) {
  transform: translate(-50%, -0.5rem);
}
.header-hamburger-proxy .hamburger__line:nth-child(3) {
  transform: translate(-50%, 0.5rem);
}
.header-hamburger-proxy.is-open .hamburger__line:nth-child(2) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.header-hamburger-proxy.is-open .hamburger__line:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Profile dropdown widget */
.profile-avatar {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  object-fit: cover;
}
#profile-widget.has-avatar {
  padding-left: 10px;
}
.profile-menu {
  position: absolute;
  top: calc(100% + 1rem);
  right: 0;
  min-width: 28rem;
  background: var(--base);
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-m);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 120;
}
.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  padding: 1.4rem 2rem;
  font: normal var(--fw-medium) 1.8rem/1.4 var(--_font-accent);
  color: var(--t-bright);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.profile-menu-item i {
  font-size: 2rem;
}
.profile-menu-item:hover {
  background: var(--base-tint);
}
.profile-menu-danger {
  color: #ff6b6b;
}