/* ═══════════════════════════════════════════
   LOOP — Exact design spec implementation
   Colors, typography, bubble shapes per PDF
═══════════════════════════════════════════ */
:root {
  --bg:          #06060A;
  --surface:     #12121C;
  --surface-alt: #0E0E18;
  --surface-screen: #1a1a2e;
  --bubble-them: #12121C;
  --bubble-you:  #1E2A3A;
  --text:        #D8D8D8;
  --text-them:   #C4C4D8;
  --text-dim:    #7878AC;
  --border:      rgba(255,255,255,0.06);
  --cyan:        #4DFFF0;
  --red:         #FF3B5C;
  --red-dim:     rgba(255,59,92,0.15);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html,body{
  width:100%;height:100%;
  background:#000;
  font-family:'DM Mono',monospace;
  font-weight:400;
  letter-spacing:-0.04em;
  color:var(--text);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

#phone-wrapper{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-height:100vh;
  overflow:visible;
  background:#1a1a1a;
  border-radius:44px;
  border:2px solid #333;
  padding:12px 12px 20px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 8px 32px rgba(0,0,0,0.9),
    0 20px 60px rgba(0,0,0,0.6);
}

/* ── PHONE FRAME ────────────────────────── */
/* iPhone 16 standard: 393×852 (6.1")       */
/* iPhone 16 Plus:     430×932 (6.7")       */
/* Uses 393×852 as base, scales up on       */
/* taller viewports. On mobile it fills     */
/* the screen naturally.                    */
#phone-frame{
  position:relative;
  width:393px;
  height:852px;
  max-width:100vw;
  max-height:100vh;
  background:var(--bg);
  overflow:hidden;
  border-radius:48px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.08),
    0 0 0 6px #111,
    0 0 80px rgba(0,0,0,0.8);
  flex-shrink:0;
}
/* On larger screens, use 6.7" Plus size */
@media (min-height:940px) and (min-width:440px){
  #phone-frame{ width:430px; height:932px; }
}
/* On actual mobile — fill the whole screen, no bezel */
@media (max-width:440px){
  #phone-frame{
    width:100vw;
    height:100vh;
    border-radius:0;
    box-shadow:none;
  }
  #phone-frame::before,
  #phone-frame::after{ display:none; }
  #phone-frame > .scanlines{ border-radius:0; }
}
/* Dynamic island notch */
#phone-frame::before{
  content:'';
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  width:126px;
  height:36px;
  background:#000;
  border-radius:20px;
  z-index:999;
  pointer-events:none;
}
/* Home indicator bar — now handled by #home-bar (interactive) */

/* Screen cracks — persistent overlay */
.screen-cracks{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:999;
  pointer-events:none;
}

/* scanline texture — scoped to phone frame */
body::after{display:none;}  /* disable old body scanline */
#phone-frame > .scanlines{
  position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,0.012) 2px,rgba(255,255,255,0.012) 4px);
  pointer-events:none;
  z-index:998;
  border-radius:48px;
}

/* ── P5 CANVAS ───────────────────────────── */
#p5-canvas{
  position:absolute;inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  overflow:hidden;
}
#p5-canvas canvas{
  display:block;
  width:100%!important;
  height:100%!important;
}

