/* Movyr quote chat (static/js/movyr-chat.js). Without JS the classic form shows. */
.qf { --qf-blue: #03a9f4; --qf-ink: #0f0a0a; --qf-muted: #5a6572; --qf-line: rgba(15,10,10,.14); }
.qf .qf-chat, .qf .qf-switch { display: none; }
.qf.qf-view-chat .qf-chat { display: flex; }
.qf.qf-view-chat form[action="/quote-submit.php"] { display: none; }
.qf.qf-view-chat .qf-switch, .qf.qf-view-form .qf-switch { display: inline-flex; }

/* Chat | Form switch */
.qf-switch { margin: 0 0 16px; padding: 3px; border: 1px solid var(--qf-line); border-radius: 999px; background: #fff; }
.qf-switch button { border: 0; background: transparent; color: var(--qf-muted); font-weight: 700; font-size: 13px;
                    padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.qf-switch button i { margin-right: 6px; }
.qf-switch button[aria-pressed="true"] { background: var(--qf-ink); color: #fff; }
.qf-switch button:focus-visible { outline: 2px solid var(--qf-blue); outline-offset: 2px; }

/* Chat panel */
.qf-chat { flex-direction: column; border: 1px solid var(--qf-line); border-radius: 14px; background: #fff; overflow: hidden;
           box-shadow: 0 10px 30px rgba(15,10,10,.08); }
.qf-log { height: 400px; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 8px;
          scroll-behavior: smooth; background: linear-gradient(#fff, #f6f9fc); }
.qf-msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; white-space: pre-line;
          animation: qf-in .22s ease-out both; }
.qf-bot { align-self: flex-start; background: #eef3f8; color: var(--qf-ink); border-bottom-left-radius: 4px; }
.qf-user { align-self: flex-end; background: var(--qf-blue); color: #fff; border-bottom-right-radius: 4px; }
@keyframes qf-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.qf-typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.qf-typing span { width: 7px; height: 7px; border-radius: 50%; background: #9aa7b4; animation: qf-dot 1s infinite ease-in-out; }
.qf-typing span:nth-child(2) { animation-delay: .15s; }
.qf-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes qf-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Suggested answers */
.qf-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 0 6px; animation: qf-in .25s ease-out both; }
.qf-chip { border: 1.5px solid var(--qf-blue); background: #fff; color: #0288d1; font-weight: 700; font-size: 13.5px;
           padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s, transform .1s; }
.qf-chip:hover { background: var(--qf-blue); color: #fff; }
.qf-chip:active { transform: scale(.96); }
.qf-chip:focus-visible { outline: 2px solid var(--qf-ink); outline-offset: 2px; }
.qf-chip-solid { background: var(--qf-blue); color: #fff; }

.qf-widget { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.qf-date { border: 1px solid var(--qf-line); border-radius: 10px; padding: 7px 10px; font-size: 14px; color: var(--qf-ink); }

.qf-summary { margin: 4px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13.5px; }
.qf-summary dt { color: var(--qf-muted); font-weight: 600; }
.qf-summary dd { margin: 0; }

/* Composer */
.qf-compose { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--qf-line); background: #fff; margin: 0; }
.qf-input { flex: 1; min-width: 0; border: 1px solid var(--qf-line); border-radius: 999px; padding: 10px 16px; font-size: 14.5px;
            color: var(--qf-ink); background: #fff; }
.qf-input:focus { outline: none; border-color: var(--qf-blue); box-shadow: 0 0 0 3px rgba(3,169,244,.18); }
.qf-send { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--qf-blue); color: #fff;
           font-size: 16px; cursor: pointer; transition: transform .1s, background .15s; }
.qf-send:hover { background: #0288d1; }
.qf-send:active { transform: scale(.94); }
.qf-note { font-size: 11.5px; color: var(--qf-muted); margin: 8px 2px 0; }

@media (max-width: 575px) {
    .qf-log { height: 360px; }
    .qf-msg { max-width: 92%; }
}
@media (prefers-reduced-motion: reduce) {
    .qf-msg, .qf-chips { animation: none; }
    .qf-typing span { animation: none; }
}