/*
 * Mobile stage layout
 * The avatar and conversation are the primary surface. Telemetry is available
 * as an explicit observation drawer instead of occupying the document flow.
 */

.mobile-observation-toggle,
.mobile-observation-scrim {
  display: none;
}

@media (max-width: 780px) {
  :root {
    --mobile-brand-height: 3rem;
    --mobile-model-height: 2.85rem;
    --mobile-command-height: 3.9rem;
    --mobile-stage-top: calc(
      var(--mobile-brand-height) +
      var(--mobile-model-height) +
      var(--mobile-command-height) +
      0.55rem
    );
    --mobile-console-height: 8.55rem;
  }

  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body {
    min-width: 0;
  }

  .workspace,
  .chat-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .app-bar {
    position: fixed;
    z-index: 72;
    inset: 0 0 auto;
    width: 100%;
    height: calc(var(--mobile-brand-height) + var(--mobile-model-height) + 0.25rem);
    min-height: 0;
    padding: 0;
    border-top: 0.2rem solid rgba(113, 207, 198, 0.82);
    background:
      linear-gradient(180deg, rgba(2, 8, 8, 0.98), rgba(2, 7, 7, 0.94) 70%, rgba(2, 7, 7, 0.76));
    box-shadow: 0 0.65rem 1.35rem rgba(0, 0, 0, 0.42);
    pointer-events: none;
  }

  .brand-lockup {
    position: fixed;
    z-index: 73;
    top: 0.34rem;
    right: 3.65rem;
    left: 0.45rem;
    width: auto;
    height: 2.45rem;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.45rem;
    border: 0;
    background: linear-gradient(90deg, rgba(2, 9, 9, 0.92), rgba(2, 9, 9, 0.5), transparent);
    pointer-events: auto;
  }

  .brand-mark {
    width: 1.8rem;
    height: 1.8rem;
    margin: 0;
  }

  .brand-copy h1 {
    font-size: 1.02rem;
    line-height: 1;
  }

  .brand-lockup::after,
  .brand-copy .eyebrow,
  .brand-signal {
    display: none;
  }

  .connection-status {
    position: fixed;
    z-index: 75;
    top: 0.92rem;
    right: 0.62rem;
    width: 0.54rem;
    min-width: 0;
    height: 0.54rem;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
  }

  .connection-status .status-dot {
    width: 0.36rem;
    height: 0.36rem;
  }

  .connection-status span:last-child {
    display: none;
  }

  .mobile-observation-toggle {
    position: fixed;
    z-index: 76;
    top: 0.42rem;
    right: 1.38rem;
    width: 2.05rem;
    height: 2.05rem;
    display: grid;
    grid-template-rows: 1fr auto;
    place-items: center;
    gap: 0;
    padding: 0.18rem 0.1rem 0.2rem;
    border: 1px solid rgba(105, 193, 184, 0.32);
    background: rgba(3, 18, 17, 0.86);
    color: #8ad8d1;
    box-shadow: inset 0 1px rgba(215, 244, 238, 0.08);
    pointer-events: auto;
  }

  .mobile-observation-toggle span {
    font: 700 0.92rem/1 "Cascadia Code", Consolas, monospace;
  }

  .mobile-observation-toggle b {
    font: 700 0.36rem/1 "Cascadia Code", Consolas, monospace;
    letter-spacing: 0.04em;
  }

  body[data-mobile-observation="open"] .mobile-observation-toggle {
    border-color: rgba(216, 177, 74, 0.72);
    background: linear-gradient(135deg, rgba(22, 61, 56, 0.98), rgba(52, 17, 20, 0.96));
    color: #f0d987;
  }

  .header-model {
    position: fixed;
    z-index: 74;
    top: var(--mobile-brand-height);
    right: 0.45rem;
    left: 0.45rem;
    width: auto;
    min-width: 0;
    height: var(--mobile-model-height);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.42rem 0.4rem 0.75rem;
    overflow: hidden;
    transform: none;
    pointer-events: auto;
  }

  .header-model:hover,
  .header-model:focus-visible {
    transform: none;
  }

  .header-model::before,
  .header-model::after {
    content: none;
    display: none;
  }

  .model-launcher-kicker,
  .model-launcher-meta,
  .model-launcher-rank,
  .descent-link,
  .model-launcher-arrow {
    display: none;
  }

  .header-model > strong {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    overflow: hidden;
    font-size: 0.83rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-model .model-launcher-action {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    min-width: 8.2rem;
    height: 2.45rem;
    display: grid;
    grid-template: 1.15rem 0.58rem / minmax(0, 1fr) 0.82rem;
    align-items: center;
    justify-items: center;
    gap: 0.05rem 0.25rem;
    padding: 0.34rem 0.5rem 0.28rem 0.72rem;
    overflow: hidden;
    clip-path: polygon(8% 0, 94% 0, 100% 50%, 94% 100%, 8% 100%, 0 50%);
    background: linear-gradient(90deg, #320712, #a51d35 48%, #651025);
    color: #fff1e9;
    box-shadow:
      inset 0 0 0.85rem rgba(255, 119, 128, 0.17),
      0 0 0.8rem rgba(198, 41, 60, 0.28);
    font-size: 0.56rem;
  }

  .header-model .model-launcher-action small {
    display: none;
  }

  .header-model .model-launcher-action b {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    overflow: visible;
    color: inherit;
    font: 700 0.82rem/1 "Yu Mincho", "Hiragino Mincho ProN", serif;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .header-model .model-launcher-action em {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    color: #efbdaf;
    font: 700 0.34rem/1 "Cascadia Code", Consolas, monospace;
    font-style: normal;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .header-model .model-launcher-action svg {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 0.78rem;
    height: 0.78rem;
    color: #efd66f;
  }

  .left-control-panel {
    display: contents;
  }

  .game-command-menu {
    position: fixed;
    z-index: 71;
    top: calc(var(--mobile-brand-height) + var(--mobile-model-height) + 0.18rem);
    right: 0.45rem;
    left: 0.45rem;
    width: auto;
    height: var(--mobile-command-height);
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(5.25rem, 1fr));
    gap: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid rgba(111, 210, 200, 0.46);
    border-right: 0.22rem solid rgba(190, 50, 58, 0.84);
    border-bottom: 1px solid rgba(181, 147, 66, 0.3);
    border-left: 0.22rem solid rgba(100, 211, 201, 0.86);
    background: rgba(2, 8, 8, 0.97);
    box-shadow: 0 0.7rem 1.5rem rgba(0, 0, 0, 0.48);
    clip-path: none;
    scrollbar-width: none;
    transform: none;
  }

  .game-command-menu::-webkit-scrollbar {
    display: none;
  }

  .game-command-menu::before,
  .game-command-menu::after,
  .game-command-menu > header,
  .game-command-menu > .background-quick-switch,
  .game-command-menu > .avatar-media-quick-switch {
    display: none;
  }

  .game-command-menu button {
    width: auto;
    min-width: 5.25rem;
    height: calc(var(--mobile-command-height) - 2px);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1.55rem 1fr;
    place-items: center;
    gap: 0.08rem;
    padding: 0.28rem 0.12rem 0.2rem;
    border: 0;
    border-right: 1px solid rgba(150, 192, 183, 0.13);
    text-align: center;
    transform: none;
  }

  .game-command-menu button:last-child {
    border-right: 0;
  }

  .game-command-menu button::before,
  .game-command-menu button small,
  .game-command-menu button em {
    display: none;
  }

  .game-command-menu button > svg,
  .game-command-menu button > .command-sigil {
    width: 1.28rem;
    height: 1.28rem;
    padding: 0;
  }

  body .left-control-panel .game-command-menu button span,
  body .left-control-panel .game-command-menu button strong {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    color: #f0f4ed;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .game-command-menu button[data-command="compendium"]::after {
    display: none;
  }

  .game-command-menu button:hover,
  .game-command-menu button:focus-visible,
  .game-command-menu button.is-active {
    background: linear-gradient(180deg, rgba(27, 71, 65, 0.82), rgba(42, 12, 17, 0.88));
    transform: none;
  }

  .mobile-observation-scrim {
    position: fixed;
    z-index: 51;
    inset: var(--mobile-stage-top) 0 0;
    display: block;
    border: 0;
    background: rgba(0, 3, 3, 0.72);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms step-end;
  }

  body[data-mobile-observation="open"] .mobile-observation-scrim {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 180ms ease, visibility 0s;
  }

  .game-status-hud {
    display: none;
  }

  body[data-mobile-observation="open"] .left-control-panel .game-status-hud {
    position: fixed;
    z-index: 78;
    top: var(--mobile-stage-top);
    right: 0.55rem;
    bottom: calc(var(--mobile-console-height) + 1.1rem + env(safe-area-inset-bottom, 0px));
    left: 0.55rem;
    width: auto;
    height: auto;
    min-height: 0;
    display: block;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border-top: 1px solid rgba(117, 217, 207, 0.56);
    border-right: 0.22rem solid rgba(177, 45, 53, 0.86);
    border-bottom: 1px solid rgba(182, 148, 66, 0.38);
    border-left: 0.22rem solid rgba(102, 210, 200, 0.88);
    background: rgba(2, 9, 9, 0.98);
    box-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, 0.68);
    clip-path: none;
    transform: none;
  }

  body[data-mobile-observation="open"] .game-status-hud .location-plaque {
    display: grid;
    grid-template-rows: 2.6rem auto;
    height: auto;
    min-height: 0;
  }

  body[data-mobile-observation="open"] .game-status-hud .location-map {
    width: 100%;
    height: auto;
    max-height: min(58dvh, 32rem);
    aspect-ratio: 1 / 1;
  }

  body[data-mobile-observation="open"] .game-status-hud > div:not(.location-plaque) {
    min-height: 3.05rem;
  }

  body .character-speech {
    top: calc(var(--mobile-stage-top) + 0.35rem);
    right: 0.55rem;
    left: 0.55rem;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  body .run-banner {
    z-index: 49;
    top: auto;
    right: 0.55rem;
    bottom: calc(var(--mobile-console-height) + 0.95rem + env(safe-area-inset-bottom, 0px));
    left: 0.55rem;
    width: auto;
    min-width: 0;
    transform: none;
  }

  body .oracle-console,
  body .oracle-console[data-empty="true"],
  body .oracle-console[data-history-empty="true"] {
    z-index: 52;
    right: 0.48rem;
    bottom: max(0.42rem, env(safe-area-inset-bottom, 0px));
    left: 0.48rem;
    width: auto;
    min-width: 0;
    height: var(--mobile-console-height);
    min-height: var(--mobile-console-height);
    grid-template-rows: minmax(0, 1fr);
    transform: none;
  }

  body .oracle-console .composer {
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1rem minmax(3.25rem, 1fr) 2.25rem;
    gap: 0.35rem;
    padding: 0.4rem;
  }

  body .oracle-console .composer textarea,
  body .oracle-console .send-button {
    height: 100%;
    min-height: 0;
  }

  body .oracle-console .composer textarea {
    padding: 0.48rem 0.52rem;
    font-size: 0.82rem;
  }

  body .oracle-console .composer::before {
    content: none;
    display: none;
  }

  body .oracle-console .composer::after {
    content: none;
    display: none;
  }

  body .oracle-console .composer-context,
  body .oracle-console .keyboard-hint {
    display: none;
  }

  body .oracle-console .composer-heading {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    padding: 0 0.18rem 0.28rem;
  }

  body .oracle-console .composer-footer {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr) 6.45rem;
    gap: 0.36rem;
  }

  .active-entity-card,
  .vrm-contract-status {
    display: none;
  }

  body[data-mobile-observation="open"] .character-speech,
  body[data-mobile-observation="open"] .run-banner {
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 420px) {
  :root {
    --mobile-command-height: 3.75rem;
  }

  .game-command-menu {
    grid-template-columns: repeat(6, minmax(5.25rem, 1fr));
  }

  .game-command-menu button {
    min-width: 5.25rem;
  }

  .game-command-menu button strong {
    font-size: 0.68rem;
  }

  .header-model .model-launcher-action {
    min-width: 7.1rem;
    padding-inline: 0.54rem 0.36rem;
  }

  .header-model .model-launcher-action b {
    font-size: 0.68rem;
  }

  .header-model .model-launcher-action em {
    font-size: 0.28rem;
  }
}

@media (max-height: 680px) and (max-width: 780px) {
  :root {
    --mobile-console-height: 7.85rem;
  }

  body .character-speech {
    max-height: 6rem;
  }

  body .oracle-console .composer {
    grid-template-rows: 0.9rem minmax(2.8rem, 1fr) 2.1rem;
    padding: 0.34rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-observation-scrim {
    transition: none;
  }
}