/* ── STATUS BAR ──────────────────────────── */
.status-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 24px 6px;  /* iPhone 8 has standard top bar */
  font-family:'DM Mono',monospace;
  font-weight:300;
  font-size:11px;
  color:var(--text);
  letter-spacing:0;
  flex-shrink:0;
}
.status-bar.light{color:#111;}
.sb-right{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  color:inherit;
}

/* ── SCREEN BASE ─────────────────────────── */
.screen{
  position:absolute;inset:0;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  transition:transform 0.38s cubic-bezier(0.22,1,0.36,1);
  will-change:transform;
  overflow:hidden;
}
.screen.off-right{transform:translateX(100%);}
.screen.off-left {transform:translateX(-100%);}
.screen.on       {transform:translateX(0);}

/* ── LOCK SCREEN ─────────────────────────── */
#lock-screen{
  position:absolute;inset:0;
  z-index:50;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  cursor:pointer;
  transition:opacity 0.5s ease, transform 0.5s ease;
}
#lock-screen.dismissed{
  opacity:0;
  transform:translateY(-24px);
  pointer-events:none;
}
.lock-body{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.lock-date{
  font-family:'DM Mono',monospace;
  font-weight:300;
  font-size:13px;
  color:var(--text-dim);
  letter-spacing:0.05em;
}
.lock-clock{
  font-family:'Syne',sans-serif;
  font-weight:800;
  font-size:86px;
  color:var(--text);
  line-height:1;
  letter-spacing:0.11em;
}
.lock-notification{
  position:absolute;
  bottom:110px;
  left:50%;
  transform:translateX(-50%) translateY(16px);
  width:min(360px,88vw);
  background:rgba(18,18,28,0.88);
  border:1px solid rgba(77,255,240,0.35);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:14px;
  padding:12px 16px;
  opacity:0;
  animation:notifIn 0.4s 1.8s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes notifIn{
  to{opacity:1;transform:translateX(-50%) translateY(0);}
}
.notif-row{
  display:flex;
  justify-content:space-between;
  margin-bottom:3px;
}
.notif-app{
  font-size:10px;
  color:var(--text-dim);
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.notif-time{
  font-size:10px;
  color:var(--text-dim);
}
.notif-sender{
  font-size:13px;
  color:var(--text);
  font-weight:500;
  margin-bottom:2px;
}
.notif-preview{
  font-size:12px;
  color:var(--text-dim);
}
.lock-hint{
  position:absolute;
  bottom:92px;  /* above integrated home button */
  left:50%;
  transform:translateX(-50%);
  font-size:11px;
  color:var(--text-dim);
  letter-spacing:0.15em;
  opacity:0;
  animation:notifIn 0.3s 2.8s forwards, lockPulse 2.5s 3.1s ease-in-out infinite;
}
@keyframes lockPulse{0%,100%{opacity:0.35;}50%{opacity:0.8;}}

/* ── HOME SCREEN ─────────────────────────── */
#home-screen{
  position:absolute;inset:0;
  z-index:48;
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform 0.38s cubic-bezier(0.22,1,0.36,1);
}
#home-screen.on{transform:translateX(0);}
.home-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 55% at 50% -5%, #c44dff 0%, #7b2fff 30%, #1a0a4a 60%, transparent 80%),
    radial-gradient(ellipse 70% 30% at 50% 108%, #4da8ff 0%, #1a3a6a 40%, transparent 70%),
    #06060A;
  z-index:0;
}
/* reflected arc lines */
.home-bg::before,.home-bg::after{
  content:'';
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:120%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.18);
  pointer-events:none;
}
.home-bg::before{
  width:140%;height:140%;
  top:18%;
  border-color:rgba(200,160,255,0.22);
}
.home-bg::after{
  width:140%;height:140%;
  top:28%;
  border-color:rgba(180,220,255,0.12);
  transform:translateX(-50%) scaleY(-1);
}
#home-screen .status-bar{
  position:relative;z-index:2;
  color:rgba(255,255,255,0.9);
  background:transparent;
}
.loop-wordmark-home{
  position:absolute;
  top:14px;left:20px;
  font-family:'Syne',sans-serif;
  font-weight:800;
  font-size:14px;
  letter-spacing:0.11em;
  color:rgba(255,255,255,0.5);
  z-index:3;
}
.home-content{
  flex:1;
  position:relative;z-index:2;
  display:flex;
  flex-direction:column;
  padding:20px 20px 0;
}
/* reminders widget */
.reminders-widget{
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:18px;
  padding:14px 16px 10px;
  color:#fff;
}
.widget-header{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
}
.widget-icon{font-size:12px;color:rgba(255,255,255,0.5);}
.widget-title{
  font-size:12px;
  color:rgba(255,255,255,0.5);
  letter-spacing:0.05em;
}
.widget-items{display:flex;flex-direction:column;gap:6px;}
.widget-item{
  background:rgba(255,255,255,0.07);
  border-radius:12px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.widget-item.story-item{
  background:rgba(77,255,240,0.07);
}
.widget-item.story-item .item-text{
  color:var(--cyan);
  animation:storyFlicker 3s ease-in-out infinite;
}
@keyframes storyFlicker{0%,100%{opacity:1;}45%{opacity:0.6;}50%{opacity:1;}55%{opacity:0.7;}60%{opacity:1;}}
.item-text{font-size:13px;color:#fff;}
.item-check{
  width:22px;height:22px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.4);
  background:transparent;
  cursor:pointer;
  flex-shrink:0;
  position:relative;
}
.item-check::before{content:'';position:absolute;inset:-11px;}
.item-check.checked{
  background:rgba(255,255,255,0.3);
  border-color:rgba(255,255,255,0.6);
}
.widget-add-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 2px 2px;
  font-size:13px;
  color:rgba(255,255,255,0.55);
}
.widget-add-btn{
  background:transparent;
  border:none;
  color:rgba(255,255,255,0.4);
  font-size:16px;
  cursor:pointer;
  padding:2px;
}
.widget-label{
  text-align:center;
  font-size:11px;
  color:rgba(255,255,255,0.55);
  margin-top:8px;
  letter-spacing:0.05em;
}
/* dock */
.dock{
  position:relative;z-index:2;
  display:flex;
  justify-content:center;
  gap:24px;
  padding:16px 20px 36px;  /* extra bottom for home indicator */
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,0.08);
  margin-top:auto;
}
.dock-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;

