/* English Friend: chat, memory and other-apps pages, on the app tokens (--green, --lime, --border). */
.chat-workspace .page-footer{display:none}
.friend-heading{margin-bottom:20px}
.friend-heading h1{margin-bottom:8px}
.friend-chat{display:flex;flex-direction:column;padding:0;height:calc(100dvh - 290px);min-height:440px;max-width:920px;margin:0 auto;overflow:hidden}
.friend-chat-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border)}
.friend-chat-head>div{flex:1;min-width:0}
.friend-chat-head strong{display:block;font-family:'Archivo',sans-serif;font-size:15px;color:#2b2751}
.friend-chat-head small{color:var(--muted);font-size:13px}
/* The friend's face (friend-face.js): a round head whose mouth is the three bars of the mark.
   Still in the chat; alive on the call screen, where JavaScript moves it (.live). */
.friend-avatar{position:relative;display:inline-block;width:30px;height:30px;border-radius:50%;flex-shrink:0;
 background:radial-gradient(circle at 33% 25%,#8985d1 0%,#6b55de 40%,#5d43cc 78%,#573cc4 100%);box-shadow:inset 0 -2px 4px #1c1c282e,inset 0 1px 2px #ffffff1c}
.friend-avatar .ff{display:block;width:100%;height:100%;overflow:visible}
.ff-open{fill:#f5f5ff}.ff-mouth rect{fill:#fecf50}
.ff-happy,.ff-shut,.ff-brows path{fill:none;stroke:#f5f5ff;stroke-width:3.6;stroke-linecap:round}
.ff-brows path{stroke-width:3;stroke:#e6e6fe}
.ff-cheeks{fill:#ff7a64;filter:blur(1.8px)}
.friend-avatar.large{width:42px;height:42px}
.friend-avatar:not(.live) .ff-eye,.friend-avatar:not(.live) .ff-open,.friend-avatar:not(.live) .ff-mouth rect{transform-box:fill-box;transform-origin:center}
.friend-avatar.idle .ff-open{animation:ff-blink 6.4s infinite}
.friend-avatar.thinking .ff-eye{transform:translate(2.5px,-3.5px)}
.friend-avatar.thinking .ff-mouth rect{animation:ff-dot 1.15s ease-in-out infinite}
.friend-avatar.thinking .ff-mouth rect:nth-child(2){animation-delay:.14s}.friend-avatar.thinking .ff-mouth rect:nth-child(3){animation-delay:.28s}
.friend-avatar.talking .ff-mouth rect{animation:ff-say .42s ease-in-out infinite alternate}
.friend-avatar.talking .ff-mouth rect:nth-child(2){animation-duration:.34s;animation-delay:-.2s}.friend-avatar.talking .ff-mouth rect:nth-child(3){animation-duration:.47s;animation-delay:-.1s}
@keyframes ff-blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes ff-dot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}
@keyframes ff-say{from{transform:scaleY(1)}to{transform:scaleY(2.5)}}
.friend-thread{flex:1;overflow-y:auto;padding:18px 20px 10px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.friend-message{display:flex;gap:10px;max-width:84%}
.friend-message.user{align-self:flex-end;flex-direction:column;align-items:flex-end;gap:4px}
.friend-message.assistant{align-self:flex-start}
.friend-content{display:flex;flex-direction:column;gap:6px;min-width:0}
.friend-bubble{padding:11px 15px;border-radius:16px;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.friend-bubble p{margin:0;font-size:inherit;line-height:inherit;color:inherit}.friend-bubble p+p{margin-top:8px}
.user .friend-bubble{background:var(--green);color:#f4f4fd;border-bottom-right-radius:5px}
.assistant .friend-bubble{background:#f2f2fc;color:#2b2751;border-bottom-left-radius:5px}
.friend-message.user.sending .friend-bubble{opacity:.65}
.friend-message.user.failed .friend-bubble{background:#ffffff;color:#7b4a40;border:1px solid #e3b7ab}
.friend-meta{font-size:12px;color:#60616f;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.assistant .friend-meta{justify-content:flex-start}
.friend-meta .text-btn{font-size:12px;padding:0}
.friend-error{color:#85362d}
.friend-listen{display:inline-flex;align-items:center;gap:4px;background:#efeffc;color:#4e3baa;border-radius:12px;padding:3px 9px 3px 7px;font-size:12px;font-weight:600;line-height:1.4}
.friend-listen .icon{width:13px;height:13px}.friend-listen:hover{background:#dfe0fc;color:var(--green)}
.friend-listen.playing{background:var(--green);color:#f0f0fe}.friend-listen.playing .icon{animation:friend-pulse 1s ease-in-out infinite}
.friend-tip li .friend-listen{margin-left:6px;vertical-align:middle;background:#e5e5f5;color:#6c532a}.friend-tip li .friend-listen.playing{background:#8a7046;color:#f5f6fe}
@keyframes friend-pulse{50%{opacity:.35}}
.friend-voice-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid #d9d9f3;background:#fcfcfe;color:#4e3baa;border-radius:18px;padding:7px 12px;font-size:13px;font-weight:600;white-space:nowrap}
.friend-voice-toggle .icon{width:15px;height:15px}.friend-voice-toggle:hover{border-color:#b2b0fe}
.friend-voice-toggle[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#f0f0fe}
.friend-tip{background:#f0f1fa;border-radius:10px;padding:10px 14px;font-size:12px}
.friend-tip b{display:flex;align-items:center;gap:6px;color:#7c6335;font-size:13px}.friend-tip b .icon{width:13px;height:13px}
.friend-tip ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.friend-tip del{color:#82634f}.friend-tip strong{color:#4e3baa;font-weight:600}.friend-tip small{display:block;color:#575865;font-size:13px;margin-top:2px;line-height:1.5}
.friend-translation{margin:0;font-size:13px;line-height:1.55;color:#50505d;background:#f0f1fa;border-radius:12px;padding:8px 13px}
.friend-translation.pending{color:#5d5d6a;font-style:italic}
.friend-listen.friend-translate.playing{background:#efeffc;color:var(--green);box-shadow:inset 0 0 0 1px #b2b0fe}
.friend-day{align-self:center;font-size:12px;color:#5e5e6d;letter-spacing:.3px;margin:4px 0}
.friend-day span{background:#f2f2f9;border-radius:10px;padding:4px 10px}
.friend-older{align-self:center;min-height:24px}
.friend-dots{display:inline-flex;gap:4px;align-items:center;height:18px}
.friend-dots i{width:6px;height:6px;border-radius:50%;background:#9d9be4;animation:friend-dot 1.2s infinite ease-in-out}
.friend-dots i:nth-child(2){animation-delay:.15s}.friend-dots i:nth-child(3){animation-delay:.3s}
@keyframes friend-dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.friend-chips{display:flex;flex-wrap:wrap;gap:8px;padding-left:40px}
.friend-chips button{background:#fcfcfe;border:1px solid #d9d9f3;color:#2b2751;border-radius:18px;padding:8px 13px;font-size:12px;text-align:left;line-height:1.4}
.friend-chips button:hover{background:#efeffc;border-color:#b2b0fe}
.friend-composer{display:flex;align-items:flex-end;gap:10px;padding:12px 16px 8px;border-top:1px solid var(--border);background:#fbfbff}
.friend-composer textarea{flex:1;resize:none;border:1px solid #dedeea;border-radius:12px;padding:11px 14px;font:inherit;font-size:14px;line-height:1.5;color:#2b2751;background:#ffffff;max-height:160px;min-height:46px}
.friend-composer textarea:focus-visible{outline:2px solid #a39dfe;outline-offset:1px}
.friend-send{width:46px;height:46px;border-radius:50%;background:var(--green);color:#ffffff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.friend-send .icon{width:18px;height:18px}
.friend-mic{width:46px;height:46px;border-radius:50%;border:1px solid #d9d9f3;background:#fcfcfe;color:#2b2751;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.friend-mic .icon{width:19px;height:19px}.friend-mic:hover:not(:disabled){background:#efeffc;border-color:#b2b0fe}
.friend-recorder{align-items:center}
.friend-recorder-body{flex:1;min-width:0;border:1px solid #dedeea;border-radius:12px;background:#ffffff;padding:8px 14px;display:grid;gap:2px}
.friend-recorder-state{display:flex;align-items:center;gap:6px;font-size:13px;color:#5240af;font-weight:600}
.friend-recorder-state i{width:9px;height:9px;border-radius:50%;background:#c4c5d3}
.friend-recorder-state.live i{background:#c4553f;animation:friend-pulse 1s ease-in-out infinite}
.friend-recorder-state #friend-recorder-time{font-family:'DM Mono',ui-monospace,Consolas,monospace;font-weight:500}
.friend-recorder-text{margin:0;font-size:14px;line-height:1.5;color:#2b2751;max-height:96px;overflow-y:auto;overflow-wrap:anywhere}
.friend-recorder-text.empty{color:#60616f;font-style:italic}
.friend-recorder .icon-btn .icon{width:18px;height:18px}
.friend-fine{margin:0;padding:0 18px 10px;font-size:12px;background:#fbfbff}
.friend-notice{margin:12px 18px 0}
/* What the conversation is about: the free conversation or the practice in progress. */
.friend-session-bar{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:6px 18px;background:#f2f2fc;border-bottom:1px solid var(--border);font-size:12px;color:#2b2751}
.friend-session-bar>.icon{width:15px;height:15px;flex-shrink:0}.friend-session-bar>span:first-of-type{flex:1;min-width:0;overflow-wrap:anywhere}
.friend-session-bar small{color:var(--muted)}
.friend-session-actions{display:flex;flex-wrap:wrap;gap:4px 16px;margin-left:auto}
.friend-session-actions .text-btn{font-size:12px;padding:0;min-height:32px;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.friend-session-actions .text-btn .icon{width:13px;height:13px}
/* The history: where each practice starts, and the practices that ended as cards. */
.friend-session{display:flex;flex-direction:column;gap:12px}
.friend-session-divider{align-self:center;display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 12px;border-radius:12px;background:var(--violet-soft,#eeebff);color:var(--violet-deep,#4a2fc9);font-size:12px;font-weight:650;text-align:center}
.friend-session-divider .icon{width:13px;height:13px;flex-shrink:0}
.friend-session-divider.free{background:#f2f2f9;color:#5e5e6d;font-weight:600}
.friend-session-end{align-self:center;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px;font-size:12px;color:var(--muted)}
.friend-session-end .text-btn,.friend-session-card .text-btn{font-size:12px;padding:0;min-height:32px}
.friend-session-card{align-self:stretch;display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--border);border-radius:14px;background:#fcfcfe}
.friend-session-card>div{flex:1;min-width:0;display:grid;gap:2px}
.friend-session-card strong{font-size:13px;color:var(--ink,#1d1b3a);overflow-wrap:anywhere}
.friend-session-card small{font-size:12px;color:var(--muted)}
.friend-session-words span{color:var(--violet-deep,#4a2fc9);font-weight:600}
.friend-session-mark{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;border-radius:50%;background:var(--mint-soft,#ddf6ee);color:var(--mint,#0b8f6c)}
.friend-session-mark .icon{width:15px;height:15px}
.friend-loading{max-width:920px;margin:0 auto;text-align:center;padding:50px 20px}
.friend-consent{max-width:720px;margin:0 auto}.friend-consent form{display:grid;gap:4px}.friend-consent .btn{justify-self:start;margin-top:12px}
.friend-banner{background:#f1f1f7;border-color:#e0e0ef}.friend-banner>.icon{color:#6d5980}.friend-banner strong{font-weight:600;color:#4b3f59}
.friend-memory-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start}
.friend-memory-groups{display:grid;gap:18px}
.friend-memory-group h2{font-size:17px;margin-bottom:4px}
.friend-memory-group ul{list-style:none;margin:0;padding:0}
.friend-memory{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}
.friend-memory:last-child{border-bottom:0;padding-bottom:0}
.friend-memory>div:first-child{flex:1;min-width:0}
.friend-memory p{margin:0 0 4px;font-size:14px;line-height:1.6;color:#2b2751;overflow-wrap:anywhere}
.friend-memory small{font-size:12px;color:#5e5e6d}
.friend-memory-actions{display:flex;gap:6px}.friend-memory-actions .icon{width:15px;height:15px}
.friend-memory.editing form{display:grid;gap:10px;width:100%}
.friend-memory textarea{width:100%;border:1px solid #dedeea;border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;resize:vertical;color:#2b2751}
.friend-memory-layout select{margin-top:0}
/* Other apps: Telegram and Slack cards, WhatsApp announced. */
.channel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.channel-card{display:grid;gap:12px;align-content:start}
.channel-card .card-title h2{margin:0;font-size:17px}
.channel-card p{margin:0;font-size:13px;line-height:1.6;color:#50505f}
.channel-card .fine{margin:0;font-size:12px}
.channel-card>.btn,.channel-card>.text-btn{justify-self:start}
.channel-card.soon{background:#f7f7fc;border-style:dashed}
.channel-code{display:grid;gap:2px;background:#f2f2fc;border-radius:10px;padding:12px 14px}
.channel-code span{font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:#5240af}
.channel-code strong{font-family:'DM Mono',ui-monospace,Consolas,monospace;font-size:24px;letter-spacing:4px;color:var(--green)}
.channel-code small{font-size:12px;color:#5e5e6d}
.channel-linked{display:flex;align-items:center;gap:8px;background:#f2f2fc;border-radius:10px;padding:10px 12px;font-size:13px;color:#2b2751}
.channel-linked .icon{width:16px;height:16px;color:#4e3baa;flex-shrink:0}
.channel-linked span{flex:1;min-width:0;overflow-wrap:anywhere}
.channel-linked .text-btn{font-size:13px;padding:0;color:#8c493e}
.channel-notice{margin:0 0 18px}
.channel-fine{max-width:760px}
/* Calls: the friend's face reacts on its stage and the learner's words appear live. */
.friend-call-start{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--green);background:var(--green);color:#f0f0fe;border-radius:18px;padding:7px 13px;font-size:13px;font-weight:600;white-space:nowrap}
.friend-call-start .icon{width:15px;height:15px}.friend-call-start:hover{background:#644cd5}
.friend-via{display:inline-flex;align-items:center;gap:3px;color:#5240af}.friend-via .icon{width:11px;height:11px}
.friend-call{max-width:620px;margin:0 auto;padding:22px 24px 18px}
.friend-call-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.friend-call-type{display:flex;align-items:center;gap:8px;max-width:520px;margin:14px auto 0}
.friend-call-type[hidden]{display:none}
.friend-call-type input{flex:1;margin-top:0;padding:11px 14px;border-radius:12px;font-size:14px}
.friend-call-text-send{width:42px;height:42px;border-radius:50%;background:var(--green);color:#ffffff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.friend-call-text-send .icon{width:17px;height:17px}
.friend-call-lesson{align-self:center;display:inline-block;background:#f2f2fc;color:#2b2751;border-radius:14px;padding:4px 12px;font-size:13px;font-weight:600}
.friend-call-top{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:#4e3baa;font-weight:600}
.friend-call-timer{font-family:'DM Mono',ui-monospace,Consolas,monospace;color:#5240af;font-weight:500}
/* The stage: a soft halo that swells with the friend's voice (--ff-level) and,
   in realtime calls, with the learner's (--ff-mic); a ripple while it rings. */
.friend-avatar.xl{width:124px;height:124px;box-shadow:inset 0 -10px 18px #1c1c283b,inset 0 5px 12px #ffffff17,0 16px 28px -16px #573cc4a6}
.friend-avatar.xl::after{content:'';position:absolute;left:17%;top:10%;width:30%;height:17%;border-radius:50%;background:radial-gradient(closest-side,#ffffff26,transparent);transform:rotate(-26deg);pointer-events:none}
.friend-call-stage{--ff-level:0;--ff-mic:0;position:relative;display:grid;place-items:center;width:fit-content;padding:24px}
.friend-call-stage>.friend-avatar{z-index:1;will-change:transform}
.ff-halo{position:absolute;inset:12px;border-radius:50%;background:#eaeafc;opacity:0;transform:scale(calc(1 + var(--ff-level) * .15));transition:opacity .35s,background-color .35s}
.ff-halo.ff-ring{inset:0;background:none;border:1.5px solid #d3d3f0;transform:scale(calc(1 + var(--ff-level) * .26))}
.friend-call-stage[data-state="friend"] .ff-halo{opacity:calc(.45 + var(--ff-level) * .55)}
.friend-call-stage[data-state="listening"] .ff-halo:not(.ff-ring){opacity:.8;background:#f2f2fc}
.friend-call-stage[data-state="hearing"] .ff-halo:not(.ff-ring){opacity:1;background:#eeeefe;transform:scale(calc(1 + var(--ff-mic) * .1))}
.friend-call-stage[data-state="hearing"] .ff-ring{opacity:calc(.25 + var(--ff-mic) * .75);border-color:#cbcbff;transform:scale(calc(1 + var(--ff-mic) * .18))}
.friend-call-stage[data-state="thinking"] .ff-halo:not(.ff-ring){opacity:.55;background:#f2f2fc}
.friend-call-stage[data-state="connecting"] .ff-ring{animation:ff-ripple 1.6s cubic-bezier(.2,.6,.4,1) infinite}
.friend-call-stage[data-state="muted"] .friend-avatar{filter:saturate(.7) brightness(1.04)}
.friend-call-intro .friend-call-stage{padding:10px 24px 4px}
/* The same face guides the lessons (app.js), a little larger, above the question. */
.lesson-stage .friend-call-stage{margin:14px auto 14px}
.lesson-stage .friend-avatar.xl{width:136px;height:136px}
/* End of a lesson: the face invites to talk about it (lesson-invite.js). */
.lesson-end{max-width:620px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:26px 24px 22px}
.lesson-end .eyebrow{margin:0;justify-content:center}
.lesson-end h1{margin:0}
.lesson-end p{margin:0;max-width:480px}
.lesson-end-line{font-family:'Archivo',sans-serif;font-size:18px;line-height:1.5;color:#2b2751}
.lesson-end .button-wrap{justify-content:center;margin-top:6px}
.lesson-end .btn .icon{width:16px;height:16px}
.lesson-end .fine{margin-top:2px}
.lesson-end .fine .text-btn{font-size:12px;padding:0;margin-left:2px;text-decoration:underline}
@keyframes ff-ripple{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.2)}}
.friend-call-caption{margin:0;font-family:'Archivo',sans-serif;font-size:18px;line-height:1.5;color:#2b2751;min-height:27px;max-width:520px}
.friend-call-translation-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:520px;margin-top:-6px}
.friend-call-translate{display:inline-flex;align-items:center;gap:5px;border:1px solid #d9d9f3;background:#fcfcfe;color:#4e3baa;border-radius:16px;padding:4px 11px;font-size:13px;font-weight:600}
.friend-call-translate .icon{width:14px;height:14px}.friend-call-translate:hover{border-color:#b2b0fe}
.friend-call-translate[aria-pressed="true"]{background:#efeffc;border-color:#b2b0fe}
.friend-call-translation{margin:0;font-size:14px;line-height:1.5;color:#50505d;background:#f0f1fa;border-radius:10px;padding:8px 12px}
.friend-call-translation.pending{color:#5d5d6a;font-style:italic}
.friend-call-heard{margin:0;min-height:22px;font-size:14px;line-height:1.5;color:#4e3baa;font-style:italic;max-width:520px}
.friend-call-notice{margin:0;font-size:12px;color:#85362d}
.friend-call-tip{width:100%;max-width:480px;text-align:left}
.friend-call-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:4px}
.friend-call-control{display:inline-flex;flex-direction:column;align-items:center;gap:5px;min-width:76px;padding:10px 8px;border-radius:14px;background:#f2f2fc;color:#2b2751;font-size:13px;font-weight:600}
.friend-call-control .icon{width:20px;height:20px}
.friend-call-control:hover:not(:disabled){background:#dfe0fc}.friend-call-control:disabled{opacity:.45;cursor:default}
.friend-call-control[aria-pressed="true"]{background:#646473;color:#f3f3f9}
.friend-call-control.resume[aria-pressed="true"]{background:var(--green);color:#f0f0fe}
.friend-call-paused{margin:0;font-size:13px;color:#4e3baa;background:#f2f2fc;border-radius:10px;padding:8px 12px}
.friend-call-control.hang-up{background:#c4553f;color:#ffffff}.friend-call-control.hang-up:hover:not(:disabled){background:#a8432f}
.friend-call-control.hang-up .icon{transform:rotate(135deg)}
.friend-call-fine{margin:0;font-size:12px;max-width:460px}
.friend-call-intro{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:520px}
.friend-call-intro h2{margin:0}.friend-call-intro p{margin:0;line-height:1.6}
.friend-call-intro .check-label{text-align:left}
.friend-call-intro .button-wrap{justify-content:center;margin-top:6px}
.friend-call-intro .btn .icon{width:16px;height:16px}
.friend-call-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;text-align:left}
.friend-call-mode{display:flex;gap:10px;align-items:flex-start;margin:0;border:1px solid #d9d9f3;border-radius:12px;padding:12px 14px;background:#fcfcfe;cursor:pointer}
.friend-call-mode:has(input:checked){border-color:var(--green);background:#f2f2fc;box-shadow:0 0 0 1px var(--green)}
.friend-call-modes .friend-call-mode input[type=radio]{display:inline-block;flex:none;width:18px;height:18px;margin:2px 0 0;padding:0;border:0;accent-color:var(--green)}
.friend-call-mode strong{display:block;font-size:14px;color:#2b2751}.friend-call-mode small{display:block;font-size:12px;line-height:1.5;color:#50505f;margin-top:2px}
@media(max-width:1100px){.channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.channel-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1150px){.friend-chat{height:calc(100dvh - 270px)}}
@media(max-width:900px){.friend-memory-layout{grid-template-columns:minmax(0,1fr)}}
/* Short laptop windows: the composer must stay visible without scrolling the page. */
@media(max-height:760px) and (min-width:621px){
 .chat-workspace .friend-heading{display:none}
 .chat-workspace main{padding-top:18px}
 .friend-chat{height:calc(100dvh - 83px - 18px - 26px - 14px);min-height:320px}
}
@media(max-width:620px){
 .chat-workspace main{padding:12px 12px 8px}
 .chat-workspace .friend-heading{display:none}
 .friend-chat{height:calc(100dvh - 154px - env(safe-area-inset-bottom));min-height:340px;border-radius:12px}
 .friend-message{max-width:92%}
 .friend-thread{padding:14px 12px 8px}
 .friend-chips{padding-left:0}
 .friend-composer{padding:10px 10px 12px;gap:6px}
 .friend-mic{width:42px;height:42px}
 .friend-fine{display:none}
 .friend-memory-actions{flex-direction:column}
 .friend-banner span{flex-basis:calc(100% - 40px)}
 .friend-voice-toggle{padding:9px}.friend-voice-toggle span{display:none}
 .friend-call-start{padding:9px}.friend-call-start span{display:none}
 .friend-call{padding:18px 14px 14px}
 .friend-call-caption{font-size:16px}
 .friend-avatar.xl,.lesson-stage .friend-avatar.xl{width:108px;height:108px}
 .friend-call-stage{padding:18px}
 .lesson-stage .friend-call-stage{margin:10px auto 10px}
 .lesson-end{padding:20px 16px 18px}
 .friend-call-control{min-width:68px}
 .friend-call-modes{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){.friend-dots i,.friend-listen.playing .icon{animation:none;opacity:.7}
 .friend-avatar .ff-open,.friend-avatar .ff-mouth rect{animation:none!important}
 .ff-halo{transform:none!important}.friend-call-stage[data-state="connecting"] .ff-ring{animation:none;opacity:.6}}

/* ===== Estúdio: the friend's face is a little sun; its mouth is the violet sound wave ===== */
.friend-avatar{background:radial-gradient(circle at 34% 26%,#ffeaa3 0%,#ffd04a 42%,#f7b625 78%,#eba312 100%);box-shadow:inset 0 -3px 6px rgba(184,112,0,.25),inset 0 2px 3px rgba(255,255,255,.5);filter:none}
.ff-open{fill:#1d1b3a}
.ff-mouth rect{fill:#5b3fe0}
.ff-happy,.ff-shut,.ff-brows path{stroke:#1d1b3a}
.friend-avatar.xl{box-shadow:inset 0 -10px 18px rgba(184,112,0,.28),inset 0 6px 12px rgba(255,255,255,.45),0 18px 30px -16px rgba(91,63,224,.5)}
.friend-avatar.xl::after{background:radial-gradient(closest-side,rgba(255,255,255,.55),transparent)}
.ff-halo{background:#eeebff}.ff-halo.ff-ring{border-color:#cfc6ff}

/* ===== Estúdio: the call first. The stage on the left, the messages beside it. ===== */
.friend-layout{display:flex;gap:20px;align-items:stretch;height:calc(100dvh - 190px);min-height:560px}
.friend-layout .friend-chat{flex:1;min-width:0;height:auto;min-height:0;max-width:none;margin:0;border-radius:26px;background:var(--surface);border-color:var(--line)}
.friend-layout.no-stage .friend-chat{max-width:920px;margin:0 auto}
.friend-layout .friend-chat-head{padding:14px 20px}.friend-layout .friend-chat-head>div{flex:1;min-width:0}
.friend-layout .friend-chat-head strong{font-size:17px}
.friend-stage{flex:0 0 380px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:28px;border-radius:30px;color:#fff;background:var(--violet) radial-gradient(110% 80% at 20% 0%,#7c66ff 0%,transparent 60%);overflow-y:auto}
.friend-stage-label{font-family:var(--mono);font-size:12px;letter-spacing:1.3px;color:#ffdc7a}
.friend-stage-face{align-self:center;display:grid;place-items:center;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 26px rgba(255,255,255,.06)}
.friend-stage .friend-avatar.xl{width:126px;height:126px}
.friend-stage-text h1{color:#fff;font-size:32px;line-height:1.08;letter-spacing:-.8px;margin:0 0 8px}
.friend-stage-text p{margin:0;font-size:15px;line-height:1.5;color:#e6e0ff}
.friend-stage-call{margin-top:auto;width:100%;display:flex;flex-direction:column;gap:8px;text-align:center}
.btn.friend-call-now{width:100%;min-height:56px;border-radius:999px;background:var(--sun);color:var(--ink);font-size:17px}.btn.friend-call-now:hover{background:#ffd666}
.btn.friend-call-now .icon{width:20px;height:20px}
.friend-stage-call small{font-size:13px;color:#e6e0ff}
.friend-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin-top:12px}.friend-links .text-btn{font-size:13px;font-weight:650;color:var(--violet-deep)}
.friend-head-short{display:none}
/* "⋯": memory and other apps, for the screens where the links below the chat are hidden. */
.friend-more{position:relative;display:none}
.friend-more summary{list-style:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet);cursor:pointer}
.friend-more summary::-webkit-details-marker{display:none}.friend-more summary .icon{width:20px;height:20px}
.friend-more[open] summary{background:var(--violet);color:#fff}
.friend-more-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:6;width:min(280px,calc(100vw - 40px));display:flex;flex-direction:column;padding:6px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 40px -18px rgba(29,27,58,.35)}
.friend-more-menu button{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 12px;border-radius:12px;background:transparent;font-size:14px;font-weight:600;color:var(--ink);text-align:left}
.friend-more-menu button:hover{background:var(--violet-soft)}.friend-more-menu .icon{width:18px;height:18px;color:var(--violet)}

/* The chat screen fits the window on every size: only the messages scroll. */
.chat-workspace:has(.friend-layout){height:100dvh;display:flex;flex-direction:column}
.chat-workspace:has(.friend-layout)>main{flex:1;min-height:0;width:100%;display:flex;flex-direction:column}
.chat-workspace:has(.friend-layout)>main>*{flex:none}
.chat-workspace:has(.friend-layout)>main>.friend-layout{flex:1;min-height:0;height:auto}
.friend-layout .friend-chat{height:auto;min-height:0}
@media(min-width:1151px) and (max-height:900px){.chat-workspace:has(.friend-layout)>main{padding-top:20px;padding-bottom:14px}
 .friend-stage{gap:12px;padding:22px 24px}.friend-stage-face{width:150px;height:150px;box-shadow:inset 0 0 0 20px rgba(255,255,255,.06)}
 .friend-stage .friend-avatar.xl{width:96px;height:96px}.friend-stage-text h1{font-size:26px}.friend-stage-text p{display:none}}
/* Tablets and phones: the screen works like a messaging app. Nothing but the messages
   scrolls: a slim call bar on top, the chat filling the rest, the message box always
   above the bottom navigation. */
@media(max-width:1150px){
 .friend-layout{flex-direction:column;gap:12px}
 .friend-links{display:none}.friend-more{display:block}
 .friend-stage{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"face title call";align-items:center;gap:12px 14px;padding:16px 18px;border-radius:24px;overflow:visible}
 .friend-stage-label,.friend-stage-text p,.friend-stage-call small{display:none}
 .friend-stage-face{grid-area:face;width:auto;height:auto;background:none;box-shadow:none}
 .friend-stage .friend-avatar.xl{width:56px;height:56px;box-shadow:none}
 .friend-stage-text{grid-area:title}.friend-stage-text h1{font-size:20px;line-height:1.15;margin:0;letter-spacing:-.4px}
 .friend-stage-call{grid-area:call;margin:0;width:auto}
 .btn.friend-call-now{width:auto;min-height:48px;padding:0 20px;font-size:16px}
}
@media(max-width:620px){
 .chat-workspace:has(.friend-layout)>main{padding:10px 10px 8px}
 .chat-workspace:has(.friend-layout)>main>.resume-banner{display:none}
 .friend-layout{gap:10px}
 .friend-stage{gap:10px 12px;padding:12px 14px;border-radius:20px}
 .friend-stage .friend-avatar.xl{width:44px;height:44px}
 .friend-stage-text h1{font-size:16px;line-height:1.2}
 .btn.friend-call-now{min-height:44px;padding:0 16px;font-size:15px;gap:8px}.btn.friend-call-now .icon{width:18px;height:18px}
 .friend-call-now-more{display:none}
 .friend-layout .friend-chat{border-radius:20px}
 .friend-layout .friend-chat-head{padding:8px 10px 8px 16px;gap:8px}
 .friend-layout .friend-chat-head>.friend-avatar{display:none}
 .friend-layout .friend-chat-head small{display:none}
 .friend-head-long{display:none}.friend-head-short{display:inline}
 .friend-more summary{width:38px;height:38px}
}
/* What the conversation is about: a practice on the sun, the free conversation quieter. */
.friend-layout .friend-session-bar{padding:5px 18px;background:var(--sun-soft);border-bottom:0;font-size:11px;color:var(--ink)}
.friend-layout .friend-session-bar.free{background:#f6f6fb;color:#5e5e6d}
.friend-layout .friend-session-bar>.icon{width:13px;height:13px}
@media(max-width:620px){.friend-layout .friend-session-bar{padding:4px 14px;font-size:11px}.friend-session-card{padding:9px 12px;gap:10px}}

/* ===== Estúdio: the first screen of a call looks like a phone call. ===== */
.friend-call:has(.friend-dial){max-width:560px;border:0;border-radius:32px;padding:28px 28px 22px;color:#fff;background:var(--violet) radial-gradient(120% 70% at 50% 0%,#7c66ff 0%,transparent 65%)}
.friend-dial{gap:12px;max-width:none;width:100%}
.friend-dial-label{font-family:var(--mono);font-size:11px;letter-spacing:1.3px;color:#ffdc7a}
.friend-dial .friend-call-lesson{background:var(--sun);color:var(--ink)}
.friend-dial .friend-call-lesson.free{background:rgba(255,255,255,.16);color:#fff}
.friend-dial .friend-call-stage{margin:0 auto;padding:12px}
.friend-dial h2{color:#fff;font-size:32px;letter-spacing:-.6px;margin:0}
.friend-dial>p{margin:0;font-size:15px;color:#e6e0ff}
.friend-dial .friend-call-modes{display:flex;gap:4px;width:100%;max-width:360px;padding:4px;border-radius:999px;background:rgba(255,255,255,.14);margin-top:4px}
.friend-dial .friend-call-mode{position:relative;flex:1;justify-content:center;align-items:center;min-height:40px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:#fff;font-size:14px;font-weight:650;text-align:center}
.friend-dial .friend-call-mode input{position:absolute;opacity:0;pointer-events:none}
.friend-dial .friend-call-mode:has(input:checked){background:#fff;color:var(--violet)}
.friend-dial .friend-call-mode:has(input:focus-visible){outline:3px solid #ffdc7a;outline-offset:2px}
.friend-dial-hint{margin:0;font-size:13px;color:#e6e0ff;min-height:20px}
.friend-dial:has(input[value="hands-free"]:checked) .friend-dial-hint [data-mode="realtime"],.friend-dial:has(input[value="realtime"]:checked) .friend-dial-hint [data-mode="hands-free"]{display:none}
.friend-mic-test{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:14px;font-weight:600}
.friend-mic-test .icon{width:17px;height:17px}.friend-mic-test:hover{background:rgba(255,255,255,.22)}
.friend-mic-check{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;color:#e6e0ff}
.friend-mic-check>span:last-child{display:inline-flex;align-items:center;gap:6px}
.friend-mic-check[data-state="ok"]>span:last-child{color:#b9f5df;font-weight:650}.friend-mic-check .icon{width:15px;height:15px}
.friend-mic-check[data-state="blocked"]>span:last-child{color:#ffd0c8}
.friend-mic-meter{display:flex;align-items:center;gap:4px;height:28px}
.friend-mic-meter i{display:block;width:4px;height:28px;border-radius:2px;background:var(--sun);transform:scaleY(.18);transition:transform 80ms linear}
.friend-mic-check[data-state="asking"] .friend-mic-meter i,.friend-mic-check[data-state="blocked"] .friend-mic-meter i{background:rgba(255,255,255,.3)}
.friend-dial-consent{color:#e6e0ff;font-size:13px;margin:4px 0 0}.friend-dial-consent input{accent-color:var(--sun)}
.friend-dial-actions{display:flex;justify-content:center;align-items:flex-start;gap:56px;margin-top:6px}
.friend-dial-btn{display:flex;flex-direction:column;align-items:center;gap:8px;background:transparent;color:#fff;font-size:13px}
.friend-dial-btn .icon{box-sizing:content-box;width:26px;height:26px;padding:19px;border-radius:50%;background:rgba(255,255,255,.16);transition:transform .15s}
.friend-dial-btn.call{font-size:14px;font-weight:700}.friend-dial-btn.call .icon{width:30px;height:30px;padding:23px;background:var(--sun);color:var(--ink);box-shadow:0 14px 28px -12px rgba(255,200,61,.8)}
.friend-dial-btn:hover .icon{transform:translateY(-2px)}
.friend-dial-tip{display:inline-flex;align-items:center;gap:6px;margin:2px 0 0;font-size:12px;color:#e6e0ff}.friend-dial-tip .icon{width:14px;height:14px}
@media(max-width:620px){.friend-call:has(.friend-dial){border-radius:26px;padding:20px 16px 18px}.friend-dial h2{font-size:26px}.friend-dial .friend-call-stage{padding:4px}.friend-dial-actions{gap:44px}}
/* The call screen fits the window: a smaller face, and no "aula pausada" banner on phones. */
.friend-dial .friend-avatar.xl{width:104px;height:104px}
.friend-dial{gap:10px}.friend-dial-actions{margin-top:2px}
@media(max-width:620px){.chat-workspace:has(.friend-call)>main>.resume-banner{display:none}.chat-workspace:has(.friend-call)>main{padding:10px 10px 8px}
 .friend-dial .friend-avatar.xl{width:88px;height:88px}.friend-dial>p{font-size:14px}.friend-dial-btn .icon{width:22px;height:22px;padding:17px}.friend-dial-btn.call .icon{width:26px;height:26px;padding:20px}}

/* ===== Estúdio: during the call, the same phone screen as the dial. ===== */
.friend-call:has(.friend-call-top){max-width:560px;min-height:min(720px,calc(100dvh - 190px));display:flex;flex-direction:column;border:0;border-radius:32px;padding:22px 24px 20px;color:#fff;background:var(--violet) radial-gradient(120% 70% at 50% 0%,#7c66ff 0%,transparent 65%)}
.friend-call:has(.friend-call-top) .friend-call-body{flex:1;gap:12px}
.friend-call-top{font-size:13px;color:#fff}
.friend-call-status{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-weight:600}
.friend-call-status::before{content:'';width:8px;height:8px;border-radius:50%;background:#3ee0a8;flex-shrink:0}
.friend-call-top .friend-call-timer{margin-left:auto;color:#fff;font-size:14px}
.friend-call-limit{font-size:12px;color:#d9d2ff;font-weight:500}
.friend-call-body>.friend-call-lesson{background:transparent;color:#ffdc7a;padding:0;font-size:12px}
.friend-call:has(.friend-call-top) .friend-avatar.xl{width:104px;height:104px}
.friend-call:has(.friend-call-top) .friend-call-stage{padding:10px;margin:0 auto}
.friend-call:has(.friend-call-top) .friend-call-caption{color:#fff;font-size:22px;font-weight:600;line-height:1.3;min-height:0}
.friend-call:has(.friend-call-top) .friend-call-translate{background:transparent;border:0;color:#e6e0ff;padding:2px 6px}
.friend-call:has(.friend-call-top) .friend-call-translate[aria-pressed="true"]{background:rgba(255,255,255,.14)}
.friend-call:has(.friend-call-top) .friend-call-translation{background:rgba(255,255,255,.12);color:#f3f0ff}
.friend-call-you{width:100%;padding:10px 16px;border-radius:18px;background:rgba(255,255,255,.12);text-align:left}
.friend-call-you>span{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:#ffdc7a}
.friend-call-you:has(.friend-call-heard:empty){display:none}
.friend-call:has(.friend-call-top) .friend-call-heard{color:#fff;font-style:normal;font-size:16px;max-width:none}
.friend-call:has(.friend-call-top) .friend-call-paused{background:rgba(255,255,255,.12);color:#fff}
.friend-call:has(.friend-call-top) .friend-call-notice{color:#ffd0c8}
.friend-call:has(.friend-call-top) .friend-call-tip{background:var(--mint-soft);border:0;border-radius:16px;color:var(--ink)}
.friend-call:has(.friend-call-top) .friend-call-controls{margin-top:auto;gap:14px;padding-top:8px}
.friend-call:has(.friend-call-top) .friend-call-control{min-width:0;padding:0;background:transparent;color:#fff;font-size:12px;gap:6px}
.friend-call:has(.friend-call-top) .friend-call-control .icon{box-sizing:content-box;width:22px;height:22px;padding:17px;border-radius:50%;background:rgba(255,255,255,.16)}
.friend-call:has(.friend-call-top) .friend-call-control:hover:not(:disabled) .icon{background:rgba(255,255,255,.26)}
.friend-call:has(.friend-call-top) .friend-call-control:hover:not(:disabled){background:transparent}
.friend-call:has(.friend-call-top) .friend-call-control[aria-pressed="true"] .icon{background:#fff;color:var(--violet)}
.friend-call:has(.friend-call-top) .friend-call-control.hang-up{background:transparent}
.friend-call:has(.friend-call-top) .friend-call-control.hang-up .icon{background:#e8452f;color:#fff}
.friend-call:has(.friend-call-top) .friend-call-type{width:100%;max-width:none;margin-top:14px}
.friend-call:has(.friend-call-top) .friend-call-type input{border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;padding:12px 16px}
.friend-call:has(.friend-call-top) .friend-call-type input::placeholder{color:#d9d2ff}
.friend-call:has(.friend-call-top) .friend-call-text-send{background:rgba(255,255,255,.2)}
@media(max-width:620px){.friend-call:has(.friend-call-top){min-height:calc(100dvh - 160px - env(safe-area-inset-bottom));border-radius:26px;padding:16px 14px 14px}
 .friend-call:has(.friend-call-top) .friend-avatar.xl{width:88px;height:88px}.friend-call:has(.friend-call-top) .friend-call-caption{font-size:19px}
 .friend-call:has(.friend-call-top) .friend-call-controls{gap:10px}.friend-call:has(.friend-call-top) .friend-call-control .icon{padding:15px}}
.friend-call:has(.friend-call-top) .friend-call-tip{max-width:none}.friend-call:has(.friend-call-top) .friend-call-tip strong{color:#0b6e53}.friend-call:has(.friend-call-top) .friend-call-tip del{color:#a33a26}

/* ===== Estúdio: the end of the call, on the same phone screen. ===== */
.friend-call:has(.friend-ended){max-width:560px;border:0;border-radius:32px;padding:26px 26px 22px;color:#fff;background:var(--violet) radial-gradient(120% 70% at 50% 0%,#7c66ff 0%,transparent 65%)}
.friend-ended{gap:12px;max-width:none;width:100%}
.friend-ended .friend-avatar.xl{width:104px;height:104px}.friend-ended .friend-call-stage{margin:0 auto;padding:10px}
.friend-ended h2{color:#fff;font-size:32px;letter-spacing:-.6px;margin:0}
.friend-ended>p{margin:0;font-size:14px;color:#e6e0ff}
.friend-ended-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.friend-ended-stats span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);font-size:13px;font-weight:600}
.friend-ended-stats .icon{width:15px;height:15px}
.friend-ended .friend-call-tip{max-width:none;width:100%;background:var(--mint-soft);border:0;border-radius:18px;color:var(--ink);text-align:left}
.friend-ended .friend-call-tip strong{color:#0b6e53}.friend-ended .friend-call-tip del{color:#a33a26}
.friend-ended .friend-ended-note{font-size:12px;color:#d9d2ff}
.friend-ended .friend-ended-lesson{color:#ffdc7a;font-size:13px;font-weight:650}.friend-ended .friend-ended-lesson .icon{width:14px;height:14px}
@media(max-width:620px){.friend-call:has(.friend-ended){border-radius:26px;padding:18px 14px 16px}.friend-ended h2{font-size:26px}.friend-ended .friend-avatar.xl{width:88px;height:88px}}