/* ===========================================================================
   UC "Ask Copilot" composer — solution variants
   Driven by html[data-solution="N"] (set by js/solution-switcher.js).
   Maps the 5 C3 "Copilot Convergence" Figma solutions onto the live composer.
   All 5 replace the pre-Figma warm-cream active look.

     1  Toggle switch in the pill; leading icon search → colour Copilot logo
     2  Static gray pill;          leading icon search → colour Copilot logo
     3  Copilot logo always on;    pill gray → black-filled when active
     4  Static gray pill;          leading icon search → chat bubble
     5  "+" menu → dismissible mode chip (pill hidden until a mode is picked)
   =========================================================================== */

/* Match Figma's text rendering: macOS browsers default to subpixel smoothing,
   which makes text look heavier than Figma (grayscale). Same weight (400),
   different render — this thins it to match. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Pill + "+" base style (Figma "Source picker" / "Add menu button") -----
   Ask Copilot pill = solid #f2f2f2 fill, NO border, fully rounded.
   "+" button       = no fill, no border — just the icon. ---------------------- */
html[data-solution] .zip-ask-copilot {
  background: #f2f2f2;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
html[data-solution] .zip-ask-copilot span,
html[data-solution] .zip-ask-copilot .zip-copilot-icon {
  color: rgba(0, 0, 0, 0.86);
}
html[data-solution] .zip-ask-copilot span {
  font-weight: 600;
}
html[data-solution] .zip-plus-btn {
  background: transparent;
  border: none;
}

/* Ask Copilot on → show the leading copilot icon even before any text is typed
   (baseline only reveals .zip-input-icon when .has-input, so an empty composer
    with Copilot on showed no icon). */
html[data-solution] .zip-composer-outer.copilot-active .zip-input-icon {
  display: flex;
}

/* Leading composer icons: 24×24 for search / globe / chat-bubble; the Copilot
   icon is slightly larger at 26×26 (container grows to match when it shows). */
html[data-solution] .zip-input-icon {
  width: 24px;
  height: 24px;
}
html[data-solution] .zip-input-icon .zip-input-search-icon,
html[data-solution] .zip-input-icon #zipInputGlobeIcon,
html[data-solution] .zip-input-icon .zip-input-bubble-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
/* 26px and allowed to overflow the 24px container without shrinking/distorting */
html[data-solution] .zip-input-icon #zipInputCopilotIcon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
/* Keep the icon container a constant 24 so the row (and the whole searchbox)
   never changes height between states. The 26px Copilot icon overflows the
   container harmlessly (centered, not clipped). */
html[data-solution] .zip-composer-outer.copilot-active .zip-input-icon {
  width: 24px;
  height: 24px;
}

/* Lock the input row height so showing/hiding/swapping the leading icon never
   reflows the searchbox. 32px = the icon-inclusive height; the empty placeholder
   (~22px text) and any icon (24/26) both fit, so every state is the same. */
html[data-solution] .zip-input-text {
  min-height: 32px;
}

/* Typed text starts at a fixed x that aligns with the suggestion-list text and
   never shifts when the leading icon swaps search(24) ↔ copilot(26). Baseline
   used 34px (search) / 36px (copilot) which both moved and sat left of the list. */
html[data-solution] .zip-input-text.has-input .zip-hidden-input,
html[data-solution] .zip-composer-outer.copilot-active .zip-input-text.has-input .zip-hidden-input {
  padding-left: 39px;
}

/* Align the controls row ("+", Ask Copilot, …) left edge with the leading icon
   of the input row above (baseline padding-left of 12 pushed the "+" 4px right). */
html[data-solution] .zip-controls {
  padding-left: 10px;
}

/* Nudge the leading icon 1px left (visual only — the typed text/input is fixed). */
html[data-solution] .zip-input-icon {
  transform: translateX(-1px);
}

/* "+" icon is 24px (was 20). Stays centred in its 36px button. */
html[data-solution] .zip-plus-btn svg {
  width: 24px;
  height: 24px;
}

/* Right-side composer icons (Camera + Voice) — separate Figma Fluent icons,
   both 24px, replacing the old combined zip-control-group.svg. */
html[data-solution] .zip-controls-right {
  gap: 16px;
}
.zip-ctrl-icon {
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.zip-ctrl-icon svg {
  width: 24px;
  height: 24px;
}

/* Top-site app icons: drop the outer #F0F0F0 hairline border. */
html[data-solution] .zip-top-site img {
  border: none;
}

/* Camera + mic only appear in the empty composer — hide them once the user has
   typed anything (has-input). :has() lets us react to the deep input state from
   the shared .zip-composer-inner ancestor. */
html[data-solution] .zip-composer-inner:has(.zip-input-text.has-input) .zip-controls-right {
  display: none;
}

/* Ask Copilot on → empty-state placeholder reads "Message Copilot".
   Scoped to :not(.has-input) so it never leaks over typed text (the placeholder
   span keeps its qf-placeholder class even while typing). */
html[data-solution] .zip-composer-outer.copilot-active .zip-input-text:not(.has-input) #zipInputDisplay {
  position: relative;
  color: transparent;
}
html[data-solution] .zip-composer-outer.copilot-active .zip-input-text:not(.has-input) #zipInputDisplay::after {
  content: "Message Copilot";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(0, 0, 0, 0.74);
  white-space: nowrap;
}