/* Top-screen transient notification used for motion and message proofs */
.motion-notif{
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%) translateY(-120%);
  min-width:280px;
  max-width:88vw;
  background:rgba(18,18,28,0.96);
  border:1px solid rgba(77,255,240,0.35);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  z-index:260;
  box-shadow:0 6px 18px rgba(0,0,0,0.6);
  opacity:0;
  transition:transform 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.35s ease;
  pointer-events:none;
  font-size:13px;
}
.motion-notif.show{ transform:translateX(-50%) translateY(6px); opacity:1; pointer-events:auto; cursor:pointer; }
.motion-notif .mn-row{ display:flex; justify-content:space-between; margin-bottom:6px; color:var(--text-dim); font-size:11px; }
.motion-notif .mn-app{ font-weight:600; color:var(--cyan); }
.motion-notif .mn-body{ color:var(--text); font-size:13px; }
.motion-notif.warn-cyan{
  box-shadow:0 6px 18px rgba(0,0,0,0.6), 0 0 24px rgba(77,255,240,0.3), 0 0 8px rgba(77,255,240,0.15);
}
.motion-notif.warn-cyan .mn-body{ color:var(--cyan); }
  cursor:pointer;
}
.dock-icon{
  position:relative;
  width:60px;height:60px;
}
.dock-icon svg{width:100%;height:100%;}
.dock-badge{
  position:absolute;
  top:-4px;right:-4px;
  background:var(--red);
  color:#fff;
  font-size:10px;
  font-family:'DM Mono',monospace;
  width:18px;height:18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dock-label{
  font-size:11px;
  color:rgba(255,255,255,0.6);
  letter-spacing:0.02em;
}
.home-swipe-bar{
  width:36px;height:4px;
  background:rgba(255,255,255,0.3);
  border-radius:2px;
  margin:0 auto 20px;  /* clear home indicator */
  position:relative;z-index:2;
}

/* ── REMINDERS SCREEN ────────────────────── */
#reminders-screen{
  position:absolute;inset:0;
  z-index:49;
  background:var(--surface-screen);
  transform:translateX(100%);
  transition:transform 0.35s cubic-bezier(0.22,1,0.36,1);
  display:flex;
  flex-direction:column;
}
#reminders-screen.on{transform:translateX(0);}
.reminders-full{
  flex:1;
  overflow-y:auto;
  padding:0 20px 30px;
}
.reminders-title{
  font-family:'Syne',sans-serif;
  font-weight:800;
  font-size:32px;
  letter-spacing:0.11em;
  color:#fff;
  margin-bottom:20px;
}
.reminders-list{display:flex;flex-direction:column;gap:2px;}
.reminder-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 4px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.rem-check{
  width:22px;height:22px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.4);
  background:transparent;
  cursor:pointer;
  flex-shrink:0;
  position:relative;
}
.rem-check::before{content:'';position:absolute;inset:-11px;}
.rem-check.checked{background:rgba(255,255,255,0.3);}
.rem-text{font-size:14px;color:#fff;}
.rem-text.story{
  color:var(--cyan);
  animation:storyFlicker 3s ease-in-out infinite;
}
.rem-add-btn{
  margin-top:20px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;
  color:rgba(255,255,255,0.5);
  font-family:'DM Mono',monospace;
  font-size:13px;
  padding:14px;
  width:100%;
  cursor:pointer;
  text-align:left;
}

/* ── CAMERA SCREEN ───────────────────────── */
#camera-screen{
  position:absolute;inset:0;
  z-index:49;
  background:var(--surface-alt,#0c0c14);
  transform:translateX(100%);
  transition:transform 0.35s cubic-bezier(0.22,1,0.36,1);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#camera-screen.on{transform:translateX(0);}
.camera-content{
  flex:1;
  overflow-y:auto;
  padding:0 16px 30px;
}
.camera-title{
  font-family:'Syne',sans-serif;
  font-weight:800;
  font-size:30px;
  letter-spacing:0.11em;
  color:rgba(160,150,220,0.9);
  margin-bottom:16px;
}
.cam-feed{
  border-radius:14px;
  overflow:hidden;
  margin-bottom:14px;
  background:#08080f;
  cursor:pointer;
}
.cam-feed.active-cam{
  border:1.5px solid var(--cyan);
}
/* ── FULLSCREEN CAMERA ────────────────────── */
.cam-feed.cam-fullscreen{
  position:fixed;
  inset:0;
  z-index:500;
  margin:0;
  border-radius:0;
  border:none;
  box-shadow:none;
  display:flex;
  flex-direction:column;
  background:#000;
}
.cam-feed.cam-fullscreen .cam-label-row{
  padding:50px 16px 8px;
  background:#000;
}
.cam-feed.cam-fullscreen .cam-view{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}
.cam-feed.cam-fullscreen .cam-view svg{
  width:100%;
  height:100%;
  object-fit:contain;
}
.cam-fs-back{
  position:absolute;
  top:14px;
  left:12px;
  z-index:501;
  background:none;
  border:none;
  color:var(--cyan);
  font-size:22px;
  font-family:'DM Mono',monospace;
  cursor:pointer;
  padding:4px 10px;
  display:none;
}
.cam-feed.cam-fullscreen .cam-fs-back{
  display:block;
}
.cam-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px 6px;
}
.cam-name{
  font-family:'DM Mono',monospace;
  font-size:14px;
  color:#fff;
  font-weight:400;
}
.cam-status{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  color:#fff;
  font-family:'DM Mono',monospace;
  font-weight:300;
}
.live-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:#4eff7a;
  animation:livePulse 2s ease-in-out infinite;
}
@keyframes livePulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
.offline-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:#555;
}
.cam-view svg{display:block;width:100%;}

