/* Content cannot change track sizes. Overflow is contained within its own zone. */
.world-event-toast-host { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.world-event-toast { box-sizing: border-box; min-width: 0; overflow-wrap: anywhere; }
#topBar {
  display: grid; grid-template-columns: minmax(0,1fr) clamp(16rem,24%,23rem) minmax(0,1fr);
  align-items: center; gap: .65rem;
}
#topBar .topbar-zone { min-width: 0; margin: 0; display: flex; align-items: center; gap: .5rem; }
#topBar .topbar-zone--left { overflow-x: auto; scrollbar-width: none; }
#topBar .topbar-zone--left > * { flex-shrink: 0; }
#topBar .topbar-zone--left:focus-visible, #bottomBar .bottom-bar-zone:focus-visible { outline: 1px solid var(--mg-amber); outline-offset: -1px; }
#topBar .topbar-world-info { justify-content: center; background: transparent; padding: 0; flex-wrap: nowrap; overflow: hidden; }
#topBar .topbar-zone--right { justify-content: flex-end; }
#topBar #playerLocation { font-family: var(--font-accent); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#topBar #topbarBuffs { margin: 0; }
#topBar #worldMapBtn {
  width: 8rem; height: 2rem; flex: 0 0 8rem; max-height: none;
  padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: url('/releases/2026.11.02-01/frontend/assets/ui/general/worldmap.png') center / contain no-repeat;
}
#topBar #worldMapBtn:hover { filter: brightness(1.12); }
#topBar #worldMapBtn .world-map-button-icon { display: none; }
#bottomBar .bottom-bar-shell {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);
  align-items: center; gap: .65rem; width: 100%; min-width: 0;
}
#bottomBar .bottom-bar-info-strip { display: contents; }
#bottomBar :is(.bottom-bar-zone,.bottom-bar-actions) {
  min-width: 0; display: flex; align-items: center; gap: .5rem;
  overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap;
}
#bottomBar .bottom-bar-zone--left { grid-column: 1; grid-row: 1; }
#bottomBar .bottom-bar-zone--middle { grid-column: 2; grid-row: 1; justify-content: safe center; }
#bottomBar .bottom-bar-actions { grid-column: 3; grid-row: 1; justify-content: flex-end; margin: 0; }
#bottomBar [data-bottom-extra-actions] { display: flex; flex: 0 0 auto; }
/* Texture buttons belong to windows; chrome actions remain quiet and readable. */
:is(#topbarHealthButton,#bottomBar :is(.bottom-info-module,.bottom-bar-chat-toggle,.bottom-bar-secondary-btn)) {
  position: relative; appearance: none;
  background: transparent !important;
  border: 1px solid transparent !important; border-image: none !important;
  box-shadow: none !important; border-radius: 0; text-shadow: none;
  color: var(--mg-text-main); min-width: 0; padding: .35rem .6rem;
  transform: none !important; filter: none;
  &::after {
    content: ''; position: absolute; top: auto; left: .5rem; right: .5rem; bottom: 0;
    border: 0; border-radius: 0; box-shadow: none !important; animation: none;
    height: 2px; pointer-events: none;
    background: var(--mg-image-selection-hover) center / 100% 100% no-repeat,
      linear-gradient(90deg,transparent,var(--mg-amber),transparent) center / 100% 1px no-repeat;
    opacity: 0; transform: scaleX(0); transform-origin: center;
    transition: transform 120ms ease-out, opacity 120ms ease-out;
  }
  &:is(:hover,:focus-visible)::after { opacity: .75; transform: scaleX(1); }
  &:is(.active,.is-active,.is-selected,[aria-selected=true],[aria-expanded=true])::after {
    background: var(--mg-image-selection-selected) center / 100% 100% no-repeat,
      linear-gradient(90deg,transparent,var(--mg-amber),transparent);
    opacity: 1; transform: scaleX(1);
  }
  &:is(:disabled,[aria-disabled=true],.is-disabled)::after { opacity: 0; transform: scaleX(0); transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#topbarHealthButton,#bottomBar :is(.bottom-info-module,.bottom-bar-chat-toggle,.bottom-bar-secondary-btn))::after { transition: none; }
}
:is(#topbarHealthButton,#bottomBar :is(.bottom-info-module,.bottom-bar-chat-toggle,.bottom-bar-secondary-btn)):focus-visible { outline: 2px solid var(--mg-amber); outline-offset: -2px; }
/* Chrome deliberately removes button backgrounds and box shadows above.
   An unread chat uses its own inset halo and icon light, so that visual state
   survives the material rules and stays inside scrollable action tracks. */
#bottomBar #bottomBarChatToggle.has-unread {
  isolation: isolate;
  color: #f3d68d;
  text-shadow: 0 0 7px rgba(234, 184, 83, .45);
}
#bottomBar #bottomBarChatToggle.has-unread::before {
  content: '';
  position: absolute;
  inset: 1px 0;
  border-radius: .4rem;
  background: radial-gradient(ellipse, rgba(211, 162, 98, .34), rgba(211, 162, 98, .09) 65%, transparent 90%);
  box-shadow: inset 0 0 0 1px rgba(211, 162, 98, .4), inset 0 0 10px rgba(211, 162, 98, .12);
  pointer-events: none;
  z-index: -1;
  animation: mountgateChatUnreadHalo 2200ms ease-in-out infinite;
}
#bottomBar #bottomBarChatToggle.has-unread .bottom-bar-action-icon {
  filter: drop-shadow(0 0 3px rgba(245, 201, 111, .9)) drop-shadow(0 0 6px rgba(211, 162, 98, .55));
}
@keyframes mountgateChatUnreadHalo {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #bottomBar #bottomBarChatToggle.has-unread::before { animation: none; opacity: .8; }
}
#playerCoins .topbar-coins-wrap {
  position: relative; min-width: 0; padding: .35rem .6rem;
  background: transparent !important; border: 0 !important;
  border-image: none !important; box-shadow: none !important;
  color: var(--mg-text-main); cursor: default;
}
#sidebar .skill-nav-item.is-at-progression-cap .skill-nav-level {
  color: var(--mg-amber); border-bottom: 1px solid var(--mg-bronze);
}
@media (max-width: 768px) {
  #topBar { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr) minmax(0,.65fr); gap: .25rem; }
  #topBar .topbar-world-info { flex-wrap: wrap; gap: .2rem .4rem; font-size: .7rem; }
  #topBar .topbar-online-label { display: none; }
  #topBar #mobileSidebarToggle { order: -1; }
  #topBar .topbar-zone--right { gap: .25rem; }
  #bottomBar .bottom-bar-shell { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: .25rem; }
  :is(#topbarHealthButton,#playerCoins .topbar-coins-wrap,#bottomBar :is(.bottom-info-module,.bottom-bar-chat-toggle,.bottom-bar-secondary-btn)) { font-size: .7rem; }
}

/* The compact stop action must remain immediately recognizable. */
#bottomBar .bottom-info-activity-stop {
 background: var(--mg-danger); color: var(--mg-text-main);
 border: 1px solid var(--mg-bronze); border-radius: .3rem;
}
#bottomBar .bottom-info-activity-stop:is(:hover,:focus-visible) {
 background: var(--mg-danger); filter: brightness(1.12);
}

