/* Only the four owner-requested visual adjustments. All routes, state, APIs,
   login, images, brand assets and existing color effects are unchanged. */

/* One unbroken black band, including the brand/side-rail section. */
#root .cinemaShell .cinTopbar,
#root .cinemaShell .cinRail {
  background: #000 !important;
  background-image: none !important;
}

#root .cinemaShell .cinTopbar {
  height: 76px !important;
  min-height: 76px !important;
  border-bottom-color: rgba(69, 167, 193, .26) !important;
}

#root .cinGuest { --cin-header-height: 76px; }
#root .cinInterior .cinRail::before { top: 76px; }
#root .cinemaShell .cinRail { padding-top: 11px !important; }
#root .cinemaShell .cinRail .cinBrand {
  background: #000 !important;
  min-height: 54px !important;
  height: 54px !important;
  flex: 0 0 54px;
  margin-bottom: 11px !important;
}
/* Complete the same horizontal header boundary through the logo section. */
#root .cinemaShell .cinRail::after {
  content: '';
  position: absolute;
  top: 75px;
  inset-inline: 0;
  height: 1px;
  z-index: 1;
  background: rgba(69, 167, 193, .26);
  pointer-events: none;
}

/* The wordmark grows without enlarging the header or moving the icon. */
#root .cinTopbar .cinBrand .anivoraBrandLockup { --brand-size: 32px; }
#root .cinRailExpanded .cinBrand .anivoraBrandLockup { --brand-size: 24px; }

/* Restore a little vertical breathing room to the existing footer row. */
#root .cinemaShell .cinFooter {
  padding-block: 10px !important;
  min-height: 56px !important;
}

/* Preserve the existing collapse/expand click behavior. Replace ONLY its
   symbol with the requested pair of double chevrons, without a new asset. */
#root .cinRail .cinRailToggle {
  display: grid !important;
  place-items: center !important;
  color: #d9e5ef !important;
}
#root .cinRail .cinRailToggle > svg { display: none !important; }
#root .cinRail .cinRailToggle::after {
  content: '';
  display: block;
  width: 27px;
  height: 27px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  /* Closed, LTR: point towards the workspace to expand. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 6l10 10-10 10M15 6l10 10-10 10' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 6l10 10-10 10M15 6l10 10-10 10' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Expanded, LTR: point back to the rail to collapse. */
#root .cinRailExpanded .cinRailToggle::after,
html[lang="ar"] #root .cinemaShell:not(.cinRailExpanded) .cinRail .cinRailToggle::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M26 6 16 16 26 26M17 6 7 16 17 26' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M26 6 16 16 26 26M17 6 7 16 17 26' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* In Arabic the rail is on the right: reverse both arrow directions. */
html[lang="ar"] #root .cinRailExpanded .cinRailToggle::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 6l10 10-10 10M15 6l10 10-10 10' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 6l10 10-10 10M15 6l10 10-10 10' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 1200px) {
  #root .cinTopbar .cinBrand .anivoraBrandLockup { --brand-size: 27px; }
}
@media (max-width: 900px) {
  #root .cinemaShell .cinTopbar { height: 70px !important; min-height: 70px !important; }
  #root .cinGuest { --cin-header-height: 70px; }
  #root .cinInterior .cinRail::before { top: 70px; }
  #root .cinemaShell .cinRail { padding-top: 9px !important; }
  #root .cinemaShell .cinRail .cinBrand {
    min-height: 52px !important;
    height: 52px !important;
    flex-basis: 52px;
    margin-bottom: 9px !important;
  }
  #root .cinemaShell .cinRail::after { top: 69px; }
}
@media (max-width: 680px) {
  #root .cinemaShell .cinTopbar { height: 64px !important; min-height: 64px !important; }
  #root .cinGuest { --cin-header-height: 64px; }
  #root .cinTopbar .cinBrand .anivoraBrandLockup { --brand-size: clamp(16px, 4.1vw, 23px); }
  #root .cinemaShell .cinFooter { padding-block: 9px !important; min-height: 54px !important; }
}

/* 2026-10-29: reduce BOTH workspace header sections, not merely align them.
   Scope is the signed-in workspace header and its brand; toggle/footer rules above stay intact. */
#root .cinemaShell.cinAuthenticated { --anivora-workspace-bar-height: 60px; }
#root .cinemaShell.cinAuthenticated .cinTopbar {
  height: var(--anivora-workspace-bar-height) !important;
  min-height: var(--anivora-workspace-bar-height) !important;
  background: #000 !important;
  background-image: none !important;
}
#root .cinemaShell.cinAuthenticated .cinRail {
  padding-top: 2px !important;
  background: #000 !important;
  background-image: none !important;
}
#root .cinemaShell.cinAuthenticated .cinRail .cinBrand {
  height: 56px !important;
  min-height: 56px !important;
  flex: 0 0 56px;
  margin-bottom: 2px !important;
  background: #000 !important;
}
#root .cinemaShell.cinAuthenticated .cinRail .cinBrand .anivoraBrandLockup {
  --brand-size: 24px;
  gap: 5px;
  max-width: none;
}
#root .cinemaShell.cinAuthenticated .cinRail .cinBrand .anivoraBrandMark {
  width: 56px;
  height: 56px;
}
/* The black cover prevents the existing rail glow from entering the logo band. */
#root .cinemaShell.cinAuthenticated .cinRail::after {
  top: 0;
  height: var(--anivora-workspace-bar-height);
  z-index: -1;
  background: #000;
  border-bottom: 1px solid rgba(69, 167, 193, .26);
}
#root .cinemaShell.cinAuthenticated .cinRail::before {
  top: var(--anivora-workspace-bar-height);
}
@media (max-width: 680px) {
  #root .cinemaShell.cinAuthenticated { --anivora-workspace-bar-height: 56px; }
}

/* Review 2026-11-11: compact footer and whole artwork; existing arrows unchanged. */
#root .cinemaShell .cinFooter{padding-block:5px!important;min-height:0!important}
#root .cinemaShell .anivoraBrandMark{overflow:visible}
#root .cinemaShell .anivoraBrandMark img{width:100%!important;height:100%!important;object-fit:contain;transform:none!important;position:static!important;max-width:100%!important}
