/* The demo Mac: a MacBook screen drawn at its real size in points (from the app's own
   geometry, assets/manifest.json) and scaled to fit. Everything inside is positioned in
   the screen's points, exactly where SideDock puts it. Solid colours only. */

/* One wallpaper for every demo screen on the page (the colour the page isn't). What sits on
   it turns dark on a light wallpaper, as macOS does (setWallpaper sets these). */
:root {
  --wall: #4f5d4c;
  --on-wall: #ffffff;
  --on-wall-2: rgba(255, 255, 255, 0.75);
  --menu-bg: rgba(0, 0, 0, 0.14);
  --mark: rgba(255, 255, 255, 0.34);
  --mark-on: rgba(255, 255, 255, 0.9);
}

.mac {
  --s: 0.7;
  position: relative;
  margin: 0 auto;
  padding: calc(14px * var(--s) + 4px);
  border-radius: calc(28px * var(--s) + 8px);
  background: #050506;
  box-shadow: 0 0 0 1px #2a2a2f, 0 0 0 calc(3px * var(--s) + 1px) #121215, 0 0 0 calc(3px * var(--s) + 2px) #2a2a2f, 0 34px 70px rgba(40, 30, 18, 0.28);
  user-select: none;
  -webkit-user-select: none;
  transform-origin: 50% 100%;
  transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Arriving, the Mac rises and settles from a slight tilt, like a lid opening. */
.mac.arriving { opacity: 0; transform: rotateX(18deg) translateY(48px) scale(0.94); }
.mac .viewport { position: relative; overflow: hidden; border-radius: calc(10px * var(--s) + 2px) calc(10px * var(--s) + 2px) 3px 3px; background: var(--wall); }
.screen {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  transform: scale(var(--s));
  overflow: hidden;
  will-change: transform;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font);
  color: #fff;
  cursor: default;
}

/* The camera eases in and out like a screen recording's zoom. */
.screen.moving { transition: transform 1.2s cubic-bezier(0.25, 1, 0.3, 1); }

