*{box-sizing:border-box;}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#e5ddd5;overflow-x:hidden;}
#chat-root{display:flex;flex-direction:column;height:100vh;height:100dvh;position:relative;}
/* Shown while dragging a file over any part of the widget (not just the
   composer) - covers the whole widget so there's no small, easy-to-miss
   drop target to aim for. pointer-events:none so it's purely visual and
   never itself becomes what dragenter/dragleave/drop fire against -
   letting drag events land on the real #chat-root underneath is what
   keeps the dragDepth counter in app.js correct. */
#dropOverlay{display:none;position:absolute;inset:0;z-index:50;background:rgba(37,211,102,0.12);border:3px dashed #25D366;align-items:center;justify-content:center;font-size:18px;font-weight:600;color:#128C7E;text-align:center;padding:20px;pointer-events:none;}
#dropOverlay.active{display:flex;}
#brandHeader{display:flex;align-items:center;gap:9px;padding:7px 14px;background:linear-gradient(135deg,#075E54,#0b7d6f);color:#fff;flex:0 0 auto;cursor:pointer;transition:padding 0.15s ease;box-shadow:0 2px 6px rgba(0,0,0,0.18);position:relative;z-index:1;}
#brandHeader.collapsed{padding:5px 14px;}
#brandLogo{height:26px;width:26px;object-fit:contain;border-radius:10px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.25);transition:height 0.15s ease,width 0.15s ease,opacity 0.15s ease,margin 0.15s ease;}
#brandHeader.collapsed #brandLogo{height:0;width:0;opacity:0;margin:0;box-shadow:none;}
#brandText{display:flex;flex-direction:column;gap:1px;min-width:0;}
#brandName{font-size:14px;font-weight:bold;letter-spacing:0.3px;line-height:1.15;transition:font-size 0.15s ease;}
#brandHeader.collapsed #brandName{font-size:12px;}
#brandTagline{font-size:10px;font-weight:normal;color:rgba(255,255,255,0.75);letter-spacing:0.2px;overflow:hidden;max-height:14px;transition:max-height 0.15s ease,opacity 0.15s ease;}
#brandHeader.collapsed #brandTagline{max-height:0;opacity:0;}
#brandToggle{margin-left:auto;font-size:11px;opacity:0.85;transition:transform 0.15s ease;}
#brandHeader.collapsed #brandToggle{transform:rotate(-90deg);}
#messages{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;}
.bubble{max-width:70%;padding:8px 12px;margin:6px 0;border-radius:8px;font-size:13px;line-height:1.4;}
.in{background:#fff;align-self:flex-start;}
.out{background:#dcf8c6;align-self:flex-end;margin-left:auto;}
.bubble-text{white-space:pre-wrap;word-break:break-word;}
/* Media inside a bubble. max-width:100% keeps a large image from forcing the
   bubble (and the page) wider than the viewport on a phone. */
.bubble-media{display:block;max-width:100%;border-radius:6px;}
/* A media bubble is sized by its content, and .bubble's 70% cap is ~700px on
   a full-width CRM record page - so an inbound photo would render enormous.
   These absolute caps keep it to a WhatsApp-like thumbnail; click opens the
   full-size original in a new tab. height/width auto preserves aspect ratio
   (no cropping). */
.bubble-media-image{cursor:zoom-in;max-width:260px;max-height:300px;width:auto;height:auto;}
.bubble-media-video{max-width:260px;max-height:300px;width:auto;height:auto;}
.bubble-media-audio{width:250px;min-width:180px;}
.bubble-media-file,.bubble-media-failed,.bubble-media-document{display:inline-block;color:#075E54;text-decoration:underline;font-size:13px;word-break:break-all;}
.bubble-media-failed{color:#c33;}
/* Agent joined/left notices - not a message from either side, so not a bubble. */
.system-note{align-self:center;max-width:85%;text-align:center;font-size:11px;color:#667781;background:rgba(255,255,255,0.65);border-radius:10px;padding:4px 10px;margin:6px 0;}
.bubble-time{font-size:10px;color:#8c8c8c;text-align:right;margin-top:4px;}
.ticks{color:#8c8c8c;}
.ticks.read{color:#53bdeb;}
/* Real delivery failure, reported by an Engati STATUS_PACKET. This is the
   only authoritative delivery signal the integration has - a tick means
   "Engati accepted the packet", nothing more - so it is deliberately loud. */
.ticks.failed{color:#c33;font-weight:bold;cursor:help;}
.status{color:#667781;text-align:center;margin-top:20px;font-size:13px;padding:0 10px;word-break:break-word;}
#composer{display:flex;flex-direction:column;padding:8px;background:#f0f0f0;border-top:1px solid #ddd;gap:6px;}
#composerRow{display:flex;align-items:flex-end;}
/* msgInput is a <textarea> (not <input>) so Shift+Enter can insert a real
   newline - app.js auto-grows its height on input, capped by max-height
   here, and only Enter-without-Shift triggers Send (see the keydown
   listener). Right padding clears the emoji button, which sits inside
   this wrapper's right edge like WhatsApp's own composer. */
#msgInputWrap{position:relative;flex:1;min-width:0;margin-right:8px;}
#msgInput{width:100%;box-sizing:border-box;padding:10px 40px 10px 14px;font-size:16px;font-family:inherit;line-height:1.3;border:1px solid #ccc;border-radius:20px;resize:none;max-height:120px;overflow-y:auto;}
#sendBtn{background:#25D366;color:#fff;border:none;border-radius:20px;padding:8px 16px;min-height:40px;cursor:pointer;}
#sendBtn:disabled{opacity:0.6;cursor:default;}
#templateRow{display:flex;gap:6px;align-items:center;}
#templateSelect{flex:1;min-width:0;padding:8px 6px;border:1px solid #ccc;border-radius:6px;font-size:16px;}
#templateBtn{background:#128C7E;color:#fff;border:none;border-radius:20px;padding:8px 12px;min-height:36px;cursor:pointer;font-size:13px;flex:0 0 auto;}
#templateBtn:disabled{opacity:0.6;cursor:default;}
#templateParams{display:flex;flex-direction:column;gap:4px;}
#templateParams input{padding:8px;border:1px solid #ccc;border-radius:6px;font-size:16px;}
#attachRow{display:none;gap:6px;align-items:center;}
#attachRow.open{display:flex;}
#attachToggleBtn{background:#fff;border:1px solid #ccc;border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:16px;line-height:1;flex:0 0 auto;margin-right:8px;}
#attachToggleBtn.active{background:#25D366;border-color:#25D366;}
/* Emoji button sits INSIDE #msgInputWrap's right edge (absolute, not in
   flow) so it looks like WhatsApp's own composer - the icon embedded in
   the input itself, not a separate button beside it. */
#emojiBtn{position:absolute;right:4px;bottom:4px;background:none;border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;font-size:17px;line-height:1;padding:0;}
#emojiBtn.active{background:#e8e8e8;}
/* Emoji picker. Now holds the full ~1900-glyph Unicode set, so the panel is
   a fixed-height column - search box and category tabs pinned, only the
   grid scrolls - rather than the old single scrolling grid of ~200. */
#emojiPanel{display:none;position:absolute;bottom:44px;right:0;width:296px;background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.15);padding:6px;z-index:20;flex-direction:column;gap:6px;}
#emojiPanel.open{display:flex;}
#emojiTopRow{display:flex;align-items:center;gap:4px;}
#emojiSearch{flex:1;min-width:0;box-sizing:border-box;padding:6px 8px;font-size:13px;font-family:inherit;border:1px solid #ccc;border-radius:6px;}
/* Skin-tone swatches, WhatsApp-style: one hand per Fitzpatrick tone plus a
   default. Kept beside the search box so the picker stays one column tall. */
#emojiTones{display:flex;gap:0;flex:0 0 auto;}
#emojiTones button{background:none;border:none;font-size:15px;line-height:1;cursor:pointer;padding:2px;border-radius:4px;opacity:0.5;}
#emojiTones button:hover{opacity:1;}
#emojiTones button.active{opacity:1;background:#e6f4ea;}
/* Tabs wrap to a second row rather than scrolling sideways - a hidden
   horizontal strip makes the later categories (Flags, Symbols) easy to miss. */
#emojiTabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid #eee;padding-bottom:4px;}
#emojiTabs button{background:none;border:none;font-size:17px;line-height:1;cursor:pointer;padding:4px 5px;border-radius:4px;opacity:0.55;}
#emojiTabs button:hover{background:#f0f0f0;opacity:1;}
#emojiTabs button.active{opacity:1;background:#e6f4ea;}
#emojiGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;max-height:210px;overflow-y:auto;}
#emojiGrid button{background:none;border:none;font-size:20px;line-height:1;cursor:pointer;padding:4px;border-radius:4px;}
#emojiGrid button:hover{background:#f0f0f0;}
#emojiEmpty{font-size:12px;color:#667781;text-align:center;padding:16px 0;}
/* Text formatting ("Aa") button - same popup-toggle pattern as the emoji
   button, but a small fixed toolbar instead of a grid: Bold/Italic/
   Strikethrough/Monospace, each wrapping the current selection in
   msgInput with WhatsApp's own markdown-style syntax (*bold*, _italic_,
   ~strike~, ```mono```) - WhatsApp renders these itself on the recipient
   side, no server-side formatting support needed. */
#formatWrap{position:relative;flex:0 0 auto;margin-right:8px;}
#formatBtn{background:#fff;border:1px solid #ccc;border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:14px;font-weight:600;line-height:1;flex:0 0 auto;}
#formatBtn.active{background:#25D366;border-color:#25D366;color:#fff;}
#formatPanel{display:none;position:absolute;bottom:48px;left:0;background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.15);padding:4px;gap:2px;z-index:20;}
#formatPanel.open{display:flex;}
#formatPanel button{background:none;border:none;font-size:15px;line-height:1;cursor:pointer;padding:8px 10px;border-radius:4px;min-width:32px;}
#formatPanel button:hover{background:#f0f0f0;}
#attachType{padding:8px 6px;border:1px solid #ccc;border-radius:6px;font-size:16px;flex:0 0 auto;}
#attachUrl{flex:1;min-width:0;padding:8px;border:1px solid #ccc;border-radius:6px;font-size:16px;}
#attachUploadBtn{background:#fff;border:1px solid #ccc;border-radius:6px;padding:8px 10px;cursor:pointer;font-size:13px;line-height:1;flex:0 0 auto;white-space:nowrap;}
#attachUploadBtn:disabled{opacity:0.6;cursor:default;}
#attachClearBtn{background:#fff;border:1px solid #ccc;border-radius:50%;width:32px;height:32px;cursor:pointer;font-size:13px;line-height:1;flex:0 0 auto;color:#c33;}
#attachHint{font-size:11px;color:#8c8c8c;padding:0 4px;}
#attachProgressWrap{height:4px;background:#e0e0e0;border-radius:2px;overflow:hidden;}
#attachProgressBar{height:100%;width:0%;background:#25D366;transition:width 0.15s ease;}
/* Shown only while the file is being read/base64-encoded locally, before
   the network upload (and its real, known percentage) has started - a
   moving stripe rather than a percentage, since there's nothing real to
   measure yet at this stage. */
#attachProgressWrap.indeterminate #attachProgressBar{
  width:100% !important;
  background:linear-gradient(90deg, #e0e0e0 25%, #25D366 50%, #e0e0e0 75%);
  background-size:200% 100%;
  animation:attachIndeterminate 1.1s linear infinite;
}
@keyframes attachIndeterminate{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
#composerNote{font-size:11px;color:#8c8c8c;text-align:center;padding:2px 4px;}
/* Second, quieter branding mention beyond the collapsible header - same
   "Powered by X" pattern used by Intercom/Crisp/Tawk.to on their own
   chat widgets. Agent-facing only (this widget lives inside Zoho CRM,
   never shown to the shop's actual WhatsApp customers), so this is
   purely for whoever's using the CRM to notice/remember the product. */
#brandFooter{font-size:10px;color:#b0b0b0;text-align:center;padding:0 4px 2px;}
#brandFooter a{color:#8c8c8c;text-decoration:none;}
#brandFooter a:hover{text-decoration:underline;}
#windowBanner{background:#fff3cd;color:#856404;font-size:12px;text-align:center;padding:6px 10px;border-top:1px solid #ffe69c;border-bottom:1px solid #ffe69c;}
/* Louder than #windowBanner: a guessed country code means the message goes to
   the wrong number entirely, and Engati reports that as success. */
#countryBanner{background:#f8d7da;color:#842029;font-size:12px;text-align:center;padding:6px 10px;border-top:1px solid #f5c2c7;border-bottom:1px solid #f5c2c7;}