/* ============================================================
   R.C.W. AI Chatbot - v3 (Apple-style)
   R.C.W. teal #026881 · spring physics · glassmorphism
   Easing: cubic-bezier(0.32, 0.72, 0, 1) — Apple spring
   ============================================================ */

#rcwChatbot * { box-sizing: border-box; margin: 0; padding: 0; }

/* System font stack — matches SF Pro on Apple devices */
#rcwChatbot, #rcwChatbot input, #rcwChatbot textarea, #rcwChatbot button {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Inter, Roboto, system-ui, sans-serif;
}

/* ---------- Bubble: spring-morph ---------- */
#rcwChatbot .rcw-bubble {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #026881;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(2, 104, 129, 0.3), 0 1px 4px rgba(0, 0, 0, 0.06);
    z-index: 999999;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.35s ease;
    animation: rcwSpring 2.8s ease-in-out infinite;
}
#rcwChatbot .rcw-bubble:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 28px rgba(2, 104, 129, 0.4), 0 2px 8px rgba(0, 0, 0, 0.08);
    animation-play-state: paused;
}
#rcwChatbot .rcw-bubble:active {
    transform: scale(0.92);
    transition-duration: 0.1s;
}
#rcwChatbot .rcw-bubble svg { width: 26px; height: 26px; }

/* ---------- Window: iOS sheet grow ---------- */
#rcwChatbot .rcw-window {
    position: fixed;
    bottom: 96px;
    right: 28px;
    width: 460px;
    height: 580px;                                            /* fallback */
    height: min(680px, calc(100vh - 128px));
    height: min(680px, calc(100dvh - 128px));
    max-height: 680px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.06);
    z-index: 999998;
    display: none;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    transition: width 0.32s cubic-bezier(0.32, 0.72, 0, 1), height 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
/* V3.10: expanded reading mode (maximize toggle in the header, desktop only) */
@media (min-width: 481px) {
    #rcwChatbot .rcw-window.max {
        width: min(920px, calc(100vw - 56px));
        height: min(860px, calc(100vh - 128px));
        height: min(860px, calc(100dvh - 128px));
        max-height: 860px;
    }
}
#rcwChatbot .rcw-window.open {
    display: flex;
    animation: rcwSheetUp 0.5s cubic-bezier(0.32, 0.72, 0, 1) both;
}
#rcwChatbot .rcw-window.closing {
    animation: rcwSheetDown 0.22s ease-in both;
}

/* ---------- Header: frosted glass ---------- */
#rcwChatbot .rcw-header {
    position: relative;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: rgba(2, 104, 129, 0.92);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.15);
}
#rcwChatbot .rcw-header-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
#rcwChatbot .rcw-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
#rcwChatbot .rcw-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    flex-shrink: 0;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
#rcwChatbot .rcw-title { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3; letter-spacing: 0.1px; }
#rcwChatbot .rcw-subtitle {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 5px;
}
#rcwChatbot .rcw-subtitle::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34c759;
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.5);
    animation: rcwPulse 2s ease-out infinite;
}
#rcwChatbot .rcw-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    padding: 6px 8px;
    border-radius: 8px;
    transition: opacity 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}
#rcwChatbot .rcw-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.15); }
#rcwChatbot .rcw-close:active { transform: scale(0.88); }

/* ---------- V3.10: maximize / restore toggle ---------- */
#rcwChatbot .rcw-max {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    opacity: 0.75;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}
#rcwChatbot .rcw-max:hover { opacity: 1; background: rgba(255, 255, 255, 0.15); }
#rcwChatbot .rcw-max:active { transform: scale(0.88); }
#rcwChatbot .rcw-max svg { width: 15px; height: 15px; }
#rcwChatbot .rcw-max .rcw-max-restore { display: none; }
#rcwChatbot .rcw-window.max .rcw-max .rcw-max-expand { display: none; }
#rcwChatbot .rcw-window.max .rcw-max .rcw-max-restore { display: block; }

/* ---------- Language bar: iOS pill toggle ---------- */
#rcwChatbot .rcw-langs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 7px 12px;
    background: #f2f2f7;
    border-bottom: 0.5px solid #e5e5ea;
    flex-shrink: 0;
}
#rcwChatbot .rcw-lang {
    flex: 0 0 auto;
    padding: 4px 10px;
    border: none;
    background: #fff;
    color: #026881;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    min-width: 42px;
    text-align: center;
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.04);
}
#rcwChatbot .rcw-lang:hover {
    background: #d4ecef;
    transform: translateY(-1px);
}
#rcwChatbot .rcw-lang:active { transform: translateY(0) scale(0.94); }
#rcwChatbot .rcw-lang.active {
    background: #026881;
    color: #fff;
    box-shadow: 0 2px 10px rgba(2, 104, 129, 0.3);
}

/* ---------- Messages: iOS Messages-style ---------- */
#rcwChatbot .rcw-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 200px;
    max-height: none;
    background: #fff;
    scroll-behavior: smooth;
}
#rcwChatbot .rcw-messages::-webkit-scrollbar { width: 4px; }
#rcwChatbot .rcw-messages::-webkit-scrollbar-track { background: transparent; }
#rcwChatbot .rcw-messages::-webkit-scrollbar-thumb { background: #c7c7cc; border-radius: 4px; }
#rcwChatbot .rcw-messages::-webkit-scrollbar-thumb:hover { background: #aeaeb2; }

