/* ZULU SKY — the "AI Agent Smart Dashboard" skin (Lemeck's reference video +
   dribbble.com/shots/25796009, 2026-08-26: "Change the UI to be exactly like the
   video and link, keep the functionalities… BOIL THE OCEAN").

   Decoded from the reference frames:
     · airy sky-blue gradient world with a dreamy 3D meadow at the foot
     · one huge frosted-glass panel; very rounded corners everywhere
     · centred circular avatar portrait + "● Live Chat" pill + soft greeting
     · white pill composer with a BLACK circular ↑ send
     · dashboard of solid WHITE cards: purple progress ring, task rows with
       chevrons + mini rings, coral suggestion card, black floating widget,
       colored event chips, dotted-grid texture
     · rounded friendly type (Poppins)

   ARCHITECTURE: loaded AFTER doer-ui.css and scoped under body.sky (sky.js adds
   the class), so every rule outranks both doer-ui and the runtime-injected
   pulse.js / cc-extras.js styles WITHOUT !important wars. Remove the class (or
   this link) and the DO-er look returns untouched — fully reversible. app.js is
   not referenced, only re-dressed. */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

/* ─────────────────────────── tokens ─────────────────────────── */
body.sky{
  --sky-hi:#c3dcf3;      /* zenith */
  --sky-lo:#8fb4dd;      /* horizon */
  --glass:rgba(255,255,255,.34);
  --glass-brd:rgba(255,255,255,.62);
  --card:#ffffff;
  --ink:#22303f;
  --ink-soft:#51657a;
  --muted:#7d93ab;
  --black:#141417;
  --coral:#ee6a52;
  --violet:#8b5cf6;
  --violet-soft:#c4b5fd;
  --amber:#f0a34c;
  --indigo:#6459e8;
  --mint:#58c78b;
  --r-panel:28px;
  --r-card:22px;
  --shadow-card:0 10px 30px rgba(43,74,111,.14);
  --shadow-pop:0 16px 40px rgba(43,74,111,.22);
  font-family:"Poppins","Plus Jakarta Sans",system-ui,sans-serif;
  color:var(--ink);
  /* !important is deliberate here, not laziness: doer-ui.css:32 scopes the plum
     gradient to `body.doer`, which has IDENTICAL specificity to `body.sky`, so the
     winner was decided purely by source order. That tie left the old plum showing
     on Lemeck's device (2026-08-26 screenshot) while the rest of the skin applied.
     These few declarations are the load-bearing ones — pin them so no cascade
     tie, stale cache or future rule can undo the world. */
  /* --sky-mid is swapped per season by seasons.js; the literal is the fallback */
  background:linear-gradient(178deg,var(--sky-hi) 0%,var(--sky-mid,#a9c9ea) 46%,var(--sky-lo) 100%) !important;
  transition:background 6s ease-in-out;
}
body.sky::before{ /* retire the DO-er grain */
  content:"";opacity:0 !important;
}
/* the DO-er shell must never paint over the sky world */
body.sky .app,body.sky .shell{background:transparent !important}

/* ── the world: meadow + drifting clouds (sky.js mounts .sky-scene first in body) ── */
body.sky .sky-scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
body.sky .sky-meadow{position:absolute;left:-4%;right:-4%;bottom:-6px;height:46vh;
  background-image:var(--meadow,none);background-size:cover;background-position:50% 78%;
  /* NO BLUR — Lemeck wants the meadow crisp at 4K (2026-08-26). Only a light
     saturation lift; sharpness comes from the hi-dpi asset in sky.js. */
  filter:saturate(1.06);transform:scale(1.04);
  image-rendering:auto;
  animation:sky-sway 24s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40%);
          mask-image:linear-gradient(180deg,transparent 0,#000 40%)}
@keyframes sky-sway{0%,100%{transform:scale(1.04) translateX(0)}50%{transform:scale(1.06) translateX(-14px)}}
/* a soft morning sun that breathes, so the sky itself is alive */
body.sky .sky-sun{position:absolute;top:-12vh;right:6vw;width:46vw;height:46vw;
  max-width:640px;max-height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,247,224,.55),rgba(255,240,200,.16) 45%,transparent 68%);
  animation:sky-glow 11s ease-in-out infinite}
@keyframes sky-glow{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
body.sky .sky-meadow--css{ /* graceful fallback if the rendered image is absent */
  background-image:
    radial-gradient(58% 120% at 18% 108%, #79a95f 0%, transparent 62%),
    radial-gradient(70% 140% at 78% 118%, #6da156 0%, transparent 64%),
    radial-gradient(120% 160% at 50% 128%, #85b46a 0%, #a9c9ea 70%);
}
body.sky .sky-cloud{position:absolute;background:rgba(255,255,255,.85);border-radius:50%;
  filter:blur(22px);opacity:.8;animation:sky-drift linear infinite}
@keyframes sky-drift{from{transform:translateX(-18vw)}to{transform:translateX(118vw)}}
body.sky .sky-petal{position:absolute;bottom:-3vh;border-radius:60% 40% 55% 45%;
  opacity:.55;animation:sky-float linear infinite;pointer-events:none}
@keyframes sky-float{
  0%{transform:translateY(0) rotate(0deg)}
  100%{transform:translateY(-118vh) rotate(300deg)}
}
@media (prefers-reduced-motion:reduce){
  body.sky .sky-cloud,body.sky .sky-petal{animation:none}
}
/* lift the panels above the sky scene. NOTE: .toolrail is deliberately absent —
   it is position:absolute in doer-ui.css (a floating dock). Forcing it to
   relative here turned it into a 300px grid column: that was the "ghost oval"
   in Lemeck's screenshot, not the glass styling. It carries its own z-index:20. */
body.sky .shell,body.sky .rail,body.sky .chat,body.sky .side{position:relative;z-index:1}

/* the third grid column existed for the .side persona rail, which sky retires;
   the floating dock only needs a gutter, so give the chat panel the 230px back */
body.sky .app{grid-template-columns:252px minmax(0,1fr) 76px}
@media (max-width:1080px){body.sky .app{grid-template-columns:224px minmax(0,1fr) 76px}}
@media (max-width:760px){body.sky .app{grid-template-columns:1fr}}

/* ─────────────────────────── left rail → stacked glass cards ─────────────────────────── */
body.sky .rail{background:transparent;border:0;box-shadow:none;backdrop-filter:none;
  display:flex;flex-direction:column;gap:14px;padding:6px 2px}
/* the logo sits bare on the sky — no glass slab, no shadow (Lemeck 2026-08-26) */
body.sky .rail__brand{background:none;border:0;border-radius:0;padding:14px 12px;
  backdrop-filter:none;box-shadow:none}
body.sky .rail__logo{filter:none;max-width:104px}
body.sky .newchat{background:var(--card);color:var(--ink);border:0;border-radius:999px;
  font-weight:600;box-shadow:var(--shadow-card);transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
body.sky .newchat:hover{transform:translateY(-2px) scale(1.02);box-shadow:var(--shadow-pop)}
body.sky .newchat span{background:var(--black);color:#fff;border-radius:50%}
body.sky .threads{background:transparent}
body.sky .threads__label{color:var(--ink-soft);opacity:1;font-weight:600}
body.sky .threads__label svg{color:var(--coral)}

/* compliance countdowns — the coral BLOCK was a distraction (Lemeck 2026-08-26):
   no orange fill anywhere, the text alone carries the colour */
body.sky .reminders{background:none;border-radius:var(--r-card);padding:10px 2px;
  box-shadow:none}
body.sky .reminder{background:none;border:0;border-radius:14px;color:var(--coral)}
body.sky .reminder__tag{background:none;color:var(--coral);font-weight:700}
body.sky .reminder__date{color:var(--coral);opacity:.85}
body.sky .reminder__count{color:var(--coral);font-weight:700}
/* the 7-day alarm stays LOUD but as pulsing TEXT, not a flashing red block
   (index.html's beep-red animates background+box-shadow; override both) */
body.sky .reminder.beep{background:none !important;box-shadow:none !important;
  border-color:transparent;animation:sky-beep-text 1s steps(1,end) infinite}
@keyframes sky-beep-text{0%,49%{color:#e5372a}50%,100%{color:var(--coral);opacity:.55}}
body.sky .reminder.beep .reminder__tag,
body.sky .reminder.beep .reminder__count,
body.sky .reminder.beep .reminder__count b,
body.sky .reminder.beep .reminder__date{color:inherit}
@media (prefers-reduced-motion:reduce){
  body.sky .reminder.beep{animation:none;color:#e5372a}
}
body.sky #sync{background:var(--glass);border:1.5px solid var(--glass-brd);color:var(--ink-soft);
  border-radius:999px;backdrop-filter:blur(14px)}

/* ─────────────────────────── centre: the big glass panel ─────────────────────────── */
/* thinner glass + lighter blur than the rest of the skin, so the meadow, clouds
   and sun stay visible THROUGH the main panel — Lemeck: "make sure we can see
   the background animation". */
body.sky .chat{background:rgba(255,255,255,.22) !important;border:1.5px solid var(--glass-brd);
  border-radius:var(--r-panel);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 20px 60px rgba(43,74,111,.18)}
body.sky .ticker{background:transparent;border:0}
body.sky .tick{color:var(--ink-soft)}
body.sky .tick--warn{color:var(--coral)}
/* app.js's own greeting block (#now "OFFICE OF THE CEO" + #greeting) duplicated
   the hero's welcome (Lemeck's screenshot showed it twice). Hide the block —
   never remove it: app.js writes into #now/#greeting/#headline every sync, and
   sky.js MIRRORS #greeting's text into the hero. */
body.sky .hello{display:none}
body.sky #now{color:var(--ink-soft)}
body.sky #greeting{color:var(--ink);font-weight:600}
/* the SUBS ticker is now the TOP row of the chat panel — the Chat/Dashboard
   tabs and the avatar chip were removed on Lemeck's word (2026-08-26) and the
   ticker was shifted up into their place */
body.sky .ticker{flex:0 0 auto;margin-top:0;padding:14px 16px 6px}

/* the reference hero (mounted by sky.js): portrait + live pill + greeting */
body.sky .sky-hero{display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:26px 12px 8px;text-align:center}
body.sky .sky-hero.sky-hero--hidden{display:none}
/* "SYNC 6S AGO" is retired and Live Chat takes its place, bottom-left, in the
   white glassy style with the orange live light (Lemeck 2026-08-26).
   position:FIXED, not absolute, and the element deliberately stays a child of
   .chat: the rail that used to hold SYNC is display:none on phones, so parking
   the badge inside it would have made it vanish there. Fixed + a always-visible
   parent means it shows on every screen size. */
body.sky #sync{display:none !important}
body.sky .sky-live{position:fixed;left:24px;bottom:22px;top:auto;right:auto;z-index:22;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--glass);border:1.5px solid var(--glass-brd);backdrop-filter:blur(16px);
  color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:7px 14px;border-radius:999px;
  box-shadow:var(--shadow-card)}
/* the orange live light */
body.sky .sky-live i{background:var(--coral);
  box-shadow:0 0 8px rgba(238,106,82,.9)}
body.sky .sky-live i{width:7px;height:7px;border-radius:50%;background:var(--coral);
  animation:sky-pulse 1.8s ease-out infinite}
@keyframes sky-pulse{0%{box-shadow:0 0 0 0 rgba(238,106,82,.6)}75%{box-shadow:0 0 0 8px rgba(238,106,82,0)}100%{box-shadow:0 0 0 0 rgba(238,106,82,0)}}
/* height-aware: on a 720px-tall laptop a fixed 190px portrait + tiles left the
   message log 4px (measured, not assumed), so the portrait scales with the
   viewport and the log always keeps room */
body.sky .sky-portrait{flex:0 0 auto;/* never let column-flex squash it oval */
  width:min(190px,23vh);height:min(190px,23vh);border-radius:50%;
  /* NO disc behind her (Lemeck 2026-08-26: "remove the background of the avatar
     in the circle so we can see the background"). Her PNG is a real cut-out —
     37% of it is fully transparent — so dropping the radial-gradient lets the
     sky and meadow show straight through. The white inset ring and the drop
     shadow go with it: both were drawing the edge of a disc that no longer
     exists, and a shadow cast by nothing reads as a smudge. */
  background:var(--persona-img,url("assets/zulu-avatar.png")) center 18%/cover no-repeat;
  box-shadow:none;
  animation:sky-breathe 5.2s ease-in-out infinite}
@keyframes sky-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.015)}}
/* speaking = a soft halo of light around her, NOT the old disc ring — that ring
   would have put the removed background straight back the moment she spoke */
body.sky.is-speaking .sky-portrait{animation-duration:2.2s;
  filter:drop-shadow(0 0 16px rgba(255,255,255,.75))
         drop-shadow(0 0 34px rgba(255,247,224,.5))}
body.sky .sky-hello{font-size:clamp(21px,2.6vw,30px);font-weight:500;color:var(--ink);
  line-height:1.3;max-width:22ch}
body.sky .sky-hello b{font-weight:700}

/* quick-action tiles (New Task / Playlist / Image Gen → Zulu's real actions) */
body.sky .sky-tiles{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  padding:10px 14px 4px}
body.sky .sky-tile{flex:1 1 150px;max-width:210px;display:flex;flex-direction:column;
  align-items:center;gap:10px;padding:15px 12px 17px;cursor:pointer;
  background:rgba(255,255,255,.30);border:1.5px solid var(--glass-brd);
  border-radius:var(--r-card);backdrop-filter:blur(14px);color:var(--ink-soft);
  font:inherit;font-size:12.5px;font-weight:600;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),background .22s,box-shadow .22s}
body.sky .sky-tile:hover{transform:translateY(-4px);background:rgba(255,255,255,.5);
  box-shadow:var(--shadow-pop)}
body.sky .sky-tile:active{transform:translateY(-1px) scale(.98)}
body.sky .sky-tile i{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.65);color:var(--ink);
  box-shadow:0 6px 14px rgba(43,74,111,.14);font-style:normal;font-size:19px}

/* chat log */
body.sky .log{scrollbar-color:rgba(43,74,111,.25) transparent}
body.sky .msg--buddy{background:var(--card);color:var(--ink);border:0;
  box-shadow:var(--shadow-card);border-radius:20px 20px 20px 7px;
  animation:sky-in .34s cubic-bezier(.16,1,.3,1)}
body.sky .msg--buddy *{color:var(--ink)}
body.sky .msg--buddy a{color:var(--indigo)}
body.sky .msg--you{background:var(--black);color:#fff;border:0;
  border-radius:20px 20px 7px 20px;box-shadow:0 8px 20px rgba(0,0,0,.22);
  animation:sky-in .34s cubic-bezier(.16,1,.3,1)}
@keyframes sky-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
body.sky .msg--buddy .md-table{border-color:rgba(43,74,111,.15)}
body.sky .msg--buddy .md-table th{background:#eef4fb;color:var(--ink)}
body.sky .msg--buddy .md-table td{border-color:rgba(43,74,111,.1)}
body.sky .msg--buddy code{background:#eef4fb;color:var(--indigo)}
body.sky .dl-link{background:var(--black);color:#fff !important;border:0;border-radius:999px;
  box-shadow:0 6px 14px rgba(0,0,0,.2)}
body.sky .msg__status{color:var(--muted)}
body.sky .msg--buddy > i:only-child{color:var(--muted)}

/* composer → white pill + black circular send (the reference's signature) */
body.sky .composer{background:var(--card);border:0;border-radius:999px;
  box-shadow:0 14px 34px rgba(43,74,111,.22);padding:7px 7px 7px 10px}
body.sky .composer:focus-within{box-shadow:0 14px 34px rgba(43,74,111,.3),0 0 0 3px rgba(139,92,246,.25)}
body.sky #cmd{color:var(--ink)}
body.sky #cmd::placeholder{color:var(--muted)}
body.sky .composer__send{background:var(--black);color:#fff;border-radius:50%;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
body.sky .composer__send:hover{transform:scale(1.08)}
body.sky .composer__send:active{transform:scale(.94)}
body.sky .composer__mic{background:rgba(34,48,63,.06);color:var(--ink);border-radius:50%}
body.sky .composer__mic[aria-pressed="true"]{background:var(--coral);color:#fff}
body.sky .composer__plus{color:var(--muted)}

/* header pills (Team/Private of the reference → Chat/Dashboard) */
body.sky .sky-tabs{display:inline-flex;background:var(--glass);border:1.5px solid var(--glass-brd);
  border-radius:999px;padding:4px;backdrop-filter:blur(14px)}
body.sky .sky-tab{border:0;background:transparent;color:var(--ink-soft);font:inherit;
  font-size:12.5px;font-weight:600;padding:7px 17px;border-radius:999px;cursor:pointer;
  transition:background .2s,color .2s}
body.sky .sky-tab.is-on{background:var(--card);color:var(--ink);box-shadow:0 4px 12px rgba(43,74,111,.16)}
body.sky .sky-me{width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.8);
  background:var(--persona-img,url("assets/zulu-avatar.png")) center 20%/cover no-repeat;
  box-shadow:0 6px 14px rgba(43,74,111,.2)}

/* right persona rail retired under sky (portrait lives in the hero) */
body.sky .side{display:none}

/* toolrail: it is a 300px GRID COLUMN, not a compact dock — glassing the
   container inflated it into a 300x684 ghost panel over the sky (Lemeck's
   screenshot). The column stays invisible; each button becomes its own
   frosted circle instead. */
body.sky .toolrail{background:transparent !important;border:0 !important;
  box-shadow:none !important;backdrop-filter:none !important;padding:0}
body.sky .tool{background:var(--glass);border:1.5px solid var(--glass-brd);
  border-radius:50%;backdrop-filter:blur(16px);box-shadow:var(--shadow-card);
  color:var(--ink-soft);transition:transform .2s cubic-bezier(.34,1.56,.64,1),
  color .2s,background .2s}
body.sky .tool:hover{color:var(--ink);background:rgba(255,255,255,.6);transform:scale(1.12)}
body.sky .pagedrop{background:var(--card);border:0;box-shadow:var(--shadow-card);color:var(--ink)}
body.sky .help{background:var(--black);color:#fff;border:0}

/* mobile drawer + scrim keep working; recolour only.
   The hero + tiles must SHRINK on phones — at full size they push the composer
   out of the viewport (found in 375px verification, not assumed). */
body.sky .scrim{background:rgba(43,74,111,.35)}
body.sky .chat{display:flex;flex-direction:column;min-height:0}
body.sky .sky-topbar{flex:0 0 auto}
/* hero + tiles may COMPRESS so the log keeps a readable floor; without this the
   log measured 4px tall at 1280x720 */
body.sky .sky-hero,body.sky .sky-tiles{flex:0 1 auto;min-height:0}
body.sky #log{flex:1 1 auto;min-height:120px}
@media (max-height:820px){
  body.sky .sky-hero{padding:12px 12px 4px;gap:9px}
  body.sky .sky-hello{font-size:clamp(17px,2vw,22px)}
  body.sky .sky-tiles{padding:6px 14px 2px}
  body.sky .sky-tile{padding:10px 12px 12px;gap:7px;font-size:11.5px}
  body.sky .sky-tile i{width:36px;height:36px;font-size:16px}
}
@media (max-height:660px){
  body.sky .sky-portrait{display:none}
  body.sky #log{min-height:150px}
}
@media (max-width:760px){
  /* my `body.sky .rail{display:flex}` outranked doer-ui's mobile `display:none`,
     so the rail rendered inline on phones and pushed the chat 417px down
     (measured at 375x812). Restore the hide; the ☰ drawer still opens it. */
  body.sky .rail{display:none}
  body.sky.rail-open .rail{display:flex;
    background:linear-gradient(178deg,var(--sky-hi),var(--sky-lo))}
  body.sky .sky-hero{padding:10px 8px 2px;gap:8px}
  body.sky .sky-portrait{width:92px;height:92px}
  body.sky .sky-live{font-size:10px;padding:5px 11px}
  body.sky .sky-hello{font-size:16px;max-width:26ch}
  body.sky .sky-tiles{flex-wrap:nowrap;gap:8px;padding:6px 10px 2px}
  body.sky .sky-tile{flex:1 1 0;min-width:0;max-width:none;padding:9px 4px 10px;
    font-size:10px;gap:6px}
  body.sky .sky-tile i{width:34px;height:34px;font-size:15px}
  body.sky .sky-tile span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  body.sky .sky-topbar{padding:10px 12px 0}
  body.sky .sky-me{width:32px;height:32px}
  /* On phones bottom-left is where the composer lives, so the badge stays at the
     top right, below the docked toolrail (measured collision: badge 261-346 vs
     dock 91-365). left/bottom must be unset — the desktop rule now uses them. */
  body.sky .sky-live{top:56px;right:14px;left:auto;bottom:auto;
    font-size:10px;padding:5px 11px}
  body.sky .ticker{padding-right:104px}
}

/* ─────────────────────────── COMMAND CENTRE → the white-card dashboard ─────────────────────────── */
body.sky .cmd-center{background:linear-gradient(178deg,rgba(195,220,243,.97),rgba(143,180,221,.97));
  backdrop-filter:blur(10px)}
body.sky .cmd-center::before{content:"";position:fixed;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(43,74,111,.16) 1.1px,transparent 1.3px);
  background-size:22px 22px;opacity:.5}
body.sky .cmd-center__close,body.sky .xclose{background:var(--black);color:#fff;border:0}
body.sky .cmd-center .board,
body.sky .cmd-center section.board{background:var(--card);border:0;border-radius:var(--r-card);
  box-shadow:var(--shadow-card);color:var(--ink)}
body.sky .cmd-center .board__head h2{color:var(--ink);letter-spacing:.08em}
body.sky .cmd-center .board__sub{color:var(--muted)}
body.sky .cmd-center .kv{border-color:rgba(43,74,111,.09);color:var(--ink)}
body.sky .cmd-center .kv *{color:var(--ink)}
body.sky .cmd-center .kv .zp-unlock,body.sky .cmd-center .kv .zp-collect{color:var(--muted)}
body.sky .cmd-center .office{background:#f2f7fd;border-color:transparent;color:var(--ink)}
body.sky .cmd-center .evt{color:var(--ink-soft)}
body.sky .cmd-center .need{background:#fff7f0;border-color:#f6dcc4;color:var(--ink)}

/* pulse.js hero + panels re-dressed (body.sky outranks the injected styles) */
body.sky .zp-hero{background:var(--card);border:0;box-shadow:var(--shadow-card)}
body.sky .zp-hero::after{background:radial-gradient(circle,rgba(139,92,246,.14),transparent 65%)}
body.sky .zp-eyebrow{color:var(--indigo)}
body.sky .zp-metric,body.sky .zp-dial__num{color:var(--ink)}
body.sky .zp-context{color:var(--ink-soft);opacity:1}
body.sky .zp-flag{background:#fff3ec;border-color:#f6d4bd;color:#b4653c}
body.sky .zp-inp{background:#f2f7fd;border-color:transparent}
body.sky .zp-inp b{color:var(--muted);opacity:1}
body.sky .zp-inp s{color:var(--ink)}
body.sky .zp-inp u{color:var(--muted);opacity:1}
body.sky .zp-panel{background:var(--card);border:0;box-shadow:var(--shadow-card)}
body.sky .zp-plabel{color:var(--ink-soft);opacity:1}
body.sky .zp-track{background:#e8eff8}
body.sky .zp-fill{background:linear-gradient(90deg,var(--violet),var(--violet-soft));
  box-shadow:0 0 14px rgba(139,92,246,.45)}
body.sky .zp-you{background:var(--ink);border-color:#fff}
body.sky .zp-gate b{color:var(--ink-soft);opacity:1}
body.sky .zp-gate.zp-done b{color:var(--violet)}
body.sky .zp-gate span{color:var(--muted);opacity:1}
body.sky .zp-gate i{background:rgba(43,74,111,.18)}
body.sky .zp-tick{background:#f2f7fd;border-color:transparent;color:var(--ink-soft)}
body.sky .zp-tick s{color:var(--indigo)}
body.sky .zp-tick.zp-soon{background:#f3efff;border-color:#ddd3fb}
body.sky .zp-story{background:#f7fafd;border-color:transparent;color:var(--ink)}
body.sky .zp-story:hover{background:#eef4fb}
body.sky .zp-story__t{color:var(--ink)}
body.sky .zp-story__m,body.sky .zp-why{color:var(--muted);opacity:1}
body.sky .zp-spark path{stroke:var(--violet)}
body.sky .zp-spark .zp-area{fill:rgba(139,92,246,.12)}
body.sky .zp-live{color:var(--mint)}
body.sky .zp-live i{background:var(--mint)}

/* cc-extras boards */
body.sky .ccx-item{background:#f7fafd;border-color:transparent}
body.sky .ccx-item b{color:var(--ink)}
body.sky .ccx-item small,body.sky .ccx-item .ccx-act,body.sky .ccx-age{color:var(--muted);opacity:1}
body.sky .ccx-kind{background:#efe9fd;color:var(--indigo)}
body.sky .ccx-empty{color:var(--muted);opacity:1}
body.sky .ccx-score{border-color:var(--violet);color:var(--ink)}
body.sky .ccx-health li,body.sky .ccx-health li b{color:var(--ink-soft)}
body.sky .ccx-health li b{color:var(--indigo)}
body.sky .ccx-rule{border-color:rgba(43,74,111,.1)}
body.sky .ccx-rule span{color:var(--ink-soft);opacity:1}
body.sky .ccx-rule .ccx-call{background:#eef4fb;color:var(--ink)}
body.sky .ccx-rule.ccx-awaiting .ccx-call{background:#fff3ec;color:#c2703f}
body.sky .ccx-rule .ccx-when{color:var(--muted);opacity:1}
body.sky #ccx-decisions a{color:var(--indigo) !important}

/* mission/roadmap band leftovers inside cmd-center adopt ink */
body.sky .cmd-center .phase{background:#f2f7fd;color:var(--ink)}
body.sky .cmd-center .phase.is-current{background:var(--black);color:#fff}

/* ═══════════════════════════ THE LIVING SEASONS ═══════════════════════════
   Paired with seasons.js. Four seasons on the hour with a slow crossfade,
   per-season weather (snow, leaves, blossom, sun rays), wind in all of them,
   and season-matched animals wandering past. Compositor-only: every animation
   below moves transform/opacity, never layout. (Lemeck 2026-08-26)
   ======================================================================== */
body.sky .zs-layers{position:absolute;inset:0;overflow:hidden}
body.sky .zs-meadow{position:absolute;left:-4%;right:-4%;bottom:-6px;height:46vh;
  background-size:cover;background-position:50% 78%;background-repeat:no-repeat;
  filter:saturate(1.06);opacity:0;
  /* the slow fade Lemeck asked for — out and in together, never a cut */
  transition:opacity 6s ease-in-out;
  animation:sky-sway 24s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40%);
          mask-image:linear-gradient(180deg,transparent 0,#000 40%)}
body.sky .zs-meadow.is-on{opacity:1}
/* the sun answers the season: fierce in summer, thin in winter */
body.sky .sky-sun{opacity:var(--zs-sun,.75)}

body.sky .zs-weather,body.sky .zs-fauna{position:absolute;inset:0;overflow:hidden;
  pointer-events:none}

/* ── snow ── */
body.sky .zs-flake{position:absolute;top:-6vh;border-radius:50%;background:#fff;
  box-shadow:0 0 4px rgba(255,255,255,.85);
  animation-name:zs-fall,zs-drift;animation-timing-function:linear,ease-in-out;
  animation-iteration-count:infinite,infinite}
@keyframes zs-fall{to{transform:translateY(112vh)}}
@keyframes zs-drift{0%,100%{margin-left:0}50%{margin-left:26px}}

/* ── autumn leaves: fall AND tumble ── */
body.sky .zs-leaf{position:absolute;top:-6vh;border-radius:60% 10% 60% 10%;
  opacity:.85;animation-name:zs-fall,zs-tumble;
  animation-timing-function:linear,ease-in-out;
  animation-iteration-count:infinite,infinite}
@keyframes zs-tumble{0%{transform:rotate(0) translateX(0)}
  50%{transform:rotate(180deg) translateX(40px)}
  100%{transform:rotate(360deg) translateX(0)}}

/* ── spring blossom ── */
body.sky .zs-petal{position:absolute;top:-6vh;border-radius:50% 0 50% 50%;opacity:.8;
  animation-name:zs-fall,zs-tumble;animation-timing-function:linear,ease-in-out;
  animation-iteration-count:infinite,infinite}

/* ── summer: god-rays from the sun + heat shimmer off the grass ── */
body.sky .zs-ray{position:absolute;top:-14vh;width:8vw;height:90vh;
  transform-origin:top center;mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(255,247,214,.5),rgba(255,240,190,.13) 42%,transparent 72%);
  filter:blur(7px);animation:zs-ray-breathe ease-in-out infinite}
@keyframes zs-ray-breathe{0%,100%{opacity:.32}50%{opacity:.72}}
body.sky .zs-heat{position:absolute;left:0;right:0;bottom:0;height:34vh;
  background:linear-gradient(180deg,transparent,rgba(255,250,225,.16));
  animation:zs-heat 6s ease-in-out infinite}
@keyframes zs-heat{0%,100%{transform:translateY(0) scaleY(1);opacity:.5}
  50%{transform:translateY(-5px) scaleY(1.02);opacity:.85}}

/* ── wind: a moving veil, stronger where the season is harsher ── */
body.sky .zs-wind{position:absolute;left:-30%;right:-30%;top:0;bottom:0;
  background:linear-gradient(78deg,transparent 0,rgba(255,255,255,.05) 45%,transparent 70%);
  animation:zs-wind 13s linear infinite;opacity:.5}
@keyframes zs-wind{0%{transform:translateX(-24%)}100%{transform:translateX(24%)}}
body.sky[data-season="autumn"] .zs-wind{animation-duration:8s;opacity:.75}
body.sky[data-season="winter"] .zs-wind{animation-duration:6.5s;opacity:.9}

/* ── the animals ── */
body.sky .zs-animal{position:absolute;top:var(--zs-top,70vh);left:-14vw;
  animation-name:zs-cross;animation-timing-function:linear;
  animation-iteration-count:1;animation-fill-mode:both;will-change:transform}
body.sky .zs-animal svg{display:block;fill:rgba(38,46,66,.62);stroke:none}
body.sky[data-season="winter"] .zs-animal svg{fill:rgba(44,54,76,.55)}
@keyframes zs-cross{from{transform:translateX(0)}to{transform:translateX(128vw)}}
/* fliers bob as they cross; walkers get a small gait bounce */
body.sky .zs-fly svg{animation:zs-bob 1.5s ease-in-out infinite}
@keyframes zs-bob{0%,100%{transform:translateY(0) scaleX(var(--sx,1))}
  50%{transform:translateY(-13px) scaleX(var(--sx,1))}}
body.sky .zs-walk svg{animation:zs-step .7s ease-in-out infinite}
@keyframes zs-step{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

@media (prefers-reduced-motion:reduce){
  body.sky .zs-meadow{animation:none}
  body.sky .zs-weather,body.sky .zs-fauna{display:none}
}

/* The sun must ANSWER the season — fierce in summer, thin behind winter cloud.
   The original sky-glow keyframes animate opacity, and an animation beats a
   static `opacity:var(--zs-sun)` declaration, so winter's sun stayed at .75
   (measured). Redefining the keyframes here (later definition wins) makes the
   breathing sun scale with the season instead of fighting it. */
@keyframes sky-glow{
  0%,100%{opacity:calc(var(--zs-sun,.75) * .8);transform:scale(1)}
  50%    {opacity:var(--zs-sun,.75);transform:scale(1.07)}
}

/* ═══════════ SHE REACTS — body language + light, driven by the reply ═══════════
   She is a photograph, so her face cannot change. Emotion is carried by HOW she
   moves and how light falls on her: a warm lift for good news, a slow lean for a
   warning, a tilt while thinking, a nod on greeting. (Lemeck 2026-08-26)        */
body.sky .sky-portrait{transform-origin:50% 85%;
  transition:filter .9s ease,transform .9s cubic-bezier(.34,1.4,.64,1)}

/* calm — the resting breath (the base animation continues underneath) */
body.sky.mood-calm .sky-portrait{filter:none}

/* celebrate — she lifts and warms, with a quick delighted bounce */
body.sky.mood-celebrate .sky-portrait{
  filter:drop-shadow(0 0 22px rgba(255,214,140,.85)) saturate(1.12) brightness(1.04);
  animation:sky-breathe 5.2s ease-in-out infinite,zs-celebrate 1.15s cubic-bezier(.34,1.56,.64,1) 2}
@keyframes zs-celebrate{0%,100%{transform:translateY(0) rotate(0)}
  35%{transform:translateY(-16px) rotate(-3.5deg)}
  70%{transform:translateY(-5px) rotate(2.5deg)}}

/* concern — she leans in, cools, and slows right down */
body.sky.mood-concern .sky-portrait{
  filter:drop-shadow(0 0 20px rgba(238,106,82,.6)) saturate(.9) contrast(1.03);
  animation:sky-breathe 8.5s ease-in-out infinite,zs-concern 4.5s ease-in-out infinite}
@keyframes zs-concern{0%,100%{transform:rotate(-2.6deg) translateY(2px) scale(.99)}
  50%{transform:rotate(-1.4deg) translateY(0) scale(1)}}

/* greet — a warm nod hello */
body.sky.mood-greet .sky-portrait{
  filter:drop-shadow(0 0 18px rgba(255,240,205,.8)) brightness(1.03);
  animation:sky-breathe 5.2s ease-in-out infinite,zs-nod 1.5s ease-in-out 2}
@keyframes zs-nod{0%,100%{transform:rotate(0) translateY(0)}
  30%{transform:rotate(4deg) translateY(7px)}
  60%{transform:rotate(1deg) translateY(1px)}}

/* think — head tilted, a slow searching sway and a cool shimmer */
body.sky.mood-think .sky-portrait{
  filter:drop-shadow(0 0 16px rgba(150,190,240,.75));
  animation:sky-breathe 6.4s ease-in-out infinite,zs-think 3.6s ease-in-out infinite}
@keyframes zs-think{0%,100%{transform:rotate(5deg) translateX(0)}
  50%{transform:rotate(3deg) translateX(-7px)}}

@media (prefers-reduced-motion:reduce){
  body.sky .sky-portrait{animation:none !important;transform:none !important}
}

/* THE EXPRESSION CROSSFADE — two stacked layers, so one face genuinely fades
   OUT while the next fades IN (Lemeck asked for a smooth fade, not a snap). A
   single element can only dip through transparent, which read as a flicker.
   Pure CSS transition: no JS timer, so a throttled background tab can never
   strand her mid-change. */
body.sky .sky-portrait.has-faces{background-image:none}
body.sky .sky-face{position:absolute;inset:0;border-radius:50%;
  background-position:center 18%;background-size:cover;background-repeat:no-repeat;
  opacity:0;transition:opacity 1.1s cubic-bezier(.4,0,.2,1)}
body.sky .sky-face.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){
  body.sky .sky-face{transition:opacity .2s linear}
}

/* the new moods reuse the closest existing body language, so every expression
   arrives with motion that agrees with it rather than a dead still frame */
body.sky.mood-proud .sky-portrait,
body.sky.mood-explain .sky-portrait{
  filter:drop-shadow(0 0 18px rgba(255,240,205,.7));
  animation:sky-breathe 5.2s ease-in-out infinite}
body.sky.mood-surprise .sky-portrait{
  filter:drop-shadow(0 0 22px rgba(190,225,255,.9)) brightness(1.05);
  animation:sky-breathe 4.2s ease-in-out infinite,zs-celebrate 1s cubic-bezier(.34,1.56,.64,1) 1}
body.sky.mood-worried .sky-portrait{
  filter:drop-shadow(0 0 18px rgba(160,180,210,.7)) saturate(.92);
  animation:sky-breathe 8s ease-in-out infinite,zs-concern 5s ease-in-out infinite}
body.sky.mood-angry .sky-portrait{
  filter:drop-shadow(0 0 22px rgba(229,55,42,.75)) saturate(1.05) contrast(1.06);
  animation:sky-breathe 7s ease-in-out infinite,zs-angry 2.6s ease-in-out infinite}
@keyframes zs-angry{0%,100%{transform:translateX(0) rotate(0)}
  25%{transform:translateX(-3px) rotate(-1deg)}75%{transform:translateX(3px) rotate(1deg)}}

/* ── THE ZULU GROUP — one tap to each sub-project (Lemeck 2026-08-26) ──────── */
body.sky .sky-group{position:relative;flex-wrap:wrap;gap:10px;padding:4px 14px 2px}
body.sky .sky-group__label{flex:1 0 100%;text-align:center;font-size:10px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.75;margin-bottom:2px}
/* smaller than the primary actions — these are destinations, not the daily work */
body.sky .sky-tile--link{flex:1 1 110px;max-width:170px;padding:10px 8px 12px;
  gap:7px;font-size:11.5px;text-decoration:none;color:var(--ink-soft);
  background:rgba(255,255,255,.24)}
body.sky .sky-tile--link i{width:34px;height:34px;font-size:15px}
body.sky .sky-tile--link:hover{background:rgba(255,255,255,.52);
  transform:translateY(-4px);text-decoration:none}
@media (max-width:760px){
  body.sky .sky-group{gap:6px;padding:2px 10px 0}
  body.sky .sky-group__label{font-size:9px;margin-bottom:0}
  body.sky .sky-tile--link{flex:1 1 0;min-width:0;padding:7px 3px 8px;font-size:9.5px;gap:5px}
  body.sky .sky-tile--link i{width:28px;height:28px;font-size:13px}
}

/* ═══════════ MOBILE HEADER — one row per job, nothing on top of anything ═══════════
   Lemeck 2026-08-27: "fix the Mobile view UI it is a mess… make sure they do not
   interfere with each other." Measured at 390x844, both states. Root cause of
   nearly all of it was MY OWN rule near the top of this file —
   `body.sky .rail{position:relative;z-index:1}` — which outranks doer-ui's
   `body.rail-open .rail{position:fixed;z-index:90}` (same specificity, later in
   source order). That turned the slide-over drawer into a 412px relative slab
   with the toolrail floating over its logo. Fixed by restoring the drawer's own
   geometry here rather than by fighting it with z-index.
   ============================================================================ */
@media (max-width:760px){
  /* ROW 1 — Live badge on the left, tool dock on the right. The icons shrink to
     30px so both genuinely fit on a 390px screen (live ends ~x100, dock starts
     ~x134) instead of the badge being pushed down into the ticker. */
  body.sky .toolrail{top:10px;right:10px;left:auto;padding:4px 5px;gap:4px}
  body.sky .toolrail .tool{width:30px;height:30px;font-size:13px}
  body.sky .sky-live{top:13px;left:12px;right:auto;bottom:auto;
    font-size:9.5px;padding:4px 10px;letter-spacing:.06em}

  /* ROW 2 — the ticker gets its FULL width back. It had 104px reserved on the
     right for the badge, which squeezed the marquee window to 192px and chopped
     the text mid-word ("…DY: Odoo (work env) renews 28 Aug · in"). */
  body.sky .ticker{padding:12px 14px 6px}

  /* THE DRAWER — restore the real slide-over: full height, above the chrome. */
  body.sky.rail-open .rail{position:fixed;top:0;left:0;bottom:0;height:100%;
    width:82%;max-width:330px;z-index:90;overflow-y:auto;padding:18px 14px;
    border-radius:0 26px 26px 0;box-shadow:0 0 60px rgba(43,74,111,.45)}
  /* and the floating chrome steps ASIDE for it — a drawer is a modal surface, so
     the icons should not hover over its logo. Closes on the scrim, as before. */
  body.sky.rail-open .toolrail,
  body.sky.rail-open .sky-live{opacity:0;pointer-events:none;transition:opacity .2s}
  body.sky.rail-open .scrim{display:block;position:fixed;inset:0;z-index:85;
    background:rgba(43,74,111,.42)}
}