/* Live Chat ezwallet — scoped styles only. */
.live-chat-root[hidden],
.live-chat-panel[hidden],
.live-chat-loading[hidden],
.live-chat-welcome[hidden],
.live-chat-closed[hidden],
.live-chat-identity[hidden],
.live-chat-attachment-preview[hidden],
.admin-chat-attachment-preview[hidden] {
  display: none !important;
}

.live-chat-root,
.live-chat-root *,
.admin-chat-page,
.admin-chat-page * {
  box-sizing: border-box;
}

.live-chat-root {
  position: fixed !important;
  z-index: 1150 !important;
  right: 20px !important;
  bottom: calc(22px + env(safe-area-inset-bottom)) !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
}

.live-chat-launcher {
  position: relative !important;
  min-width: 132px !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 19px !important;
  border: 0 !important;
  border-radius: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, var(--primary, #1677f0), #075fd0) !important;
  color: #fff !important;
  box-shadow: 0 14px 36px rgba(13, 92, 197, .28) !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.live-chat-launcher:hover { transform: translateY(-2px) !important; box-shadow: 0 18px 42px rgba(13, 92, 197, .34) !important; }
.live-chat-launcher:active { transform: scale(.97) !important; }
.live-chat-launcher svg { width: 23px !important; height: 23px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.live-chat-unread { position: absolute !important; top: -7px !important; right: -5px !important; min-width: 23px !important; height: 23px !important; padding: 0 6px !important; border: 3px solid #fff !important; border-radius: 999px !important; display: grid !important; place-items: center !important; background: #ff4359 !important; color: #fff !important; font-size: 10px !important; font-weight: 950 !important; }

.live-chat-panel {
  position: absolute !important;
  right: 0 !important;
  bottom: 70px !important;
  width: 380px !important;
  max-width: calc(100vw - 24px) !important;
  height: min(590px, calc(100dvh - 110px - env(safe-area-inset-bottom))) !important;
  min-height: 430px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(176, 194, 217, .58) !important;
  border-radius: 24px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  background: #fff !important;
  color: #172b46 !important;
  box-shadow: 0 26px 70px rgba(28, 55, 91, .24) !important;
  animation: liveChatIn .22s ease-out both !important;
}
@keyframes liveChatIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.live-chat-header {
  min-height: 76px !important;
  padding: 13px 14px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 11px !important;
  background: linear-gradient(135deg, var(--primary, #1677f0), #0866d9) !important;
  color: #fff !important;
}
.live-chat-agent-avatar { width: 46px !important; height: 46px !important; border: 1px solid rgba(255,255,255,.35) !important; border-radius: 15px !important; display: grid !important; place-items: center !important; background: rgba(255,255,255,.14) !important; }
.live-chat-agent-avatar svg { width: 25px !important; height: 25px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.live-chat-header-copy { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 5px !important; }
.live-chat-header-copy > strong { display: block !important; margin: 0 !important; color: inherit !important; font-size: 15px !important; font-weight: 950 !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.live-chat-header-copy > span { display: flex !important; align-items: center !important; gap: 6px !important; color: rgba(255,255,255,.88) !important; font-size: 10px !important; line-height: 1.3 !important; }
.live-chat-header-copy > span i { width: 8px !important; height: 8px !important; flex: 0 0 8px !important; border-radius: 999px !important; background: #5ff0a6 !important; box-shadow: 0 0 0 5px rgba(95,240,166,.16) !important; }
.live-chat-header-copy > span b { min-width: 0 !important; color: inherit !important; font: inherit !important; font-weight: 800 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.live-chat-close { width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 13px !important; display: grid !important; place-items: center !important; background: rgba(255,255,255,.14) !important; color: #fff !important; cursor: pointer !important; }
.live-chat-close svg { width: 21px !important; height: 21px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; stroke-linecap: round !important; }

.live-chat-body { min-height: 0 !important; padding: 14px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; overflow-y: auto !important; overscroll-behavior: contain !important; background: linear-gradient(180deg, #f5f9fe 0%, #fbfdff 100%) !important; }
.live-chat-loading { min-height: 150px !important; margin: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; color: #73849a !important; }
.live-chat-loading span { width: 8px !important; height: 8px !important; border-radius: 999px !important; background: var(--primary, #1677f0) !important; animation: liveChatDot 1s ease-in-out infinite !important; }
.live-chat-loading span:nth-child(2) { animation-delay: .14s !important; }
.live-chat-loading span:nth-child(3) { animation-delay: .28s !important; }
.live-chat-loading small { margin-left: 6px !important; font-size: 11px !important; }
@keyframes liveChatDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
.live-chat-welcome { min-height: 155px !important; margin: auto 0 !important; padding: 18px !important; border: 1px solid #e1ebf7 !important; border-radius: 18px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; background: #fff !important; }
.live-chat-welcome-icon { width: 52px !important; height: 52px !important; border-radius: 17px !important; display: grid !important; place-items: center !important; background: #eaf4ff !important; font-size: 25px !important; }
.live-chat-welcome strong { margin-top: 10px !important; font-size: 17px !important; }
.live-chat-welcome p { margin: 5px 0 0 !important; color: #6f8198 !important; font-size: 12px !important; line-height: 1.5 !important; }
.live-chat-messages { display: flex !important; flex-direction: column !important; gap: 9px !important; }
.live-chat-message { max-width: 82% !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
.live-chat-message > div { min-width: 58px !important; padding: 9px 11px !important; border-radius: 15px !important; font-size: 12px !important; line-height: 1.5 !important; overflow-wrap: anywhere !important; }
.live-chat-message > div p { margin: 0 !important; color: inherit !important; font: inherit !important; white-space: pre-wrap !important; }
.live-chat-message time { padding: 0 4px !important; color: #8a98aa !important; font-size: 8px !important; }
.live-chat-message.is-user { align-self: flex-end !important; align-items: flex-end !important; }
.live-chat-message.is-user > div { border-bottom-right-radius: 5px !important; background: linear-gradient(135deg, var(--primary, #1677f0), #0865d8) !important; color: #fff !important; }
.live-chat-message.is-admin { align-self: flex-start !important; }
.live-chat-message.is-admin > div { border: 1px solid #e0e9f3 !important; border-bottom-left-radius: 5px !important; background: #fff !important; color: #172b46 !important; }
.live-chat-image { display: block !important; margin: -4px -6px 7px !important; border-radius: 11px !important; overflow: hidden !important; background: #eaf0f7 !important; }
.live-chat-image img { width: 100% !important; max-width: 230px !important; max-height: 230px !important; display: block !important; object-fit: cover !important; }
.live-chat-closed { margin: auto 0 !important; padding: 18px !important; border: 1px solid #e1e9f2 !important; border-radius: 17px !important; text-align: center !important; background: #fff !important; }
.live-chat-closed strong { display: block !important; font-size: 15px !important; }
.live-chat-closed p { margin: 6px 0 12px !important; color: #738399 !important; font-size: 11px !important; line-height: 1.5 !important; }
.live-chat-closed button { min-height: 40px !important; padding: 0 14px !important; }

.live-chat-form { margin: 0 !important; padding: 11px !important; border-top: 1px solid #e3ebf4 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; background: #fff !important; }
.live-chat-identity { padding: 10px !important; border: 1px solid #e2eaf4 !important; border-radius: 14px !important; display: grid !important; gap: 8px !important; background: #f8fbff !important; }
.live-chat-identity > div { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.live-chat-identity label { display: flex !important; flex-direction: column !important; gap: 5px !important; }
.live-chat-identity label > span { color: #53667e !important; font-size: 9px !important; font-weight: 850 !important; }
.live-chat-identity label small { font: inherit !important; font-weight: 600 !important; }
.live-chat-identity input { width: 100% !important; height: 38px !important; margin: 0 !important; padding: 0 10px !important; border: 1px solid #d7e2ee !important; border-radius: 10px !important; background: #fff !important; color: #172b46 !important; font: inherit !important; font-size: 10px !important; box-shadow: none !important; }
.live-chat-attachment-preview { min-height: 58px !important; padding: 7px !important; border: 1px solid #cfe1f5 !important; border-radius: 13px !important; display: grid !important; grid-template-columns: 46px minmax(0, 1fr) 32px !important; align-items: center !important; gap: 9px !important; background: #f3f8fe !important; }
.live-chat-attachment-preview img { width: 46px !important; height: 46px !important; border-radius: 10px !important; object-fit: cover !important; }
.live-chat-attachment-preview > div { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 3px !important; }
.live-chat-attachment-preview strong { font-size: 10px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.live-chat-attachment-preview small { color: #72849a !important; font-size: 8px !important; }
.live-chat-attachment-preview button { width: 32px !important; height: 32px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important; display: grid !important; place-items: center !important; background: #fff !important; color: #65758a !important; }
.live-chat-attachment-preview button svg { width: 17px !important; height: 17px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; stroke-linecap: round !important; }
.live-chat-composer { display: grid !important; grid-template-columns: 42px minmax(0, 1fr) 46px !important; align-items: end !important; gap: 7px !important; }
.live-chat-attach { width: 42px !important; height: 44px !important; border: 1px solid #d8e4f0 !important; border-radius: 13px !important; display: grid !important; place-items: center !important; background: #f7fafe !important; color: var(--primary, #1677f0) !important; cursor: pointer !important; }
.live-chat-attach input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.live-chat-attach svg { width: 21px !important; height: 21px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.live-chat-composer textarea { width: 100% !important; min-height: 44px !important; max-height: 104px !important; margin: 0 !important; padding: 12px 13px !important; border: 1px solid #d8e3ef !important; border-radius: 14px !important; background: #f8fafc !important; color: #172b46 !important; font: inherit !important; font-size: 12px !important; line-height: 1.45 !important; resize: none !important; box-shadow: none !important; }
.live-chat-composer > button { width: 46px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 14px !important; display: grid !important; place-items: center !important; background: var(--primary, #1677f0) !important; color: #fff !important; cursor: pointer !important; }
.live-chat-composer > button:disabled { opacity: .55 !important; cursor: wait !important; }
.live-chat-composer > button svg { width: 22px !important; height: 22px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.live-chat-form-note { min-height: 13px !important; padding: 0 3px !important; color: #7b8ba0 !important; font-size: 8.5px !important; line-height: 1.35 !important; }
.live-chat-form-note.is-error { color: #d13d4b !important; }
.live-chat-form-note.is-success { color: #16815b !important; }

/* Admin live chat */
.admin-chat-page { width: 100% !important; max-width: 1440px !important; margin: 0 auto !important; }
.admin-chat-heading { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 18px !important; }
.admin-chat-summary { min-width: 120px !important; padding: 13px 16px !important; border: 1px solid #dce7f2 !important; border-radius: 16px !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; background: #fff !important; }
.admin-chat-summary strong { color: var(--primary, #1677f0) !important; font-size: 22px !important; line-height: 1 !important; }
.admin-chat-summary span { margin-top: 5px !important; color: #718197 !important; font-size: 10px !important; }
.admin-chat-filter { margin: 18px 0 !important; padding: 12px !important; border: 1px solid #dce7f2 !important; border-radius: 17px !important; display: grid !important; grid-template-columns: minmax(220px, 1fr) 175px auto auto !important; align-items: center !important; gap: 9px !important; background: #fff !important; }
.admin-chat-filter label { position: relative !important; display: block !important; }
.admin-chat-filter label svg { position: absolute !important; z-index: 1 !important; left: 12px !important; top: 50% !important; width: 18px !important; height: 18px !important; transform: translateY(-50%) !important; fill: none !important; stroke: #7b8ba0 !important; stroke-width: 1.8 !important; stroke-linecap: round !important; }
.admin-chat-filter input,
.admin-chat-filter select { width: 100% !important; height: 44px !important; margin: 0 !important; border: 1px solid #d8e3ef !important; border-radius: 12px !important; background: #f9fbfd !important; color: #172b46 !important; font: inherit !important; font-size: 11px !important; box-shadow: none !important; }
.admin-chat-filter input { padding: 0 12px 0 40px !important; }
.admin-chat-filter select { padding: 0 12px !important; }
.admin-chat-filter button,
.admin-chat-filter > a { height: 44px !important; margin: 0 !important; padding: 0 17px !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font: inherit !important; font-size: 10px !important; font-weight: 900 !important; text-decoration: none !important; }
.admin-chat-filter button { border: 0 !important; background: var(--primary, #1677f0) !important; color: #fff !important; }
.admin-chat-filter > a { border: 1px solid #d7e2ee !important; background: #fff !important; color: var(--primary, #1677f0) !important; }
.admin-chat-workspace { height: min(690px, calc(100dvh - 250px)) !important; min-height: 530px !important; display: grid !important; grid-template-columns: minmax(280px, 34%) minmax(0, 1fr) !important; gap: 16px !important; }
.admin-chat-list-card,
.admin-chat-room-card { min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border-radius: 20px !important; overflow: hidden !important; background: #fff !important; }
.admin-chat-list-card { display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; }
.admin-chat-panel-head { min-height: 73px !important; padding: 15px 17px !important; border-bottom: 1px solid #e5edf5 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; }
.admin-chat-panel-head h2 { margin: 0 !important; color: #172b46 !important; font-size: 17px !important; }
.admin-chat-panel-head p { margin: 5px 0 0 !important; color: #7b899c !important; font-size: 9px !important; }
.admin-chat-list { min-height: 0 !important; overflow-y: auto !important; }
.admin-chat-list-item { position: relative !important; min-height: 88px !important; padding: 13px !important; border-bottom: 1px solid #edf2f7 !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; background: #fff !important; color: inherit !important; text-decoration: none !important; transition: background .18s ease !important; }
.admin-chat-list-item:hover,
.admin-chat-list-item.is-active { background: #eef6ff !important; }
.admin-chat-list-item.is-active::before { content: "" !important; position: absolute !important; left: 0 !important; top: 13px !important; bottom: 13px !important; width: 4px !important; border-radius: 0 5px 5px 0 !important; background: var(--primary, #1677f0) !important; }
.admin-chat-avatar { width: 42px !important; height: 42px !important; flex: 0 0 42px !important; border-radius: 14px !important; display: grid !important; place-items: center !important; background: #e7f2ff !important; color: var(--primary, #1677f0) !important; font-size: 14px !important; font-weight: 950 !important; }
.admin-chat-avatar.large { width: 46px !important; height: 46px !important; flex-basis: 46px !important; border-radius: 15px !important; }
.admin-chat-list-copy { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
.admin-chat-list-copy > span { min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 7px !important; }
.admin-chat-list-copy strong { min-width: 0 !important; color: #172b46 !important; font-size: 11px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.admin-chat-list-copy time { flex: 0 0 auto !important; color: #8a98aa !important; font-size: 8px !important; }
.admin-chat-list-copy small { color: #697b91 !important; font-size: 9px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.admin-chat-list-copy em { width: max-content !important; max-width: 100% !important; padding: 3px 7px !important; border-radius: 999px !important; background: #f1f5f9 !important; color: #62748b !important; font-size: 7px !important; font-style: normal !important; font-weight: 850 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.admin-chat-list-meta { min-width: 76px !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 7px !important; }
.admin-chat-list-meta i { width: 9px !important; height: 9px !important; border-radius: 999px !important; background: #ff465c !important; box-shadow: 0 0 0 4px rgba(255,70,92,.1) !important; }
.admin-chat-status { padding: 5px 8px !important; border-radius: 999px !important; font-size: 7px !important; font-weight: 900 !important; white-space: nowrap !important; }
.admin-chat-status.is-open { background: #fff1d7 !important; color: #9a6800 !important; }
.admin-chat-status.is-waiting { background: #e8f4ff !important; color: #0969c5 !important; }
.admin-chat-status.is-closed { background: #e9f8f0 !important; color: #16815b !important; }
.admin-chat-empty-list,
.admin-chat-room-empty { min-height: 100% !important; padding: 28px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; }
.admin-chat-empty-list span,
.admin-chat-room-empty span { width: 62px !important; height: 62px !important; border-radius: 20px !important; display: grid !important; place-items: center !important; background: #eaf4ff !important; }
.admin-chat-empty-list svg,
.admin-chat-room-empty svg { width: 31px !important; height: 31px !important; fill: none !important; stroke: var(--primary, #1677f0) !important; stroke-width: 1.7 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.admin-chat-empty-list strong { margin-top: 12px !important; font-size: 14px !important; }
.admin-chat-empty-list p,
.admin-chat-room-empty p { max-width: 320px !important; margin: 7px 0 0 !important; color: #718197 !important; font-size: 10px !important; line-height: 1.55 !important; }
.admin-chat-room-empty h2 { margin: 13px 0 0 !important; color: #172b46 !important; font-size: 19px !important; }
.admin-chat-room-card { display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto !important; }
.admin-chat-room-header { min-height: 78px !important; padding: 12px 14px !important; border-bottom: 1px solid #e5edf5 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto !important; align-items: center !important; gap: 12px !important; background: #fff !important; }
.admin-chat-back { display: none !important; }
.admin-chat-customer { min-width: 0 !important; display: flex !important; align-items: center !important; gap: 10px !important; }
.admin-chat-customer > div { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
.admin-chat-customer strong { color: #172b46 !important; font-size: 12px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.admin-chat-customer span { color: #718197 !important; font-size: 8.5px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.admin-chat-customer-contact { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 4px !important; color: #62758d !important; font-size: 8.5px !important; }
.admin-chat-customer-contact small { color: #8795a7 !important; font-size: 7.5px !important; }
.admin-chat-status-form { margin: 0 !important; }
.admin-chat-status-form select { height: 40px !important; margin: 0 !important; padding: 0 10px !important; border: 1px solid #d7e2ee !important; border-radius: 11px !important; background: #f8fafc !important; color: #172b46 !important; font: inherit !important; font-size: 9px !important; font-weight: 850 !important; }
.admin-chat-messages { min-height: 0 !important; padding: 17px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; overflow-y: auto !important; overscroll-behavior: contain !important; background: linear-gradient(180deg, #f6f9fd, #fbfdff) !important; }
.admin-chat-no-message { margin: auto !important; padding: 12px 16px !important; border-radius: 13px !important; background: #eef4fa !important; color: #718197 !important; font-size: 10px !important; }
.admin-chat-message { max-width: 78% !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
.admin-chat-message > div { min-width: 60px !important; padding: 10px 12px !important; border-radius: 15px !important; font-size: 10.5px !important; line-height: 1.5 !important; overflow-wrap: anywhere !important; }
.admin-chat-message > div p { margin: 0 !important; color: inherit !important; font: inherit !important; white-space: pre-wrap !important; }
.admin-chat-message time { padding: 0 4px !important; color: #8997a9 !important; font-size: 7.5px !important; }
.admin-chat-message.is-user { align-self: flex-start !important; }
.admin-chat-message.is-user > div { border: 1px solid #e0e9f3 !important; border-bottom-left-radius: 5px !important; background: #fff !important; color: #172b46 !important; }
.admin-chat-message.is-admin { align-self: flex-end !important; align-items: flex-end !important; }
.admin-chat-message.is-admin > div { border-bottom-right-radius: 5px !important; background: linear-gradient(135deg, var(--primary, #1677f0), #0865d8) !important; color: #fff !important; }
.admin-chat-image { display: block !important; margin: -5px -7px 7px !important; border-radius: 11px !important; overflow: hidden !important; background: #e9eff6 !important; }
.admin-chat-image img { width: 100% !important; max-width: 330px !important; max-height: 310px !important; display: block !important; object-fit: cover !important; }
.admin-chat-reply { margin: 0 !important; padding: 10px 12px !important; border-top: 1px solid #e5edf5 !important; display: flex !important; flex-direction: column !important; gap: 7px !important; background: #fff !important; }
.admin-chat-reply-row { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) 48px !important; align-items: end !important; gap: 8px !important; }
.admin-chat-attach { width: 44px !important; height: 44px !important; border: 1px solid #d8e3ef !important; border-radius: 13px !important; display: grid !important; place-items: center !important; background: #f7fafe !important; color: var(--primary, #1677f0) !important; cursor: pointer !important; }
.admin-chat-attach input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.admin-chat-attach svg { width: 21px !important; height: 21px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.admin-chat-reply textarea { width: 100% !important; min-height: 44px !important; max-height: 112px !important; margin: 0 !important; padding: 12px !important; border: 1px solid #d8e3ef !important; border-radius: 13px !important; background: #f8fafc !important; color: #172b46 !important; font: inherit !important; font-size: 10.5px !important; line-height: 1.45 !important; resize: none !important; box-shadow: none !important; }
.admin-chat-reply-row > button { width: 48px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 13px !important; display: grid !important; place-items: center !important; background: var(--primary, #1677f0) !important; color: #fff !important; }
.admin-chat-reply-row > button:disabled { opacity: .55 !important; }
.admin-chat-reply-row > button svg { width: 22px !important; height: 22px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.admin-chat-reply > small { min-height: 12px !important; padding-left: 53px !important; color: #7a8a9e !important; font-size: 8px !important; }
.admin-chat-reply > small.is-error { color: #cf3e4c !important; }
.admin-chat-reply > small.is-success { color: #16815b !important; }
.admin-chat-attachment-preview { min-height: 54px !important; padding: 6px 8px !important; border: 1px solid #cee0f3 !important; border-radius: 12px !important; display: grid !important; grid-template-columns: 42px minmax(0, 1fr) 30px !important; align-items: center !important; gap: 8px !important; background: #f3f8fe !important; }
.admin-chat-attachment-preview img { width: 42px !important; height: 42px !important; border-radius: 9px !important; object-fit: cover !important; }
.admin-chat-attachment-preview span { min-width: 0 !important; font-size: 9px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.admin-chat-attachment-preview button { width: 30px !important; height: 30px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 9px !important; background: #fff !important; color: #68798d !important; font-size: 18px !important; }
.admin-chat-closed-note { padding: 15px !important; border-top: 1px solid #e5edf5 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; background: #fff9eb !important; color: #8b650d !important; }
.admin-chat-closed-note strong { font-size: 10px !important; }
.admin-chat-closed-note span { font-size: 9px !important; }

@media (max-width: 980px) {
  .admin-chat-workspace { grid-template-columns: minmax(250px, 38%) minmax(0, 1fr) !important; }
  .admin-chat-customer-contact { display: none !important; }
  .admin-chat-room-header { grid-template-columns: minmax(0, 1fr) auto !important; }
}

@media (max-width: 760px) {
  .live-chat-root { right: 12px !important; bottom: calc(82px + env(safe-area-inset-bottom)) !important; }
  .live-chat-launcher { min-width: 56px !important; width: 56px !important; height: 56px !important; padding: 0 !important; border-radius: 18px !important; }
  .live-chat-launcher-label { display: none !important; }
  .live-chat-panel { position: fixed !important; left: 10px !important; right: 10px !important; bottom: calc(76px + env(safe-area-inset-bottom)) !important; width: auto !important; max-width: none !important; height: min(540px, calc(100dvh - 94px - env(safe-area-inset-bottom))) !important; min-height: 390px !important; border-radius: 22px !important; }
  .live-chat-header { min-height: 68px !important; padding: 10px 12px !important; }
  .live-chat-agent-avatar { width: 42px !important; height: 42px !important; border-radius: 13px !important; }
  .live-chat-header-copy > strong { font-size: 14px !important; }
  .live-chat-header-copy > span { font-size: 9px !important; }
  .live-chat-close { width: 38px !important; height: 38px !important; }
  .live-chat-body { padding: 12px !important; }
  .live-chat-form { padding: 9px !important; }
  .live-chat-identity > div { grid-template-columns: 1fr !important; }
  .live-chat-message { max-width: 88% !important; }

  .admin-chat-heading { align-items: stretch !important; }
  .admin-chat-summary { min-width: 95px !important; }
  .admin-chat-filter { grid-template-columns: 1fr 130px !important; }
  .admin-chat-filter label { grid-column: 1 / -1 !important; }
  .admin-chat-filter button,
  .admin-chat-filter > a { width: 100% !important; }
  .admin-chat-workspace { height: auto !important; min-height: 0 !important; display: block !important; }
  .admin-chat-page.has-selection .admin-chat-list-card { display: none !important; }
  .admin-chat-page:not(.has-selection) .admin-chat-room-card { display: none !important; }
  .admin-chat-list-card { height: calc(100dvh - 310px) !important; min-height: 430px !important; }
  .admin-chat-room-card { height: calc(100dvh - 190px) !important; min-height: 520px !important; }
  .admin-chat-room-header { min-height: 72px !important; grid-template-columns: auto minmax(0, 1fr) auto !important; gap: 8px !important; }
  .admin-chat-back { width: 36px !important; height: 36px !important; border: 1px solid #dce6f0 !important; border-radius: 11px !important; display: grid !important; place-items: center !important; color: #486079 !important; }
  .admin-chat-back svg { width: 19px !important; height: 19px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
  .admin-chat-avatar.large { display: none !important; }
  .admin-chat-status-form select { max-width: 120px !important; }
  .admin-chat-messages { padding: 13px !important; }
  .admin-chat-message { max-width: 88% !important; }
  .admin-chat-reply > small { padding-left: 0 !important; text-align: center !important; }
}

@media (max-width: 430px) {
  .admin-chat-heading { flex-direction: column !important; }
  .admin-chat-summary { width: 100% !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; }
  .admin-chat-filter { grid-template-columns: 1fr !important; }
  .admin-chat-filter label { grid-column: auto !important; }
  .admin-chat-list-meta { min-width: 66px !important; }
  .admin-chat-status { max-width: 68px !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .admin-chat-room-header { grid-template-columns: auto minmax(0, 1fr) !important; }
  .admin-chat-status-form { grid-column: 1 / -1 !important; }
  .admin-chat-status-form select { width: 100% !important; max-width: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .live-chat-panel,
  .live-chat-launcher,
  .live-chat-loading span { animation: none !important; transition: none !important; }
}
