/* V31 R17 — quiet, compact UI. Keep the same controls/IDs while reducing
   visual noise and making the main action reachable with one thumb. */

/* Home navigation: the primary action lives in the bottom/top navigation. */
.homeNavStart{overflow:visible!important;color:#b3295d!important;font-weight:800!important}
.homeNavStartOrb{display:grid;place-items:center;width:42px;height:42px;border-radius:15px;background:linear-gradient(145deg,#d83b70,#b92559);box-shadow:0 8px 20px #b9255930;color:#fff;transition:transform .18s ease,box-shadow .18s ease}
.homeNavStartOrb svg{width:20px!important;height:20px!important;stroke:#fff!important;fill:none!important;stroke-width:2!important}
.homeNavStart:active .homeNavStartOrb{transform:scale(.95);box-shadow:0 4px 12px #b9255925}

/* Session actions are a small icon dock instead of a tall stack of buttons. */
.sessionActions{width:min(100%,430px);display:flex;flex-direction:row;align-items:stretch;justify-content:center;gap:7px;margin-top:8px}
.sessionAction{position:relative;display:flex;flex:1 1 0;min-width:0;min-height:52px;align-items:center;justify-content:center;gap:7px;padding:8px 10px;border:1px solid #eed9e3;border-radius:17px;background:#fffdfedb;color:#835f70;font:inherit;font-size:11px;font-weight:700;box-shadow:0 5px 16px #7f29430a;cursor:pointer;touch-action:manipulation}
.sessionActionIcon{display:grid;place-items:center;width:21px;height:21px;flex:none;color:#b83a69}
.sessionActionIcon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sessionActionLabel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sessionActionFinish{color:#a48290}.sessionActionFinish .sessionActionIcon{color:#a48290}
.sessionAction:active:not(:disabled){transform:scale(.98)}
.sessionActions .conversationToggle{width:auto;min-width:0;min-height:52px!important;padding:8px 10px;border:1px solid #eed9e3!important;border-radius:17px!important;background:#fffdfedb!important;backdrop-filter:none;box-shadow:0 5px 16px #7f29430a}
.sessionActions .chatCount{position:absolute;right:5px;top:4px;display:grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:#f8e8ef;color:#ab4870;font-size:8px;line-height:1}
.sessionActions .conversationToggle.hasNew:after{right:2px;top:2px;width:6px;height:6px;border-width:2px}
.sessionActions .micPermission{display:none;margin:0;max-width:none}
.sessionActions .micPermission.show{display:flex}

/* Home and session get their strongest simplification on phones. */
@media(max-width:720px){
  .homeShell{max-width:500px;padding:12px 16px calc(94px + env(safe-area-inset-bottom,0px))}
  .homeGreeting{margin:0 0 6px;font-size:12px}.homeLogout{min-height:36px;padding:5px 7px;font-size:11px}
  .homeShell .homeWelcome{min-height:118px;margin:0 0 12px;padding:14px 14px 13px;border-radius:22px;box-shadow:none}
  .homeShell .homeWelcome h1{font-size:25px;margin:4px 0 5px}.homeShell .homeWelcome p{max-width:175px;margin:0;font-size:10px;line-height:1.4}
  .homeShell .homeWelcome .mascotStage{width:31%;max-width:108px;margin:0 -2px 0 2px}
  .homeShell .homeWelcome #start{display:none}
  .homeShell .homeWelcome #startPaid{min-height:0!important;width:auto;min-width:0;margin:7px 0 0!important;padding:0!important;border:0;background:transparent;box-shadow:none;color:#ad3a69;font-size:10px;text-decoration:underline;text-decoration-color:#e7b2c7;text-underline-offset:3px}
  .homeShell .homeWelcome small{display:none}
  .homeSetup{padding:0 1px}.desktopSetupHeading,.setupIntro{display:none!important}
  .homeModes{gap:8px;margin-bottom:9px}.homeModes button{min-height:54px;padding:9px 7px;border-radius:16px;font-size:12px;gap:7px}.homeModes svg{width:23px;height:23px}
  .homeSetup>label[for="targetRole"]{display:block;margin:0 0 5px;font-size:10px;color:#987482}.homeSetup>label[for="targetRole"] .tiny{font-size:9px}
  #targetRole{min-height:42px;margin:0 0 7px;padding:9px 11px;border-radius:13px;font-size:16px}
  .homeSetup>.reviewSample{min-height:34px;margin:0 0 8px;font-size:10px;gap:7px}.homeSetup>.reviewSample input{width:16px;height:16px;min-height:16px}
  .homeUpload{min-height:55px;margin-bottom:10px;padding:9px 10px;border-radius:15px;gap:9px}.uploadMark{width:29px;height:29px;font-size:20px}.homeUpload b{font-size:11px}.homeUpload small{font-size:9px;margin-top:2px}
  .homeLevelHeading{margin-bottom:5px}.homeLevelHeading label{font-size:10px}.homeLevelHeading span{display:none}
  .homeLevels{gap:6px;margin-bottom:8px}.homeLevels button{min-height:38px;border-radius:12px;font-size:11px}
  .homeLanguage{gap:10px;padding-bottom:5px}.homeLanguage label{font-size:10px}.homeLanguage select{min-height:39px;padding:6px 9px;border-radius:12px;font-size:13px}
  .homeOptions summary{min-height:39px;font-size:10px}.homeOptions summary span{font-size:17px}
  .homeOptionsBody{padding:3px 0}.homeOptionsBody label{font-size:9px}.homeOptionsBody input,.homeOptionsBody select{min-height:40px;margin:3px 0 7px;padding:7px 9px;border-radius:12px}
  .homeVoucher{margin-top:5px;padding-top:6px}.homeVoucher>label{margin-bottom:5px;font-size:10px}.homeVoucherRow input,.homeVoucherRow button{min-height:39px;border-radius:12px}.homeVoucherRow button{padding:6px 10px;font-size:10px}
  .homeSetup>.formCheck{min-height:34px;margin:3px 0 0;font-size:10px}.homeSetup>.formCheck input{width:16px;min-height:16px}
  .homeSetup #startError{margin:5px 0;font-size:10px}.homeSetup #resumeSession:not(:empty){margin-top:7px}.homeSetup #resumePaidSession{min-height:40px;font-size:11px}

  .homeNav{bottom:7px;width:min(468px,calc(100% - 20px));padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));border-radius:21px;box-shadow:0 8px 30px #72233f1b}
  .homeNav button{min-height:52px;gap:3px;font-size:9px;border-radius:13px}.homeNav svg{width:19px;height:19px}
  .homeNavStart{margin-top:-15px;min-height:67px!important}.homeNavStartOrb{width:47px;height:47px;border-radius:17px;border:4px solid #fff}.homeNavStart>span:last-child{margin-top:-2px;color:#ae315f}

  /* Interview is one-screen first; secondary controls live in a bottom dock. */
  .sessionShell{height:100dvh;min-height:0;overflow:hidden;padding:10px 13px calc(79px + env(safe-area-inset-bottom,0px));}
  .sessionShell>.brand{font-size:18px;min-height:31px}.sessionShell>.brand .byGrowsia{font-size:8px;padding:4px 6px}
  .sessionShell .voiceFocus{height:calc(100dvh - 120px - env(safe-area-inset-bottom,0px));min-height:0;justify-content:center;padding:1px 0 2px;overflow:hidden}
  .sessionClock{width:142px;margin:0 0 2px;padding:7px 10px;border-radius:16px}.sessionClock .timer{font-size:18px}.clockTop span,.clockBottom{font-size:8px}.timeTrack{margin:4px 0 3px}
  .sessionCompanion{width:min(51vw,210px)!important;margin:0 auto!important}.sessionShell .orbIdentity{margin-top:-3px!important;gap:5px;font-size:17px}.sessionShell .orbIdentity b{font-size:19px!important}.sessionShell .orbIdentity span{font-size:9px}
  .sessionShell .voiceStatus{min-height:42px;width:min(100%,320px);margin-top:5px;padding:7px 11px;border-radius:17px}.sessionShell .voiceStatus .statusTitle{font-size:11px;line-height:1.3}.sessionShell .voiceStatus .statusSub{font-size:9px;line-height:1.3;margin-top:0}
  .sessionShell .voiceHint{min-height:15px;padding:3px 0 0;font-size:9px;line-height:1.3}.sessionShell .disciplineNotice{margin:3px auto;padding:5px 8px;font-size:9px;line-height:1.35}
  .demoProgress{font-size:9px!important;padding:5px 8px!important;margin-bottom:2px!important}
  .sessionActions{position:fixed;z-index:35;left:50%;bottom:max(8px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(456px,calc(100% - 20px));gap:4px;margin:0;padding:6px;border:1px solid #edd9e2;border-radius:20px;background:#fffdfef2;backdrop-filter:blur(18px);box-shadow:0 8px 32px #69213920}
  .sessionAction,.sessionActions .conversationToggle{min-height:51px!important;gap:3px;padding:6px 5px;border:0!important;border-radius:14px!important;background:transparent!important;box-shadow:none;font-size:9px;flex-direction:column}
  .sessionActionIcon{width:22px;height:22px}.sessionActionIcon svg{width:20px;height:20px}.sessionActionFinish{color:#aa8795}
  .sessionActions .chatCount{right:8px;top:3px}.sessionActions .micPermission.show{display:flex;background:#fff0f6!important;color:#aa285b}
  .sessionActions .voiceDone:not([hidden]){position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%);width:auto;min-width:138px;margin:0;background:#fff;border:1px solid #eecedb;box-shadow:0 6px 18px #75244115}

  /* Transcript = short bottom sheet, not another full screen. */
  .conversationPanel{height:min(71dvh,610px)!important;max-height:calc(100dvh - 44px)!important;padding:8px 13px max(12px,env(safe-area-inset-bottom))!important;border-radius:24px 24px 0 0!important}
  .conversationHandle{margin-bottom:4px}.conversationHeader{padding-bottom:5px}.panelMascot{width:34px;height:34px}.conversationHeader .eyebrow{display:none}.conversationHeader h2{margin:0;font-size:17px}.conversationClose{width:34px;height:34px;min-height:34px;font-size:20px}
  .conversationPanel .conversationMeta,.conversationPanel .sessionGuide{display:none!important}
  .conversationPanel .chat{min-height:70px;padding:6px 1px 9px;gap:7px}.conversationPanel .bubble{max-width:91%;padding:9px 11px;font-size:12px;line-height:1.45;border-radius:15px}
  .transcriptDock{padding-top:7px}.transcriptLabel{margin-bottom:4px;font-size:8px}.conversationPanel .liveTranscript{min-height:42px;max-height:68px;padding:8px 9px;border-radius:13px;font-size:12px;line-height:1.35}.conversationPanel .userVoiceFeedback{padding:5px 7px;margin-top:5px;min-height:41px}.conversationPanel .userVoiceOrb{width:29px;height:29px;flex-basis:29px}.conversationPanel .userVoiceLabel b{font-size:10px}.conversationPanel .userVoiceLabel>span{font-size:8px}.conversationPanel .userVoiceWave{height:22px}
  .textAnswerForm{padding:7px!important}.textAnswerForm label{font-size:9px}.textAnswerForm textarea{min-height:54px;height:60px;max-height:90px;padding:8px 9px;font-size:16px}.textAnswerActions .btn,.textVoiceSwitch{min-height:38px!important;font-size:10px!important;padding:6px 8px!important}
}

@media(max-width:360px){
  .sessionCompanion{width:min(49vw,178px)!important}.sessionShell .voiceStatus{margin-top:3px}.sessionActionLabel{font-size:8px}
  .homeShell .homeWelcome{min-height:108px;padding:12px}.homeShell .homeWelcome h1{font-size:22px}.homeModes button{min-height:50px}.homeNavStartOrb{width:44px;height:44px}
}

@media(max-height:650px) and (max-width:720px){
  .sessionShell{padding-top:7px}.sessionShell>.brand{font-size:16px}.sessionShell .voiceFocus{height:calc(100dvh - 103px - env(safe-area-inset-bottom,0px))}
  .sessionCompanion{width:min(37vh,160px)!important}.sessionClock{padding:5px 9px}.sessionShell .orbIdentity{display:none}.sessionShell .voiceHint{display:none}.sessionShell .voiceStatus{margin-top:2px;min-height:35px;padding:5px 9px}.sessionShell .voiceStatus .statusSub{display:none}
  .conversationPanel{height:min(88dvh,570px)!important}
}

@media(min-width:721px){
  .homeNavStartOrb{width:28px;height:28px;border-radius:10px;box-shadow:none}.homeNavStartOrb svg{width:15px!important;height:15px!important}.homeNavStart{flex-direction:row!important;gap:8px!important}
  .sessionAction{max-width:132px}.sessionActions .conversationToggle{max-width:150px}
}

@media(prefers-reduced-motion:reduce){.homeNavStartOrb,.sessionAction{transition:none}}