/* Phone navigation update. Append after the current harmony-phone-modern.css. */
html.harmony-phone { --phone-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

/* Home retains the existing live Logo node and its server update/cache flow. */
html.harmony-phone[data-phone-route="home"] .phone-brand-row { display: flex; align-items: center; justify-content: flex-start; min-height: calc(72px + env(safe-area-inset-top, 0px)); margin: 0; padding: calc(8px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); background: var(--phone-canvas, #f1f3f5); }
html.harmony-phone[data-phone-route="home"] .phone-brand-row .brand { display: flex; align-items: center; justify-content: flex-start; width: 144px; max-width: 100%; height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html.harmony-phone[data-phone-route="home"] .phone-brand-row .brand-wordmark { width: 144px; max-width: 100%; height: 48px; padding: 0; border-radius: 0; object-fit: contain; object-position: left center; filter: none; }
html.harmony-phone[data-phone-route="home"] .phone-brand-row .brand:has(.brand-logo[data-logo-kind="default"]) { width: 156px; height: 56px; padding: 8px 12px; border-radius: 16px; background: var(--brand, #525cca); }
html.harmony-phone[data-phone-route="home"] .phone-brand-row .brand-logo[data-logo-kind="default"] { width: 132px; height: 40px; max-width: 100%; filter: none; }
html.harmony-phone[data-phone-route="home"] .phone-brand-row .brand:has(.brand-logo[data-logo-kind="custom"]) { background: transparent; filter: none; }
html.harmony-phone .phone-brand-row .phone-brand-name { display: none !important; }
html.harmony-phone[data-phone-route="home"] #main-content.content { padding-top: 8px; }
html.harmony-phone[data-phone-route="home"] #main-content > .page-head { display: none; }

/* Five equal 64vp destinations; real gesture safe-area is added, never drawn. */
html.harmony-phone .phone-tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; gap: 0; height: var(--phone-bottom); padding: 0 max(8px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-left, 0px)); border: 0; background: var(--phone-canvas, #f1f3f5); box-shadow: none; backdrop-filter: none; }
html.harmony-phone .phone-tabbar > :is(a, button) { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 64px; height: 64px; max-width: 100%; margin: 0; padding: 8px 2px 7px; border: 0; border-radius: 0; background: transparent; color: var(--phone-secondary, #667081); font-family: inherit; font-size: 12px; font-weight: 500; line-height: 18px; text-decoration: none; white-space: nowrap; }
html.harmony-phone .phone-tabbar > :is(a, button) > .icon { display: block; flex: 0 0 24px; width: 24px; height: 24px; margin: 0; stroke-width: 1.8; }
html.harmony-phone .phone-tabbar > :is(a, button):is(.active, [aria-current="page"]) { color: var(--brand); background: transparent; font-weight: 500; }
html.harmony-phone .phone-tabbar > .active::before { content: none; }
html.harmony-phone .phone-tabbar :is(.phone-pending-count, .phone-feedback-count) { top: 5px; left: calc(50% + 6px); min-width: 18px; height: 18px; font-size: 10px; line-height: 14px; }
html.harmony-phone .phone-tabbar :is(.phone-pending-count, .phone-feedback-count)[hidden] { display: none !important; }
/* More is a full page now. Obsolete tray nodes must never cover it. */
html.harmony-phone :is(.phone-more-panel, .phone-more-scrim) { display: none !important; }
html.harmony-phone body.phone-more-open { overflow: auto; }

/* Phone section indexes are grouped navigation rows, independent of system settings. */
html.harmony-phone :is(.phone-section-index, .phone-section-group) { min-width: 0; width: 100%; max-width: 100%; }
html.harmony-phone .phone-section-index { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; margin: 0; padding: 0; }
html.harmony-phone .phone-section-group { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; border: 0; border-radius: 20px; background: var(--phone-surface, #fff); box-shadow: none; }
html.harmony-phone .phone-section-group-title { margin: 0; padding: 14px 16px 2px; color: var(--phone-secondary); font-size: 14px; font-weight: 400; line-height: 20px; }
html.harmony-phone .phone-section-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; gap: 12px; width: 100%; min-width: 0; max-width: 100%; min-height: 72px; margin: 0; padding: 12px 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ink, #191919); font-family: inherit; text-align: left; text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
html.harmony-phone .phone-section-row:first-child { border-top-left-radius: 20px; border-top-right-radius: 20px; }
html.harmony-phone .phone-section-row:last-child { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
html.harmony-phone .phone-section-row:not(:last-child)::after { position: absolute; right: 16px; bottom: 0; left: 68px; height: 1px; background: var(--phone-divider, #0000000d); content: ""; pointer-events: none; }
html.harmony-phone .phone-section-row:active { background: var(--phone-control, #0000000d); }
html.harmony-phone .phone-section-row:focus-visible { z-index: 1; outline: 2px solid var(--brand); outline-offset: -3px; border-radius: 16px; }
html.harmony-phone .phone-section-row:has(.phone-section-count:not([hidden])) { grid-template-columns: 40px minmax(0, 1fr) auto 20px; column-gap: 10px; }
html.harmony-phone .phone-section-count { display: grid; place-items: center; min-width: 20px; max-width: 42px; height: 20px; margin: 0; padding: 0 5px; border: 0; border-radius: 10px; background: var(--phone-warning, #e84026); color: #fff; font-family: system-ui, sans-serif; font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap; }
html.harmony-phone .phone-section-count[hidden] { display: none !important; }
html.harmony-phone .phone-section-icon { display: grid; place-items: center; width: 40px; height: 40px; min-width: 0; padding: 0; border: 0; border-radius: 14px; background: var(--theme-soft, #f0effd); color: var(--brand, #525cca); }
html.harmony-phone .phone-section-icon > .icon { display: block; flex: 0 0 24px; width: 24px; height: 24px; stroke-width: 1.8; }
html.harmony-phone .phone-section-copy { display: block; min-width: 0; max-width: 100%; }
html.harmony-phone .phone-section-copy strong { display: block; color: var(--ink, #191919); font-size: 16px; font-weight: 500; line-height: 22px; overflow-wrap: anywhere; }
html.harmony-phone .phone-section-copy small { display: block; margin: 4px 0 0; color: var(--phone-secondary, #0009); font-size: 14px; font-weight: 400; line-height: 20px; overflow-wrap: anywhere; }
html.harmony-phone .phone-section-chevron { display: grid; place-items: center; width: 20px; height: 20px; color: var(--phone-secondary, #0009); font-family: system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 20px; }
html.harmony-phone .phone-section-chevron > .icon { width: 20px; height: 20px; }
html.harmony-phone .phone-section-index > .phone-section-note { margin: 0; }
html.harmony-phone .phone-section-note { min-width: 0; max-width: 100%; margin: 16px 0 0; padding: 16px; border: 0; border-radius: 20px; background: var(--phone-surface, #fff); color: var(--phone-secondary, #0009); font-size: 14px; line-height: 22px; overflow-wrap: anywhere; }
html.harmony-phone .phone-section-note :is(h2, h3, strong) { display: block; margin: 0 0 8px; color: var(--ink, #191919); font-size: 16px; font-weight: 500; line-height: 22px; }
html.harmony-phone .phone-section-note p { margin: 0; font-size: 14px; line-height: 22px; }

/* Detail pages retain the live dispatch/feedback/assistance nodes and original actions. */
html.harmony-phone[data-phone-route="interaction"][data-phone-section="detail"] .dispatch-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; width: 100%; max-width: 100%; min-width: 0; margin: 0; }
html.harmony-phone[data-phone-route="interaction"][data-phone-section="detail"] .dispatch-layout > .settings-nav { display: none !important; }
html.harmony-phone[data-phone-route="interaction"][data-phone-section="detail"] .dispatch-layout > .dispatch-panel.settings-panel { display: block; width: 100%; max-width: 100%; min-width: 0; }
html.harmony-phone .phone-section-detail { min-width: 0; max-width: 100%; }
html.harmony-phone .phone-section-detail-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; max-width: 100%; min-width: 0; margin: 0 0 16px; padding: 0; }
html.harmony-phone .phone-section-detail-head > :is(a, button) { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; width: fit-content; max-width: 100%; min-width: 0; min-height: 40px; height: auto; margin: 0; padding: 8px 0; border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: var(--brand); font-family: inherit; font-size: 16px; font-weight: 500; line-height: 22px; text-align: left; text-decoration: none; white-space: normal; }
html.harmony-phone .phone-section-detail-head > :is(a, button) > .icon { flex: 0 0 20px; width: 20px; height: 20px; }
html.harmony-phone .phone-section-detail-head h1 { display: block; min-height: 0; margin: 0; font-size: 26px; font-weight: 700; line-height: 32px; }
html.harmony-phone .phone-section-detail-head p { margin: 0; color: var(--phone-secondary); font-size: 14px; line-height: 20px; }

/* The phone-only, non-modal notice is shown by the existing foreground notifier. */
html.harmony-phone .phone-incoming-notice { position: fixed; z-index: 28; top: calc(12px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); display: block; width: auto; min-width: 0; max-width: none; max-height: calc(100dvh - var(--phone-bottom) - 40px - env(safe-area-inset-top, 0px)); margin: 0; padding: 16px; border: 1px solid var(--theme-border, #e3e5ef); border-radius: 20px; background: var(--phone-surface, #fff); color: var(--ink, #191919); box-shadow: 0 8px 32px #17213d26; overflow-y: auto; overscroll-behavior: contain; }
html.harmony-phone .phone-incoming-notice[hidden] { display: none !important; }
html.harmony-phone .phone-incoming-notice header { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: 8px; min-width: 0; margin: -4px -4px 8px 0; padding: 0; }
html.harmony-phone .phone-incoming-notice header h2 { min-width: 0; margin: 0; color: var(--ink, #191919); font-size: 16px; font-weight: 500; line-height: 22px; overflow-wrap: anywhere; }
html.harmony-phone .phone-incoming-notice [data-phone-notice-close] { display: grid; place-items: center; width: 40px; height: 40px; min-width: 40px; min-height: 40px; margin: 0; padding: 8px; border: 0; border-radius: 20px; background: transparent; color: var(--phone-secondary, #0009); font-family: inherit; font-size: 24px; font-weight: 400; line-height: 24px; }
html.harmony-phone .phone-incoming-notice [data-phone-notice-close] .icon { width: 20px; height: 20px; }
html.harmony-phone .phone-incoming-notice > p { min-width: 0; margin: 0; color: var(--phone-secondary, #0009); font-size: 14px; line-height: 22px; overflow-wrap: anywhere; }
html.harmony-phone .phone-incoming-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; margin-top: 16px; }
html.harmony-phone .phone-incoming-actions > :is(a, button) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-width: 0; max-width: 100%; min-height: 40px; height: auto; margin: 0; padding: 8px 12px; border: 0; border-radius: 20px; background: var(--phone-control, #0000000d); color: var(--brand); font-family: inherit; font-size: 16px; font-weight: 500; line-height: 22px; text-align: center; text-decoration: none; white-space: normal; }
html.harmony-phone .phone-incoming-actions > .primary { background: var(--brand); color: #fff; }