/* Ensemble's design language, shared by the letter and the demo. It is the Mac app's own: a black Dynamic-Island capsule with
   white system-font text and a light-blue session name, blue outline highlights, a see-through glass-bead nose dot,
   frosted Liquid-Glass-style panels, the three-dot mark, and springy motion that is never instant. */
/* Page chrome follows Paperclip's look in light mode: white canvas, near-black text, hairline borders, Inter-like type with tight tracking,
   mono uppercase chips, pill buttons. Ensemble's own overlays (island, highlight, nose dot) stay exactly as in the Mac app. */
:root {
  --e-font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --e-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --e-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --e-bg: #ffffff;
  --e-bg-2: #fafafa;
  --e-ink: #0a0a0a;
  --e-muted: #737373;
  --e-line: #e5e5e5;
  --e-blue: #5294ff;          /* clutchBlue: Color(0.32, 0.58, 1.0) */
  --e-blue-soft: #8fb8ff;     /* soft blue: Color(0.56, 0.72, 1.0) */
  --e-blue-ink: #2d6ae0;      /* the blue, darkened to read on white */
  --e-amber: #b45309;
  --e-spring: cubic-bezier(0.34, 1.42, 0.52, 1);   /* about spring(response 0.42, damping 0.78) */
  --e-ease: cubic-bezier(0.22, 0.8, 0.3, 1);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.1 -.1'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
[hidden] { display: none !important; }

/* ---- the three-dot mark (the menu bar icon: one on top, two below) ---- */
.ens-mark { width: 18px; height: 18px; display: block; flex: none; overflow: visible; }
.ens-mark circle { fill: currentColor; transition: fill 0.4s var(--e-ease); }
.ens-mark.live circle:first-child { fill: var(--e-blue); }

/* ---- cards, chips and pill buttons ---- */
.ens-card { background: #fff; border: 1px solid var(--e-line); border-radius: 6px; }
.ens-pop { background: #fff; border: 1px solid var(--e-line); border-radius: 14px; box-shadow: 0 20px 50px rgba(10, 10, 10, 0.14), 0 2px 8px rgba(10, 10, 10, 0.06); }
.ens-chip { display: inline-block; font: 500 14px var(--e-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; color: #1f2937;
  background: linear-gradient(100deg, #cfe0ff, #e3d7ff 55%, #ffe1d6); border: 1px solid rgba(10, 10, 10, 0.06); }
.ens-btn { font: 600 14px var(--e-font); letter-spacing: -0.01em; color: var(--e-ink); background: #fff; border: 1px solid var(--e-line); border-radius: 999px; padding: 10px 20px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 0.4s var(--e-spring), background 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease; }
.ens-btn:hover { background: #f5f5f5; border-color: #d4d4d4; text-decoration: none; transform: translateY(-1px); }
.ens-btn:active { transform: scale(0.97); }
.ens-btn:focus-visible, .ens-link:focus-visible { outline: 2.5px solid var(--e-blue); outline-offset: 3px; }
.ens-btn.primary { background: #0a0a0a; border-color: #0a0a0a; color: #fff; font-size: 16px; padding: 13px 26px; }
.ens-btn.primary:hover { background: #262626; box-shadow: 0 8px 22px rgba(10, 10, 10, 0.2); }
.ens-btn.small { font-size: 13px; padding: 7px 14px; }
.ens-link { color: var(--e-muted); text-underline-offset: 3px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: #d4d4d4; }
.ens-link:hover { color: var(--e-ink); text-decoration-color: var(--e-ink); }

/* ---- the island: a black capsule, white system text, the session name in soft blue ---- */
.ens-island { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 11px; height: 52px; min-width: 330px; max-width: min(94vw, 420px); padding: 0 20px; border-radius: 22px; background: #000; color: #fff;
  box-shadow: 0 10px 30px rgba(10, 10, 10, 0.28), 0 2px 6px rgba(10, 10, 10, 0.2);
  transition: min-width 0.55s var(--e-spring), height 0.55s var(--e-spring), opacity 0.3s ease, transform 0.55s var(--e-spring); }
.ens-island[data-mode="idle"] { min-width: 96px; height: 28px; opacity: 0.9; justify-content: center; padding: 0 14px; transform: scale(0.92); }
.ens-island > .ens-mark { display: none; width: 15px; height: 15px; color: #fff; }
.ens-island[data-mode="idle"] > .ens-mark { display: block; }
.ens-glyph { width: 26px; height: 18px; flex: none; display: none; }
.ens-island:not([data-mode="idle"]) .ens-glyph { display: block; }
.ens-glyph svg { display: none; width: 26px; height: 18px; fill: var(--e-blue); stroke: var(--e-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ens-island[data-mode="look"] .g-look, .ens-island[data-mode="firstPinch"] .g-pinch, .ens-island[data-mode="dictating"] .g-mic, .ens-island[data-mode="sendHold"] .g-send,
.ens-island[data-mode="switching"] .g-switch, .ens-island[data-mode="banner"] .g-check { display: block; }
.ens-island[data-mode="banner"][data-style="info"] .g-check { display: none; }
.g-look .ring { fill: none; } .g-look .pip { stroke: none; }
.g-pinch .tip { stroke: none; animation: ens-tap 0.9s ease-in-out infinite; }
.g-pinch .tip.a { --d: 4px; } .g-pinch .tip.b { --d: -4px; }
@keyframes ens-tap { 0%, 100% { transform: translateX(0); } 45%, 60% { transform: translateX(var(--d)); } }
.g-mic { animation: ens-blink 1.2s ease-in-out infinite; }
@keyframes ens-blink { 50% { opacity: 0.45; } }
.ens-text { display: flex; flex-direction: column; min-width: 0; }
.ens-text .l1 { font-size: 13px; font-weight: 600; white-space: nowrap; line-height: 1.3; }
.ens-text .l2 { font-size: 11.5px; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.ens-text .l2:empty { display: none; }
.ens-island:not([data-mode="idle"]) .ens-text { min-width: 0; }
.ens-island[data-mode="idle"] .ens-text, .ens-island[data-mode="idle"] .ens-hint { display: none; }
.ens-island em { font-style: normal; color: var(--e-blue-soft); }
.ens-hint { margin-left: auto; font-size: 11px; color: rgba(255, 255, 255, 0.5); white-space: nowrap; padding-left: 8px; }
.ens-edge { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--e-blue); transform-origin: left center; transform: scaleX(var(--fill, 0)); opacity: 0; border-radius: 3px; transition: opacity 0.2s ease; }
.ens-island[data-mode="sendHold"] .ens-edge, .ens-island[data-mode="switching"] .ens-edge { opacity: 1; }
.ens-island.swap .ens-glyph, .ens-island.swap .ens-text { animation: ens-pop 0.5s var(--e-spring) both; }
@keyframes ens-pop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }

/* ---- the nose dot: a see-through glass bead ---- */
.ens-dot { position: fixed; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none; z-index: 60; opacity: 0; transition: opacity 0.7s ease-in-out;
  background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(6px) saturate(1.8); backdrop-filter: blur(6px) saturate(1.8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), inset 0 -2px 5px rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(10, 10, 10, 0.2), 0 3px 10px rgba(10, 10, 10, 0.22); will-change: transform; }
.ens-dot::after { content: ""; position: absolute; left: 24%; top: 17%; width: 30%; height: 18%; border-radius: 50%; background: rgba(255, 255, 255, 0.95); transform: rotate(-30deg); }
.ens-dot.on { opacity: 1; }
/* scrolling: the up-and-down arrows fade in over the bead on the dot's own curve, with no size or position change */
.ens-dot::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease-in-out;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.5v11M6 6.2l3-2.7 3 2.7M6 11.8l3 2.7 3-2.7'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.ens-dot.scroll::before { opacity: 1; }

/* ---- the blue outline that follows focus ---- */
.ens-highlight { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; border-radius: 14px; border: 3px solid rgba(82, 148, 255, 0.9); box-shadow: 0 0 14px rgba(82, 148, 255, 0.55), inset 0 0 18px rgba(82, 148, 255, 0.12); opacity: 0;
  transition: transform 0.5s var(--e-spring), width 0.5s var(--e-spring), height 0.5s var(--e-spring), opacity 0.25s ease, border-color 0.3s ease; }
.ens-highlight.on { opacity: 1; }
.ens-highlight.listening { border-color: var(--e-blue); border-width: 3.5px; animation: ens-breathe 2.2s ease-in-out infinite; }
@keyframes ens-breathe { 0%, 100% { box-shadow: 0 0 8px rgba(82, 148, 255, 0.5), inset 0 0 12px rgba(82, 148, 255, 0.1); opacity: 0.7; } 50% { box-shadow: 0 0 18px rgba(82, 148, 255, 0.8), inset 0 0 22px rgba(82, 148, 255, 0.2); opacity: 1; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }