/* 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('/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,#playerCoins .topbar-coins-wrap,#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,#playerCoins .topbar-coins-wrap,#bottomBar :is(.bottom-info-module,.bottom-bar-chat-toggle,.bottom-bar-secondary-btn))::after { transition: none; }
}
:is(#topbarHealthButton,#playerCoins .topbar-coins-wrap,#bottomBar :is(.bottom-info-module,.bottom-bar-chat-toggle,.bottom-bar-secondary-btn)):focus-visible { outline: 2px solid var(--mg-amber); outline-offset: -2px; }
#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; }
}

.bank-overlay-open #playerCoins .topbar-coins-wrap::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);
}

/* 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)); }