/* The wallpaper: one flat colour, and Pip, big, peeking up from the bottom edge. */
.wallpaper { position: absolute; inset: 0; background: var(--wall); transition: background 0.6s var(--ease); }
/* A screen that plays a script takes no clicks anywhere, Pip's hit area included. */
.wallpaper .giant { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.screen.scripted * { pointer-events: none !important; }

/* The tour's pointer: the Mac's own arrow, at its real size. */
.pointer { position: absolute; z-index: 90; pointer-events: none; opacity: 0; transition: opacity 0.35s; will-change: transform; }
.pointer.on { opacity: 1; }
.pointer.held { transition: opacity 0.12s; }

/* The big Pip's guide: a HUD bubble above its head, the size of a real one on the page
   whatever the screen's scale. */
.pip-say { position: absolute; left: 50%; z-index: 4; max-width: calc(330px / var(--s, 1)); pointer-events: none;
  transform: translate(-50%, calc(8px / var(--s, 1))) scale(0.96); opacity: 0;
  transition: opacity 0.26s var(--ease, ease), transform 0.4s cubic-bezier(0.25, 1, 0.3, 1); }
.pip-say.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.pip-say span { display: block; padding: calc(9px / var(--s, 1)) calc(14px / var(--s, 1)); border-radius: calc(16px / var(--s, 1));
  background: #18181a; color: #fff; text-align: center; text-wrap: balance;
  font: 600 calc(14px / var(--s, 1)) / 1.35 ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, sans-serif;
  box-shadow: 0 calc(6px / var(--s, 1)) calc(18px / var(--s, 1)) rgba(0, 0, 0, 0.22); }
.pip-say::after { content: ''; position: absolute; left: 50%; bottom: calc(-6px / var(--s, 1)); width: calc(12px / var(--s, 1)); height: calc(12px / var(--s, 1));
  background: #18181a; transform: translateX(-50%) rotate(45deg); border-radius: calc(2px / var(--s, 1)); z-index: -1; }
@media (prefers-reduced-motion: reduce) { .pip-say { transition: opacity 0.2s; } }
.pointer img { width: 100%; height: 100%; transform-origin: 18% 13%; }
.pointer .ripple { position: absolute; width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.95); opacity: 0; }
.pointer.tapping img { animation: pointer-tap 0.26s ease-out; }
.pointer.tapping .ripple { animation: pointer-ripple 0.45s ease-out; }
@keyframes pointer-tap { 40% { transform: scale(0.84); } }
@keyframes pointer-ripple { from { opacity: 0.95; transform: scale(0.15); } to { opacity: 0; transform: scale(1); } }

/* ---------- Menu bar ---------- */

.menubar {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 0 20px;
  font-size: 13.5px;
  color: var(--on-wall);
  background: var(--menu-bg);
  backdrop-filter: blur(30px) saturate(1.5);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  z-index: 2;
}
.menubar .left, .menubar .right { display: flex; align-items: center; gap: 20px; }
.menubar .app { font-weight: 700; }
.menubar svg { width: 16px; height: 16px; }
.menubar svg.pip-extra { width: 18px; height: 18px; }

/* ---------- Docks ---------- */

/* A dock slides in from fully off the screen (its thickness + 22) and fades in, 0.22 s on
   cubic-bezier(0.2, 0.9, 0.3, 1); it leaves the same way in 0.18 s, ease-in. */
.dock { position: absolute; z-index: 5; transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.22s cubic-bezier(0.2, 0.9, 0.3, 1); }
/* The app's surface for docks and cards alike: a dark HUD blur with black 38% over it, a
   1 pt rim brighter along the top, and the window's own shadow. */
.dock .glass, .card-panel .glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(20, 20, 22, 0.7);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 10px 26px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.35);
}
.dock.hidden { opacity: 0; pointer-events: none; transition-timing-function: cubic-bezier(0.42, 0, 1, 1); transition-duration: 0.18s; }
.dock.hidden[data-edge="left"] { transform: translateX(calc(var(--slide) * -1)); }
.dock.hidden[data-edge="right"] { transform: translateX(var(--slide)); }
.dock.hidden[data-edge="bottom"], .dock.hidden[data-edge="bottomLeft"], .dock.hidden[data-edge="bottomRight"] { transform: translateY(var(--slide)); }
.dock.hidden[data-edge="topLeft"], .dock.hidden[data-edge="topRight"] { transform: translateY(calc(var(--slide) * -1)); }

.tile { position: absolute; cursor: default; }
.tile img { width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
/* Widget tiles: a white 3% wash on hover (0.12 s ease-out); with their card open, the
   wash goes and the tile lifts 3% with a brighter rim. */
.tile.widget::after { content: ""; position: absolute; inset: 0; border-radius: var(--r, 18px); background: rgba(255, 255, 255, 0.03); opacity: 0; transition: opacity 0.12s cubic-bezier(0, 0, 0.58, 1); pointer-events: none; }
.tile.widget:hover::after { opacity: 1; }
.tile.widget.open::after { opacity: 1; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.13); }
/* App, folder and group icons swell to 1.07 on hover (a stiff spring, no lift). */
.tile.icon { display: grid; place-items: center; }
.tile.icon img { width: var(--icon); height: var(--icon); transition: transform 0.2s cubic-bezier(0.25, 1.15, 0.5, 1); }
.tile.icon:hover img { transform: scale(1.07); }
.tile.icon.running::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(255, 255, 255, 0.7); }
.tile.spacer::before { content: ""; position: absolute; left: 25%; right: 25%; top: 50%; height: 1.5px; margin-top: -0.75px; border-radius: 1px; background: rgba(255, 255, 255, 0.15); }
.tile.dragging { opacity: 0.25; }
.tile.merge-target::before { content: ""; position: absolute; inset: -3px; border-radius: 16px; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
.tile.merge-target img { transform: scale(1.1); }
.add-tile { position: absolute; display: grid; place-items: center; color: rgba(255, 255, 255, 0.55); }
.add-tile svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: transform 0.2s cubic-bezier(0.25, 1.15, 0.5, 1); }
.add-tile:hover svg { transform: scale(1.07); }

