/* ==========================================================================
   Our Little Chat — installable app styles
   Native-feeling layout: fixed header, scrolling thread, composer pinned to
   the bottom, keyboard-aware (see the visualViewport script in index.html),
   safe-area aware for notches / home indicators, and no zoom-on-focus
   (every text field is 16px+, which is what stops iOS from magnifying).
   ========================================================================== */
:root{
  --c-bg:#08192A;
  --c-bar:#0C263B;
  --c-bar-line:rgba(198,241,255,.10);
  --c-field:#143552;
  --c-in:#16344D;
  --c-out-a:#2F9FE0;
  --c-out-b:#2384C9;
  --c-text:#EAF6FF;
  --c-muted:#8FB3C8;
  --c-accent:#61C8FF;
  --c-online:#3DDC97;
  --c-seen:#A8F0FF;
  --app-h:100dvh;
  --sat:env(safe-area-inset-top, 0px);
  --sab:env(safe-area-inset-bottom, 0px);
  --sal:env(safe-area-inset-left, 0px);
  --sar:env(safe-area-inset-right, 0px);
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji";
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{
  margin:0; height:100%; overflow:hidden; overscroll-behavior:none;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  touch-action:manipulation;
}
body{
  position:fixed; inset:0; width:100%;
  background:#050f19; color:var(--c-text); font-family:var(--ui);
  -webkit-font-smoothing:antialiased; -webkit-touch-callout:none;
}
button,input,textarea{ font-family:inherit; color:inherit; }
button{ -webkit-user-select:none; user-select:none; cursor:pointer; }

/* ---- app shell: pinned to the *visual* viewport so the keyboard never
        pushes the header off-screen or zooms the page ---- */
#app{
  position:fixed; top:0; left:0; right:0; margin:0 auto; width:100%; max-width:760px;
  height:var(--app-h);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--c-bg);
  will-change:transform;
}
@media (min-width:820px){
  #app{ box-shadow:0 0 0 1px var(--c-bar-line), 0 30px 80px rgba(0,0,0,.55); }
}

