:root {
	--jwchat-max: 380px;
	--jwchat-side-w: 250px;
	--jwchat-gap: 26px;

	--jwchat-phone-h: 620px;
	--jwchat-radius: 22px;
	--jwchat-border: #e5e7eb;
	--jwchat-muted: #6b7280;
	--jwchat-bg: #ffffff;
	--jwchat-soft: #f6f7f9;
	--jwchat-shadow: 0 18px 45px rgba(0,0,0,.08);
	--jwchat-shadow2: 0 10px 30px rgba(0,0,0,.10);
}
/* layout */
.jwchat-wrap { width: 100%; position: relative; padding: 30px 16px; background: var(--jwchat-bg); }
.jwchat-center { width: 100%; display:flex; justify-content: center; align-items: flex-start; }
.jwchat-phone { width: 100%; max-width: var(--jwchat-max); }
.jwchat-side { width: var(--jwchat-side-w); position: absolute; left: calc(50% + (var(--jwchat-max) / 2) + var(--jwchat-gap)); top: 30px; }


/* phone */
.jwchat-phone { height: var(--jwchat-phone-h); border: 1px solid rgba(0,0,0,.12); border-radius: var(--jwchat-radius); background: #fff; box-shadow: var(--jwchat-shadow); overflow: hidden; display: flex; flex-direction: column; }
.jwchat-phone-top { padding: 16px 18px; border-bottom: 1px solid var(--jwchat-border); background: linear-gradient(180deg, #fff 0%, var(--jwchat-soft) 100%); }
.jwchat-title { font-size: 14px; font-weight: 800; letter-spacing: .2px; }
.jwchat-sub { font-size: 12px; color: var(--jwchat-muted); margin-top: 2px; }

/* messages */
.jwchat-body { flex: 1; padding: 16px 14px; overflow: auto; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.jwchat-msg { display: flex; flex-direction: column; gap: 6px; max-width: 78%; }
.jwchat-msg-left { align-self: flex-start; }
.jwchat-msg-right { align-self: flex-end; }

.jwchat-bubble { padding: 10px 12px; border-radius: 14px; font-size: 13px; line-height: 1.35; border: 1px solid var(--jwchat-border); background: #f3f4f6; color: #111; }
.jwchat-msg-right .jwchat-bubble { background: rgba(254,129,48,.12); border-color: rgba(254,129,48,.35); }
.jwchat-time { font-size: 11px; color: #9ca3af; opacity: .8;  }
.jwchat-msg-right .jwchat-time { text-align: right; }

/* input */
.jwchat-input { padding: 12px; border-top: 1px solid var(--jwchat-border); background: #fff; display: flex; gap: 10px; }
.jwchat-text { flex: 1; height: 40px; padding: 0 12px; border: 1px solid var(--jwchat-border); border-radius: 999px; background: var(--jwchat-soft); font-size: 13px; }
.jwchat-text:focus { border-color: rgba(254,129,48,.55); box-shadow: 0 0 0 4px rgba(254,129,48,.15); }
.jwchat-send { height: 40px; padding: 0 14px; border-radius: 999px; background: var(--sunbursi-orange); color: #fff; font-weight: 800; border: 1px solid rgba(0,0,0,.05); box-shadow: 0 8px 18px rgba(254,129,48,.25); }
.jwchat-send:hover { filter: brightness(.98); }
.jwchat-send:active { transform: translateY(1px); }

/* side card */
.jwchat-side-card { width: 100%; border: 1px solid var(--jwchat-border); border-radius: 16px; background: #fff; box-shadow: var(--jwchat-shadow2); padding: 16px; }
.jwchat-side-title { font-size: 13px; font-weight: 900; margin-bottom: 10px; }
.jwchat-side-desc { margin-top: 10px; font-size: 12px; color: var(--jwchat-muted); }

/* switch (rework) */
.jwchat-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.jwchat-switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jwchat-switch-ui { width: 48px; height: 28px; border-radius: 999px; background:#edf1f5; border: 1px solid #d1d5db; position: relative; transition: background .2s, border-color .2s; }
.jwchat-switch-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.12); transition: left .2s; }
.jwchat-switch-input:checked + .jwchat-switch-ui { background: var(--sunbursi-orange); border-color: rgba(0,0,0,.08); }
.jwchat-switch-input:checked + .jwchat-switch-ui::after { left: 22px; }
.jwchat-switch-input:focus-visible + .jwchat-switch-ui { outline: 2px solid #222; outline-offset: 3px; }
.jwchat-switch-text { font-size: 12px; font-weight: 900; letter-spacing: .3px; color: #9ca3af; min-width: 34px; }
.jwchat-switch-input:checked ~ .jwchat-switch-text { color: var(--sunbursi-orange); }

/* responsive */
@media (max-width: 980px) {
	.jwchat-side { position: static; width: 100%; max-width: var(--jwchat-max); margin: 16px auto 0 auto; }
}
.jwchat-room { width: 100%; height: 36px; border: 1px solid var(--jwchat-border); border-radius: 10px; padding: 0 10px; background: #fff; }
.jwchat-side-status { margin-top: 14px; font-size: 12px; color: #666; line-height: 1.6; }

.jwchat-room { display:block; }

.jwchat-name { font-size: 12px; color: #666; margin: 0 0 4px 0; padding: 0 2px; opacity: .9; }
.jwchat-msg-right .jwchat-name { text-align: right; }
.jwchat-msg-left .jwchat-name { text-align: left; }

.jwchat-meta { display: flex; gap: 8px; font-size: 12px; color: #666; margin-top: 4px; }

.jwchat-msg-right .jwchat-meta { justify-content: flex-end; }
.jwchat-msg-left .jwchat-meta { justify-content: flex-start; }