/* The web version. panel.css is an exact copy of the Chrome side panel's
   stylesheet (run_tests.sh checks they match), so this only adds what a
   whole page needs: a centred column, the start buttons and the photo row. */

html, body { height: 100%; }
body.webapp {
  max-width: 560px; margin: 0 auto;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 600px) {
  html { background: color-mix(in srgb, var(--brand) 6%, var(--paper)); }
  body.webapp { border-inline: 1px solid var(--rule); box-shadow: 0 0 60px rgba(30, 28, 90, .08); }
}
.webapp .home { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.webapp .beta {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; color: var(--brand);
  background: color-mix(in srgb, var(--brand) var(--fill), transparent);
}
.webapp .welcome h1 { font-size: 20px; }
.webapp .welcome p { font-size: 14px; max-width: 34ch; margin-left: auto; margin-right: auto; }
.start { display: grid; gap: 8px; max-width: 300px; margin: 18px auto 0; }
.start-btn {
  font: inherit; font-size: 15px; font-weight: 600; padding: 12px 16px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--card); color: var(--ink); cursor: pointer;
}
.start-btn.primary { background: var(--brand); border-color: transparent; color: #fff; }
.start-btn:focus-visible, .pill:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.webapp .welcome .aside { margin-top: 16px; font-size: 12px; max-width: 40ch; }
.webapp .welcome .aside a { color: var(--brand); }
.webapp a.pill { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

.attached {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  padding: 6px 8px; border-radius: 12px; border: 1px solid var(--rule); background: var(--card);
  font-size: 12.5px; color: var(--muted);
}
.attached img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.attached span { flex: 1; min-width: 0; }
.attached .drop { border: 0; background: none; font-size: 18px; color: var(--muted); cursor: pointer; padding: 4px 8px; }
.bubble.you .shot { display: block; max-width: 220px; max-height: 260px; border-radius: 10px; margin-bottom: 6px; }
.webapp.dragging .scroll { outline: 2px dashed var(--brand); outline-offset: -8px; }
.webapp .welcome .tip { display: none; margin-top: 14px; font-size: 12.5px; }
.webapp .welcome .tip kbd {
  font: 600 11px/1 system-ui, sans-serif; padding: 2px 5px; border-radius: 5px; margin: 0 1px;
  border: 1px solid var(--rule); background: var(--card); color: var(--ink);
}
@media (hover: hover) and (pointer: fine) { .webapp .welcome .tip { display: block; } }