/* The screens that write: fields, the intake composer, small removes. */

.f { display: flex; flex-direction: column; gap: 7px; }
.f input, .f select, .f textarea,
.setup input, .setup select, .setup textarea {
  width: 100%; min-width: 0;
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 14px;
  outline: none;
}
.f input:focus, .f select:focus, .f textarea:focus,
.setup input:focus, .setup select:focus, .setup textarea:focus { border-color: var(--plum); }
.f textarea, .setup textarea { resize: vertical; line-height: 1.45; }
.f-check { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--ink-2); }
.f-check input { width: 18px; height: 18px; accent-color: var(--plum); }
.f-err { color: var(--ochre-ink); font-size: 14px; margin: 0; min-height: 0; }
.f-err:empty { display: none; }
.f-form { gap: 16px; }
.screen .f-form { padding-bottom: 24px; }

.setup {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border-top: 1px solid var(--line);
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  margin-top: 12px;
}
.setup .row > * { flex: 1; }

.x {
  width: 26px; height: 26px; border-radius: 13px; flex-shrink: 0;
  color: var(--ink-3); font-size: 18px; line-height: 1;
  display: grid; place-items: center;
}
.x:hover { background: var(--line-2); color: var(--ink); }

button.card { width: 100%; border: none; font: inherit; color: inherit; cursor: pointer; }

button.row { width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
.stack > button.row { background: var(--card); }
.stack > * + button.row { border-top: 1px solid var(--line-2); }

/* MJ in the thread */
.bubble.mj .who-mj { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--plum); margin-bottom: 3px; }
.bubble.typing { display: flex; gap: 5px; align-items: center; padding: 14px 16px; width: fit-content; }
.bubble.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: mj-dot 1.2s infinite ease-in-out; }
.bubble.typing span:nth-child(2) { animation-delay: 0.15s; }
.bubble.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes mj-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bubble.typing span { animation: none; } }