/* Generated by scripts/build-client.mjs. Edit client/grandma-mode/*.css instead. */

/* ---- client/grandma-mode/base.css ---- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

:root{--grandma-ink:#2d174e;--grandma-purple:#704bb5;--grandma-purple-soft:#bba6df;--grandma-orange:#ff870d;--grandma-cream:#fff6e9}.grandma-shell{min-height:var(--app-viewport-height,100dvh);padding:max(20px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));background:radial-gradient(circle at 20% 16%,#fffdf7 0 12%,transparent 42%),linear-gradient(135deg,#fff9ef,#fff1dd);color:var(--grandma-ink);font-family:"Nunito",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;display:flex;flex-direction:column;gap:22px;overflow:hidden}.grandma-message-stage{flex:1;min-height:0;display:grid;grid-template-columns:minmax(220px,31%) minmax(0,1fr);gap:28px;align-items:center}.grandma-person-panel{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}.grandma-avatar{width:min(27vw,380px);aspect-ratio:1;border-radius:50%;object-fit:cover;border:10px solid rgba(255,255,255,.72);box-shadow:0 10px 28px rgba(95,57,134,.13)}.grandma-avatar-fallback{display:grid;place-items:center;background:linear-gradient(145deg,#d8c8ee,#fff);font-size:clamp(48px,8vw,100px);font-weight:700}.grandma-person-panel h1{font-size:clamp(48px,7vw,94px);line-height:.96;margin:0;color:#5b36a3}.grandma-play-toggle{min-width:250px;border:3px solid #9f88c8;border-radius:999px;background:rgba(255,255,255,.38);color:#7b61aa;padding:15px 28px;font-family:inherit;font-size:clamp(38px,3.8vw,60px);font-weight:700;line-height:1;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:18px}.grandma-play-toggle svg{width:30px;height:30px}.grandma-message-bubble{position:relative;align-self:stretch;display:flex;align-items:center;padding:clamp(34px,3.3vw,70px);border:3px solid #c2afe6;border-radius:38px;background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(247,243,255,.78));box-shadow:0 12px 30px rgba(87,53,122,.08)}.grandma-message-bubble:before{content:"";position:absolute;left:-28px;top:28%;width:48px;height:48px;background:#fbf9ff;border-left:3px solid #c2afe6;border-bottom:3px solid #c2afe6;transform:rotate(45deg);border-radius:0 0 0 12px}.grandma-message-bubble p{margin:0;font-size:clamp(34px,4.35vw,67px);line-height:1.13;font-weight:600;letter-spacing:.005em;overflow:auto;max-height:100%}.grandma-actions{display:grid;grid-template-columns:minmax(210px,1fr) minmax(360px,1.8fr) minmax(210px,1fr);gap:20px}.grandma-actions button{min-height:106px;border:0;border-radius:48px;color:white;font-family:inherit;font-size:clamp(40px,4.05vw,62px);font-weight:700;line-height:1;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:20px;box-shadow:0 12px 24px rgba(85,46,125,.12)}.grandma-actions svg{width:50px;height:50px}.grandma-nav-button{background:linear-gradient(145deg,#8062bd,#6543a7)}.grandma-reply-button{background:linear-gradient(145deg,#ff9a1e,#ff7900)}.grandma-nav-placeholder{min-height:106px}.grandma-actions button:disabled{opacity:.38;box-shadow:none}.grandma-status,.grandma-error{margin:auto;font-size:clamp(26px,4vw,52px);text-align:center}.grandma-error button{display:block;margin:22px auto 0;border:0;border-radius:24px;padding:18px 28px;font-family:inherit;font-size:24px;font-weight:700}.grandma-recording-screen{align-items:center;justify-content:center}.grandma-record-card{width:min(760px,94vw);padding:clamp(32px,7vw,76px);border-radius:48px;background:rgba(255,255,255,.75);border:3px solid #d0bee9;box-shadow:0 24px 70px rgba(82,43,117,.12);text-align:center}.grandma-record-icon{width:120px;height:120px;margin:0 auto 24px;border-radius:50%;display:grid;place-items:center;background:#fff0df;color:#f07c00}.grandma-record-icon svg{width:68px;height:68px}.grandma-record-card h1{font-size:clamp(38px,6vw,72px);margin:0 0 8px}.grandma-record-time{font-size:clamp(50px,9vw,110px);font-variant-numeric:tabular-nums;font-weight:700}
.grandma-record-background-note{margin:0 0 20px;font-size:clamp(22px,3vw,34px);line-height:1.25;font-weight:700;color:#684b8b}
.grandma-record-actions{display:grid;grid-template-columns:1fr 1.55fr;gap:20px}.grandma-record-actions button{min-height:96px;border:0;border-radius:36px;font-family:inherit;font-size:clamp(38px,4vw,58px);font-weight:700;line-height:1;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:14px}.grandma-record-actions svg{width:42px;height:42px}.grandma-record-cancel{background:#eee6f6;color:#5e477d}.grandma-record-send{background:linear-gradient(145deg,#ff9a1e,#ff7900);color:white;box-shadow:0 12px 26px rgba(230,109,0,.24)}@media(max-width:760px),(orientation:portrait) and (max-width:900px){.grandma-shell{overflow:auto}.grandma-message-stage{grid-template-columns:1fr;align-items:start}.grandma-person-panel{display:grid;grid-template-columns:110px 1fr;gap:12px 18px;text-align:left;width:100%}.grandma-avatar{width:110px;grid-row:1/3}.grandma-person-panel h1{font-size:48px;align-self:end}.grandma-play-toggle{min-width:0;width:max-content;padding:11px 18px;font-size:clamp(34px,6vw,46px)}.grandma-message-bubble{min-height:280px;padding:30px;border-radius:30px}.grandma-message-bubble:before{display:none}.grandma-message-bubble p{font-size:clamp(31px,7vw,52px)}.grandma-actions{grid-template-columns:1fr 1fr}.grandma-reply-button{grid-column:1/-1;grid-row:1}.grandma-actions button{min-height:88px;border-radius:34px;font-size:clamp(34px,6.2vw,48px);gap:12px;padding-inline:16px}.grandma-actions svg{width:44px;height:44px}.grandma-nav-placeholder{min-height:88px}}@media(prefers-reduced-motion:reduce){}

.grandma-person-panel-own{justify-content:center}.grandma-person-panel-own h1{font-size:clamp(42px,6vw,82px)}.grandma-record-recipient{display:flex;align-items:center;justify-content:center;gap:24px;margin:0 auto 28px;text-align:left}.grandma-record-recipient .grandma-avatar{width:112px;border-width:6px;box-shadow:0 8px 22px rgba(95,57,134,.12)}.grandma-record-recipient>div{display:flex;flex-direction:column;gap:5px}.grandma-record-recipient span{font-size:clamp(22px,2.4vw,32px);color:#775f94;font-weight:650}.grandma-record-recipient strong{font-size:clamp(34px,4.2vw,54px);line-height:1;color:#5b36a3}@media(max-width:760px),(orientation:portrait) and (max-width:900px){.grandma-person-panel-own{display:flex;text-align:center}.grandma-record-recipient{gap:16px;margin-bottom:22px}.grandma-record-recipient .grandma-avatar{width:88px}.grandma-record-recipient span{font-size:22px}.grandma-record-recipient strong{font-size:36px}}

/* v400: tablet-first recording layout, larger recipient, calmer live waveform */
.grandma-recording-screen{
  min-height:var(--app-viewport-height,100dvh);
  height:var(--app-viewport-height,100dvh);
  padding-block:clamp(12px,2.4dvh,28px);
}
.grandma-record-card{
  box-sizing:border-box;
  width:min(820px,94vw);
  max-height:calc(var(--app-viewport-height,100dvh) - clamp(24px,4.8dvh,56px));
  padding:clamp(22px,3.6dvh,52px) clamp(26px,5vw,68px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}
.grandma-record-recipient{
  flex-direction:column;
  gap:clamp(10px,1.5dvh,18px);
  margin-bottom:clamp(12px,2dvh,24px);
  text-align:center;
}
.grandma-record-recipient .grandma-avatar{
  width:clamp(104px,15dvh,168px);
}
.grandma-record-recipient strong{
  font-size:clamp(46px,6.2vw,76px);
  line-height:1;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.grandma-record-icon{
  width:clamp(82px,11dvh,120px);
  height:clamp(82px,11dvh,120px);
  margin-bottom:clamp(10px,1.7dvh,20px);
  flex:none;
}
.grandma-record-icon svg{
  width:clamp(48px,6.4dvh,68px);
  height:clamp(48px,6.4dvh,68px);
}
.grandma-record-card h1{
  font-size:clamp(48px,7vw,78px);
  margin-bottom:clamp(2px,.7dvh,8px);
}
.grandma-record-time{
  font-size:clamp(58px,9vw,110px);
  line-height:1;
}


.grandma-record-actions{
  flex:none;
}
@media (max-height:760px){
  .grandma-record-card{padding-block:18px}
  .grandma-record-recipient{flex-direction:row;margin-bottom:10px}
  .grandma-record-recipient .grandma-avatar{width:88px}
  .grandma-record-recipient strong{font-size:44px}
  .grandma-record-icon{width:74px;height:74px;margin-bottom:8px}
  .grandma-record-icon svg{width:44px;height:44px}
  .grandma-record-card h1{font-size:48px}
  .grandma-record-time{font-size:64px}


  .grandma-record-actions button{min-height:82px}
}

/* v402: landscape-tablet recording layout */
@media (orientation:landscape) and (min-width:900px) and (max-height:900px){
  .grandma-recording-screen{
    justify-content:center;
    padding:clamp(10px,2vh,22px) clamp(16px,2vw,30px);
  }
  .grandma-record-card{
    width:min(1220px,96vw);
    height:calc(var(--app-viewport-height,100dvh) - clamp(20px,4vh,44px));
    max-height:none;
    padding:clamp(22px,3vh,34px) clamp(30px,4vw,54px);
    display:grid;
    grid-template-columns:minmax(260px,36%) minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(54px,1fr) auto;
    column-gap:clamp(34px,5vw,72px);
    row-gap:clamp(6px,1.1vh,14px);
    align-items:center;
  }
  .grandma-record-recipient{
    grid-column:1;
    grid-row:1/-1;
    align-self:center;
    flex-direction:column;
    gap:clamp(16px,2.5vh,28px);
    margin:0;
    min-width:0;
    text-align:center;
  }
  .grandma-record-recipient .grandma-avatar{
    width:clamp(180px,27vh,270px);
    max-width:80%;
    border-width:8px;
  }
  .grandma-record-recipient strong{
    display:block;
    width:100%;
    font-size:clamp(58px,6vw,86px);
    line-height:.98;
    text-align:center;
  }
  .grandma-record-icon{
    grid-column:2;
    grid-row:1;
    width:clamp(76px,11vh,108px);
    height:clamp(76px,11vh,108px);
    margin:0 auto;
  }
  .grandma-record-icon svg{
    width:clamp(44px,6.2vh,62px);
    height:clamp(44px,6.2vh,62px);
  }
  .grandma-record-card h1{
    grid-column:2;
    grid-row:2;
    margin:0;
    font-size:clamp(54px,6.3vw,82px);
    line-height:1;
  }
  .grandma-record-time{
    grid-column:2;
    grid-row:3;
    font-size:clamp(68px,8vw,106px);
    line-height:.95;
  }


  .grandma-record-actions{
    grid-column:2;
    grid-row:5;
    width:100%;
  }
  .grandma-record-actions button{
    min-height:clamp(76px,10vh,94px);
  }
}

/* v403: recording screen matched to the approved landscape-tablet composition */
@media (orientation:landscape) and (min-width:900px){
  .grandma-recording-screen{
    display:block;
    padding:clamp(16px,2.2vh,28px) clamp(48px,5.5vw,88px) clamp(28px,3.5vh,46px);
    background:
      radial-gradient(circle at 18% 14%,rgba(255,255,255,.78) 0 9%,transparent 34%),
      linear-gradient(135deg,#fffaf1,#fff1df);
  }
  .grandma-record-card{
    width:100%;
    height:100%;
    max-height:none;
    padding:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:transparent;
    display:grid;
    grid-template-columns:minmax(260px,.86fr) minmax(360px,1.14fr);
    grid-template-rows:auto minmax(0,1fr) auto auto;
    column-gap:clamp(34px,5vw,76px);
    row-gap:clamp(18px,2.8vh,34px);
    align-items:center;
    overflow:hidden;
  }
  .grandma-record-recipient{
    grid-column:1/-1;
    grid-row:1;
    justify-self:center;
    display:grid;
    grid-template-columns:auto auto;
    align-items:center;
    gap:clamp(24px,3vw,44px);
    margin:0;
    min-width:0;
    text-align:left;
  }
  .grandma-record-recipient .grandma-avatar{
    width:clamp(132px,17vh,190px);
    max-width:none;
    border-width:6px;
  }
  .grandma-record-recipient strong{
    width:auto;
    max-width:min(44vw,620px);
    font-size:clamp(62px,6.2vw,94px);
    line-height:.96;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#5a3aa0;
  }
  .grandma-record-icon{
    grid-column:1;
    grid-row:2;
    justify-self:end;
    width:clamp(170px,23vh,236px);
    height:clamp(170px,23vh,236px);
    margin:0;
    border:3px solid #ffac62;
    background:rgba(255,239,220,.78);
  }
  .grandma-record-icon svg{
    width:clamp(82px,11vh,116px);
    height:clamp(82px,11vh,116px);
    stroke-width:2.4;
  }
  .grandma-record-card h1{
    grid-column:2;
    grid-row:2;
    align-self:center;
    justify-self:start;
    margin:0 0 clamp(78px,10vh,118px);
    font-size:clamp(48px,4.4vw,70px);
    line-height:1;
    font-weight:500;
    color:#5a3aa0;
  }
  .grandma-record-time{
    grid-column:2;
    grid-row:2;
    align-self:center;
    justify-self:start;
    margin-top:clamp(62px,8vh,100px);
    font-size:clamp(88px,9vw,138px);
    line-height:.88;
    color:#4e2d91;
  }


  .grandma-record-actions{
    grid-column:1/-1;
    grid-row:4;
    display:grid;
    grid-template-columns:.92fr 1fr;
    gap:clamp(28px,3vw,46px);
    width:100%;
  }
  .grandma-record-actions button{
    min-height:clamp(118px,15vh,158px);
    border-radius:999px;
    font-size:clamp(50px,5vw,76px);
    gap:clamp(24px,2.4vw,38px);
  }
  .grandma-record-actions svg{
    width:clamp(58px,6vw,86px);
    height:clamp(58px,6vw,86px);
  }
  .grandma-record-cancel{
    border:3px solid #bba6df!important;
    background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(244,238,252,.84));
  }
  .grandma-record-send{
    background:linear-gradient(145deg,#ff920f,#ff7900);
  }
}

@media (orientation:landscape) and (min-width:900px) and (max-height:720px){
  .grandma-recording-screen{padding-block:12px 20px}
  .grandma-record-card{row-gap:12px}
  .grandma-record-recipient .grandma-avatar{width:112px}
  .grandma-record-recipient strong{font-size:58px}
  .grandma-record-icon{width:148px;height:148px}
  .grandma-record-icon svg{width:76px;height:76px}
  .grandma-record-card h1{font-size:44px;margin-bottom:62px}
  .grandma-record-time{font-size:82px;margin-top:54px}


  .grandma-record-actions button{min-height:94px;font-size:48px}
  .grandma-record-actions svg{width:52px;height:52px}
}


/* v404: long messages stay inside the viewport and scroll within the bubble */
.grandma-message-stage{
  overflow:hidden;
}
.grandma-person-panel{
  min-height:0;
}
.grandma-message-bubble{
  box-sizing:border-box;
  min-height:0;
  max-height:100%;
  overflow:hidden;
}
.grandma-message-bubble p{
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-height:0;
  max-height:none;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:auto;
  scrollbar-color:#8263bd rgba(111,75,181,.12);
  padding-right:clamp(12px,1.2vw,22px);
}
.grandma-message-bubble p::-webkit-scrollbar{
  width:clamp(14px,1.15vw,19px);
}
.grandma-message-bubble p::-webkit-scrollbar-track{
  margin-block:8px;
  border-radius:999px;
  background:rgba(111,75,181,.12);
}
.grandma-message-bubble p::-webkit-scrollbar-thumb{
  min-height:64px;
  border:3px solid transparent;
  border-radius:999px;
  background:#8263bd;
  background-clip:padding-box;
}
.grandma-message-bubble p::-webkit-scrollbar-thumb:active{
  background:#6746aa;
  background-clip:padding-box;
}

/* v405: stable recording lifecycle status stack and localized recipient label */
.grandma-record-recipient-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  justify-content:center;
  gap:clamp(4px,.6vh,10px);
}
.grandma-record-recipient-copy span{
  font-family:inherit;
  font-size:clamp(28px,3vw,46px);
  font-weight:500;
  line-height:1;
  color:#7356ad;
}
.grandma-record-status{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(4px,.8vh,12px);
}
.grandma-record-status h1,
.grandma-record-status .grandma-record-time{
  margin:0;
}

@media (orientation:landscape) and (min-width:900px){
  .grandma-record-recipient{
    grid-template-columns:auto minmax(0,1fr);
  }
  .grandma-record-recipient-copy{
    align-items:flex-start;
    text-align:left;
  }
  .grandma-record-recipient-copy span{
    font-size:clamp(34px,3.2vw,52px);
  }
  .grandma-record-recipient strong{
    max-width:min(42vw,620px);
  }
  .grandma-record-status{
    grid-column:2;
    grid-row:2;
    align-items:flex-start;
    justify-self:start;
    align-self:center;
    gap:clamp(2px,.5vh,8px);
  }
  .grandma-record-status h1{
    font-size:clamp(48px,4.4vw,70px);
    line-height:1;
    font-weight:500;
    color:#5a3aa0;
  }
  .grandma-record-status .grandma-record-time{
    font-size:clamp(88px,9vw,138px);
    line-height:.88;
    color:#4e2d91;
  }
  .grandma-record-card>h1,
  .grandma-record-card>.grandma-record-time{
    margin:0;
  }
}

@media (orientation:landscape) and (min-width:900px) and (max-height:720px){
  .grandma-record-recipient-copy span{font-size:30px}
  .grandma-record-status h1{font-size:42px}
  .grandma-record-status .grandma-record-time{font-size:78px}
}

/* v406: slightly thinner recording bars with clearer spacing */
@media (orientation:landscape) and (min-width:900px){


}


/* v407: Nunito throughout Grandma UI and a calmer filled recording microphone */
.grandma-record-icon{
  border:0;
  background:rgba(255,226,194,.58);
  box-shadow:0 12px 30px rgba(234,118,0,.08);
  color:#f27a00;
}
.grandma-record-icon svg{
  stroke:none;
}
@media (orientation:landscape) and (min-width:900px){
  .grandma-record-icon{
    border:0;
    background:rgba(255,226,194,.58);
  }
}

/* v408: the Grandma UI is always a single viewport; only message text scrolls */
html:has(.grandma-shell),
body:has(.grandma-shell){
  width:100%;
  height:100%;
  max-height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}
.grandma-shell{
  box-sizing:border-box;
  width:100%;
  height:var(--app-viewport-height,100dvh);
  min-height:0;
  max-height:var(--app-viewport-height,100dvh);
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  overflow:hidden;
}
.grandma-shell *,
.grandma-shell *::before,
.grandma-shell *::after{
  box-sizing:border-box;
}
.grandma-message-stage{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.grandma-person-panel,
.grandma-message-bubble,
.grandma-message-bubble p{
  min-width:0;
  min-height:0;
}
.grandma-message-bubble{
  width:100%;
  height:100%;
  max-height:100%;
  align-self:stretch;
}
.grandma-message-bubble p{
  display:block;
  height:100%;
  max-height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.grandma-actions{
  min-width:0;
  flex:none;
}


@media (max-width:760px), (orientation:portrait) and (max-width:900px){
  .grandma-shell{
    overflow:hidden;
    grid-template-rows:minmax(0,1fr) auto;
    gap:clamp(10px,2dvh,18px);
    padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  }
  .grandma-message-stage{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr);
    gap:clamp(10px,2dvh,18px);
    align-items:stretch;
  }
  .grandma-person-panel{
    flex:none;
    min-height:0;
  }
  .grandma-message-bubble{
    min-height:0;
    padding:clamp(20px,4vw,30px);
  }
  .grandma-message-bubble p{
    font-size:clamp(29px,6.2vw,50px);
  }
  .grandma-actions{
    flex:none;
  }
}

/* v410: normal speaking drives the waveform; main action icons match the large labels */
.grandma-actions svg{
  width:clamp(58px,5.4vw,82px);
  height:clamp(58px,5.4vw,82px);
  flex:0 0 auto;
}
.grandma-play-toggle svg{
  width:clamp(42px,4vw,62px);
  height:clamp(42px,4vw,62px);
  flex:0 0 auto;
}
@media (max-width:760px), (orientation:portrait) and (max-width:900px){
  .grandma-actions svg{
    width:clamp(50px,9vw,66px);
    height:clamp(50px,9vw,66px);
  }
  .grandma-play-toggle svg{
    width:clamp(38px,7vw,52px);
    height:clamp(38px,7vw,52px);
  }
}


/* v411: audio-following text scroll and a clearer invitation to start playback */
.grandma-play-toggle-is-play{
  border-color:#f2a052;
  background:linear-gradient(145deg,rgba(255,248,237,.98),rgba(255,226,190,.9));
  color:#d96f00;
  box-shadow:0 10px 24px rgba(218,111,0,.16),inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateY(-1px);
}
.grandma-play-toggle-is-play svg{
  padding:.14em;
  border-radius:50%;
  background:#ff870d;
  color:#fff;
  filter:drop-shadow(0 3px 4px rgba(179,83,0,.2));
}
.grandma-play-toggle-is-play:active{
  transform:translateY(1px);
  box-shadow:0 5px 13px rgba(218,111,0,.13);
}
.grandma-play-toggle-is-stop{
  transform:none;
}

/* v421: latest translated message cue */
.grandma-next-button { position: relative; overflow: visible; }
.grandma-next-button-has-new {
  border-color: #2d817b;
  background: linear-gradient(145deg, #4aa89e, #27766f);
  color: #fff;
  box-shadow: 0 10px 24px rgba(34, 105, 98, .24), inset 0 1px 0 rgba(255,255,255,.3);
}
.grandma-next-button-has-new svg { color: currentColor; }
.grandma-next-button-has-new:active {
  transform: translateY(1px);
  box-shadow: 0 5px 14px rgba(34, 105, 98, .2);
}
.grandma-new-message-label { white-space: nowrap; }
.grandma-new-message-badge {
  position: absolute;
  top: -18px;
  right: 24px;
  padding: 8px 15px 7px;
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 999px;
  background: #5b36a3;
  color: #fff;
  font-size: clamp(20px, 1.9vw, 29px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(72, 40, 116, .24);
  transform-origin: 50% 100%;
  animation: grandma-listen-badge-reminder 3.6s ease-in-out infinite;
}
[dir="rtl"] .grandma-new-message-badge { right: auto; left: 24px; }
@keyframes grandma-listen-badge-reminder {
  0%, 80%, 100% { transform: translateY(0) scale(1); }
  84% { transform: translateY(-7px) scale(1.08); }
  88% { transform: translateY(1px) scale(.98); }
  92% { transform: translateY(-3px) scale(1.035); }
  96% { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .grandma-new-message-badge { animation: none; }
}

.grandma-status-overlay{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:2}

/* v422: persistent in-bubble scroll indicator and quiet outgoing delivery state */
.grandma-message-bubble{position:relative}
.grandma-message-bubble p{
  scrollbar-width:none;
  padding-right:clamp(28px,3vw,42px);
}
.grandma-message-bubble p::-webkit-scrollbar{display:none}
.grandma-scroll-track{
  position:absolute;
  top:clamp(14px,1.4vw,22px);
  right:clamp(8px,.8vw,13px);
  bottom:clamp(14px,1.4vw,22px);
  width:clamp(9px,.8vw,13px);
  overflow:hidden;
  border-radius:999px;
  background:rgba(111,75,181,.14);
  opacity:.62;
  pointer-events:none;
}
[dir="rtl"] .grandma-scroll-track{right:auto;left:clamp(8px,.8vw,13px)}
[dir="rtl"] .grandma-message-bubble p{padding-right:0;padding-left:clamp(28px,3vw,42px)}
.grandma-scroll-thumb{
  width:100%;
  min-height:38px;
  border-radius:999px;
  background:#8263bd;
  transform:translateY(0);
  transition:transform 90ms linear,height 160ms ease;
}
.grandma-scroll-track:not(.is-scrollable){opacity:.28}
.grandma-delivery-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,.8vw,13px);
  margin-top:clamp(4px,.7vh,10px);
  color:#7356ad;
  font-family:inherit;
  font-size:clamp(24px,2.2vw,34px);
  font-weight:700;
  line-height:1;
}
.grandma-delivery-status svg{
  width:clamp(30px,2.8vw,44px);
  height:auto;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.grandma-delivery-status-read{color:#2f8f82}


/* v426: secondary delivery explanation on its own quieter line */
.grandma-delivery-copy{display:flex;flex-direction:column;align-items:center;line-height:1.08}
.grandma-delivery-copy strong{font:inherit;font-weight:700}
.grandma-delivery-copy small{display:block;margin-top:5px;color:#6f6876;font-size:.62em;font-weight:600;line-height:1.12}


/* v432: outgoing messages use the recording action's orange family */
.grandma-message-bubble-own{
  border-color:#f2b36f;
  background:linear-gradient(145deg,rgba(255,249,239,.96),rgba(255,232,202,.92));
  box-shadow:0 12px 30px rgba(201,112,20,.10);
}
.grandma-message-bubble-own:before{
  background:#fff2df;
  border-color:#f2b36f;
}

/* v433: gentle handoff when Grandma mode automatically reveals a new message */
.grandma-message-stage{
  position:relative;
  transform-origin:50% 48%;
}
.grandma-message-stage-leaving{
  pointer-events:none;
  animation:grandma-message-leave 260ms cubic-bezier(.4,0,1,1) both;
}
.grandma-message-stage-entering{
  animation:grandma-message-arrive 700ms cubic-bezier(.16,1,.3,1) both;
}
.grandma-message-arrived-cue{
  position:absolute;
  z-index:4;
  top:clamp(10px,1.8vh,20px);
  left:50%;
  max-width:calc(100% - 32px);
  transform:translateX(-50%);
  padding:.38em .9em;
  border:2px solid rgba(86,57,145,.18);
  border-radius:999px;
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 24px rgba(75,44,126,.14);
  color:#65459f;
  font-family:inherit;
  font-size:clamp(20px,2vw,30px);
  font-weight:800;
  line-height:1.1;
  white-space:nowrap;
  animation:grandma-arrived-cue 700ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes grandma-message-leave{
  to{opacity:0;transform:translateX(-2.5%) scale(.985)}
}
@keyframes grandma-message-arrive{
  from{opacity:0;transform:translateX(3.5%) scale(.975);filter:blur(2px)}
  58%{filter:blur(0)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes grandma-arrived-cue{
  0%{opacity:0;transform:translate(-50%,-14px) scale(.92)}
  35%{opacity:1;transform:translate(-50%,0) scale(1.03)}
  100%{opacity:0;transform:translate(-50%,0) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .grandma-message-stage-leaving,
  .grandma-message-stage-entering,
  .grandma-message-arrived-cue{animation-duration:1ms!important}
}

/* v434: concept-reference surface and color refinement */
:root{
  --grandma-ink:#2f174f;
  --grandma-purple:#6d4aad;
  --grandma-purple-soft:#bda9df;
  --grandma-orange:#ff8508;
  --grandma-cream:#fff4e5;
}
.grandma-shell{
  background:
    radial-gradient(ellipse at 17% 18%,rgba(255,255,255,.70) 0 8%,rgba(255,250,241,.48) 25%,transparent 51%),
    radial-gradient(ellipse at 83% 48%,rgba(250,241,255,.22) 0 15%,transparent 49%),
    linear-gradient(135deg,#fff8ed 0%,#fff1df 55%,#ffeedb 100%);
}
.grandma-avatar{
  border-color:rgba(255,255,255,.78);
  box-shadow:0 9px 28px rgba(83,49,119,.11),0 1px 0 rgba(255,255,255,.9);
}
.grandma-person-panel h1{
  color:#5d3aa2;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.grandma-message-bubble{
  border-color:#c5b2e5;
  background:
    linear-gradient(145deg,rgba(255,255,255,.80) 0%,rgba(247,243,252,.82) 52%,rgba(239,233,245,.88) 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.92),
    inset 0 -1px 2px rgba(113,78,157,.06),
    0 10px 28px rgba(78,48,111,.075);
}
.grandma-message-bubble:before{
  background:linear-gradient(135deg,rgba(250,247,253,.94),rgba(241,235,247,.95));
  border-color:#c5b2e5;
  box-shadow:inset 2px -2px 2px rgba(255,255,255,.46);
}
.grandma-message-bubble-own{
  border-color:#efb475;
  background:linear-gradient(145deg,rgba(255,252,245,.94),rgba(255,235,207,.91));
  box-shadow:inset 0 2px 3px rgba(255,255,255,.88),0 10px 28px rgba(185,99,16,.085);
}
.grandma-message-bubble-own:before{
  background:linear-gradient(135deg,#fff9ef,#ffecd3);
  border-color:#efb475;
}
.grandma-play-toggle{
  border-color:#a48bc9;
  background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(249,242,251,.42));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}
.grandma-nav-button{
  background:linear-gradient(145deg,#8668bd 0%,#7657b2 48%,#6747a5 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28),0 10px 22px rgba(78,43,119,.12);
}
.grandma-reply-button,
.grandma-record-send{
  background:linear-gradient(145deg,#ff9b20 0%,#ff8a0d 46%,#ff7900 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.30),0 10px 23px rgba(210,98,0,.16);
}
.grandma-actions button{
  text-shadow:0 1px 1px rgba(50,20,80,.10);
}
.grandma-reply-button{
  text-shadow:0 1px 1px rgba(133,57,0,.12);
}
.grandma-scroll-track{
  background:rgba(111,75,181,.12);
}
.grandma-scroll-thumb{
  background:linear-gradient(180deg,#9677c9,#7857b4);
  box-shadow:inset 1px 0 rgba(255,255,255,.22);
}

/* v435: exact approved color stops */
.grandma-shell,
.grandma-recording-screen{
  background:linear-gradient(180deg,#fdeeda 0%,#fef3ea 100%);
}
.grandma-message-bubble{
  background:linear-gradient(180deg,#f0eaf2 0%,#f2ecf4 100%);
}
.grandma-message-bubble:before{
  background:linear-gradient(135deg,#f0eaf2,#f2ecf4);
}
.grandma-nav-button{
  background:linear-gradient(180deg,#896cb3 0%,#7659a5 100%);
}
.grandma-reply-button,
.grandma-record-send{
  background:linear-gradient(180deg,#fe9c3c 0%,#fe8508 100%);
}

/* v436: keep navigation labels readable on narrower tablet widths */
.grandma-actions button{
  min-width:0;
  padding-inline:clamp(14px,1.5vw,26px);
}
.grandma-nav-button{
  gap:clamp(8px,.9vw,14px);
  font-size:clamp(38px,3.2vw,58px);
}
.grandma-nav-button > span{
  min-width:0;
}

/* v437: outgoing bubble mirrors the incoming bubble's quiet tinted surface */
.grandma-message-bubble-own{
  border-color:#e8b98f;
  background:linear-gradient(180deg,#f7eadf 0%,#f9eee5 100%);
}
.grandma-message-bubble-own:before{
  background:linear-gradient(135deg,#f7eadf,#f9eee5);
  border-color:#e8b98f;
}


/* v439: approved outgoing surface; hide unfinished bubble tails */
.grandma-message-bubble-own{
  background:linear-gradient(180deg,#ffe5d0 0%,#f7d4b8 100%);
}
.grandma-message-bubble:before{display:none}

/* v443: reserved presence slot prevents layout jumps; enter and exit mirror */
.grandma-recording-presence-slot{
  display:flex;
  height:clamp(68px,7.2vh,92px);
  align-items:center;
  justify-content:center;
  width:100%;
  margin-top:clamp(2px,.7vh,10px);
}
.grandma-recording-presence{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,1vw,16px);
  max-width:min(94%,520px);
  padding:clamp(12px,1.4vw,18px) clamp(18px,2vw,28px);
  border:2px solid rgba(184,107,30,.28);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,239,218,.96),rgba(255,222,188,.96));
  color:#864410;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 8px 18px rgba(151,82,20,.11);
  font-size:clamp(25px,2.3vw,38px);
  line-height:1.08;
  text-align:center;
  transform-origin:center;
}
.grandma-recording-presence-entering{animation:grandma-recording-presence-in 680ms cubic-bezier(.16,1.35,.3,1) both}
.grandma-recording-presence-leaving{animation:grandma-recording-presence-out 520ms cubic-bezier(.4,0,.2,1) both}
.grandma-recording-presence strong{font-weight:800}
.grandma-recording-presence-waves{
  height:1em;
  display:flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
}
.grandma-recording-presence-waves i{
  display:block;
  width:5px;
  height:55%;
  border-radius:999px;
  background:#e87816;
  animation:grandma-recording-presence-wave 900ms ease-in-out infinite alternate;
}
.grandma-recording-presence-waves i:nth-child(2){height:100%;animation-delay:-300ms}
.grandma-recording-presence-waves i:nth-child(3){height:72%;animation-delay:-600ms}
@keyframes grandma-recording-presence-in{
  0%{opacity:0;transform:translateY(10px) scale(.84)}
  62%{opacity:1;transform:translateY(-2px) scale(1.045)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes grandma-recording-presence-out{
  0%{opacity:1;transform:translateY(0) scale(1)}
  38%{opacity:.95;transform:translateY(2px) scale(1.025)}
  100%{opacity:0;transform:translateY(10px) scale(.84)}
}
@keyframes grandma-recording-presence-wave{
  from{transform:scaleY(.48)}
  to{transform:scaleY(1)}
}
@media(prefers-reduced-motion:reduce){
  .grandma-recording-presence-entering,
  .grandma-recording-presence-leaving,
  .grandma-recording-presence-waves i{animation:none}
}

/* v489: finalized background recording is visually stopped, not resumable. */
.grandma-record-icon-ended{background:#efefed!important;color:#8f8c87!important;box-shadow:none!important}
.grandma-record-icon-ended::before,.grandma-record-icon-ended::after{animation:none!important}


/* v538: navigation pills fit their viewport without icon/label collisions. */
.grandma-actions{
  grid-template-columns:minmax(0,1fr) minmax(0,1.8fr) minmax(0,1fr);
  gap:clamp(8px,1.15vw,20px);
}
.grandma-actions button{
  container-type:inline-size;
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:clamp(32px,3.5vw,68px) minmax(0,1fr) clamp(32px,3.5vw,68px);
  align-items:center;
  justify-items:center;
  column-gap:clamp(4px,.55vw,10px);
  padding-inline:clamp(7px,.85vw,16px);
  white-space:normal;
}
.grandma-actions button > svg{
  grid-column:1;
  grid-row:1;
  width:clamp(32px,3.5vw,68px);
  height:clamp(32px,3.5vw,68px);
  max-width:100%;
}
.grandma-actions button > span:not(.grandma-new-message-badge){
  grid-column:2;
  grid-row:1;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:clamp(20px,2.6vw,56px);
  line-height:1.02;
}
.grandma-reply-button > span:not(.grandma-new-message-badge){
  font-size:clamp(20px,2.9vw,58px);
}
.grandma-next-button > svg{
  grid-column:3;
}
@supports (font-size:1cqw){
  .grandma-nav-button > span:not(.grandma-new-message-badge){font-size:clamp(20px,12cqw,56px)}
  .grandma-reply-button > span:not(.grandma-new-message-badge){font-size:clamp(20px,9cqw,58px)}
}
@media (max-width:760px), (orientation:portrait) and (max-width:900px){
  .grandma-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .grandma-reply-button{grid-column:1/-1;grid-row:1}
}

/* v539: center icon + label as one constrained unit; keep arrows adjacent to their text. */
.grandma-actions{
  grid-template-columns:minmax(0,1fr) minmax(0,1.8fr) minmax(0,1fr);
  gap:clamp(8px,1.15vw,20px);
}
.grandma-actions button{
  container-type:inline-size;
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-inline:clamp(7px,.85vw,16px);
  overflow:hidden;
}
.grandma-action-content{
  width:max-content;
  max-width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,1.05vw,18px);
  direction:ltr;
}
.grandma-action-content > svg{
  width:clamp(32px,3.5vw,68px);
  height:clamp(32px,3.5vw,68px);
  flex:0 0 auto;
}
.grandma-action-label{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:clamp(20px,2.6vw,56px);
  line-height:1.02;
}
.grandma-reply-button .grandma-action-label{
  font-size:clamp(20px,2.9vw,58px);
}
[dir="rtl"] .grandma-action-label{direction:rtl}
@supports (font-size:1cqw){
  .grandma-nav-button .grandma-action-label{font-size:clamp(20px,11cqw,56px)}
  .grandma-reply-button .grandma-action-label{font-size:clamp(20px,8.5cqw,58px)}
}
@media (max-width:760px), (orientation:portrait) and (max-width:900px){
  .grandma-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .grandma-reply-button{grid-column:1/-1;grid-row:1}
}

/* v540: let roomy Previous/Next pills use more of their available width without changing the fit model. */
.grandma-nav-button .grandma-action-label{
  font-size:clamp(22px,3.15vw,66px);
}
@supports (font-size:1cqw){
  .grandma-nav-button .grandma-action-label{font-size:clamp(22px,13cqw,66px)}
}

/* v543: interaction failures are modal and action-specific instead of shifting the playback layout. */
.grandma-interaction-error-backdrop{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:clamp(18px,4vw,48px);
  background:rgba(45,23,78,.20);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.grandma-interaction-error-card{
  width:min(760px,92vw);
  padding:clamp(28px,4.5vw,54px);
  border:3px solid #b9a2df;
  border-radius:clamp(28px,4vw,44px);
  background:#fffaf3;
  box-shadow:0 22px 60px rgba(45,23,78,.22);
  text-align:center;
}
.grandma-interaction-error-card p{
  margin:0;
  color:#3a205b;
  font-size:clamp(30px,4.2vw,52px);
  line-height:1.18;
  font-weight:700;
}
.grandma-interaction-error-actions{
  margin-top:clamp(24px,3.5vw,40px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(12px,2vw,20px);
}
.grandma-interaction-error-actions button{
  min-width:0;
  min-height:clamp(82px,9vw,108px);
  border:0;
  border-radius:clamp(28px,4vw,40px);
  font:700 clamp(28px,3.8vw,48px)/1 "Nunito",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;
}
.grandma-interaction-error-dismiss{background:#eee6f6;color:#5e477d}
.grandma-interaction-error-retry{background:linear-gradient(145deg,#ff9a1e,#ff7900);color:#fff}

.grandma-interaction-error-actions-single{grid-template-columns:minmax(0,1fr)}

/* v544: portrait recording uses the viewport as the composition; no oversized enclosing card. */
@media (orientation:portrait){
  .grandma-recording-screen{
    box-sizing:border-box;
    width:100%;
    height:var(--app-viewport-height,100vh);
    min-height:var(--app-viewport-height,100vh);
    padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
    overflow:hidden;
    align-items:stretch;
    justify-content:stretch;
  }
  .grandma-recording-screen .grandma-record-card{
    width:100%;
    height:100%;
    max-height:none;
    min-height:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(88px,auto) minmax(0,1fr);
    grid-template-rows:auto auto minmax(44px,1fr) auto;
    column-gap:clamp(16px,3.4vw,30px);
    row-gap:clamp(12px,2.1vh,24px);
    align-items:center;
    text-align:left;
  }
  .grandma-recording-screen .grandma-record-recipient{
    grid-column:1/-1;
    grid-row:1;
    width:100%;
    min-width:0;
    margin:0;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    justify-content:start;
    gap:clamp(14px,3vw,24px);
    text-align:left;
  }
  .grandma-recording-screen .grandma-record-recipient .grandma-avatar{
    grid-row:auto;
    width:clamp(74px,12vw,112px);
    border-width:5px;
  }
  .grandma-recording-screen .grandma-record-recipient-copy{
    align-items:flex-start;
    text-align:left;
  }
  .grandma-recording-screen .grandma-record-recipient-copy span{
    font-size:clamp(24px,4vw,36px);
  }
  .grandma-recording-screen .grandma-record-recipient strong{
    width:100%;
    max-width:100%;
    font-size:clamp(38px,7vw,60px);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .grandma-recording-screen .grandma-record-icon{
    grid-column:1;
    grid-row:2;
    justify-self:center;
    width:clamp(88px,16vw,132px);
    height:clamp(88px,16vw,132px);
    margin:0;
    border-radius:50%;
  }
  .grandma-recording-screen .grandma-record-icon svg{
    width:54%;
    height:54%;
  }
  .grandma-recording-screen .grandma-record-status{
    grid-column:2;
    grid-row:2;
    min-width:0;
    align-items:flex-start;
    justify-self:stretch;
    text-align:left;
  }
  .grandma-recording-screen .grandma-record-status h1{
    font-size:clamp(34px,6.2vw,50px);
    line-height:1;
    font-weight:650;
  }
  .grandma-recording-screen .grandma-record-status .grandma-record-time{
    font-size:clamp(58px,11vw,88px);
    line-height:.92;
  }
  .grandma-recording-screen .grandma-waveform{
    grid-column:1/-1;
    grid-row:3;
    align-self:center;
    width:100%;
    min-width:0;
    max-height:clamp(64px,10vh,104px);
  }
  .grandma-recording-screen .grandma-record-actions{
    grid-column:1/-1;
    grid-row:4;
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
    gap:clamp(12px,2.6vw,22px);
  }
  .grandma-recording-screen .grandma-record-actions button{
    min-width:0;
    min-height:clamp(88px,11vh,122px);
    padding-inline:clamp(14px,3vw,30px);
    border-radius:clamp(30px,5vw,46px);
    font-size:clamp(34px,6vw,54px);
    gap:clamp(10px,2vw,18px);
    overflow:hidden;
  }
  .grandma-recording-screen .grandma-record-actions svg{
    width:clamp(40px,7vw,60px);
    height:clamp(40px,7vw,60px);
    flex:none;
  }
  .grandma-recording-screen .grandma-record-actions span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media (orientation:portrait) and (max-height:720px){
  .grandma-recording-screen .grandma-record-card{row-gap:9px}
  .grandma-recording-screen .grandma-record-recipient .grandma-avatar{width:68px}
  .grandma-recording-screen .grandma-record-recipient-copy span{font-size:22px}
  .grandma-recording-screen .grandma-record-recipient strong{font-size:34px}
  .grandma-recording-screen .grandma-record-icon{width:76px;height:76px}
  .grandma-recording-screen .grandma-record-status h1{font-size:30px}
  .grandma-recording-screen .grandma-record-status .grandma-record-time{font-size:52px}
  .grandma-recording-screen .grandma-record-actions button{min-height:76px;font-size:32px}
}


/* v576: default Grandma home is a single deterministic recipient -> talk action. */
.grandma-home-screen{
  box-sizing:border-box;
  width:100%;
  height:var(--app-viewport-height,100dvh);
  min-height:var(--app-viewport-height,100dvh);
  overflow:hidden;
}
.grandma-home-layout{
  flex:1;
  min-height:0;
  width:min(1460px,100%);
  margin:0 auto;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(24px,3vh,36px);
  align-items:center;
}
.grandma-home-recipient{
  margin:0;
  justify-self:center;
}
.grandma-home-recipient .grandma-avatar{
  width:clamp(116px,17vh,272px);
  border-width:7px;
}
.grandma-home-recipient span{
  font-size:clamp(28px,4.2vh,54px);
}
.grandma-home-recipient strong{
  font-size:clamp(54px,8.2vh,118px);
}
.grandma-home-instruction{
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-height:0;
  display:grid;
  place-items:center;
  padding:clamp(34px,5vw,82px);
  border:3px solid rgba(106,71,111,.15);
  border-radius:clamp(30px,4vw,48px);
  background:#f9f2ee;
  box-shadow:0 12px 30px rgba(87,53,122,.05);
  text-align:center;
}
.grandma-home-instruction p{
  max-width:1280px;
  margin:0;
  color:#532f23;
  font-size:clamp(42px,5vw,76px);
  line-height:1.25;
  font-weight:700;
}
.grandma-home-actions{
  width:100%;
  grid-template-columns:minmax(0,1fr);
}
.grandma-home-actions .grandma-home-talk-button{
  grid-column:1;
  grid-row:1;
  width:100%;
}
.grandma-home-talk-button:disabled{opacity:.55;box-shadow:none}


@media (orientation:portrait){
  .grandma-home-screen{
    padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  }
  .grandma-home-layout{gap:clamp(18px,2.4vh,28px)}
  .grandma-home-recipient{
    width:100%;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:clamp(14px,3vw,24px);
    justify-content:start;
    text-align:left;
  }
  .grandma-home-recipient .grandma-avatar{width:clamp(86px,16vw,132px)}
  .grandma-home-recipient span{font-size:clamp(26px,4.7vw,38px)}
  .grandma-home-recipient strong{font-size:clamp(44px,8.5vw,68px)}
  .grandma-home-instruction{padding:clamp(28px,5vw,54px)}
  .grandma-home-instruction p{font-size:clamp(36px,6.5vw,58px)}
  .grandma-home-actions{grid-template-columns:minmax(0,1fr)}
}

/* v582: transient unread player identifies the state beneath the sender name. */
.grandma-unread-message-label{
  margin-top:-8px;
  color:#80679e;
  font-size:clamp(24px,2.6vw,36px);
  line-height:1.05;
  font-weight:700;
  text-align:center;
}
@media (max-width:760px), (orientation:portrait) and (max-width:900px){
  .grandma-unread-message-label{
    grid-column:2;
    align-self:start;
    justify-self:start;
    margin-top:0;
    font-size:clamp(22px,4.7vw,31px);
    text-align:start;
  }
}

/* v584: explicit &test-only audition surface for Grandma incoming-message cues. */
.grandma-sound-test-lab{
  position:fixed;
  z-index:40;
  right:max(12px,env(safe-area-inset-right));
  bottom:max(12px,env(safe-area-inset-bottom));
  width:min(420px,calc(100vw - 24px));
  box-sizing:border-box;
  padding:12px;
  border:1px solid rgba(77,46,111,.18);
  border-radius:18px;
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 28px rgba(57,31,85,.18);
  color:#4f3274;
  font:700 14px/1.2 system-ui,sans-serif;
}
.grandma-sound-test-lab strong{display:block;margin:0 0 8px 2px}
.grandma-sound-test-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grandma-sound-test-options button{
  min-height:44px;
  padding:8px 10px;
  border:1px solid rgba(96,65,137,.22);
  border-radius:12px;
  background:#f7f2fc;
  color:#513778;
  font:700 14px/1.1 system-ui,sans-serif;
}
.grandma-sound-test-options button:active{transform:scale(.98)}

/* v587: compact &test selectors for the shared Grandma sound library. */
.grandma-sound-test-control{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:7px 8px;
  align-items:center;
  margin-top:9px;
}
.grandma-sound-test-control > span{
  grid-column:1 / -1;
  font-size:12px;
  opacity:.78;
}
.grandma-sound-test-control select,
.grandma-sound-test-control button{
  min-height:42px;
  box-sizing:border-box;
  border:1px solid rgba(96,65,137,.22);
  border-radius:12px;
  background:#f7f2fc;
  color:#513778;
  font:700 14px/1.1 system-ui,sans-serif;
}
.grandma-sound-test-control select{width:100%;padding:8px 10px}
.grandma-sound-test-control button{padding:8px 14px}
.grandma-sound-test-control button:active{transform:scale(.98)}

/* v590: four-second Grandma send confirmation between upload and return to Home. */
.grandma-sent-screen{
  box-sizing:border-box;
  width:100%;
  height:var(--app-viewport-height,100dvh);
  min-height:var(--app-viewport-height,100dvh);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.grandma-sent-bubble{
  box-sizing:border-box;
  width:min(900px,88vw);
  padding:clamp(42px,7vh,88px) clamp(34px,7vw,96px);
  border:3px solid rgba(106,71,111,.13);
  border-radius:clamp(32px,5vw,56px);
  background:rgba(255,255,255,.64);
  box-shadow:0 20px 54px rgba(87,53,122,.08);
  text-align:center;
}
.grandma-sent-check{
  width:clamp(92px,13vw,142px);
  height:clamp(92px,13vw,142px);
  margin:0 auto clamp(26px,4vh,42px);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.88);
  color:#5b36a3;
  box-shadow:0 12px 30px rgba(72,45,103,.12);
}
.grandma-sent-check svg{width:58%;height:58%}
.grandma-sent-bubble h1{
  margin:0;
  color:#3f237f;
  font-size:clamp(58px,8vw,112px);
  line-height:1;
  font-weight:800;
}
.grandma-sent-bubble p{
  margin:clamp(22px,3.2vh,34px) 0 0;
  color:#4f327b;
  font-size:clamp(34px,4.5vw,62px);
  line-height:1.15;
  font-weight:700;
}
@media (orientation:portrait){
  .grandma-sent-bubble{width:min(92vw,760px);padding:clamp(38px,7vh,72px) clamp(26px,6vw,62px)}
}

/* ---- client/grandma-mode/waveform.css ---- */
/* Optional Grandma recording waveform. Remove this file and the one RecordingWaveform render call to remove the visual feature. */
.grandma-waveform{
  position:relative;
  width:100%;
  height:clamp(68px,11dvh,110px);
  margin:clamp(14px,2.4dvh,26px) auto clamp(18px,3dvh,34px);
  overflow:hidden;
  flex:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.grandma-waveform-bar{
  border-radius:999px;
  background:#8a65c8;
}

/* Default: bars keep their sampled height and only travel from right to left. */
.grandma-waveform-sliding-static .grandma-waveform-bar{
  position:absolute;
  left:100%;
  top:50%;
  width:clamp(2px,.20vw,3px);
  height:calc(clamp(58px,9dvh,90px) * var(--grandma-wave-level));
  transform:translateY(-50%);
  animation-name:grandma-waveform-slide-left;
  animation-timing-function:linear;
  animation-fill-mode:forwards;
  will-change:transform;
}
@keyframes grandma-waveform-slide-left{
  from{left:100%}
  to{left:-20px}
}

/* Alternate style retained behind one variant prop. */
.grandma-waveform-responsive-bars{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(9px,.95vw,15px);
}
.grandma-waveform-responsive-bars .grandma-waveform-bar{
  flex:1 1 0;
  min-width:3px;
  max-width:10px;
  height:clamp(58px,9dvh,90px);
  transform-origin:center;
  transition:transform 190ms cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

@media (orientation:landscape) and (min-width:900px){
  .grandma-waveform{
    grid-column:1/-1;
    grid-row:3;
    align-self:center;
    height:clamp(118px,18vh,184px);
    margin:0;
  }
  .grandma-waveform-sliding-static .grandma-waveform-bar{
    height:calc(clamp(104px,16vh,166px) * var(--grandma-wave-level));
  }
  .grandma-waveform-responsive-bars .grandma-waveform-bar{
    height:clamp(104px,16vh,166px);
  }
}
@media (orientation:landscape) and (min-width:900px) and (max-height:720px){
  .grandma-waveform{height:92px}
  .grandma-waveform-sliding-static .grandma-waveform-bar{height:calc(82px * var(--grandma-wave-level))}
  .grandma-waveform-responsive-bars .grandma-waveform-bar{height:82px}
}
@media (max-width:760px),(orientation:portrait) and (max-width:900px){
  .grandma-waveform{height:62px;margin:10px auto 14px}
  .grandma-waveform-sliding-static .grandma-waveform-bar{width:clamp(2px,.48vw,3px);height:calc(54px * var(--grandma-wave-level))}
  .grandma-waveform-responsive-bars{gap:7px}
  .grandma-waveform-responsive-bars .grandma-waveform-bar{min-width:3px;max-width:8px;height:54px}
}
@media (prefers-reduced-motion:reduce){
  .grandma-waveform-sliding-static .grandma-waveform-bar{animation-duration:7000ms!important}
  .grandma-waveform-responsive-bars .grandma-waveform-bar{transition:none}
}

@media (orientation:landscape) and (min-width:900px){
  .grandma-record-live-core .grandma-waveform{
    grid-column:1;
    grid-row:3;
    width:100%;
    height:clamp(72px,11vh,112px);
  }
  .grandma-record-live-core .grandma-waveform-sliding-static .grandma-waveform-bar{
    height:calc(clamp(62px,9vh,94px) * var(--grandma-wave-level));
    width:clamp(2px,.18vw,3px);
  }
  .grandma-record-live-core .grandma-waveform-responsive-bars .grandma-waveform-bar{
    height:clamp(62px,9vh,94px);
    min-width:3px;
    max-width:8px;
  }
}

/* v464: wide-feedback returns to the quieter thin-bar treatment. */
@media (min-width:900px){
  .grandma-recording-screen-wide-feedback .grandma-waveform-sliding-static .grandma-waveform-bar{
    width:clamp(2px,.16vw,3px);
  }
  .grandma-recording-screen-wide-feedback .grandma-waveform-responsive-bars .grandma-waveform-bar{
    min-width:3px;
    max-width:7px;
  }
}


/* v465: once live transcription proves the microphone path works, waveform feedback quietly leaves while preserving layout. */
.grandma-waveform{
  transition:opacity 760ms cubic-bezier(.22,.72,.25,1), filter 760ms cubic-bezier(.22,.72,.25,1);
}
.grandma-waveform-hidden{
  opacity:0;
  filter:blur(2px);
  pointer-events:none;
}

/* ---- client/grandma-mode/live-caption.css ---- */
/* Optional Grandma live-caption visual surface. Remove this file and its one stylesheet link to remove all caption-specific styling. */
/* v445: removable Grandma live-caption recording layout */
@media (min-width:900px){
  .grandma-recording-screen-captioned .grandma-record-card{
    width:min(1220px,96vw);
    grid-template-columns:minmax(300px,.92fr) minmax(440px,1.35fr);
    grid-template-rows:auto minmax(0,1fr) auto;
  }
  .grandma-recording-screen-captioned .grandma-record-recipient{
    grid-column:1/-1;
    grid-row:1;
  }
  .grandma-record-live-core{
    grid-column:1;
    grid-row:2;
    min-width:0;
    min-height:0;
    display:grid;
    grid-template-rows:auto auto minmax(72px,1fr);
    align-items:center;
    justify-items:center;
    gap:clamp(10px,1.5vh,20px);
  }
  .grandma-record-live-core .grandma-record-icon{
    grid-column:1;
    grid-row:1;
    justify-self:center;
    width:clamp(112px,16vh,170px);
    height:clamp(112px,16vh,170px);
  }
  .grandma-record-live-core .grandma-record-status{
    grid-column:1;
    grid-row:2;
    align-items:center;
    justify-self:center;
  }
  .grandma-record-live-core .grandma-record-status h1{
    font-size:clamp(38px,3.6vw,58px);
  }
  .grandma-record-live-core .grandma-record-time{
    font-size:clamp(68px,7vw,108px);
  }
  .grandma-live-caption{
    grid-column:2;
    justify-self:stretch;
    width:100%;
    box-sizing:border-box;
    grid-row:2;
    align-self:stretch;
    min-width:0;
    min-height:0;
    position:relative;
    overflow:hidden;
    padding:clamp(30px,3.4vw,54px);
    border:2px solid rgba(229,151,79,.62);
    border-radius:38px;
    background:linear-gradient(180deg,#ffe5d0 0%,#f7d4b8 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 12px 28px rgba(166,91,28,.1);
    color:#4b2b22;
    font-family:inherit;
    font-size:clamp(34px,4vw,62px);
    font-weight:650;
    line-height:1.15;
    text-align:start;
    display:flex;
    align-items:flex-end;
  }
  .grandma-live-caption::after{
    content:"";
    position:absolute;
    z-index:1;
    inset:0 0 auto;
    height:clamp(92px,17vh,160px);
    pointer-events:none;
    background:linear-gradient(180deg,#ffe5d0 0%,rgba(255,229,208,.9) 28%,rgba(255,229,208,0) 100%);
  }
  .grandma-live-caption-window{
    width:100%;
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:none;
    overscroll-behavior:none;
  }
  .grandma-live-caption-window::-webkit-scrollbar{display:none}
  .grandma-live-caption-content{
    min-height:100%;
  }
  .grandma-live-caption-spacer{
    width:100%;
    pointer-events:none;
  }
  .grandma-live-caption-committed{color:#4b2b22}
  .grandma-live-caption-partial{color:#9a654b}
  .grandma-live-caption-placeholder{color:#9b725e;font-style:italic;font-weight:550}
  .grandma-recording-screen-captioned .grandma-record-actions{
    grid-column:1/-1;
    grid-row:3;
  }
}

/* v460: optional wide live-caption layout. The previous split layout remains available via liveCaptionLayout="split". */
@media (min-width:900px){
  .grandma-recording-screen-wide-feedback .grandma-record-card{
    width:min(1220px,96vw);
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr) auto auto;
    row-gap:clamp(14px,2vh,26px);
  }
  .grandma-recording-screen-wide-feedback .grandma-record-recipient{
    grid-column:1;
    grid-row:1;
  }
  .grandma-recording-screen-wide-feedback .grandma-live-caption{
    grid-column:1;
    grid-row:2;
    width:100%;
    min-width:0;
    justify-self:stretch;
  }
  .grandma-record-feedback-row{
    grid-column:1;
    grid-row:3;
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:max-content minmax(0,1fr);
    align-items:center;
    gap:clamp(28px,3.2vw,54px);
  }
  .grandma-record-feedback-row .grandma-record-status{
    min-width:max-content;
    text-align:left;
  }
  .grandma-record-feedback-row .grandma-record-status h1{
    display:flex;
    align-items:center;
    gap:clamp(10px,1.2vw,18px);
    margin:0;
    font-size:clamp(32px,2.8vw,46px);
    line-height:1;
    font-weight:650;
  }
  .grandma-record-feedback-row .grandma-record-time{
    margin-top:clamp(4px,.7vh,10px);
    font-size:clamp(48px,4.8vw,72px);
    line-height:.92;
    text-align:left;
  }
  .grandma-record-inline-mic{
    width:clamp(42px,4vw,62px);
    height:clamp(42px,4vw,62px);
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#f07c00;
    background:rgba(255,229,208,.8);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 6px 14px rgba(216,116,28,.12);
    flex:none;
  }
  .grandma-record-inline-mic svg{
    width:62%;
    height:62%;
  }
  .grandma-record-feedback-row .grandma-waveform{
    width:100%;
    min-width:0;
    align-self:center;
  }

  .grandma-recording-screen-wide-feedback .grandma-record-status-inline-mic .grandma-record-inline-mic{
    display:none;
  }
  .grandma-recording-screen-wide-feedback .grandma-record-feedback-row .grandma-waveform{
    height:clamp(46px,7vh,78px);
    max-height:78px;
  }
  .grandma-recording-screen-wide-feedback .grandma-live-caption{
    min-height:0;
  }
  .grandma-recording-screen-wide-feedback .grandma-record-actions{
    grid-column:1;
    grid-row:4;
  }
}

@media (min-width:900px) and (max-height:760px){
  .grandma-recording-screen-wide-feedback .grandma-record-card{
    row-gap:10px;
  }
  .grandma-recording-screen-wide-feedback .grandma-record-recipient{
    transform:scale(.86);
    transform-origin:center;
    margin-block:-10px;
  }
  .grandma-record-feedback-row .grandma-record-status h1{
    font-size:clamp(30px,2.8vw,44px);
  }
  .grandma-record-feedback-row .grandma-record-time{
    font-size:clamp(46px,4.6vw,68px);
  }
  .grandma-record-inline-mic{
    width:46px;
    height:46px;
  }
}


/* v462: feedback status and waveform are one row; caption layout remains usable at every viewport shape. */
@media (min-width:900px){
  .grandma-recording-screen-wide-feedback .grandma-record-feedback-row{
    grid-template-columns:max-content minmax(0,1fr);
    grid-template-rows:1fr;
  }
  .grandma-recording-screen-wide-feedback .grandma-record-feedback-row .grandma-record-status,
  .grandma-recording-screen-wide-feedback .grandma-record-feedback-row .grandma-waveform{
    grid-column:auto;
    grid-row:auto;
    align-self:center;
    margin:0;
  }
  .grandma-recording-screen-wide-feedback .grandma-record-feedback-row .grandma-waveform{
    width:100%;
    min-width:0;
    height:clamp(46px,7vh,78px);
  }
}

@media (max-width:899px){
  .grandma-recording-screen-captioned{
    padding:clamp(10px,2.5vw,20px);
  }
  .grandma-recording-screen-captioned .grandma-record-card{
    width:100%;
    height:100%;
    min-height:0;
    padding:clamp(16px,3vw,28px);
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr) auto auto;
    gap:clamp(10px,2vh,18px);
    overflow:hidden;
  }
  .grandma-recording-screen-captioned .grandma-record-recipient{
    grid-column:1;
    grid-row:1;
    margin:0;
  }
  .grandma-recording-screen-captioned .grandma-live-caption{
    grid-column:1;
    grid-row:2;
    width:100%;
    min-width:0;
    min-height:0;
    position:relative;
    overflow:hidden;
    padding:clamp(22px,5vw,38px);
    border:2px solid rgba(229,151,79,.62);
    border-radius:clamp(24px,5vw,38px);
    background:linear-gradient(180deg,#ffe5d0 0%,#f7d4b8 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 12px 28px rgba(166,91,28,.1);
    color:#4b2b22;
    font-family:inherit;
    font-size:clamp(28px,6vw,48px);
    font-weight:650;
    line-height:1.15;
    text-align:start;
    display:flex;
    align-items:flex-end;
  }
  .grandma-recording-screen-captioned .grandma-live-caption::after{
    content:"";
    position:absolute;
    z-index:1;
    inset:0 0 auto;
    height:clamp(72px,15vh,130px);
    pointer-events:none;
    background:linear-gradient(180deg,#ffe5d0 0%,rgba(255,229,208,.9) 28%,rgba(255,229,208,0) 100%);
  }
  .grandma-recording-screen-captioned .grandma-live-caption-window{
    width:100%;
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:none;
    overscroll-behavior:none;
  }
  .grandma-recording-screen-captioned .grandma-live-caption-window::-webkit-scrollbar{display:none}
  .grandma-record-feedback-row{
    grid-column:1;
    grid-row:3;
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:max-content minmax(0,1fr);
    grid-template-rows:1fr;
    align-items:center;
    gap:clamp(14px,3vw,28px);
  }
  .grandma-record-feedback-row .grandma-record-status,
  .grandma-record-feedback-row .grandma-waveform{
    grid-column:auto;
    grid-row:auto;
    align-self:center;
    margin:0;
  }
  .grandma-record-feedback-row .grandma-record-status{
    align-items:flex-start;
    text-align:left;
  }
  .grandma-record-feedback-row .grandma-record-status h1{
    font-size:clamp(25px,5vw,38px);
  }
  .grandma-record-feedback-row .grandma-record-time{
    font-size:clamp(40px,8vw,62px);
    line-height:.95;
  }
  .grandma-record-feedback-row .grandma-waveform{
    width:100%;
    min-width:0;
    height:clamp(44px,8vh,68px);
  }
  .grandma-recording-screen-captioned .grandma-record-actions{
    grid-column:1;
    grid-row:4;
  }
}

/* v463: wide-feedback waveform is secondary feedback, not a full-width focal element. */
@media (min-width:900px){
  .grandma-recording-screen-wide-feedback .grandma-record-feedback-row{
    grid-template-columns:max-content minmax(260px,62%);
    justify-content:start;
    column-gap:clamp(26px,3.2vw,54px);
  }
  .grandma-recording-screen-wide-feedback .grandma-record-feedback-row .grandma-waveform{
    width:100%;
    max-width:760px;
  }
}


/* v464: keep recording feedback secondary: waveform centered, status on the attention side. */
@media (min-width:900px){
  .grandma-recording-screen-wide-feedback .grandma-record-feedback-row{
    grid-template-columns:minmax(0,1fr) minmax(280px,34vw) minmax(max-content,1fr);
    column-gap:clamp(20px,2.4vw,40px);
    justify-content:stretch;
  }
  .grandma-recording-screen-wide-feedback .grandma-record-feedback-row .grandma-waveform{
    grid-column:2;
    width:100%;
    max-width:none;
    justify-self:center;
  }
  .grandma-recording-screen-wide-feedback .grandma-record-feedback-row .grandma-record-status{
    grid-column:3;
    justify-self:end;
    text-align:right;
  }
  .grandma-recording-screen-wide-feedback .grandma-record-feedback-row .grandma-record-time{
    text-align:right;
  }
}



/* v575: trailing caption microphone is compact at every viewport width; portrait must never fall back to intrinsic SVG sizing. */
.grandma-live-caption-trailing-icon{
  display:inline-grid;
  width:1.05em;
  height:1.05em;
  margin-inline-start:.22em;
  vertical-align:-.16em;
  place-items:center;
  color:#ef7d08;
  opacity:.96;
  flex:none;
}
.grandma-live-caption-trailing-icon svg{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
}

/* v470: one continuous back-and-forth listening pulse. */
.grandma-live-caption-trailing-icon-active{
  animation:grandma-caption-mic-listening .92s ease-in-out infinite alternate;
  transform-origin:50% 55%;
  will-change:transform,filter,opacity;
}
@keyframes grandma-caption-mic-listening{
  from{
    transform:translateY(0) scale(1);
    opacity:.9;
    filter:drop-shadow(0 0 0 rgba(239,125,8,0));
  }
  to{
    transform:translateY(-2px) scale(1.13);
    opacity:1;
    filter:drop-shadow(0 0 7px rgba(239,125,8,.26));
  }
}
@media (prefers-reduced-motion:reduce){
  .grandma-live-caption-trailing-icon-active{
    animation:grandma-caption-mic-listening-reduced 1.6s ease-in-out infinite alternate;
  }
}
@keyframes grandma-caption-mic-listening-reduced{
  from{opacity:.86;filter:drop-shadow(0 0 0 rgba(239,125,8,0));}
  to{opacity:1;filter:drop-shadow(0 0 5px rgba(239,125,8,.18));}
}



/* v471: gentle keep-going cue shares the waveform slot; speech hides it immediately. */
.grandma-recording-screen-wide-feedback .grandma-record-continue-hint{
  grid-column:2;
  grid-row:1;
  width:100%;
  max-width:100%;
  justify-self:center;
  align-self:center;
  padding-inline:clamp(6px,1vw,16px);
  color:#765b83;
  font-size:clamp(22px,2.15vw,34px);
  font-weight:700;
  line-height:1.12;
  text-align:center;
  text-wrap:balance;
  pointer-events:none;
}
.grandma-record-continue-hint-visible{
  animation:grandma-continue-hint-in 1.55s ease-out .55s both;
}
.grandma-record-continue-hint-hidden{
  opacity:0;
  transform:translateY(3px);
  transition:opacity 220ms ease-out,transform 220ms ease-out;
}
@keyframes grandma-continue-hint-in{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}
@media (max-width:1100px){
  .grandma-recording-screen-wide-feedback .grandma-record-continue-hint{
    font-size:clamp(19px,2.2vw,28px);
  }
}
@media (max-width:899px){
  .grandma-recording-screen-wide-feedback .grandma-record-continue-hint{
    grid-column:1;
    font-size:clamp(18px,4vw,28px);
  }
}

/* v489: stopped background draft uses a static neutral microphone cue. */
.grandma-recording-ended .grandma-live-caption-trailing-icon{color:#8f8c87;opacity:.9;animation:none!important;filter:none!important;transform:none!important}


/* v535: the delayed keep-going cue replaces the waveform in-place and never consumes another layout row. */
.grandma-recording-screen-wide-feedback .grandma-record-waveform-slot{
  grid-column:2;
  grid-row:1;
  position:relative;
  width:100%;
  min-width:0;
  height:clamp(46px,7vh,78px);
  max-height:78px;
  align-self:center;
  justify-self:center;
}
.grandma-recording-screen-wide-feedback .grandma-record-waveform-slot .grandma-waveform{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
}
.grandma-recording-screen-wide-feedback .grandma-record-waveform-slot .grandma-record-continue-hint{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  padding-inline:clamp(6px,1vw,16px);
}
@media (max-width:899px){
  .grandma-recording-screen-wide-feedback .grandma-record-waveform-slot{
    grid-column:1;
    height:clamp(44px,8vh,68px);
  }
}

/* v544: captioned portrait recording follows the same bounded single-viewport budget. */
@media (orientation:portrait){
  .grandma-recording-screen-captioned .grandma-record-card{
    width:min(100%,860px);
    height:100%;
    min-height:0;
    max-height:100%;
    padding:clamp(18px,2.2dvh,30px) clamp(18px,3.2vw,34px);
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto auto;
    gap:clamp(12px,1.8dvh,24px);
    overflow:hidden;
  }
  .grandma-recording-screen-captioned .grandma-record-recipient{
    grid-column:1;
    grid-row:1;
    margin:0;
  }
  .grandma-recording-screen-captioned .grandma-live-caption{
    grid-column:1;
    grid-row:2;
    min-height:0;
    max-height:100%;
    padding:clamp(18px,3.5vw,30px);
  }
  .grandma-recording-screen-captioned .grandma-record-feedback-row{
    grid-column:1;
    grid-row:3;
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:clamp(12px,2.5vw,24px);
  }
  .grandma-recording-screen-captioned .grandma-record-waveform-slot{
    grid-column:1;
    min-width:0;
    min-height:clamp(52px,6dvh,78px);
    height:clamp(52px,6dvh,78px);
  }
  .grandma-recording-screen-captioned .grandma-record-feedback-row .grandma-record-status{
    grid-column:2;
    min-width:max-content;
    align-items:flex-end;
    text-align:right;
  }
  .grandma-recording-screen-captioned .grandma-record-feedback-row .grandma-record-status h1{
    font-size:clamp(26px,4.5vw,38px);
  }
  .grandma-recording-screen-captioned .grandma-record-feedback-row .grandma-record-time{
    font-size:clamp(42px,7vw,60px);
  }
  .grandma-recording-screen-captioned .grandma-record-actions{
    grid-column:1;
    grid-row:4;
  }
}