/* Betterlane — shared tokens.
   Colours, radius and type come from site/app/globals.css so this and the
   landing page can never drift. Spacing/shadow ramps follow the Blueprint
   scale, which the site does not define. */

@font-face { font-family: Instrument; src: url('/assets/fonts/instrument-sans-regular.ttf') format('truetype');  font-weight: 400; font-display: swap; }
@font-face { font-family: Instrument; src: url('/assets/fonts/instrument-sans-medium.ttf') format('truetype');   font-weight: 500; font-display: swap; }
@font-face { font-family: Instrument; src: url('/assets/fonts/instrument-sans-semibold.ttf') format('truetype'); font-weight: 600 900; font-display: swap; }

:root {
  /* from the site */
  --primary: #2a78d6;
  --blue: #276cc7;
  --ink: #24292e;
  --muted: #657079;
  --line: #dfe3e7;
  --accent: #eaf0f8;
  --accent-ink: #19202a;
  --surface: #f1f3f5;
  --card: #fff;
  --card-ink: #20252a;
  --radius: .75rem;

  /* semantic */
  /* a rampa de cinzas do texto: o repo tinha ~95 cinzas para 4 papéis */
  --ink-2: #47515a;   /* texto secundário */
  --ink-3: #657079;   /* legenda, meta */
  --ink-4: #8b949c;   /* fraco, desabilitado */
  --ink-blue: #1c5497;/* texto azul sobre fundo claro — estava escrito à mão 9 vezes */

  --success: #24644e;
  --success-bg: #eaf5ed;
  --warning: #9a6212;
  --warning-bg: #fdf4e3;
  --danger: #b3261e;
  --danger-bg: #fdeceb;

  /* scales */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --r-sm: 4px; --r: 6px; --r-md: 9px; --r-lg: 12px; --r-xl: 16px;
  --sh-sm: 0 1px 2px rgba(32,55,77,.06);
  --sh: 0 4px 12px rgba(43,74,111,.06);
  --sh-lg: 0 12px 40px rgba(32,55,77,.09);
  --sh-xl: 0 18px 50px rgba(37,48,64,.14);

  --font: Instrument, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-weight: 500; letter-spacing: -.02em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* the mark */
.bl-mark { display: inline-flex; align-items: baseline; font-weight: 600; letter-spacing: -.04em; color: var(--ink); }
.bl-mark i { font-style: normal; color: var(--blue); }

.overline { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #616a72; }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: var(--surface); color: var(--muted); white-space: nowrap; }
.chip.agendado   { background: var(--accent);      color: #1c5497; }
.chip.confirmado { background: var(--success-bg);  color: var(--success); }
.chip.realizado  { background: var(--surface);     color: var(--muted); }
.chip.falta      { background: var(--danger-bg);   color: var(--danger); }
.chip.cancelado  { background: var(--surface);     color: #8b949c; }
.chip.remarcado  { background: var(--warning-bg);  color: var(--warning); }
.chip.novo, .chip.em_conversa { background: var(--accent); color: #1c5497; }
.chip.perdido, .chip.sem_retorno { background: var(--surface); color: #8b949c; }
.chip.betterlane { background: #fff; border: 1px solid #bcd4ee; color: var(--blue); }
.chip.recepcao   { background: #fff; border: 1px solid var(--line); color: var(--muted); }
.chip.pro        { background: #efeaf8; color: #5b3fa0; }

/* WhatsApp thread — shared by the demo, the patient record and Conversas.
   This is the one place we deliberately copy someone else's visual language:
   it is what the patient actually sees.
   Default orientation is the clinic's view (patient on the left). Add
   .wa.no-celular for the patient's own phone, where their messages sit right. */
.wa { background: #ECE5DD; display: flex; flex-direction: column; gap: 6px; padding: var(--s4) var(--s3); }
.wa-b { max-width: 84%; padding: 8px 11px 6px; border-radius: 10px; box-shadow: 0 1px 1px rgba(0,0,0,.08); font-size: 14px; line-height: 1.45; white-space: pre-wrap; color: #111b21; position: relative; }
.wa-b.paciente { background: #fff; align-self: flex-start; border-top-left-radius: 3px; }
.wa-b.atendimento, .wa-b.equipe { background: #DCF8C6; align-self: flex-end; border-top-right-radius: 3px; }
.wa-b.equipe { background: #d7f0f7; }
.wa.no-celular .wa-b.paciente { background: #DCF8C6; align-self: flex-end; border-top-left-radius: 10px; border-top-right-radius: 3px; }
.wa.no-celular .wa-b.atendimento { background: #fff; align-self: flex-start; border-top-right-radius: 10px; border-top-left-radius: 3px; }
.wa-b .t { font-size: 10.5px; color: #667781; text-align: right; margin-top: 3px; }
.wa-b .autor { font-size: 10.5px; font-weight: 600; color: #1c5497; margin-bottom: 3px; }
.wa-day { align-self: center; background: rgba(255,255,255,.85); color: #55606a; font-size: 11px; padding: 3px 11px; border-radius: 999px; margin: var(--s2) 0; }
.wa-sys { align-self: center; color: #6b7780; font-size: 11px; font-style: italic; text-align: center; padding: 4px 0; max-width: 80%; }
.wa-nota { background: #fdf4e3; align-self: flex-end; border: 1px solid #f0dfbc; }
.wa-audio { display: flex; align-items: center; gap: 9px; min-width: 190px; }
.wa-audio .wave { flex: 1; height: 18px; background: repeating-linear-gradient(90deg, #b6c3cb 0 2px, transparent 2px 5px); border-radius: 2px; }
.wa-audio .dur { font-size: 11px; color: #667781; }

.empty { color: #8b949c; font-size: 14px; font-style: italic; }