/* ===========================================================================
   OLI on a phone - "one bar, one orb".

   The desktop is untouched: every rule below is inside the 760px query, so on a
   wider screen this sheet does nothing at all. It loads after styles.css and
   page-tools.css, so where an older narrow-window rule disagrees with one here,
   this one is the later of two equal rules and wins.

   What it does, in order:
     1. the desktop chrome leaves - the 38px header, the tab strip and the
        14-control toolbar that used to set the page's minimum width to 423px;
     2. the module rail stops being a column and becomes a sheet, so the page
        you opened keeps the whole screen instead of collapsing to nothing
        behind it;
     3. Princess appears once - she is the AI button, bottom right, where every
        other site keeps its AI button;
     4. every target is at least 44px, every field is 16px, and the notch and
        the home bar are inset rather than overlapped.

   The palette is the site's own six tokens, so light and dark both keep
   working. The single exception is the orb, which is deliberately the loudest
   thing on the screen because it is the one thing on the screen: indigo to
   violet, with a teal presence dot.
   =========================================================================== */

/* The phone's chrome exists only under the query below. Outside it these six
   elements must never be drawn - they are built on every screen, desktop
   included, so that a rotation or a resize does not need a reload, and this is
   what keeps them out of the desktop layout entirely. */
.m-bar,.m-dock,.m-orb,.m-scrim,.m-sheet{display:none}