/* iOS Messages bubbles */
#rcwChatbot .msg {
    max-width: 82%;
    padding: 11px 16px;
    border-radius: 20px;
    font-size: 13px;
    line-height: 1.55;
    color: #1c1c1e;
    white-space: pre-wrap;
    word-wrap: break-word;
    animation: rcwBubbleUp 0.38s cubic-bezier(0.32, 0.72, 0, 1) both;
}
#rcwChatbot .msg.bot {
    align-self: flex-start;
    background: #e9e9eb;
    color: #1c1c1e;
    border-bottom-left-radius: 6px;
    animation-name: rcwBubbleIn;
}
#rcwChatbot .msg.user {
    align-self: flex-end;
    background: #026881;
    color: #fff;
    border-bottom-right-radius: 6px;
    animation-name: rcwBubbleOut;
}
/* V3.10: a bubble carrying a wide table may use the full row width */
#rcwChatbot .msg.has-table { max-width: 100%; padding: 8px 10px; }

#rcwChatbot .msg.bot strong { font-weight: 600; color: #000; }
#rcwChatbot .msg.bot em { font-style: italic; }
#rcwChatbot .msg.bot ul, #rcwChatbot .msg.bot ol { padding-left: 18px; margin: 5px 0; }
#rcwChatbot .msg.bot li { margin-bottom: 3px; }
#rcwChatbot .msg.bot hr { border: none; border-top: 0.5px solid #c7c7cc; margin: 8px 0; }
#rcwChatbot .msg.bot h1, #rcwChatbot .msg.bot h2, #rcwChatbot .msg.bot h3 { font-size: 13px; font-weight: 600; margin: 6px 0 3px; color: #000; }
#rcwChatbot .msg.bot a { color: #026881; text-decoration: none; }
#rcwChatbot .msg.bot a:hover { text-decoration: underline; }
#rcwChatbot .msg.bot pre { background: #f2f2f7; padding: 10px; border-radius: 10px; overflow-x: auto; font-size: 11px; margin: 6px 0; }
#rcwChatbot .msg.bot code { background: #f2f2f7; padding: 1px 5px; border-radius: 5px; font-size: 12px; }
#rcwChatbot .msg.bot pre code { background: none; padding: 0; }
#rcwChatbot .msg.bot .li-bullet { color: #026881; margin-right: 6px; }

/* V3.4.1/V3.10: Markdown tables — horizontal scroll + sticky label column */
#rcwChatbot .rcw-table-wrap {
    overflow-x: auto;
    margin: 6px 0;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #b0b0b6 transparent;
}
/* a styled webkit scrollbar is rendered as a classic one => always visible (Win11 overlay bars are zero-width) */
#rcwChatbot .rcw-table-wrap::-webkit-scrollbar { height: 8px; }
#rcwChatbot .rcw-table-wrap::-webkit-scrollbar-track { background: transparent; }
#rcwChatbot .rcw-table-wrap::-webkit-scrollbar-thumb { background: #b0b0b6; border-radius: 8px; }
#rcwChatbot .rcw-table-wrap::-webkit-scrollbar-thumb:hover { background: #8e8e93; }
#rcwChatbot .rcw-table {
    width: 100%;
    min-width: max-content;
    border-collapse: collapse;
    font-size: 12.5px;
    line-height: 1.4;
}
#rcwChatbot .rcw-table th {
    background: #f2f2f7; padding: 4px 8px; text-align: left;
    font-weight: 600; border: 0.5px solid #c7c7cc; white-space: nowrap;
    max-width: 30ch;
}
#rcwChatbot .rcw-table td {
    padding: 4px 8px; border: 0.5px solid #e5e5ea; vertical-align: top;
    max-width: 30ch;
    overflow-wrap: anywhere;
}
#rcwChatbot .rcw-table tr:nth-child(even) td { background: #fafafa; }
/* sticky first column keeps the row label visible while scrolling across products */
#rcwChatbot .rcw-table th:first-child,
#rcwChatbot .rcw-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 1px 0 0 0 #e5e5ea, 4px 0 6px -4px rgba(0, 0, 0, 0.18);
}
#rcwChatbot .rcw-table th:first-child { background: #f2f2f7; z-index: 3; }
#rcwChatbot .rcw-table tr:nth-child(even) td:first-child { background: #fafafa; }

/* ---------- Quick replies: pill-shaped ---------- */
#rcwChatbot .rcw-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 12px 9px;
    background: #fff;
    flex-shrink: 0;
}
/* V3.10: starter chips disappear once the conversation has started */
/* V3.15.0: 生成回答期间不再 display:none——保留这一行的高度，
   收尾时按钮出现不会把消息区和输入框整体上移（那就是「不丝滑」的主因之一）。 */
#rcwChatbot .rcw-quick.hidden { visibility: hidden; }
#rcwChatbot .rcw-quick-btn {
    padding: 7px 16px;
    border: none;
    background: #f2f2f7;
    color: #026881;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.04);
}
#rcwChatbot .rcw-quick-btn:hover {
    background: #026881;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(2, 104, 129, 0.3);
}
#rcwChatbot .rcw-quick-btn:active { transform: translateY(0) scale(0.94); }
/* V3.14.1: 等模型生成按钮时的骨架占位——跟真按钮一样高，脉冲提示「在准备」。
   存在期间不显示固定三问，用户看到的按钮从出现那刻就是对的（不再先错后对）。 */
#rcwChatbot .rcw-quick-btn.is-skeleton {
    display: inline-block;
    width: 88px;
    /* 和真按钮同高（padding 7px + 12px 字 ≈ 33px），换过去时行高不变 */
    height: 33px;
    padding: 0;
    background: linear-gradient(90deg, #eef1f3 0%, #f7f9fa 50%, #eef1f3 100%);
    background-size: 200% 100%;
    animation: rcw-chip-shimmer 1.2s linear infinite;
    pointer-events: none;
}
/* V3.15.0: 真按钮入场——上浮 + 淡入，错峰 45ms，肉眼是「一条一条冒出来」而不是整排闪现 */
#rcwChatbot .rcw-quick.is-in .rcw-quick-btn {
    animation: rcw-chip-in 0.18s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes rcw-chip-in {
    from { opacity: 0; transform: translateY(4px) scale(0.96); }
    to { opacity: 1; transform: none; }
}
@keyframes rcw-chip-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}
@keyframes rcw-chip-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    #rcwChatbot .rcw-quick-btn.is-skeleton { animation: none; opacity: 0.7; }
    #rcwChatbot .rcw-quick.is-in .rcw-quick-btn { animation: none; }
}

