/* Record This Car — shadcn/ui look (zinc palette, 1px borders, --radius corners, ring focus), plain CSS. */
:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --destructive: 0 72.2% 50.6%;
  --destructive-foreground: 0 0% 98%;
  --success: 142 71% 35%;
  --record: 0 84% 60%;
  --ring: 240 5.9% 10%;
  --radius: 0.75rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 5.5%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 19%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --destructive: 0 72% 51%;
    --success: 142 69% 45%;
    --ring: 240 4.9% 83.9%;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 5.5%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 240 3.7% 15.9%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 19%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --destructive: 0 72% 51%;
  --success: 142 69% 45%;
  --ring: 240 4.9% 83.9%;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; border: 0 solid hsl(var(--border)); }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100dvh;
  background: hsl(var(--background)); color: hsl(var(--foreground));
  font: 15px/1.5 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
svg.i { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Shell */
.topbar {
  position: sticky; top: 0; z-index: 10;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  display: flex; align-items: center; gap: 10px;
  background: hsl(var(--background) / .85); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom-width: 1px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.01em; font-size: 15px; margin-right: auto; min-width: 0; }
/* Same mark as the app icon in both themes. */
.brand-mark { width: 30px; height: 30px; border-radius: 8px; background: #09090b; box-shadow: inset 0 0 0 1px hsl(var(--border)); display: grid; place-items: center; flex-shrink: 0; }
.brand-mark span { width: 12px; height: 12px; border-radius: 50%; background: hsl(var(--record)); box-shadow: 0 0 0 2px #09090b, 0 0 0 4px #fafafa; }
.main { width: 100%; max-width: 480px; margin: 0 auto; padding: 16px 16px 24px; flex: 1; }
.footer { text-align: center; font-size: 12px; color: hsl(var(--muted-foreground)); padding: 8px 16px calc(env(safe-area-inset-bottom) + 16px); }
.footer a { color: inherit; font-weight: 600; text-decoration: none; }
.footer a:hover { color: hsl(var(--foreground)); }

/* Card */
.card { background: hsl(var(--card)); border-width: 1px; border-radius: var(--radius); box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.card + .card { margin-top: 12px; }
.card-header { padding: 18px 18px 0; }
.card-title { font-size: 17px; font-weight: 600; letter-spacing: -.015em; margin: 0; line-height: 1.3; }
.card-description { margin: 4px 0 0; color: hsl(var(--muted-foreground)); font-size: 14px; }
.card-content { padding: 16px 18px 18px; }
.step-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.step-num { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; border-width: 1px; display: grid; place-items: center; font-size: 11px; line-height: 1; letter-spacing: 0; }
.step-num.done { background: hsl(var(--primary)); border-color: transparent; font-size: 0; }
.step-num.done::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border: solid hsl(var(--primary-foreground)); border-width: 0 0 2px 2px; transform: rotate(-45deg); }

/* Button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: calc(var(--radius) - 2px);
  font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; user-select: none;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  transition: background-color .15s, opacity .15s, transform .05s; text-decoration: none;
}
.btn:hover { background: hsl(var(--primary) / .9); }
.btn:active { transform: scale(.985); }
.btn:focus-visible, .input:focus-visible, .textarea:focus-visible, .item:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn-lg { height: 52px; font-size: 16px; border-radius: var(--radius); }
.btn-block { width: 100%; }
.btn-outline { background: hsl(var(--background)); color: hsl(var(--foreground)); border-width: 1px; border-color: hsl(var(--input)); }
.btn-outline:hover { background: hsl(var(--accent)); }
.btn-ghost { background: transparent; color: hsl(var(--foreground)); }
.btn-ghost:hover { background: hsl(var(--accent)); }
.btn-record { background: hsl(var(--record)); color: #fff; }
.btn-record:hover { background: hsl(var(--record) / .9); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-sm { height: 32px; padding: 0 10px; font-size: 13px; }
.btn + .btn { margin-top: 8px; }
.row { display: flex; gap: 8px; }
.row > .btn { flex: 1; margin-top: 0; }

/* Form */
.label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.field + .field { margin-top: 14px; }
.input, .textarea {
  width: 100%; height: 44px; padding: 0 12px; border-width: 1px; border-color: hsl(var(--input));
  border-radius: calc(var(--radius) - 2px); background: hsl(var(--background));
  font-size: 16px; transition: box-shadow .15s;
}
.input::placeholder, .textarea::placeholder { color: hsl(var(--muted-foreground)); }
.textarea { height: auto; min-height: 92px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.input-wrap { position: relative; }
.input-wrap > svg.i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); pointer-events: none; }
.input-wrap > .input { padding-left: 38px; }
.hint { font-size: 13px; color: hsl(var(--muted-foreground)); margin-top: 6px; }
.otp { letter-spacing: .4em; text-align: center; font-size: 20px; font-variant-numeric: tabular-nums; }

/* Command-style list */
.list { margin-top: 8px; border-width: 1px; border-radius: calc(var(--radius) - 2px); overflow: hidden; max-height: 52dvh; overflow-y: auto; overscroll-behavior: contain; }
.item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 56px; cursor: pointer; background: hsl(var(--card)); width: 100%; text-align: left; }
.item + .item { border-top-width: 1px; }
.item:hover { background: hsl(var(--accent)); }
.item.empty { cursor: default; color: hsl(var(--muted-foreground)); font-size: 14px; justify-content: center; }
.item.empty:hover { background: hsl(var(--card)); }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: hsl(var(--muted)); display: grid; place-items: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.meta { flex: 1; min-width: 0; }
.meta-title { font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-sub { font-size: 13px; color: hsl(var(--muted-foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Selected chip */
.picked { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-width: 1px; border-radius: calc(var(--radius) - 2px); }
.picked + .picked { margin-top: 8px; }

/* Tabs */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: calc(var(--radius) - 2px); background: hsl(var(--muted)); }
.tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: calc(var(--radius) - 4px); background: transparent; font-size: 14px; font-weight: 500; color: hsl(var(--muted-foreground)); cursor: pointer; transition: background-color .15s, color .15s; }
.tabs button[aria-selected="true"] { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 3px rgb(0 0 0 / .1); }
.tabs button:disabled { opacity: .45; cursor: not-allowed; }
.tabs button:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--ring)); }

