/* ============================================================
   Vita 365 — AI 코치, v2 skin (PR-4)

   Source: design/ui-redesign-prototype:demo/coach.html.

   The coach is a working chat with streaming, meal-photo upload,
   conversation history and an upsell modal. None of that changes —
   this is a palette and shape pass, the same shape PR-2's --vh-*
   bridge took. Every rule needs an ancestor `.v2`.
   ============================================================ */

/* ─── Bridge: re-point the --vdw-* palette at v2 values ────────
   Checked each token's role before mapping, after PR-2's lesson that
   a "background" token is often a foreground one too:
     --vdw-forest      6 backgrounds / 10 colours  → --v2-brand-btn,
                       which is the one value that clears AA in BOTH
                       directions (5.39:1 as text on white, and with
                       white text on it).
     --vdw-terracotta  2 backgrounds / 4 colours   → --v2-warn (5.0:1
                       both ways), not the graphic-only clay.
     --vdw-quiet       colour only  → --v2-ink-3
     --vdw-card        background only → --v2-surface                */
.v2 {
  --vdw-bg:         var(--v2-bg);
  --vdw-card:       var(--v2-surface);
  --vdw-border:     var(--v2-line);
  --vdw-ink:        var(--v2-ink);
  --vdw-quiet:      var(--v2-ink-3);
  --vdw-forest:     var(--v2-brand-btn);
  --vdw-terracotta: var(--v2-warn);
  --vdw-bubble-u:   var(--v2-brand-tint);
  --vdw-bubble-a:   var(--v2-surface);
  --vdw-warning:    var(--v2-c-move-tint);
  --vdw-danger:     #FCF0EE;
}

.v2 .vdw-coach-shell, .v2 .vdw-main { font-family: var(--v2-font); }

/* ─── Header ────────────────────────────────────────────────── */
.v2 .vdw-coach-header {
  background: rgba(246, 247, 246, .92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--v2-line);
  font-family: var(--v2-font);
}
/* The prototype leads with the bot mark and a "reading your data" line;
   both are injected by coach-v2.js so the existing header markup keeps
   its own controls. */
/* The identity block IS the header title now, so the generic brand mark
   beside it is a second title competing for the same row — at 375px the
   two wrap into each other. Drop it here only. */
.v2 .vdw-coach-header .mp-brand { display: none; }
.coach-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.coach-id .nm, .coach-id .st { white-space: nowrap; }
.coach-id .bot {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  background: var(--v2-brand-tint); color: var(--v2-brand);
  display: grid; place-items: center; font-size: var(--v2-ic-lg);
}
.coach-id .nm { font-size: var(--v2-fs-body); font-weight: 700; }
.coach-id .st {
  font-size: var(--v2-fs-label); color: var(--v2-ink-3); margin-top: 2px;
  display: flex; align-items: center; gap: 5px;
}
.coach-id .live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--v2-brand); flex-shrink: 0;
}

/* ─── Messages ──────────────────────────────────────────────── */
.v2 .vdw-messages { background: var(--v2-bg); }
.v2 .vdw-msg-bubble {
  border-radius: var(--v2-r-lg);
  font-size: var(--v2-fs-sm);
  line-height: var(--v2-lh-loose);
  box-shadow: var(--v2-sh-card);
}
.v2 .vdw-msg.assistant .vdw-msg-bubble {
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-bottom-left-radius: var(--v2-r-sm);
}
.v2 .vdw-msg.user .vdw-msg-bubble {
  background: var(--v2-brand-tint);
  border-bottom-right-radius: var(--v2-r-sm);
  box-shadow: none;
}
.v2 .vdw-msg-bubble a { color: var(--v2-brand-ink); }
.v2 .vdw-msg-bubble code, .v2 .vdw-msg-bubble pre {
  background: var(--v2-surface-2); border-radius: var(--v2-r-sm);
}

/* Standing disclaimer at the top of the thread. The coach is not a
   clinician and the screen says so before the first message, not in
   a footnote under the composer. */
.coach-disc {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--v2-surface-2); border-radius: var(--v2-r-md);
  padding: 13px 15px; font-size: var(--v2-fs-label); line-height: var(--v2-lh-loose);
  color: var(--v2-ink-2); margin-bottom: 6px;
}
.coach-disc i { font-size: 16px; color: var(--v2-ink-3); flex-shrink: 0; margin-top: 1px; }