/* ---------- Phone prompt: iOS-style ---------- */
#rcwChatbot .rcw-phone {
    background: #f2f2f7;
    border-radius: 14px;
    padding: 8px 12px;
    margin: 0 14px 6px;
    display: none;
    flex-shrink: 0;
}
#rcwChatbot .rcw-phone.show {
    display: block;
    animation: rcwBubbleUp 0.32s cubic-bezier(0.32, 0.72, 0, 1) both;
}
#rcwChatbot .rcw-phone p { color: #026881; font-size: 12px; margin-bottom: 4px; line-height: 1.4; font-weight: 500; }
#rcwChatbot .rcw-phone-row { display: flex; gap: 8px; }
#rcwChatbot .rcw-phone input {
    flex: 1;
    height: 38px !important;
    padding: 8px 14px !important;
    border-radius: 12px;
    border: none;
    background: #fff;
    color: #1c1c1e;
    font-size: 13px !important;
    line-height: 1.4 !important;
    outline: none;
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease;
}
#rcwChatbot .rcw-phone input:focus {
    box-shadow: 0 0 0 3px rgba(2, 104, 129, 0.2);
}
#rcwChatbot .rcw-phone input::placeholder { color: #8e8e93; }
#rcwChatbot .rcw-submit {
    height: 38px !important;
    padding: 8px 20px !important;
    background: #026881;
    border: none;
    border-radius: 12px;
    color: #fff;
    font-weight: 500;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
#rcwChatbot .rcw-submit:hover { background: #004a59; transform: translateY(-1px); }
#rcwChatbot .rcw-submit:active { transform: translateY(0) scale(0.94); }

/* ---------- V3.10: phone CTA lives in the header (reading area keeps the space) ---------- */
#rcwChatbot .rcw-phone-btn {
    padding: 5px 11px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-radius: 16px;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    max-width: 34vw;
    overflow: hidden;
    text-overflow: ellipsis;
}
#rcwChatbot .rcw-phone-btn:hover { background: rgba(255, 255, 255, 0.24); }
#rcwChatbot .rcw-phone-btn:active { transform: scale(0.95); }
#rcwChatbot .rcw-phone-btn.done {
    border-color: rgba(52, 199, 89, 0.85);
    background: rgba(52, 199, 89, 0.2);
    color: #eafff0;
    cursor: default;
}
#rcwChatbot .rcw-phone-btn.done:hover { background: rgba(52, 199, 89, 0.2); }

/* ---------- Phone cancel button ---------- */
#rcwChatbot .rcw-phone-cancel {
    display: block;
    width: 100%;
    margin-top: 2px;
    padding: 3px;
    background: transparent;
    border: none;
    color: #8e8e93;
    font-size: 11px;
    cursor: pointer;
    text-align: center;
}
#rcwChatbot .rcw-phone-cancel:hover { color: #ff3b30; }

/* ---------- Consent notice (V3.11.55) ---------- */
#rcwChatbot .rcw-consent {
    margin: 6px 0 2px;
    color: #8e8e93;
    font-size: 10.5px;
    line-height: 1.45;
    text-align: left;
}
#rcwChatbot .rcw-consent a { color: #026881; text-decoration: underline; }

/* ---------- Input: iOS search-style ---------- */
#rcwChatbot .rcw-input-area {
    padding: 10px 14px 12px;
    border-top: 0.5px solid #e5e5ea;
    display: flex;
    gap: 8px;
    background: #fff;
    flex-shrink: 0;
    align-items: flex-end;
}
#rcwChatbot .rcw-input-area textarea {
    flex: 1;
    background: #f2f2f7;
    border: none;
    border-radius: 20px;
    padding: 10px 16px;
    color: #1c1c1e;
    font-size: 13px;
    /* Fixed line-height: an inherited fractional line-height makes Chrome's
       textarea scrollHeight overshoot clientHeight by ~5px, which pins a
       native scrollbar on an empty input box. 20px keeps the box height. */
    line-height: 20px;
    resize: none;
    min-height: 20px;
    max-height: 80px;
    outline: none;
    font-family: inherit;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
#rcwChatbot .rcw-input-area textarea:focus {
    background: #fff;
    box-shadow: 0 0 0 2px rgba(2, 104, 129, 0.2);
}
#rcwChatbot .rcw-input-area textarea::placeholder { color: #8e8e93; }
#rcwChatbot .rcw-send {
    background: #026881;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 0;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    margin-bottom: 1px;
}
#rcwChatbot .rcw-send:hover { background: #004a59; transform: scale(1.05); }
#rcwChatbot .rcw-send:active { transform: scale(0.88); }
#rcwChatbot .rcw-send:disabled { opacity: 0.35; transform: none; background: #c7c7cc; }
#rcwChatbot .rcw-send svg { width: 16px; height: 16px; }

/* ---------- Phone form: hide chat input when open ---------- */
#rcwChatbot .rcw-phone.show ~ .rcw-input-area { display: none; }

/* ---------- AI disclaimer ---------- */
#rcwChatbot .rcw-disclaimer {
    text-align: center;
    font-size: 12px;
    color: #8e8e93;
    padding: 4px 14px 7px;
    line-height: 1.4;
    background: #fff;
    flex-shrink: 0;
}

/* V3.10: on very short desktop viewports the message list gives up space first */
@media (max-height: 600px) {
    #rcwChatbot .rcw-messages { min-height: 0; }
}