/* Copilot on must NOT change the searchbox chrome — keep the resting border
   (#fff, from .zip-composer-outer), kill the glow-flash and the border fade.
   The leading icon / placeholder text are the only intended changes. */
html[data-solution] .zip-composer-outer.copilot-active .zip-composer-copilot-bg {
  animation: none;
  opacity: 0;
}
html[data-solution] .zip-composer-outer.copilot-active {
  border-color: #fff;
  transition: none;
}

/* === Solution 1 — pill is "Ask Copilot" text + trailing switch (no icon) === */
html[data-solution="1"] .zip-ask-copilot .zip-copilot-icon {
  display: none;
}
/* Nudge the "Ask Copilot" label up 0.5px within the chip. */
html[data-solution="1"] .zip-ask-copilot span:not(.zip-copilot-switch) {
  transform: translateY(-0.5px);
}
/* Pill darkens one step when toggled on (Figma: #f2f2f2 off → #ebebeb on) */
html[data-solution="1"] .zip-ask-copilot.toggle-on {
  background: #ebebeb;
}
.zip-copilot-switch {
  display: none;
}
html[data-solution="1"] .zip-copilot-switch {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 9px;
  margin-left: 0;
  border-radius: 999px;
  background: rgba(60, 60, 67, 0.3);
  transition: background 0.25s ease;
  flex-shrink: 0;
  transform: scale(1.2);
}
html[data-solution="1"] .zip-copilot-switch::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease;
}
html[data-solution="1"] .zip-ask-copilot.toggle-on .zip-copilot-switch {
  background: #242424;
}
html[data-solution="1"] .zip-ask-copilot.toggle-on .zip-copilot-switch::after {
  transform: translateX(7px);
}

/* === Solution 2 — Capability picker: transparent idle → #e8e8e8 active =====
   (Figma: the pill has no fill until the capability is active, then #e8e8e8.) */
html[data-solution="2"] .zip-ask-copilot {
  background: transparent;
}
html[data-solution="2"] .zip-ask-copilot.toggle-on {
  background: #e8e8e8;
}

/* === Solution 4 — chat-bubble leading icon (instead of colour logo) ======= */
.zip-input-bubble-icon {
  display: none;
  width: 22px;
  height: 22px;
}
/* Sol4: pill fill darkens one step when active, same as Sol1 (#f2f2f2 → #ebebeb).
   Idea C — the whole pill springs (1 → 1.045 → 1) as it lights up, for a tactile
   "pressed on" feel that plays together with the icon pop (idea A). */
html[data-solution="4"] .zip-ask-copilot.toggle-on {
  background: #ebebeb;
  animation: sol4PillSpring 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
             sol4PillFlash 0.45s ease-out;
}
@keyframes sol4PillSpring {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}
/* Fill flash: off → a more prominent warm tint (the "lit" pulse) → snap to the
   final on colour. The 50%→51% jump is the instant snap to #ebebeb. */
