/* Only what differs from the desktop app: the window chrome is a browser's,
   the pointer is a thumb, and there is a MacBook at the other end whose state
   the reader needs to see. */

/* The desktop title bar is draggable and reserves room for macOS traffic
   lights; in a browser tab neither applies. */
#titlebar {
  -webkit-app-region: initial;
  padding: 0 10px;
  padding-top: env(safe-area-inset-top);
  height: calc(var(--titlebar-h) + env(safe-area-inset-top));
}
#titlebar .brand { position: static; transform: none; }
#shell { top: calc(var(--titlebar-h) + env(safe-area-inset-top)); }
#sidebar { top: calc(var(--titlebar-h) + env(safe-area-inset-top)); }

/* Whether the Mac is awake decides whether anything on this page can work, so
   it sits in the title bar rather than behind a menu. */
#presence {
  font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 100px;
  padding: 2px 8px;
  display: inline-flex; align-items: center; gap: 5px;
}
#presence::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 6px rgba(255,255,255,0.6);
}
#presence.offline { color: var(--ink-dim); opacity: 0.75; }
#presence.offline::before { background: var(--ink-dim); box-shadow: none; }

/* Home-screen keyboard behaviour: the composer has to sit above the software
   keyboard, and iOS reports that through the visual viewport, not the layout
   one. `dvh` tracks it without any script. */
@supports (height: 100dvh) {
  #shell { height: calc(100dvh - var(--titlebar-h) - env(safe-area-inset-top)); }
}

#input-composer { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }

@media (max-width: 640px) {
  #messages { padding-left: 16px; padding-right: 16px; gap: 20px; }
  .msg-assistant { font-size: 15px; }
  .msg-user { font-size: 14px; max-width: 88%; }
  .msg-figure img, .msg-progress { width: 100%; max-width: 320px; }
  /* 16px keeps iOS Safari from zooming the page when the field takes focus. */
  #input-field { font-size: 16px; }
  #welcome h1 { font-size: 26px; }
}

/* Touch has no hover, so controls that reveal themselves on hover would be
   invisible on a phone. */
@media (pointer: coarse) {
  .msg-copy, .conv-act { opacity: 1; }
}

/* The pairing card that used to live here went away with open mode: there is
   no longer a state where the page has nothing to talk to. A Mac that is not
   bridging now reads as "Mac śpi" in the title bar, which is the same fact
   said in the place people already look. */