/* ---------- Typing: iOS '⋯' bounce ---------- */
#rcwChatbot .typing-indicator {
    display: flex;
    gap: 5px;
    padding: 12px 18px;
    background: #e9e9eb;
    border-radius: 20px;
    align-self: flex-start;
    border-bottom-left-radius: 6px;
}
#rcwChatbot .typing-indicator span {
    width: 7px;
    height: 7px;
    background: #aeaeb2;
    border-radius: 50%;
    animation: rcwDots 1.2s ease-in-out infinite;
}
#rcwChatbot .typing-indicator span:nth-child(2) { animation-delay: 0.16s; }
#rcwChatbot .typing-indicator span:nth-child(3) { animation-delay: 0.32s; }

/* ---------- Keyframes: Apple spring physics ---------- */
@keyframes rcwSpring {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.04); }
}
@keyframes rcwPulse {
    0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.5); }
    70% { box-shadow: 0 0 0 8px rgba(52, 199, 89, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}
@keyframes rcwSheetUp {
    from { opacity: 0; transform: scale(0.88) translateY(18px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes rcwSheetDown {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to { opacity: 0; transform: scale(0.92) translateY(12px); }
}
/* iOS Messages bubble entrance */
@keyframes rcwBubbleIn {
    from { opacity: 0; transform: translateX(-8px) scale(0.94); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes rcwBubbleOut {
    from { opacity: 0; transform: translateX(8px) scale(0.94); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes rcwBubbleUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes rcwDots {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
    30% { transform: translateY(-6px); opacity: 0.9; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    #rcwChatbot .rcw-bubble { animation: none; }
    #rcwChatbot .rcw-subtitle::before { animation: none; }
    #rcwChatbot .rcw-window { transition: none; }
    #rcwChatbot .rcw-window.open { animation: none; }
    #rcwChatbot .msg { animation: rcwFadeIn 0.15s ease both; }
    #rcwChatbot .typing-indicator span { animation: none; }
    #rcwChatbot .rcw-phone.show { animation: none; }
    #rcwChatbot .rcw-send, #rcwChatbot .rcw-quick-btn, #rcwChatbot .rcw-lang { transition: none; }
}
@keyframes rcwFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
    /* V3.10.6: the theme's mobile menu bar (z-index 999999) used to paint over
       the language row of an open sheet, so those buttons were visible but
       unclickable.  Lift only the plugin's own layers above it — the theme
       itself is never touched — and keep the bubble in the same layer rather
       than relying on DOM order.  While the sheet is open the menu bar is
       covered; closing the sheet restores it. */
    #rcwChatbot .rcw-bubble { bottom: 20px; right: 20px; width: 56px; height: 56px; z-index: 1000000; }
    #rcwChatbot .rcw-window,
    #rcwChatbot .rcw-window.max {
        width: 100%;
        right: 0;
        bottom: 0;
        border-radius: 22px 22px 0 0;
        height: 92vh;
        height: 92dvh;
        max-height: 92dvh;
        z-index: 1000000;
    }
    #rcwChatbot .rcw-messages { max-height: none; min-height: 120px; }
    #rcwChatbot .rcw-max { display: none; }          /* already full-screen on mobile */
    #rcwChatbot .rcw-phone-btn { max-width: 38vw; }
    #rcwChatbot .rcw-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* ---------- V3.11.4: stalled-stream affordances ---------- */
/* The typing bubble promoted to a text hint once the wait passes SOFT_WAIT_MS */
#rcwChatbot .typing-indicator.rcw-soft-wait {
    font-size: 12.5px;
    line-height: 1.4;
    color: #1c1c1e;
}
/* Continue button appended under a half answer that timed out mid-stream */
#rcwChatbot .rcw-continue-row {
    margin-top: 8px;
    display: flex;
}
#rcwChatbot .rcw-continue-btn {
    padding: 5px 14px;
    border: none;
    border-radius: 20px;
    background: #026881;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
#rcwChatbot .rcw-continue-btn:hover { background: #004a59; transform: scale(1.05); }
#rcwChatbot .rcw-continue-btn:active { transform: scale(0.94); }

/* ============================================================
   V4 GLASS — v3.11.9 skin (2026-10-13)
   Apple-style frosted glass + silky easing.
   APPEND-ONLY override layer: every rule wins by order only, the
   originals above are untouched (revert = delete this whole block).
   Zero markup / JS / class-name changes — behaviour is identical.
   ============================================================ */
#rcwChatbot {
    --rcw-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --rcw-hair: rgba(255, 255, 255, 0.65);
}
#rcwChatbot, #rcwChatbot input, #rcwChatbot textarea, #rcwChatbot button {
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- FAB: glossy glass orb ---------- */
#rcwChatbot .rcw-bubble {
    background: linear-gradient(160deg, #0d8fae 0%, #026881 62%, #01566a 100%);
    box-shadow:
        0 12px 32px rgba(2, 104, 129, 0.38),
        0 2px 8px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -8px 16px rgba(0, 0, 0, 0.14);
    transition: transform 0.5s var(--rcw-ease), box-shadow 0.5s var(--rcw-ease);
    animation: rcwFloat 3.4s ease-in-out infinite;
}
#rcwChatbot .rcw-bubble::before {
    content: '';
    position: absolute;
    left: 7px;
    right: 7px;
    top: 5px;
    height: 42%;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
    pointer-events: none;
}
#rcwChatbot .rcw-bubble:hover {
    transform: scale(1.08);
    box-shadow:
        0 18px 40px rgba(2, 104, 129, 0.45),
        0 4px 12px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -8px 16px rgba(0, 0, 0, 0.14);
}

/* ---------- Window: macOS panel ---------- */
#rcwChatbot .rcw-window {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.64) 100%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid var(--rcw-hair);
    border-radius: 28px;
    box-shadow:
        0 40px 90px rgba(4, 30, 38, 0.30),
        0 8px 28px rgba(4, 30, 38, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: width 0.5s var(--rcw-ease), height 0.5s var(--rcw-ease);
}

/* ---------- Header: teal glass ---------- */
#rcwChatbot .rcw-header {
    padding: 13px 16px;
    background: linear-gradient(135deg, rgba(3, 118, 145, 0.94) 0%, rgba(2, 95, 120, 0.90) 55%, rgba(1, 78, 99, 0.93) 100%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
#rcwChatbot .rcw-avatar {
    width: 38px;
    height: 38px;
    font-size: 16px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 8px rgba(0, 0, 0, 0.12);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
#rcwChatbot .rcw-title { font-size: 14.5px; letter-spacing: -0.01em; }
#rcwChatbot .rcw-close, #rcwChatbot .rcw-max {
    border-radius: 10px;
    transition: opacity 0.25s var(--rcw-ease), background 0.25s var(--rcw-ease), transform 0.25s var(--rcw-ease);
}
#rcwChatbot .rcw-phone-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: all 0.35s var(--rcw-ease);
}
/* V4 GLASS: monochrome handset icon replaces the 📞 emoji (red on Windows) */
#rcwChatbot .rcw-phone-ico { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.92; }
#rcwChatbot .rcw-phone-btn #rcwPhoneBtnText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#rcwChatbot .rcw-phone-btn:hover { background: rgba(255, 255, 255, 0.30); transform: translateY(-1px); }

/* ---------- Language bar: glass pills ---------- */
#rcwChatbot .rcw-langs {
    padding: 8px 14px;
    gap: 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.32));
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
#rcwChatbot .rcw-lang {
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 2px rgba(9, 30, 66, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.35s var(--rcw-ease);
}
#rcwChatbot .rcw-lang:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-1.5px);
    box-shadow: 0 6px 16px rgba(2, 104, 129, 0.18);
}
#rcwChatbot .rcw-lang.active {
    background: linear-gradient(135deg, #0b87a4, #026881);
    border-color: rgba(2, 104, 129, 0.6);
    box-shadow: 0 6px 18px rgba(2, 104, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ---------- Messages: translucent canvas ---------- */
#rcwChatbot .rcw-messages {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(236, 246, 248, 0.08) 100%);
    padding: 18px 16px;
    gap: 12px;
}
#rcwChatbot .rcw-messages::-webkit-scrollbar { width: 5px; }
#rcwChatbot .rcw-messages::-webkit-scrollbar-thumb { background: rgba(2, 104, 129, 0.18); border-radius: 5px; }
#rcwChatbot .rcw-messages::-webkit-scrollbar-thumb:hover { background: rgba(2, 104, 129, 0.32); }

/* ---------- Bubbles ---------- */
#rcwChatbot .msg {
    padding: 12px 16px;
    font-size: 13.5px;
    line-height: 1.6;
    animation: rcwBubbleUp 0.5s var(--rcw-ease) both;
}
#rcwChatbot .msg.bot {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(9, 30, 66, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    border-bottom-left-radius: 7px;
}
#rcwChatbot .msg.user {
    background: linear-gradient(135deg, #0c8aa8 0%, #026881 70%, #016178 100%);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 6px 18px rgba(2, 104, 129, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    border-bottom-right-radius: 7px;
}
#rcwChatbot .msg.bot pre, #rcwChatbot .msg.bot code { background: rgba(240, 245, 247, 0.9); }
#rcwChatbot .msg.bot hr { border-top: 0.5px solid rgba(60, 60, 67, 0.16); }