/* ── MESSAGES LIST ───────────────────────── */
#messages-list-screen{
  position:absolute;inset:0;
  z-index:45;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  transform:translateX(-100%);
  pointer-events:none;
  overflow:hidden;  /* prevent #contact-convo from leaking out when parent is off-screen */
  /* No base transition — JS applies transitions inline per-action */
}
#messages-list-screen.on{
  transform:translateX(0);
  pointer-events:all;
}
.messages-list-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 16px 12px;
  border-bottom:1px solid var(--border);
}
.messages-list-header h2{
  font-family:'Syne',sans-serif;
  font-weight:800;
  font-size:18px;
  letter-spacing:0.11em;
  color:var(--text);
}
.contacts-list{flex:1;overflow-y:auto;}
.contact-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  position:relative;
}
.contact-row:active{background:rgba(255,255,255,0.03);}
.contact-avi{
  width:42px;height:42px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:var(--text-dim);
  flex-shrink:0;
  font-family:'DM Mono',monospace;
}
.unknown-avi{
  background:var(--surface);
  border-color:var(--cyan);
  color:var(--cyan);
}
.contact-avi.small{width:30px;height:30px;font-size:11px;}
.contact-details{flex:1;min-width:0;}
.contact-row-top{
  display:flex;
  justify-content:space-between;
  margin-bottom:3px;
}
.contact-row-name{
  font-size:14px;
  color:var(--text);
  font-weight:400;
}
.contact-row.unread .contact-row-name{font-weight:500;}
.contact-row-time{
  font-size:11px;
  color:var(--text-dim);
  font-weight:300;
}
.contact-row-preview{
  font-size:12px;
  color:var(--text-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:300;
}
.unread-dot{
  width:9px;height:9px;
  border-radius:50%;
  background:var(--cyan);
  flex-shrink:0;
}
/* contact convo nested */
#contact-convo{
  position:absolute;inset:0;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
#contact-convo.on{transform:translateX(0);}

/* ── CHAT SCREEN ─────────────────────────── */
#chat-screen{
  position:absolute;inset:0;
  z-index:40;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  transform:translateX(0);
  /* No base transition — JS applies transitions inline per-action */
}
#chat-screen.off-right{transform:translateX(100%);}