/* Scroll content independently from the outer frame artwork. */
.bottom-info-panel { overflow: hidden; display: flex; flex-direction: column; }
.bottom-info-scroll { min-height: 0; overflow-y: auto; display: grid; gap: 10px; overscroll-behavior: contain; }

/* Match the weather/time separator; empty optional sections add no divider. */
#topBar :is(#playerHealth, #playerCoins, #activityLoadout:has(.topbar-loadout-button, .topbar-tool-warning), #topbarBuffs:has(> *)),
#topBar .topbar-world-info #serverTime {
 position: relative; padding-left: .7rem; border-left: 0;
}
#topBar :is(#playerHealth, #playerCoins, #activityLoadout:has(.topbar-loadout-button, .topbar-tool-warning), #topbarBuffs:has(> *))::before,
#topBar .topbar-world-info #serverTime::before {
 content: ''; position: absolute; left: 0; top: 50%;
 width: 1px; height: 1rem; transform: translateY(-50%);
 background: var(--mg-border-muted); pointer-events: none;
}

#topBar #activityLoadout:not(:has(.topbar-loadout-button, .topbar-tool-warning)) { display: none; }

/* Fixed zones collapse whole controls into an overflow panel, never a scroller. */
#topBar .topbar-zone { overflow: hidden; flex-wrap: nowrap; }
#topBar .topbar-zone > * { flex-shrink: 0; }
#topBar .topbar-overflow-toggle { flex: 0 0 1.5rem; width: 1.5rem; padding: 0; border: 0; background: transparent; color: var(--mg-amber); cursor: pointer; }
#topBar .topbar-overflow-toggle[hidden], #topbarOverflowPortal .topbar-overflow-menu[hidden] { display: none; }
#topbarOverflowPortal .topbar-overflow-menu { position: fixed; z-index: 3300; zoom: var(--ui-user-scale, 1); display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding: .8rem; width: max-content; max-width: calc(100vw - 2rem); background: var(--mg-surface-window); border: 1px solid var(--mg-bronze); border-radius: .4rem; box-shadow: 0 4px 12px var(--mg-shadow-soft); }
#topbarOverflowPortal .topbar-overflow-menu > * { max-width: 100%; }
#topbarOverflowPortal .topbar-overflow-menu > :is(#playerHealth,#playerCoins,#activityLoadout,#topbarBuffs) { padding-left: 0; }
#topbarOverflowPortal .topbar-overflow-menu > *::before { display: none; }
#topBar .topbar-overflow-toggle:focus-visible { outline: 1px solid var(--mg-amber); }