@media (max-width:760px){

  :root{
    --m-safe-top:env(safe-area-inset-top,0px);
    --m-safe-bot:env(safe-area-inset-bottom,0px);
    --m-bar:calc(58px + var(--m-safe-top));
    --m-dock:calc(64px + var(--m-safe-bot));
    --m-orb-a:#4338CA;
    --m-orb-b:#7C3AED;
    --m-dot:#14B8A6;
  }

  /* ---- 1. the hygiene the shell never had on a phone -------------------- */

  html,body{overflow-x:hidden;overscroll-behavior:none}
  body{touch-action:manipulation;-webkit-text-size-adjust:100%}
  /* 16px is not a style choice: anything smaller makes iOS Safari zoom the whole
     page when the field takes focus, and nothing zooms it back. */
  input,textarea,select{font-size:16px}

  /* ---- 2. the desktop chrome leaves the screen -------------------------- */

  header.chrome,nav.toolbar{display:none!important}

  /* ---- 3. one surface, with the bars' height kept clear ---------------- */

  .workspace{
    grid-template-columns:1fr;
    padding-top:var(--m-bar);
    padding-bottom:var(--m-dock);
  }
  html[data-ai-dock="open"] .workspace{margin-right:0}
  .surface{min-height:0;position:relative}

  /* ---- 4. the module rail becomes a sheet, not a column ----------------- */

  .launcher{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:10070;
    display:flex;flex-direction:column;
    width:100%;max-height:76vh;padding:0 0 var(--m-safe-bot);
    border:0;border-top:1px solid var(--line);border-radius:22px 22px 0 0;
    background:var(--surface);color:var(--fg);
    transform:translateY(102%);visibility:hidden;pointer-events:none;
    transition:transform .22s ease,visibility 0s linear .22s;
    box-shadow:0 -18px 40px rgba(0,0,0,.32);
  }
  html[data-m-sheet="workspaces"] .launcher{
    transform:translateY(0);visibility:visible;pointer-events:auto;
    transition:transform .22s ease;
  }
  .launcher .rail-head{padding:16px 18px 6px}
  .launcher .rail-scroll{padding:0 14px 8px;overflow:auto;min-height:0}
  .launcher .rail-foot{padding:6px 14px 14px;border-top:1px solid var(--line)}
  html[data-rail="collapsed"] .launcher .rail-scroll{padding:0 14px 8px}

  /* ---- 5. the sign-in card: one card, below the bar -------------------- */

  html[data-auth="out"] .auth-gate{top:var(--m-bar);right:0;bottom:0;padding:16px}
  html[data-auth="out"][data-ai-dock="open"] .auth-gate{right:0;top:var(--m-bar)}
  .auth-card{width:100%;max-width:360px;padding:26px 20px 22px}
  .auth-field input,.auth-primary{min-height:50px;font-size:16px}
  html[data-auth="out"] .auth-tools .chrome-btn{width:44px;height:44px}
  .auth-eye{width:44px;height:44px;background:transparent}
  .auth-pass{right:6px}

  /* ---- 6. Princess appears once: every other mark becomes the word OLI --- */

  .chrome .brand-mark,
  .auth-card .brand-mark,
  .guest-mascot{display:none!important}

  /* ---- 7. the guest assistant, and the signed-in dock, as bottom sheets -- */

  html[data-auth="out"] #oliGuestAi{
    top:auto;bottom:0;left:0;right:0;width:100%;height:auto;max-height:80vh;
    border-left:0;border-top:1px solid var(--line);border-radius:22px 22px 0 0;
    padding-bottom:var(--m-safe-bot);z-index:10070;
    transform:translateY(102%);visibility:hidden;pointer-events:none;
    transition:transform .22s ease,visibility 0s linear .22s;
    box-shadow:0 -18px 40px rgba(0,0,0,.32);
  }
  html[data-auth="out"][data-m-guest="open"] #oliGuestAi{
    transform:translateY(0);visibility:visible;pointer-events:auto;
    transition:transform .22s ease;
  }
  html[data-auth="out"][data-m-guest="open"] .auth-gate{pointer-events:none}

  #aiDock{
    top:auto;bottom:0;left:0;right:0;width:100%;height:82vh;
    border-left:0;border-top:1px solid var(--line);border-radius:22px 22px 0 0;
    z-index:10070;box-shadow:0 -18px 40px rgba(0,0,0,.32);
  }

  /* the page tools (share / capture / downloads / history) ride the same edge */
  .tb-panel{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-height:72vh;
    border-radius:22px 22px 0 0;border-left:0;border-right:0;border-bottom:0;
    padding:16px 16px calc(16px + var(--m-safe-bot));z-index:10070;
  }
  html[data-split="on"] .tb-panel{top:auto}

  /* ---- 8. the settings page starts under the bar, not under the old one -- */

  .settings-page{top:var(--m-bar)}

  /* ---- 9. the new chrome: bar, dock, orb, scrim, sheets ---------------- */

  .m-bar{
    position:fixed;top:0;left:0;right:0;height:var(--m-bar);z-index:9000;
    display:flex;align-items:center;gap:2px;
    padding:var(--m-safe-top) 6px 0 8px;
    background:transparent;border-bottom:1px solid var(--line);
  }
  .m-bar::before{
    content:"";position:absolute;inset:0;z-index:-1;background:var(--surface);opacity:.9;
  }
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .m-bar::before{
      opacity:.72;
      -webkit-backdrop-filter:saturate(1.6) blur(18px);
      backdrop-filter:saturate(1.6) blur(18px);
    }
  }

  .m-word{
    min-width:52px;height:44px;padding:0 10px;border:0;background:transparent;
    color:var(--fg);font:800 15px/1 inherit;letter-spacing:.2em;
  }
  .m-title{
    flex:1;min-width:0;height:44px;padding:0 10px;border:0;background:transparent;
    color:var(--fg);font:650 16px/1 inherit;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .m-icon{
    width:44px;height:44px;flex:0 0 44px;border:0;background:transparent;
    color:var(--fg);font-size:22px;line-height:1;border-radius:12px;
    display:grid;place-items:center;
  }
  .m-icon:active,.m-title:active,.m-word:active{background:var(--field)}

  .m-dock{
    position:fixed;left:0;right:0;bottom:0;height:var(--m-dock);z-index:9000;
    display:grid;grid-template-columns:repeat(3,1fr);
    padding-bottom:var(--m-safe-bot);
    background:var(--surface);border-top:1px solid var(--line);
  }
  .m-dock button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    border:0;background:transparent;color:var(--fg);font:600 12.5px/1 inherit;
  }
  .m-dock button span{font-size:19px;line-height:1}
  .m-dock button:active{background:var(--field)}
  .m-dock button[aria-expanded="true"]{color:var(--fg)}

  .m-orb{
    display:block;
    position:fixed;right:16px;bottom:calc(var(--m-dock) + 14px);width:58px;height:58px;
    z-index:9300;padding:4px;border:0;border-radius:50%;cursor:pointer;
    background:linear-gradient(145deg,var(--m-orb-a),var(--m-orb-b));
    box-shadow:0 12px 26px rgba(67,56,202,.36);
    transition:opacity .18s ease,transform .18s ease;
  }
  .m-orb img{width:50px;height:50px;border-radius:50%;object-fit:cover;display:block;background:#fff}
  .m-orb b{
    position:absolute;right:0;top:2px;width:13px;height:13px;border-radius:50%;
    background:var(--m-dot);border:2.5px solid var(--surface);
  }
  .m-orb::after{
    content:"";position:absolute;inset:-6px;border-radius:50%;
    box-shadow:0 0 0 1.5px rgba(124,58,237,.32);
    animation:m-orb-breathe 3.2s ease-in-out infinite;
  }
  @keyframes m-orb-breathe{0%,100%{opacity:.3;transform:scale(.97)}50%{opacity:.95;transform:scale(1.02)}}
  .m-orb:active{transform:scale(.94)}
  /* Nothing to navigate while signed out, so the dock is not drawn and the orb
     takes the bottom corner rather than floating above an empty bar. */
  html[data-auth="out"] .m-dock{display:none}
  html[data-auth="out"] .m-orb{z-index:10050;bottom:calc(20px + var(--m-safe-bot))}
  html[data-m-sheet]:not([data-m-sheet=""]) .m-orb,
  html[data-m-guest="open"] .m-orb,
  html[data-ai-dock="open"] .m-orb{opacity:0;pointer-events:none}

  .m-scrim{
    position:fixed;inset:0;z-index:10060;display:none;
    background:rgba(0,0,0,.42);border:0;padding:0;
  }
  html[data-m-sheet]:not([data-m-sheet=""]) .m-scrim,
  html[data-m-guest="open"] .m-scrim,
  html[data-ai-dock="open"] .m-scrim{display:block}
  html[data-ai-dock="open"] .m-scrim{z-index:10060}

  .m-sheet{
    position:fixed;left:0;right:0;bottom:0;z-index:10070;
    max-height:80vh;display:none;flex-direction:column;
    border-top:1px solid var(--line);border-radius:22px 22px 0 0;
    background:var(--surface);color:var(--fg);
    padding-bottom:var(--m-safe-bot);
    box-shadow:0 -18px 40px rgba(0,0,0,.32);
  }
  html[data-m-sheet="tools"] #mSheet,
  html[data-m-sheet="tabs"] #mTabsSheet{display:flex}

  .m-grab{width:38px;height:4px;border-radius:3px;background:var(--hairline);margin:10px auto 6px;flex:0 0 auto}
  .m-sheet-lead{margin:0;padding:2px 18px 10px;font:650 15px/1.3 inherit;color:var(--fg)}
  .m-rows{overflow:auto;min-height:0;padding:0 0 12px}
  .m-row{
    display:flex;align-items:center;gap:14px;width:100%;min-height:56px;
    padding:0 18px;border:0;border-top:1px solid var(--line);
    background:transparent;color:var(--fg);font:600 16px/1.2 inherit;text-align:left;
  }
  .m-row:active{background:var(--field)}
  .m-row .m-glyph{
    width:34px;height:34px;flex:0 0 34px;border-radius:10px;
    display:grid;place-items:center;font-size:17px;
    background:var(--field);color:var(--fg);
  }
  .m-row small{display:block;margin-top:2px;font:400 13px/1.3 inherit;color:var(--fg);opacity:.6}
  .m-goto{
    display:flex;align-items:center;gap:8px;
    margin:0 14px 10px;padding:0 14px;height:50px;
    border:1px solid var(--line);border-radius:14px;background:var(--field);
  }
  .m-goto input{
    flex:1;min-width:0;height:48px;border:0;background:transparent;color:var(--fg);
    font-size:16px;outline:0;
  }
  .m-goto input::placeholder{color:var(--fg);opacity:.5}

  @media (prefers-reduced-motion:reduce){
    .launcher,.m-orb,.m-orb::after,#oliGuestAi{transition:none;animation:none}
  }
}