.font-serif-display { font-family: 'Cormorant Garamond', Georgia, serif; }
.font-sans-body { font-family: 'Montserrat', system-ui, sans-serif; }

/* ============================================================
   Imagine Studio — the "Fern" chat window.
   Scoped under .cs-window. Colours resolve from the account's
   Theme (--color-primary, --color-base-100, …) so each client's
   branding flows through the mockup's shapes and treatment.
   ============================================================ */
.cs-window {
  --cs-line: color-mix(in srgb, var(--color-base-content) 12%, transparent);
  --color-accent: #C4531A;
  --color-accent-content: #ffffff;
}

/* Full-bleed paper surface; the conversation sits in a centred, readable column. */
.cs-window { background: color-mix(in srgb, #ffffff 72%, var(--color-base-100)); }
.cs-chat-head, .cs-scroll { width: 100%; margin-inline: auto; }

/* Never let a wide child (e.g. Google's Places widget) push past the viewport. */
.cs-window, .cs-chat-head, .cs-scroll { min-width: 0; }
.cs-window gmp-place-autocomplete { min-width: 0 !important; width: 100%; max-width: 100%; }
.cs-brand { min-width: 0; }
.cs-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42vw; }

/* Fern — the concierge header */
.cs-chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--cs-line);
}
.cs-ava {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 62%, #000));
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--color-primary) 70%, transparent);
}
.cs-ava svg { width: 21px; height: 21px; }
.cs-who { line-height: 1.2; min-width: 0; }
.cs-who strong { display: block; font-weight: 700; font-size: 15px; color: var(--color-base-content); }
.cs-brand { margin-left: auto; display: flex; align-items: center; flex: 0 0 auto; }
.cs-brand img { max-height: 26px; width: auto; }
.cs-brand span { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--color-base-content-muted); }

.cs-scroll { padding: 22px 18px; }

/* message bubbles — mockup shapes over DaisyUI's .chat classes */
.cs-window .chat-bubble { border-radius: 16px; font-size: 15px; line-height: 1.45; box-shadow: none; }
.cs-window .chat-bubble::before { display: none; }            /* drop DaisyUI's speech tail */
.cs-window .chat-start .chat-bubble { border-bottom-left-radius: 5px; }
.cs-window .chat-end   .chat-bubble { border-bottom-right-radius: 5px; }
.cs-window .chat-start .chat-bubble:not(.p-1) {
  background: #ffffff; color: var(--color-base-content);
  border: 1px solid var(--cs-line);
  box-shadow: 0 1px 2px rgba(20, 40, 30, .05);
}
.cs-window .chat-end .chat-bubble:not(.p-1) {
  background: linear-gradient(160deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 72%, #000));
  color: var(--color-primary-content);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--color-primary) 55%, transparent);
}

