/* ============================================================
   adaptive.css  —  loaded LAST, after styles.css
   ------------------------------------------------------------
   One app, two shapes.

     data-layout="desktop"  → WhatsApp-Web split view.
                              Sidebar + chat live side by side.
     data-layout="mobile"   → one screen at a time, notch-safe,
                              keyboard-aware, thumb-reachable.

   Nothing here changes what she says. Layout, motion and touch
   only. Palette tokens are inherited from the WhatsApp block.
   ============================================================ */

:root{
  /* real safe areas, all four sides */
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --sa-r: env(safe-area-inset-right, 0px);

  /* on-screen keyboard height, written by layout.js */
  --kb: 0px;
  /* usable viewport height, written by layout.js (visualViewport aware) */
  --vh: 100dvh;

  --side-w: clamp(300px, 30vw, 400px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   1. THE SHELL  —  the thing that makes two layouts possible
   ============================================================ */

/* Mobile: the shell is invisible. Children behave exactly as before,
   so every `.screen.active` rule in styles.css still applies. */
.shell{ display:contents; }

.pane-empty{ display:none; }

/* ---------- DESKTOP ---------- */
html[data-layout="desktop"] body{ background:#0A1014; }

html[data-layout="desktop"] .shell.on{
  display:grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  height:100dvh;
  width:100%;
  max-width:1680px;
  margin:0 auto;
  background:var(--wa-bg);
  position:relative;
  z-index:1;
}

/* both panes on screen at once — `.active` no longer gates visibility */
html[data-layout="desktop"] .shell.on > #chatlist,
html[data-layout="desktop"] .shell.on > #app{
  display:flex !important;
  flex-direction:column;
  height:100%;
  min-height:0;
  min-width:0;
}

html[data-layout="desktop"] .shell.on > #chatlist{
  border-right:1px solid var(--wa-line);
  background:var(--wa-panel);
}

/* breathing room on genuinely large monitors */
@media (min-width:1500px){
  html[data-layout="desktop"] .shell.on{
    height:calc(100dvh - 38px);
    margin:19px auto;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 30px 90px -30px rgba(0,0,0,.85);
  }
}

/* the back arrow is meaningless when both panes are visible */
html[data-layout="desktop"] #app .backbtn{ display:none !important; }

/* empty-right-pane state, before a chat is picked */
html[data-layout="desktop"] .shell.on.no-chat > #app{ display:none !important; }
html[data-layout="desktop"] .shell.on.no-chat > .pane-empty{
  display:grid;
  place-items:center;
  text-align:center;
  padding:40px;
  background:var(--wa-bg);
  border-left:1px solid var(--wa-line);
}
.pane-empty .pe-orb{
  width:106px; height:106px; border-radius:50%; margin:0 auto 22px;
  background:radial-gradient(circle at 36% 30%, rgba(255,255,255,.22), transparent 52%), var(--wa-green-d);
  box-shadow:0 0 60px -12px var(--wa-green);
  animation:peBreathe 5s ease-in-out infinite;
}
@keyframes peBreathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.pane-empty h2{
  font-family:var(--sans); font-weight:300; font-size:30px;
  color:var(--wa-text); margin:0 0 10px; letter-spacing:.2px;
}
.pane-empty p{ color:var(--wa-dim); font-size:14px; max-width:420px; margin:0 auto; line-height:1.6; }
.pane-empty .pe-rule{
  width:220px; height:1px; background:var(--wa-line); margin:30px auto 0;
}

/* ---------- desktop sidebar polish ---------- */
html[data-layout="desktop"] .cl-topbar{ padding:18px 18px 16px; }
html[data-layout="desktop"] .cl-row{ padding:12px 16px; border-radius:0; }
html[data-layout="desktop"] .cl-row:hover{ background:rgba(255,255,255,.035); }
html[data-layout="desktop"] .cl-row.current{ background:var(--wa-panel-2); }
html[data-layout="desktop"] .cl-row.current::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--wa-green);
}

/* selection marker is noise on mobile where only one pane exists */
html[data-layout="mobile"] .cl-row.current{ background:transparent; }

