/* A portrait and a conversation, not a full-width Director dashboard. */
body[data-mode=girlfriend]{--line:#383b47;--muted:#b0b3c1;--white:#f4f5fa;background:#171a24;color:var(--white);font-family:"PingFang SC","Hiragino Sans",Arial,sans-serif}
body[data-mode=girlfriend] .masthead{height:78px;border-bottom:1px solid #ffffff0a;padding-inline:4vw}
body[data-mode=girlfriend] .tagline{font-size:12px;letter-spacing:0;color:var(--muted)}
.back-to-director{display:none}
body[data-mode=girlfriend] .stage{max-width:1140px;margin:auto;min-height:calc(100svh - 145px);padding:30px 32px;display:grid;grid-template-columns:minmax(240px,390px) minmax(300px,1fr);align-items:center;gap:clamp(28px,5vw,72px)}
body[data-mode=girlfriend] .screen{width:100%;max-height:none;aspect-ratio:9/16;border-radius:20px;box-shadow:none;background:#10131b}
body[data-mode=girlfriend] .screen video{object-fit:contain}
.call-curtain{position:absolute;inset:0;z-index:2;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility 0s linear .45s}
.screen[data-call-phase=dialing] .call-curtain,.screen[data-call-phase=ending] .call-curtain,.screen[data-call-phase=ended] .call-curtain,.screen[data-call-phase=error] .call-curtain{opacity:1;visibility:visible;transition:opacity .24s ease,visibility 0s}
.screen[data-call-phase=ending] .call-curtain img,.screen[data-call-phase=ended] .call-curtain img,.screen[data-call-phase=error] .call-curtain img{filter:brightness(.55) saturate(.8)}
.call-curtain img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.7) saturate(.88)}
.call-curtain-shade{position:absolute;inset:0;background:linear-gradient(180deg,#05030918 15%,transparent 36%,#12081126 58%,#10070de8 100%)}
.call-hud{position:absolute;left:20px;right:20px;bottom:15%;display:flex;align-items:center;flex-direction:column;gap:8px;text-align:center;color:#fff8fa;text-shadow:0 2px 14px #0009;font-family:"PingFang SC","Hiragino Sans",Arial,sans-serif}
.call-hud strong{font-size:clamp(20px,3vw,30px);font-weight:600;letter-spacing:-.02em}
.call-hud>span:last-child{font-size:12px;color:#fff9;letter-spacing:.06em}
.screen[data-call-phase=ending] .call-signal,.screen[data-call-phase=ended] .call-signal,.screen[data-call-phase=error] .call-signal{display:none}
.call-signal{position:relative;display:grid;place-items:center;width:62px;height:62px;margin-bottom:14px;border:1px solid #fff9;border-radius:50%;background:#ffffff21;box-shadow:0 0 0 8px #ffffff16;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.call-signal::before,.call-signal::after{content:"";position:absolute;inset:-9px;border:1px solid #ffd8e46b;border-radius:50%;animation:calling-ring 2.8s ease-out infinite}
.call-signal::after{animation-delay:1.4s}
.call-signal svg{width:25px;height:25px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes calling-ring{0%{transform:scale(.78);opacity:.85}100%{transform:scale(1.7);opacity:0}}
@media(prefers-reduced-motion:reduce){.call-signal::before,.call-signal::after{animation:none;opacity:.38}}
body[data-mode=girlfriend] .voice-stage{width:100%;text-align:left;min-width:0}
.companion-heading h1{font-family:Georgia,serif;font-size:64px;font-weight:400;letter-spacing:-2px;margin:0 0 8px}
.companion-heading #gfCharacter{font:inherit;letter-spacing:inherit;line-height:1.15;width:auto;max-width:100%;padding:0 8px 0 0;margin:0;border:0;background:transparent;color:inherit;cursor:pointer}
.companion-heading #gfCharacter option{font:18px Arial,sans-serif;background:#171a24;letter-spacing:0}
.companion-heading #gfCharacter:disabled{cursor:default;opacity:.65}
.companion-heading p{color:#b0b3c1;font-size:15px;line-height:1.6;margin:0 0 36px}
body[data-mode=girlfriend] .transcript-state{font-size:12px;letter-spacing:0;text-transform:none;margin:0 0 12px;color:#b0b3c1}
body[data-mode=girlfriend] .transcript{font-family:inherit;font-size:clamp(22px,2.4vw,30px);letter-spacing:0;line-height:1.5;min-height:3em;max-height:4.5em;margin:0 0 24px}
.reply-stack{display:none}
body[data-mode=girlfriend] .voice-pill{width:100%;min-width:0;border-radius:14px;box-shadow:none;background:#222735;padding:12px 16px;gap:14px}
body[data-mode=girlfriend] .voice-copy strong{font-size:15px}
body[data-mode=girlfriend] .voice-copy small{font-size:12px;line-height:1.5}
body[data-mode=girlfriend] .voice-badge{display:none}
body[data-mode=girlfriend] .privacy{font-size:12px;line-height:1.6;color:#b0b3c1;margin:12px 0 20px}
body[data-mode=girlfriend] .stage-actions{justify-content:flex-start;gap:12px;margin-bottom:24px}
body[data-mode=girlfriend] .stage-actions button{font-size:14px;padding:12px 24px;border-radius:999px;min-height:44px}
body[data-mode=girlfriend] #start{background:#c6c5ef;color:#20213b}
body[data-mode=girlfriend] #stop{border:1px solid #935b68;color:#f0acb9}
body[data-mode=girlfriend] .conversation-starters{display:flex;gap:8px;flex-wrap:wrap}
.conversation-starters button{font-size:12px;padding:9px 12px;border-radius:20px;color:#c5c8d5;text-align:left}
body[data-mode=girlfriend] .command{margin:12px 0 0;background:#10131b;border-radius:14px}
body[data-mode=girlfriend] .command textarea{min-height:72px;font-size:14px;line-height:1.6}
body[data-mode=girlfriend] .command button{width:64px;font-size:13px;color:#d5d2ff;flex-shrink:0}
body[data-mode=girlfriend] #status{font-size:12px;line-height:1.7;margin:14px 0 0;color:#b0b3c1;padding:0}
body[data-mode=girlfriend] .footer{max-width:1140px;margin:auto;padding:16px 32px;letter-spacing:0;font-size:12px;align-items:center}
.language-label{display:flex;gap:10px;align-items:center;font-size:11px}.language-label select{width:auto;margin:0;padding:4px 8px;font-size:12px}
body[data-mode=girlfriend] .preview-label{letter-spacing:0;max-width:calc(100% - 28px);line-height:1.5}
body[data-mode=girlfriend] .screen:fullscreen{width:100%;height:100%;max-height:none;border-radius:0}
@media(min-width:761px) and (max-height:850px){body[data-mode=girlfriend] .stage{grid-template-columns:minmax(220px,320px) minmax(300px,1fr);max-width:1000px;padding-block:20px}.companion-heading h1{font-size:48px}.companion-heading p{margin-bottom:22px}body[data-mode=girlfriend] .transcript{margin-bottom:16px;min-height:2em}}
@media(max-width:760px){body[data-mode=girlfriend] .masthead{height:64px;padding:10px 16px}.masthead .brand{font-size:22px}body[data-mode=girlfriend] nav{gap:5px}body[data-mode=girlfriend] .connection{position:static;margin-right:0;letter-spacing:0;font-size:9px}body[data-mode=girlfriend] #clock{display:none}body[data-mode=girlfriend] #micToggle{display:none}body[data-mode=girlfriend] .stage{display:flex;flex-direction:column;padding:18px 18px 10px;gap:20px;min-height:0}body[data-mode=girlfriend] .screen{width:min(100%,calc(32svh * 9 / 16));max-height:none;border-radius:16px}.companion-heading{display:flex;align-items:baseline;gap:14px}.companion-heading h1{font-size:32px;letter-spacing:-1px}.companion-heading p{font-size:12px;margin:0 0 18px}body[data-mode=girlfriend] .transcript{font-size:20px;min-height:0;max-height:3em;margin-bottom:16px}body[data-mode=girlfriend] .voice-pill{padding:8px 12px}body[data-mode=girlfriend] .voice-copy small{font-size:11px}body[data-mode=girlfriend] .privacy{font-size:11px;margin:9px 0 14px}body[data-mode=girlfriend] .stage-actions{margin-bottom:16px}body[data-mode=girlfriend] .footer{padding:16px 18px}body[data-mode=girlfriend] .screen-drop-hint{font-size:13px}}
