/* ===========================================================================
   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, and only in the
   document that owns the screen. Outside the query these five 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.

   data-m-chrome is the other half of the same question, and it is the half the
   query cannot ask. A tile is this same build, at this same width, inside an
   iframe - so a phone-sized tile drew its own bar, its own dock and its own
   Princess behind the ones the shell had already drawn: two of everything, and
   the page the tile was opened for squeezed into what was left. index.html
   writes the attribute before first paint - "on" in the document that is the
   screen, "off" in one that is only part of it. In the second kind every bar,
   dock and orb rule below is off, so the chrome is one, and the tile's page
   fills the tile. */
.m-bar,.m-dock,.m-orb,.m-scrim,.m-sheet{display:none}
html:not([data-m-chrome="on"]) .m-bar,
html:not([data-m-chrome="on"]) .m-dock,
html:not([data-m-chrome="on"]) .m-orb,
html:not([data-m-chrome="on"]) .m-scrim,
html:not([data-m-chrome="on"]) .m-sheet{display:none!important}

@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;
  }

  /* A document that is only part of the screen keeps none of the bars' room:
     every offset written against these two is a bar this document does not
     draw and must not leave a gap for. They are the only two values the embed
     changes, and zeroing them here is what lets everything below stay written
     once. */
  html:not([data-m-chrome="on"]){--m-bar:0px;--m-dock:0px}

  /* ---- 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}

  /* The 42px inset the frame carries is the desktop tab strip's room. There is
     no tab strip here, so the page starts at the top of the screen and ends at
     the bottom of it rather than leaving a band it cannot use. The two cards
     that stand where a page would are moved with it, or they would be drawn
     42px below it. */
  .surface-frame,.surface-empty,.surface-sleep{inset:0;height:100%}

  /* ---- 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}
  }
}