/* ---------- desktop chat pane ---------- */
html[data-layout="desktop"] .chat{ padding-left:8%; padding-right:8%; }
html[data-layout="desktop"] .row{ max-width:min(66%, 640px); }
html[data-layout="desktop"] .topbar,
html[data-layout="desktop"] .moods,
html[data-layout="desktop"] .quick,
html[data-layout="desktop"] .composer{
  padding-left:18px !important;
  padding-right:18px !important;
}
html[data-layout="desktop"] .topbar{ padding-top:12px !important; padding-bottom:12px !important; }
html[data-layout="desktop"] .composer{ padding-bottom:12px !important; }

/* a real scrollbar on desktop — an invisible one is worse than none */
html[data-layout="desktop"] .chat::-webkit-scrollbar,
html[data-layout="desktop"] .cl-list::-webkit-scrollbar{ width:8px; }
html[data-layout="desktop"] .chat::-webkit-scrollbar-thumb,
html[data-layout="desktop"] .cl-list::-webkit-scrollbar-thumb{
  background:rgba(134,150,160,.28); border-radius:4px;
}
html[data-layout="desktop"] .chat:hover::-webkit-scrollbar-thumb,
html[data-layout="desktop"] .cl-list:hover::-webkit-scrollbar-thumb{
  background:rgba(134,150,160,.45);
}

/* the auth screens get a card on desktop instead of a bare column */
html[data-layout="desktop"] #login.active .lock,
html[data-layout="desktop"] #age-gate.active .stack{
  background:var(--wa-panel);
  border:1px solid var(--wa-line);
  border-radius:16px;
  padding:36px 32px 32px;
  max-width:390px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
  animation:cardIn .4s var(--ease-out);
}
@keyframes cardIn{ from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none} }

/* ============================================================
   2. MOBILE  —  notch, gesture bar, keyboard
   ============================================================ */

html[data-layout="mobile"] .screen{ height:var(--vh); }

/* the top bars sit under the notch, not behind it */
html[data-layout="mobile"] .topbar{
  padding-top:calc(10px + var(--sa-t)) !important;
  padding-left:calc(14px + var(--sa-l)) !important;
  padding-right:calc(14px + var(--sa-r)) !important;
}
html[data-layout="mobile"] .cl-topbar{
  padding-top:calc(14px + var(--sa-t)) !important;
  padding-left:calc(16px + var(--sa-l)) !important;
  padding-right:calc(16px + var(--sa-r)) !important;
}

/* the composer clears the home-indicator, and rides above the keyboard */
html[data-layout="mobile"] .composer{
  padding-bottom:calc(9px + var(--sa-b)) !important;
  padding-left:calc(12px + var(--sa-l)) !important;
  padding-right:calc(12px + var(--sa-r)) !important;
  transition:padding-bottom .18s ease;
}
html[data-layout="mobile"].kb-open .composer{
  padding-bottom:9px !important;   /* the keyboard replaces the gesture bar */
}
html[data-layout="mobile"].kb-open .moods{ display:none; }  /* reclaim a row */
html[data-layout="mobile"].kb-open .quick{ display:none; }

html[data-layout="mobile"] .moods,
html[data-layout="mobile"] .quick,
html[data-layout="mobile"] .chat{
  padding-left:calc(12px + var(--sa-l));
  padding-right:calc(12px + var(--sa-r));
}
html[data-layout="mobile"] .chat{ padding-left:5%; padding-right:5%; }

/* landscape notch on the side */
@media (orientation:landscape){
  html[data-layout="mobile"] .cl-list{ padding-left:var(--sa-l); }
}

/* thumb-sized targets — 44px is the floor, not a suggestion */
html[data-layout="mobile"] .ibtn{ width:40px; height:40px; }
html[data-layout="mobile"] .cbtn{ width:44px; height:44px; }
html[data-layout="mobile"] .cbtn.send{ width:46px; height:46px; }
html[data-layout="mobile"] .chip{ padding:9px 16px; font-size:13px; }
html[data-layout="mobile"] .cl-row{ padding:13px 16px; }
html[data-layout="mobile"] .cl-av{ width:52px; height:52px; font-size:25px; }