/* ---- header ---- */
.app-header{
  flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:calc(8px + var(--sat)) calc(10px + var(--sar)) 8px calc(12px + var(--sal));
  min-height:calc(60px + var(--sat));
  background:var(--c-bar); border-bottom:1px solid var(--c-bar-line);
  z-index:5;
}
.avatar{
  position:relative; width:42px; height:42px; flex:0 0 42px; border-radius:50%;
  display:grid; place-items:center; font-size:22px;
  background:radial-gradient(circle at 30% 25%, #2b6f9c, #123a58 70%);
  box-shadow:0 0 0 1px rgba(198,241,255,.18), 0 0 18px rgba(97,200,255,.18);
}
.presence-dot{
  position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:50%;
  background:#5b7182; border:2px solid var(--c-bar); transition:background .3s ease;
}
.presence-dot.on{ background:var(--c-online); box-shadow:0 0 8px rgba(61,220,151,.7); }
.who{ flex:1; min-width:0; }
.who h1{ margin:0; font-size:17px; font-weight:600; letter-spacing:.1px; line-height:1.2; display:flex; align-items:center; gap:6px; }
.who h1 svg{ width:13px; height:13px; opacity:.7; flex:0 0 auto; }
.who .status{ margin:1px 0 0; font-size:12.5px; color:var(--c-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.icon-btn{
  width:42px; height:42px; flex:0 0 42px; border:0; border-radius:50%; background:transparent;
  display:grid; place-items:center; color:#cfe6f3; transition:background .15s ease, transform .1s ease;
}
.icon-btn:active{ background:rgba(255,255,255,.10); transform:scale(.94); }
.icon-btn svg{ width:22px; height:22px; }
.install-pill{
  display:none; border:1px solid rgba(97,200,255,.5); background:rgba(97,200,255,.12); color:#bfe9ff;
  border-radius:999px; padding:7px 13px; font-size:13px; font-weight:600; flex:0 0 auto;
}
.install-pill.show{ display:block; }

/* ---- thread ---- */
#chatMessages.chat-messages{
  flex:1 1 auto; min-height:0; position:relative;
  padding:10px calc(10px + var(--sar)) 8px calc(10px + var(--sal));
  gap:2px; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  background-color:#0A1E31;
  background-image:
    radial-gradient(rgba(97,200,255,.055) 1.2px, transparent 1.3px),
    radial-gradient(120% 70% at 50% 0%, rgba(47,159,224,.08), transparent 60%);
  background-size:26px 26px, 100% 100%;
  scroll-behavior:auto;
}
#chatMessages::before{
  content:"\1F512  Messages are encrypted with your shared passphrase. Only the two of you can read them.";
  align-self:center; text-align:center; max-width:88%;
  margin:4px 0 12px; padding:7px 12px; border-radius:10px;
  background:rgba(255,214,102,.10); color:#f3dda0; font-size:12px; line-height:1.4;
}
.chat-empty{ color:var(--c-muted); font-size:14px; }
.chat-day{
  align-self:center; margin:12px 0 8px; padding:5px 12px; border-radius:9px;
  background:rgba(13,41,64,.92); color:var(--c-muted); font-size:12px; font-weight:500;
  box-shadow:0 1px 2px rgba(0,0,0,.3); letter-spacing:.2px;
}

/* ---- bubbles (scoped to the app so the main-site widget is untouched) ---- */
#app .chat-bubble{
  display:block; max-width:min(80%, 440px); padding:7px 10px 6px 11px; border-radius:12px;
  font-size:15.5px; line-height:1.38; font-weight:400; letter-spacing:.05px;
  white-space:pre-wrap; overflow-wrap:anywhere; word-break:normal;
  box-shadow:0 1px 1px rgba(0,0,0,.28);
  -webkit-user-select:text; user-select:text; -webkit-touch-callout:default;
  animation:bubbleIn .22s ease-out both;
}
@keyframes bubbleIn{ from{ opacity:0; transform:translateY(6px) scale(.985); } to{ opacity:1; transform:none; } }
#app .chat-bubble::after{ content:""; display:block; clear:both; }
#app .chat-bubble.her{ align-self:flex-start; background:var(--c-in); border:0; color:var(--c-text); }
#app .chat-bubble.me{ align-self:flex-end; background:linear-gradient(135deg,var(--c-out-a),var(--c-out-b)); color:#fff; font-weight:400; }
#app .chat-bubble.first{ margin-top:9px; }
#app .chat-bubble.her.first{ border-top-left-radius:3px; }
#app .chat-bubble.me.first{ border-top-right-radius:3px; }
#app .chat-bubble.her.grouped{ border-top-left-radius:5px; }
#app .chat-bubble.me.grouped{ border-top-right-radius:5px; }
#app .chat-bubble-text{ display:inline; }
#app .chat-bubble-time{
  float:right; display:inline-flex; align-items:center; gap:3px;
  margin:7px 0 -3px 12px; font-size:11px; opacity:.72; line-height:1; white-space:nowrap;
}
#app .chat-bubble.me .chat-bubble-time{ color:rgba(255,255,255,.85); opacity:1; }
#app .chat-bubble img{
  display:block; width:min(260px, 100%); max-height:340px; object-fit:cover;
  border-radius:9px; margin:1px 0 3px; cursor:zoom-in; background:rgba(0,0,0,.2);
}
#app .chat-bubble img + .chat-bubble-text{ display:block; margin-top:4px; }
#app .chat-ticks{ opacity:.9; }
#app .chat-bubble.me .chat-ticks.sent,
#app .chat-bubble.me .chat-ticks.delivered{ color:rgba(255,255,255,.78); opacity:1; text-shadow:none; }
#app .chat-bubble.me .chat-ticks.seen{ color:var(--c-seen); opacity:1; text-shadow:none; font-weight:400; }