/* chat header */
.chat-header{
  background:var(--surface-alt,#0E0E18);
  border-bottom:1px solid var(--border);
  padding:8px 16px 14px;
  min-height:90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0;
  position:relative;
}
.chat-header-center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  pointer-events:none;
}
.unknown-avi-large{
  width:44px;height:44px;
  border-radius:50%;
  background:var(--surface);
  border:1.5px solid var(--text-dim);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  color:var(--text-dim);
}
.contact-name-header{
  font-family:'DM Mono',monospace;
  font-size:13px;
  color:var(--text);
  font-weight:400;
}
.contact-sub{
  font-size:11px;
  color:var(--text-dim);
  font-weight:300;
}
.back-btn{
  background:transparent;
  border:none;
  color:var(--cyan);
  font-family:'DM Mono',monospace;
  font-size:14px;
  cursor:pointer;
  padding:4px 0;
  letter-spacing:-0.02em;
  white-space:nowrap;
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.back-btn.dim{color:var(--text-dim);}
.screen-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 16px 12px;
}
.loop-wordmark{
  font-family:'Syne',sans-serif;
  font-weight:800;
  font-size:14px;
  letter-spacing:0.11em;
  color:var(--cyan);
}

/* messages area */
.messages-area{
  flex:1;
  overflow-y:auto;
  padding:16px 16px 64px;
  display:flex;
  flex-direction:column;
  scroll-behavior:smooth;
}
.messages-area::-webkit-scrollbar{width:0;}

/* clusters — 23px between different senders, 6px same */
.msg-cluster{
  display:flex;
  flex-direction:column;
  margin-bottom:23px;
}
.msg-cluster.you{align-items:flex-end;}
.msg-cluster.them{align-items:flex-start;}
.msg-cluster + .msg-cluster.you.consecutive,
.msg-cluster + .msg-cluster.them.consecutive{margin-bottom:6px;}

.bubble{
  max-width:75%;
  padding:9px 13px;
  font-size:14px;
  line-height:1.5;
  letter-spacing:-0.04em;
  animation:bubbleIn 0.25s ease forwards;
  opacity:0;
}
@keyframes bubbleIn{
  from{opacity:0;transform:translateY(5px);}
  to{opacity:1;transform:translateY(0);}
}
/* exact border-radius from spec */
.bubble.them{
  background:var(--bubble-them);
  border-radius:4px 15px 15px 4px;
  color:var(--text-them);
}
.bubble.you{
  background:var(--bubble-you);
  border-radius:15px 4px 4px 15px;
  color:var(--text);
}
/* same-sender consecutive: adjust corner */
.bubble.them.tail-off{border-radius:4px 15px 15px 15px;}
.bubble.you.tail-off{border-radius:15px 4px 15px 15px;}
.bubble.them.tail-off:last-child{border-radius:4px 15px 15px 4px;}
.bubble.you.tail-off:last-child{border-radius:15px 4px 4px 15px;}

.bubble.intrusion{
  background:transparent;
  border:1px solid var(--cyan);
  color:var(--cyan);
  border-radius:4px 15px 15px 4px;
}

.timestamp{
  font-size:11px;
  color:var(--text-dim);
  font-weight:300;
  text-align:center;
  width:100%;
  margin:8px 0 4px;
  letter-spacing:0;
}
.delivered{
  font-size:11px; /* 2pts smaller than timestamp */
  color:var(--text-dim);
  font-weight:300;
  margin-top:3px;
  letter-spacing:0;
}
.msg-cluster.you .delivered{text-align:right;}

