/* The hidden attribute works only through the UA rule [hidden]{display:none},
   which ANY author rule setting display overrides. .call-overlay sets
   display:flex, so the overlay - position:fixed, inset:0, z-index:100 - covered
   the whole app permanently and the chat UI was unreachable underneath it.
   This must come first and must be !important, because the author rules it has
   to beat are more specific than [hidden]. */
[hidden] { display: none !important; }

:root {
  --bg: #faf7ff; --panel: #ffffff; --ink: #2a2140; --muted: #8a7fa6;
  --me: #c9a7ff; --them: #ffd1e8; --accent: #a77bff;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#17131f; --panel:#221b2e; --ink:#efe8ff; --muted:#9b8fb8; --them:#3a2740; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.4 system-ui, -apple-system, sans-serif; background: var(--bg);
  color: var(--ink); display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }

/* Header / join */
header { padding: 12px 16px; background: var(--panel); border-bottom: 1px solid rgba(0,0,0,.06);
  padding-top: max(12px, env(safe-area-inset-top)); }
h1 { margin: 0 0 8px; font-size: 20px; }
.join { display: flex; gap: 8px; }
.join input { flex: 1; min-width: 0; padding: 10px; border: 1px solid var(--muted);
  border-radius: 10px; background: transparent; color: var(--ink); font-size: 16px; }
.status { margin: 8px 0 0; color: var(--muted); font-size: 13px; word-break: break-word; }
.safety { margin: 6px 0 0; font-size: 12px; color: #d6336c; font-weight: 600; word-break: break-word; }

/* Messages */
main { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px; }
#messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bubble { display: flex; align-items: center; gap: 6px; max-width: 90%; }
.bubble.out { align-self: flex-end; flex-direction: row-reverse; }
.flower { font-size: 28px; background: none; border: none; cursor: pointer; padding: 2px;
  transition: transform .15s; line-height: 1; -webkit-tap-highlight-color: transparent; }
.flower:hover { transform: scale(1.15); }
.flower.open { transform: scale(.9); opacity: .6; }
.flower.burned { filter: grayscale(1); opacity: .5; cursor: default; }
.flower.burned:hover { transform: none; }
.revealed { background: var(--them); padding: 8px 12px; border-radius: 14px; word-break: break-word; }
.bubble.out .revealed { background: var(--me); }
.revealed.imported { outline: 2px dashed var(--accent); outline-offset: 1px; }
.revealed.media { display: flex; flex-direction: column; gap: 4px; padding: 6px; }
.revealed.media video { max-width: min(240px, 60vw); border-radius: 10px; display: block; }
.revealed.media .dl { font-size: 12px; color: var(--accent); text-decoration: none; }
.countdown { align-self: center; color: #d6336c; font-size: 12px; white-space: nowrap; }
.ts { font-size: 10px; color: var(--muted); align-self: center; white-space: nowrap; }
.del { font-size: 13px; color: #d6336c; background: rgba(214,51,108,.1); border: none; cursor: pointer;
  align-self: center; opacity: .85; padding: 3px 7px; border-radius: 999px; line-height: 1;
  -webkit-tap-highlight-color: transparent; }
.del:hover, .del:active { opacity: 1; background: rgba(214,51,108,.22); }

/* Footer / compose */
footer { padding: 8px 16px; background: var(--panel); border-top: 1px solid rgba(0,0,0,.06);
  padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.stego-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.stego-row button, .import { font-size: 13px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--accent); color: var(--accent); background: transparent; cursor: pointer; }
.compose { position: relative; display: flex; gap: 6px; align-items: flex-end; }
.compose select { border: 1px solid var(--muted); border-radius: 12px; background: transparent;
  color: var(--ink); font-size: 14px; padding: 0 4px; height: 44px; flex: 0 0 auto; }
.emojiBtn { font-size: 20px; background: transparent; border: 1px solid var(--muted);
  border-radius: 12px; cursor: pointer; padding: 0 8px; height: 44px; flex: 0 0 auto; line-height: 1; }
.compose textarea { flex: 1; min-width: 0; resize: none; padding: 11px; border-radius: 12px;
  border: 1px solid var(--muted); background: transparent; color: var(--ink); font-size: 16px; line-height: 1.3; }
.compose button#sendBtn, .join button { background: var(--accent); color: #fff; border: none;
  border-radius: 12px; padding: 0 16px; height: 44px; cursor: pointer; font-weight: 600; flex: 0 0 auto; }

/* Emoji picker — full-width scrollable sheet, categorized */
.emoji-grid { position: absolute; bottom: 52px; left: 0; right: 0; z-index: 20;
  background: var(--panel); border: 1px solid var(--muted); border-radius: 14px; padding: 6px 8px 10px;
  max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 -8px 30px rgba(0,0,0,.28); }
.emoji-cat { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; position: sticky; top: 0; z-index: 1; background: var(--panel); padding: 8px 2px 3px; }
.emoji-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; margin-bottom: 4px; }
.emoji-choice { font-size: 24px; background: none; border: none; cursor: pointer;
  padding: 4px 0; border-radius: 8px; aspect-ratio: 1; -webkit-tap-highlight-color: transparent; }