/* My videos */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats .card + .card { margin-top: 0; }
.stat { padding: 12px 10px; text-align: center; }
.stat-num { font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat-label { font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.vlist .item { border-radius: 0; }
.vlist .item:first-child { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.vlist .item:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.thumb { position: relative; width: 64px; height: 64px; border-radius: calc(var(--radius) - 4px); overflow: hidden; background: hsl(var(--muted)); flex-shrink: 0; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent rgb(255 255 255 / .92); filter: drop-shadow(0 1px 2px rgb(0 0 0 / .5)); }
.badge-ok { color: hsl(var(--success)); border-color: hsl(var(--success) / .35); background: hsl(var(--success) / .08); }
.badge-muted { color: hsl(var(--muted-foreground)); }
.vrow { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }

/* Sheet (dialog from the bottom) */
.sheet { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / .6); display: flex; align-items: flex-end; justify-content: center; }
.sheet-panel { width: 100%; max-width: 480px; max-height: 92dvh; overflow-y: auto; background: hsl(var(--card)); border-top-width: 1px; border-radius: var(--radius) var(--radius) 0 0; padding: 16px 16px calc(env(safe-area-inset-bottom) + 16px); animation: up .2s ease-out; }
@keyframes up { from { transform: translateY(24px); opacity: .6; } }
@media (min-width: 520px) { .sheet { align-items: center; } .sheet-panel { border-radius: var(--radius); border-width: 1px; } }

/* Badge / alert */
.badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; border-width: 1px; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-width: 1px; border-radius: calc(var(--radius) - 2px); font-size: 14px; margin-top: 12px; }
.alert svg.i { margin-top: 2px; }
.alert-muted { background: hsl(var(--muted) / .5); }
.alert-error { color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / .4); background: hsl(var(--destructive) / .06); }
.alert-ok { color: hsl(var(--success)); border-color: hsl(var(--success) / .35); background: hsl(var(--success) / .07); }

/* Progress */
.progress { height: 8px; border-radius: 999px; background: hsl(var(--muted)); overflow: hidden; margin-top: 10px; }
.progress > div { height: 100%; width: 0; background: hsl(var(--primary)); border-radius: inherit; transition: width .2s; }

/* Record hero */
.record-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 0 4px; }
.record-btn {
  width: 116px; height: 116px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: hsl(var(--background)); border: 4px solid hsl(var(--foreground) / .9); transition: transform .1s;
}
.record-btn:active { transform: scale(.95); }
.record-btn span { width: 84px; height: 84px; border-radius: 50%; background: hsl(var(--record)); box-shadow: 0 6px 24px hsl(var(--record) / .45); }
.record-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px hsl(var(--ring) / .5); }
.record-caption { margin-top: 12px; font-weight: 600; font-size: 16px; }

/* Preview — a mock of the customer's text */
.phone-preview { background: hsl(var(--muted) / .6); border-radius: var(--radius); padding: 14px; }
.bubble { max-width: 86%; margin-left: auto; background: #0a84ff; color: #fff; border-radius: 18px; overflow: hidden; font-size: 14px; line-height: 1.4; }
.bubble img { display: block; width: 100%; max-height: 300px; object-fit: cover; background: #000; }
.bubble p { margin: 0; padding: 9px 12px; word-break: break-word; }
.bubble p a { color: #fff; text-decoration: underline; }
.preview-cap { font-size: 12px; color: hsl(var(--muted-foreground)); text-align: right; margin-top: 6px; }
.video { width: 100%; max-height: 46dvh; border-radius: calc(var(--radius) - 2px); background: #000; display: block; }

/* Done */
.done-wrap { text-align: center; padding: 18px 8px 4px; }
.done-icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: hsl(var(--success) / .12); color: hsl(var(--success)); }
.done-icon svg.i { width: 28px; height: 28px; }

/* Sign-in */
.auth { width: 100%; max-width: 400px; margin: auto; padding: 32px 16px; }
.auth-head { text-align: center; margin-bottom: 20px; }
.auth-head .brand-mark { width: 48px; height: 48px; border-radius: 12px; margin: 0 auto 14px; }
.auth-head .brand-mark span { width: 18px; height: 18px; box-shadow: 0 0 0 3px #09090b, 0 0 0 6px #fafafa; }
.auth-head h1 { font-size: 22px; letter-spacing: -.02em; margin: 0; }
.auth-head p { margin: 6px 0 0; color: hsl(var(--muted-foreground)); font-size: 14px; }

/* Menu */
.menu { position: absolute; right: 16px; top: calc(100% + 6px); min-width: 220px; background: hsl(var(--card)); border-width: 1px; border-radius: calc(var(--radius) - 2px); box-shadow: 0 10px 30px rgb(0 0 0 / .15); padding: 4px; }
.menu-head { padding: 8px 10px; font-size: 13px; }
.menu-head b { display: block; font-size: 14px; }
.menu-head span { color: hsl(var(--muted-foreground)); }
.menu hr { border: 0; border-top-width: 1px; margin: 4px 0; }
.menu a, .menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 6px; font-size: 14px; background: none; cursor: pointer; color: inherit; text-decoration: none; }
.menu a:hover, .menu button:hover { background: hsl(var(--accent)); }

.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }