/*
  Phone-app parity layer. Loaded after app.css.

  Built phone first: the shell already switches at 800px (sidebar hides, bottom nav shows).
  Everything here works at that width with 44px tap targets, then relaxes on wider screens.
  Motion timings mirror the phone app's Motion.cs.
*/

:root {
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --press-in: 80ms;
  --press-out: 140ms;
  --sheet-ms: 420ms;
}

/* ---------- Light theme (Settings > Appearance). Dark stays the default. ---------- */

:root[data-theme="light"] {
  --bg: #F4F6FB;
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --card-elevated: #EEF1F8;
  --border: #D5DBE8;
  --text: #1A2030;
  --text-secondary: #4A5670;
  --text-muted: #6B7690;
  --accent: #3F63D4;
  --accent-dim: #E3E9FB;
  --gold: #A87C22;
  --like: #D13B52;
  color-scheme: light;
}
html[data-theme="light"],
html[data-theme="light"] body {
  background:
    radial-gradient(ellipse at 20% 0%, #E3E9FB 0%, transparent 45%),
    radial-gradient(ellipse at 90% 10%, #F6EBD2 0%, transparent 35%),
    var(--bg);
}
:root[data-theme="light"] .top-chrome,
:root[data-theme="light"] .side,
:root[data-theme="light"] .bottom-nav { background: rgba(255, 255, 255, 0.95); }
:root[data-theme="light"] .auth-card { background: rgba(255, 255, 255, 0.97); box-shadow: 0 20px 60px rgba(26, 32, 48, 0.12); }
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] a.btn-primary:hover { color: #fff; }
:root[data-theme="light"] .main.admin-shell,
:root[data-theme="light"] .agent-layout {
  --desk-text: #1A2030;
  --desk-secondary: #3B465E;
  --desk-quiet: #5E6980;
}
html[data-theme="light"] #blazor-error-ui { background: #FDE8EC; color: var(--text); }
html[data-theme="light"] .pill-live { color: #B3243B; background: rgba(209, 59, 82, 0.12); }
html[data-theme="light"] .pill-upcoming { color: #2F4FB8; background: rgba(63, 99, 212, 0.12); }
html[data-theme="light"] .btn-danger { color: var(--like); }
html[data-theme="light"] .post-card:hover { box-shadow: 0 6px 18px rgba(26, 32, 48, 0.08); }
/* The map tiles stay dark, so the controls floating over them keep the dark palette. */
:root[data-theme="light"] .map-page-topbar {
  --text: #EDF0F7;
  --text-secondary: #94A0B8;
  --card-elevated: #1E2434;
  --border: #293044;
  color: var(--text);
}

/* ---------- Shared fixes and small controls ---------- */

/* a:hover turns links gold. A gold button must keep its dark label and icon. */
.btn-gold,
.btn-gold:hover,
a.btn-gold,
a.btn-gold:hover,
a.btn-gold:focus-visible { color: #161A26; }
a.btn-primary,
a.btn-primary:hover { color: #fff; }

.input[type="search"] { appearance: none; -webkit-appearance: none; }
.user-search { display: block; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.media-add:focus-within,
label.chat-compose-icon:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-square {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
}
.btn-glyph { width: 1.3rem; height: 1.3rem; display: block; }
.topbar-actions { flex-wrap: nowrap; }
.btn-square.is-spinning .btn-glyph { animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.link-button {
  appearance: none;
  background: none;
  border: none;
  padding: 0.5rem 0;
  min-height: 2.75rem;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}
.link-button:hover { color: var(--gold); }

.list-row-button { width: 100%; text-align: left; font: inherit; min-height: 3.5rem; }
.list-row-text { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.list-row-trailing { color: var(--gold); flex: none; }
.people-list { display: grid; gap: 0.5rem; }
.people-list .list-row { margin-bottom: 0; }
.people-row .list-row-button {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: auto;
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  cursor: pointer;
}
.people-row .btn { flex-shrink: 0; padding: 0.4rem 0.7rem; }
.people-row .btn.is-following { color: var(--like); border-color: var(--like); }

.empty-state-icon { width: 44px; height: 44px; color: var(--text-muted); }
.empty-state.compact { padding: 1rem 0.5rem; }
.chat-empty { margin: auto; }

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
}
.switch-row { cursor: pointer; }
.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 1.5rem;
  margin: 0;
  border: none;
  border-radius: 999px;
  background: var(--border);
  cursor: pointer;
  transition: background 160ms var(--ease-out);
}
.switch::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #fff;
  transition: transform 200ms var(--ease-spring);
}
.switch:checked { background: var(--gold); }
.switch:checked::after { transform: translateX(1.25rem); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pin-toggle-hint { display: block; }

.field-inline { display: flex; gap: 0.5rem; }
.field-inline .input { flex: 1; min-width: 0; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

/* The header glyphs are cropped to their drawings so each fills the same share of its box, and
   they share one stroke weight, so the message, bell, profile and gear read as one size. */
.top-chrome-icons .nav-icon [stroke] {
  stroke-width: 1.6px;
  vector-effect: non-scaling-stroke;
}

.icon-link.has-badge { position: relative; }
/* Unread count. White on this deeper red clears 5:1 contrast, and the ring in the header color
   keeps it distinct from the icon underneath. */
.icon-badge {
  --badge-bg: #C4283F;
  position: absolute;
  top: -0.1rem;
  right: -0.15rem;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--badge-bg);
  color: #fff;
  box-shadow: 0 0 0 2px var(--surface);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
  animation: scale-in 280ms var(--ease-spring) both;
}

/* ---------- Posts, profiles, stations ---------- */

.post-caption-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-location {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.35rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.post-location-glyph { width: 1rem; height: 1rem; color: var(--gold); flex: none; }
.map-sheet-meta .post-location { margin: 0; }

.profile-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  margin-top: 0.5rem;
}
.profile-stat {
  appearance: none;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.75rem;
  border-radius: 10px;
}
button.profile-stat { cursor: pointer; }
button.profile-stat:hover { background: var(--accent-dim); }
.profile-stat strong { font-size: 1.15rem; }
.profile-stat span { color: var(--text-secondary); font-size: 0.8rem; }
.profile-name { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
.community-banner { margin: 0 0 1rem; border-radius: 12px; overflow: hidden; background: #1C2030; }
.community-banner img { display: block; width: 100%; max-height: 140px; object-fit: cover; }
.community-banner p { margin: 0; padding: 0.55rem 0.8rem; font-weight: 600; }
.profile-badge-row { margin: 0.25rem 0 0; }

.station-card { position: relative; gap: 0.65rem; align-content: start; cursor: pointer; }
.station-card-link { display: grid; gap: 0.45rem; align-content: start; color: inherit; text-decoration: none; }
.station-card-link .pill { justify-self: start; }
.station-card-link:hover { color: inherit; }
/* The link stretches over the whole card so any click on it opens the station. The Notify button
   sits above that layer so it keeps its own click. */
.station-card-link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.station-card-link:focus-visible { outline: none; }
.station-card-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.station-notify { position: relative; z-index: 1; justify-self: start; min-height: 2.75rem; cursor: pointer; }

/* ---------- Auth ---------- */

.auth-help {
  display: grid;
  gap: 0.5rem;
  margin: 0.25rem 0 1rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.auth-language { margin: 1rem 0 0; }

/* ---------- Media picker, place search ---------- */

.media-picker { display: grid; gap: 0.6rem; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.5rem; }
.media-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-thumb-label { color: var(--text-secondary); font-size: 0.8rem; }
.media-thumb-remove {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  cursor: pointer;
}
.media-thumb-remove svg { width: 1rem; height: 1rem; }
.media-add { display: inline-flex; align-items: center; gap: 0.5rem; justify-self: start; min-height: 2.75rem; cursor: pointer; }

.place-results { display: grid; gap: 0.35rem; margin-bottom: 0.85rem; }
.place-result {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.75rem;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.place-result:hover { border-color: var(--gold); }
.place-result-glyph { width: 1.2rem; height: 1.2rem; color: var(--gold); flex: none; margin-top: 0.1rem; }

/* ---------- Chat ---------- */

.chat-pending { display: flex; align-items: center; gap: 0.5rem; padding-top: 0.5rem; flex-shrink: 0; }
.chat-pending-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.chat-pending-name {
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.chat-compose-icon { min-width: 2.75rem; min-height: 2.75rem; }
.chat-messages { padding: 0.25rem 0.1rem 0.9rem; }

/* On a phone the thread fills the space between the top bar and the bottom nav, with the
   composer pinned underneath. The header is about 3.9rem and the bottom nav 4.5rem. */
@media (max-width: 800px) {
  .main:has(> .chat-page) {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 3.9rem - 4.5rem - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 3.9rem - 4.5rem - env(safe-area-inset-bottom));
    padding-bottom: 0.5rem;
    box-sizing: border-box;
  }
  .chat-page { flex: 1; min-height: 0; }
  .chat-page .topbar { margin-bottom: 0.5rem; }
  .chat-layout {
    flex: 1;
    height: auto;
    max-height: none;
    padding: 0.5rem;
    border-radius: 10px;
  }
}

/* ---------- Overlays: sheets, create chooser, share, people, map ---------- */

.sheet-backdrop-clear { background: transparent; }
.sheet { max-height: 80vh; }
.sheet-tall { max-height: 80vh; }

.sheet-choice {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.85rem;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.sheet-choice:hover { border-color: var(--gold); }
.sheet-choice-icon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--gold);
}
.sheet-choice-icon svg { width: 1.4rem; height: 1.4rem; }
.sheet-choice-text { display: grid; gap: 0.1rem; min-width: 0; }
.sheet-choice-text small { color: var(--text-secondary); }

.create-cards { display: grid; gap: 0.75rem; }
.create-card {
  appearance: none;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.75rem;
  min-height: 8rem;
  padding: 1.25rem;
  background: var(--card);
  border: 1px solid var(--gold);
  border-radius: 14px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.create-card-glyph { width: 3rem; height: 3rem; color: var(--gold); }
.create-card-title { font-size: 1.15rem; font-weight: 600; text-align: center; }
@media (min-width: 801px) {
  .create-cards { grid-template-columns: 1fr 1fr; }
  .create-card { min-height: 9.5rem; }
}

.map-sheet { gap: 0.75rem; }
.map-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.map-sheet-title { display: grid; gap: 0.45rem; min-width: 0; }
.map-sheet-title h2 { margin: 0; font-size: 1.1rem; }
.map-sheet-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.aircraft-marker { pointer-events: auto; cursor: pointer; }
.sighting-pin { cursor: pointer; }

/* ---------- Motion (phone app Motion.cs timings) ---------- */

/* Press: 80ms in to 0.92, 140ms spring back. Large surfaces dip less so they do not lurch. */
.btn,
.icon-link,
.post-action,
.chat-compose-icon,
.bottom-link,
.reaction-chip,
.create-card,
.sheet-choice,
.list-row-button,
.place-result,
.profile-stat {
  transition: transform var(--press-out) var(--ease-spring);
}
.btn:active:not(:disabled),
.icon-link:active,
.post-action:active:not(:disabled),
.chat-compose-icon:active:not(:disabled),
.bottom-link:active,
.reaction-chip:active {
  transform: scale(0.92);
  transition-duration: var(--press-in);
}
.create-card:active,
.sheet-choice:active,
.list-row-button:active:not(:disabled),
.place-result:active,
.profile-stat:active {
  transform: scale(0.96);
  transition-duration: var(--press-in);
}

/* Like and bookmark pop 0.85 > 1.28 > 1 over 180ms. Alternating names restart the animation. */
@keyframes pop-a { 0% { transform: scale(0.85); } 60% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes pop-b { 0% { transform: scale(0.85); } 60% { transform: scale(1.28); } 100% { transform: scale(1); } }
.post-action.pop-a .post-action-glyph { animation: pop-a 180ms var(--ease-out); }
.post-action.pop-b .post-action-glyph { animation: pop-b 180ms var(--ease-out); }

/* Empty-state icons breathe: up 6px and down to 0.94 over about a second. */
@keyframes breathe {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-6px) scale(0.94); }
}
@keyframes breathe-soft {
  from { transform: scale(1); }
  to { transform: scale(0.94); }
}
.anim-breathe { animation: breathe 1100ms ease-in-out infinite alternate; }
.anim-breathe-soft { animation: breathe-soft 1400ms ease-in-out infinite alternate; }

/* Live dot pulses 0.25 to 1 opacity while it grows to 1.6x, every 800ms. */
.pill-live { display: inline-flex; align-items: center; gap: 0.4rem; }
.pill-live::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  animation: live-pulse 800ms ease-in-out infinite alternate;
}
@keyframes live-pulse {
  from { opacity: 0.25; transform: scale(1); }
  to { opacity: 1; transform: scale(1.6); }
}

/* Radio participants pop in once when they first appear. */
.participant-tile { animation: pop-in 300ms var(--ease-out) both; }
@keyframes pop-in {
  from { opacity: 0; transform: translateY(18px) scale(0.9); }
  to { opacity: 1; transform: none; }
}

/* Sheets: scrim fades and the panel slides up over 420ms. */
@keyframes sheet-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-backdrop { animation: sheet-scrim-in var(--sheet-ms) var(--ease-out) both; }
.sheet { animation: sheet-in var(--sheet-ms) var(--ease-out) both; }
/* Closing slides the panel back down over 300ms (ModalSheet waits for this before it unmounts). */
@keyframes sheet-scrim-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes sheet-out { from { transform: translateY(0); } to { transform: translateY(100%); } }
.sheet-backdrop.closing { animation: sheet-scrim-out 300ms ease both; pointer-events: none; }
.sheet.closing { animation: sheet-out 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both; pointer-events: none; }
.sheet:focus { outline: none; }

/* The emoji drawer fades in over the same 420ms. */
.emoji-drawer { animation: fadeIn var(--sheet-ms) var(--ease-out) both; }

/* New chat bubbles: 24px slide from their own side while fading in over 320ms. */
@keyframes arrive-from-end { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes arrive-from-start { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.bubble-block.arrive.mine { animation: arrive-from-end 320ms var(--ease-out) both; }
.bubble-block.arrive.theirs { animation: arrive-from-start 320ms var(--ease-out) both; }

/* Unread counts scale in from 0.2 over 280ms. */
@keyframes scale-in { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
.badge-in { animation: scale-in 280ms var(--ease-spring) both; }

/* The login card rises 48px while fading in over 380ms. */
@keyframes rise-in { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
.auth-rise { animation: rise-in 380ms var(--ease-out) both; }

/* Honor the operating-system request for less motion everywhere. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}