.group-plate {
  width: var(--icon);
  height: var(--icon);
  border-radius: calc(var(--icon) * 0.26);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  display: grid;
  /* Two by two, each cell a quarter however tall its picture is. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: calc(var(--icon) * 0.07);
  padding: calc(var(--icon) * 0.095);
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.25, 1.15, 0.5, 1);
}
.tile.icon:hover .group-plate { transform: scale(1.07); }
.tile.open .group-plate { background: rgba(255, 255, 255, 0.16); }
.group-plate img, .tile.icon .group-plate img, .tile.icon:hover .group-plate img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; transform: none; }
.drag-ghost { position: absolute; z-index: 60; pointer-events: none; transform: translate(-50%, -50%) scale(1.06); filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.45)); }

/* The system tooltip a tile carries (.help), after a moment, under the pointer. */
.system-tip { position: absolute; z-index: 80; padding: 3px 8px; border-radius: 6px; font-size: 12px; line-height: 1.35; white-space: pre; color: rgba(255, 255, 255, 0.92); background: rgba(40, 40, 42, 0.97); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 4px 12px rgba(0, 0, 0, 0.35); pointer-events: none; }

/* ---------- Cards (flyouts) ---------- */

/* From nothing: 12 pt from its dock and a fade, 0.18 s ease-out. From another card: it just
   takes the place. Closing: a fade, 0.14 s. */
.card-panel { position: absolute; z-index: 20; border-radius: 20px; opacity: 0; transform: translate(var(--nx, 0), var(--ny, 0)); transition: opacity 0.18s cubic-bezier(0, 0, 0.58, 1), transform 0.18s cubic-bezier(0, 0, 0.58, 1); pointer-events: none; }
.card-panel.shown { opacity: 1; transform: none; pointer-events: auto; }
.card-panel.instant { transition: none; }
.card-panel.closing { opacity: 0; transform: none; transition: opacity 0.14s ease; pointer-events: none; }
.card-panel .content { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; }
.card-panel .content > img { width: 100%; height: auto; }

/* ---------- The notch ---------- */

.notch-shape { position: absolute; z-index: 30; pointer-events: none; overflow: visible; }
.notch-glass { position: absolute; z-index: 30; pointer-events: none; overflow: hidden; }
.notch-glass canvas { position: absolute; left: 0; top: 0; }
.notch-glass i { position: absolute; top: 0; background: #2a2140 url("../assets/wallpaper/unsplash-martin-martz.jpg") center / cover no-repeat; filter: blur(22px) saturate(1.6); }
.notch-glass b { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.38); }
.notch-hit { position: absolute; z-index: 31; }
/* What's inside is clipped to the housing (drawNotch) and switched, not faded. Hidden, it
   takes no clicks at all: not even Pip's own hit area, which sits right over the top
   right dock's tiles (a click on World Clock used to open Pip's chat). */
.notch-content { position: absolute; z-index: 32; pointer-events: none; visibility: hidden; color: #fff; }
.notch-content.shown { pointer-events: auto; visibility: visible; }
.notch-content:not(.shown) * { pointer-events: none !important; }
.notch-tabs { position: absolute; display: flex; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 600; transition: left 0.46s cubic-bezier(0.22, 0.61, 0.36, 1); }
.notch-actions { position: absolute; display: flex; align-items: center; gap: 6px; opacity: 0; pointer-events: none; transition: opacity 0.24s ease; }
.notch-content.tray .notch-actions:not(.none) { opacity: 1; pointer-events: auto; }
.notch-actions i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.58); }
.notch-actions i.air { color: rgb(97, 166, 255); }
.notch-actions svg { width: 12px; height: 12px; }
.notch-tabs span { padding: 4px 10px; border-radius: 99px; color: rgba(255, 255, 255, 0.36); transition: color 0.24s, background 0.24s; }
.notch-tabs span.on { color: rgba(255, 255, 255, 0.94); background: rgba(255, 255, 255, 0.12); }
.notch-widgets, .notch-shelf { transition: opacity 0.24s ease; }
.notch-widgets.away { opacity: 0; pointer-events: none; }
.notch-shelf { opacity: 0; pointer-events: none; }
.notch-shelf.here { opacity: 1; pointer-events: auto; }
/* Tiles sit on the black with no chrome: a white 5% wash on hover, 8% with the card open. */
.notch-tile { position: absolute; border-radius: 22px; transition: background 0.12s cubic-bezier(0, 0, 0.58, 1); }
.notch-tile:hover { background: rgba(255, 255, 255, 0.05); }
.notch-tile.open { background: rgba(255, 255, 255, 0.08); }
.notch-tile img { width: 100%; height: 100%; pointer-events: none; }
.notch-divider { position: absolute; width: 0.5px; background: rgba(255, 255, 255, 0.12); }
/* The Tray: files on the left, AirDrop on the right. */
.notch-shelf { position: absolute; display: flex; align-items: stretch; gap: 10px; padding: 0 16px 12px; }
.notch-shelf .files { flex: 1; display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
.notch-shelf .empty { display: none; flex: 1; border-radius: 18px; background: rgba(255, 255, 255, 0.03); border: 1.2px dashed rgba(255, 255, 255, 0.18); flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.notch-shelf.empty .files { display: none; }
.notch-shelf.empty .empty { display: flex; }
.notch-shelf .empty svg { width: 24px; height: 24px; color: rgba(255, 255, 255, 0.58); }
.notch-shelf .empty b { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.94); }
.notch-shelf .empty .choose { margin-top: 2px; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.58); background: rgba(255, 255, 255, 0.08); }
.notch-shelf .file span { display: block; }
.notch-shelf .file { padding: 6px 4px; border-radius: 12px; display: grid; justify-items: center; gap: 5px; }
.notch-shelf .file:hover { background: rgba(255, 255, 255, 0.08); }
.notch-shelf .file img { width: 46px; height: 46px; object-fit: contain; }
.notch-shelf .file span { width: 70px; font-size: 10.5px; font-weight: 500; color: rgba(255, 255, 255, 0.58); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notch-shelf .airdrop { width: 104px; flex: none; border-radius: 18px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); display: grid; justify-items: center; align-content: center; gap: 3px; }
.notch-shelf .airdrop svg { width: 21px; height: 21px; color: rgba(255, 255, 255, 0.58); }
.notch-shelf .airdrop b { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.94); }
.notch-shelf .airdrop span { font-size: 11px; color: rgba(255, 255, 255, 0.36); }
.notch-shelf .airdrop > i { display: grid; place-items: center; width: 40px; height: 26px; border-radius: 50%; transition: background 0.24s ease, height 0.24s ease; }
/* Files on their way in (dragging): keep them, ask Pip about them, or send them. */
.notch-shelf .keep, .notch-shelf .ask { display: none; }
.notch-shelf.dragging .files, .notch-shelf.dragging .empty { display: none; }
.notch-shelf.dragging .keep { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 18px; background: rgba(255, 255, 255, 0.08); border: 1.2px dashed rgba(255, 255, 255, 0.5); }
.notch-shelf .keep svg { width: 24px; height: 24px; color: #fff; }
.notch-shelf .keep > b, .notch-shelf .ask > b { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.94); }
.notch-shelf .keep span { font-size: 11px; color: rgba(255, 255, 255, 0.36); }
.notch-shelf.dragging .ask { display: flex; width: 150px; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 18px; background: rgba(94, 92, 230, 0.22); box-shadow: inset 0 0 0 1.5px #5e5ce6; animation: zone-in 0.24s cubic-bezier(0.2, 0.9, 0.3, 1); }
.notch-shelf .ask > .face { display: grid; justify-items: center; align-items: end; height: 46px; margin-top: -4px; }
.notch-shelf .ask > span:not(.face) { font-size: 11px; color: #7d7bff; }
.notch-shelf.dragging .airdrop { width: 150px; background: rgba(97, 166, 255, 0.2); box-shadow: inset 0 0 0 1.5px rgb(97, 166, 255); }
.notch-shelf.dragging .airdrop > i { height: 40px; background: rgba(97, 166, 255, 0.25); }
.notch-shelf.dragging .airdrop svg, .notch-shelf.dragging .airdrop span { color: rgb(97, 166, 255); }
.notch-shelf .airdrop { transition: width 0.24s cubic-bezier(0.2, 0.9, 0.3, 1), background 0.24s ease, box-shadow 0.24s ease; }
@keyframes zone-in { from { opacity: 0; transform: scale(0.92); } }

/* Pip's notice: the card style. Everything is laid out at its final size and the housing
   uncovers it. */
.notice { box-sizing: border-box; position: absolute; z-index: 33; visibility: hidden; pointer-events: none; color: #fff; font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, sans-serif; }
.notice.shown { visibility: visible; pointer-events: auto; }
.notice.card-style { display: flex; flex-direction: column; align-items: center; padding-top: calc(32px + 14px); cursor: default; }
.notice.card-style .face { width: 58px; height: 58px; display: grid; place-items: center; flex: none; }
.notice.card-style .words { margin: 10px 22px 0; font-size: 13.5px; font-weight: 600; line-height: 17px; text-align: center; max-height: calc(17px * var(--lines)); overflow: hidden; }
.notice.card-style .actions { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.notice .actions button { height: 26px; border: 0; border-radius: 99px; padding: 0 11px; font: 600 11.5px ui-rounded, "SF Pro Rounded", -apple-system, sans-serif; cursor: default; background: rgba(255, 255, 255, 0.14); color: #fff; }
.notice .actions button.primary { background: #fff; color: #000; }
.notice .actions button:active { opacity: 0.7; }
/* The quick reply a click on the notice opens, in the notch. */
.notice.quick-reply { display: flex; flex-direction: column; gap: 10px; padding: calc(32px + 12px) 16px 4px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
.notice.quick-reply .who { width: 32px; height: 30px; flex: none; display: grid; place-items: center; }
.notice.quick-reply .thread { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; scrollbar-width: none; flex: none; }
.notice.quick-reply .thread::-webkit-scrollbar { display: none; }
.notice.quick-reply .msg { display: flex; padding-right: 40px; }
.notice.quick-reply .msg.mine { justify-content: flex-end; padding: 0 0 0 40px; }
.notice.quick-reply .msg .pip-dots { margin-left: 12px; height: 14px; color: #fff; }
.notice.quick-reply .bubble { padding: 7px 10px; border-radius: 12px; font-size: 13px; line-height: 16px; color: #fff; background: rgba(255, 255, 255, 0.1); }
.notice.quick-reply .mine .bubble { background: rgba(0, 122, 255, 0.5); }
.notice.quick-reply .row { display: flex; align-items: center; gap: 10px; flex: none; }
.notice.quick-reply .field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 14px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.notice.quick-reply .field:focus-within { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.notice.quick-reply input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: #fff; caret-color: #fff; font: 500 13.5px -apple-system, BlinkMacSystemFont, sans-serif; }
.notice.quick-reply input::placeholder { color: rgba(255, 255, 255, 0.36); }
.notice.quick-reply .send { width: 24px; height: 24px; flex: none; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; }
.notice.quick-reply .send:disabled { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.4); }
.notice.quick-reply .send svg { width: 11px; height: 11px; }
.notice.quick-reply .open-chat { width: 34px; height: 34px; flex: none; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.75); transition: background 0.15s, color 0.15s; }
.notice.quick-reply .open-chat:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.notice.quick-reply .open-chat svg { width: 12px; height: 12px; }
.notice.quick-reply .bar { height: 14px; display: grid; place-items: center; flex: none; }
.notice.quick-reply .handle { width: 140px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.26); cursor: default; transition: background 0.15s ease-out; }
.notice.quick-reply .handle:hover { background: rgba(255, 255, 255, 0.75); }

/* ---------- The macOS Dock ---------- */

.macdock { position: absolute; z-index: 4; border-radius: 20px; display: flex; align-items: center; padding: 0 7px; }
.macdock .glass { position: absolute; inset: 0; border-radius: inherit; background: rgba(28, 28, 30, 0.5); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2), 0 6px 20px rgba(0, 0, 0, 0.25); }
.macdock .item { position: relative; display: grid; place-items: center; }
.macdock .item img { width: 100%; height: 100%; }
.macdock .item.running::after { content: ""; position: absolute; bottom: -5px; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.75); }
.macdock .sep { width: 1px; align-self: stretch; margin: 8px 6px; background: rgba(255, 255, 255, 0.25); }
/* The macOS Dock's own name label, above the icon. */
.label-tip { position: absolute; z-index: 70; padding: 4px 11px; border-radius: 8px; font-size: 13px; color: #fff; background: rgba(36, 36, 38, 0.92); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18); pointer-events: none; white-space: nowrap; transform: translate(-50%, -100%); }

/* ---------- Now Playing (NowPlayingCard, drawn on the page) ---------- */
/* As the app lays it out: padding 16, sections 18 apart, a 288 cover, a 4 pt meter, the
   transport at 16/20 pt, and a footer with the source pill and "Open Music". */

.np-card { padding: 16px; display: flex; flex-direction: column; gap: 18px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; color: rgba(255, 255, 255, 0.94); }
.np-card .np-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.np-card .np-head b { display: block; font-size: 15px; line-height: 18px; font-weight: 600; }
.np-card .np-head span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 14px; color: rgba(255, 255, 255, 0.58); }
.np-card .config { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.36); }
.np-card .config svg { width: 12px; height: 12px; }
.np-card .art { position: relative; width: 288px; height: 288px; border-radius: 16px; overflow: hidden; }
.np-card .art img { width: 100%; height: 100%; object-fit: cover; }
.np-card .art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.np-card .titles b { display: block; font-size: 17px; line-height: 20px; font-weight: 600; }
.np-card .titles span { display: block; margin-top: 2px; font-size: 13px; line-height: 16px; color: rgba(255, 255, 255, 0.58); }
.np-card .time { display: grid; gap: 4px; }
.np-card .meter { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.np-card .meter i { display: block; height: 100%; border-radius: 4px; background: rgba(255, 255, 255, 0.88); }
.np-card .times { display: flex; justify-content: space-between; font-size: 11px; line-height: 13px; color: rgba(255, 255, 255, 0.36); font-variant-numeric: tabular-nums; }
.np-card .np-transport { display: flex; justify-content: center; gap: 17.6px; }
.np-card .np-transport button { width: 32px; height: 32px; border: 0; background: none; padding: 0; color: rgba(255, 255, 255, 0.94); cursor: default; display: grid; place-items: center; }
.np-card .np-transport svg { width: 22px; height: 22px; }
.np-card .np-transport .toggle svg { width: 24px; height: 24px; }
.np-card .np-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.np-card .pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 99px; font-size: 11px; line-height: 13px; color: rgba(255, 255, 255, 0.58); background: rgba(255, 255, 255, 0.06); font-variant-numeric: tabular-nums; }
.np-card .pill svg { width: 10px; height: 10px; color: #ff375f; }
.np-card .open { border: 0; border-radius: 7px; padding: 6px 11px; font: 500 12px -apple-system, BlinkMacSystemFont, sans-serif; background: rgba(255, 255, 255, 0.9); color: #000; cursor: default; }
.np-card .open:active { background: rgba(255, 255, 255, 0.75); }

/* ---------- Pip's chat card, as PromptCardView draws it ---------- */
/* The card wears the dock's glass like every card; bubbles are 12 pt round all over,
   yours in the system accent at 28%, Pip's white 7%; the composer has attach, the model
   chip and send; while Pip works, the wave sits under the words with no bubble. */

.card-panel .pip-chat { --pip-accent: rgb(10, 132, 255); --pip-on-accent: #fff; --pip-msg-pip: rgba(255, 255, 255, 0.07); --pip-msg-user: rgba(10, 132, 255, 0.28); --pip-text: rgba(255, 255, 255, 0.85); --pip-text-2: rgba(255, 255, 255, 0.55); --pip-text-3: rgba(255, 255, 255, 0.25); width: 100%; height: 100%; background: transparent; border: 0; border-radius: inherit; box-shadow: none; }
.card-panel .pip-chat__tool { width: 24px; height: 24px; border-radius: 0; }
.card-panel .pip-chat__tool:hover { background: none; color: var(--_text2); }
.card-panel .pip-chat__tool svg { width: 13px; height: 13px; stroke-width: 1.6; }
.card-panel .pip-chat__log { gap: 10px; padding: 12px; }
.card-panel .pip-chat__row--user { padding-left: 40px; }
.card-panel .pip-chat__row--pip { padding-right: 40px; }
.card-panel .pip-chat__msg { padding: 7px 10px; border-radius: 12px; animation-name: in-app-rise; animation-duration: 0.7s; transform-origin: 0 100%; }
.card-panel .pip-chat__row--pip .pip-chat__msg, .card-panel .pip-chat__row--user .pip-chat__msg { border-radius: 12px; }
.card-panel .pip-chat__msg strong { color: inherit; }
.card-panel .pip-chat__msg.is-typing { background: transparent; padding: 8px 6px; }
.card-panel .pip-chat__msg.is-typing .pip-dots { height: auto; color: rgba(255, 255, 255, 0.55); }
@keyframes in-app-rise {
  from { opacity: 0; translate: 0 28px; scale: 0.94; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
/* Empty: two lines, no face. */
.card-panel .pip-chat__empty { gap: 6px; padding: 16px; }
.card-panel .pip-chat__empty > :not(b) { display: none; }
.card-panel .pip-chat__empty b { font-size: 13px; font-weight: 500; color: var(--_text); }
.card-panel .pip-chat__empty::after { content: "Return to send · Esc to close · ⌃⌥Space from anywhere"; font-size: 11px; color: var(--_text2); }
.card-panel .pip-chat__input { caret-color: #fff; }
.card-panel .pip-chat__controls { gap: 6px; }
.card-panel .pip-chat__left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.card-panel .pip-chat__plus { width: 24px; height: 24px; margin: 0; background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.58); }
.card-panel .pip-chat__plus svg { width: 12px; height: 12px; stroke-width: 2.1; }
.card-panel .model-chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.55); font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.card-panel .model-chip svg { width: 6px; height: 9px; flex: none; }
.card-panel .pip-chat__send { width: 26px; height: 26px; }
.card-panel .pip-chat__send svg { width: 12px; height: 12px; stroke-width: 2.4; }
.card-panel .pip-chat.is-fresh .pip-chat__send.is-ready::after { content: none; }

/* ---------- A group's card (GroupCard) ---------- */
.group-card { padding: 16px; display: flex; flex-direction: column; gap: 18px; color: rgba(255, 255, 255, 0.94); font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
.group-card .g-head { display: grid; gap: 2px; }
.group-card .g-title { display: flex; align-items: center; gap: 6px; }
.group-card .g-name { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: none; color: inherit; font: 600 15px/18px -apple-system, BlinkMacSystemFont, sans-serif; caret-color: #fff; -webkit-user-select: text; user-select: text; }
.group-card .g-pencil { display: grid; color: rgba(255, 255, 255, 0.36); transition: opacity 0.15s; }
.group-card .g-pencil svg { width: 10px; height: 10px; }
.group-card .g-name:focus + .g-pencil { opacity: 0; }
.group-card .g-sub { font-size: 11.5px; line-height: 14px; color: rgba(255, 255, 255, 0.58); }
.group-card .g-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; }
.group-card .g-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; border-radius: 10px; transition: background 0.15s; min-width: 0; }
.group-card .g-cell:hover { background: rgba(255, 255, 255, 0.07); }
.group-card .g-icon { position: relative; width: 44px; height: 44px; }
.group-card .g-icon img { width: 100%; height: 100%; }
.group-card .g-cell.running .g-icon::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(255, 255, 255, 0.58); }
.group-card .g-cell span { padding-top: 2px; max-width: 100%; font-size: 10.5px; line-height: 13px; color: rgba(255, 255, 255, 0.58); white-space: nowrap; overflow: hidden; }
.group-card .g-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.card-button { border: 0; border-radius: 7px; padding: 6px 11px; font: 500 12px/14px -apple-system, BlinkMacSystemFont, sans-serif; white-space: nowrap; cursor: default; background: rgba(255, 255, 255, 0.09); color: rgba(255, 255, 255, 0.94); }
.card-button:active { background: rgba(255, 255, 255, 0.14); }
.card-button.prominent { background: rgba(255, 255, 255, 0.9); color: #000; }
.card-button.prominent:active { background: rgba(255, 255, 255, 0.75); }

/* Pip in the notch and in its notices is the app's own Pip (CharacterView): a white ball
   lit from the upper left, white to 45% of the way, then easing into its shade toward
   the lower right. The page's own Pips stay flat; this one is a copy of the real thing. */
.pip-holder .pip__shell, .notice .pip__shell {
  background: radial-gradient(circle calc(var(--pip-d) * 1.17) at 36% 30%, #fff 0%, #fff 45%, rgb(204, 209, 222) 100%);
  box-shadow: none;
}
.pip-holder .pip.is-held .pip__shell { box-shadow: 0 calc(var(--pip-size) * 0.12) calc(var(--pip-size) * 0.25) rgba(0, 0, 0, 0.35); }

/* The page's own .words (Pip's section) must not reach a notice's words: those are the app's. */
.notice .words { font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: 0; }

/* The demo Macs' wallpaper: a photo (Martin Martz on Unsplash, free to use). It is dark
   enough for white menus, as macOS draws them on a dark wallpaper. */
.mac {
  --on-wall: #ffffff;
  --on-wall-2: rgba(255, 255, 255, 0.75);
  --menu-bg: rgba(0, 0, 0, 0.18);
  --mark: rgba(255, 255, 255, 0.34);
  --mark-on: rgba(255, 255, 255, 0.9);
}
.mac .wallpaper { background: #2a2140 url("../assets/wallpaper/unsplash-martin-martz.jpg") center / cover no-repeat; }

/* A menu as the app's PanelMenus draws it: a dark HUD list, checks on the left, submenus
   opening to the right on hover. */
.panel-menu { position: absolute; z-index: 60; min-width: 170px; padding: 5px; border-radius: 10px; background: rgba(32, 32, 35, 0.94); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 30px rgba(0, 0, 0, 0.4); font: 13px -apple-system, BlinkMacSystemFont, sans-serif; color: #fff; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.panel-menu .row { position: relative; display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 4px; border-radius: 5px; white-space: nowrap; cursor: default; }
.panel-menu .row:hover { background: rgba(10, 132, 255, 0.9); }
.panel-menu .check { width: 14px; text-align: center; font-size: 11px; }
.panel-menu .more { margin-left: auto; padding-left: 14px; opacity: 0.6; }
.panel-menu .sep { display: block; height: 1px; margin: 5px 8px; background: rgba(255, 255, 255, 0.12); }
.panel-menu.sub { left: calc(100% - 4px); }
.card-panel .model-chip { cursor: default; }
.card-panel .model-chip:hover { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.8); }

/* The notch's contents fade with a soft blur, as in the app (spring 0.27, no bounce),
   while the housing opens and closes on its own springs (js/notch-motion.js). */
.notch-content { opacity: 0; filter: blur(8px); transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), filter 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), visibility 0s linear 0.3s; }
.notch-content.shown { opacity: 1; filter: blur(0); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .notch-content { filter: none; transition: opacity 0.2s, visibility 0s linear 0.2s; } }