/* Compact world reports share the shell's graphite material. */
.world-event-toast {
 grid-template-columns: 1.8rem minmax(0, 1fr); column-gap: .65rem; row-gap: .2rem;
 border: 1px solid var(--mg-border-muted); border-radius: .35rem;
 background: var(--mg-surface-chrome); background-repeat: repeat;
 padding: .65rem .8rem; color: var(--mg-text-main);
 box-shadow: 0 4px 12px var(--mg-shadow-soft);
 animation: worldEventToastIn 220ms ease-out both;
}
.world-event-toast .world-event-toast-icon { grid-column: 1; grid-row: 1 / 4; width: 1.8rem; height: 1.8rem; align-self: center; object-fit: contain; }
.world-event-toast > :not(.world-event-toast-icon) { grid-column: 2; }
.world-event-toast .world-event-toast-kicker { color: var(--mg-text-muted); font-size: .6rem; letter-spacing: .1em; }
.world-event-toast strong { color: var(--mg-text-main); white-space: normal; font-size: 1rem; }
.world-event-toast span:last-child { color: var(--mg-text-muted); font-size: .75rem; }
.world-event-toast::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 1.4rem; width: 2px; background: var(--mg-amber); }
.world-event-toast::after { content: ''; position: absolute; left: .8rem; right: .8rem; bottom: .2rem; height: 2px; pointer-events: none; background: var(--mg-image-selection-hover) center / 100% 100% no-repeat, linear-gradient(90deg,transparent,var(--mg-amber),transparent); transform: scaleX(0); opacity: 0; transition: transform 120ms ease-out, opacity 120ms ease-out; }
.world-event-toast:is(:hover,:focus-visible)::after { transform: scaleX(1); opacity: 1; }
.world-event-toast:focus-visible { outline: 1px solid var(--mg-amber); outline-offset: -3px; }
.world-event-toast.is-hiding { animation: worldEventToastOut 680ms ease-in forwards; }
@media (prefers-reduced-motion: reduce) { .world-event-toast, .world-event-toast.is-hiding { animation: none; } .world-event-toast::after { transition: none; } .world-event-toast.is-hiding { opacity: 0; } }

/* Companion panels remain usable above ordinary work/storage windows. */
body:has(#bankOverlay:not(.hidden), .processing-workbench-window):not(:has(#settingsOverlay:not(.hidden), #worldMapOverlay:not(.hidden), #travelConfirmOverlay:not(.hidden))) #bottomBar,
body:has(#bankOverlay:not(.hidden), .processing-workbench-window):not(:has(#settingsOverlay:not(.hidden), #worldMapOverlay:not(.hidden), #travelConfirmOverlay:not(.hidden))) .bottom-bar-mobile-portal { z-index: 1250; }
#bankContent > .bank-coin-action-menu { z-index: 1200; }

.processing-workbench-window > .processing-window-shell { zoom: var(--ui-user-scale, 1); width: calc(100% / var(--ui-user-scale, 1)); height: calc(100% / var(--ui-user-scale, 1)); }