/* IndustryApex WhatsApp conversation theme - scoped to Chatwoot conversation view */
:root {
  --ia-wa-canvas: #efeae2;
  --ia-wa-incoming: #ffffff;
  --ia-wa-outgoing: #d9fdd3;
  --ia-wa-text: #111b21;
  --ia-wa-muted: #667781;
  --ia-wa-header: #f0f2f5;
  --ia-wa-accent: #00a884;
  --ia-wa-check: #53bdeb;
}
.conversation-details-wrap {
  background: var(--ia-wa-canvas) !important;
}
.conversation-details-wrap > div:first-child {
  background: var(--ia-wa-header) !important;
  border-color: #d8dbdd !important;
}
.conversation-details-wrap .conversation-panel {
  background-color: var(--ia-wa-canvas) !important;
  background-image:
    radial-gradient(circle at 20px 20px, rgba(11,20,26,.025) 1.5px, transparent 1.6px),
    radial-gradient(circle at 4px 34px, rgba(11,20,26,.018) 1px, transparent 1.2px) !important;
  background-size: 46px 46px, 58px 58px !important;
  padding: 18px 12px 22px !important;
  scroll-padding-bottom: 24px;
  scrollbar-color: rgba(11,20,26,.22) transparent;
}
.conversation-details-wrap .conversation-panel .message-bubble-container {
  margin-bottom: 3px !important;
  padding-inline: 0 !important;
}
.conversation-details-wrap .conversation-panel .message-bubble-container > .grid {
  max-width: min(76%, 760px) !important;
}
.conversation-details-wrap .conversation-panel .left-bubble,
.conversation-details-wrap .conversation-panel .right-bubble {
  color: var(--ia-wa-text) !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px .5px rgba(11,20,26,.16) !important;
  max-width: none !important;
  padding: 7px 9px 6px !important;
  line-height: 1.42 !important;
}
.conversation-details-wrap .conversation-panel .left-bubble {
  background: var(--ia-wa-incoming) !important;
  border-top-left-radius: 2px !important;
}
.conversation-details-wrap .conversation-panel .right-bubble {
  background: var(--ia-wa-outgoing) !important;
  border-top-right-radius: 2px !important;
}
.conversation-details-wrap .conversation-panel .prose-bubble,
.conversation-details-wrap .conversation-panel .prose-bubble p,
.conversation-details-wrap .conversation-panel .prose-bubble a {
  color: inherit !important;
  font-size: 14.2px !important;
  line-height: 1.42 !important;
  letter-spacing: .01em;
}
.conversation-details-wrap .conversation-panel .prose-bubble p {
  margin-block: 0 !important;
}
.conversation-details-wrap .conversation-panel time {
  color: var(--ia-wa-muted) !important;
  font-size: 11px !important;
  line-height: 14px !important;
  margin-top: 3px !important;
}
.conversation-details-wrap .conversation-panel .message-bubble-container.justify-end time,
.conversation-details-wrap .conversation-panel .right-bubble time {
  text-align: right;
}
.conversation-details-wrap .conversation-panel .message-bubble-container.justify-center > div > div,
.conversation-details-wrap .conversation-panel .message-bubble-container.justify-center [class*="bg-n-alpha"] {
  background: rgba(255,255,255,.86) !important;
  color: #54656f !important;
  border: 0 !important;
  border-radius: 7px !important;
  box-shadow: 0 1px .5px rgba(11,20,26,.10) !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
}
.conversation-details-wrap .conversation-panel [class*="status"],
.conversation-details-wrap .conversation-panel [class*="double-check"],
.conversation-details-wrap .conversation-panel svg.text-n-blue-9 {
  color: var(--ia-wa-check) !important;
}
.conversation-details-wrap .conversation-panel img,
.conversation-details-wrap .conversation-panel video {
  border-radius: 7px !important;
}
.conversation-details-wrap .conversation-panel blockquote,
.conversation-details-wrap .conversation-panel [class*="quoted"],
.conversation-details-wrap .conversation-panel [class*="reply-to"] {
  background: rgba(255,255,255,.50) !important;
  border-left: 4px solid var(--ia-wa-accent) !important;
  border-radius: 5px !important;
  padding: 7px 9px !important;
  margin: 2px 0 6px !important;
}
.conversation-details-wrap .resizable-editor-wrapper {
  background: var(--ia-wa-header) !important;
  border-top: 1px solid #d8dbdd !important;
  padding: 10px 12px 12px !important;
}
.conversation-details-wrap .reply-box {
  background: var(--ia-wa-incoming) !important;
  border: 0 !important;
  border-radius: 9px !important;
  box-shadow: 0 1px 1px rgba(11,20,26,.08) !important;
}
.conversation-details-wrap .reply-box__top,
.conversation-details-wrap .popover-prosemirror-menu,
.conversation-details-wrap .ProseMirror-menubar-wrapper,
.conversation-details-wrap .ProseMirror {
  background: transparent !important;
}
.conversation-details-wrap .ProseMirror {
  color: var(--ia-wa-text) !important;
  min-height: 72px !important;
  padding-inline: 12px !important;
}
.conversation-details-wrap .reply-box button {
  border-radius: 999px !important;
}
.conversation-details-wrap .reply-box button:not(:disabled):hover {
  background: rgba(11,20,26,.06) !important;
}
@media (max-width: 900px) {
  .conversation-details-wrap .conversation-panel {
    padding: 12px 12px 18px !important;
  }
  .conversation-details-wrap .conversation-panel .message-bubble-container > .grid {
    max-width: 88% !important;
  }
  .conversation-details-wrap .left-bubble,
  .conversation-details-wrap .right-bubble {
    padding: 7px 8px 5px !important;
  }
}
html.dark .conversation-details-wrap,
html.dark .conversation-details-wrap .conversation-panel {
  --ia-wa-canvas: #0b141a;
  --ia-wa-incoming: #202c33;
  --ia-wa-outgoing: #005c4b;
  --ia-wa-text: #e9edef;
  --ia-wa-muted: #8696a0;
  --ia-wa-header: #202c33;
  background-color: var(--ia-wa-canvas) !important;
}
html.dark .conversation-details-wrap > div:first-child,
html.dark .conversation-details-wrap .resizable-editor-wrapper {
  background: var(--ia-wa-header) !important;
  border-color: #2a3942 !important;
}
html.dark .conversation-details-wrap .conversation-panel .message-bubble-container.justify-center > div > div,
html.dark .conversation-details-wrap .conversation-panel .message-bubble-container.justify-center [class*="bg-n-alpha"] {
  background: rgba(32,44,51,.94) !important;
  color: #aebac1 !important;
}
html.dark .conversation-details-wrap .reply-box {
  background: #2a3942 !important;
}
html.dark .conversation-details-wrap .ProseMirror {
  color: #e9edef !important;
}

