/* ═══════════════════════════════════════════
   WP Japanese Translator v2.0
   by BlueZ Technology
   ═══════════════════════════════════════════ */

/* ── Language Switcher ── */
#wjt-switcher {
    position: fixed;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wjt-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 2px solid transparent;
    background: #fff;
    color: #333;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.14), 0 1px 4px rgba(0,0,0,.07);
    transition: transform .18s ease, box-shadow .18s ease;
    white-space: nowrap;
    user-select: none;
    line-height: 1;
    letter-spacing: .03em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Styles */
.wjt-style-pill   { padding: 9px 16px 9px 12px; border-radius: 50px; }
.wjt-style-square { padding: 9px 14px; border-radius: 8px; }
.wjt-style-minimal{ padding: 6px 12px; border-radius: 4px; box-shadow: none; border: 1.5px solid #ddd; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); }

.wjt-flag  { font-size: 17px; line-height: 1; }
.wjt-lbl   { }

.wjt-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.wjt-btn:active { transform: translateY(0); }
.wjt-btn:focus-visible { outline: 3px solid #4a90e2; outline-offset: 2px; }

/* ── WhatsApp FAB ── */
#wjt-wa-fab {
    position: fixed;
    z-index: 999998;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(37,211,102,.45), 0 2px 8px rgba(0,0,0,.15);
    transition: transform .2s ease, box-shadow .2s ease;
    border: none;
    outline: none;
}
#wjt-wa-fab svg { width: 30px; height: 30px; }
#wjt-wa-fab:hover { transform: scale(1.1); box-shadow: 0 6px 26px rgba(37,211,102,.55); }
#wjt-wa-fab:active { transform: scale(.97); }

/* Pulse ring */
#wjt-wa-fab::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(37,211,102,.5);
    animation: wjt-pulse 2s ease-out infinite;
}
@keyframes wjt-pulse {
    0%   { transform: scale(.9); opacity: 1; }
    70%  { transform: scale(1.25); opacity: 0; }
    100% { opacity: 0; }
}

/* ── WhatsApp Chat Box ── */
#wjt-wa-box {
    position: fixed;
    z-index: 999997;
    width: 320px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.22), 0 2px 10px rgba(0,0,0,.1);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    opacity: 0;
    transform: translateY(16px) scale(.97);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    background: #ece5dd; /* WhatsApp chat bg */
}
#wjt-wa-box.wjt-wa-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* Header */
.wjt-wa-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    color: #fff;
}
.wjt-wa-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.wjt-wa-avatar svg { width: 22px; height: 22px; }
.wjt-wa-info { flex: 1; min-width: 0; }
.wjt-wa-name   { font-size: 15px; font-weight: 700; }
.wjt-wa-status { font-size: 12px; opacity: .85; display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.wjt-wa-dot    { width: 7px; height: 7px; border-radius: 50%; background: #aef; display: inline-block; animation: wjt-blink 1.5s ease-in-out infinite; }
@keyframes wjt-blink { 0%,100%{opacity:1}50%{opacity:.4} }
.wjt-wa-close  { background: none; border: none; color: rgba(255,255,255,.8); font-size: 22px; cursor: pointer; padding: 0; line-height: 1; margin-left: auto; }
.wjt-wa-close:hover { color: #fff; }

/* QR area */
.wjt-wa-qr {
    background: #fff;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(0,0,0,.08);
}
.wjt-wa-qr img { border-radius: 8px; border: 1px solid #eee; flex-shrink: 0; width: 80px; height: 80px; }
.wjt-wa-qr p { font-size: 12px; color: #555; margin: 0; line-height: 1.4; }

/* Chat body */
.wjt-wa-body {
    padding: 16px;
    min-height: 80px;
    background: #ece5dd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' opacity='.04'%3E%3Cpath d='M0 0h80v80H0z' fill='none'/%3E%3C/svg%3E");
}
.wjt-wa-bubble {
    background: #fff;
    border-radius: 0 12px 12px 12px;
    padding: 10px 14px 8px;
    max-width: 88%;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    position: relative;
}
.wjt-wa-bubble::before {
    content: '';
    position: absolute;
    top: 0; left: -8px;
    border: 8px solid transparent;
    border-top-color: #fff;
    border-left: 0;
}
.wjt-wa-bubble p { margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: #111; }
.wjt-wa-time { font-size: 11px; color: #999; float: right; margin-top: 2px; }

/* Footer */
.wjt-wa-footer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    background: #f0f0f0;
    border-top: 1px solid rgba(0,0,0,.06);
}
#wjt-wa-msg {
    flex: 1;
    border: none;
    border-radius: 22px;
    padding: 10px 14px;
    font-size: 14px;
    resize: none;
    outline: none;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    font-family: inherit;
    max-height: 80px;
    overflow-y: auto;
    line-height: 1.4;
}
.wjt-wa-send {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    transition: transform .15s;
}
.wjt-wa-send svg { width: 20px; height: 20px; }
.wjt-wa-send:hover { transform: scale(1.08); }

/* ── Responsive ── */
@media (max-width: 480px) {
    #wjt-wa-box { width: calc(100vw - 24px); border-radius: 14px 14px 0 0; bottom: 0!important; left: 0!important; right: 0!important; }
    .wjt-btn { font-size: 12px; }
}