.ttchat { --tt-color: #0b5fff; position: fixed; right: 20px; bottom: 20px; z-index: 99999; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", "Noto Sans Thai", Tahoma, sans-serif; }
.ttchat *, .ttchat *::before, .ttchat *::after { box-sizing: border-box; }
.ttchat-fab { width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--tt-color); color: #fff; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; margin-left: auto; }
.ttchat-fab:hover { filter: brightness(1.08); }
.ttchat-panel { width: 370px; height: 540px; max-height: calc(100vh - 110px); background: #fff; color: #1f2328; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden; margin-bottom: 12px; }
.ttchat-panel[hidden] { display: none; }
.ttchat-head { background: var(--tt-color); color: #fff; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.ttchat-icon { background: transparent; border: 0; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; opacity: .9; }
.ttchat-icon:hover { opacity: 1; }
.ttchat-body { flex: 1; overflow-y: auto; padding: 14px; background: #f6f7f9; display: flex; flex-direction: column; gap: 8px; }
.ttchat-msg { max-width: 85%; padding: 9px 12px; border-radius: 12px; word-wrap: break-word; white-space: normal; }
.ttchat-msg p { margin: 0 0 6px; } .ttchat-msg p:last-child { margin-bottom: 0; }
.ttchat-msg ul { margin: 4px 0; padding-left: 18px; }
.ttchat-msg a { color: inherit; text-decoration: underline; }
.ttchat-user { align-self: flex-end; background: var(--tt-color); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.ttchat-assistant { align-self: flex-start; background: #fff; border: 1px solid #e3e6ea; border-bottom-left-radius: 4px; }
.ttchat-error { border-color: #f1b4b4; background: #fff5f5; color: #a31515; }
.ttchat-typing { display: flex; gap: 4px; padding: 12px 14px; }
.ttchat-typing span { width: 7px; height: 7px; border-radius: 50%; background: #9aa1a9; animation: ttchat-dot 1.2s infinite ease-in-out; }
.ttchat-typing span:nth-child(2) { animation-delay: .15s; } .ttchat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ttchat-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ttchat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #e3e6ea; background: #fff; }
.ttchat-input { flex: 1; resize: none; border: 1px solid #cfd4da; border-radius: 10px; padding: 8px 10px; font: inherit; max-height: 120px; color: #1f2328; background: #fff; }
.ttchat-input:focus { outline: 2px solid var(--tt-color); outline-offset: -1px; border-color: transparent; }
.ttchat-send { border: 0; border-radius: 10px; background: var(--tt-color); color: #fff; padding: 0 16px; font: inherit; font-weight: 600; cursor: pointer; }
.ttchat-send:disabled { opacity: .5; cursor: default; }
@media (max-width: 480px) {
  .ttchat { right: 12px; bottom: 12px; left: 12px; }
  .ttchat-panel { width: 100%; height: calc(100vh - 100px); }
}