/* typing */
.typing-indicator{
  padding:0 16px 10px;
  display:none;
}
.typing-indicator.active{display:block;}
.typing-bubble{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:var(--bubble-them);
  padding:10px 14px;
  border-radius:4px 15px 15px 4px;
}
.typing-bubble span{
  width:5px;height:5px;
  border-radius:50%;
  background:var(--text-dim);
  animation:typingDot 1.3s ease-in-out infinite;
}
.typing-bubble span:nth-child(2){animation-delay:0.2s;}
.typing-bubble span:nth-child(3){animation-delay:0.4s;}
@keyframes typingDot{
  0%,60%,100%{transform:translateY(0);opacity:0.4;}
  30%{transform:translateY(-5px);opacity:1;}
}

/* input */
.input-area{
  background:var(--surface-alt,#0E0E18);
  border-top:1px solid var(--border);
  padding:10px 16px 28px;  /* extra bottom for home indicator */
  display:flex;
  gap:10px;
  align-items:center;
  flex-shrink:0;
}
.input-area input{
  flex:1;
  background:var(--surface);
  border:none;
  border-radius:20px;
  padding:10px 16px;
  color:var(--text);
  font-family:'DM Mono',monospace;
  font-size:14px;
  letter-spacing:-0.04em;
  outline:none;
}
.input-area input:focus-visible{outline:1.5px solid var(--cyan);outline-offset:2px;}
.input-area input::placeholder{color:var(--text-dim);font-weight:300;}
.input-area button{
  width:44px;height:44px;
  border-radius:50%;
  background:var(--surface);
  border:none;
  color:var(--cyan);
  font-size:16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

/* ── ENDING OVERLAY ──────────────────────── */
#ending-overlay{
  position:absolute;inset:0;
  z-index:200;
  background:rgba(6,6,10,0.96);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.8s ease;
}
#ending-overlay.active{
  opacity:1;
  pointer-events:all;
}
.ending-card{
  max-width:340px;
  width:88%;
  text-align:center;
  padding:40px 32px;
  border:1px solid var(--border);
  background:var(--surface);
  animation:cardIn 0.5s 0.3s ease both;
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}
.ending-eyebrow{
  font-family:'Syne',sans-serif;
  font-weight:800;
  font-size:11px;
  letter-spacing:0.11em;
  color:var(--text-dim);
  margin-bottom:16px;
}
.ending-title{
  font-family:'Syne',sans-serif;
  font-weight:800;
  font-size:22px;
  letter-spacing:0.11em;
  color:var(--text);
  margin-bottom:16px;
  line-height:1.3;
}
.ending-body{
  font-size:12px;
  color:var(--text-dim);
  line-height:1.9;
  font-weight:300;
  margin-bottom:28px;
}
.ending-restart{
  background:transparent;
  border:1px solid var(--text-dim);
  color:var(--text);
  font-family:'DM Mono',monospace;
  font-size:12px;
  letter-spacing:0.08em;
  padding:10px 24px;
  cursor:pointer;
  transition:border-color 0.2s;
}
.ending-restart:hover{border-color:var(--cyan);color:var(--cyan);}

/* ── REMINDER SHEET ──────────────────────── */
#reminder-sheet{
  position:absolute;
  bottom:0;left:0;right:0;
  z-index:300;
  background:var(--surface);
  border-radius:18px 18px 0 0;
  border-top:1px solid var(--border);
  padding:12px 20px 36px;
  transform:translateY(100%);
  transition:transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
#reminder-sheet.open{transform:translateY(0);}
.sheet-handle{
  width:36px;height:4px;
  background:var(--border);
  border-radius:2px;
  margin:0 auto 16px;
}
.sheet-content{display:flex;flex-direction:column;gap:10px;}
.sheet-content input{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 14px;
  color:var(--text);
  font-family:'DM Mono',monospace;
  font-size:14px;
  letter-spacing:-0.04em;
  outline:none;
}
.sheet-content input:focus{border-color:var(--cyan);}
.sheet-content input:focus-visible{outline:1.5px solid var(--cyan);outline-offset:2px;}
.sheet-content button{
  padding:12px;
  border-radius:10px;
  border:none;
  font-family:'DM Mono',monospace;
  font-size:13px;
  cursor:pointer;
}
button:focus-visible{outline:1.5px solid var(--cyan);outline-offset:2px;}
.sheet-content .add-btn{background:var(--cyan);color:#000;}
.sheet-content .cancel-btn{background:transparent;color:var(--text-dim);border:1px solid var(--border);}

/* ── GLITCH STATES ───────────────────────── */
@keyframes redFlash{0%,100%{background:transparent;}50%{background:var(--red-dim);}}
.red-flash{animation:redFlash 0.25s ease 4;}
@keyframes glitchShake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-3px);}
  40%{transform:translateX(3px);}
  60%{transform:translateX(-2px);}
  80%{transform:translateX(2px);}
}
.glitch-shake{animation:glitchShake 0.3s ease;}