/* in-market confirmation card — a stylised coverage map with a pulsing pin */
.cs-inmarket {
  display: flex; align-items: center; gap: 12px;
  background: #ffffff; border: 1px solid var(--cs-line); border-radius: 16px;
  padding: 11px; box-shadow: 0 8px 20px -12px rgba(20, 40, 30, .5);
}
.cs-inmarket .map {
  width: 60px; height: 60px; flex: 0 0 auto;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--cs-line);
}
.cs-inmarket .map svg { width: 100%; height: 100%; display: block; }
.cs-inmarket .txt b {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: var(--color-base-content); margin-bottom: 3px;
}
.cs-inmarket .txt b svg { width: 15px; height: 15px; color: var(--color-primary); flex: 0 0 auto; }
.cs-inmarket .txt span { font-size: 12.5px; line-height: 1.4; color: var(--color-base-content-muted); }
.cs-pulse { transform-origin: 52px 52px; animation: cs-ping 2.6s cubic-bezier(.22, .61, .36, 1) infinite; }
@keyframes cs-ping {
  0%   { transform: scale(.55); opacity: .75; }
  70%  { opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* chosen-option pills — the resting look of a "picked" chip, echoing a visitor answer */
.cs-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 100%; }
.cs-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  background: var(--color-primary); color: var(--color-primary-content);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--color-primary) 55%, transparent);
}
.cs-pill svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* contact capture — white card with the "where should we send it?" prompt */
.cs-capture {
  width: 100%; background: #ffffff; border: 1px solid var(--cs-line);
  border-radius: 16px; padding: 15px; box-shadow: 0 8px 22px -12px rgba(20, 40, 30, .5);
}
.cs-capture .q { margin: 0 0 10px; font-size: 13.5px; color: var(--color-base-content-muted); }
.cs-capture .cs-cfield {
  display: block; width: 100%; margin-bottom: 10px;
  border: 1.5px solid color-mix(in srgb, var(--color-base-content) 16%, transparent);
  border-radius: 11px; padding: 11px 12px; font-size: 14px;
  color: var(--color-base-content); background: #ffffff;
}
.cs-capture .cs-cfield::placeholder { color: var(--color-base-content-muted); }
.cs-capture .cs-or {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-base-content-muted);
}
.cs-capture .cs-or::before,
.cs-capture .cs-or::after { content: ""; flex: 1; height: 1px; background: var(--cs-line); }
.cs-capture .cs-cfield:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.cs-capture .cs-go {
  width: 100%; margin-top: 2px; padding: 12px; border: 0; border-radius: 11px;
  font-weight: 700; font-size: 14.5px; color: var(--color-accent-content); cursor: pointer;
  background: linear-gradient(160deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 72%, #000));
  transition: filter .2s, opacity .2s;
}
.cs-capture .cs-go:hover:not(:disabled) { filter: brightness(1.06); }
.cs-capture .cs-go:disabled { opacity: .5; cursor: not-allowed; }

/* Design Vision Book teaser card — a fanned booklet beside its contents */
.cs-book {
  width: 100%; display: flex; align-items: center; gap: 16px;
  background: #ffffff; border: 1px solid var(--cs-line); border-radius: 16px;
  padding: 14px; box-shadow: 0 10px 26px -14px rgba(20, 40, 30, .5);
}
.cs-fan { position: relative; width: 104px; height: 120px; flex: 0 0 auto; }
.cs-book .cs-page {
  position: absolute; left: 14px; top: 8px; width: 74px; height: 100px;
  border-radius: 6px; background: #fff; border: 1px solid var(--cs-line);
  box-shadow: 0 4px 10px -4px rgba(20, 40, 30, .4); transform-origin: bottom left;
}
.cs-book .cs-page.p1 { transform: rotate(-13deg) translate(-9px, -2px); }
.cs-book .cs-page.p2 { transform: rotate(-6deg) translate(-2px, -3px); }
.cs-book .cs-page.p3 { transform: rotate(2deg); }
.cs-book .cs-page.p4 { transform: rotate(9deg) translate(7px, -1px); }
.cs-cover {
  position: absolute; left: 14px; top: 8px; width: 74px; height: 100px; border-radius: 6px; z-index: 5;
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-primary) 78%, #000), color-mix(in srgb, var(--color-primary) 60%, #000));
  box-shadow: 0 8px 18px -6px rgba(20, 40, 30, .6); display: grid; place-items: center; transform: rotate(2deg);
}
.cs-cover svg { width: 30px; height: 30px; opacity: .92; }
.cs-book .meta { flex: 1; min-width: 0; }
.cs-book .meta b {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 17px;
  color: var(--color-base-content); display: block; margin-bottom: 5px;
}
.cs-book .meta ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cs-book .meta li { font-size: 12.5px; color: var(--color-base-content-muted); display: flex; align-items: center; gap: 7px; }
.cs-book .meta li svg { width: 13px; height: 13px; color: var(--color-primary); flex: 0 0 auto; }
.cs-book .meta .cs-book-link {
  display: inline-block; margin-top: 9px; font-size: 12.5px; font-weight: 600;
  color: var(--color-primary); text-decoration: none;
}
.cs-book .meta .cs-book-link:hover { text-decoration: underline; }

/* photo upload — match the standard green (primary) used on buttons & chips,
   so the "Choose file" button reads as an on-brand action, not default grey. */
.cs-window .file-input { border-color: var(--color-primary); }
.cs-window .file-input:focus,
.cs-window .file-input:focus-within {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  outline-offset: 2px;
}
.cs-window .file-input::file-selector-button {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
  border: none;
  font-weight: 600;
}

/* selectable chips — reveal a check when picked */
.cs-window .cs-chip::after {
  content: ""; position: absolute; right: 13px; top: 50%;
  width: 15px; height: 15px; opacity: 0;
  transform: translateY(-50%) scale(.4);
  transition: opacity .25s ease, transform .25s cubic-bezier(.2, .9, .28, 1.15);
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.cs-window .cs-chip:has(:checked)::after { opacity: 1; transform: translateY(-50%) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .cs-pulse { animation: none; }
  .cs-window .cs-chip::after { transition: none; }
}