/* iPhone / remote-browser additions. Loaded after style.css; desktop layout is unchanged. */
body.ts-phone .app{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
body.ts-phone form{padding-bottom:max(11px,env(safe-area-inset-bottom))}
/* Stop iOS Safari zooming in when the text box is focused (it zooms for fonts under 16px). */
body.ts-phone input,body.ts-phone #input{font-size:16px!important}
body.ts-phone .statusbar button{width:40px;height:40px;font-size:17px}
#tsPhoneTap{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
 padding:24px;border:0;background:rgba(3,10,18,.88);color:#eef8ff;font:inherit;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer}
#tsPhoneTap b{font-size:20px;letter-spacing:.4px;padding:16px 26px;border-radius:999px;background:#1179bd;box-shadow:0 0 0 6px #1179bd33}
#tsPhoneTap small{max-width:300px;font-size:13px;line-height:1.45;color:#a9bac5;text-align:center}
#tsPhoneTap:disabled b{opacity:.6}

/* More room for the conversation on phones: slimmer header/status bar, smaller logo stage,
   typing bar flush at the bottom. Once the conversation starts the logo stage shrinks again.
   (The keyboard rules below still take over while typing.) */
body.ts-phone .app{grid-template-rows:48px clamp(118px,19vh,170px) 48px minmax(120px,1fr) auto!important;grid-auto-rows:auto!important}
body.ts-phone.ts-chatting .app{grid-template-rows:44px clamp(84px,12vh,120px) 44px minmax(160px,1fr) auto!important}
body.ts-phone header{padding-top:4px!important;padding-bottom:4px!important}
body.ts-phone .brand{font-size:20px!important;line-height:1.05!important}
body.ts-phone .brand small{font-size:7px!important;letter-spacing:2.6px!important}
body.ts-phone.ts-chatting .brand small{display:none!important}
body.ts-phone .statusbar{height:auto!important;min-height:0!important;padding:3px 10px!important;margin:0 8px!important;width:calc(100% - 16px)!important;box-sizing:border-box!important}
body.ts-phone .statusbar button{width:36px!important;height:36px!important;min-width:36px!important;font-size:15px!important}
body.ts-phone #status{font-size:15px!important}
body.ts-phone .chat{margin:4px 6px!important;padding:8px 8px 10px!important}
body.ts-phone .msg{margin-bottom:8px!important;padding:10px 12px!important;max-width:92%!important}
/* The app is exactly as tall as the VISIBLE screen (Safari's toolbars excluded), so the
   typing bar is never cut off at the bottom. */
html.ts-phone-root,html.ts-phone-root body{height:var(--ts-vh,100dvh)!important;overflow:hidden!important}
body.ts-phone .app{height:var(--ts-vh,100dvh)!important;max-height:var(--ts-vh,100dvh)!important;box-sizing:border-box!important}
body.ts-phone form{height:auto!important;margin:0 6px max(6px,env(safe-area-inset-bottom))!important;width:calc(100% - 12px)!important;
 box-sizing:border-box!important;padding:4px 5px 4px 6px!important;grid-template-columns:1fr 38px!important;gap:6px!important;align-items:center!important}
body.ts-phone form input{height:38px!important;min-height:0!important;padding-top:0!important;padding-bottom:0!important}
body.ts-phone form button{height:38px!important;width:38px!important;min-width:38px!important;padding:0!important}
/* logo stage */
body.ts-phone .tsx-mark{width:min(84px,12vh)!important;top:46%!important}
body.ts-phone.ts-chatting .tsx-mark{width:min(62px,8.5vh)!important;top:50%!important}
body.ts-phone .tsx-hint{bottom:5%!important;font-size:11px!important;padding:3px 10px!important}
body.ts-phone.ts-chatting .tsx-hint{display:none!important}

/* Keyboard open: fit the app into the visible area above the keyboard and fold the hero image away. */
html.ts-kb,html.ts-kb body{height:var(--ts-vh,100dvh)!important;overflow:hidden!important}
body.ts-phone.ts-kb .app{height:var(--ts-vh,100dvh)!important;grid-template-rows:54px 0 50px minmax(60px,1fr) auto 64px 0!important;padding-top:0}
body.ts-phone.ts-kb .hero{visibility:hidden!important;min-height:0!important;height:0!important;overflow:hidden!important}
body.ts-phone.ts-kb form{padding-bottom:8px}

/* After a conversation ends the stage stays compact; the tap hint comes back, small. */
body.ts-phone.ts-chatting.ts-standby .tsx-hint{display:block!important;bottom:3%!important;font-size:10px!important;padding:2px 9px!important}
body.ts-phone.ts-chatting.ts-standby .tsx-mark{top:44%!important}