/* ambient glitch — cyan flash on bubbles */
@keyframes bubbleCyanPulse{
  0%,100%{box-shadow:none;}
  50%{box-shadow:0 0 12px rgba(77,255,240,0.15);}
}
/* status bar flicker */
@keyframes statusFlicker{
  0%,100%{opacity:1;}
  25%{opacity:0;}
  50%{opacity:0.7;}
  75%{opacity:0;}
}
.status-flicker{animation:statusFlicker 0.3s steps(1);}

/* ── HOME BAR TAP TARGET ────────────────── */
#home-bar{
  position:absolute;
  bottom:8px;
  left:50%;
  transform:translateX(-50%);
  width:140px;
  height:8px;
  border-radius:4px;
  background:rgba(255,255,255,0.25);
  z-index:100;
  cursor:pointer;
  transition:background 0.2s ease, box-shadow 0.2s ease;
}
#home-bar:hover{
  background:rgba(77,255,240,0.4);
  box-shadow:0 0 10px rgba(77,255,240,0.2), 0 0 3px rgba(77,255,240,0.3);
}
#home-bar:active{
  background:rgba(77,255,240,0.6);
  box-shadow:0 0 14px rgba(77,255,240,0.3);
}
#home-bar.hint-pulse{
  animation:homeBarPulse 1.8s ease-in-out 3;
}
@keyframes homeBarPulse{
  0%,100%{background:rgba(255,255,255,0.25);box-shadow:none;}
  50%{background:rgba(77,255,240,0.35);box-shadow:0 0 10px rgba(77,255,240,0.2);}
}

/* ── CAMERA HORROR — ENDING C ───────────── */
.cam-horror .camera-content{
  animation:camShake 0.12s linear infinite;
}
@keyframes camShake{
  0%,100%{transform:translate(0,0);}
  20%{transform:translate(-3px,1px);}
  40%{transform:translate(2px,-2px);}
  60%{transform:translate(-1px,2px);}
  80%{transform:translate(3px,-1px);}
}
.cam-feed-glitch{
  animation:feedFlicker 0.4s steps(2) infinite;
}
@keyframes feedFlicker{
  0%,100%{opacity:1;}
  50%{opacity:0.35;}
}
/* red phase */
.cam-horror-red::after{
  content:'';
  position:absolute;inset:0;
  background:var(--red);
  opacity:0;
  animation:redPulse 0.4s ease infinite;
  pointer-events:none;
  z-index:1;
}
@keyframes redPulse{
  0%,100%{opacity:0;}
  50%{opacity:0.12;}
}
.cam-horror-red .cam-feed{
  border:1px solid var(--red);
  box-shadow:0 0 18px rgba(255,59,92,0.25);
}
.cam-horror-red .cam-name,
.cam-horror-red .camera-title{color:var(--red)!important;}
.cam-horror-red .cam-status{color:var(--red)!important;}
.cam-horror-red .live-dot{background:var(--red)!important;}
/* intense phase */
.cam-horror-intense .cam-feed-glitch{
  animation:feedFlickerHard 0.08s steps(2) infinite;
}
@keyframes feedFlickerHard{
  0%{opacity:1;filter:none;}
  25%{opacity:0;filter:brightness(3);}
  50%{opacity:0.7;filter:hue-rotate(180deg) saturate(3);}
  75%{opacity:0.05;}
  100%{opacity:1;}
}
.cam-horror-intense .camera-content{
  animation:camShake 0.06s linear infinite;
}
/* blackout phase */
.cam-horror-blackout .camera-content{
  animation:camBlackout 0.8s ease forwards;
}
@keyframes camBlackout{
  0%{opacity:1;filter:none;}
  40%{opacity:0.6;filter:brightness(2.5) contrast(3);}
  100%{opacity:0;filter:brightness(0);}
}

