/* PWA-only chrome that the server-rendered page never needed: the first-run connection screen
   (enter the MCP host), the settings panel, an offline/sync status pill, and the update toast. */

/* connection / settings screen — shown until a reachable MCP host is configured */
.connect {
  max-width: 520px; margin: 8vh auto 0; text-align: center;
}
.connect h2 {
  font-size: 30px; font-weight: 720; letter-spacing: -0.03em; margin: 0 0 8px;
  background: linear-gradient(100deg, var(--ai), var(--ai2) 70%); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.connect p { color: var(--ink-2); font-size: 14.5px; margin: 0 0 22px; line-height: 1.6; }
.connect form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.connect label { font-size: 12px; font-weight: 650; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .05em; }
.connect input {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  color: var(--ink); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding: 13px 15px; outline: none; transition: border-color .14s, box-shadow .14s;
}
.connect input:focus { border-color: color-mix(in srgb, var(--ai) 60%, var(--line));
  box-shadow: 0 0 0 4px var(--ring); }
.connect .hint { font-size: 12px; color: var(--ink-3); margin: -4px 0 0; }
.connect .go {
  cursor: pointer; border: none; border-radius: 12px; padding: 13px 18px; font-size: 15px; font-weight: 620;
  color: #fff; background: linear-gradient(135deg, var(--ai), var(--ai2));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ai) 40%, transparent); transition: filter .12s, transform .06s;
}
.connect .go:hover { filter: brightness(1.07); }
.connect .go:active { transform: scale(.98); }
.connect .go[disabled] { opacity: .6; cursor: progress; }
.connect .status { font-size: 13px; min-height: 18px; margin-top: 2px; }
.connect .status.ok { color: #15803d; }
.connect .status.bad { color: #e0524d; }

/* a small "settings" rail button reuses .rail-btn; its panel reuses the .env-pop look */
.set-pop {
  position: fixed; left: 70px; bottom: 16px; width: min(360px, 86vw); z-index: 45;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px;
  box-shadow: 0 18px 50px rgba(20,30,55,.22);
}
.set-pop[hidden] { display: none; }
.set-pop h4 { margin: 0 0 4px; font-size: 14px; font-weight: 660; }
.set-pop .row { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; }
.set-pop .row label { font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .05em; }
.set-pop input { border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2);
  color: var(--ink); font: 13px/1.4 -apple-system, sans-serif; padding: 9px 11px; outline: none; }
.set-pop input:focus { border-color: color-mix(in srgb, var(--ai) 55%, var(--line)); }
.set-pop .acts { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 14px; }
.set-pop .save { cursor: pointer; font-size: 13px; font-weight: 600; color: #fff; border: none; border-radius: 10px;
  padding: 8px 16px; background: linear-gradient(135deg, var(--ai), var(--ai2)); }
.set-pop .disconnect { cursor: pointer; font-size: 12px; color: #e0524d; background: none; border: none; }
.set-pop .meta { font-size: 11.5px; color: var(--ink-3); margin-top: 10px; line-height: 1.5; }
.set-pop .set-toggle { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; cursor: pointer;
  font-size: 13px; font-weight: 560; color: var(--ink); }
.set-pop .set-toggle input { width: 16px; height: 16px; flex: none; margin-top: 1px; padding: 0;
  border-radius: 4px; accent-color: var(--ai); cursor: pointer; }
.set-pop .set-toggle span { display: flex; flex-direction: column; gap: 2px; }
.set-pop .set-toggle small { font-size: 11px; font-weight: 500; color: var(--ink-3); }

/* connection/sync status — a footer item (no longer floating) */
.conn-pill {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 500; color: var(--ink-3); background: none; border: none;
  padding: 3px 5px; border-radius: 7px; white-space: nowrap; transition: color .12s; }
.conn-pill:hover { color: var(--ink-2); }
.conn-pill .blip { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.conn-pill.online .blip { background: #22c55e; }
.conn-pill.offline .blip { background: #f59e0b; }
.conn-pill.syncing .blip { background: var(--ai); animation: pulse 1.2s ease-out infinite; }
.conn-pill.bad .blip { background: #e0524d; }

/* an offline banner above the thread when the MCP host is unreachable but cached history is shown */
.offline-note {
  display: flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 10px 14px; border-radius: 12px;
  font-size: 13px; color: #92400e; background: color-mix(in srgb, #f59e0b 12%, var(--surface));
  border: 1px solid color-mix(in srgb, #f59e0b 35%, var(--line)); }
.offline-note[hidden] { display: none; }

/* floating YouTube mini-player ("PiP within the PWA") — a draggable card that keeps playing while you
   scroll/search; ↗ opens the video on youtube.com for true native PiP (pip.js) */
.pip {
  position: fixed; right: 16px; bottom: 16px; width: min(360px, 88vw); z-index: 70;
  background: #000; border-radius: 13px; overflow: hidden; display: none; touch-action: none;
  box-shadow: 0 16px 44px rgba(0,0,0,.42);
}
.pip.on { display: block; }
.pip-bar { display: flex; align-items: center; gap: 7px; padding: 6px 9px; cursor: move; user-select: none;
  background: #121317; color: #fff; }
.pip-grip { font-size: 10px; letter-spacing: -2px; color: #6b7280; flex: none; }
.pip-title { flex: 1; min-width: 0; font-size: 12px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pip-bar a, .pip-bar button { flex: none; background: none; border: none; color: #cbd5e1; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 4px 6px; border-radius: 6px; text-decoration: none; }
.pip-bar a:hover, .pip-bar button:hover { background: rgba(255,255,255,.14); color: #fff; }
.pip-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.pip-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* "a new version is available" toast (the service worker found an update) */
.update-toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 12px;
  background: var(--ink); color: #fff; font-size: 13.5px; box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.update-toast[hidden] { display: none; }
.update-toast button { cursor: pointer; border: none; border-radius: 8px; padding: 6px 12px; font-weight: 600;
  font-size: 13px; color: var(--ink); background: #fff; }

/* a helper line under a settings field (e.g. the global email) */
.set-pop .row-note { font-size: 11px; font-weight: 500; color: var(--ink-3); line-height: 1.45; margin-top: -1px;
  text-transform: none; letter-spacing: 0; }

/* --- calendar / events view -------------------------------------------------------- */
.events-view { max-width: 720px; margin: 4px auto 40px; }
.events-view[hidden] { display: none; }
.ev-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; }
.ev-head h2 { margin: 0; font-size: 21px; font-weight: 680; }
.ev-refresh { cursor: pointer; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  width: 32px; height: 32px; border-radius: 9px; font-size: 15px; line-height: 1; }
.ev-refresh:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ai) 45%, var(--line)); }
.ev-loading, .ev-empty { color: var(--ink-3); font-size: 13.5px; padding: 14px 2px; }
.ev-sec { margin-top: 18px; }
.ev-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 640;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.ev-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px;
  padding: 0 6px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line);
  font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.ev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ev-item { display: flex; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px;
  background: var(--surface); }
.ev-when { flex: none; width: 148px; font-size: 12.5px; font-weight: 600; color: var(--ai); line-height: 1.35; }
.ev-body { min-width: 0; flex: 1; }
.ev-title { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.ev-meta { margin-top: 4px; font-size: 12px; color: var(--ink-3); display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.ev-meta .ev-att { overflow-wrap: anywhere; }
.ev-dot { color: var(--ink-3); opacity: .6; }
.ev-desc { margin-top: 5px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 560px) {
  .ev-item { flex-direction: column; gap: 3px; }
  .ev-when { width: auto; }
}