/* KNK WebEditor サポートチャットの最小限の見た目。色・大きさはサイトの CSS（.knk-chat …）で上書きしてよい */
.knk-chat { --knk-chat-bot: #f1f3f5; --knk-chat-user: #2b5fd9; --knk-chat-user-fg: #fff; --knk-chat-line: #d9dde3; --knk-chat-accent: #2b5fd9;
  display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; width: 100%; max-width: 720px; margin: 0 auto; color: inherit; font-size: 16px; line-height: 1.6; }
.knk-chat *, .knk-chat *::before, .knk-chat *::after { box-sizing: border-box; }
.knk-chat-log { display: flex; flex-direction: column; gap: 10px; min-height: 240px; max-height: 60vh; overflow-y: auto; padding: 16px; border: 1px solid var(--knk-chat-line); border-radius: 12px; background: #fff; scroll-behavior: smooth; }
.knk-chat-msg { display: flex; max-width: 88%; }
.knk-chat-msg-bot { align-self: flex-start; }
.knk-chat-msg-user { align-self: flex-end; }
.knk-chat-bubble { padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.knk-chat-msg-bot .knk-chat-bubble { background: var(--knk-chat-bot); border-bottom-left-radius: 4px; }
.knk-chat-msg-user .knk-chat-bubble { background: var(--knk-chat-user); color: var(--knk-chat-user-fg); border-bottom-right-radius: 4px; }
.knk-chat-bubble a { color: inherit; text-decoration: underline; }
.knk-chat-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.knk-chat-links a { display: inline-block; padding: 6px 12px; border: 1px solid var(--knk-chat-accent); border-radius: 999px; background: #fff; color: var(--knk-chat-accent); font-size: 14px; text-decoration: none; }
.knk-chat-image { display: block; max-width: 100%; height: auto; margin: 10px 0 0; border-radius: 8px; }
.knk-chat-results { margin: 8px 0 0; padding-left: 18px; }
.knk-chat-results a { color: var(--knk-chat-accent); }
.knk-chat-thinking { display: inline-flex; gap: 5px; align-items: center; min-height: 20px; }
.knk-chat-thinking i { width: 7px; height: 7px; border-radius: 50%; background: #888; animation: knk-chat-blink 1.1s infinite ease-in-out; }
.knk-chat-thinking i:nth-child(2) { animation-delay: .2s; }
.knk-chat-thinking i:nth-child(3) { animation-delay: .4s; }
@keyframes knk-chat-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.knk-chat-options { display: flex; flex-wrap: wrap; gap: 8px; min-height: 0; }
.knk-chat-options:empty { display: none; }
.knk-chat-option { padding: 8px 14px; border: 1px solid var(--knk-chat-accent); border-radius: 999px; background: #fff; color: var(--knk-chat-accent); font: inherit; font-size: 14px; line-height: 1.4; cursor: pointer; }
.knk-chat-option:hover, .knk-chat-option:focus-visible { background: var(--knk-chat-accent); color: #fff; }
.knk-chat-option-form { border-style: dashed; }
.knk-chat-form { display: flex; gap: 8px; }
.knk-chat-input { flex: 1 1 auto; min-width: 0; padding: 10px 14px; border: 1px solid var(--knk-chat-line); border-radius: 999px; font: inherit; font-size: 16px; background: #fff; color: inherit; }
.knk-chat-input:focus { outline: 2px solid var(--knk-chat-accent); outline-offset: 1px; }
.knk-chat-send { flex: none; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--knk-chat-accent); color: #fff; font: inherit; font-size: 15px; cursor: pointer; }
.knk-chat-send:disabled, .knk-chat-input:disabled { opacity: .5; cursor: not-allowed; }
.knk-chat-note, .knk-chat-noscript { margin: 0; font-size: 12.5px; color: #666; }
.knk-chat-stopped-message { margin: 0; padding: 16px; border: 1px dashed #bbb; border-radius: 12px; color: #555; text-align: center; }
.knk-chat-error { margin: 0; color: #b00020; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .knk-chat-log { scroll-behavior: auto; } .knk-chat-thinking i { animation: none; opacity: .6; } }