/* Website design: borderless cards, thin lines between rows and tabs (layout inspired by Vercel's dashboard),
   in the same colours and font as the main website. */

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }

:root {
  color-scheme: dark;
  --bg: #171c25;
  --header: #11151c;
  --surface: #252a33;
  --inset: #1d222b;
  --hover: #2d333e;
  --hover-strong: #343b47;
  --border: rgba(255, 255, 255, 0.07);
  --border-soft: rgba(255, 255, 255, 0.06);
  --text: #e6e9ef;
  --text-soft: #c3c9d4;
  --text-2: #7a8294;
  --text-3: #7a8294;
  --muted: #4a5263;
  --accent: #2f9bf0;
  --gradient: linear-gradient(90deg, #2f9bf0, #3a6ff0);
  --gradient-hover: linear-gradient(90deg, #2f9bf0 30%, #3a6ff0 100%);
  --green: #4ade80;
  --red: #ff6b6b;
  --radius: 6px;
  /* Numbers use the same system font, with equal-width digits. */
  --mono: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  /* Same font as the main website: the system font (Segoe UI on Windows, San Francisco on Apple). */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
}

::selection { background: rgba(47, 155, 240, 0.35); }

body.center { display: grid; place-items: center; padding: 24px; }

main { width: 100%; max-width: 320px; }

form { display: grid; gap: 10px; }

input, button {
  font: inherit;
  font-size: 14px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius);
}

/* Fields have no border, just the grey surface (sign-in, forms, the Drop message box). */
input, select, textarea {
  border: 0;
  background: var(--surface);
  color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus, select:focus, textarea:focus { outline: none; }

button {
  border: 0;
  background: #3b82f6;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
button:hover { background: #3a6ff0; }
button:focus-visible, a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }

form button, .btn-primary { background: var(--gradient); color: #fff; }
form button:hover, .btn-primary:hover { background: var(--gradient-hover); }

/* Sign in while waiting: a small white spinner in place of the text (same size button). */
button.loading { position: relative; color: transparent; transition: none; }
button.loading:disabled { opacity: 1; }
button.loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.error { min-height: 18px; color: var(--red); font-size: 13px; }

/* ---------- Header: logo, tabs and user on one 50px row ---------- */
header {
  position: sticky; top: 0; z-index: 20;
  background: var(--header);
}

.topbar {
  display: flex; align-items: center;
  height: 50px; padding: 0 16px;
}

/* Logo and name. */
.where { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: 12px; }
.brand {
  display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; margin-left: -4px;
  border-radius: var(--radius); color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none;
}
.brand:hover { background: var(--hover); }
.brand img { width: 22px; height: 22px; display: block; }

.tabs { display: flex; align-self: stretch; flex: 1; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }

.nav-link {
  position: relative; display: flex; align-items: center;
  height: 100%; padding: 0 10px;
  color: var(--text-soft); font-size: 14px; text-decoration: none; white-space: nowrap;
}
.nav-link::before {
  content: ""; position: absolute; inset: 10px 2px; z-index: -1;
  border-radius: var(--radius); transition: background 0.15s;
}
.nav-link:hover { color: var(--text); }
.nav-link:hover::before { background: var(--hover); }
.nav-link[aria-current="page"] { color: var(--text); }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0;
  height: 2px; background: var(--text);
}
.tabs .nav-link { isolation: isolate; }

.user { position: relative; }

/* Shaped like the account button in the Claude app (6px corners, 4px around
   the picture), a little larger: 32px tall with a 24px picture. */
.user-button {
  display: flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 8px 0 4px; border-radius: 6px;
  background: none; color: var(--text-soft); font-size: 14px; font-weight: 400;
}
.user-button:hover, .user-button[aria-expanded="true"] { background: var(--hover); color: var(--text); }
.avatar {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--gradient); color: #fff; font-size: 11px; font-weight: 600;
}
.avatar:empty { visibility: hidden; }
/* A profile picture: just the picture, no gradient behind it showing at the edge. */
.avatar:has(img) { background: none; }
.avatar img { display: block; width: 100%; height: 100%; border: 0; border-radius: 50%; object-fit: cover; }
.chevron { width: 14px; height: 14px; color: var(--text-2); }

/* Menus (user menu and the Drop message menu), sized like the Claude app's:
   24px rows, 10px corners, as wide as their text. */
.menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  min-width: 120px; padding: 4px;
  background: var(--surface); border-radius: 10px;
  box-shadow: 0 8px 20px -6px rgba(10, 13, 18, 0.6);
}
.menu button {
  width: 100%; height: 24px; padding: 0 10px; text-align: left;
  background: none; color: var(--text-soft); font-size: 13px; font-weight: 400; border-radius: 6px;
}
.menu button:hover { background: var(--hover); color: var(--text); }
/* A thin line between Settings and Sign out in the user menu (not in the Drop menu). */
#menu button + button { position: relative; margin-top: 9px; }
#menu button + button::before {
  content: ""; position: absolute; left: -4px; right: -4px; top: -5px;
  height: 1px; background: var(--border);
}