/* ── SURVEILLANCE NOTIFICATION ──────────── */
#surveillance-notif{
  position:absolute;
  top:0;left:0;right:0;
  z-index:300;
  padding:10px 14px;
  transform:translateY(-110%);
  transition:transform 340ms cubic-bezier(0.22,1,0.36,1);
  pointer-events:auto; /* allow clicking to jump to Unknown chat */
  cursor:pointer;
}
#surveillance-notif.visible{
  transform:translateY(0);
}
#surv-notif-inner{
  background:rgba(14,14,24,0.92);
  backdrop-filter:blur(28px) saturate(1.5);
  -webkit-backdrop-filter:blur(28px) saturate(1.5);
  border:0.5px solid rgba(255,255,255,0.1);
  border-radius:14px;
  padding:10px 14px 11px;
}
#surv-notif-row{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:5px;
}
#surv-notif-icon{
  width:20px;height:20px;
  border-radius:5px;
  background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
#surv-notif-app{
  flex:1;
  font-family:'DM Mono',monospace;
  font-size:11px;
  font-weight:400;
  color:var(--text-dim);
  letter-spacing:0.06em;
}
#surv-notif-time{
  font-family:'DM Mono',monospace;
  font-size:10px;
  font-weight:300;
  color:var(--text-dim);
}
#surv-notif-body{
  font-family:'DM Mono',monospace;
  font-size:13px;
  font-weight:300;
  line-height:1.4;
  letter-spacing:-0.01em;
}
#surv-notif-sender{
  color:var(--cyan);
  font-weight:500;
  margin-right:4px;
}
#surv-notif-msg{
  color:var(--text);
}

/* sustained red flash for reminder ending */
.red-flash-loop{
  animation:redFlashLoop 0.35s ease infinite;
}
@keyframes redFlashLoop{
  0%,100%{background:transparent;}
  50%{background:rgba(255,59,92,0.12);}
}

/* ── CSS SMASH SHAKE — replaces JS setInterval ── */
@keyframes smashShakeCSS{
  0%  {transform:translate(0,0);}
  10% {transform:translate(-5px,2px);}
  22% {transform:translate(5px,-3px);}
  33% {transform:translate(-4px,4px);}
  44% {transform:translate(5px,-2px);}
  55% {transform:translate(-4px,3px);}
  66% {transform:translate(4px,-4px);}
  77% {transform:translate(-3px,2px);}
  88% {transform:translate(2px,-2px);}
  100%{transform:translate(0,0);}
}
#phone-frame.smash-shake{
  animation:smashShakeCSS 0.56s cubic-bezier(0.22,1,0.36,1);
}

/* ── CRASH EFFECTS — ENDING B ───────────── */
#phone-frame.crash-blackout>*:not(.scanlines):not(#ending-overlay){
  opacity:0!important;
  transition:opacity 0.3s ease;
}
#phone-frame.crash-blackout{
  background:#000;
}
#phone-frame.crash-flicker>*:not(.scanlines):not(#ending-overlay){
  animation:crashFlicker 0.12s steps(2) infinite;
}
@keyframes crashFlicker{
  0%{opacity:1;filter:none;}
  25%{opacity:0.1;filter:brightness(3);}
  50%{opacity:0.8;filter:hue-rotate(180deg);}
  75%{opacity:0.05;}
  100%{opacity:1;}
}

/* ── REDUCED MOTION ──────────────────────── */
@media(prefers-reduced-motion:reduce){
  .glitch-shake,
  .cam-horror .camera-content,
  .cam-horror-intense .camera-content,
  .cam-feed-glitch,
  #phone-frame.smash-shake,
  .cam-horror-blackout .camera-content{
    animation:none!important;
  }
  .screen,
  #lock-screen,
  #home-screen,
  #reminders-screen,
  #camera-screen,
  #messages-list-screen,
  #contact-convo,
  #chat-screen,
  #reminder-sheet,
  #surveillance-notif{
    transition-duration:0.01ms!important;
  }
}