/* Customer avatar beside every incoming message, including consecutive messages. */
.conversation-details-wrap .conversation-panel .message-bubble-container.justify-start {
  align-items: flex-end !important;
}
.conversation-details-wrap .conversation-panel .ia-contact-message-avatar {
  display: flex;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-inline-end: 8px;
  margin-bottom: 1px;
}
.conversation-details-wrap .conversation-panel .ia-contact-message-avatar [role="img"],
.conversation-details-wrap .conversation-panel .ia-contact-message-avatar img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
}

/* WhatsApp-like conversation list: contact first, inbox/team label hidden. */
.conversation.ia-wa-conversation-card {
  min-height: 68px !important;
  padding-inline: 10px !important;
}
.conversation.ia-wa-conversation-card > div.relative > span {
  width: 42px !important;
  height: 42px !important;
  margin-top: 13px !important;
}
.conversation.ia-wa-conversation-card > div.relative > span [role="img"],
.conversation.ia-wa-conversation-card > div.relative > span img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
}
.conversation.ia-wa-conversation-card > div:nth-child(2) {
  padding-block: 11px !important;
  margin-inline-start: 2px;
}
.conversation.ia-wa-conversation-card h4.conversation--user {
  padding-top: 0 !important;
  font-size: 14.5px !important;
  line-height: 21px !important;
  text-transform: none !important;
}
.conversation.ia-wa-conversation-card h4.conversation--user + div,
.conversation.ia-wa-conversation-card h4.conversation--user + p {
  height: 22px !important;
  line-height: 22px !important;
}
.conversation .ia-hidden-inbox-name {
  display: none !important;
}
.conversation .ia-conversation-meta-row.ia-empty-meta-row {
  display: none !important;
}
.conversation.ia-card-with-hidden-inbox > div.relative > span {
  margin-top: 13px !important;
}
.conversation.ia-card-with-hidden-inbox > div:nth-child(2) > .absolute.flex.flex-col {
  top: 12px !important;
}

