/* ==========================================================
   WP Department Chat — Frontend Widget (Premium Theme)
   ========================================================== */
#wdc-widget, #wdc-widget *{ box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }

.wdc-widget{ position:fixed; bottom:24px; z-index:999999; }
.wdc-widget.wdc-pos-right{ right:24px; }
.wdc-widget.wdc-pos-left{ left:24px; }

/* ---------- Toggle Button ---------- */
.wdc-toggle-btn{
	width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
	background:var(--wdc-btn-bg,#25D366); color:var(--wdc-btn-color,#fff);
	display:flex; align-items:center; justify-content:center;
	box-shadow:0 10px 30px rgba(0,0,0,.25), 0 0 0 0 rgba(37,211,102,.5);
	transition:transform .2s ease, box-shadow .2s ease;
	animation:wdc-pulse 2.4s infinite;
	position:relative;
}
.wdc-toggle-btn:hover{ transform:scale(1.06); }
.wdc-icon-close{ display:none; font-size:28px; line-height:1; font-weight:300; }
.wdc-widget.wdc-open .wdc-icon-chat{ display:none; }
.wdc-widget.wdc-open .wdc-icon-close{ display:block; }

@keyframes wdc-pulse{
	0%   { box-shadow:0 10px 30px rgba(0,0,0,.25), 0 0 0 0 rgba(37,211,102,.45); }
	70%  { box-shadow:0 10px 30px rgba(0,0,0,.25), 0 0 0 14px rgba(37,211,102,0); }
	100% { box-shadow:0 10px 30px rgba(0,0,0,.25), 0 0 0 0 rgba(37,211,102,0); }
}

/* ---------- Panel ---------- */
.wdc-panel{
	position:absolute; bottom:76px; width:360px; max-width:88vw; max-height:560px;
	background:#fff; border-radius:20px; overflow:hidden;
	box-shadow:0 24px 60px rgba(16,24,40,.25), 0 4px 16px rgba(16,24,40,.1);
	opacity:0; transform:translateY(16px) scale(.97); pointer-events:none;
	transition:opacity .22s ease, transform .22s ease;
	display:flex; flex-direction:column;
}
.wdc-widget.wdc-pos-right .wdc-panel{ right:0; }
.wdc-widget.wdc-pos-left .wdc-panel{ left:0; }
.wdc-widget.wdc-open .wdc-panel{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

.wdc-screen{ display:none; flex-direction:column; height:100%; }
.wdc-screen-active{ display:flex; }

/* ---------- Header ---------- */
.wdc-panel-header{
	background:linear-gradient(135deg, var(--wdc-btn-bg,#25D366) 0%, #128C7E 100%);
	padding:22px 22px 20px; color:#fff; position:relative;
}
.wdc-panel-header h3{ margin:0 0 6px; font-size:18px; font-weight:700; }
.wdc-panel-header p{ margin:0; font-size:13px; opacity:.92; line-height:1.5; white-space:pre-line; }

/* ---------- Department list ---------- */
.wdc-dept-options{ padding:10px; overflow-y:auto; flex:1; background:#F7F8FA; }
.wdc-dept-option{
	width:100%; display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #ECEEF1;
	border-radius:14px; padding:12px 14px; margin-bottom:8px; cursor:pointer; text-align:left; transition:.15s;
}
.wdc-dept-option:hover{ border-color:var(--wdc-btn-bg,#25D366); box-shadow:0 4px 14px rgba(16,24,40,.08); transform:translateY(-1px); }
.wdc-dept-option-icon{ width:42px; height:42px; border-radius:50%; overflow:hidden; flex-shrink:0; background:#EAF9EF; display:flex; align-items:center; justify-content:center; }
.wdc-dept-option-icon img{ width:100%; height:100%; object-fit:cover; }
.wdc-avatar-fallback{ font-weight:700; color:var(--wdc-btn-bg,#25D366); font-size:16px; text-transform:uppercase; }
.wdc-dept-option-text{ flex:1; display:flex; flex-direction:column; }
.wdc-dept-option-text strong{ font-size:13.5px; color:#101828; }
.wdc-dept-option-text em{ font-style:normal; font-size:11.5px; color:#8A94A6; margin-top:2px; }
.wdc-dept-option-arrow{ font-size:22px; color:#C4C9D2; }

.wdc-panel-footer{ text-align:center; padding:10px; font-size:11px; color:#98A2B3; background:#fff; border-top:1px solid #ECEEF1; }
.wdc-panel-footer a{ color:var(--wdc-btn-bg,#25D366); text-decoration:none; font-weight:600; }

/* ---------- Chat screen ---------- */
.wdc-chat-header{ display:flex; align-items:center; gap:10px; padding:16px 18px; }
.wdc-back-btn{ background:rgba(255,255,255,.2); border:none; color:#fff; width:28px; height:28px; border-radius:50%; font-size:20px; cursor:pointer; line-height:1; }
.wdc-chat-avatar{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; }
.wdc-chat-header h4{ margin:0; font-size:14.5px; color:#fff; }
.wdc-chat-header small{ font-size:11px; opacity:.85; color:#fff; }
.wdc-online-dot{ width:7px; height:7px; border-radius:50%; background:#7CFFB2; display:inline-block; margin-right:3px; }

.wdc-chat-body{ flex:1; background:#ECE5DD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3C/svg%3E"); padding:18px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.wdc-chat-bubble{
	background:#fff; padding:10px 14px; border-radius:14px 14px 14px 2px; font-size:13px; line-height:1.5;
	max-width:85%; box-shadow:0 1px 2px rgba(0,0,0,.08); color:#101828;
}
.wdc-offline-bubble{ background:#FFF6ED; color:#B93815; border:1px solid #FEDF89; }

.wdc-chat-input-row{ display:flex; align-items:flex-end; gap:8px; padding:12px; background:#fff; border-top:1px solid #ECEEF1; }
.wdc-chat-input-row textarea{
	flex:1; resize:none; border:1px solid #E4E7EC; border-radius:20px; padding:10px 16px; font-size:13px;
	max-height:80px; font-family:inherit;
}
.wdc-chat-input-row textarea:focus{ outline:none; border-color:var(--wdc-btn-bg,#25D366); }
.wdc-send-btn{
	background:var(--wdc-btn-bg,#25D366); color:var(--wdc-btn-color,#fff); border:none; border-radius:20px;
	padding:0 16px; height:40px; display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap;
	transition:.15s;
}
.wdc-send-btn:hover{ filter:brightness(.94); }

/* ---------- Mobile ---------- */
@media (max-width:480px){
	.wdc-panel{ width:92vw; max-height:75vh; bottom:80px; }
	.wdc-widget.wdc-pos-right{ right:16px; }
	.wdc-widget.wdc-pos-left{ left:16px; }
	.wdc-toggle-btn{ width:56px; height:56px; }
}