/* Voice → structured capture — centered modal with an editable parsed preview.
   Reuses the app's theme tokens (var(--surface|text|border|accent|muted…)) so it
   tracks light/dark automatically, mirroring voice.css. */

.vsc-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
  background: rgba(20, 22, 40, .42);
  backdrop-filter: blur(2px);
  animation: vsc-fade .14s ease-out;
}
@keyframes vsc-fade { from { opacity: 0; } to { opacity: 1; } }

.vsc-card {
  width: 480px;
  max-width: 100%;
  background: var(--surface, #fff);
  color: var(--text, #1f2230);
  border: 1px solid var(--border, #ececf1);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(20, 22, 40, .06), 0 24px 60px rgba(20, 22, 40, .28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: vsc-rise .18s ease-out;
  font-family: var(--font-body, inherit);
}
@keyframes vsc-rise { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vsc-overlay, .vsc-card { animation: none; } }

/* ---- head ---- */
.vsc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 12px 15px;
  border-bottom: 1px solid var(--border, #ececf1);
}
.vsc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-family: var(--font-display, inherit);
  font-weight: 600;
  font-size: 15px;
}
.vsc-ic { display: inline-flex; color: var(--accent, #5b5bd6); }
.vsc-ic svg, .vsc-btn svg, .vsc-close svg { width: 17px; height: 17px; }

.vsc-rec { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted, #5c6274); }
.vsc-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #e5484d; animation: vsc-pulse 1.1s ease-in-out infinite; }
@keyframes vsc-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .vsc-rec-dot { animation: none; } }

.vsc-close { border: 0; background: transparent; color: var(--muted, #5c6274); cursor: pointer; border-radius: 8px; padding: 4px; display: inline-flex; }
.vsc-close:hover { background: var(--bg-hover, rgba(0, 0, 0, .05)); color: var(--text, #1f2230); }

/* ---- body ---- */
.vsc-body { padding: 13px 15px 6px; }
.vsc-say { font-size: 12.5px; color: var(--muted, #5c6274); margin-bottom: 9px; }
.vsc-say b { color: var(--text, #1f2230); font-weight: 600; }

.vsc-text {
  width: 100%;
  min-height: 52px;
  max-height: 30vh;
  resize: vertical;
  border: 1px solid var(--border, #ececf1);
  border-radius: 10px;
  background: var(--bg, #fbfbfd);
  color: var(--text, #1f2230);
  padding: 10px 12px;
  font-family: var(--font-body, inherit);
  font-size: 14.5px;
  line-height: 1.5;
  outline: none;
}
.vsc-text:focus { border-color: var(--accent, #5b5bd6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #5b5bd6) 22%, transparent); }
.vsc-interim { min-height: 16px; padding: 3px 2px 0; font-size: 12.5px; color: var(--faint, #9096a8); font-style: italic; }
.vsc-interim:empty { min-height: 0; }

/* ---- parsed preview ---- */
.vsc-preview {
  margin-top: 11px;
  border: 1px solid var(--border, #ececf1);
  border-radius: 12px;
  background: var(--bg, #fafafc);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.vsc-row { display: flex; align-items: center; gap: 10px; }
.vsc-label {
  flex: 0 0 46px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted, #5c6274);
}
.vsc-seg { display: inline-flex; background: var(--surface-2, #eeeef3); border-radius: 8px; padding: 2px; gap: 2px; }
.vsc-seg button {
  border: 0; background: transparent; color: var(--muted, #5c6274);
  font: inherit; font-size: 12.5px; font-weight: 500; padding: 4px 12px; border-radius: 6px; cursor: pointer;
}
.vsc-seg button.active { background: var(--surface, #fff); color: var(--text, #1f2230); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }

.vsc-title-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border, #ececf1);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text, #1f2230);
  font: inherit;
  font-size: 14px;
  padding: 7px 10px;
  outline: none;
}
.vsc-title-input:focus { border-color: var(--accent, #5b5bd6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #5b5bd6) 20%, transparent); }

.vsc-row-meta { gap: 12px; flex-wrap: wrap; }
.vsc-meta { display: inline-flex; align-items: center; gap: 7px; }
.vsc-meta-k { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #5c6274); }
.vsc-due-input, .vsc-pri-input {
  border: 1px solid var(--border, #ececf1);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text, #1f2230);
  font: inherit;
  font-size: 13px;
  padding: 6px 9px;
  outline: none;
}
.vsc-due-input:focus, .vsc-pri-input:focus { border-color: var(--accent, #5b5bd6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #5b5bd6) 18%, transparent); }

/* The whole preview picks up a subtle accent tint by intent. */
.vsc-card[data-intent="task"] .vsc-preview { border-color: color-mix(in srgb, var(--accent, #5b5bd6) 32%, var(--border, #ececf1)); }

.vsc-unsupported { margin: 9px 2px 2px; font-size: 12.5px; color: var(--muted, #5c6274); background: var(--surface-2, #f4f4f8); border-radius: 8px; padding: 8px 10px; }

/* ---- foot ---- */
.vsc-foot { display: flex; align-items: center; gap: 8px; padding: 11px 15px 13px; }
.vsc-spacer { flex: 1; }
.vsc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border, #ececf1); background: var(--surface, #fff); color: var(--text, #1f2230);
  font: inherit; font-size: 13px; font-weight: 500; padding: 8px 13px; border-radius: 9px; cursor: pointer;
  transition: background .12s, border-color .12s, transform .06s;
}
.vsc-btn:hover { background: var(--bg-hover, rgba(0, 0, 0, .04)); }
.vsc-btn:active { transform: translateY(1px); }
.vsc-btn:disabled { opacity: .5; cursor: not-allowed; }
.vsc-mic.is-rec { background: color-mix(in srgb, #e5484d 12%, var(--surface, #fff)); border-color: color-mix(in srgb, #e5484d 40%, var(--border, #ececf1)); color: #e5484d; }
.vsc-btn.primary { background: var(--accent, #5b5bd6); border-color: var(--accent, #5b5bd6); color: #fff; }
.vsc-btn.primary:hover { background: color-mix(in srgb, var(--accent, #5b5bd6) 88%, #000); }

.vsc-status { min-height: 15px; padding: 0 15px 12px; font-size: 12.5px; color: var(--muted, #5c6274); }
.vsc-status:empty { padding-bottom: 0; min-height: 0; }
.vsc-status.warn { color: #d9822b; }

@media (max-width: 540px) {
  .vsc-overlay { padding: 8vh 10px 10px; align-items: flex-end; }
  .vsc-card { width: 100%; }
  .vsc-row-meta { flex-direction: column; align-items: stretch; }
}