/* AI chat page (development hosts only). Uses the shared colour variables. */
.chat-box { max-width: 100%; width: 100%; background: var(--bg-card); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden; }
.chat-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.chat-head span { color: var(--text-gray); font-size: .9rem; }
.chat-reset { background: transparent; color: var(--text-light); border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius-full); padding: .35rem .9rem; cursor: pointer; font: inherit; font-size: .85rem; }
.chat-reset:hover, .chat-reset:focus-visible { border-color: var(--primary); color: var(--primary); }
.chat-log { height: min(60vh, 560px); min-height: 320px; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.chat-msg { max-width: 88%; padding: .7rem 1rem; border-radius: var(--radius-md); line-height: 1.55; overflow-wrap: anywhere; }
.chat-msg p { margin: 0 0 .5rem; }
.chat-msg p:last-child { margin-bottom: 0; }
.chat-msg ul { margin: .25rem 0 .5rem 1.2rem; padding: 0; }
.chat-msg a { color: var(--secondary); }
.chat-msg.bot { align-self: flex-start; background: rgba(255,255,255,.06); }
.chat-msg.user { align-self: flex-end; background: var(--primary-dark); color: #fff; }
.chat-msg.error { align-self: flex-start; background: rgba(220,70,70,.18); border: 1px solid rgba(220,70,70,.5); }
.chat-sources { margin-top: .5rem; font-size: .82rem; color: var(--text-gray); }
.chat-sources a { margin-right: .75rem; }
.chat-loading span { display: inline-block; width: .45rem; height: .45rem; margin: 0 .15rem; background: var(--text-gray); border-radius: 50%; animation: chatDot 1.2s infinite ease-in-out; }
.chat-loading span:nth-child(2) { animation-delay: .2s; }
.chat-loading span:nth-child(3) { animation-delay: .4s; }
@keyframes chatDot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.chat-form { display: flex; gap: .6rem; padding: .75rem 1rem; border-top: 1px solid rgba(255,255,255,.08); }
.chat-form textarea { flex: 1; min-height: 44px; max-height: 140px; resize: vertical; background: var(--bg-dark); color: var(--text-light); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-md); padding: .65rem .8rem; font: inherit; }
.chat-form textarea:focus-visible { outline: 2px solid var(--primary); }
.chat-send { background: var(--gradient); color: #fff; border: 0; border-radius: var(--radius-md); padding: 0 1.3rem; min-height: 44px; font: inherit; font-weight: 600; cursor: pointer; }
.chat-send:disabled { opacity: .5; cursor: not-allowed; }
.chat-note { color: var(--text-gray); font-size: .85rem; margin-top: .75rem; }
@media (max-width: 600px) { .chat-msg { max-width: 96%; } .chat-form { flex-direction: column; } .chat-send { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .chat-loading span { animation: none; opacity: .7; } }
.chat-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.chat-form textarea:disabled { opacity: .6; cursor: not-allowed; }
.chat-head strong { color: var(--primary); }