/* Desktop shell for the web product. Mobile keeps the stacked Android-style layout. */
@media (min-width: 901px) {
  html,
  body {
    min-width: 900px;
    background: #080a0f;
  }

  body {
    padding: 0 !important;
  }

  .app {
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: grid !important;
    grid-template-columns: minmax(520px, 1.45fr) minmax(390px, .75fr) !important;
    grid-template-rows: 84px minmax(0, 1fr) 86px !important;
    background: #080a0f;
  }

  .header {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    padding: 0 clamp(24px, 3vw, 54px) !important;
    border-bottom: 1px solid #20242e;
  }

  .brand {
    min-width: 0;
  }

  .brand img {
    width: 48px;
    height: 48px;
  }

  .brand strong {
    font-size: 21px;
  }

  .brand small {
    font-size: 13px;
  }

  .map-panel {
    grid-column: 1;
    grid-row: 2 / 4;
    min-width: 0;
    min-height: 0;
    height: auto !important;
    grid-template-rows: 94px minmax(0, 1fr) !important;
    border-right: 1px solid #2c303a;
  }

  .map-titlebar {
    padding: 14px clamp(26px, 3vw, 48px);
    background: #10141c;
    border-bottom: 1px solid #252a34;
  }

  .map-copy h1 {
    font-size: clamp(24px, 1.8vw, 32px);
  }

  .map-viewport,
  .map-viewport svg {
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
  }

  .resize-handle {
    display: none !important;
  }

  .conversation {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    min-height: 0;
    border-left: 0;
  }

  .messages {
    padding: 24px clamp(24px, 2vw, 38px) 34px;
  }

  .message {
    margin: 18px 0;
  }

  .bubble {
    max-width: 92%;
    font-size: max(var(--chat-size), 15px);
  }

  .composer {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
    padding: 13px clamp(20px, 2vw, 34px) 17px;
  }

  .composer input {
    min-width: 0;
  }

  .map-status {
    top: 14px;
    right: 16px;
  }

  .map-legend {
    top: 14px;
    left: 16px;
  }
}

@media (min-width: 1500px) {
  .app {
    grid-template-columns: minmax(760px, 1.6fr) minmax(470px, .7fr) !important;
  }

  .messages {
    padding-inline: 42px;
  }
}

@media (max-width: 900px) {
  .app {
    width: 100%;
    height: 100dvh;
    grid-template-rows: 78px var(--map-height) 20px minmax(0, 1fr) 82px;
  }
}