/* ZoChat Frontend Styles */
#zochat-widget { --zochat-primary: #25D366; --zochat-bg: #ffffff; --zochat-text: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; }

/* Floating Button */
.zochat-float-btn { position: fixed; bottom: 24px; right: 24px; z-index: 99999; display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--zochat-primary); color: #fff; border: none; border-radius: 50px; cursor: pointer; font-size: 15px; font-weight: 600; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); transition: all 0.3s ease; }
.zochat-float-btn:hover { transform: scale(1.05); box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5); }
.zochat-wa-icon { width: 24px; height: 24px; flex-shrink: 0; }
.zochat-btn-text { white-space: nowrap; }

/* Panel */
.zochat-panel { position: fixed; bottom: 90px; right: 24px; z-index: 99998; width: 340px; max-width: calc(100vw - 40px); max-height: calc(100vh - 120px); background: var(--zochat-bg); color: var(--zochat-text); border-radius: 16px; overflow: hidden; display: none; flex-direction: column; }
.zochat-panel.zochat-open { display: flex; }
.zochat-panel.zochat-shadow { box-shadow: 0 10px 40px rgba(0,0,0,0.15); }
.zochat-animated .zochat-panel { animation: zochatSlideUp 0.3s ease; }
@keyframes zochatSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Close Button */
.zochat-close-btn { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; background: rgba(0,0,0,0.08); border: none; border-radius: 50%; font-size: 20px; line-height: 26px; cursor: pointer; color: #666; transition: all 0.2s; }
.zochat-close-btn:hover { background: rgba(0,0,0,0.15); color: #333; }

/* Header */
.zochat-header { padding: 20px; background: linear-gradient(135deg, var(--zochat-primary), #128C7E); color: #fff; display: flex; align-items: center; gap: 14px; }
.zochat-main-photo { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.3); flex-shrink: 0; }
.zochat-header-text { flex: 1; min-width: 0; }
.zochat-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.zochat-subtitle { margin: 0; font-size: 13px; opacity: 0.9; line-height: 1.4; }

/* Admins List */
.zochat-admins { padding: 12px; overflow-y: auto; flex: 1; }
.zochat-admin-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: #f8f9fa; border-radius: 12px; text-decoration: none; color: var(--zochat-text); margin-bottom: 8px; transition: all 0.2s; }
.zochat-admin-item:last-child { margin-bottom: 0; }
.zochat-admin-item:hover { background: #f0f1f2; transform: translateX(4px); }
.zochat-admin-photo { width: 40px; height: 40px; flex-shrink: 0; }
.zochat-admin-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.zochat-admin-avatar { width: 40px; height: 40px; background: var(--zochat-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; }
.zochat-admin-info { flex: 1; min-width: 0; }
.zochat-admin-name { display: block; font-weight: 600; font-size: 14px; color: #1a1a1a; }
.zochat-admin-role { display: block; font-size: 12px; color: #666; }
.zochat-admin-hours { display: block; font-size: 11px; color: #999; }
.zochat-chat-btn { padding: 8px 14px; background: var(--zochat-primary); color: #fff; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; }

/* Social Links */
.zochat-social { display: flex; justify-content: center; gap: 12px; padding: 12px 16px; border-top: 1px solid #eee; }
.zochat-social-link { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #f0f0f0; border-radius: 50%; color: #555; transition: all 0.2s; }
.zochat-social-link:hover { background: var(--zochat-primary); color: #fff; transform: scale(1.1); }
.zochat-social-link svg { width: 18px; height: 18px; }

/* Custom Links */
.zochat-links { padding: 12px 16px; border-top: 1px solid #eee; }
.zochat-link-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f8f9fa; border-radius: 10px; text-decoration: none; color: var(--zochat-text); margin-bottom: 6px; transition: all 0.2s; font-size: 14px; }
.zochat-link-item:last-child { margin-bottom: 0; }
.zochat-link-item:hover { background: #eef; }
.zochat-link-icon { font-size: 18px; }
.zochat-link-title { font-weight: 500; }

/* Shortcode Styles */
.zochat-shortcode-list { display: flex; flex-direction: column; gap: 12px; }
.zochat-sc-item { display: flex; align-items: center; gap: 12px; padding: 16px; background: #f9f9f9; border-radius: 12px; }
.zochat-sc-photo { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.zochat-sc-info { flex: 1; }
.zochat-sc-info strong { display: block; font-size: 16px; }
.zochat-sc-info span { font-size: 13px; color: #666; }
.zochat-sc-btn { padding: 10px 18px; background: #25D366; color: #fff; text-decoration: none; border-radius: 24px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.zochat-sc-btn:hover { background: #1fb855; }

/* Mobile Responsive */
@media (max-width: 480px) {
    .zochat-float-btn { bottom: 16px; right: 16px; padding: 10px 16px; font-size: 14px; }
    .zochat-wa-icon { width: 22px; height: 22px; }
    .zochat-panel { bottom: 80px; right: 16px; width: calc(100vw - 32px); max-height: calc(100vh - 100px); }
    .zochat-header { padding: 16px; }
    .zochat-main-photo { width: 44px; height: 44px; }
    .zochat-title { font-size: 15px; }
    .zochat-subtitle { font-size: 12px; }
}