/* Character-first small-screen layout, including Chromium 74 fallbacks. */
:root{--bg:#f6f3e9;--panel-bg:#fffdf7;--text:#2b4338;--text-light:#687568;--border:#dedfce;--accent:#3c6b51;--accent-strong:#31563f;--accent-light:#dce8d4;--bubble-user:#e4eddd;--bubble-sakura:#fff7e9}
html{-webkit-text-size-adjust:100%}
body{display:flex;flex-direction:column;height:100vh;min-height:0;overflow:hidden;background:var(--bg)}
button,a,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus,a:focus,summary:focus{outline:3px solid #cfaa58;outline-offset:2px}
header.app-header{position:relative;z-index:800;flex:0 0 auto;min-height:56px;padding:6px 20px;gap:0;border:0;background:#f6f3e9;box-shadow:none;flex-wrap:nowrap}
.brand-mark,.brand-copy .sub,.clock-card{display:none}
.brand-copy h1{font-size:18px;letter-spacing:2px;font-weight:600;color:#637260}
.header-actions{gap:0;margin-left:auto}.header-actions>details,.header-actions>.header-action{margin-left:8px}
.header-action,.staff-tools>summary{min-height:44px;padding:0 12px;border:1px solid #dedfce;border-radius:14px;background:#fffcf5;font-size:14px;font-weight:500;white-space:nowrap}
.character-current{font-size:14px;color:#3c6046;margin-left:4px}
.camera-header-button{width:44px;padding:0;font-size:0}.camera-header-button:before{content:'📷';font-size:18px}.camera-header-button.active{background:#416a51;border-color:#416a51}
.character-menu{top:50px;border-color:#dce1d0;border-radius:17px}.character-option[aria-checked='true']{background:#eaf0e2;border-color:#cbdabf}.character-option-icon{background:#f3ead7}.character-reset{background:#f7f7ee;border-color:#d5dcca}
.staff-menu-panel{top:50px;width:420px;max-width:92vw;max-height:calc(100vh - 90px);overflow:auto}.asr-control-panel{width:370px;max-width:92vw;max-height:calc(100vh - 100px);overflow:auto}
main.companion-shell{display:block;flex:1 1 0;height:0;min-height:0;padding:0;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#fdfaf1 0%,#ede8d8 100%)}
.home-welcome{position:absolute;z-index:25;left:20px;top:50%;transform:translateY(-50%)}
.home-shortcuts{display:flex;flex-direction:column;margin:0}
.home-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:68px;min-height:72px;padding:8px 4px;border:1px solid #dcdfcf;border-radius:18px;background:#fffdf2d9;color:#49634e;text-decoration:none;font-family:inherit;cursor:pointer;box-shadow:0 3px 10px #344d3008}
.home-card+.home-card{margin-top:12px}.home-card:hover,.home-card:active{background:#e8efde}
.home-card-icon{display:block;width:27px;height:27px;margin-bottom:4px}.home-card-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.home-card-copy strong{font-size:14px;line-height:1.4;letter-spacing:1px;font-weight:500}
.home-card .reminder-badge{position:absolute;top:-4px;right:-4px;margin:0;font-size:11px;line-height:20px;min-width:20px}
.companion-stage{top:0;right:0;bottom:0;left:0;background:transparent;overflow:hidden}
.companion-stage::before,.companion-stage::after{display:none}
#digitalAvatarPanel{left:50%;top:39%;bottom:auto;width:80%;max-width:900px;min-width:0;height:108%;max-height:108%;transform:translate(-50%,-50%);filter:drop-shadow(0 14px 18px #5d52331a)}
#digitalAvatarPanel[data-character-mode='live2d']{left:50%;top:46%;width:80%;max-width:900px;min-width:0;height:98%;max-height:98%}
.video-panel{top:12px;right:16px;width:150px;background:#fffdf5f5;border:1px solid #dfe3d2;border-radius:16px}.video-stage{height:100px;aspect-ratio:auto}.video-placeholder,.video-placeholder::after{top:0;right:0;bottom:0;left:0}
.chat-panel{left:50%;right:auto;bottom:16px;transform:translateX(-50%);width:auto;min-width:0;max-width:calc(100% - 32px);height:auto;min-height:0}
/* Conversation records remain in More without covering the character. */
.chat-panel .messages{display:none}
.input-area{position:static;display:flex;align-items:center;gap:0;min-height:58px;padding:6px 7px 6px 18px;border:1px solid #d9deca;border-radius:30px;background:#fffdf2f2;box-shadow:0 4px 20px #4050360d}
.voice-orb{flex:0 0 8px;width:8px;height:8px;margin:0 12px 0 0;box-shadow:0 0 0 4px #9a918b15}
.voice-state-copy{flex:0 1 auto}.voice-state-copy strong{font-size:14px;line-height:1.4;font-weight:500;white-space:nowrap}.voice-status{display:none}
.input-area #micBtn{flex:0 0 auto;min-height:44px;min-width:104px;max-width:190px;margin-left:16px;padding:8px 16px;border:1px solid #426c50;border-radius:24px;background:#426c50;color:#fffdf1;font-size:14px;line-height:1.4;white-space:normal;box-shadow:none}
.input-area #micBtn:disabled{background:#eff0e7;color:#75806c;border-color:#dce1d1;opacity:1}
.reminder-modal,.modal-overlay{top:0;right:0;bottom:0;left:0}.reminder-center-card{width:680px;max-width:94vw;max-height:80vh;border:1px solid #dbdfcc;border-radius:22px;background:#fffdf5}.reminder-center-header{padding:20px 24px}.reminder-center-header button{width:44px;height:44px;border-radius:50%;background:#edf0e4;font-size:25px}.reminder-empty{font-size:17px;line-height:1.8;padding:42px 24px}.care-banner{width:560px;max-width:94vw}
@media(max-width:600px){header.app-header{padding:6px 12px}.brand-copy h1{font-size:16px;letter-spacing:1px}.header-actions>details,.header-actions>.header-action{margin-left:6px}.character-picker>summary{width:44px;padding:0}.home-welcome{left:12px;top:auto;bottom:90px;transform:none}.home-card{width:54px;min-height:59px;border-radius:15px}.home-card+.home-card{margin-top:9px}.home-card-icon{width:23px;height:23px}.home-card-copy strong{font-size:12px}#digitalAvatarPanel,#digitalAvatarPanel[data-character-mode='live2d']{width:100%;height:98%;max-height:98%;top:46%}.chat-panel{bottom:12px;max-width:calc(100% - 20px)}.input-area{padding-left:14px}.voice-state-copy strong{font-size:12px}.input-area #micBtn{margin-left:10px;min-width:94px;max-width:140px;padding:8px 12px;font-size:13px}.character-menu,.staff-menu-panel{position:fixed;top:64px;right:10px}.video-panel{width:125px;right:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
