/*
 * AccountHab — Live Chat floating widget (Seller/Buyer <-> Admin only).
 *
 * Loaded on EVERY page via resources/views/layouts/app.blade.php, but the
 * widget only ever renders itself (see public/js/live-chat.js) when the
 * signed-in user's role is seller or buyer — a guest, a Buyer viewing the
 * public marketplace while logged out, an Admin/Co-Admin, all see nothing
 * from this file. Uses this project's own existing brand tokens
 * (navy/blue/green — see public/css/seller.css's/buyer.css's :root) rather
 * than inventing a new palette; deliberately its own small stylesheet
 * (not appended into admin.css/seller.css/buyer.css) so it stays
 * self-contained and easy to remove/audit on its own.
 */
#ahLiveChatWidget{position:fixed;right:20px;bottom:20px;z-index:9500;font:14px Arial,Helvetica,sans-serif}
#ahLiveChatWidget *{box-sizing:border-box}

#ahLiveChatFab{width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,#1769e0,#092e6b);color:#fff;
  box-shadow:0 6px 18px rgba(9,46,107,.35);display:flex;align-items:center;justify-content:center;
  position:relative;transition:transform .15s ease}
#ahLiveChatFab:hover{transform:translateY(-2px)}
#ahLiveChatFab svg{width:26px;height:26px;fill:#fff}

#ahLiveChatBadge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;
  background:#dc3545;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;
  padding:0 4px;box-shadow:0 0 0 2px #fff;display:none}

#ahLiveChatPanel{position:absolute;right:0;bottom:70px;width:340px;max-width:calc(100vw - 32px);
  height:460px;max-height:calc(100vh - 120px);background:#fff;border-radius:12px;
  box-shadow:0 12px 32px rgba(24,55,100,.22);border:1px solid #e2e8f0;
  display:none;flex-direction:column;overflow:hidden}
#ahLiveChatPanel.open{display:flex}

#ahLiveChatHead{background:#092e6b;color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
#ahLiveChatHead strong{font-size:14px;font-weight:700}
#ahLiveChatHead small{display:block;color:#b8c3d4;font-size:11px;margin-top:2px}
#ahLiveChatClose{background:transparent;border:0;color:#fff;font-size:20px;cursor:pointer;line-height:1;padding:2px 4px;opacity:.85}
#ahLiveChatClose:hover{opacity:1}

#ahLiveChatBody{flex:1 1 auto;overflow-y:auto;padding:14px;background:#f4f7fd;display:flex;flex-direction:column;gap:10px}
#ahLiveChatBody .ah-lc-empty,#ahLiveChatBody .ah-lc-loading,#ahLiveChatBody .ah-lc-error{margin:auto;color:#6b7280;font-size:13px;text-align:center;padding:0 10px}
#ahLiveChatBody .ah-lc-error{color:#dc3545}