/* ---------- Page ---------- */
.page { max-width: 1040px; margin: 0 auto; padding: 48px 24px 64px; }
.page.narrow { max-width: 592px; }
.page.medium { max-width: 832px; }

h1 { margin-top: 6px; font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); }

.subtitle { margin-top: 6px; font-size: 14px; color: var(--text-2); }

.welcome { font-size: 14px; color: var(--text-2); }

.section-title {
  margin-top: 40px; font-size: 13px; font-weight: 500; color: var(--text-2);
}

.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.section-head .section-title + button { margin-bottom: -2px; }

/* Cards: grey surfaces without a border (lines between rows stay). */
.panel, .info, .versions, .link-card, .download, .builds {
  background: var(--surface); border-radius: 8px;
}

/* ---------- Home ---------- */
/* The countdown is one large card: the film's backdrop when TMDB gives one,
   otherwise a faint grid with a glow in the logo's blue. */
.countdown {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  margin-top: 40px; padding: 32px 28px 28px;
  background: var(--surface); border-radius: 12px;
}
.countdown::before, .countdown::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.countdown::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 40px 40px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 85% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 90% at 85% 0%, #000 0%, transparent 75%);
}
.countdown::after { background: radial-gradient(ellipse 55% 70% at 90% 0%, rgba(47, 155, 240, 0.16), transparent 70%); }

/* Like the original: dark on the left behind the text, the film visible on the right.
   border-box so the picture and its shading reach the edges. */
.countdown.has-image {
  background:
    linear-gradient(90deg, rgba(23, 28, 37, 0.94) 0%, rgba(23, 28, 37, 0.7) 55%, rgba(23, 28, 37, 0.35) 100%),
    var(--backdrop) center / cover no-repeat;
  background-origin: border-box;
}
.countdown.has-image::before, .countdown.has-image::after { display: none; }