@media (max-width: 900px) {
  .conversation.ia-wa-conversation-card {
    min-height: 64px !important;
  }
  .conversation.ia-wa-conversation-card > div.relative > span,
  .conversation.ia-wa-conversation-card > div.relative > span [role="img"],
  .conversation.ia-wa-conversation-card > div.relative > span img {
    width: 40px !important;
    height: 40px !important;
  }
  .conversation-details-wrap .conversation-panel .ia-contact-message-avatar,
  .conversation-details-wrap .conversation-panel .ia-contact-message-avatar [role="img"],
  .conversation-details-wrap .conversation-panel .ia-contact-message-avatar img {
    width: 32px !important;
    height: 32px !important;
  }
  .conversation-details-wrap .conversation-panel .ia-contact-message-avatar {
    flex-basis: 32px;
    margin-inline-end: 6px;
  }
}

/* 2026-10-23: WhatsApp Web list proportions and typography. */
.conversation.ia-wa-conversation-card {
  min-height: 72px !important;
  border-bottom: 1px solid #e9edef !important;
  padding-inline: 12px 10px !important;
}
.conversation.ia-wa-conversation-card:hover,
.conversation.ia-wa-conversation-card[aria-current="true"],
.conversation.ia-wa-conversation-card.router-link-active {
  background: #f0f2f5 !important;
}
.conversation.ia-wa-conversation-card > div.relative > span,
.conversation.ia-wa-conversation-card > div.relative > span [role="img"],
.conversation.ia-wa-conversation-card > div.relative > span img {
  width: 49px !important;
  height: 49px !important;
}
.conversation.ia-wa-conversation-card > div.relative > span {
  margin-top: 11px !important;
}
.conversation.ia-wa-conversation-card > div:nth-child(2) {
  padding-block: 10px !important;
  min-width: 0 !important;
}
.conversation.ia-wa-conversation-card h4.conversation--user {
  color: #111b21 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.conversation.ia-wa-conversation-card h4.conversation--user + div,
.conversation.ia-wa-conversation-card h4.conversation--user + p {
  color: #667781 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.conversation.ia-wa-conversation-card time {
  color: #667781 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}
html.dark .conversation.ia-wa-conversation-card {
  border-bottom-color: #222d34 !important;
}
html.dark .conversation.ia-wa-conversation-card:hover,
html.dark .conversation.ia-wa-conversation-card[aria-current="true"],
html.dark .conversation.ia-wa-conversation-card.router-link-active {
  background: #2a3942 !important;
}
html.dark .conversation.ia-wa-conversation-card h4.conversation--user {
  color: #e9edef !important;
}
html.dark .conversation.ia-wa-conversation-card h4.conversation--user + div,
html.dark .conversation.ia-wa-conversation-card h4.conversation--user + p,
html.dark .conversation.ia-wa-conversation-card time {
  color: #8696a0 !important;
}
@media (max-width: 900px) {
  .conversation.ia-wa-conversation-card {
    min-height: 70px !important;
  }
  .conversation.ia-wa-conversation-card > div.relative > span,
  .conversation.ia-wa-conversation-card > div.relative > span [role="img"],
  .conversation.ia-wa-conversation-card > div.relative > span img {
    width: 48px !important;
    height: 48px !important;
  }
}

/* WhatsApp has no CRM team/assignee line above the contact name. */
.conversation.ia-wa-conversation-card .ia-conversation-meta-row {
  display: none !important;
}