html,body{height:100%;margin:0;overflow-x:hidden}
body.standalone{background:#111b21;display:flex;align-items:center;justify-content:center}
body.standalone .cc-wrap{width:420px;height:640px;max-height:92vh;border-radius:10px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.4)}
body.embedded .cc-wrap{width:100%;height:100%}
.cc-wrap{display:flex;flex-direction:column;background:var(--chat-background);font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.cc-header{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--primary-dark);color:#fff}
.cc-avatar{width:36px;height:36px;border-radius:50%;background:#fff;color:var(--primary-dark);display:flex;align-items:center;justify-content:center;font-weight:700}
.cc-header-text{flex:1;min-width:0}
.cc-title{font-size:14px;font-weight:600}
.cc-status{font-size:11px;opacity:.85}
.cc-close{background:none;border:none;color:#fff;font-size:16px;cursor:pointer}
.cc-messages{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 4%;display:flex;flex-direction:column;gap:3px;scroll-behavior:smooth}
.cc-loading{text-align:center;color:var(--text-secondary);font-size:13px;padding:20px}
.date-sep{align-self:center;background:rgba(255,255,255,.7);color:var(--text-secondary);font-size:11px;padding:4px 10px;border-radius:8px;margin:8px 0}
.msg-row{display:flex;margin:2px 0;transition:background-color 1s ease-out}
.msg-row.out{justify-content:flex-end}
.bubble{max-width:78%;padding:7px 10px;border-radius:8px;font-size:14px;line-height:1.4;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.msg-row.in .bubble{background:var(--incoming-message)}
.msg-row.out .bubble{background:var(--outgoing-message)}
.msg-row.sys .bubble{background:#FFF3CD;margin:6px auto;font-size:12px;text-align:center;color:#665}
.bubble .meta{display:flex;gap:4px;justify-content:flex-end;margin-top:3px;font-size:10px;color:var(--text-secondary)}
.bubble img{max-width:200px;border-radius:6px;display:block;margin-top:4px}
.bubble a.file-link{display:block;margin-top:4px;font-size:12px;color:var(--info)}
.cc-typing{padding:2px 4% 0;font-size:12px;color:var(--text-secondary);font-style:italic}
.cc-composer{display:flex;align-items:flex-end;gap:6px;padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));background:var(--panel-bg)}
body.ssc-keyboard-open .cc-composer{padding-bottom:10px}
.cc-composer textarea{flex:1;resize:none;border:none;border-radius:20px;padding:10px 14px;font-size:16px;max-height:100px;font-family:inherit}
.cc-attach{padding:6px;cursor:pointer;font-size:17px}
.cc-send{background:var(--primary-color);color:#fff;border:none;border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:15px}

.cc-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.cc-modal{background:#fff;border-radius:12px;padding:20px;width:100%;max-width:320px;box-shadow:0 8px 30px rgba(0,0,0,.2)}
.cc-modal h3{font-size:15px;margin:0 0 14px;color:var(--text-primary);line-height:1.4}
.cc-modal label{display:block;font-size:12px;color:var(--text-secondary);margin:10px 0 4px}
.cc-modal input{width:100%;padding:9px 10px;border:1px solid var(--border-color);border-radius:8px;font-size:16px;box-sizing:border-box}

.cc-phone-row{display:flex;gap:6px}
.cc-country-btn{display:flex;align-items:center;gap:4px;padding:9px 8px;border:1px solid var(--border-color);border-radius:8px;background:#fff;cursor:pointer;font-size:14px;flex-shrink:0;white-space:nowrap}
.cc-country-btn .cc-caret{font-size:10px;color:var(--text-secondary)}
.cc-phone-row input{flex:1;min-width:0}
.cc-country-dropdown{position:relative;margin-top:6px;border:1px solid var(--border-color);border-radius:8px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.1);max-height:220px;overflow:hidden;display:flex;flex-direction:column}
.cc-country-dropdown input{border:none;border-bottom:1px solid var(--border-color);border-radius:0;font-size:14px}
#ccCountryList{overflow-y:auto}
.cc-country-item{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;font-size:13px}
.cc-country-item:hover{background:var(--panel-bg)}
.cc-country-item .dial{color:var(--text-secondary);margin-left:auto}
.cc-continue-btn{width:100%;margin-top:16px;padding:10px;background:var(--primary-color);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer}
.cc-modal-error{color:#B91C1C;font-size:12px;margin-top:8px}

/* Read receipt ticks */
.tick-read{color:#53BDEB;font-weight:700}
.tick-delivered,.tick-sent{opacity:.75}

/* Scroll-to-bottom / new-message indicator */
.cc-wrap{position:relative}
.scroll-bottom-pill{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--border-color);
  border-radius:20px;padding:6px 14px;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,.15);cursor:pointer;display:none;align-items:center;gap:6px;z-index:10}
.scroll-bottom-pill.show{display:flex}
.scroll-bottom-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--primary-color)}

/* MOBILE: full-screen takeover with keyboard-aware height.
   100dvh is the CSS-only fallback (no JS / no visualViewport support);
   customer-chat.js sets an explicit px height via the Visual Viewport
   API on top of this for browsers that support it, which is what
   actually keeps the composer pinned just above the keyboard instead
   of floating off-screen or letting the page scroll underneath it. */
@media (max-width: 480px) {
  body.standalone{padding:0}
  body.standalone .cc-wrap, body.embedded .cc-wrap{
    width:100vw;height:100dvh;max-height:none;border-radius:0;box-shadow:none;
    position:fixed;inset:0;
  }
  .cc-modal{max-width:calc(100vw - 40px)}
}

/* Reply quote preview (inside a bubble, and above the composer) */
.cc-sender-name{font-size:11px;font-weight:600;color:var(--primary-color);margin-bottom:2px}
.msg-body-text mark{background:#FEF08A;color:inherit;border-radius:2px;padding:0 1px}
.msg-row.search-current .msg-body-text mark{background:#FB923C}
.msg-row.search-current .bubble{outline:2px solid #FB923C;outline-offset:1px}
.cc-upload-thumb{width:160px;max-width:60vw;height:120px;border-radius:8px;background:#ddd;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:4px}
.cc-upload-file{background:#e5e7eb}
.cc-upload-status{font-size:11px;color:var(--text-secondary);margin-top:2px}
.cc-upload-bar{width:100%;height:4px;background:rgba(0,0,0,.1);border-radius:2px;overflow:hidden;margin-top:3px;display:inline-block;flex:1}
.cc-upload-status{display:flex;align-items:center;gap:6px}
.cc-upload-cancel{background:none;border:none;color:var(--text-secondary);font-size:11px;cursor:pointer;padding:0 2px;flex-shrink:0}
.cc-upload-cancel:hover{color:#DC2626}
.cc-upload-bar-fill{height:100%;background:var(--primary-color);transition:width .15s}
.cc-retry-btn{background:none;border:1px solid #DC2626;color:#DC2626;border-radius:10px;padding:1px 8px;font-size:10px;cursor:pointer;margin-left:4px}
.reply-quote{background:rgba(0,0,0,.05);border-left:3px solid var(--primary-color);border-radius:4px;
  padding:4px 8px;margin-bottom:4px;font-size:12px;color:var(--text-secondary);cursor:pointer}
.reply-quote b{color:var(--text-primary);display:block;font-size:11px}
.composer-reply-preview{display:flex;align-items:center;justify-content:space-between;padding:6px 14px;
  background:var(--panel-bg);border-top:1px solid var(--border-color);font-size:12px}
.composer-reply-preview .reply-quote{flex:1;margin:0;cursor:default}

/* Reaction badges */
.msg-reactions{display:flex;gap:3px;margin-top:3px}
.msg-reactions .reaction-badge{background:#fff;border:1px solid var(--border-color);border-radius:10px;padding:1px 6px;font-size:11px}

/* Tap-to-open message action button (no hover on mobile, so this is always
   visible rather than a hover-reveal like the staff desktop UI) */
.msg-row{position:relative}
.cc-msg-action{position:absolute;top:0;background:none;border:none;cursor:pointer;font-size:14px;color:var(--text-secondary);
  padding:2px 4px;opacity:.5}
.msg-row.out .cc-msg-action{right:-2px}
.msg-row.in .cc-msg-action{left:-2px}

/* Widget launcher (used only when embedded via iframe from widget.js) */

/* Long messages, phone keyboards, and short landscape screens. */
.cc-header-text{min-width:0}.cc-title,.cc-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bubble{overflow-wrap:anywhere;min-width:0}.bubble img{max-width:100%;height:auto}
.cc-modal{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
.cc-modal input{font-size:16px}.cc-phone-row{min-width:0}.cc-phone-row input{min-width:0}
@media(max-height:480px) and (min-width:481px){body.standalone .cc-wrap{height:100dvh;max-height:none;border-radius:0}.cc-modal-overlay{padding:10px}}
@media(prefers-reduced-motion:reduce){.msg-row{transition:none}}
.bubble img{max-width:min(200px,100%)}
.cc-phone-hint{font-size:11px;color:var(--text-secondary);line-height:1.45;margin:8px 0 12px}
#ccPhone[aria-invalid=true]{border-color:var(--danger);outline-color:var(--danger)}

/* Reply email opt-in: a compact illustrated card above the composer, never a modal. */
.cc-email-card{position:relative;flex-shrink:0;margin:6px 10px 10px;padding:20px 14px 10px;border:1px solid #cce2ff;border-radius:19px;background:radial-gradient(ellipse at 8% 80%,#cce5ff80,transparent 65%),linear-gradient(145deg,#fbfdff,#e3f1ff);box-shadow:0 0 24px #348bff30;max-height:45%;overflow-y:auto;box-sizing:border-box;color:#101c30}
.cc-email-close{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:6px;border:0;border-radius:50%;background:#ffffffd9;color:#495566;cursor:pointer}
.cc-email-intro{display:flex;align-items:center;gap:10px;padding-right:10px;margin-bottom:12px}.cc-email-art{flex:0 0 76px;width:76px;height:84px;filter:drop-shadow(0 6px 5px #176de522)}
.cc-email-intro h2{margin:5px 0 7px;font-size:22px;line-height:1.15;letter-spacing:-.6px;font-weight:750}.cc-email-intro h2 span{color:#095bfa}.cc-email-intro p{font-size:12px;line-height:1.45;color:#657180;margin:0}
.cc-email-input{display:flex;align-items:center;gap:10px;padding:0 12px;background:#fff;border:1px solid #98c5ff;border-radius:10px;box-shadow:0 2px 9px #287bff15}.cc-email-input>.ui-icon{font-size:20px;color:#415267;flex-shrink:0}.cc-email-input input{width:100%;min-width:0;padding:11px 0;border:0;background:transparent;font-family:inherit;font-size:16px;color:#172638;outline:0}.cc-email-input:focus-within{outline:2px solid #1165ff;outline-offset:2px}
.cc-email-submit{display:flex;justify-content:center;align-items:center;gap:9px;width:100%;margin-top:9px;padding:12px;border:0;border-radius:10px;background:linear-gradient(110deg,#0873ff,#1350f4);color:#fff;font-family:inherit;font-size:15px;font-weight:650;cursor:pointer;box-shadow:0 4px 12px #1465ff22}.cc-email-submit:hover{background:#064ce3}.cc-email-submit:disabled{opacity:.6;cursor:wait}.cc-email-submit .ui-icon{font-size:20px}.cc-email-privacy{font-size:9px;text-align:center;margin:7px 0 0;color:#657180}.cc-email-error{font-size:11px;line-height:1.4;color:#b42318;margin:7px 0 0}.cc-email-close:focus-visible,.cc-email-submit:focus-visible{outline:2px solid #0c59e8;outline-offset:2px}
.cc-email-card .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:360px),(max-height:540px){.cc-email-card{padding:16px 11px 9px;margin:4px 7px 7px;border-radius:15px}.cc-email-art{flex-basis:54px;width:54px;height:65px}.cc-email-intro{gap:7px;margin-bottom:9px}.cc-email-intro h2{font-size:19px}.cc-email-intro p{font-size:11px}.cc-email-input input{padding:9px 0}.cc-email-submit{padding:10px;font-size:14px}}
/* The email opt-in follows the saved brand palette, like the rest of chat. */
.cc-email-card{border-color:var(--primary-light);background:linear-gradient(145deg,#fff,var(--primary-light));box-shadow:0 0 22px var(--primary-light)}.cc-email-intro h2 span{color:var(--primary-color)}.cc-email-input{border-color:var(--primary-light)}.cc-email-input:focus-within{outline-color:var(--primary-color)}.cc-email-submit{background:linear-gradient(110deg,var(--primary-color),var(--primary-dark))}.cc-email-submit:hover{background:var(--primary-dark)}.cc-email-close:focus-visible,.cc-email-submit:focus-visible{outline-color:var(--primary-color)}