.countdown-title { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--text); }
.countdown-date { margin-top: 6px; font-size: 14px; color: var(--text-2); }
.countdown.has-image .countdown-date { color: #c3c9d4; }

/* One box per number, like the original. */
.countdown-units { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.countdown-units div {
  display: flex; flex-direction: column; align-items: center;
  min-width: 84px; padding: 16px 12px 12px;
  background: var(--inset); border-radius: 6px;
}
.countdown.has-image .countdown-units div {
  background: rgba(37, 42, 51, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.countdown-units span {
  font-family: var(--mono); font-size: 34px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.countdown-units small { margin-top: 8px; font-size: 11px; color: var(--text-2); }

/* Christmas: a smaller card under the film, same boxes but compact. */
.christmas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 12px; padding: 20px 24px;
  background: var(--surface); border-radius: 12px;
}
.christmas-title { font-size: 17px; font-weight: 600; color: var(--text); }
.christmas-date { margin-top: 4px; font-size: 13px; color: var(--text-2); }
.christmas-units { display: flex; gap: 8px; }
.christmas-units div {
  display: flex; flex-direction: column; align-items: center;
  min-width: 56px; padding: 10px 8px 8px;
  background: var(--inset); border-radius: 6px;
}
.christmas-units span {
  font-family: var(--mono); font-size: 20px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.christmas-units small { margin-top: 6px; font-size: 10px; color: var(--text-2); }

/* ---------- Lists ---------- */
.info { margin-top: 12px; }
.page > .info:first-of-type { margin-top: 28px; }
.info div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 16px; font-size: 14px; }
.info div + div { border-top: 1px solid var(--border-soft); }
.info dt { color: var(--text-2); }
.info dd { margin: 0; color: var(--text); }
.info dd a { color: var(--text); text-decoration-color: var(--text-3); text-underline-offset: 3px; }
.info dd a:hover { text-decoration-color: var(--text); }
.info .profile-picture { align-items: center; padding-top: 10px; padding-bottom: 10px; }
.profile-picture dd { display: flex; align-items: center; gap: 8px; }
.profile-picture .avatar { width: 36px; height: 36px; margin-right: 4px; font-size: 15px; }

.versions { margin-top: 12px; overflow: hidden; }
.versions div { display: flex; align-items: center; gap: 16px; padding: 12px 16px; font-size: 14px; }
.versions div + div { border-top: 1px solid var(--border-soft); }
/* Version numbers look like on the main website: 14px, medium weight. */
.versions .version, .builds .version { width: 64px; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.versions .date, .builds .date { flex: 1; color: var(--text-2); }

/* Text buttons in lists: the hover box is 30px tall, like the tabs in the header. */
.link, .versions .link, .builds .link, .app-links .link {
  display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: var(--radius);
  background: none; color: var(--text-soft); font-size: 13px; font-weight: 400; text-decoration: none; cursor: pointer;
}
.versions .link:hover, .builds .link:hover, .app-links .link:hover { background: var(--hover); color: var(--text); }

.unavailable { opacity: 0.4; pointer-events: none; }

.show-all {
  height: 30px; margin-top: 12px; padding: 0 10px; border-radius: var(--radius);
  background: none; color: var(--text-soft); font-size: 13px; font-weight: 400;
}
.show-all:hover { background: var(--hover); color: var(--text); }

.empty { margin-top: 12px; font-size: 14px; color: var(--text-2); }

/* ---------- Downloads ---------- */
.downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 28px; }
.download { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; }
.os-icon { width: 24px; height: 24px; color: var(--text); }
.download h2 { margin-top: 20px; font-size: 16px; font-weight: 600; }
.requirements { margin-top: 4px; font-size: 13px; color: var(--text-2); }
.download .btn-primary {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 40px; margin-top: 24px; border-radius: var(--radius);
  font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background 0.15s;
}
.file { margin-top: 10px; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-3); }

/* ---------- Buttons ---------- */
/* No border: a slightly lighter grey than the card they sit on. */
.btn-quiet {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: var(--hover); color: var(--text);
  font-weight: 500; text-decoration: none;
}
.btn-quiet:hover { background: var(--hover-strong); }
.btn-primary { color: #fff; }
button:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
/* Small buttons (Add, Sign out, Connect, New app, …) match the dialog and form buttons. */
.small { height: 26px; padding: 0 10px; border-radius: 6px; font-size: 13px; }

.btn-danger { background: #c2413f; color: #fff; }
.btn-danger:hover { background: #d44c4a; }
.btn-quiet.danger:hover { color: var(--red); }

/* ---------- Link (desktop app sign-in) ---------- */
.link-card { margin-top: 28px; padding: 20px; }
.link-actions { display: flex; gap: 8px; }
.link-actions button { flex: 1; }
.link-cancel { border: 0; background: var(--hover); color: var(--text); }
.link-cancel:hover { background: var(--hover-strong); }

/* ---------- Panels, rows, forms ---------- */
.panel { margin-top: 12px; }
.hint { font-size: 13px; line-height: 1.6; color: var(--text-2); }
.hint a, .app-setup a:not(.btn-quiet), .worker-note a { color: var(--accent); text-decoration: none; }
.hint a:hover, .app-setup a:not(.btn-quiet):hover { text-decoration: underline; }
.hint b, .app-setup b { font-weight: 500; color: var(--text); }

.connection + .connection, .devices .row + .row { border-top: 1px solid var(--border-soft); }
.row { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 10px 12px 10px 16px; font-size: 14px; }
.row-name { width: 160px; font-weight: 500; }
.devices .row-name { width: 200px; }
.row-status { flex: 1; color: var(--text-3); }
.connected .row-status { color: var(--text-2); }

/* ---------- Settings ---------- */
.settings .section-title:first-of-type { margin-top: 32px; }
.section-count { margin-left: 4px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Account: picture, name and last sign-in on one card, the buttons on the right. */
.account { display: flex; align-items: center; gap: 14px; padding: 16px; }
.account .avatar { flex: none; width: 48px; height: 48px; font-size: 19px; }
.account-info { flex: 1; min-width: 0; }
.account-name { font-size: 16px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-meta { margin-top: 3px; font-size: 13px; color: var(--text-2); }
.account-actions { display: flex; gap: 6px; flex: none; }

/* Rows with a second line under the name (TMDB, devices). */
.settings .row-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.settings .row-text .row-name { width: auto; }
.row-about { font-size: 13px; color: var(--text-2); }
.settings .row-text .row-status { flex: none; font-size: 13px; }
.row-status.current { color: var(--green); }

/* TMDB: a dot before the status, green once a key is saved. */
#tmdb .row > .row-status { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
#tmdb .row > .row-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
#tmdb.connected .row > .row-status::before { background: var(--green); }

.device-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius); background: var(--inset); color: var(--text-2); }
.device-icon svg { width: 18px; height: 18px; }

.connect-form, .new-app { display: grid; gap: 10px; padding: 4px 16px 16px; }
.new-app { padding-top: 16px; }
.connect-form input, .new-app input, .new-app select, .build-form input,
.build-panel input, .build-panel select { background: var(--inset); }

select {
  height: 40px; padding: 0 10px; border-radius: var(--radius);
  font: inherit; font-size: 14px;
}
.file-input {
  display: flex; align-items: center; height: 40px; padding: 0 12px;
  border: 1px dashed var(--border); background: var(--inset); border-radius: var(--radius);
  font-size: 14px; color: var(--text-2); cursor: pointer;
}
.file-input:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--text); }
.file-input input { display: none; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* Buttons in forms (Cancel, Create, …) are small, like in the "Are you sure?" dialog. */
.form-actions button, .form-actions .btn-quiet { height: 26px; padding: 0 10px; font-size: 13px; border-radius: 6px; }
.form-actions.start { justify-content: flex-start; }

/* ---------- Apps ---------- */
.app { margin-top: 12px; padding: 20px; }
.app-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.app-name { font-size: 16px; font-weight: 600; }
.app-meta { margin-top: 4px; font-size: 13px; color: var(--text-2); }
.app-setup {
  margin-top: 20px; padding: 14px 16px;
  border: 1px solid rgba(47, 155, 240, 0.35); background: rgba(47, 155, 240, 0.06); border-radius: 8px;
  font-size: 13px; line-height: 1.6; color: var(--text-2);
}
.app-setup .form-actions { margin-top: 12px; }

.build-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.build-form input { flex: 1; min-width: 160px; }
.build-form select { flex-basis: 100%; }
.build-form .error { flex-basis: 100%; }

.builds { margin-top: 12px; overflow: hidden; }
.builds div { display: flex; align-items: center; gap: 16px; padding: 12px 16px; font-size: 14px; }
.builds div + div { border-top: 1px solid var(--border-soft); }
.builds .status { width: 150px; }

/* Status dots */
.builds .status::before, .site-state::before {
  content: ""; display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 8px;
  border-radius: 50%; vertical-align: 0; background: var(--text-3);
}
.status.active::before, .site-state.active::before { background: var(--accent); box-shadow: 0 0 0 3px rgba(47, 155, 240, 0.2); }
.status.done::before, .site-state.done::before { background: var(--green); }
.status.failed::before, .site-state.failed::before { background: var(--red); }

.app-links { display: flex; gap: 4px; margin: 12px 0 0 -10px; }
.app-links .remove { margin-left: auto; }
.app-links .remove:hover { color: var(--red); }

/* "Are you sure?" dialog, like the app's pop-ups: 448px wide, 20px padding,
   Go back and the red button together on the right. */
.confirm {
  width: min(448px, calc(100% - 32px)); margin: auto; padding: 20px;
  border: 0; border-radius: 10px;
  background: var(--surface); color: var(--text);
}
.confirm::backdrop { background: rgba(10, 13, 18, 0.6); }
.confirm h2 { font-size: 14px; font-weight: 600; }
.confirm p { margin: 10px 0 16px; font-size: 13px; line-height: 1.5; color: var(--text-2); }

.site-state { display: inline-flex; align-items: center; font-size: 13px; color: var(--text-2); white-space: nowrap; }

.app .error:empty { display: none; }
.app .error { margin-top: 8px; }

.site-info { flex: 1; padding: 4px 10px; font-size: 13px; color: var(--text-2); }

.site-card {
  display: block; margin-top: 12px; padding: 20px; color: inherit; text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.site-card:hover { background: #2a303a; }
.site-card .site-info { margin-top: 16px; padding: 0; font-size: 13px; color: var(--text-3); }

.crumbs { display: flex; gap: 8px; margin-bottom: 20px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--text-soft); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs span:last-child { color: var(--text); }
.site-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.site-title { display: flex; align-items: center; gap: 14px; }
.site-title h1 { margin-top: 0; }
.site-actions { display: flex; gap: 8px; }
#error:empty { display: none; }
#error { margin-top: 10px; }

.build-panel { display: grid; gap: 10px; margin-top: 20px; padding: 16px; }
#setup { margin-top: 20px; }
#builds { margin-top: 12px; }

.login-mark { display: block; width: 56px; height: 56px; margin: 0 auto 32px; }
.support { margin-top: 16px; text-align: center; font-size: 13px; color: var(--text-2); }
.support a { color: var(--accent); text-decoration: none; }
.support a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Drop ---------- */
/* Drop scrolls as a whole page (so the scrollbar runs the full height, like the other
   pages); the header stays at the top and the message box at the bottom. */
.drop-page { display: flex; flex-direction: column; min-height: calc(100vh - 50px); }
/* Messages and the message box share one column, at most 768px wide (like ChatGPT and Claude). */
.drop-feed { flex: 1; padding: 24px max(16px, calc((100% - 768px) / 2)) 0; opacity: 0; }
/* Shown once the page has scrolled to the newest message (see drop.js). */
.drop-feed.ready { opacity: 1; transition: opacity 0.15s; }
/* Messages fade out over 24px under the header and above the message box instead of being
   cut off (like the Claude app). The 24px around the feed keeps the first and newest message clear. */
.drop-body header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 24px; pointer-events: none;
  background: linear-gradient(to bottom, var(--bg), rgba(23, 28, 37, 0));
}
.drop-bottom {
  position: sticky; bottom: 0; z-index: 10; padding: 24px 0 16px;
  background: linear-gradient(to bottom, rgba(23, 28, 37, 0) 0, var(--bg) 24px);
}
.drop-composer, .drop-error { width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; padding: 0 16px; }
.drop-empty { margin-top: 40px; text-align: center; font-size: 14px; color: var(--text-2); }
.drop-day {
  display: flex; align-items: center; gap: 12px; margin: 24px 0 8px;
  font-size: 12px; color: var(--text-3);
}
.drop-day::before, .drop-day::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); }
.drop-item { margin-top: 14px; }
.drop-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 12px; color: var(--text-3); }
/* Message bubbles like in the Claude app: no border, 8px/13px padding, 20px lines, 10px corners,
   and at most 85% of the column wide before the text wraps. */
.drop-item .drop-text {
  display: inline-block; max-width: 85%; padding: 8px 13px;
  background: var(--surface); border-radius: 10px;
  font-size: 14px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.drop-item .drop-text a { color: var(--accent); }
.drop-media {
  display: block; width: 420px; max-width: 100%; overflow: hidden;
  border-radius: 8px; background: var(--surface);
}
.drop-media img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; }
video.drop-media { max-height: 360px; }
.drop-file {
  display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 8px 14px 8px 8px;
  background: var(--surface); border-radius: 8px;
  color: inherit; text-decoration: none; transition: background 0.15s;
}
.drop-file:hover { background: #2a303a; }
.drop-file-icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius);
  background: var(--hover); color: var(--text-2);
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.02em;
}
.drop-file-text { display: flex; flex-direction: column; min-width: 0; }
.drop-file-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-file-size { margin-top: 2px; font-size: 12px; color: var(--text-3); }
.drop-pending { font-size: 13px; color: var(--text-3); }

/* Message box: text and Send share one field (files waiting to be sent sit above them). */
.drop-composer {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px;
  width: calc(100% - 32px); max-width: 768px; padding: 4px 4px 4px 6px;
  background: var(--surface); border-radius: 10px;
}
.drop-composer textarea,
.drop-composer textarea:hover,
.drop-composer textarea:focus {
  flex: 1; min-height: 30px; max-height: 170px; padding: 5px 6px; resize: none;
  border: 0; background: none; box-shadow: none;
  font: inherit; font-size: 14px; line-height: 20px;
}
/* Send: just an arrow, no box (a soft square shows behind it on hover). Hidden until
   there is something to send, then fades and grows in; its space is kept so the box doesn't move. */
.drop-send {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border-radius: var(--radius); background: none; color: var(--text-soft);
  visibility: hidden; opacity: 0; transform: scale(0.6);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s, background 0.15s, color 0.15s;
}
.drop-composer:has(textarea:not(:placeholder-shown)) .drop-send,
.drop-composer:has(.drop-attachments:not([hidden])) .drop-send {
  visibility: visible; opacity: 1; transform: none;
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.drop-send:hover { background: var(--hover-strong); color: var(--text); }
.drop-send svg { width: 18px; height: 18px; }
.drop-error { margin-top: 6px; }

/* Files waiting in the message box until Send (like the Claude app). */
.drop-attachments { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; padding: 2px 0 4px 2px; }
.drop-attachment {
  position: relative; flex: none; width: 80px; height: 80px; overflow: hidden;
  border-radius: 8px; background: var(--inset);
}
.drop-attachment img { display: block; width: 100%; height: 100%; object-fit: cover; }
.drop-attachment.is-file { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; }
.drop-attachment-ext { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--text-soft); }
.drop-attachment-name { max-width: 100%; overflow: hidden; font-size: 11px; color: var(--text-2); text-overflow: ellipsis; white-space: nowrap; }
.drop-attachment-remove {
  position: absolute; top: 4px; right: 4px; display: grid; place-items: center;
  width: 20px; height: 20px; padding: 0; border-radius: 50%;
  background: rgba(17, 21, 28, 0.85); color: var(--text); opacity: 0;
}
.drop-attachment:hover .drop-attachment-remove, .drop-attachment-remove:focus-visible { opacity: 1; }
.drop-attachment-remove:hover { background: rgba(17, 21, 28, 0.95); }
.drop-attachment-remove svg { width: 12px; height: 12px; }
.drop-overlay {
  position: fixed; inset: 12px; z-index: 50; display: grid; place-items: center;
  background: rgba(17, 21, 28, 0.85); border: 1px dashed var(--accent); border-radius: 12px;
  font-size: 16px; color: var(--text); pointer-events: none;
}
.drop-more { position: relative; opacity: 0; }
.drop-item:hover .drop-more, .drop-more.open, .drop-more:focus-within { opacity: 1; }
.drop-more-button { display: grid; place-items: center; width: 24px; height: 20px; padding: 0; border-radius: 4px; background: none; color: var(--text-3); }
.drop-more-button:hover, .drop-more.open .drop-more-button { background: var(--hover); color: var(--text); }
.drop-more-button svg { width: 16px; height: 16px; fill: currentColor; }
.drop-menu { left: 0; right: auto; z-index: 10; }
/* The user menu is a bit wider than its text. */
#menu { min-width: 170px; }
.drop-menu .danger, .drop-menu .danger:hover { color: var(--red); }
.drop-menu.up { top: auto; bottom: calc(100% + 6px); }

.drop-item.is-reply { margin-top: 4px; }
.drop-quote {
  display: flex; align-items: center; gap: 6px; max-width: 100%; height: auto; margin: 0 0 4px; padding: 0;
  background: none; color: var(--text-3); font-size: 12px; font-weight: 400; text-align: left;
}
.drop-quote:hover { background: none; }
.drop-quote:hover .drop-quote-text { color: var(--text-soft); }
.drop-quote-hook {
  flex: none; width: 18px; height: 8px; margin: 6px 0 0 6px;
  border-top: 1px solid #3a4150; border-left: 1px solid #3a4150; border-top-left-radius: 6px;
}
.drop-quote-name { flex: none; color: var(--text-soft); font-weight: 500; }
.drop-quote-name:empty { display: none; }
.drop-quote-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-quote.deleted { cursor: default; font-style: italic; }
.drop-item.flash { border-radius: 8px; animation: drop-flash 1600ms ease-out; }
@keyframes drop-flash {
  0%, 30% { background: var(--hover); box-shadow: 0 0 0 6px var(--hover); }
  100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}
/* "Replying to …" sits on top of the message box as one piece: same width,
   a darker grey, rounded only at the top (the box loses its top corners). */
.drop-reply {
  display: flex; align-items: center; gap: 8px;
  width: calc(100% - 32px); max-width: 768px; margin: 0 auto; padding: 6px 6px 6px 12px;
  background: var(--inset); border-radius: 10px 10px 0 0;
  font-size: 13px; color: var(--text-2);
}
.drop-reply[hidden] { display: none; }
.drop-reply:not([hidden]) + .drop-composer { border-top-left-radius: 0; border-top-right-radius: 0; }
.drop-reply span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-reply b { color: var(--text); font-weight: 500; }
.drop-reply button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; background: none; color: var(--text-3); }
.drop-reply button:hover { background: var(--hover); color: var(--text); }
.drop-reply svg { width: 14px; height: 14px; }

/* ---------- Saving ---------- */
.saving-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.saving-fields label { display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
#new-goal input, .goal-edit input { background: var(--inset); }
.goal-edit { margin-top: 16px; }
.goal-actions { display: flex; align-items: center; gap: 10px; }
.goal-more { position: relative; }
.more-button { display: grid; place-items: center; width: 28px; height: 24px; padding: 0; border-radius: 6px; background: none; color: var(--text-3); }
.more-button:hover, .more-button[aria-expanded="true"] { background: var(--hover); color: var(--text); }
.more-button svg { width: 16px; height: 16px; fill: currentColor; }
.goal-more .menu button { white-space: nowrap; }
.goal-more .menu .danger, .goal-more .menu .danger:hover { color: var(--red); }
#link-dialog p b { font-weight: 500; color: var(--text); }
.link-field { display: grid; gap: 6px; margin-bottom: 12px; font-size: 13px; color: var(--text-2); }
.link-field select, .link-result input { height: 36px; background: var(--inset); }
.link-result { display: grid; gap: 6px; margin-bottom: 12px; }
.link-result input { width: 100%; font-size: 13px; }
#link-dialog .link-expires { margin: 0; font-size: 12px; }
#link-dialog .error:empty { display: none; }
#link-dialog .error { margin: 0 0 12px; }
.link-list { margin-bottom: 12px; }
#link-dialog .link-list-title { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--text-2); }
#active-links div { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 13px; }
#active-links div + div { border-top: 1px solid var(--border-soft); }
#active-links .date { flex: 1; color: var(--text-2); }
#active-links .remove { background: none; color: var(--text-3); }
#active-links .remove:hover { background: var(--hover); color: var(--red); }
.goal-total { font-size: 15px; color: var(--text-2); }
.goal-total b { font-size: 22px; font-weight: 600; color: var(--text); }
#shared .goal { margin-top: 24px; }
.share-expires { margin-top: 12px; font-size: 13px; color: var(--text-3); }
#new-goal .error:empty { display: none; }
.goal-bar { height: 8px; margin-top: 16px; border-radius: 4px; background: var(--inset); overflow: hidden; }
.goal-bar span { display: block; height: 100%; border-radius: 4px; background: var(--gradient); }
.goal-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; }
.goal-stats div { padding: 12px 14px; border-radius: var(--radius); background: var(--inset); }
.goal-stats dt { font-size: 12px; color: var(--text-2); }
.goal-stats dd { margin: 4px 0 0; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text); }
.goal-chart { position: relative; margin-top: 16px; padding: 14px 14px 10px; border-radius: var(--radius); background: var(--inset); }
.goal-chart svg { display: block; width: 100%; height: 140px; overflow: visible; }
.goal-chart path, .goal-chart line { fill: none; vector-effect: non-scaling-stroke; }
.goal-chart .saved-line { stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.goal-chart .saved-area { fill: var(--accent); opacity: 0.12; }
.goal-chart .ahead-line { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 5; opacity: 0.6; }
.goal-chart .price-line { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 4; }
.goal-chart-price { position: absolute; left: 14px; transform: translateY(-100%); padding-bottom: 3px; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.goal-chart-dates { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--text-2); }
.goal-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.goal-add input { flex: 1; min-width: 140px; height: 32px; background: var(--inset); font-size: 13px; }
.goal-add button { height: 32px; }
.goal .error:empty { display: none; }
.goal .error { margin-top: 8px; }
.goal-deposits { margin-top: 12px; }
.goal-deposits div { display: flex; align-items: center; gap: 16px; padding: 8px 0; font-size: 14px; }
.goal-deposits div + div { border-top: 1px solid var(--border-soft); }
.goal-deposits .date { flex: 1; color: var(--text-2); }
.goal-deposits .amount { font-variant-numeric: tabular-nums; color: var(--green); }
.goal-deposits .remove { background: none; color: var(--text-3); }
.goal-deposits .remove:hover { background: var(--hover); color: var(--red); }

/* ---------- Christmas ---------- */
.section-head .btn-quiet { flex: none; white-space: nowrap; }
.xmas-field { display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
#new-card input, #new-card textarea { background: var(--inset); }
#new-card textarea {
  min-height: 110px; padding: 10px 12px; border-radius: var(--radius); resize: vertical;
  font: inherit; font-size: 14px; line-height: 1.5;
}
#new-card .error:empty { display: none; }
.picture-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.picture-choice {
  position: relative; display: grid; gap: 6px; padding: 6px; cursor: pointer;
  border-radius: 8px; background: var(--inset); color: var(--text-soft); font-size: 13px; text-align: center;
  box-shadow: inset 0 0 0 2px transparent; transition: box-shadow 0.15s, background 0.15s;
}
.picture-choice:hover { background: var(--hover); }
.picture-choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); color: var(--text); }
.picture-choice input { position: absolute; opacity: 0; pointer-events: none; }
.picture-choice img, .own-photo { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 4px; object-fit: cover; }
.own-photo { display: grid; place-items: center; overflow: hidden; background: var(--surface); color: var(--text-2); }
.own-photo svg { width: 22px; height: 22px; }
.own-photo img { width: 100%; height: 100%; object-fit: cover; }
.xmas-card { display: flex; align-items: center; gap: 14px; padding: 12px; }
.xmas-thumb { flex: none; width: 84px; aspect-ratio: 3 / 2; border-radius: 6px; object-fit: cover; background: var(--inset); }
.xmas-info { flex: 1; min-width: 0; }
.xmas-to { font-size: 15px; font-weight: 600; color: var(--text); }
.xmas-text { margin-top: 3px; font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xmas-actions { display: flex; gap: 6px; flex: none; }
.xmas-opened { margin-top: 6px; font-size: 12px; color: var(--text-3); }
.xmas-opened.seen { color: var(--green); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: #343b47 transparent; }

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  .account { flex-wrap: wrap; }
  .account-actions { width: 100%; }
  .account-actions .btn-quiet { flex: 1; }
  .user-button #username { display: none; }
  .page { padding: 32px 16px 48px; }
  h1 { font-size: 26px; }
  .countdown { padding: 20px; }
  .countdown-title { font-size: 22px; }
  .countdown-units { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 20px; }
  .countdown-units div { min-width: 0; padding: 12px 4px 10px; }
  .countdown-units span { font-size: 22px; }
  .countdown-units small { font-size: 10px; }
  .row-name, .devices .row-name { width: auto; flex: none; }
  .builds .status { width: auto; }
  .saving-fields, .goal-stats { grid-template-columns: 1fr; }
  .picture-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .picture-choice { font-size: 12px; }
  .xmas-card { flex-wrap: wrap; }
  .xmas-actions { width: 100%; }
}