@keyframes sol4PillFlash {
  0%   { background-color: #f2f2f2; }
  22%  { background-color: #e9e9e9; }
  50%  { background-color: #e9e9e9; }
  51%  { background-color: #ebebeb; }
  100% { background-color: #ebebeb; }
}

/* Sol4: keep the original line/outline mono icon as the idle default; swap to
   the colour logo only when active. The colour ribbon glyph is narrower than the
   outline icon, so scale it up to read the same overall size (layout box stays
   18px → pill width unchanged). */
.zip-copilot-icon-color {
  display: none;
}
/* Idea A — the colour logo springs in when activated (opacity + scale pop with a
   slight overshoot). In-flow so it lands in the right slot; the mono icon is
   swapped out underneath. Settles at scale 1.3 to match the outline icon size. */
html[data-solution="4"] .zip-ask-copilot.toggle-on .zip-copilot-icon {
  display: none;
}
html[data-solution="4"] .zip-ask-copilot.toggle-on .zip-copilot-icon-color {
  display: block;
  transform: scale(1.3);
  animation: sol4IconPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes sol4IconPop {
  0%   { opacity: 0; transform: scale(0.6); }
  55%  { opacity: 1; transform: scale(1.42); }
  100% { opacity: 1; transform: scale(1.3); }
}
html[data-solution="4"] .zip-composer-outer.copilot-active .zip-input-icon #zipInputCopilotIcon {
  display: none;
}
html[data-solution="4"] .zip-composer-outer.copilot-active .zip-input-icon .zip-input-bubble-icon {
  display: block;
}

/* === Solution 3 — Copilot logo always on + black-filled active pill ======= */
html[data-solution="3"] .zip-input-text.has-input .zip-input-icon .zip-input-search-icon {
  display: none;
}
html[data-solution="3"] .zip-input-text.has-input .zip-input-icon #zipInputCopilotIcon {
  display: block;
}
html[data-solution="3"] .zip-input-text.has-input .zip-input-icon {
  width: 24px;
  height: 24px;
}
html[data-solution="3"] .zip-ask-copilot.toggle-on {
  background: #1a1a1a;
}
html[data-solution="3"] .zip-ask-copilot.toggle-on span,
html[data-solution="3"] .zip-ask-copilot.toggle-on .zip-copilot-icon {
  color: #fff;
}

/* === Solution 5 — pill hidden until a "+" menu mode is picked ============= */
html[data-solution="5"] .zip-ask-copilot {
  display: none;
}
html[data-solution="5"] .zip-ask-copilot.toggle-on {
  display: flex;
}
/* Sol5 chip: leading icon, a tighter icon→text gap, and a clear text→× gap. */
html[data-solution="5"] .zip-ask-copilot .zip-copilot-icon {
  width: 16px;
  height: 16px;
}
html[data-solution="5"] .zip-ask-copilot {
  gap: 6px;
}
.uc-chip-x {
  margin-left: 8px;
}

/* === Solution 5 — multimodal bottom sheet (opens from "+") ================= */
.uc-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 40;
}
.uc-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 8px 16px 24px;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(110%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 41;
}
.zip-page.uc-sheet-open .uc-sheet-backdrop {
  opacity: 1;
  pointer-events: auto;
}
.zip-page.uc-sheet-open .uc-sheet {
  transform: translateY(0);
}
.zip-page.uc-sheet-open .zip-keyboard {
  display: none;
}
.uc-sheet-grabber {
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.16);
  margin: 4px auto 14px;
}
.uc-sheet-chips {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
}
.uc-sheet-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 8px;
  border: none;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.045);
  font: inherit;
  cursor: pointer;
}
.uc-sheet-chip svg {
  width: 24px;
  height: 24px;
}
.uc-sheet-chip span {
  font-size: 13px;
  color: #242424;
}
.uc-sheet-items {
  display: flex;
  flex-direction: column;
}
.uc-sheet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border: none;
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.uc-sheet-item .uc-sheet-ic {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.uc-sheet-item > span {
  font-size: 16px;
  color: #242424;
}
.uc-sheet-item .uc-sheet-badges {
  margin-left: auto;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 0.03em;
}
.uc-sheet-item .uc-sheet-chevron {
  margin-left: 10px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 20px;
  line-height: 1;
}
.uc-sheet-chip:active,
.uc-sheet-item:active {
  opacity: 0.6;
}

/* === "All" comparison view + embedded phones ============================== */
/* Embedded comparison phone: just hide the switcher; keep the normal backdrop. */
html[data-embed="1"] .solution-switcher { display: none; }

/* The All view replaces the single phone with 5 solution phones, all fitting
   the viewport at once (responsive scale via --uc-all-scale, set in JS),
   centred horizontally, over the same dark shell background. */
.uc-all-view {
  position: fixed;
  inset: 0;
  display: none;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  gap: 32px;
  padding: 44px 48px;
  box-sizing: border-box;
  z-index: 50;
}
html[data-solution="all"] .uc-all-view { display: flex; }
html[data-solution="all"] .device-mobile { display: none; }
.uc-all-phone {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.uc-all-phone-label {
  font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: -0.01em;
}
.uc-all-phone-frame {
  width: calc(390px * var(--uc-all-scale, 0.6));
  height: calc(844px * var(--uc-all-scale, 0.6));
  border-radius: calc(48px * var(--uc-all-scale, 0.6));
  overflow: hidden;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.45);
}
.uc-all-phone-frame iframe {
  width: 390px;
  height: 844px;
  border: none;
  transform: scale(var(--uc-all-scale, 0.6));
  transform-origin: top left;
}