.ah-lc-msg{max-width:80%;padding:8px 12px;border-radius:12px;font-size:13px;line-height:1.4;word-wrap:break-word;white-space:pre-wrap}
.ah-lc-msg.mine{align-self:flex-end;background:#1769e0;color:#fff;border-bottom-right-radius:3px}
.ah-lc-msg.theirs{align-self:flex-start;background:#fff;color:#172033;border:1px solid #e2e8f0;border-bottom-left-radius:3px}
.ah-lc-msg time{display:block;margin-top:4px;font-size:10px;opacity:.7}

/* Live Chat System — small photo attachment support (first rule update). */
.ah-lc-msg .ah-lc-attachment-loading{font-size:11px;opacity:.75;margin-top:4px}
.ah-lc-attachment{display:block;max-width:100%;max-height:160px;border-radius:8px;margin-top:6px;cursor:pointer}

/* Image attachment enhancements — multiple selected photos render as a
   wrapped row of removable chips instead of one single-file preview;
   each chip tracks its own pending/sending/failed state. */
#ahLiveChatAttachPreview{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding:6px 12px;background:#eef4ff;border-top:1px solid #e2e8f0;font-size:12px;color:#334155}
#ahLiveChatAttachPreview.hidden{display:none}
.ah-lc-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #d8dce1;border-radius:14px;padding:3px 6px 3px 10px;max-width:100%}
.ah-lc-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.ah-lc-chip-failed{border-color:#dc3545}
.ah-lc-chip-failed .ah-lc-chip-label{color:#dc3545}
.ah-lc-chip-sending{opacity:.7}
.ah-lc-chip button{border:0;background:transparent;color:#64748b;cursor:pointer;font-size:13px;flex:0 0 auto;line-height:1}
.ah-lc-chip button:disabled{opacity:.4;cursor:default}

#ahLiveChatForm{flex:0 0 auto;display:flex;gap:8px;padding:10px;border-top:1px solid #e2e8f0;background:#fff}
#ahLiveChatInput{flex:1;border:1px solid #d8dce1;border-radius:20px;padding:9px 14px;font:inherit;resize:none;max-height:70px}
#ahLiveChatInput:focus{outline:none;border-color:#1769e0}
#ahLiveChatAttachBtn{border:1px solid #d8dce1;background:#f4f7fd;color:#5c6b82;border-radius:50%;width:38px;height:38px;
  flex:0 0 auto;cursor:pointer;display:flex;align-items:center;justify-content:center}
#ahLiveChatAttachBtn:hover{background:#e9eef8}
#ahLiveChatAttachBtn svg{width:16px;height:16px;fill:#5c6b82}
#ahLiveChatSend{border:0;background:#1769e0;color:#fff;border-radius:50%;width:38px;height:38px;flex:0 0 auto;cursor:pointer;display:flex;align-items:center;justify-content:center}
#ahLiveChatSend:disabled{opacity:.55;cursor:default}
#ahLiveChatSend svg{width:16px;height:16px;fill:#fff}

@media(max-width:480px){
  #ahLiveChatWidget{right:14px;bottom:14px}
  #ahLiveChatPanel{width:calc(100vw - 28px);height:calc(100vh - 140px);right:-6px}
}

/* Image attachment enhancements — same-page lightbox (spec section 3).
   Fixed, full-viewport overlay so it never depends on the small floating
   panel's own size/position; deliberately its own small self-contained
   block (same "own stylesheet" discipline as the rest of this file) —
   visual language (navy header, blue accents, white rounded surfaces)
   matches the rest of this widget rather than inventing a new look. */
#ahLcLightbox{display:none;position:fixed;inset:0;background:rgba(9,20,40,.72);z-index:9600;
  flex-direction:column;align-items:center;justify-content:center;padding:20px}
#ahLcLightbox.show{display:flex}
#ahLcLightbox > div,#ahLcLightboxViewport,#ahLcLightboxDialog{box-sizing:border-box}
#ahLcLightboxBar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;color:#fff}
#ahLcLightboxTitle{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80vw}
#ahLcLightboxClose{border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:8px;width:34px;height:34px;font-size:20px;cursor:pointer;flex:0 0 auto}
#ahLcLightboxClose:hover{background:rgba(255,255,255,.22)}
/* Image viewer sizing refinement — a fixed/consistent popup frame
   (#ahLcLightboxDialog) that no longer resizes based on the loaded
   image's natural dimensions/aspect ratio; only the image inside
   scales via the existing transform-based zoom/pan. Desktop target
   ~900x700, clamped to the viewport; mobile clamps to the screen
   (media query below). align-items:center (not stretch) keeps the
   toolbar's existing auto-width centered "pill" look; the viewport
   gets an explicit width:100% of its own below instead. */
#ahLcLightboxDialog{display:flex;flex-direction:column;align-items:center;
  width:min(900px,90vw);height:min(700px,85vh)}
/* overflow:hidden (not auto) — panning is done entirely via the image's
   own CSS transform (translate+scale), never native scroll, so the two
   mechanisms can never fight each other; touch-action:none hands pinch/
   pan gestures on the viewport to our own touch handlers instead of the
   browser's native page pan/zoom. flex:1;min-height:0 makes the
   viewport fill whatever height the toolbar below doesn't need, so the
   OUTER frame (#ahLcLightboxDialog) stays a fixed size even if the
   toolbar wraps to two rows on a narrow screen. */
#ahLcLightboxViewport{position:relative;width:100%;flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:#0c162c;border-radius:12px;touch-action:none}
#ahLcLightboxImg{max-width:100%;max-height:100%;display:block;transition:transform .1s ease-out;transform-origin:center center;user-select:none;-webkit-user-drag:none;object-fit:contain}
#ahLcLightboxViewport.ah-lc-zoomed #ahLcLightboxImg{cursor:grab}
#ahLcLightboxViewport.ah-lc-dragging #ahLcLightboxImg{cursor:grabbing;transition:none}
#ahLcLightboxStatus{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#dce4f2;font-size:13px;background:rgba(12,22,44,.55);text-align:center;padding:0 16px}
#ahLcLightboxStatus.hidden{display:none}
#ahLcLightboxStatus.ah-lc-lightbox-status-error{color:#ffb4b4}
#ahLcLightboxToolbar{margin-top:16px;flex:0 0 auto;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.94);
  border-radius:24px;padding:7px 14px;box-shadow:0 8px 24px rgba(0,0,0,.25);flex-wrap:wrap;justify-content:center}
#ahLcLightboxToolbar button{border:0;background:#eef4ff;color:#092e6b;border-radius:50%;width:32px;height:32px;font-size:16px;font-weight:700;cursor:pointer}
#ahLcLightboxToolbar button:hover{background:#dfe9fb}
#ahLcLightboxZoomLevel{font-size:12px;font-weight:700;color:#334155;min-width:40px;text-align:center}
#ahLcLightboxReset,#ahLcLightboxDownload{width:auto!important;border-radius:16px!important;padding:0 14px!important;font-size:12px!important;font-weight:700!important}
#ahLcLightboxReset{background:#eef4ff!important;color:#092e6b!important}
#ahLcLightboxReset:hover{background:#dfe9fb!important}
#ahLcLightboxDownload{background:#1769e0!important;color:#fff!important}
#ahLcLightboxDownload:hover{background:#0f52b3!important}
@media(max-width:480px){
  #ahLcLightboxDialog{width:calc(100vw - 24px);height:calc(100vh - 80px)}
}