/* jump-to-latest sits above the composer, wherever that ends up */
html[data-layout="mobile"] .jump{
  right:14px;
  bottom:calc(122px + var(--sa-b));
}
html[data-layout="mobile"].kb-open .jump{ bottom:96px; }

/* nothing rubber-bands the page itself */
html[data-layout="mobile"] body{ position:fixed; inset:0; width:100%; }

/* sheets go full-height on a phone and get a drag grip that reads as one */
html[data-layout="mobile"] .sheet{
  max-height:calc(var(--vh) - var(--sa-t) - 8px);
  border-radius:18px 18px 0 0;
  padding-bottom:var(--sa-b);
}
html[data-layout="mobile"] .grip{ width:38px; height:4px; border-radius:4px; }

/* ============================================================
   3. MOTION  —  one system, not scattered effects
   ------------------------------------------------------------
   Three families: panes slide, rows land, controls answer touch.
   Everything is short. Nothing loops except a live indicator.
   ============================================================ */

/* --- panes --- */
html[data-layout="mobile"] #app.active{
  animation:paneIn .26s var(--ease-out);
}
html[data-layout="mobile"] #chatlist.active{
  animation:paneBack .26s var(--ease-out);
}
@keyframes paneIn  { from{opacity:.4; transform:translateX(22px)} to{opacity:1; transform:none} }
@keyframes paneBack{ from{opacity:.4; transform:translateX(-18px)} to{opacity:1; transform:none} }

/* on desktop nothing slides — the panes never move */
html[data-layout="desktop"] #app.active,
html[data-layout="desktop"] #chatlist.active{ animation:none; }

/* --- the chat pane swaps content, so cross-fade it --- */
#app.swapping .chat{ animation:chatSwap .3s var(--ease-out); }
@keyframes chatSwap{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* --- rows: keep the existing WA pop, just calm the travel --- */
.row.me{ animation:landRight .24s var(--ease) !important; }
.row.her{ animation:landLeft .26s var(--ease) !important; }
@keyframes landRight{ from{opacity:0; transform:translate(10px,4px) scale(.985)} to{opacity:1; transform:none} }
@keyframes landLeft { from{opacity:0; transform:translate(-10px,4px) scale(.985)} to{opacity:1; transform:none} }

/* bulk-rendered history must not animate 50 rows at once */
.row.bulk, .chat.loading .row{ animation:none !important; }

/* --- typing indicator: gentler, and it breathes --- */
.typing{ animation:landLeft .24s var(--ease) !important; }
.typing i{ animation:dot 1.25s ease-in-out infinite !important; }
@keyframes dot{ 0%,65%,100%{transform:translateY(0); opacity:.35} 32%{transform:translateY(-5px); opacity:.95} }

/* --- sidebar rows stagger in, then never again --- */
.cl-list.first-paint .cl-row{ animation:rowIn .34s var(--ease-out) backwards; }
.cl-list.first-paint .cl-row:nth-child(1){ animation-delay:.03s }
.cl-list.first-paint .cl-row:nth-child(2){ animation-delay:.09s }
.cl-list.first-paint .cl-row:nth-child(3){ animation-delay:.15s }
.cl-list.first-paint .cl-row:nth-child(4){ animation-delay:.21s }
@keyframes rowIn{ from{opacity:0; transform:translateX(-10px)} to{opacity:1; transform:none} }
.cl-list:not(.first-paint) .cl-row{ animation:none; }

/* --- controls answer the touch --- */
.chip:active, .qr:active, .cl-row:active, .key:active, .ibtn:active{ transform:scale(.965); }
.ibtn{ transition:transform .12s var(--ease), background .18s ease, color .18s ease; }
.cbtn.send:active{ transform:scale(.9) !important; }

/* the idle pulse on the send button was constant motion for no reason —
   it now only reacts when there is something to send */
.cbtn.send{ animation:none !important; }
.composer.armed .cbtn.send{
  box-shadow:0 4px 18px -5px rgba(0,168,132,.95) !important;
  transform:scale(1.04);
}

/* mood switch tints the whole room for a beat */
.mood-flash{ animation:moodFlash .55s ease; }
@keyframes moodFlash{
  0%  { box-shadow:inset 0 0 0 0 transparent; }
  35% { box-shadow:inset 0 0 90px -20px var(--glow); }
  100%{ box-shadow:inset 0 0 0 0 transparent; }
}

/* sheets rise instead of appearing */
.sheet-wrap .sheet{ transform:translateY(18px); opacity:.6; transition:transform .28s var(--ease-out), opacity .2s ease; }
.sheet-wrap.open .sheet{ transform:none; opacity:1; }

/* toast */
.toast{ transition:transform .24s var(--ease-out), opacity .2s ease; }

/* --- reduced motion wins over all of it --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ============================================================
   4. LIVE STATUS  —  she knows the time and the weather
   ============================================================ */
.who-status{ display:flex; align-items:center; gap:6px; }
.live-dot{
  width:6px; height:6px; border-radius:50%; background:var(--wa-green);
  flex-shrink:0; animation:livePulse 2.4s ease-in-out infinite;
}
@keyframes livePulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.8)} }
.live-meta{ color:var(--wa-faint); font-size:11.5px; }
html[data-layout="mobile"] .live-meta{ display:none; }  /* no room next to a notch */

