/* ══ WEB-01D: web app shell inside the chat modal ═════════════════════════════
   Its OWN stylesheet, on purpose — two reasons:

   1. CACHE. head.view.php builds every other stylesheet URL with asset(), and on
      prod asset() resolves ?v= to ASSET_VERSION — which is defined NOWHERE in this
      repo, so it falls back to the literal '1' (scripts/functions.php:607-613).
      Every CSS URL is therefore frozen at ?v=1 forever: an edit to styles-atomic.css
      NEVER reaches a browser that already cached it. That is exactly why the tab bar
      rendered unstyled ("ChatAnmelden") for the operator while a cache-busted curl
      showed the rules present. This file is included with ?v=<filemtime> instead —
      the same idiom footer.view.php already uses for JS — so every save busts.
   2. SCOPE. Everything here is under #webapp-shell / .webapp-* and cannot touch a
      chat rule.

   Historical note (WC-091): shell nodes must not be given class="contact-form" — that class
   was the chat widget's ACCORDION (`max-height:0; overflow:hidden` + a 0.8s slideDown, opened
   only by the code panel), and a panel wearing it flashed then collapsed to nothing — the
   WEB-01D-FIX-1 "vanishing login panel". Both the accordion rules and openCodePanel() are now
   DELETED (WC-081 / WC-091), so the hazard is gone; .webapp-form below stands on its own and
   replicates the LOOK (padding/inputs/heading) directly. */

#webapp-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;          /* lets the frame host shrink inside a flex parent */
  flex: 1 1 auto;
}

/* The iframe is height:100% of THIS — without a sized host it collapses to 0. */
#webapp-frame-host {
  flex: 1 1 auto;
  min-height: 60vh;
  overflow: hidden;
}
#webapp-frame-host[hidden] { display: none; }

/* ── the shell's own form skin (formerly a .contact-form lookalike, minus the accordion) ── */
.webapp-form {
  padding: 0 20px;        /* the only layout rule the old .contact-form actually contributed */
}
.webapp-form h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
}
.webapp-form input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 2px solid #555;
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
  color: #eee;
}
.webapp-form input:focus {
  border-color: #dda63d;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.webapp-form input::placeholder {
  color: #bbb;
  font-size: 16px;
}

/* ── bottom tab bar ───────────────────────────────────────────────────────── */
.webapp-tabs {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  background: inherit;
}
.webapp-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 6px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.webapp-tab.active { border-color: currentColor; font-weight: 600; }

.webapp-login-msg { margin: 8px 0 0; font-size: 14px; }
.webapp-login-msg.is-error { color: #b00020; }