/* NORTHLINE 1.8 - contact and private inbox. Works with existing storefront/admin themes. */
.support-home{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;background:#f0f6f3;border-radius:16px}
.support-home h2{margin:0 0 8px}.support-home p{color:#56706a;margin:0}.support-home>div:last-child{display:flex;gap:10px;flex-wrap:wrap}
.support-product-actions{display:flex;gap:9px;flex-wrap:wrap;margin:15px 0 22px}.support-product-actions .btn{font-size:13px}
.support-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}.support-options button{white-space:normal;min-height:60px}.support-options button:disabled{opacity:.6;cursor:not-allowed}
.support-box label,.support-thread label,#north-support-settings label{display:grid;gap:6px;margin:10px 0}.support-box input,.support-box textarea,.support-thread textarea,#north-support-settings input{width:100%;box-sizing:border-box;border:1px solid #d3deda;border-radius:8px;padding:12px;font:inherit}
.support-box textarea,.support-thread textarea{resize:vertical}.support-wechat-id{font-size:24px;font-weight:700;word-break:break-all;background:#eef4f2;padding:14px;margin:12px 0;border-radius:8px}
.support-bell{display:inline-flex;align-items:center;position:relative;padding:8px;color:inherit;text-decoration:none;font-size:20px}.support-unread:not([hidden]){display:inline-flex;justify-content:center;align-items:center;min-width:19px;height:19px;padding:0 4px;border-radius:99px;background:#d82d42;color:white;font-size:11px;font-weight:700}
.support-bell .support-unread{position:absolute;right:-4px;top:0}.support-admin-bell{border:0;background:transparent;position:relative;cursor:pointer;font-size:19px}.support-admin-bell .support-unread{position:absolute;top:-6px;right:-7px}
.support-thread-list{display:grid;gap:10px;margin-top:16px}.support-thread-entry{display:grid;grid-template-columns:1fr auto;gap:5px;text-align:left;border:1px solid #d9e6e1;border-radius:12px;padding:15px;background:white;cursor:pointer;color:#1b302c;align-items:center}.support-thread-entry strong{font-size:15px}.support-thread-entry small{grid-column:1;color:#668077}.support-thread-entry .support-unread{grid-column:2;grid-row:1;justify-self:end}.support-thread-entry:hover{border-color:#208678}
.support-thread{background:white;border:1px solid #dbe6e2;border-radius:14px;padding:20px;margin-top:14px}.support-chat-log{max-height:480px;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:14px 0}.support-bubble{max-width:82%;border-radius:12px;padding:14px;background:#f0f5f3;align-self:flex-start}.support-bubble.mine{align-self:flex-end;background:#d6eee8}.support-bubble p{white-space:pre-wrap;overflow-wrap:anywhere}.support-bubble small{display:block;font-size:11px;color:#637873}
#north-support-settings{max-width:580px}.admin-main #support-admin-inbox{max-width:980px}
@media(max-width:720px){.support-home{display:block}.support-home>div:last-child{margin-top:16px}.support-options{grid-template-columns:1fr}.support-bubble{max-width:95%}.support-bell{padding:4px}.support-product-actions .btn{flex:1}}

.support-bubble .support-message-text{font-family:inherit;font-size:inherit;white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0;}

/* v2.1 operator availability: green means a live admin heartbeat within 90s. */
.support-presence-dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;flex:none;margin-right:3px;background:#9daaa6;box-shadow:0 0 0 2px rgba(157,170,166,.13)}
.support-presence-dot.offline{background:#bf3b3b;box-shadow:0 0 0 2px rgba(191,59,59,.12)}
.support-presence-dot.online{background:#1b9a50;box-shadow:0 0 0 2px rgba(27,154,80,.12)}
.support-presence-status{font-size:.78em;opacity:.75;margin-left:2px}


/* NORTHLINE v2.7.2 — keep support settings, SMTP and recipient rotation in one responsive page. */
.support-admin-settings{width:100%;max-width:2000px;min-width:0;margin:0 auto;padding:30px 34px 80px}
.support-settings-header{margin:0 0 18px;min-width:0}
.support-settings-header h1{margin:0 0 8px;font-size:24px;letter-spacing:-.6px}
.support-settings-header p{margin:0;color:var(--muted);line-height:1.6}
.support-admin-settings .support-settings-card{display:block;min-width:0;margin:0 0 16px}
.support-admin-settings .support-settings-card h2{font-size:14px;margin:0 0 14px}
.support-admin-settings .support-settings-card>p{line-height:1.65;overflow-wrap:anywhere}
.support-admin-settings .support-settings-form{display:grid;gap:14px;align-items:end;max-width:none;width:100%;min-width:0}
.support-admin-settings .support-settings-form>label{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;margin:0;min-width:0;font-size:11px;font-weight:700;color:#50635b;line-height:1.4}
.support-admin-settings .support-settings-form input:not([type="checkbox"]),
.support-admin-settings .support-settings-form select{display:block;width:100%;min-width:0;max-width:100%;height:42px;box-sizing:border-box;border:1px solid #d3dfda;border-radius:8px;padding:9px 11px;background:#fff;color:var(--ink)}
.support-admin-settings .support-settings-form button{justify-self:start;align-self:end;min-height:40px}
.support-admin-settings .support-contact-form{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:8px}
.support-admin-settings .support-contact-form>button{grid-column:1/-1}
.support-admin-settings .support-smtp-form{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px}
.support-admin-settings .support-smtp-form .support-checkbox-field{display:flex;flex-direction:row;align-items:center;gap:9px;min-height:42px}
.support-admin-settings .support-smtp-form .support-checkbox-field input{width:17px;height:17px;flex:0 0 17px;margin:0}
.support-admin-settings .support-email-section{width:100%;min-width:0;margin-top:16px}
.support-admin-settings .support-email-section .table-scroll{width:100%;max-width:100%;overflow-x:auto}
.support-admin-settings .support-email-section .admin-table{width:100%;min-width:680px}
.support-admin-settings .support-recipient-form{grid-template-columns:minmax(180px,2fr) minmax(140px,1.4fr) minmax(110px,.8fr) auto;margin-top:18px}
.support-admin-settings .support-recipient-form h4{grid-column:1/-1;margin:4px 0 0;font-size:13px}
.support-admin-settings .support-recipient-form button{white-space:nowrap}
.support-admin-settings .support-email-section details{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.support-admin-settings .support-email-section details summary{cursor:pointer;font-weight:700}
.support-admin-settings .support-email-section details .form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.support-admin-settings .support-email-section details .form>p{grid-column:1/-1}
.support-admin-settings .support-email-section details .form>label{display:grid;gap:7px;min-width:0;margin:0}
.support-admin-settings .support-email-section details .form input,
.support-admin-settings .support-email-section details .form select{width:100%;min-width:0;box-sizing:border-box}
@media(max-width:1100px){
 .support-admin-settings{padding:24px 22px 60px}
 .support-admin-settings .support-smtp-form{grid-template-columns:repeat(2,minmax(0,1fr))}
 .support-admin-settings .support-recipient-form{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
 .support-admin-settings{padding:16px 12px 40px}
 .support-admin-settings .support-settings-card{padding:16px}
 .support-admin-settings .support-contact-form,
 .support-admin-settings .support-smtp-form,
 .support-admin-settings .support-recipient-form,
 .support-admin-settings .support-email-section details .form{grid-template-columns:minmax(0,1fr)}
 .support-admin-settings .support-contact-form>button,
 .support-admin-settings .support-recipient-form h4,
 .support-admin-settings .support-email-section details .form>p{grid-column:auto}
 .support-admin-settings .support-settings-form button{width:100%;justify-self:stretch}
 .support-admin-settings .support-email-section{padding:16px}
}

/* v2.7.9 private chat and unread support notifications */
.nl-chat-screen{position:fixed;inset:0;z-index:9900;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.nl-chat-shade{position:absolute;inset:0;background:rgba(5,21,18,.52)}
.nl-chat-panel{position:relative;display:flex;flex-direction:column;width:min(100%,680px);height:min(82dvh,760px);max-height:calc(100vh - 28px);min-height:280px;min-width:0;overflow:hidden;background:#fff;border-radius:16px;box-shadow:0 12px 55px #0003;color:#23352f}
.nl-chat-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #e1e9e5;background:#f6faf8;flex:none}
.nl-chat-head>strong{font-size:17px}.nl-chat-head>span{font-size:12px;color:#53796c;flex:1}.nl-chat-close{border:0;background:transparent;color:#354b42;cursor:pointer;font-size:26px;line-height:1;min-width:38px;min-height:38px}
.nl-chat-messages{overflow-y:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:14px;flex:1;min-height:0}
.nl-chat-message{display:flex;align-items:flex-end;gap:8px;width:100%;min-width:0}.nl-chat-message.nl-from-staff{flex-direction:row-reverse;justify-content:flex-start}
.nl-chat-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;flex:0 0 36px;aspect-ratio:1/1;overflow:hidden;border-radius:50%;background:#d9eee6;color:#16786a;font-weight:700;font-size:15px}
.nl-chat-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;z-index:1}
.nl-chat-message-inner{max-width:min(76%,430px);min-width:0;padding:10px 13px;background:#f0f5f3;border-radius:13px;overflow-wrap:anywhere}
.nl-from-staff .nl-chat-message-inner{background:#d8f0e9}.nl-chat-sender{font-size:12px;font-weight:700;margin-bottom:5px;color:#2e6455}.nl-chat-agent-tag{display:inline-block;font-size:11px;background:#147d6d;color:white;border-radius:5px;padding:2px 5px;margin-left:4px}
.nl-chat-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55;font-size:14px}.nl-chat-message time{display:block;text-align:right;color:#668377;font-size:10px;margin-top:5px}
.nl-chat-form{display:flex;gap:10px;padding:12px;border-top:1px solid #e1e9e5;background:#fff;align-items:flex-end;flex:none}
.nl-chat-form textarea{flex:1;min-width:0;max-height:125px;font:inherit;font-size:16px;resize:vertical;border:1px solid #cddbd5;border-radius:10px;padding:10px;line-height:1.5}
.nl-chat-form button{flex:none;white-space:nowrap}
.nl-contact-entry{display:flex;gap:12px;align-items:center}.nl-contact-detail{display:flex;flex-direction:column;flex:1;min-width:0;text-align:left}.nl-contact-detail small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.nl-notifications{position:fixed;z-index:9700;width:min(360px,calc(100vw - 16px));max-height:min(420px,65vh);overflow:auto;background:#fff;color:#1e3930;border:1px solid #d8e5e0;box-shadow:0 16px 40px #0002;border-radius:13px;padding:9px;box-sizing:border-box}
.nl-notify-title{font-weight:700;font-size:14px;padding:10px 12px;border-bottom:1px solid #e9eeeb}.nl-notify-list{display:grid;gap:3px}.nl-notify-empty{padding:18px;color:#668075;text-align:center;font-size:13px}
.nl-notify-item{display:flex;align-items:center;width:100%;gap:10px;min-height:55px;background:white;border:0;border-radius:9px;text-align:left;padding:8px 10px;cursor:pointer;color:inherit}
.nl-notify-item:hover,.nl-notify-item:focus-visible{background:#edf6f2}.nl-notify-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
@media(max-width:640px){.nl-chat-screen{padding:0}.nl-chat-panel{width:100%;height:100dvh;max-height:100dvh;border-radius:0}.nl-chat-messages{padding:12px}.nl-chat-message-inner{max-width:75%}.nl-chat-form{padding:10px}.nl-chat-avatar{width:32px;height:32px;min-width:32px;flex-basis:32px}}
@media(prefers-reduced-motion:reduce){.nl-chat-panel,.nl-chat-screen *{animation:none!important;transition:none!important}}

/* v2.8.1 quick-reply emoji selector + per-message product context */
.nl-chat-emoji-button{border:1px solid #d4e2dc;background:#fff;border-radius:8px;padding:8px 11px;min-height:40px;font-size:22px;cursor:pointer;flex:0 0 auto}
.nl-emoji-picker{position:absolute;bottom:82px;left:12px;max-width:min(320px,calc(100vw - 30px));display:grid;grid-template-columns:repeat(5,minmax(36px,1fr));padding:10px;gap:6px;border:1px solid #d5e5df;background:#fff;border-radius:12px;box-shadow:0 10px 30px #0002;z-index:6}
.nl-emoji-picker[hidden]{display:none!important}.nl-emoji-picker button{background:#f5faf7;border:0;border-radius:7px;cursor:pointer;padding:7px 4px;font-size:22px}
#nl-chat-product-context[hidden]{display:none}#nl-chat-product-context{border-bottom:1px solid #e5eeea;padding:8px 13px;background:#f6faf8}
#nl-chat-product-context>a{display:flex;align-items:center;gap:10px;color:#175b4e;text-decoration:none;overflow-wrap:anywhere}
#nl-chat-product-context img{width:46px;height:46px;flex:none;object-fit:cover;border-radius:6px}#nl-chat-product-context small{display:block;font-size:11px;color:#76998e}
.nl-message-product{display:block;background:#e3f3ec;color:#156b57;border-radius:6px;padding:6px 8px;font-size:11px;text-decoration:none;margin-bottom:6px;overflow-wrap:anywhere}
@media(max-width:390px){.nl-chat-form{gap:6px}.nl-chat-emoji-button{font-size:19px;padding:6px 8px}}

/* v2.8.2: consistent badge rendering and product context for Chrome / Edge */
#admin-support-bell .support-unread:not([hidden]),#north-support-bell .support-unread:not([hidden]){display:inline-flex!important;position:absolute;z-index:2;box-sizing:border-box;min-width:20px;height:20px;line-height:1;align-items:center;justify-content:center;font:700 11px/1 system-ui,sans-serif;background:#d82d42;color:#fff;border-radius:99px;border:2px solid #fff;padding:0 3px;white-space:nowrap}
#admin-support-bell .support-unread[hidden],#north-support-bell .support-unread[hidden]{display:none!important}
.nl-chat-panel{isolation:isolate}.nl-chat-messages{scrollbar-gutter:stable;min-height:0}
#nl-chat-product-context{position:relative;z-index:1;flex-shrink:0;max-height:98px;overflow:auto;overscroll-behavior:contain}
#nl-chat-product-context>a{width:100%;min-width:0}
#nl-chat-product-context span{min-width:0;overflow-wrap:anywhere}

/* v2.8.3 — optional side-by-side original and translated support content */
.nl-chat-translation-note{font-size:11px;padding:5px 14px;margin:0;color:#607c71;background:#f7faf9;border-bottom:1px solid #e7efeb;line-height:1.5}
.nl-chat-translated{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.5;margin-top:8px;padding-top:8px;border-top:1px solid #c6dcd4;color:#13624f}
.nl-chat-translated::before{content:'🌐 ';font-size:12px}
.nl-chat-translation-error{display:block;color:#a54d2f;margin-top:4px}

.nl-chat-avatar.nl-guest-avatar b{font-size:11px;letter-spacing:-.05em;white-space:nowrap}

/* v2.8.3 corrected: opt-in language override for ambiguous/short chats. */
.nl-chat-language-choice{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 14px;background:#f7faf9;border-bottom:1px solid #e4ece8;font-size:12px;color:#355d50;flex:none;min-width:0}
.nl-chat-language-choice span{min-width:0;overflow-wrap:anywhere}
.nl-chat-language-choice select{font:inherit;font-size:16px;max-width:50%;min-width:125px;padding:5px;border:1px solid #cfdbd4;border-radius:6px;background:white}
@media(max-width:350px){.nl-chat-language-choice{gap:4px;padding:6px 8px}.nl-chat-language-choice select{min-width:120px}}

/* v2.10.2: no interim "checking" state; unknown server result has no badge. */
.support-presence-dot[hidden],.support-presence-status[hidden]{display:none!important}

/* v2.10.19: customer messages page return navigation */
.support-customer-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 18px}
.support-customer-head h1{margin:0}
@media(max-width:600px){.support-customer-head{align-items:flex-start;flex-direction:column}.support-customer-head .btn{align-self:flex-start}}