.emoji-choice:hover, .emoji-choice:active { background: rgba(167,123,255,.25); }

/* Screenshot deterrence: blur only when the tab is truly hidden */
body.hidden-content main, body.hidden-content footer { filter: blur(18px); }

/* Phone tweaks */
@media (max-width: 480px) {
  h1 { font-size: 18px; }
  main { padding: 10px 12px; }
  footer { padding: 8px 12px max(8px, env(safe-area-inset-bottom)); }
  .flower { font-size: 24px; }
  .compose select { max-width: 92px; }
  .emoji-row { grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); }
}

.copyright { margin: 8px 0 0; text-align: center; font-size: 10px; color: var(--muted); opacity: .8; }

.xref { font-size: 10px; color: var(--accent); font-weight: 700; align-self: center; white-space: nowrap; }

/* Invite-link controls */
.join button#newLinkBtn { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.copybtn { margin: 8px 0 0; background: transparent; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 10px; padding: 7px 12px; font-size: 13px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.copybtn:hover, .copybtn:active { background: var(--accent); color: #fff; }

/* ---- calling ----------------------------------------------------------- */
.call-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 0; }
.call-btns button {
  min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid #c9a7ff;
  background: #f6f0ff; color: #3b2b57; font-size: 15px; cursor: pointer;
}
.call-btns button:active { transform: scale(.97); }
.relay { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #6b5c85; }
.relay input { width: 18px; height: 18px; }
.relay.unavailable { opacity: .45; }

.incoming {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 10px 0 0; padding: 10px 12px; border-radius: 14px;
  background: #fff4e5; border: 1px solid #f0c893; color: #5b3d14; font-size: 15px;
}
.incoming button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: none; cursor: pointer; font-size: 15px; }
.incoming .accept { background: #1d8a6b; color: #fff; }
.incoming .decline { background: #d6336c; color: #fff; }

.call-overlay {
  position: fixed; inset: 0; z-index: 100; background: #120d1c;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.remote-vid { width: 100%; height: 100%; object-fit: cover; background: #120d1c; }
.local-vid {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px;
  width: 28vw; max-width: 160px; border-radius: 12px; object-fit: cover;
  border: 1px solid rgba(255,255,255,.25); background: #000;
}
.call-safety {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 12px; margin: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
  color: #ffd9e6; background: rgba(0,0,0,.45); padding: 6px 10px; border-radius: 999px;
}
/* The overlay covers #status, so the one line explaining what the call is
   doing - or why it failed - has to live inside the overlay itself. Centred
   and above the controls, so it is the first thing read on a black screen. */
.call-status {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(86px + env(safe-area-inset-bottom));
  margin: 0; max-width: min(92vw, 420px); text-align: center;
  font-size: 14px; line-height: 1.4; color: #f3ecff;
  background: rgba(0,0,0,.55); padding: 8px 14px; border-radius: 12px;
}

.call-controls {
  position: absolute; bottom: calc(22px + env(safe-area-inset-bottom));
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.call-controls button {
  min-height: 48px; padding: 0 18px; border-radius: 999px; border: none; cursor: pointer;
  font-size: 15px; background: rgba(255,255,255,.14); color: #f3ecff;
}
.call-controls .hangup { background: #d6336c; color: #fff; }

.capture { margin: 6px 0 0; font-size: 12.5px; color: #8a5a1f; }
.capture.good { color: #1d8a6b; }

/* Invite actions sit together so sharing and copying are one decision. */
.invite-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* The toast mirrors the status line next to the footer controls, because that
   is where the user is looking when they press Export, Import or Video. Fixed
   above the composer so it is visible whatever the scroll position. */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(104px + env(safe-area-inset-bottom));
  z-index: 60; margin: 0; max-width: min(92vw, 460px);
  padding: 10px 16px; border-radius: 999px;
  background: rgba(32, 20, 48, .94); color: #f6eeff;
  font-size: 14px; line-height: 1.35; text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
}