/* Brand styling for the SaaS chat widget (.cw-*). The widget injects its own small, system-font styles;
   these rules are more specific, so they win. Colours from the Canva WMC_Brand_Kit. */
.cw-root { font-family: "DM Sans", sans-serif; }
.cw-root .cw-name { font-family: "Space Grotesk", sans-serif; font-size: 16px; font-weight: 700; }
.cw-root .cw-status { font-size: 12px; }
.cw-root .cw-messages { background: #F4ECDC; }
.cw-root .cw-msg { font-size: 15px; line-height: 1.55; }
.cw-root .cw-msg-bot { background: #fff; color: #201002; border-color: #E2AA6B; }
.cw-root .cw-msg-time { font-size: 11px; }
.cw-root .cw-input, .cw-root .cw-prechat input { font-family: inherit; font-size: 15px; color: #201002; }
.cw-root .cw-input:focus, .cw-root .cw-prechat input:focus { border-color: #C35724; }
.cw-root .cw-prechat label { font-size: 13px; color: #4F494C; }
.cw-root .cw-prechat-btn { font-family: inherit; font-size: 15px; }
.cw-root .cw-btn { font-family: inherit; font-size: 13px; border-color: #E2AA6B; color: #201002; }
.cw-root .cw-prompt { font-family: inherit; font-size: 14px; color: #201002; }

/* Voice input button added by /js/chat-widget-mic.js */
.cw-root .cw-mic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px; border: 1px solid #E2AA6B; background: #fff; color: #201002; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cw-root .cw-mic svg { width: 18px; height: 18px; }
.cw-root .cw-mic.on { background: #C35724; border-color: #C35724; color: #fff; }

/* Desktop: a larger, easier to read panel */
@media (min-width: 768px) {
  .cw-root .cw-box { width: 420px; height: min(640px, calc(100vh - 110px)); }
  .cw-root .cw-avatar { width: 42px; height: 42px; border-radius: 21px; }
  .cw-root .cw-header { padding: 16px 18px; }
  .cw-root .cw-messages { padding: 18px; gap: 12px; }
  .cw-root .cw-msg { font-size: 16px; max-width: 85%; }
  .cw-root .cw-input-bar { padding: 12px 14px; }
  .cw-root .cw-input { font-size: 16px; padding: 10px 14px; }
  .cw-root .cw-send { width: 42px; height: 42px; }
  .cw-root .cw-mic { width: 42px; height: 42px; }
}