/* ---- jump-to-latest button ---- */
.to-bottom{
  position:absolute; right:14px; bottom:calc(var(--composer-h, 64px) + 14px); z-index:6;
  width:44px; height:44px; border-radius:50%; border:0; display:grid; place-items:center;
  background:var(--c-bar); color:#cfe6f3; box-shadow:0 2px 10px rgba(0,0,0,.45), 0 0 0 1px var(--c-bar-line);
  opacity:0; transform:translateY(8px) scale(.9); pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.to-bottom.show{ opacity:1; transform:none; pointer-events:auto; }
.to-bottom svg{ width:22px; height:22px; }
.to-bottom .badge{
  position:absolute; top:-6px; right:-2px; min-width:20px; height:20px; padding:0 6px; border-radius:10px;
  background:var(--c-online); color:#03291a; font-size:12px; font-weight:700; display:none; place-items:center; line-height:20px;
}
.to-bottom .badge.show{ display:block; text-align:center; }

/* ---- lock screen ---- */
#app .chat-gate{ flex:1 1 auto; justify-content:center; padding:24px calc(28px + var(--sar)) calc(24px + var(--sab)) calc(28px + var(--sal)); gap:0; }
.gate-badge{
  width:84px; height:84px; border-radius:50%; display:grid; place-items:center; font-size:38px; margin-bottom:18px;
  background:radial-gradient(circle at 30% 25%, #2b6f9c, #0f324c 72%);
  box-shadow:0 0 0 1px rgba(198,241,255,.2), 0 0 44px rgba(97,200,255,.28);
}
#app .chat-gate-title{ font-family:var(--ui); font-size:22px; font-weight:650; margin:0 0 8px; }
#app .chat-gate-hint{ font-size:14px; line-height:1.5; color:var(--c-muted); max-width:320px; margin:0 0 22px; }
#app .chat-gate-form{ flex-direction:column; max-width:340px; gap:12px; }
#app .chat-gate-input{
  width:100%; height:50px; border-radius:14px; padding:0 16px; font-size:16px;
  background:var(--c-field); border:1px solid rgba(198,241,255,.14); color:var(--c-text);
}
#app .chat-gate-input:focus{ border-color:var(--c-accent); box-shadow:0 0 0 3px rgba(97,200,255,.18); outline:none; }
#app .chat-gate-submit{
  height:50px; border-radius:14px; font-size:16px; font-weight:650; color:#03212f;
  background:linear-gradient(135deg,#7bd3ff,#4db8f5); box-shadow:0 6px 20px rgba(77,184,245,.32);
}
#app .chat-gate-submit:active{ transform:scale(.985); }
#app .chat-gate-error{ font-size:13.5px; min-height:1.3em; margin-top:14px; }

/* ---- photo tray ---- */
#app .chat-photo-preview{
  flex:0 0 auto; padding:10px calc(12px + var(--sar)) 8px calc(12px + var(--sal));
  background:var(--c-bar); border-top:1px solid var(--c-bar-line); gap:12px;
}
.tray-thumb{ position:relative; width:64px; height:64px; flex:0 0 64px; }
.tray-thumb img{ width:64px; height:64px; object-fit:cover; border-radius:10px; display:block; }
.tray-thumb button{
  position:absolute; top:-7px; right:-7px; width:24px; height:24px; border-radius:50%; border:2px solid var(--c-bar);
  background:#37556b; color:#fff; font-size:12px; line-height:1; display:grid; place-items:center; padding:0;
}
.tray-meta{ min-width:0; }
.tray-meta b{ display:block; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tray-meta span{ font-size:12.5px; color:var(--c-muted); }

/* ---- composer ---- */
#app .chat-input-row.composer{
  flex:0 0 auto; align-items:flex-end; gap:8px;
  padding:8px calc(8px + var(--sar)) calc(8px + var(--sab)) calc(8px + var(--sal));
  background:var(--c-bar); border-top:1px solid var(--c-bar-line);
}
body.kb-open #app .chat-input-row.composer{ padding-bottom:8px; }  /* home-indicator gap isn't needed with the keyboard up */
.composer .attach-btn{
  width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; border-radius:50%;
  color:#9fc4d9; opacity:1; padding:0; cursor:pointer; transition:background .15s ease;
}
.composer .attach-btn:active{ background:rgba(255,255,255,.10); }
.composer .attach-btn svg{ width:24px; height:24px; }
.composer .field{
  flex:1 1 auto; min-width:0; display:flex; align-items:flex-end;
  background:var(--c-field); border-radius:22px; padding:0 14px; border:1px solid transparent;
  transition:border-color .15s ease;
}
.composer .field:focus-within{ border-color:rgba(97,200,255,.45); }
.composer textarea{
  width:100%; resize:none; border:0; outline:0; background:transparent; color:var(--c-text);
  font-size:16px; line-height:22px; padding:11px 0; height:44px; max-height:132px; overflow-y:auto;
  -webkit-user-select:text; user-select:text; border-radius:0;
}
.composer textarea::placeholder{ color:#7f9fb3; }
#app .chat-send{
  position:relative; width:44px; height:44px; flex:0 0 44px; border-radius:50%; border:0; padding:0;
  display:grid; place-items:center; color:#03212f;
  background:linear-gradient(135deg,#7bd3ff,#4db8f5); box-shadow:0 3px 12px rgba(77,184,245,.35);
  transition:transform .12s ease, opacity .2s ease, filter .2s ease;
}
#app .chat-send svg{ width:22px; height:22px; margin-left:2px; }
#app .chat-send:active{ transform:scale(.92); }
#app .chat-send.idle{ opacity:.45; filter:saturate(.5); box-shadow:none; }
.composer.sending .chat-send svg{ visibility:hidden; }
.composer.sending .chat-send::after{
  content:""; position:absolute; width:20px; height:20px; border-radius:50%;
  border:2.5px solid rgba(3,33,47,.25); border-top-color:#03212f; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- bottom sheet menu ---- */
.sheet-backdrop{
  position:absolute; inset:0; z-index:20; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.sheet-backdrop.show{ opacity:1; pointer-events:auto; }
.sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:21; max-width:760px; margin:0 auto;
  background:#0f2b42; border-radius:20px 20px 0 0; padding:8px 0 calc(14px + var(--sab));
  box-shadow:0 -10px 40px rgba(0,0,0,.5); transform:translateY(105%); transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.sheet.show{ transform:none; }
.sheet-grab{ width:38px; height:4px; border-radius:2px; background:rgba(255,255,255,.22); margin:2px auto 10px; }
.sheet-title{ font-size:13px; font-weight:600; color:var(--c-muted); text-transform:uppercase; letter-spacing:.8px; padding:0 20px 8px; }
.sheet-row, .sheet-item{
  display:flex; align-items:center; gap:14px; width:100%; padding:13px 20px; border:0; background:none; text-align:left; font-size:16px;
}
.sheet-item:active{ background:rgba(255,255,255,.07); }
.sheet-item svg, .sheet-row > svg{ width:22px; height:22px; flex:0 0 22px; color:#8fc4e2; }
.sheet-row .grow{ flex:1; min-width:0; }
.sheet-row small, .sheet-item small{ display:block; color:var(--c-muted); font-size:13px; margin-top:2px; }
.sheet-row .mini{
  border:1px solid rgba(97,200,255,.45); background:rgba(97,200,255,.10); color:#bfe9ff; border-radius:999px;
  padding:7px 14px; font-size:14px; font-weight:600; flex:0 0 auto;
}
.sheet-divider{ height:1px; background:var(--c-bar-line); margin:6px 20px; }
.role-login{ display:none; gap:8px; padding:4px 20px 12px; }
.role-login.show{ display:flex; }
.role-login input{
  flex:1; min-width:0; height:46px; border-radius:12px; padding:0 14px; font-size:16px;
  background:var(--c-field); border:1px solid rgba(198,241,255,.14); color:var(--c-text);
}
.role-login button{ height:46px; padding:0 18px; border:0; border-radius:12px; font-size:15px; font-weight:650; background:#4db8f5; color:#03212f; }
.hint-line{ margin:0; padding:2px 20px 8px 56px; font-size:13px; line-height:1.45; color:var(--c-muted); }

/* ---- lightbox + toast ---- */
.lightbox{
  position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.94); padding:var(--sat) var(--sar) var(--sab) var(--sal);
}
.lightbox.show{ display:flex; animation:fade .18s ease; }
.lightbox img{ max-width:100%; max-height:100%; object-fit:contain; }
.lightbox .close{ position:absolute; top:calc(10px + var(--sat)); right:12px; color:#fff; background:rgba(255,255,255,.14); }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.toast{
  position:absolute; left:50%; bottom:calc(var(--composer-h, 64px) + 18px); z-index:30; transform:translate(-50%, 10px);
  max-width:86%; padding:10px 16px; border-radius:12px; background:#213f57; color:#eaf6ff; font-size:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

@media (prefers-reduced-motion:reduce){
  #app .chat-bubble, .sheet, .to-bottom, .toast{ animation:none !important; transition:none !important; }
}