/* Shared styling for the AI-chat design variants (v1–v4). */

body.vpage {
    min-height: 100vh;
    color: #fff;
    background:
        radial-gradient(ellipse at 18% -5%, rgba(138,50,138,0.28), transparent 55%),
        radial-gradient(ellipse at 85% 25%, rgba(0,194,203,0.14), transparent 52%),
        radial-gradient(ellipse at 50% 110%, rgba(74,45,107,0.35), transparent 60%),
        linear-gradient(180deg, var(--purple-deep) 0%, #1d0f3b 52%, var(--purple-dark) 100%);
    background-attachment: fixed;
}

/* accent palette (apply a-<accent> to chips/tiles/cards) */
.a-cyan    { --ac:#00C2CB; --ac2:#21e6f0; --acs:rgba(0,194,203,0.5); }
.a-magenta { --ac:#e0a5d6; --ac2:#C77DBA; --acs:rgba(199,125,186,0.55); }
.a-gold    { --ac:#f0cf6b; --ac2:#e8c547; --acs:rgba(232,197,71,0.55); }
.a-blue    { --ac:#74b3ff; --ac2:#4a90d9; --acs:rgba(74,144,217,0.55); }
.a-violet  { --ac:#b794f6; --ac2:#7c3aed; --acs:rgba(124,58,237,0.55); }
.a-mint    { --ac:#5eead4; --ac2:#2dd4bf; --acs:rgba(94,234,212,0.55); }

/* variant switcher */
.variant-switch {
    position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 3000;
    display: flex; align-items: center; gap: 3px; padding: 5px;
    border-radius: 999px; background: rgba(18,10,34,0.72);
    border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(16px);
    font-family: var(--font-heading); font-size: 0.78rem; box-shadow: 0 10px 34px rgba(0,0,0,0.4);
}
.variant-switch .vs-label { color: rgba(255,255,255,0.42); padding: 0 8px; text-transform: uppercase; letter-spacing: 1px; font-size: 0.62rem; }
.variant-switch a { color: rgba(255,255,255,0.7); padding: 6px 13px; border-radius: 999px; transition: all 0.2s ease; }
.variant-switch a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.variant-switch a.is-active { color: var(--purple-deep); background: var(--cyan); font-weight: 700; }

/* header sits above content */
.v-header { position: relative; z-index: 20; padding: var(--space-lg) var(--space-2xl); }

/* generic chip */
.v-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 999px; cursor: pointer;
    font-family: var(--font-heading); font-weight: 600; font-size: 0.86rem; color: #fff;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(8px); transition: all var(--transition-normal);
}
.v-chip .material-icons-round { font-size: 1.05rem; color: var(--ac, #fff); }
.v-chip:hover { transform: translateY(-2px); border-color: var(--acs, rgba(255,255,255,0.4)); background: rgba(255,255,255,0.1); box-shadow: 0 8px 22px -8px var(--acs, rgba(0,0,0,0.4)); }
.v-chip.is-selected { border-color: var(--ac); box-shadow: 0 0 0 2px var(--acs), 0 0 22px -4px var(--acs); background: rgba(255,255,255,0.12); }

/* service chip = filled accent */
.v-chip--svc { background: linear-gradient(135deg, var(--ac2), var(--ac)); border-color: transparent; color: #11071f; }
.v-chip--svc .material-icons-round { color: #11071f; }
.v-chip--svc:hover { color: #11071f; }

.v-dock { margin: 0 auto; }

/* first-chat lead gate (inside an assistant bubble) */
.message-bubble.lead-gate { max-width: 340px; width: 100%; }
.lead-gate p { margin: 0 0 12px; }
.lead-form { display: flex; flex-direction: column; gap: 8px; }
.lead-input { width: 100%; padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); color: #fff; font-family: var(--font-body); font-size: 0.92rem; outline: none; transition: all 0.2s; }
.lead-input::placeholder { color: rgba(255,255,255,0.4); }
.lead-input:focus { border-color: var(--cyan); background: rgba(255,255,255,0.1); box-shadow: 0 0 0 3px rgba(0,194,203,0.15); }
.lead-input:disabled { opacity: 0.6; }
.lead-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 2px; padding: 11px 18px; border: none; border-radius: 12px; cursor: pointer; font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; color: var(--purple-deep); background: var(--cyan); transition: all 0.2s; }
.lead-btn:hover { background: var(--cyan-light); box-shadow: 0 0 22px rgba(0,194,203,0.35); }
.lead-btn:disabled { opacity: 0.6; cursor: default; }
.lead-btn .material-icons-round { font-size: 1.1rem; }
.lead-error { color: #ff9aa6; font-size: 0.82rem; min-height: 1em; }