/* ---------- Quick replies: glass chips ---------- */
#rcwChatbot .rcw-quick {
    background: transparent;
    padding: 4px 14px 11px;
    gap: 8px;
}
#rcwChatbot .rcw-quick-btn {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 3px rgba(9, 30, 66, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transition: all 0.4s var(--rcw-ease);
}
#rcwChatbot .rcw-quick-btn:hover {
    background: linear-gradient(135deg, #0b87a4, #026881);
    border-color: rgba(2, 104, 129, 0.5);
    box-shadow: 0 10px 24px rgba(2, 104, 129, 0.30);
    transform: translateY(-2px);
}

/* ---------- Typing ---------- */
#rcwChatbot .typing-indicator {
    padding: 13px 18px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(9, 30, 66, 0.07);
    border-bottom-left-radius: 7px;
}
#rcwChatbot .typing-indicator span { background: #9aa7ae; }
#rcwChatbot .typing-indicator.rcw-soft-wait { color: #41505a; }

/* ---------- Phone panel ---------- */
#rcwChatbot .rcw-phone {
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
#rcwChatbot .rcw-phone input {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(2, 104, 129, 0.10);
    box-shadow: inset 0 1px 2px rgba(9, 30, 66, 0.05);
    transition: box-shadow 0.35s var(--rcw-ease), border-color 0.35s var(--rcw-ease);
}
#rcwChatbot .rcw-phone input:focus {
    border-color: rgba(2, 104, 129, 0.35);
    box-shadow: 0 0 0 4px rgba(2, 104, 129, 0.14);
}
#rcwChatbot .rcw-submit {
    background: linear-gradient(140deg, #0d8fae, #026881 70%);
    box-shadow: 0 8px 18px rgba(2, 104, 129, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: all 0.4s var(--rcw-ease);
}
#rcwChatbot .rcw-submit:hover { background: linear-gradient(140deg, #0f9cbd, #027791 70%); transform: translateY(-1px); }

/* ---------- Input area ---------- */
#rcwChatbot .rcw-input-area {
    padding: 12px 16px 14px;
    gap: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.60));
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
#rcwChatbot .rcw-input-area textarea {
    padding: 11px 16px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(2, 104, 129, 0.10);
    box-shadow: inset 0 1px 2px rgba(9, 30, 66, 0.05);
    transition: box-shadow 0.35s var(--rcw-ease), background 0.35s var(--rcw-ease), border-color 0.35s var(--rcw-ease);
}
#rcwChatbot .rcw-input-area textarea:focus {
    background: #fff;
    border-color: rgba(2, 104, 129, 0.35);
    box-shadow: 0 0 0 4px rgba(2, 104, 129, 0.14), inset 0 1px 2px rgba(9, 30, 66, 0.04);
}
#rcwChatbot .rcw-send {
    width: 38px;
    height: 38px;
    background: linear-gradient(140deg, #0d8fae, #026881 70%);
    box-shadow: 0 8px 20px rgba(2, 104, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: all 0.4s var(--rcw-ease);
}
#rcwChatbot .rcw-send:hover {
    background: linear-gradient(140deg, #0f9cbd, #027791 70%);
    transform: scale(1.06) translateY(-1px);
    box-shadow: 0 12px 26px rgba(2, 104, 129, 0.42);
}
#rcwChatbot .rcw-send:disabled { background: rgba(199, 199, 204, 0.7); box-shadow: none; }

/* ---------- Disclaimer ---------- */
#rcwChatbot .rcw-disclaimer {
    background: rgba(255, 255, 255, 0.42);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #7c8794;
    padding: 5px 16px 8px;
}

