/* Shared low-profile navigation dock; reserve its measured height. */
:root{--dock-height:calc(76px + env(safe-area-inset-bottom,0px))}
html{scroll-padding-bottom:calc(var(--dock-height) + 24px)}
body.has-utility-footer{padding-bottom:var(--dock-height)}
.utility-footer{position:fixed;inset:auto 0 0;z-index:40;border-top:1px solid #d9d6cb;background:#f6f3ec;color:#343d30;padding:8px 24px calc(8px + env(safe-area-inset-bottom,0px));box-sizing:border-box;font-family:'DM Sans','Noto Sans TC','Microsoft JhengHei',sans-serif;line-height:1.4}
.utility-footer *{box-sizing:border-box}
.utility-footer .dock-inner{max-width:1440px;margin:0 auto;display:flex;align-items:center;gap:32px}
.utility-footer .dock-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;flex:1;order:2;min-width:0}
.utility-footer .dock-links a{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4px 8px;min-height:44px;text-decoration:none;font-size:12px;line-height:1.5;min-width:0;color:inherit;border-radius:3px}
.utility-footer .dock-links a+a{border-left:1px solid #d9d6cb}
.utility-footer .dock-links a:hover{color:#a45d43;background:#eeeade}
.utility-footer .dock-links a[aria-current=page]{color:#a45d43}
.utility-footer .translation{display:block;margin:1px 0 0;color:#626759;font-size:10px;font-weight:400;letter-spacing:0;line-height:1.4}
.utility-footer .dock-short{display:none}
.utility-footer .dock-meta{flex:none;display:flex;flex-direction:column;gap:5px;min-width:0}
.utility-footer .dock-email{font-size:12px;text-decoration:none;color:inherit;white-space:nowrap;line-height:1.4}
.utility-footer .footer-note{border:0;margin:0;padding:0;display:flex;gap:6px;align-items:center;font-size:10px;line-height:1.4;color:#626759;white-space:nowrap}
.utility-footer .footer-note .translation{display:inline;margin:0;font-size:10px}
.utility-footer .dock-copyright{font-size:9px;color:#626759}
html[data-reading=en] .utility-footer [data-lang=zh],html[data-reading=zh] .utility-footer [data-lang=en]{display:none!important}
html[data-reading=en] .utility-footer .dock-links .translation{font-size:12px;color:inherit;margin:0}
body.talk-shell.has-utility-footer{height:100vh;height:100dvh;overflow:hidden}
@media(max-width:900px){
 .utility-footer{padding:4px 8px calc(4px + env(safe-area-inset-bottom,0px))}
 .utility-footer .dock-inner{display:block}
 .utility-footer .dock-links a{padding:3px 2px;min-height:40px;font-size:clamp(10px,3vw,12px);white-space:nowrap}
 .utility-footer .dock-links .translation{font-size:10px}
 .utility-footer .dock-full{display:none}
 .utility-footer .dock-short{display:inline}
 .utility-footer .dock-meta{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:14px;min-height:22px;padding-top:3px;border-top:1px solid #e4e1d7}
 .utility-footer .dock-email{font-size:11px}
 .utility-footer .footer-note,.utility-footer .footer-note .translation{font-size:10px}
 .utility-footer .dock-copyright{display:none}
 html[data-reading=en] .utility-footer .dock-links .translation{font-size:12px}
}
@media(max-height:420px){.utility-footer .dock-meta{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Keep the chat composer above the dock even in short viewports. */
body.talk-shell .log{min-height:0}
body.talk-shell .composer .help{margin-bottom:0}
@media(max-height:600px){
 body.talk-shell .top .wrap{padding-block:6px;gap:4px;min-height:72px}
 body.talk-shell .chat-head{padding-block:7px}
 body.talk-shell .chat-head .title small{display:none}
 body.talk-shell #switch{white-space:nowrap;flex:none;font-size:12px!important}
 body.talk-shell .log{padding-block:8px}
 body.talk-shell .composer{padding-block:8px}
 body.talk-shell .composer textarea{max-height:clamp(56px,16vh,80px)}
 body.talk-shell .composer .help{font-size:11px;line-height:1.4}
}

@media(max-height:420px){
 body.talk-shell .top .wrap{flex-wrap:nowrap;min-height:42px}
 body.talk-shell .top .home-brand{min-height:0;gap:0;flex-shrink:1}
 body.talk-shell .top .brand-art,body.talk-shell .top .brand-en,body.talk-shell .top .brand-home{display:none}
 body.talk-shell .top .brand-name{font-size:12px;white-space:nowrap}
 body.talk-shell .top-links{flex:none;gap:8px}
 body.talk-shell .top a.home{font-size:10.5px}
}