.wa-widget {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
}
.wa-tab { display: flex; align-items: center; cursor: pointer; }
.wa-icon-wrap {
    width: 52px; height: 52px;
    background: linear-gradient(145deg, #25D366, #128C7E);
    border-radius: 0 14px 14px 0;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 4px 4px 18px rgba(37,211,102,0.45);
    position: relative;
    transition: border-radius 0.3s ease;
}
.wa-icon-wrap svg { width: 26px; height: 26px; fill: #fff; transition: transform 0.3s; }
.wa-icon-wrap::after {
    content: ''; position: absolute; top: 8px; right: 8px;
    width: 9px; height: 9px; background: #a8ffcc;
    border-radius: 50%; border: 2px solid #128C7E;
    animation: wa-blink 2s infinite;
}
@keyframes wa-blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
.wa-pulse-ring {
    position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid #fff;
    animation: wa-pulse 2.2s ease-out infinite;
    pointer-events: none;
}
@keyframes wa-pulse { 0%{transform:scale(0.85);opacity:0.8} 100%{transform:scale(1.5);opacity:0} }
.wa-panel {
    background: #fff; border-radius: 0 16px 16px 0;
    box-shadow: 4px 4px 24px rgba(0,0,0,0.10);
    overflow: hidden; max-width: 0; opacity: 0;
    transition: max-width 0.4s cubic-bezier(0.34,1.2,0.64,1), opacity 0.3s ease;
    white-space: nowrap; pointer-events: none;
}
.wa-panel-inner { padding: 14px 20px 14px 16px; display: flex; align-items: center; gap: 12px; }
.wa-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, #25D366, #075e54);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 17px; font-weight: 600; flex-shrink: 0;
}
.wa-info { display: flex; flex-direction: column; gap: 2px; }
.wa-label { font-size: 10px; color: #aaa; text-transform: uppercase; letter-spacing: 0.8px; }
.wa-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.wa-status { font-size: 11px; color: #25D366; }
.wa-chat-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #25D366; color: #fff; border-radius: 30px;
    padding: 7px 16px; font-size: 13px; font-weight: 600;
    text-decoration: none; margin-left: 6px;
    transition: background 0.2s, transform 0.2s;
    white-space: nowrap;
}
.wa-chat-btn svg { width: 14px; height: 14px; fill: #fff; }
.wa-chat-btn:hover { background: #128C7E; transform: scale(1.04); }
.wa-widget:hover .wa-panel { max-width: 340px; opacity: 1; pointer-events: all; }
.wa-widget:hover .wa-icon-wrap { border-radius: 0; }
.wa-widget:hover .wa-icon-wrap svg { transform: scale(1.15); }
@media (max-width: 480px) {
    .wa-icon-wrap { width: 44px; height: 44px; }
    .wa-panel-inner { padding: 10px 12px; gap: 8px; }
    .wa-avatar { width: 34px; height: 34px; font-size: 13px; }
    .wa-chat-btn { padding: 6px 10px; font-size: 12px; }
}