*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Noto Sans Myanmar","Noto Sans Thai",sans-serif;background:#eef2f7;color:#172033}.app{max-width:820px;height:100dvh;margin:auto;background:#fff;display:flex;flex-direction:column;box-shadow:0 0 30px #0001}header{height:68px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e6e9ef}header b{font-size:20px}header small{display:block;color:#718096;margin-top:2px}header a{text-decoration:none;color:#64748b}.messages{flex:1;overflow:auto;padding:18px;background:#f6f8fb}.msg{max-width:78%;margin:9px 0;padding:10px 13px;border-radius:17px;background:#fff;box-shadow:0 2px 10px #0000000c}.msg.mine{margin-left:auto;background:#dff6e8}.msg small,.msg time{font-size:11px;color:#7a8598;display:block}.msg div{white-space:pre-wrap;line-height:1.55;margin:3px 0}.msg details{font-size:12px;margin-top:7px;color:#667085}.msg summary{cursor:pointer}.composer{display:flex;gap:8px;padding:10px max(10px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom));border-top:1px solid #e6e9ef}.composer textarea{flex:1;resize:none;border:1px solid #d7dce5;border-radius:22px;padding:11px 15px;font:inherit;outline:none}.composer button,.login-card button{border:0;border-radius:22px;background:#1677ff;color:#fff;padding:0 18px;font-size:18px}.login-body{min-height:100dvh;display:grid;place-items:center;padding:20px}.login-card{width:min(390px,100%);background:#fff;padding:28px;border-radius:20px;box-shadow:0 15px 50px #0002;display:grid;gap:12px}.login-card h1{margin:0}.login-card p{margin:0 0 8px;color:#718096}.login-card input{padding:13px;border:1px solid #d7dce5;border-radius:12px;font:inherit}.login-card button{height:46px}.login-card small{color:#718096}.error{background:#fee2e2;color:#991b1b;padding:10px;border-radius:10px}@media(max-width:600px){.app{max-width:none}.messages{padding:12px}.msg{max-width:88%}}

.kk-inbound-image{display:block;max-width:min(260px,75vw);max-height:320px;width:auto;height:auto;object-fit:contain;border-radius:10px;margin:6px 0;cursor:zoom-in;}

/* V1.4.6: in-chat image gallery */
.kk-image-trigger{display:inline-block;padding:0;border:0;background:transparent;cursor:zoom-in;margin:4px 5px 4px 0;vertical-align:top}
.kk-image-trigger:focus-visible{outline:3px solid #1677ff;outline-offset:3px;border-radius:12px}
.kk-lightbox[hidden]{display:none!important}
.kk-lightbox{position:fixed;inset:0;z-index:99999;background:rgba(8,15,28,.94);display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.kk-lightbox-image{max-width:calc(100vw - 120px);max-height:calc(100dvh - 100px);object-fit:contain;user-select:none;-webkit-user-drag:none}
.kk-lightbox-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top)) 18px 12px;color:#fff;font-size:14px}
.kk-lightbox button{color:#fff;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);border-radius:999px;cursor:pointer}
.kk-lightbox button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.kk-lightbox-close{width:42px;height:42px;font-size:20px}
.kk-lightbox-prev,.kk-lightbox-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:56px;font-size:23px}
.kk-lightbox-prev{left:12px}.kk-lightbox-next{right:12px}
.kk-lightbox button:disabled{opacity:.25;cursor:default}
body.kk-lightbox-open{overflow:hidden}
@media(max-width:600px){.kk-lightbox-image{max-width:calc(100vw - 20px);max-height:calc(100dvh - 130px)}.kk-lightbox-prev,.kk-lightbox-next{top:auto;bottom:calc(14px + env(safe-area-inset-bottom));transform:none}.kk-lightbox-prev{left:calc(50% - 62px)}.kk-lightbox-next{right:calc(50% - 62px)}}

/* V1.4.10: customer-side Messenger read status */
.kk-customer-read,.kk-customer-sent{display:block;font-size:11px;text-align:right;margin-top:3px;color:#64748b}.kk-customer-read{color:#1877f2;font-weight:600}

/* V1.4.11: discreet, LINE-inspired outbound status */
.msg time.kk-message-meta{display:flex;align-items:center;gap:7px;font-size:10px;line-height:1.35;color:#8793a3;white-space:nowrap;flex-wrap:wrap}
.msg.mine time.kk-message-meta{justify-content:flex-end}
.msg .kk-customer-read,.msg .kk-customer-sent{display:inline;font-size:10px;line-height:1.35;font-weight:400;margin:0;color:#8295a0;text-align:inherit}
.msg .kk-customer-read{color:#598d80}
