/**
 * app-shell.css
 * Mobile-first by construction: base rules target a phone viewport,
 * larger layouts are additive via min-width queries, never the reverse.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  /* Respect device notches/home-indicators — this alone is what separates
     "looks fine in the simulator" from "looks fine on an actual iPhone". */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

#app-shell {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  height: 100dvh; /* dvh, not vh — avoids the mobile browser chrome jump */
}

/* Chat list / thread layout collapses to single-column on phones,
   expands to a WhatsApp-style two-pane view once there's room. */
.layout-two-pane {
  display: grid;
  grid-template-columns: 1fr;
  height: 100%;
  overflow: hidden;
}

@media (min-width: 860px) {
  .layout-two-pane {
    grid-template-columns: 340px 1fr;
  }
}

.connection-banner {
  display: none;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  text-align: center;
  background: var(--color-warning);
  color: var(--color-accent-contrast);
}

.connection-banner[data-state="reconnecting"] {
  display: block;
}

.message-bubble {
  max-width: 78%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-bubble);
  font-size: var(--text-base);
  line-height: 1.35;
  word-wrap: break-word;
  /* Bubble shape is the single highest-leverage "feels like a real
     messenger" decision — asymmetric radius, not a uniform pill. */
}

.message-bubble--mine {
  background: var(--color-bubble-mine);
  margin-left: auto;
  border-bottom-right-radius: var(--radius-sm);
}

.message-bubble--theirs {
  background: var(--color-bubble-theirs);
  border: 1px solid var(--color-border);
  margin-right: auto;
  border-bottom-left-radius: var(--radius-sm);
}

.status-tick {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.status-tick[data-state="read"] {
  color: var(--color-accent);
}

/* Low-bandwidth image messages: show a blurred low-res placeholder
   (loaded inline, tiny) until the full-res signed URL resolves. */
.media-thumb {
  background-size: cover;
  background-position: center;
  filter: blur(8px);
  transition: filter var(--duration-base) var(--easing);
}

.media-thumb[data-loaded="true"] {
  filter: none;
}