/* ─── Suggestion chips ──────────────────────────────────────── */
.v2 .vdw-suggestion {
  background: var(--v2-surface); color: var(--v2-ink);
  border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-pill);
  font-family: var(--v2-font); font-size: var(--v2-fs-caption); font-weight: 600;
  padding: 10px 15px;
}
.v2 .vdw-suggestion:active { background: var(--v2-surface-2); }
.v2 .vdw-empty-state { color: var(--v2-ink-2); font-family: var(--v2-font); }

/* ─── Composer ──────────────────────────────────────────────── */
.v2 .vdw-input-shell {
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--v2-line);
}
.v2 .vdw-input-form { gap: 8px; }
.v2 .vdw-input {
  border-radius: var(--v2-r-lg);
  border: 1.5px solid var(--v2-line-2);
  background: var(--v2-surface);
  font-family: var(--v2-font);
  /* Below 16px iOS zooms the page when the field takes focus. The old
     44px min-height was sized for 14px text and clips a 16px line, so
     it grows with the type. */
  font-size: var(--v2-fs-control);
  line-height: var(--v2-lh-body);
  min-height: 52px;
  /* Tight horizontal padding: the composer row is camera + mic + field
     + send, and at 375px the field only gets ~170px. Every pixel of
     padding is a pixel the placeholder cannot use. */
  padding: 14px 12px;
  color: var(--v2-ink);
}
/* Same reason — the two icon buttons are the widest thing that is not
   the field, so they shrink to the 44pt touch minimum and no further. */
.v2 .vdw-attach, .v2 .vdw-mic { width: 44px; height: 44px; flex: 0 0 44px; padding: 0; }
.v2 .vdw-input-form { gap: 6px; }
.v2 .vdw-input:focus { border-color: var(--v2-brand-strong); outline: none; }
/* The prototype's send is a round icon button, not a labelled pill —
   and at 375px, with the camera and mic on the same row, the pill left
   the field too narrow for even a short placeholder to fit on one line.
   coach-v2.js swaps the visible word for a ti-arrow-up element and moves
   the word into an .mp-sr-only span, so the accessible name is unchanged
   and no icon codepoint is hard-coded here. */
.v2 .vdw-send {
  background: var(--v2-brand-btn); color: #fff; border: none;
  border-radius: var(--v2-r-pill); font-family: var(--v2-font);
  width: 44px; height: 44px; flex: 0 0 44px;
  padding: 0; display: grid; place-items: center;
}
.v2 .vdw-send i { font-size: 21px; }
.v2 .vdw-send[disabled] { opacity: .45; }
.v2 .vdw-attach, .v2 .vdw-mic {
  background: var(--v2-surface-2); color: var(--v2-ink-2);
  border: none; border-radius: var(--v2-r-pill);
}
.v2 .vdw-input-disclaimer { color: var(--v2-ink-3); font-size: var(--v2-fs-micro); }

/* ─── Sidebar / modals / banners ────────────────────────────── */
.v2 .vdw-sidebar { background: var(--v2-surface); border-right: 1px solid var(--v2-line); }
.v2 .vdw-new-chat-btn {
  background: var(--v2-brand-btn); color: #fff; border: none;
  border-radius: var(--v2-r-md); font-family: var(--v2-font); font-weight: 600;
}
.v2 .vdw-modal {
  background: var(--v2-surface); border-radius: var(--v2-r-xl);
  color: var(--v2-ink); font-family: var(--v2-font);
}
.v2 .vdw-modal-cta {
  background: var(--v2-brand-btn); color: #fff; border: none;
  border-radius: var(--v2-r-md); font-weight: 700; font-family: var(--v2-font);
}
.v2 .vdw-modal-secondary {
  background: var(--v2-surface-2); color: var(--v2-ink); border: none;
  border-radius: var(--v2-r-md); font-family: var(--v2-font);
}
.v2 .vdw-sub-bar, .v2 .vdw-meal-upload-card {
  background: var(--v2-surface); border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-lg); font-family: var(--v2-font);
}
.v2 .vdw-progress-fill { background: var(--v2-brand); }