/* ---------------------------------------------------------------
   JAMFAM — V2 shell

   Loaded AFTER ../styles.css, which supplies the colour tokens and all
   the bubble / reaction / player styling. This file only replaces the
   presentation: no page, no phone frame — the chat fills the viewport so
   it reads as a native messaging app on a phone.
   --------------------------------------------------------------- */

:root {
  /* V1 insets the UI to clear the phone art's bezel. There is no bezel
     here, so zero them out rather than unpick every padding rule. */
  --bleed-x: 0px;
  --bleed-y: 0px;

  /* how wide the conversation is allowed to get on a desktop screen */
  --column: 560px;
}

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  overflow: hidden;                 /* the thread scrolls, the page does not */
  overscroll-behavior: none;        /* no rubber-band past the ends */
}

body::before { display: none; }     /* V1's page vignette */

/* ---------------------------------------------------------------
   Full-bleed app shell
   --------------------------------------------------------------- */

.app.screen {
  position: static;
  width: 100%;
  height: 100vh;
  height: 100dvh;                   /* dvh tracks mobile browser chrome as it
                                       hides and shows; vh does not, which is
                                       what crops the compose bar on iOS */
  border-radius: 0;
  box-shadow: none;

  /* fixed scale rather than V1's phone-width-derived one */
  font-size: clamp(15px, 4.1vw, 18px);
}

/* ---------------------------------------------------------------
   Header — bar bleeds full width, its content stays in the column
   --------------------------------------------------------------- */

.notch-space { display: none; }     /* no notch to clear */

.chat-header {
  padding-top: env(safe-area-inset-top);   /* under the real status bar */
}

.chat-header__row {
  max-width: var(--column);
  margin: 0 auto;
  padding: .7em 1em .8em;
  padding-left:  calc(1em + env(safe-area-inset-left));
  padding-right: calc(1em + env(safe-area-inset-right));
}

/* ---------------------------------------------------------------
   Thread
   --------------------------------------------------------------- */

.thread {
  width: 100%;
  max-width: var(--column);
  margin: 0 auto;
  padding: 1.2em 1em 1em;
  padding-left:  calc(1em + env(safe-area-inset-left));
  padding-right: calc(1em + env(safe-area-inset-right));
  -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------
   Compose bar — sits above the home indicator
   --------------------------------------------------------------- */

.compose {
  padding: .55em 1em calc(.55em + env(safe-area-inset-bottom));
  padding-left:  calc(1em + env(safe-area-inset-left));
  padding-right: calc(1em + env(safe-area-inset-right));
}

.compose .new-message {
  max-width: var(--column);
  margin: 0 auto;
}

.home-bar { display: none; }        /* the device draws a real one */

/* Touch targets: hover styles that lift on a pointer device just look
   like a stuck state after a tap on a phone. */
@media (hover: none) {
  .note:hover,
  .new-message:hover { transform: none; }
  .play:hover { transform: none; }
}