/* ============================================================================
   EMBEDDED MODE

   Soop docked in a 400px column beside somebody else's dashboard. Loaded last so
   it can drop chrome the other files put there, and scoped to html.embed so a
   standalone tab never sees a rule from this file.

   Almost nothing needs saying here, and that is the point. The iframe has its
   own viewport, so `@media (max-width: 860px)` in layout.css already fires and
   the narrow layout the app has always had applies unchanged. What is different
   about a dock is not its width, it is that it has a mouse and it does not own
   the window: no install prompt, no Space rail, no full-screen assumptions.
   ========================================================================= */

/* The panel is the whole frame. env(safe-area-inset-*) resolves to 0 inside an
   iframe, so the padding those add on a phone quietly disappears here on its
   own; nothing to undo. What does need saying is that the frame must not be able
   to scroll as a document - only the message list scrolls. A dock that scrolls
   its own chrome away is the single most common embedded-chat defect. */
html.embed,
html.embed body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html.embed #app {
  height: 100%;
  min-height: 0;
}

/* ---------------------------------------------------------------- minimal chrome
   The dashboard is already team-specific, so the Space rail is 60px spent
   telling somebody they are in the only place they can be. It goes, and so does
   everything whose only meaning is "you are looking at a standalone tab". */
html.embed-minimal #spaceRail { display: none; }
html.embed-minimal #installBtn { display: none; }

/* The org switcher and the invite button both take a person OUT of the panel and
   into account administration, which is not what a dock is for. The org console
   is a full page route; opening it inside a 400px column replaces the dashboard's
   chat with an admin screen and there is no way back that a first-time user
   finds. Both stay reachable in the standalone app. */
html.embed-minimal #btnInvite,
html.embed-minimal #btnSpaces { display: none; }

/* The channel drawer's offset is measured from the rail. With the rail gone it
   has to start at the edge, exactly as it does for a one-Space account - the
   same reasoning as body.ux-one-space in layout.css, applied for a different
   reason. */
@media (max-width: 860px) {
  html.embed-minimal #sidebar {
    left: 0;
    width: min(var(--sidebar-w), calc(100vw - var(--s-12)));
    transform: translateX(-100%);
  }
  html.embed-minimal body.nav-open #sidebar { transform: none; }
}

/* ---------------------------------------------------------------- density
   A dock has a mouse. layout.css keys its comfortable-but-large phone sizing off
   width alone, which is right for a phone and wasteful for a 400px column on a
   27in screen: the topbar was built to clear a thumb. Give the vertical space
   back wherever the pointer is fine, and leave every touch device alone. */
@media (pointer: fine) {
  html.embed {
    --header-h: 44px;
  }
  html.embed #topbar { padding: 0 var(--s-3); }
  html.embed #topbar .icon,
  html.embed #chanbar .icon { min-width: 32px; height: 32px; }
}

/* ---------------------------------------------------------------- handover
   Between "the frame loaded" and "the host handed us a person" there is a gap of
   one network round trip. Showing the sign-in card in it and then yanking it
   away is worse than showing nothing, because the person starts reading it and
   reaches for a password they were never meant to need. */
html.embed.embed-awaiting-auth #auth { visibility: hidden; }

html.embed .embed-wait {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  gap: var(--s-4);
  padding: var(--s-6);
  text-align: center;
  color: var(--c-text-2);
  font-size: var(--t-sm);
  background: var(--c-bg);
  z-index: var(--z-modal, 900);
}
html.embed .embed-wait b { color: var(--c-text); font-size: var(--t-md); }
html.embed .embed-wait .embed-wait-in { max-width: 30ch; line-height: 1.6; }