/* ---------- Continue affordance ---------- */
#rcwChatbot .rcw-continue-btn {
    background: linear-gradient(140deg, #0d8fae, #026881 70%);
    box-shadow: 0 8px 18px rgba(2, 104, 129, 0.28);
    transition: all 0.4s var(--rcw-ease);
}
#rcwChatbot .rcw-continue-btn:hover { background: linear-gradient(140deg, #0f9cbd, #027791 70%); transform: translateY(-1px) scale(1.02); }

/* ---------- Fallback when backdrop-filter is unavailable ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #rcwChatbot .rcw-window { background: rgba(255, 255, 255, 0.97); }
    #rcwChatbot .rcw-messages { background: #fff; }
    #rcwChatbot .rcw-langs, #rcwChatbot .rcw-input-area { background: #f7fafb; }
    #rcwChatbot .rcw-quick-btn, #rcwChatbot .msg.bot, #rcwChatbot .typing-indicator { background: #fff; }
}

/* ---------- Gentle float for the FAB ---------- */
@keyframes rcwFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.02); }
}

/* ---------- Reduced motion: extend to the new transitions ---------- */
@media (prefers-reduced-motion: reduce) {
    #rcwChatbot .rcw-bubble { animation: none; }
    #rcwChatbot .rcw-lang, #rcwChatbot .rcw-quick-btn, #rcwChatbot .rcw-phone-btn,
    #rcwChatbot .rcw-send, #rcwChatbot .rcw-submit, #rcwChatbot .rcw-continue-btn,
    #rcwChatbot .rcw-input-area textarea, #rcwChatbot .rcw-window { transition: none; }
}

/* ---------- Mobile: taller sheet radius ---------- */
@media (max-width: 480px) {
    #rcwChatbot .rcw-window,
    #rcwChatbot .rcw-window.max {
        border-radius: 28px 28px 0 0;
        box-shadow: 0 -18px 60px rgba(4, 30, 38, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
}

/* ============================================================
   V5 POLISH — v3.11.10 close transition
   Until v3.11.9 the .closing rule carried no display, so removing
   .open (display:none on the base rule) killed the exit animation
   before a frame could paint — the panel just vanished. Keep the
   panel rendered while it slips toward the FAB, then pop the FAB
   back in. Revert = delete this whole block (nothing above it is
   touched; the old .closing rule simply becomes unreachable again).
   ============================================================ */
@keyframes rcwSheetAway {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to { opacity: 0; transform: scale(0.90) translateY(14px); }
}
#rcwChatbot .rcw-window.closing {
    display: flex;                        /* keep the panel on screen while it animates out */
    pointer-events: none;
    animation: rcwSheetAway 0.32s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes rcwBubblePop {
    from { opacity: 0; transform: scale(0.55); }
    to { opacity: 1; transform: scale(1); }
}
#rcwChatbot .rcw-bubble.pop-in {
    animation: rcwBubblePop 0.3s var(--rcw-ease) both;
}

/* Mobile: the panel is a full-width bottom sheet — dismiss it with a
   downward slide rather than a corner shrink. */
@keyframes rcwSheetAwayDown {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(64px); }
}
@media (max-width: 480px) {
    #rcwChatbot .rcw-window.closing { animation-name: rcwSheetAwayDown; }
}

/* Reduced motion: no travel at all — panel and FAB swap instantly. */
@media (prefers-reduced-motion: reduce) {
    #rcwChatbot .rcw-window.closing { display: none; animation: none; }
    #rcwChatbot .rcw-bubble.pop-in { animation: none; }
}

/* ============================================================
   V3.11.21 — accessibility + error-state polish
   ============================================================ */
/* 44x44 minimum hit areas (visual size can stay close to the old skin) */
#rcwChatbot .rcw-lang { min-width: 44px; min-height: 44px; padding: 10px 12px; }
#rcwChatbot .rcw-phone-btn { min-height: 44px; padding: 10px 13px; }
#rcwChatbot .rcw-close, #rcwChatbot .rcw-max { min-width: 44px; min-height: 44px; }
#rcwChatbot .rcw-send { width: 44px; height: 44px; }
#rcwChatbot .rcw-send svg { width: 18px; height: 18px; }

