.chat-launcher { position: fixed; z-index: 30; right: 28px; bottom: 26px; display: flex; align-items: center; gap: 10px; padding: 15px 20px; border: 0; border-radius: 100px; background: var(--ink); color: #fff; box-shadow: 0 8px 25px rgba(0, 0, 0, .24); font: 600 13px "Noto Sans JP", sans-serif; cursor: pointer; }
.chat-launcher:hover { background: #163c57; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); transform: translateY(-4px); }
.chat-icon { padding: 5px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 8px; letter-spacing: 1px; }
.chat-panel { position: fixed; z-index: 40; right: 26px; bottom: 25px; display: flex; flex-direction: column; width: min(375px, calc(100vw - 32px)); max-height: calc(100vh - 50px); overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 16px 55px rgba(0, 0, 0, .28); opacity: 0; visibility: hidden; transform: translateY(20px) scale(.96); transition: .25s; }
.chat-panel.is-open { opacity: 1; visibility: visible; transform: none; }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; background: var(--ink); color: #fff; }
.chat-head small, .chat-head strong { display: block; }
.chat-head small { color: var(--accent); font: 500 10px Outfit, sans-serif; letter-spacing: .12em; }
.chat-head strong { margin-top: 3px; font-size: 14px; }
.chat-close { border: 0; background: none; color: #fff; font-size: 29px; line-height: 1; cursor: pointer; }
.chat-close:hover { color: var(--accent); transform: rotate(90deg); }
.chat-body { flex: 1; min-height: 0; padding: 18px 20px; overflow-y: auto; background: #eaf4f7; }
.chat-conversation { display: grid; gap: 10px; }
.chat-controls { flex: 0 0 auto; overflow: hidden; background: #eaf4f7; transition: height .32s cubic-bezier(.22, .8, .28, 1); will-change: height; }
.chat-controls.is-changing .chat-control-content { animation: chatControlReveal .32s ease both; }
.chat-controls.is-shrinking { position: relative; }
.chat-controls.is-shrinking .chat-control-content { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; box-sizing: border-box; }
.chat-controls.is-shrinking.is-changing .chat-control-content { animation: none; }
.chat-panel.is-transitioning .chat-controls { pointer-events: none; }
@keyframes chatControlReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.chat-bubble { width: fit-content; max-width: 88%; padding: 11px 14px; border-radius: 16px; font-size: 13px; line-height: 1.7; white-space: pre-line; box-shadow: 0 2px 7px rgba(0, 0, 0, .05); }
.chat-bubble--server { justify-self: start; border-radius: 3px 16px 16px; background: #fff; color: #284252; }
.chat-bubble--user { justify-self: end; border-radius: 16px 3px 16px 16px; background: #79c8df; color: #153347; }
.chat-option-panel { flex: 0 0 auto; padding: 14px 20px; border-top: 1px solid #c7dce5; background: #f8fcfd; box-shadow: 0 -3px 10px rgba(41, 85, 103, .06); }
.chat-option-title { margin: 0 0 10px; color: #426b7d; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.chat-choices { display: grid; gap: 7px; }
.chat-choice { padding: 10px 12px; border: 1px solid #b9d7e2; border-radius: 7px; background: rgba(255, 255, 255, .9); color: var(--ink); text-align: left; font: 600 13px "Noto Sans JP", sans-serif; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s, transform .2s; }
.chat-choice:hover, .chat-choice:focus-visible { border-color: #4d9fbb; background: #fff; color: #236b84; transform: translateX(3px); }
.chat-choice::after { content: "›"; float: right; color: #4d9fbb; font-size: 18px; line-height: .8; }
.chat-choice:disabled { cursor: wait; opacity: .65; }
.chat-helper-actions { flex: 0 0 auto; display: grid; gap: 7px; padding: 0 20px 10px; background: #f8fcfd; }
.chat-helper-actions:has(.chat-reset[hidden]):has(.chat-contact-button[hidden]) { display: none; }
.chat-reset, .chat-contact-button { padding: 8px 3px; border: 0; background: transparent; color: #426b7d; text-align: left; font: 600 12px "Noto Sans JP", sans-serif; cursor: pointer; }
.chat-reset::before { content: "↺ "; }
.chat-contact-button { color: #236b84; }
.chat-contact-button::before { content: "✉ "; }
.chat-reset:hover, .chat-reset:focus-visible, .chat-contact-button:hover, .chat-contact-button:focus-visible { color: var(--ink); text-decoration: underline; }
.chat-form { flex: 0 0 auto; padding: 18px 20px; border-top: 1px solid #d7e7ed; }
.chat-form label { display: block; margin-bottom: 11px; font-size: 12px; font-weight: 700; }
.form-policy { margin: 4px 0 10px; color: #52606c; font-size: 12px; line-height: 1.6; }
.form-policy a { color: #276f8a; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.chat-form input, .chat-form textarea { display: block; width: 100%; margin-top: 5px; padding: 10px; border: 1px solid #c9dce4; border-radius: 3px; font-size: 14px; }
.chat-form input:hover, .chat-form textarea:hover { border-color: #75b9cf; }
.chat-form input:focus, .chat-form textarea:focus { border-color: #248caf; }
.chat-form textarea { height: 62px; resize: vertical; }
.chat-form button { width: 100%; padding: 12px; border: 0; background: var(--accent); font-weight: 700; cursor: pointer; }
.chat-form button:hover { background: #4fc4e7; box-shadow: 0 5px 12px rgba(36, 140, 175, .25); transform: translateY(-2px); }
.chat-form button span { float: right; }
.form-status { margin: 12px 0 0; font-size: 13px; line-height: 1.6; }
.chat-backdrop { display: none; }