/* Controls exclusive to the phone shell stay hidden on desktop. */
#Store .mobile-tabbar, #Store .mobile-page-title, #Store .companion-overflow { display:none; }
@media (max-width:767px) {
/* Mobile presentation only. Desktop uses the original component stylesheets. */
:root { --ui-ink:#f0e8d8; --ui-muted:#b7ad9c; --ui-line:#554a3b; --ui-gold:#ddc391; --ui-sage:#bed2bd; --ui-radius:18px; --visible-height:100dvh; }
#Store { min-width:0; }
#Store *, #Store *::before, #Store *::after { box-sizing:border-box; }
#Store svg { width:24px; height:24px; flex-shrink:0; }
#Store .navigation { height:auto; min-height:80px; padding:12px max(24px,calc((100vw - 1180px)/2)); gap:20px; background:#191813f5; backdrop-filter:blur(16px); border-bottom:1px solid #423c31; }
#Store .nav-brand { display:flex; align-items:center; gap:12px; padding:0 !important; margin:0; min-height:44px; background:none !important; border:0 !important; box-shadow:none !important; transform:none !important; text-shadow:none !important; color:var(--ui-ink) !important; font:inherit; font-size:19px !important; font-weight:600 !important; white-space:nowrap; cursor:pointer; }
#Store .nav-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#Store .nav-pill-btn { display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:10px 16px !important; border:1px solid transparent !important; background:transparent !important; color:#e6dac5 !important; font:inherit; font-size:14px !important; box-shadow:none !important; border-radius:12px !important; }
#Store .nav-pill-btn:hover { background:#34362b !important; color:#f5e6c6 !important; -webkit-text-fill-color:currentColor !important; }
#Store .mobile-tabbar, #Store .mobile-page-title { display:none; }
#Store .page-home { width:min(1120px,100%); margin:0 auto; padding:40px 24px 32px !important; min-height:0 !important; align-items:stretch; justify-content:flex-start; gap:30px; overflow:visible; }
#Store .page-home .store-signboard { padding:0 !important; margin:0 !important; text-align:left !important; animation:none; }
#Store .home-sign-open { font-size:11px !important; letter-spacing:3px; color:#c5af83 !important; margin:0 0 10px !important; }
#Store .home-store-title { font-size:clamp(30px,4.4vw,52px) !important; margin:0 0 8px !important; line-height:1.35; letter-spacing:1px; text-shadow:none !important; }
#Store .page-home .store-slogan { font-size:16px !important; color:var(--ui-ink) !important; line-height:1.7; margin:0 !important; min-height:28px; }
#Store .page-home .home-companion { margin:12px 0 0 !important; justify-content:flex-start; font-size:12px !important; color:var(--ui-muted) !important; }
#Store .page-home .home-companion-text { font-size:12px !important; color:var(--ui-muted) !important; }
#Store .home-section-heading { display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin:0 0 14px; }
#Store .home-section-heading h2 { font-size:17px; color:var(--ui-ink) !important; font-weight:500; text-shadow:none; margin:0; }
#Store .home-section-heading>span { font-size:12px; color:var(--ui-muted); }
#Store .home-feature-grid, #Store .home-quick-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
#Store .home-feature, #Store .home-quick, #Store .home-more { text-align:left; font:inherit; font-weight:400 !important; text-decoration:none; border-radius:var(--ui-radius) !important; box-shadow:none !important; backdrop-filter:none !important; transform:none !important; transition:background-color .15s,border-color .15s; cursor:pointer; white-space:normal; text-shadow:none !important; }
#Store .home-feature { display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:24px !important; color:#f4ead5 !important; border:1px solid #786440 !important; background:linear-gradient(120deg,#3b3424,#292820) !important; }
#Store .feature-pattern { background:linear-gradient(120deg,#293c33,#252c28) !important; border-color:#657963 !important; color:#e5eddf !important; }
#Store .home-feature:hover { border-color:#e8d4a8 !important; }
#Store .feature-kicker { display:flex; align-items:center; gap:9px; font-size:12px; color:#dbcaab; }
#Store .feature-pattern .feature-kicker { color:#bdcfb9; }
#Store .home-feature strong { font-size:25px; font-weight:600; line-height:1.4; }
#Store .feature-description { font-size:14px; line-height:1.75; color:#e0d8c6; max-width:32em; }
#Store .feature-bottom { margin-top:auto; padding-top:8px; display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:13px; color:inherit; }
#Store .home-quick { display:flex; gap:14px; align-items:center; padding:18px !important; border:1px solid #504c40 !important; background:#242720 !important; color:#e5dcc9 !important; }
#Store .home-quick>span { flex:1; min-width:0; }
#Store .home-quick strong { font-size:16px; font-weight:500; display:block; }
#Store .home-quick small { display:block; margin-top:6px; font-size:12px; line-height:1.6; color:#c1b9aa; }
#Store .home-quick>svg:last-child { width:19px; color:#b1a78e; }
#Store .home-more-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
#Store .home-more { padding:18px !important; display:grid; gap:8px; background:#201f1a !important; border:1px solid #49463a !important; color:#ded8ca !important; }
#Store .home-more>svg { color:#c7b894; }
#Store .home-more strong { font-size:15px; font-weight:500; }
#Store .home-more small { font-size:12px; line-height:1.6; color:#b7af9f; }
#Store .home-quick:hover,#Store .home-more:hover { background:#333a2c !important; border-color:#a29a7c !important; }
#Store .home-feedback { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 0 4px; color:#b3a997; font-size:12px; }
#Store .home-feedback button { font:inherit; padding:10px 0 !important; min-height:44px; color:#dfc897 !important; border:0 !important; background:none !important; box-shadow:none !important; white-space:nowrap; }
#Store .site-footer { flex-wrap:wrap; gap:8px !important; padding:16px !important; line-height:1.8; }
/* Long reviews get the full workspace width; chat remains mounted with its draft. */
#Store .ai-page .ai-layout-v2.ai-report-open { grid-template-columns:minmax(0,1fr) !important; grid-template-rows:auto auto !important; grid-template-areas:'toolbar' 'tools'; height:auto !important; min-height:0 !important; max-width:960px; }
#Store .ai-report-open .ai-right-panel { display:none !important; }
#Store .ai-report-open .ai-left-panel { height:auto !important; max-height:none !important; overflow:visible !important; padding:26px !important; }
#Store .ai-report-open #companion-review { max-width:760px; width:100%; margin:0 auto !important; }
#Store .ai-report-open .emotion-pattern-card { width:100%; max-width:820px; margin:18px auto 0 !important; }
#Store .ai-report-open .ai-date-range { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
#Store .ai-date-range label, #Store .ai-date-range input { min-width:0; width:100%; }
#Store .ai-date-range label { display:flex; flex-direction:column; gap:8px; }
#Store .companion-actions button { min-height:44px; }
#Store .ai-page .ai-layout-v2:not(.ai-report-open) { height:var(--chat-height,calc(100dvh - 200px)) !important; }
#Store .companion-overflow { display:none; }
#Store .companion-mode[aria-pressed='true'] { background:#c4d4bf !important; color:#202d23 !important; border-color:#c4d4bf !important; }
#Store .companion-mode { order:-1; }
#Store .ai-control-actions { display:flex; flex-wrap:wrap; gap:8px; }
#Store .ai-include-chat { display:flex; gap:10px; padding:10px 0; }
#Store .ai-include-chat input { flex-shrink:0; margin-top:4px; }
#Store .star-view-switch { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 12px; font-size:13px; color:#c5c9bf; }
#Store .star-view-switch>div { display:flex; gap:4px; }
#Store .star-view-switch button { min-height:44px; padding:8px 15px !important; font:inherit; border-radius:10px !important; border:1px solid #52614f !important; color:#e8e2d3 !important; background:#222b25 !important; box-shadow:none !important; }
#Store .star-view-switch button[aria-pressed='true'] { background:#d3c399 !important; color:#262d20 !important; }
#Store .public-card-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:0 12px 18px; }
#Store .public-story { width:100%; font:inherit; display:flex; flex-direction:column; gap:16px; text-align:left; padding:20px !important; color:#ede6d5 !important; background:#1d2926 !important; border:1px solid #465b4f !important; border-radius:16px !important; box-shadow:none !important; white-space:normal; }
#Store .public-story-meta, #Store .public-story-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#c1c7ba; font-size:12px; }
#Store .public-story-meta>span { overflow-wrap:anywhere; }
#Store .public-story-meta time { flex-shrink:0; }
#Store .public-story-text { font-size:16px; line-height:1.8; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
#Store .star-list-mode { min-height:0 !important; height:auto !important; }
#Store .star-list-mode .hpz-field { min-height:220px !important; height:auto !important; }
#Store .treehole-main-layout { max-width:1100px; margin:auto; }
#Store .ai-source-text, #Store .message, #Store .feedback-message, #Store .profile-header .info h1 { overflow-wrap:anywhere; }

}
/* Phone layout: one clear task area with a persistent destination bar. */
@media (max-width:767px) {
  #Store { padding-bottom:calc(67px + env(safe-area-inset-bottom)); }
  #Store .navigation { min-height:62px; height:auto; padding:8px 16px; padding-top:max(8px,env(safe-area-inset-top)); gap:10px; flex-wrap:nowrap; top:0; }
  #Store .nav-brand { min-width:0; gap:9px; font-size:16px !important; }
  #Store .navigation img { width:30px; height:30px; }
  #Store .desktop-brand, #Store .desktop-nav { display:none !important; }
  #Store .mobile-page-title { display:block; overflow:hidden; text-overflow:ellipsis; }
  #Store .nav-right { flex:none; gap:0; flex-wrap:nowrap; width:auto; }
  #Store .nav-messages { padding:8px 6px !important; font-size:12px !important; min-height:44px; gap:4px; position:relative; }
  #Store .nav-messages svg { width:19px; height:19px; }
  #Store .nav-messages .pilot-badge { position:absolute; top:0; right:-5px; font-size:10px; }
  #Store .mobile-tabbar { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:fixed; bottom:0; left:0; right:0; z-index:900; padding:6px 6px calc(6px + env(safe-area-inset-bottom)); background:#1d211ced; backdrop-filter:blur(18px); border-top:1px solid #505344; }
  #Store .mobile-tabbar button { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; min-width:0; min-height:54px; padding:5px 0 !important; border:0 !important; border-radius:12px !important; background:transparent !important; color:#b8bfaf !important; font:inherit; font-size:11px !important; box-shadow:none !important; text-shadow:none !important; transform:none !important; }
  #Store .mobile-tabbar button[aria-current='page'] { background:#354334 !important; color:#e2e8ca !important; }
  #Store .mobile-tabbar svg { width:22px; height:22px; }
  #Store .page-back-fab { display:none !important; }
  #Store .page-container { width:100%; min-width:0; min-height:0; margin:0; padding:0; }
  #Store .admin-site-notice, #Store .draft-notice, #Store .api-down-banner { margin:8px 12px; padding:10px 12px; font-size:12px; border-radius:10px; line-height:1.65; }
  #Store .page-home { padding:24px 16px 20px !important; gap:24px; }
  #Store .home-store-title { font-size:30px !important; line-height:1.4; }
  #Store .home-sign-open { letter-spacing:2.5px; font-size:10px !important; margin-bottom:6px; }
  #Store .page-home .store-slogan { font-size:14px !important; }
  #Store .page-home .home-companion { margin-top:9px !important; }
  #Store .home-section-heading { gap:8px; margin-bottom:12px; }
  #Store .home-section-heading h2 { font-size:15px; }
  #Store .home-section-heading>span { font-size:10px; }
  #Store .home-feature-grid { gap:10px; }
  #Store .home-feature { padding:16px 14px !important; gap:10px; border-radius:16px !important; }
  #Store .feature-kicker { font-size:10px; gap:5px; flex-wrap:wrap; }
  #Store .feature-kicker svg { width:20px; height:20px; }
  #Store .home-feature strong { font-size:19px; }
  #Store .feature-description { font-size:12px; line-height:1.75; }
  #Store .feature-bottom { font-size:11px; gap:4px; padding-top:4px; line-height:1.7; }
  #Store .feature-bottom svg { width:16px; height:16px; }
  #Store .home-quick-grid { grid-template-columns:minmax(0,1fr); gap:10px; }
  #Store .home-quick { padding:15px !important; }
  #Store .home-quick strong { font-size:15px; }
  #Store .home-more-grid { gap:8px; }
  #Store .home-more { padding:13px 10px !important; gap:9px; }
  #Store .home-more strong { font-size:13px; }
  #Store .home-more small { font-size:11px; }
  #Store .home-feedback { align-items:flex-start; flex-direction:column; gap:2px; }
  #Store .home-feedback button { padding:4px 0 !important; }
  #Store .site-footer { font-size:10px !important; padding:12px 16px !important; color:#b3aa99 !important; background:#171b16 !important; }
  #Store input:not([type='checkbox']):not([type='radio']), #Store textarea, #Store select { font-size:16px !important; max-width:100%; }
  #Store button, #Store [role='button'], #Store summary { touch-action:manipulation; }
  #Store .th-tap, #Store .quiet-action, #Store .section-tabs button, #Store .pilot-dialog button, #Store .data-controls button { min-height:44px; }
  #Store .section-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  #Store .section-tabs button { min-width:0; padding:10px 5px !important; font-size:13px; white-space:normal; }
  #Store .profile-page { padding:18px 12px 24px !important; }
  #Store .profile-container, #Store .user-profile, #Store .profile-tests { width:100%; max-width:100%; padding:0 !important; min-width:0; }
  #Store .profile-hero { padding:16px; gap:12px; flex-wrap:wrap; }
  #Store .profile-header { min-width:0; padding:0 !important; gap:12px; }
  #Store .profile-header .info { min-width:0; }
  #Store .profile-header .info h1 { font-size:21px !important; }
  #Store .profile-header .avatar { width:54px; height:54px; min-width:54px; }
  #Store .profile-tests .card-title { flex-wrap:wrap; min-width:0; gap:6px; }
  #Store .profile-tests .card-title h3 { font-size:16px !important; }
  #Store .card-header-toggle { padding:16px 12px !important; }
  #Store .test-section-header { padding:14px 0 !important; margin:0 !important; }
  #Store .test-section-header h2 { font-size:21px !important; }
  #Store .test-section-header p { font-size:12px !important; }
  #Store .bf-cover-desc, #Store .bf-hint-text { font-size:13px !important; }
  #Store .bf-link-body { padding:18px 12px !important; }
  #Store .bf-ocean-tags { flex-wrap:wrap; }
  #Store .bf-iframe-wrap { position:fixed; inset:0; z-index:1200; height:var(--visible-height); margin:0 !important; border:0; border-radius:0 !important; background:#151725; display:flex; flex-direction:column; padding-top:env(safe-area-inset-top); }
  #Store .bf-iframe-bar { flex-shrink:0; min-height:58px; padding:8px 12px; gap:8px; color:#eee9e0; background:#20251f; }
  #Store .bf-iframe-bar>span { font-size:12px; }
  #Store .bf-iframe-close { min-height:44px; white-space:nowrap; }
  #Store .bf-iframe { flex:1; width:100%; min-height:0; height:100% !important; border:0; border-radius:0; }
  body:has(#Store.assessment-active) { overflow:hidden; }
  #Store .page-diary { padding:20px 12px 24px !important; }
  #Store .diary-layout { width:100%; min-width:0; gap:28px; grid-template-columns:minmax(0,1fr) !important; }
  #Store .diary-page-lead { margin:0 0 22px; font-size:14px !important; }
  #Store .sticky-note { width:100%; max-width:100%; padding:20px 16px !important; transform:none !important; }
  #Store .note-header { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
  #Store .emoji-selector { display:flex; flex-wrap:wrap; gap:2px; }
  #Store .emoji-selector>span { display:grid; place-items:center; width:42px; height:44px; padding:4px; }
  #Store .diary-textarea { min-height:180px; }
  #Store .note-footer { flex-wrap:wrap; gap:8px; }
  #Store .diary-save-link { padding:12px 16px !important; }
  #Store .treehole-main-layout { padding:14px 12px 24px !important; min-height:0 !important; gap:14px; }
  #Store .treehole-tabs { margin:0; }
  #Store .treehole-tabs+.audience-note { font-size:12px !important; line-height:1.7; }
  #Store .public-card-list { grid-template-columns:minmax(0,1fr); padding:0 0 12px; }
  #Store .public-story { padding:18px !important; }
  #Store .star-view-switch { padding:6px 0 14px; }
  #Store .bottle-zone { padding:12px 0 !important; }
  #Store .th-actions, #Store .th-match-row { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
  #Store .th-actions .th-sep, #Store .th-match-row .th-sep { display:none; }
  #Store .th-actions .th-tap, #Store .th-match-row .th-tap { display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; border:1px solid #5e6551; border-radius:10px; font-size:14px; }
  #Store .th-shore-whisper { font-size:15px; }
  #Store .moodsun-page { padding:20px 12px !important; }
  #Store .sun-container { padding:0; max-width:100%; }
  #Store .sun-two-columns { display:grid; grid-template-columns:minmax(0,1fr) !important; gap:20px; }
  #Store .sun-left-column, #Store .sun-right-column { min-width:0; width:100%; }
  /* Chat takes the available visible viewport; each tool becomes its own screen. */
  #Store .ai-page { min-height:0 !important; padding:10px 10px 10px !important; }
  #Store .ai-page .ai-layout-v2 { width:100% !important; height:var(--chat-height,calc(100dvh - 158px)) !important; min-height:120px !important; gap:8px !important; grid-template-columns:minmax(0,1fr) !important; }
  #Store .companion-toolbar { flex-direction:column; align-items:stretch; gap:8px; padding:0; }
  #Store .companion-heading { display:none; }
  #Store .companion-actions { display:flex; gap:4px; flex-wrap:wrap; width:100%; }
  #Store .companion-actions button { padding:9px 8px !important; font-size:12px !important; min-height:44px; flex:1 1 auto; }
  #Store .companion-new { margin-left:0; }
  #Store .companion-desktop-action { display:none; }
  #Store .companion-overflow { display:block; position:relative; flex-shrink:0; }
  #Store .companion-overflow summary { list-style:none; min-height:44px; display:flex; align-items:center; gap:6px; padding:10px 14px; border:1px solid #465449; border-radius:9px; color:#d1d7c7; font-size:12px; cursor:pointer; }
  #Store .companion-overflow summary::-webkit-details-marker { display:none; }
  #Store .companion-overflow>div { position:absolute; right:0; top:50px; width:170px; display:grid; gap:6px; padding:8px; border:1px solid #6c7c62; border-radius:12px; background:#222d25; box-shadow:0 12px 30px #0006; z-index:950; }
  #Store .companion-overflow button { text-align:left; }
  #Store .ai-page .ai-layout-v2.ai-tools-open, #Store .ai-page .ai-layout-v2.ai-report-open { height:auto !important; min-height:0 !important; grid-template-columns:minmax(0,1fr) !important; grid-template-rows:auto auto !important; grid-template-areas:'toolbar' 'tools'; }
  #Store .ai-tools-open .ai-right-panel { display:none !important; }
  #Store .ai-page .ai-left-panel { height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; padding:18px 14px !important; }
  #Store .ai-page .ai-right-panel { min-height:0 !important; }
  #Store .ai-page .chat-area { padding:14px !important; }
  #Store .ai-page .message { max-width:95%; font-size:15px; padding:14px !important; }
  #Store .ai-page .ai-chat-header-bar { padding:8px 12px !important; }
  #Store .ai-chat-header-title { display:none; }
  #Store .ai-chat-header-bar .data-inline-note { margin:0; font-size:10px; line-height:1.6; }
  #Store .ai-page .ai-chat-input-bar { padding:10px !important; gap:8px !important; }
  #Store .ai-page .ai-chat-input-bar input { min-width:0; width:0; flex:1; min-height:46px; }
  #Store .ai-page .ai-chat-input-bar .ai-send-btn { min-height:46px; padding:10px 14px !important; flex-shrink:0; }
  #Store .ai-page .emotion-pattern-card { padding:0 !important; }
  #Store.chat-active .site-footer { display:none !important; }
  #Store.keyboard-open .mobile-tabbar { display:none; }
  #Store.keyboard-open { padding-bottom:0; }
  #Store.keyboard-open.chat-active { position:fixed; top:var(--viewport-top,0px); left:0; right:0; height:var(--visible-height); overflow:hidden; }
  /* Dialogs keep a single readable scroll area and clear dismiss action. */
  #Store .data-notice-backdrop, #Store .conf-modal-overlay, #Store .modal-backdrop, #Store .bottle-modal-overlay { padding:10px; }
  #Store .pilot-inbox { width:100%; max-height:calc(var(--visible-height) - 20px); border-radius:18px; }
  #Store .inbox-header { padding:20px 18px 14px; }
  #Store .inbox-toolbar, #Store .inbox-footer { flex-wrap:wrap; }
  #Store .pilot-inbox button { min-height:44px; }
  #Store .inbox-body { min-height:80px; }
  #Store .pilot-dialog, #Store .data-notice, #Store .feedback-dialog, #Store .report-history-dialog, #Store .conf-modal-box, #Store .profile-auth-modal .modal { width:100% !important; max-width:680px; max-height:calc(var(--visible-height) - 24px) !important; overflow:auto; padding:20px 16px !important; border-radius:18px !important; margin:0 !important; }
  #Store .conf-modal-comments { max-height:none; }
  #Store .conf-modal-input-area { padding:12px 0 0; gap:8px; }
  #Store .conf-modal-input { min-width:0; flex:1; width:0; }
  #Store .conf-modal-send { flex-shrink:0; min-height:46px; }
  #Store .data-controls { padding:18px 14px; }
  #Store .auth-actions { display:flex; flex-direction:column; gap:12px; }
  #Store .guest-welcome { padding:28px 16px !important; }
  #Store .guest-welcome h2 { font-size:22px !important; }
  #Store .feedback-actions { gap:8px; }
}
@media (max-width:359px) {
  #Store .navigation { padding-left:12px; padding-right:12px; }
  #Store .nav-brand { font-size:14px !important; }
  #Store .page-home { padding-left:12px !important; padding-right:12px !important; }
  #Store .home-feature { padding:14px 11px !important; }
  #Store .home-feature strong { font-size:17px; }
  #Store .feature-kicker { font-size:10px; }
  #Store .home-more { padding:12px 8px !important; }
  #Store .home-section-heading>span { display:none; }
  #Store .ai-report-open .ai-date-range { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) {
  #Store *, #Store *::before, #Store *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

@media (max-width:767px) and (max-height:500px) {
  #Store .navigation { min-height:48px; padding-top:2px; padding-bottom:2px; }
  #Store .admin-site-notice { margin:4px 12px; padding:4px 10px; font-size:10px; }
  #Store .mobile-tabbar { padding-top:3px; padding-bottom:calc(3px + env(safe-area-inset-bottom)); }
  #Store .mobile-tabbar button { min-height:44px; gap:1px; }
  #Store .mobile-tabbar svg { width:18px; height:18px; }
  #Store { padding-bottom:calc(51px + env(safe-area-inset-bottom)); }
}