/* Transport errors are never rendered as answers */
#rcwChatbot .msg.bot.rcw-error {
    background: #fff5f5;
    border: 1px solid #f3c2c2;
    color: #7a1f28;
}
#rcwChatbot .rcw-retry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 88px;
    margin-top: 10px;
    padding: 0 18px;
    border: none;
    border-radius: 22px;
    background: #026881;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
#rcwChatbot .rcw-retry-btn:hover { background: #004a59; }
#rcwChatbot .rcw-retry-btn:active { transform: scale(0.96); }

/* A subtle right-edge shadow tells touch users the table can be swiped */
#rcwChatbot .rcw-table-wrap {
    box-shadow: inset -14px 0 12px -12px rgba(2, 104, 129, 0.32);
}

@media (max-width: 480px) {
    /* Icon-only CTA frees the header for the longer Japanese title */
    #rcwChatbot .rcw-phone-btn {
        width: 44px;
        min-width: 44px;
        padding: 0;
        justify-content: center;
    }
    #rcwChatbot .rcw-phone-btn #rcwPhoneBtnText { display: none; }
    #rcwChatbot .rcw-phone-ico { width: 18px; height: 18px; }
    #rcwChatbot .rcw-title { font-size: 12.5px; }
}

/* ===== V3.11.64 ===== */
/* 思考态：文字 + 三个跳动点（比三个灰点更像在查资料） */
#rcwChatbot .rcw-thinking{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;max-width:100%}
#rcwChatbot .rcw-think-text{font-size:13px;color:#33525f;letter-spacing:.2px}
#rcwChatbot .rcw-think-dots{display:inline-flex;gap:3px;align-items:flex-end}
#rcwChatbot .rcw-think-dots i{width:4px;height:4px;border-radius:50%;background:#5f7b87;display:block;
  animation:rcwThinkBounce 1.15s cubic-bezier(.22,.61,.36,1) infinite}
#rcwChatbot .rcw-think-dots i:nth-child(2){animation-delay:.13s}
#rcwChatbot .rcw-think-dots i:nth-child(3){animation-delay:.26s}
@keyframes rcwThinkBounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}

/* 表格：去掉竖线，只留极浅的行分隔；短列不折行，长列照常换行 */
#rcwChatbot .rcw-table{border-collapse:collapse;font-size:12.5px;line-height:1.45}
#rcwChatbot .rcw-table th{font-size:11px;font-weight:600;color:#7a8b94;text-align:left;
  padding:9px 10px 7px;border-bottom:1px solid #dfe7ea;white-space:nowrap;background:transparent}
#rcwChatbot .rcw-table td{padding:10px;border-bottom:1px solid #f0f4f6;color:#27414c;
  vertical-align:middle;overflow-wrap:anywhere;border-left:0;border-right:0}
#rcwChatbot .rcw-table tr:last-child td{border-bottom:0}
#rcwChatbot .rcw-table td:first-child{font-weight:600;color:#12313c}
#rcwChatbot .rcw-table td:nth-child(2),#rcwChatbot .rcw-table td:nth-child(3){white-space:nowrap}
#rcwChatbot .rcw-table td:nth-child(2){font-variant-numeric:tabular-nums}

/* 4 列及以上：改成堆叠卡（390px 气泡里四列永远挤） */
#rcwChatbot .rcw-stack{display:flex;flex-direction:column;gap:8px;margin:8px 0 4px}
#rcwChatbot .rcw-stack-card{border:1px solid #e8eef1;border-radius:12px;padding:10px 12px;background:#fff}
#rcwChatbot .rcw-stack-name{font-size:12.5px;font-weight:600;color:#12313c;margin-bottom:6px}
#rcwChatbot .rcw-stack-card dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0;font-size:12px}
#rcwChatbot .rcw-stack-card dt{color:#8898a1;white-space:nowrap}
#rcwChatbot .rcw-stack-card dd{margin:0;color:#27414c}

@media (prefers-reduced-motion: reduce){
  #rcwChatbot .rcw-think-dots i{animation:none;opacity:.8}
}

/* V3.11.65: 思考态的文案与点容器也是 <span>，被上面 .typing-indicator span 的
   7px 圆点规则命中，导致中文被挤成竖排。这里覆盖回正常文本与容器。 */
#rcwChatbot .typing-indicator.rcw-thinking span.rcw-think-text {
    width: auto; height: auto; background: transparent; border-radius: 0; animation: none;
    white-space: nowrap; font-size: 13px; color: #33525f; line-height: 1.2;
}
#rcwChatbot .typing-indicator.rcw-thinking span.rcw-think-dots {
    width: auto; height: auto; background: transparent; border-radius: 0; animation: none;
    display: inline-flex; align-items: center; gap: 3px;
}

/* ============================================================
   V3.11.67 — WhatsApp direct chat (styles only)
     .rcw-wa-btn   — compact pill in the language row (the only entry;
                     V3.11.70 removed the full-width strip above the
                     composer at the client's request)
   Markup lives in includes/class-chatbot.php, links/labels in
   assets/js/chatbot-v3.js. This block only paints them; the JS
   toggles visibility through the `hidden` attribute.
   APPEND-ONLY: nothing above is touched, revert = delete block.
   ============================================================ */

/* --- Header pill ------------------------------------------------
   The normal panel is only 460px wide and its header already carries
   the "Request a Call Back" pill (with its label) plus the expand and
   close buttons, so a fourth control there squeezed the localised
   title into an ellipsis ("R.C.W. AI アシ…"). The pill therefore sits
   at the right end of the language row, above the transcript, where
   there is room: icon + label on desktop, icon only on phones (the
   strip above the composer carries the words there). The WhatsApp
   mark is an inline SVG injected by buildWaBtn() in chatbot-v3.js, so
   the pill is never an empty green circle. */