/* date divider in the transcript */
.daymark{
  align-self:center; margin:14px auto 10px;
  padding:5px 13px; border-radius:8px;
  font-size:11.5px; font-weight:500; letter-spacing:.3px;
  color:var(--wa-dim); background:rgba(11,20,26,.75);
  backdrop-filter:blur(3px);
}

/* ============================================================
   5. SHARE  —  one tap to hand this to someone
   ============================================================ */
.cl-tools .ibtn.share-btn{ font-size:16px; }
.share-card{
  margin:10px 16px 14px; padding:14px 16px;
  background:var(--wa-panel-2); border:1px solid var(--wa-line);
  border-radius:12px; display:flex; align-items:center; gap:12px;
}
.share-card .sc-text{ flex:1; min-width:0; }
.share-card .sc-title{ font-size:13.5px; color:var(--wa-text); font-weight:500; }
.share-card .sc-sub{ font-size:11.5px; color:var(--wa-dim); margin-top:2px; }
.share-card .mini{ flex-shrink:0; }

/* ============================================================
   6. LIGHT-ROOM  —  respects a phone set to light mode
   Kept deliberately close to WhatsApp light so nothing else breaks.
   ============================================================ */
@media (prefers-color-scheme:light){
  html[data-theme="auto"]{
    --wa-bg:      #EFE7DE;
    --wa-panel:   #F0F2F5;
    --wa-panel-2: #FFFFFF;
    --wa-sent:    #D9FDD3;
    --wa-sent-2:  #D1F7C9;
    --wa-text:    #111B21;
    --wa-dim:     #667781;
    --wa-faint:   #8696A0;
    --wa-line:    #E1E4E6;
  }
  html[data-theme="auto"] .row.me .bubble{ color:#111B21 !important; }
  html[data-theme="auto"] .row.me .bubble::after{ background:var(--wa-sent); }
  html[data-theme="auto"] .row.her .bubble::before{ background:var(--wa-panel-2); }
  html[data-theme="auto"] .whisper, html[data-theme="auto"] .earlier,
  html[data-theme="auto"] .daymark{
    background:rgba(255,255,255,.85) !important; color:#54656F !important;
  }
  html[data-theme="auto"] .field textarea{ color:#111B21; }
  html[data-theme="auto"] .backbtn{ color:#54656F; }
}

/* ============================================================
   7. INSTALLED / STANDALONE
   ============================================================ */
@media (display-mode:standalone){
  html[data-layout="mobile"] .cl-topbar{ padding-top:calc(18px + var(--sa-t)) !important; }
}