/* Phone shell uses the shared kit; frame size follows the device, with explicit PC preview only. */
html[data-mode=phone] body { background: var(--canvas); }
html[data-mode=phone] .ph-frame { position: relative; display: flex; width: 100%; max-width: none; height: calc(100dvh - var(--kb,0px)); margin: 0 auto; overflow: hidden; color: var(--ink); font-family: var(--font); container: frame / inline-size; }
/* Thin left-edge strip that owns the open-drawer swipe instead of letting Android's own back-gesture
   swallow the pointer sequence (same touch-action:none pattern as .docs-edge). */
/* Starts below the app bar (safe-t + its 56px height) so it never covers the hamburger menu
   button: .ph-bar has its own z-index but that only wins inside .ph-app's own stacking order,
   not against this sibling's explicit z-index — without the offset the strip silently ate most
   of the button's hit area once EDGE grew from 28px to 40px. */
html[data-mode=phone] .ph-edge-swipe { position: absolute; z-index: 3; left: 0; top: calc(var(--safe-t) + 56px); bottom: 0; width: 40px; touch-action: pan-y; }
html[data-mode=phone][data-preview] body { background: var(--sunken); }
html[data-mode=phone][data-preview] .ph-frame { max-width: 430px; }
html[data-mode=phone] .ph-app { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding-top: var(--safe-t); }
html[data-mode=phone] .ph-frame .outlet { overflow-x: clip; padding-right: 0; scrollbar-gutter: auto; scrollbar-width: none; }
html[data-mode=phone] .ph-frame .outlet::-webkit-scrollbar { display: none; width: 0; height: 0; }
html[data-mode=phone] .ph-bar { display: flex; align-items: center; min-height: 56px; flex: none; gap: var(--sp-4); padding-inline: max(var(--sp-8),var(--safe-l)) max(var(--sp-8),var(--safe-r)); background: var(--canvas); touch-action: pan-y; }
html[data-mode=phone] .ph-bar-text { flex: 1; min-width: 0; text-align: left; }
html[data-mode=phone] .ph-bar-name { display: flex; gap: var(--sp-8); align-items: center; justify-content: flex-start; }
html[data-mode=phone] .ph-bar-title { font-size: var(--fs-title-s); line-height: var(--lh-title-s); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html[data-mode=phone] .ph-bar-sub { color: var(--ink-3); font-size: var(--fs-caption); line-height: var(--lh-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-mode=phone] .ph-bar-actions { display: flex; align-items: center; flex: none; }
html[data-mode=phone] .ph-bar .ui-iconbtn, html[data-mode=phone] .attention .ui-iconbtn { min-width: 44px; min-height: 44px; }
html[data-mode=phone] .attention .ui-btn, html[data-mode=phone] button.ph-bar-title { min-height: 44px; }
:is(html[data-mode=phone], .sb-phone-menu) .ph-drawer-panel { width: min(92vw,380px); display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: 0 var(--r-l) var(--r-l) 0; touch-action: pan-y; }
:is(html[data-mode=phone], .sb-phone-menu) .ph-drawer-panel .ui-drag-handle { position: absolute; width: 100%; height: 56px; top: 0; left: 0; pointer-events: none; }
:is(html[data-mode=phone], .sb-phone-menu) .ph-drawer-content { display: flex; flex-direction: column; min-height: 0; height: 100%; padding-top: var(--safe-t); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-dr-head { display: flex; align-items: center; gap: var(--sp-8); min-height: 56px; padding-inline: var(--sp-8); flex: none; }
:is(html[data-mode=phone], .sb-phone-menu) .ph-dr-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-title-s); line-height: var(--lh-title-s); font-weight: var(--fw-semibold); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-drawer-search { display: flex; gap: var(--sp-8); align-items: center; text-align: left; border: 1px solid var(--line); border-radius: var(--r-full); min-height: 44px; margin: var(--sp-8) var(--sp-16); padding: var(--sp-8) var(--sp-12); color: var(--ink-2); font-size: var(--fs-label); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-drawer-tabs { padding: var(--sp-4) var(--sp-16) var(--sp-12); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-drawer-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: clip; animation: phone-panel var(--dur-small) var(--ease-out); touch-action: pan-y; }
@keyframes phone-panel { from { opacity: 0; transform: translateX(var(--move-l)); } to { opacity: 1; transform: none; } }
html[data-mode=phone] .ph-docked { width: 360px; flex: none; border-right: 1px solid var(--line); background: var(--canvas); min-height: 0; }
:is(html[data-mode=phone], .sb-phone-menu) .ph-dr-body { padding: var(--sp-8) var(--sp-16) calc(var(--sp-24) + var(--safe-b)); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-dr-sec { display: flex; justify-content: space-between; align-items: center; margin-block: var(--sp-16) var(--sp-8); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-dr-sectitle { font-size: var(--fs-meta); font-weight: var(--fw-semibold); color: var(--ink-2); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-dr-create { width: 100%; margin-bottom: var(--sp-12); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-dr-hint { color: var(--ink-2); font-size: var(--fs-meta); margin-bottom: var(--sp-16); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-chatrow { position: relative; display: flex; align-items: center; gap: var(--sp-8); padding-block: var(--sp-6, 6px); border-bottom: 1px solid var(--line); min-width: 0; }
:is(html[data-mode=phone], .sb-phone-menu) .ph-chatrow.is-selected { background: var(--brand-soft); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-chatrow .ui-iconbtn { flex: none; min-width: 44px; min-height: 44px; }
:is(html[data-mode=phone], .sb-phone-menu) .ph-chatrow-ico { display: grid; place-items: center; width: 38px; height: 38px; background: var(--brand-soft); color: var(--brand); border-radius: var(--r-s); flex: none; }
:is(html[data-mode=phone], .sb-phone-menu) .ph-chatrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 52px; padding: var(--sp-8); gap: var(--sp-2); text-align: left; }
:is(html[data-mode=phone], .sb-phone-menu) .ph-chatrow-title { display: flex; gap: var(--sp-4); align-items: flex-start; max-width: 100%; font-size: var(--fs-body); line-height: var(--lh-body); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-chatrow-title > span { flex: 1; min-width: 0; white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
:is(html[data-mode=phone], .sb-phone-menu) .ph-chatrow-sub, :is(html[data-mode=phone], .sb-phone-menu) .ph-chatrow-tag { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-2); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-chatrow.is-unread .ph-chatrow-title { font-weight: var(--fw-semibold); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-chatrow .chat-unread { position: absolute; top: var(--sp-8); left: var(--sp-2); width: 6px; height: 6px; border-radius: var(--r-full); background: var(--badge); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-objgroup { margin-bottom: var(--sp-16); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-objcard { display: flex; align-items: center; gap: var(--sp-8); width: 100%; padding: var(--sp-8); text-align: left; }
:is(html[data-mode=phone], .sb-phone-menu) .ph-objcard-title { flex: 1; min-width: 0; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; font-weight: var(--fw-semibold); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-objchats { margin-left: var(--sp-12); padding-left: var(--sp-8); border-left: 2px solid var(--line); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-hub { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sp-8); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-hubrow { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); min-height: 88px; padding: var(--sp-12); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--raised); text-align: left; }
:is(html[data-mode=phone], .sb-phone-menu) .ph-hubrow-ico { color: var(--tone-docs); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-hubrow-title { font-size: var(--fs-body); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-hubrow > svg:last-child { display: none; }
:is(html[data-mode=phone], .sb-phone-menu) .ph-selbar { display: flex; gap: var(--sp-4); flex-wrap: wrap; padding-block: var(--sp-8); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-menu { padding: 8px 12px calc(16px + var(--safe-b)); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-menu-head { display: flex; align-items: center; gap: var(--sp-8); min-height: 56px; }
:is(html[data-mode=phone], .sb-phone-menu) .ph-menu-title { flex: 1; font-size: var(--fs-title-s); }
:is(html[data-mode=phone], .sb-phone-menu) .ph-menu-logo { display: none; }
:is(html[data-mode=phone], .sb-phone-menu) .menu-section { margin-bottom: 14px; }
:is(html[data-mode=phone], .sb-phone-menu) .menu-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
:is(html[data-mode=phone], .sb-phone-menu) .menu-tile { gap: 8px; padding: 8px 10px; min-height: 68px; flex-direction: row; align-items: center; }
:is(html[data-mode=phone], .menu-tile) .ui-iconbadge { flex-shrink: 0; }
:is(html[data-mode=phone], .sb-phone-menu) .menu-tile .ui-iconbadge { width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0; }
:is(html[data-mode=phone], .sb-phone-menu) .menu-tile .ui-iconbadge .ui-icon { width: 20px; height: 20px; flex-shrink: 0; }
:is(html[data-mode=phone], .sb-phone-menu) .menu-tile .mt-text { flex: 1; width: auto; min-width: 0; }
:is(html[data-mode=phone], .sb-phone-menu) .menu-tile .mt-title { font-size: var(--fs-menu-title); line-height: 1.25; overflow-wrap: break-word; }
:is(html[data-mode=phone], .sb-phone-menu) .menu-tile .mt-sub { font-size: var(--fs-menu-sub); line-height: 1.3; color: var(--ink-2); overflow-wrap: break-word; }
:is(html[data-mode=phone], .sb-phone-menu) .menu-tile .ui-badge { position: absolute; top: 3px; left: 3px; margin: 0; min-width: 16px; height: 16px; padding: 0 3px; font-size: var(--fs-menu-badge); line-height: 16px; }
:is(html[data-mode=phone], .sb-phone-menu) .menu-tile > .ui-icon { position: absolute; left: 12px; bottom: 3px; width: 12px; height: 12px; }
:is(html[data-mode=phone], .sb-phone-menu) .ph-menu .ui-sectionlabel { margin-bottom: 6px; font-size: var(--fs-menu-section); line-height: 1.3; }
html[data-mode=phone] .sh-palette-surface.ui-surface { width: 100%; height: calc(100dvh - var(--kb,0px)); max-height: none; border-radius: 0; margin: 0; padding-top: var(--safe-t); }
html[data-mode=phone] .sh-palette-results { max-height: calc(100dvh - var(--kb,0px) - 80px); }
html[data-mode=phone][data-kb] .ph-dr-body, html[data-mode=phone][data-kb] .ph-menu { padding-bottom: var(--sp-16); }
@container frame (min-width: 600px) { .ph-frame { --ph-gutter: 24px; } .ph-app .ui-page[data-w=form],.ph-app .ui-page[data-w=list] { max-width: 720px; margin-inline: auto; width: 100%; } .ph-app .ui-page[data-w=workspace] { max-width: 960px; margin-inline: auto; width: 100%; } .ph-app .menu-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 359px) { html[data-mode=phone] { --ph-gutter: 12px; } html[data-mode=phone] .ph-menu { padding-inline: 8px; } html[data-mode=phone] .menu-tile { padding: 6px; } }
@media (max-height: 500px) { html[data-mode=phone] .ph-bar { min-height: 48px; } html[data-mode=phone] .ph-bar-sub { display: none; } }
@media (prefers-reduced-motion: reduce) { :is(html[data-mode=phone], .sb-phone-menu) .ph-drawer-scroll { animation: none; } }

/* Keep the chat title and type in one touch target, with an opaque boundary above messages. */
html[data-mode=phone] .ph-bar { position:relative; z-index:2; border-bottom:1px solid var(--line); padding-block:4px; }
html[data-mode=phone][data-theme=glass] .ph-bar { background: var(--glass-ph-bar); border-bottom-color: var(--glass-border); box-shadow: var(--glass-edge-bottom); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
html[data-mode=phone][data-theme=glass] .ph-docked { background: var(--glass-sidebar); border-right-color: var(--glass-border); backdrop-filter: var(--glass-blur-lg); -webkit-backdrop-filter: var(--glass-blur-lg); }
html[data-theme=glass] :is(html[data-mode=phone], .sb-phone-menu) .ph-hubrow { background: var(--glass-bg); border-color: var(--glass-border); box-shadow: var(--shadow-1); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
html[data-mode=phone] .ph-bar-heading { display:flex; flex-direction:column; justify-content:center; width:100%; min-width:0; min-height:44px; text-align:left; gap:2px; }
html[data-mode=phone] .ph-bar-heading .ph-bar-title { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; overflow-wrap:anywhere; font-size:var(--fs-label); line-height:var(--lh-label); }
html[data-mode=phone] .ph-bar-heading .ph-bar-sub { display:block; max-width:100%; }

/* Selected act labels and long unbroken titles fit the drawer row. */
:is(html[data-mode=phone], .sb-phone-menu) .ph-chatrow.is-act .ph-chatrow-title { display:block; min-width:0; white-space:normal; overflow-wrap:anywhere; }
:is(html[data-mode=phone], .sb-phone-menu) .ph-chatrow.is-act > .ui-check { flex:none; }

/* Bottom consent/cookie banners on phone: ensure banners don't obscure primary actions, FABs and composer */
html[data-mode=phone] .consent-banner {
  top: auto;
  bottom: calc(var(--sp-16) + var(--safe-b, 0px) + var(--kb, 0px));
}

:is(html, body):has(.storage-notice) .ui-page,
:is(html, body):has(.consent-banner) .ui-page {
  padding-bottom: calc(120px + var(--safe-b, 0px));
}

html[data-mode=phone]:has(.storage-notice) .ui-fab,
html[data-mode=phone]:has(.consent-banner) .ui-fab {
  bottom: calc(112px + var(--safe-b, 0px));
}

:is(html, body):has(.storage-notice) .chat-composer:not(.is-home),
:is(html, body):has(.consent-banner) .chat-composer:not(.is-home) {
  margin-bottom: calc(88px + var(--safe-b, 0px));
}