/* Chat v úvodu stránky */
.chat { margin-top: clamp(32px, 5vw, 56px); max-width: 640px; display: grid; gap: 12px; position: relative; }

.chat-log {
    display: flex; flex-direction: column; gap: 10px;
    max-height: min(320px, 45vh); overflow-y: auto;
    padding: 24px 2px 6px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
    overscroll-behavior: contain;
}
.chat-log[hidden] { display: none; }
.chat-log > * { flex-shrink: 0; }

.msg { max-width: 85%; padding: 11px 16px; border-radius: 20px; font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; animation: msg-in .2s ease; }
.msg.bot { align-self: flex-start; background: var(--soft, #f6f6f6); border-bottom-left-radius: 6px; }
.msg.user { align-self: flex-end; background: var(--pink, #eb7792); color: #fff; border-bottom-right-radius: 6px; }
.msg p + p { margin-top: 6px; }
.msg strong { color: inherit; }
.msg.error { background: #fdf0f0; }
@keyframes msg-in { from { opacity: 0; transform: translateY(4px); } }

.msg-links { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; }
.msg-links a { display: inline-block; text-decoration: none; background: var(--pink, #eb7792); color: #fff; padding: 8px 16px; border-radius: 999px; font-size: .92rem; transition: background .2s; }
.msg-links a:hover { background: var(--pink-dark, #d6627e); }

.typing { display: flex; gap: 4px; padding: 15px 16px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #999; animation: dot 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

.chat-form {
    display: flex; align-items: center; gap: 8px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 999px;
    padding: 6px 6px 6px 22px;
    transition: border-color .2s, box-shadow .2s;
}
.chat-form:focus-within { border-color: var(--pink, #eb7792); box-shadow: 0 0 0 4px rgba(235, 119, 146, .15); }
.chat-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1.05rem; color: inherit; padding: 10px 0; }
.chat-form input::placeholder { color: #9a9a9a; }
.chat-form button { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--pink, #eb7792); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, opacity .2s; }
.chat-form button svg { width: 20px; height: 20px; }
.chat-form button:disabled { opacity: .4; cursor: default; }
.chat-form button:not(:disabled):hover { background: var(--pink-dark, #d6627e); }

.chat-suggest { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-suggest:empty { display: none; }
.chat-suggest button { border: 1px solid #dcdcdc; background: rgba(255, 255, 255, .85); color: var(--ink, #222); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .9rem; cursor: pointer; transition: border-color .2s, color .2s; }
.chat-suggest button:hover { border-color: var(--pink, #eb7792); color: var(--pink-dark, #d6627e); }

.chat-note { font-size: .78rem; color: var(--muted, #6f6f6f); padding-left: 4px; }

@media (prefers-reduced-motion: reduce) { .msg, .typing i { animation: none; } }