/* Introduction channel — PHWO Rishta Desk */
.phwo-chat-main { padding: clamp(18px, 3vw, 36px) 0 clamp(28px, 4vw, 56px); background: #f2f6f6; }
.phwo-chat-card, .phwo-chat-app { max-width: 820px; margin: 0 auto; background: #fff; border-radius: 22px; box-shadow: 0 18px 50px rgba(13, 92, 99, .12), 0 1px 0 rgba(0,0,0,.04); overflow: hidden; }

/* gate */
.phwo-chat-gate { padding: clamp(28px, 5vw, 56px); text-align: center; max-width: 560px; }
.phwo-chat-gate-icon { width: 72px; height: 72px; margin: 0 auto 1rem; display: grid; place-items: center; font-size: 2rem; border-radius: 50%; background: #e2f4f0; }
.phwo-chat-gate h1 { font-family: var(--phwo-font-head, Georgia, serif); font-size: clamp(1.5rem, 3vw, 2rem); margin: .3rem 0 .6rem; }
.phwo-chat-gate p { color: #4c5c62; }
.phwo-chat-pin-form { display: grid; gap: .6rem; justify-items: center; margin: 1.4rem 0 .8rem; }
.phwo-chat-pin-form label { font-weight: 600; font-size: .9rem; }
.phwo-chat-pin-form input { width: 11rem; font-size: 2rem; letter-spacing: .6em; text-align: center; padding: .5rem .2rem .5rem .8rem; border: 2px solid #cfdcdd; border-radius: 14px; font-variant-numeric: tabular-nums; }
.phwo-chat-pin-form input:focus { outline: none; border-color: var(--phwo-color-primary, #0D5C63); box-shadow: 0 0 0 4px rgba(13,92,99,.15); }
.phwo-chat-error { background: #fde8e8; color: #9b1c1c; padding: .6rem .9rem; border-radius: 10px; font-size: .92rem; }
.phwo-chat-fine { font-size: .8rem; color: #6b7a80; }

/* app */
.phwo-chat-app { display: flex; flex-direction: column; height: min(78vh, 820px); min-height: 520px; }
.phwo-chat-head { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.2rem; background: linear-gradient(135deg, #0D5C63, #14807f); color: #fff; }
.phwo-chat-avatar { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; font-weight: 700; font-size: 1.15rem; flex: none; border: 2px solid rgba(255,255,255,.35); }
.phwo-chat-who { flex: 1; min-width: 0; line-height: 1.25; }
.phwo-chat-who strong { display: block; font-size: 1.05rem; }
.phwo-chat-who strong span { font-weight: 400; opacity: .85; font-size: .9rem; }
.phwo-chat-who small { display: block; opacity: .85; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phwo-chat-state { padding: .05rem .45rem; border-radius: 999px; background: rgba(255,255,255,.18); }
.phwo-chat-app[data-status="open"] .phwo-chat-state { background: #2fbf8f; color: #fff; }
.phwo-chat-you { font-size: .78rem; opacity: .9; text-align: right; white-space: nowrap; }
.phwo-chat-rules { display: flex; flex-wrap: wrap; gap: .35rem .9rem; padding: .55rem 1.2rem; background: #f4fafa; border-bottom: 1px solid #e3ecec; font-size: .76rem; color: #3f5257; }
.phwo-chat-notice { margin: .8rem 1.2rem 0; padding: .7rem .9rem; border-radius: 12px; background: #fff6e5; color: #7a4b00; font-size: .9rem; border: 1px solid #ffe2b0; }
.phwo-chat-notice[hidden] { display: none; }

.phwo-chat-log { flex: 1; overflow-y: auto; padding: 1rem 1.2rem; background: #f7f9f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%230d5c63' stroke-opacity='.05'%3E%3Ccircle cx='30' cy='30' r='18'/%3E%3Ccircle cx='90' cy='90' r='18'/%3E%3C/g%3E%3C/svg%3E"); scroll-behavior: smooth; }
.phwo-chat-empty { text-align: center; color: #6b7a80; font-size: .9rem; max-width: 34rem; margin: 2rem auto; }
.phwo-chat-empty[hidden] { display: none; }
.phwo-chat-day { text-align: center; margin: .8rem 0; }
.phwo-chat-day span { display: inline-block; font-size: .72rem; color: #56666b; background: #e6eeee; padding: .2rem .7rem; border-radius: 999px; }
.phwo-chat-msg { display: flex; margin: .25rem 0; }
.phwo-chat-msg.is-me { justify-content: flex-end; }
.phwo-chat-msg.is-staff { justify-content: center; }
.phwo-chat-bubble { max-width: min(78%, 520px); padding: .55rem .85rem .35rem; border-radius: 16px; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.06); font-size: .96rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; position: relative; }
.phwo-chat-msg.is-them .phwo-chat-bubble { border-bottom-left-radius: 5px; }
.phwo-chat-msg.is-me .phwo-chat-bubble { background: #dff3ee; border-bottom-right-radius: 5px; }
.phwo-chat-msg.is-staff .phwo-chat-bubble { background: #fff6e5; border: 1px solid #ffe2b0; max-width: 90%; font-size: .9rem; }
.phwo-chat-msg.is-staff .phwo-chat-bubble::before { content: "PHWO staff"; display: block; font-size: .7rem; font-weight: 700; color: #b86e00; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .15rem; }
.phwo-chat-time { display: block; text-align: right; font-size: .68rem; color: #7c8b90; margin-top: .15rem; }
.phwo-chat-msg.is-pending .phwo-chat-bubble { opacity: .6; }

.phwo-chat-warn { margin: 0 1.2rem; padding: .7rem .9rem; border-radius: 12px; background: #fde8e8; color: #9b1c1c; font-size: .9rem; border: 1px solid #f5c2c2; }
.phwo-chat-warn.is-final { background: #9b1c1c; color: #fff; border-color: #9b1c1c; }
.phwo-chat-warn[hidden] { display: none; }

.phwo-chat-compose { display: flex; align-items: flex-end; gap: .6rem; padding: .8rem 1.2rem; border-top: 1px solid #e3ecec; background: #fff; }
.phwo-chat-compose[hidden] { display: none; }
.phwo-chat-compose textarea { flex: 1; resize: none; border: 1.5px solid #cfdcdd; border-radius: 22px; padding: .7rem 1rem; font: inherit; font-size: 1rem; line-height: 1.4; max-height: 8rem; background: #f7f9f9; }
.phwo-chat-compose textarea:focus { outline: none; border-color: var(--phwo-color-primary, #0D5C63); background: #fff; box-shadow: 0 0 0 4px rgba(13,92,99,.12); }
.phwo-chat-send { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--phwo-color-primary, #0D5C63); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; transition: transform .12s, background .12s; }
.phwo-chat-send:hover { transform: scale(1.05); background: #0b4d53; }
.phwo-chat-send:disabled { opacity: .5; cursor: default; transform: none; }
.phwo-chat-foot { text-align: center; padding: .5rem 1.2rem .9rem; margin: 0; background: #fff; }
.phwo-chat-offline { position: sticky; top: 0; z-index: 2; text-align: center; font-size: .78rem; background: #ffe2b0; color: #7a4b00; padding: .25rem; }

@media (max-width: 640px) {
	.phwo-chat-main { padding: 0 0 1rem; }
	.phwo-chat-main .phwo-container { padding: 0; }
	.phwo-chat-app { border-radius: 0; height: calc(100vh - 140px); min-height: 460px; box-shadow: none; }
	.phwo-chat-card { border-radius: 16px; margin: 1rem; }
	.phwo-chat-you { display: none; }
	.phwo-chat-rules { gap: .25rem .6rem; font-size: .72rem; }
	.phwo-chat-bubble { max-width: 86%; }
}