.bee-workspace-switch{display:flex;justify-content:center;gap:4px;width:max-content;max-width:calc(100vw - 24px);margin:8px auto 12px;padding:5px;border:1px solid #a2b7a3;border-radius:999px;background:#fffdf6;position:relative;z-index:3}.bee-workspace-switch button{border:0;border-radius:999px;padding:10px 20px;background:transparent;color:#244d40;font:inherit;font-size:15px;font-weight:800;cursor:pointer}.bee-workspace-switch button[aria-pressed=true]{background:#244d40;color:#fff}.bee-workspace-switch button:focus-visible{outline:3px solid #c39228;outline-offset:2px}.native-location-hide{display:none!important}body[data-bee-workspace=native] .workspace-switch a{text-decoration:none}body[data-bee-workspace=native] .workspace-switch{flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 24px)}body[data-bee-workspace=native] .topbar.centered{display:flex;flex-direction:column;align-items:center;gap:4px}.bee-workspace-switch+nav{margin-top:0}@media(max-width:600px){.bee-workspace-switch button{padding:10px 18px}.bee-workspace-switch{margin:6px auto 10px}}

/* Keep the phone header in document flow: logo, bee mode, then navigation. */
@media (max-width: 768px) {
  body.app-page[data-bee-workspace] .topbar.centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 12px;
    box-sizing: border-box;
    width: 100%;
  }
  body.app-page[data-bee-workspace] .topbar.centered .logo {
    height: 76px;
    max-width: 100%;
    object-fit: contain;
  }
  body[data-bee-workspace] .bee-workspace-switch {
    flex: none;
    margin: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  body[data-bee-workspace] .bee-workspace-switch button {
    white-space: nowrap;
    min-width: 0;
    padding: 10px 18px;
  }
  body[data-bee-workspace] .topbar.centered .workspace-switch {
    position: static;
    inset: auto;
    transform: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    border-radius: 20px;
    margin: 0;
    gap: 4px;
  }
  body[data-bee-workspace] .topbar .settings-corner-btn {
    position: absolute;
    top: 16px;
    left: 12px;
  }
  body[data-bee-workspace] .workspace-switch__item {
    flex: 1 1 88px;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    white-space: nowrap;
    text-align: center;
  }
}

/* Shared pages retain the native workspace backdrop. */
body.app-page[data-bee-workspace=native]{background:#e5eee6!important;background-image:radial-gradient(ellipse at 10% 5%,#bfd0bc 0,transparent 48%),radial-gradient(ellipse at 95% 60%,#cfddd1 0,transparent 42%)!important;color:#203e33;min-height:100vh}
body.app-page[data-bee-workspace=native]::before,body.app-page[data-bee-workspace=native]::after{display:none!important}
@media print{body.app-page[data-bee-workspace=native]{background:#fff!important}}

/* Native setup and shared settings use the same image and readable surfaces. */
body.app-page[data-bee-workspace=native]{background:#e5eee6 url("assets/native-bee-garden.webp") center / cover fixed!important}
body[data-bee-workspace=native] .native-setting-hide{display:none!important}
body[data-bee-workspace=native] .topbar.centered .logo-wrap{position:static;transform:none}
body[data-bee-workspace=native] .topbar.centered .workspace-switch{position:static;inset:auto;transform:none;width:auto;margin:0 auto 12px}
body[data-bee-workspace=native] .settings-hub-grid{display:flex;flex-direction:column;gap:8px}
body[data-bee-workspace=native] .settings-hub-card{min-height:88px;padding:16px 20px}
.native-setup-recording>summary{font-size:1.15rem;padding:4px 0}
@media print{body.app-page[data-bee-workspace=native]{background:#fff!important}}

body[data-bee-workspace=native] #nativeSetupStatus{background:#fffdf6;border-radius:10px;padding:12px 16px;margin:12px 0}

/* A single native navigation bar, with horizontal scrolling on small screens. */
body[data-bee-workspace=native] .topbar.centered .workspace-switch{display:flex;flex-wrap:nowrap;justify-content:flex-start;width:max-content;max-width:calc(100vw - 24px);overflow-x:auto;overflow-y:hidden;gap:4px;border-radius:14px;padding:6px;margin:0 auto 10px;box-sizing:border-box}
body[data-bee-workspace=native] .workspace-switch__item{flex:0 0 auto;min-width:0;min-height:44px;display:flex;align-items:center;white-space:nowrap;padding:8px 12px}
.native-workspace-choice{flex:none;display:flex;align-items:center;margin:0;padding:0 4px}
.native-workspace-choice select{font:inherit;font-weight:700;color:#244d40;background:#fffdf6;border:1px solid #a2b7a3;border-radius:8px;padding:10px;min-height:44px}
body[data-bee-workspace=native] .bee-reminder-popover{z-index:1401;max-height:min(520px,calc(100dvh - 86px))}
body[data-bee-workspace=native] .bee-reminder-btn{z-index:1402}
body[data-bee-workspace=native] .topbar.centered .logo-wrap{padding:0 62px;box-sizing:border-box;max-width:100%}
body[data-bee-workspace=native] .topbar.centered .logo{max-width:100%;object-fit:contain}