#rcwChatbot .rcw-langs .rcw-wa-btn { margin-left: auto; }
#rcwChatbot .rcw-wa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    min-height: 26px;
    padding: 2px 10px;
    border: 0;
    border-radius: 999px;
    background: #25D366;
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.2px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    transition: background 0.2s ease, transform 0.2s ease;
}
/* The icon is the inline SVG buildWaBtn() injects (class rcw-wa-ico) */
#rcwChatbot .rcw-wa-btn svg,
#rcwChatbot .rcw-wa-btn img,
#rcwChatbot .rcw-wa-btn .rcw-wa-ico {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    display: block;
}
/* Label span: ellipsis if ever squeezed; hidden on phones (<=480px) */
#rcwChatbot .rcw-wa-btn span {
    display: inline;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#rcwChatbot .rcw-wa-btn:hover { background: #1DA851; }
#rcwChatbot .rcw-wa-btn:active { background: #178F43; transform: scale(0.96); }
#rcwChatbot .rcw-wa-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Guard rail: a wider action cluster must never wrap the header title
   into extra lines (the <=480 block already does this for the sheet). */
#rcwChatbot .rcw-header-info > div { min-width: 0; }
#rcwChatbot .rcw-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- `hidden` must win over display:flex ------------------------
   The UA rule [hidden]{display:none} is trumped by the author
   display:flex above, so pin it explicitly. */
#rcwChatbot .rcw-wa-btn[hidden] { display: none !important; }

/* --- Reduced motion: no slide/scale, just a colour change ------- */
@media (prefers-reduced-motion: reduce) {
    #rcwChatbot .rcw-wa-btn { transition: none; animation: none; }
    #rcwChatbot .rcw-wa-btn:active { transform: none; }
}

/* --- Phones: icon-only pill. 36px keeps it thumb-sized without an
       extra row in the language bar; the aria-label carries the words. --- */
@media (max-width: 480px) {
    /* Tighten the language chips so the pill still fits on the first line of
       the language row: five chips + the pill overran a 375px sheet and pushed
       the pill onto a line of its own, costing a whole 44px row on the device
       where vertical space matters most. */
    #rcwChatbot .rcw-lang { min-width: 38px; padding: 5px 8px; }
    #rcwChatbot .rcw-wa-btn {
        min-width: 36px;
        min-height: 36px;
        padding: 0;
        gap: 0;
        font-size: 0;
    }
    #rcwChatbot .rcw-wa-btn span { display: none; }   /* icon only on phones */
    #rcwChatbot .rcw-wa-btn svg,
    #rcwChatbot .rcw-wa-btn img,
    #rcwChatbot .rcw-wa-btn .rcw-wa-ico { width: 18px; height: 18px; }
}

/* --- Very narrow phones (320px: iPhone SE 1st gen, Galaxy Fold cover) ---
   After v3.11.70 removed the strip the pill is the only WhatsApp entry, so
   it has to stay top-right even here. Five chips + the 36px pill overran
   the 279px content width by ~17px and the pill dropped to a row of its
   own; shaving the chip padding buys back the room. */
@media (max-width: 340px) {
    #rcwChatbot .rcw-lang {
        min-width: 30px;
        padding: 5px 6px;
        font-size: 11.5px;
    }
}

/* --- Short viewports (landscape phones: 812x375, 844x390, ...) ---
   The window is min(680px, 100dvh - 128px) with overflow:hidden, so at
   ~247px tall the header/langs/quick/composer stack pushes the send
   button over the bottom edge (only a sliver left, not tappable), so the
   panel takes the full viewport height and quick replies step aside. */
@media (max-height: 620px) {
    /* 横屏手机 / 很扁的桌面窗口：面板只有 100dvh-128px 高（375 高 → 247px），
       而 header 71 + 语言行 61 + 快捷问题 91 + 输入区 72 + 免责声明 48 = 343，
       发送键和免责声明都会被 overflow:hidden 裁掉。改法：面板占满视口高度
       （底部留 12px），并把快捷问题让出来给正文与发送键。 */
    #rcwChatbot .rcw-window {
        bottom: 12px;
        height: calc(100dvh - 24px);
        max-height: none;
    }
    /* V3.13.0: 快捷选项不再整块消失（那等于把新手的下一步藏起来），
       改成压成一行、可横向滚动，正文与发送键仍然拿得到空间。 */
    #rcwChatbot .rcw-quick {
        flex-wrap: nowrap;
        overflow-x: auto;
        min-height: 36px;
        padding-bottom: 2px;
        scrollbar-width: thin;
    }
}

/* ============================================================
   V3.13.0 — WhatsApp preview
   The pill no longer jumps straight to a URL carrying the last question.
   A small confirmation card shows the exact text first, lets the visitor
   edit or clear it, and says plainly that this is a draft, not a live agent.
   ============================================================ */
#rcwChatbot .rcw-wa-preview {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    padding: 10px;
    border-radius: inherit;
    background: rgba(6, 40, 50, 0.45);
}
#rcwChatbot .rcw-wa-preview[hidden] { display: none !important; }
#rcwChatbot .rcw-wa-card {
    width: 100%;
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}
#rcwChatbot .rcw-wa-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: #0b3b45;
}
#rcwChatbot .rcw-wa-text {
    width: 100%;
    min-height: 84px;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #d7dee3;
    border-radius: 8px;
    background: #fbfcfc;
    color: #123;
    font: inherit;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
}
#rcwChatbot .rcw-wa-note {
    margin: 8px 0 10px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #5b6b73;
}
#rcwChatbot .rcw-wa-actions { display: flex; gap: 8px; justify-content: flex-end; }
#rcwChatbot .rcw-wa-actions button {
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
#rcwChatbot .rcw-wa-cancel { background: #eef1f3; color: #33454d; }
#rcwChatbot .rcw-wa-open { background: #25D366; color: #fff; }
#rcwChatbot .rcw-wa-open:hover { background: #1DA851; }