/* DropX unified chat bubble module — private, group and event chats.
 * One responsive bubble width per viewport; height follows content naturally.
 * Shared limit: 2000 characters (also validated server-side).
 */
:root {
  --dx-chat-bubble-orange-start: rgba(255, 189, 74, 0.6);
  --dx-chat-bubble-orange-end: rgba(237, 134, 22, 0.6);
  --dx-chat-bubble-text: #211407;
  --dx-chat-bubble-border: rgba(255, 220, 153, .78);
}

/* Main messages page: the avatar is present for both sender and recipient. */
#message-list .message-item {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#message-list .message-item .message-avatar {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  order: 0;
}
#message-list .message-item.my-message .message-avatar { order: 2; }
#message-list .message-item .message-bubble {
  width: min(80%, 620px);
  max-width: calc(100% - 46px);
  min-width: 0;
  flex: 0 1 80%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: auto;
  min-height: 46px;
  padding: 12px 14px 10px;
  border: 1px solid var(--dx-chat-bubble-border);
  border-radius: 15px;
  background: linear-gradient(145deg, var(--dx-chat-bubble-orange-start), var(--dx-chat-bubble-orange-end));
  background-image: none;
  color: var(--dx-chat-bubble-text);
  overflow-wrap: anywhere;
}
#message-list .message-item .message-content,
#message-list .message-item .message-content * {
  color: var(--dx-chat-bubble-text);
  text-shadow: none;
}
#message-list .message-item .message-content {
  width: 100%;
  min-width: 0;
  line-height: 1.42;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
#message-list .message-item .message-time-and-reactions { margin-top: 8px; }
#message-list .message-item .message-time { color: rgba(47, 29, 7, .72); text-shadow: none; }

/* Popup private + group chats use the same message renderer. */
.chat-popup:not(.dx-event-chat-popup) .chat-popup-messages {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}
.chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .message-group {
  display: flex;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-items: flex-end;
  gap: 8px;
}
.chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .message-group.msg-left { flex-direction: row; }
.chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .message-group.msg-right { flex-direction: row-reverse; }
.chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .msg-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  align-self: flex-end;
  border: 1px solid var(--dx-chat-bubble-border);
}
.chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .msg-bubble-wrapper {
  width: min(80%, 620px);
  max-width: calc(100% - 42px);
  min-width: 0;
  flex: 0 1 80%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .msg-bubble {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 46px;
  height: auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 12px 13px 10px;
  border: 1px solid var(--dx-chat-bubble-border);
  border-radius: 15px;
  background: linear-gradient(145deg, var(--dx-chat-bubble-orange-start), var(--dx-chat-bubble-orange-end));
  background-image: none;
  color: var(--dx-chat-bubble-text);
  overflow-wrap: anywhere;
}
.chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .msg-text,
.chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .msg-text * {
  color: var(--dx-chat-bubble-text);
  text-shadow: none;
}
.chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .msg-text {
  width: 100%;
  min-width: 0;
  line-height: 1.42;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .msg-time { color: rgba(47, 29, 7, .72); text-shadow: none; }
.chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .msg-author { color: #c6c6c6; }

/* Event chat has a separate data renderer, but shares the exact bubble sizing and palette. */
.chat-popup.dx-event-chat-popup .dx-event-popup-messages {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}
.chat-popup.dx-event-chat-popup .dx-event-popup-message {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 8px;
}
.chat-popup.dx-event-chat-popup .dx-event-popup-message.is-mine { flex-direction: row-reverse; }
.chat-popup.dx-event-chat-popup .dx-event-message-body {
  width: min(80%, 620px);
  max-width: calc(100% - 42px);
  min-width: 0;
  flex: 0 1 80%;
  height: auto;
  min-height: 46px;
  margin: 0 0 8px;
  padding: 12px 13px 10px;
  box-sizing: border-box;
  border: 1px solid var(--dx-chat-bubble-border);
  border-radius: 15px;
  background: linear-gradient(145deg, var(--dx-chat-bubble-orange-start), var(--dx-chat-bubble-orange-end));
  color: var(--dx-chat-bubble-text);
  overflow-wrap: anywhere;
}
.chat-popup.dx-event-chat-popup .dx-event-message-body p,
.chat-popup.dx-event-chat-popup .dx-event-message-body .dx-event-message-text,
.chat-popup.dx-event-chat-popup .dx-event-message-body .dx-event-reply-quote {
  color: var(--dx-chat-bubble-text);
  text-shadow: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.chat-popup.dx-event-chat-popup .dx-event-message-body time,
.chat-popup.dx-event-chat-popup .dx-event-message-meta time { color: rgba(47, 29, 7, .72); }
.chat-popup.dx-event-chat-popup .dx-event-message-avatar { width: 32px; height: 32px; flex-basis: 32px; }
.chat-popup.dx-event-chat-popup .dx-event-message-actions button { color: #211407; }

/* Attachments never exceed the responsive bubble. Long text wraps instead of widening it. */
#message-list .message-bubble img,
#message-list .message-bubble video,
#message-list .message-bubble audio,
.chat-popup-messages .msg-bubble img,
.chat-popup-messages .msg-bubble video,
.chat-popup-messages .msg-bubble audio,
.chat-popup.dx-event-chat-popup .dx-event-message-body img,
.chat-popup.dx-event-chat-popup .dx-event-message-body video,
.chat-popup.dx-event-chat-popup .dx-event-message-body audio {
  max-width: 100%;
  box-sizing: border-box;
}
#message-list .message-bubble .message-attachments,
.chat-popup-messages .msg-bubble .message-attachments { width: 100%; min-width: 0; }

@media (max-width: 700px) {
  #message-list .message-item .message-bubble,
  .chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .msg-bubble-wrapper,
  .chat-popup.dx-event-chat-popup .dx-event-message-body { width: 82%; flex-basis: 82%; }
  #message-list .message-item .message-bubble { max-width: calc(100% - 43px); padding: 10px 11px 9px; }
  .chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .msg-bubble-wrapper,
  .chat-popup.dx-event-chat-popup .dx-event-message-body { max-width: calc(100% - 39px); }
  .chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .msg-avatar,
  .chat-popup.dx-event-chat-popup .dx-event-message-avatar { width: 29px; height: 29px; flex-basis: 29px; }
}


/* FINAL OVERRIDE — legacy popup rules were painting the inner private/group bubble black.
   Keep the shared outer bubble orange and make nested content wrappers transparent. */
html body .chat-popup-wrapper .chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .message-group .msg-bubble,
html body .chat-popup-wrapper .chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .message-group.msg-left .msg-bubble,
html body .chat-popup-wrapper .chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .message-group.msg-right .msg-bubble {
  background: linear-gradient(145deg, rgba(255, 189, 74, 0.6) 0%, rgba(237, 134, 22, 0.6) 100%);
  background-color: rgba(237, 134, 22, 0.6);
  background-image: linear-gradient(145deg, rgba(255, 189, 74, 0.6) 0%, rgba(237, 134, 22, 0.6) 100%);
  color: #211407;
  border: 1px solid rgba(255, 220, 153, .88);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}
html body .chat-popup-wrapper .chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .message-group .msg-bubble .msg-text,
html body .chat-popup-wrapper .chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .message-group .msg-bubble .msg-text * {
  background: transparent;
  background-color: transparent;
  background-image: none;
  color: #211407;
  text-shadow: none;
  border-color: transparent;
}
html body .chat-popup-wrapper .chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .message-group .msg-bubble .msg-time-and-reactions,
html body .chat-popup-wrapper .chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .message-group .msg-bubble .msg-time {
  background: transparent;
  color: rgba(47, 29, 7, .78);
  text-shadow: none;
}
html body .chat-popup-wrapper .chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .message-group .msg-bubble .message-attachments,
html body .chat-popup-wrapper .chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .message-group .msg-bubble .message-grid-gallery,
html body .chat-popup-wrapper .chat-popup:not(.dx-event-chat-popup) .chat-popup-messages .message-group .msg-bubble .grid-image-item {
  background: transparent;
  background-color: transparent;
}

/* DropX custom chat styles — applied per user and per conversation/event. */
.chat-popup.has-chat-style .chat-popup-header,
.chat-popup.has-chat-style .chat-popup-form,
.chat-popup.has-chat-style .dx-event-popup-form,
.chat-popup.has-chat-style .dx-event-popup-context {
  background-color: var(--dx-chat-style-toolbar, #101114);
}
.chat-popup.has-chat-style .chat-popup-messages,
.chat-popup.has-chat-style .dx-event-popup-messages {
  background-color: #050505;
  background-image: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)), var(--dx-chat-style-background, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.chat-popup.has-chat-style .msg-bubble,
.chat-popup.has-chat-style .dx-event-message-body {
  background-color: color-mix(in srgb, var(--dx-chat-style-bubble, #F6A52B) 60%, transparent);
  background-image: none;
  color: var(--dx-chat-style-text, #211407);
  border-color: color-mix(in srgb, var(--dx-chat-style-bubble, #F6A52B) 70%, white);
}
.chat-popup.has-chat-style .msg-text,
.chat-popup.has-chat-style .msg-text *,
.chat-popup.has-chat-style .dx-event-message-text,
.chat-popup.has-chat-style .dx-event-message-text * {
  color: var(--dx-chat-style-text, #211407);
  text-shadow: none;
}
.chat-popup.has-chat-style .msg-time,
.chat-popup.has-chat-style .dx-event-message-meta,
.chat-popup.has-chat-style .dx-event-message-meta time {
  color: var(--dx-chat-style-meta, #6A4316);
}
.chat-popup.has-chat-style .input-with-tools,
.chat-popup.has-chat-style .dx-chat-composer,
.chat-popup.has-chat-style .dx-event-input-row {
  background-color: var(--dx-chat-style-toolbar, #101114);
}
.chat-popup.has-chat-style .chat-tool-btn,
.chat-popup.has-chat-style .chat-act-btn,
.chat-popup.has-chat-style .reaction-main-toggle-btn,
.chat-popup.has-chat-style .chat-send-btn {
  color: var(--dx-chat-style-text, #F5B82E);
  border-color: color-mix(in srgb, var(--dx-chat-style-toolbar, #101114) 65%, var(--dx-chat-style-bubble, #F6A52B));
}
.chat-popup.has-chat-style .chat-popup-header .header-name,
.chat-popup.has-chat-style .dx-event-popup-title .header-name,
.chat-popup.has-chat-style .dx-chat-header-menu {
  color: var(--dx-chat-style-text, #F5B82E);
}

.dx-chat-style-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.dx-chat-style-modal {
  width: min(680px, 100%);
  max-height: min(82vh, 760px);
  overflow: auto;
  color: #ececec;
  background: #0d0e10;
  border: 1px solid #b98b13;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.dx-chat-style-modal > header,
.dx-chat-style-modal > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #15120c;
  border-bottom: 1px solid rgba(220,169,28,.25);
}
.dx-chat-style-modal > header small { color: #a8a8a8; font-size: 10px; letter-spacing: .12em; }
.dx-chat-style-modal h2 { margin: 3px 0 0; color: #e4b52d; font-size: 18px; }
.dx-chat-style-modal button { cursor: pointer; border: 1px solid #624b15; border-radius: 8px; padding: 9px 12px; color: #f3c13a; background: #171717; }
.dx-chat-style-modal button:hover,
.dx-chat-style-modal button.active { background: #3a2b0b; border-color: #d9a923; }
.dx-chat-style-modal .dx-chat-style-close { font-size: 22px; line-height: 1; padding: 4px 9px; }
.dx-chat-style-tabs { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #282828; }
.dx-chat-style-content { padding: 16px; }
.dx-chat-style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.dx-chat-style-card { min-width: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; border: 1px solid #323232; border-radius: 12px; background: #131416; }
.dx-chat-style-card.is-selected { border-color: #e1b329; box-shadow: inset 0 0 0 1px rgba(225,179,41,.2); }
.dx-chat-style-preview { height: 86px; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 10px; border-radius: 8px; background-color: var(--preview-toolbar, #101114); background-size: cover; background-position: center; }
.dx-chat-style-preview span { display: block; width: 72%; height: 13px; border-radius: 8px; background: var(--preview-bubble, #F6A52B); }
.dx-chat-style-preview span:nth-child(2) { align-self: flex-end; width: 55%; }
.dx-chat-style-preview span:nth-child(3) { width: 45%; opacity: .7; }
.dx-chat-style-card strong { overflow-wrap: anywhere; font-size: 13px; }
.dx-chat-style-card small { color: #9b9b9b; font-size: 11px; }
.dx-chat-style-card > button { margin-top: auto; }
.dx-chat-style-empty { display: grid; justify-items: center; gap: 8px; padding: 26px 12px; text-align: center; color: #aaa; }
.dx-chat-style-empty > span,
.dx-chat-style-publish > span { color: #e8b82d; font-size: 30px; }
.dx-chat-style-empty strong { color: #e8b82d; }
.dx-chat-style-empty p,
.dx-chat-style-form p,
.dx-chat-style-publish p { margin: 0; color: #9c9c9c; font-size: 12px; line-height: 1.5; }
.dx-chat-style-modal > footer { border-top: 1px solid #282828; border-bottom: 0; flex-wrap: wrap; }
.dx-chat-style-form { display: grid; gap: 14px; }
.dx-chat-style-form > label { display: grid; gap: 7px; color: #e5ba3b; font-size: 13px; }
.dx-chat-style-form label small { display: block; color: #999; font-size: 11px; }
.dx-chat-style-form input:not([type="color"]),
.dx-chat-style-form input[type="file"] { box-sizing: border-box; width: 100%; min-width: 0; padding: 10px; color: #eee; border: 1px solid #3b3424; border-radius: 8px; background: #08090a; }
.dx-chat-style-colors { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.dx-chat-style-colors label { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; color: #ddd; border: 1px solid #292929; border-radius: 8px; background: #121315; font-size: 12px; }
.dx-chat-style-colors input { width: 36px; height: 30px; padding: 0; border: 0; background: transparent; }
.dx-chat-style-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dx-chat-style-form-actions button[type="submit"],
.dx-chat-style-publish button:first-of-type { color: #17120a; background: #e3b22e; border-color: #e3b22e; }
.dx-chat-style-publish { display: grid; gap: 12px; text-align: center; padding: 10px; }
.dx-chat-style-publish h3 { margin: 0; color: #e8b82d; }
.dx-chat-style-publish button { width: 100%; }
@media (max-width: 520px) {
  .dx-chat-style-modal-backdrop { padding: 8px; }
  .dx-chat-style-modal { max-height: 88dvh; border-radius: 12px; }
  .dx-chat-style-modal > header, .dx-chat-style-modal > footer { padding: 11px; }
  .dx-chat-style-content { padding: 11px; }
  .dx-chat-style-tabs { padding: 10px; }
  .dx-chat-style-tabs button { flex: 1; padding: 8px 6px; font-size: 11px; }
  .dx-chat-style-colors { grid-template-columns: 1fr; }
}

/* DropX popup chat: kategorizált, egymásba nyíló fejlécmenük */
.chat-popup .dx-chat-header-menu .dx-chat-menu-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}
.chat-popup .dx-chat-header-menu .dx-chat-menu-section-toggle {
  justify-content: space-between;
  gap: 12px;
  color: #e6b83f;
  font-weight: 700;
}
.chat-popup .dx-chat-header-menu .dx-chat-menu-section-toggle > span {
  margin-left: auto;
  opacity: .8;
  transition: transform .15s ease;
}
.chat-popup .dx-chat-header-menu .dx-chat-menu-section-toggle[aria-expanded="true"] > span {
  transform: rotate(180deg);
}
.chat-popup .dx-chat-header-menu .dx-chat-submenu {
  display: flex;
  flex-direction: column;
  margin: 2px 0 5px 8px;
  padding-left: 5px;
  border-left: 1px solid rgba(214,168,48,.32);
}
.chat-popup .dx-chat-header-menu .dx-chat-submenu[hidden],
.chat-popup .dx-chat-header-menu [data-chat-profile-section][hidden] {
  display: none !important;
}
.chat-popup .dx-chat-header-menu .dx-chat-submenu > a,
.chat-popup .dx-chat-header-menu .dx-chat-submenu > button {
  min-height: 31px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 11.5px;
}

/* Chat style runtime overrides: deliberately more specific than legacy unified-bubble rules. */
html body .chat-popup-wrapper .chat-popup.has-chat-style .chat-popup-messages .message-group .msg-bubble,
html body .chat-popup-wrapper .chat-popup.has-chat-style .chat-popup-messages .message-group.msg-left .msg-bubble,
html body .chat-popup-wrapper .chat-popup.has-chat-style .chat-popup-messages .message-group.msg-right .msg-bubble {
  background: var(--dx-chat-style-bubble, #F6A52B);
  background-color: color-mix(in srgb, var(--dx-chat-style-bubble, #F6A52B) 60%, transparent);
  background-image: none;
  color: var(--dx-chat-style-text, #211407);
  border-color: color-mix(in srgb, var(--dx-chat-style-bubble, #F6A52B) 70%, white);
}
html body .chat-popup-wrapper .chat-popup.has-chat-style .chat-popup-messages .message-group .msg-bubble .msg-text,
html body .chat-popup-wrapper .chat-popup.has-chat-style .chat-popup-messages .message-group .msg-bubble .msg-text *,
html body .chat-popup-wrapper .chat-popup.has-chat-style .chat-popup-messages .message-group .msg-bubble .message-reply-quote {
  color: var(--dx-chat-style-text, #211407);
  background-color: transparent;
  text-shadow: none;
}
html body .chat-popup-wrapper .chat-popup.has-chat-style .chat-popup-messages .message-group .msg-bubble .msg-time,
html body .chat-popup-wrapper .chat-popup.has-chat-style .chat-popup-messages .message-group .msg-bubble .message-time,
html body .chat-popup-wrapper .chat-popup.has-chat-style .chat-popup-messages .message-group .msg-bubble .message-time-and-reactions {
  color: var(--dx-chat-style-meta, #6A4316);
}
html body .chat-popup-wrapper .chat-popup.has-chat-style .chat-popup-header,
html body .chat-popup-wrapper .chat-popup.has-chat-style .chat-popup-form,
html body .chat-popup-wrapper .chat-popup.has-chat-style .dx-event-popup-context,
html body .chat-popup-wrapper .chat-popup.has-chat-style .input-with-tools,
html body .chat-popup-wrapper .chat-popup.has-chat-style .dx-chat-composer,
html body .chat-popup-wrapper .chat-popup.has-chat-style .dx-event-input-row {
  background-color: var(--dx-chat-style-toolbar, #101114);
}
html body .chat-popup-wrapper .chat-popup.has-chat-style .chat-popup-header .header-name,
html body .chat-popup-wrapper .chat-popup.has-chat-style .dx-event-popup-title .header-name,
html body .chat-popup-wrapper .chat-popup.has-chat-style .dx-chat-header-menu,
html body .chat-popup-wrapper .chat-popup.has-chat-style .chat-tool-btn,
html body .chat-popup-wrapper .chat-popup.has-chat-style .chat-act-btn,
html body .chat-popup-wrapper .chat-popup.has-chat-style .reaction-main-toggle-btn,
html body .chat-popup-wrapper .chat-popup.has-chat-style .chat-send-btn {
  color: var(--dx-chat-style-text, #F5B82E);
}
html body .chat-popup-wrapper .chat-popup.has-chat-style .chat-popup-form textarea,
html body .chat-popup-wrapper .chat-popup.has-chat-style .dx-event-popup-form textarea {
  color: var(--dx-chat-style-text, #F5B82E);
  caret-color: var(--dx-chat-style-text, #F5B82E);
}
html body .chat-popup-wrapper .chat-popup.has-chat-style .chat-popup-messages,
html body .chat-popup-wrapper .chat-popup.has-chat-style .dx-event-popup-messages {
  background-color: #050505;
  background-image: linear-gradient(rgba(0,0,0,.20), rgba(0,0,0,.20)), var(--dx-chat-style-background, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
html body .chat-popup-wrapper .chat-popup.has-chat-style.dx-event-chat-popup .dx-event-message-body,
html body .chat-popup-wrapper .chat-popup.has-chat-style.dx-event-chat-popup .dx-event-popup-message .dx-event-message-body {
  background: color-mix(in srgb, var(--dx-chat-style-bubble, #F6A52B) 60%, transparent);
  background-color: color-mix(in srgb, var(--dx-chat-style-bubble, #F6A52B) 60%, transparent);
  color: var(--dx-chat-style-text, #211407);
  border-color: color-mix(in srgb, var(--dx-chat-style-bubble, #F6A52B) 70%, white);
}
html body .chat-popup-wrapper .chat-popup.has-chat-style.dx-event-chat-popup .dx-event-message-text,
html body .chat-popup-wrapper .chat-popup.has-chat-style.dx-event-chat-popup .dx-event-message-text *,
html body .chat-popup-wrapper .chat-popup.has-chat-style.dx-event-chat-popup .dx-event-message-meta,
html body .chat-popup-wrapper .chat-popup.has-chat-style.dx-event-chat-popup .dx-event-message-meta time {
  color: var(--dx-chat-style-text, #211407);
}
html body .chat-popup-wrapper .chat-popup.has-chat-style.dx-event-chat-popup .dx-event-message-meta,
html body .chat-popup-wrapper .chat-popup.has-chat-style.dx-event-chat-popup .dx-event-message-meta time {
  color: var(--dx-chat-style-meta, #6A4316);
}


/* Composer background now fills the complete footer area for all popup chat types. */
html body .chat-popup-wrapper > .chat-popup .chat-popup-form,
html body .chat-popup-wrapper > .chat-popup .dx-event-popup-form {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  gap: 0;
}

html body .chat-popup-wrapper > .chat-popup .dx-chat-composer,
html body .chat-popup-wrapper > .chat-popup .dx-event-input-row,
html body .chat-popup-wrapper > .chat-popup .input-with-tools {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 10px;
  border-radius: 0;
}

html body .chat-popup-wrapper > .chat-popup .dx-chat-composer {
  background-color: var(--dx-chat-style-toolbar, #101114);
}

html body .chat-popup-wrapper > .chat-popup .dx-event-input-row,
html body .chat-popup-wrapper > .chat-popup .input-with-tools {
  align-items: center;
}


/* DropX chat style: blend the selected toolbar color into the chat wallpaper.
 * The wallpaper is painted once across the popup; translucent message and toolbar
 * layers let it show through consistently for private, group and event chats.
 */
html body .chat-popup-wrapper > .chat-popup.has-chat-style {
  background-color: #050505;
  background-image: var(--dx-chat-style-background, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

html body .chat-popup-wrapper > .chat-popup.has-chat-style .chat-popup-header {
  background-color: transparent;
  background-image: linear-gradient(
    to bottom,
    var(--dx-chat-style-toolbar, #101114) 0%,
    color-mix(in srgb, var(--dx-chat-style-toolbar, #101114) 82%, transparent) 48%,
    transparent 100%
  );
}

html body .chat-popup-wrapper > .chat-popup.has-chat-style .chat-popup-form,
html body .chat-popup-wrapper > .chat-popup.has-chat-style .dx-event-popup-form {
  background-color: transparent;
  background-image: none;
}

html body .chat-popup-wrapper > .chat-popup.has-chat-style .dx-event-popup-context {
  background-color: transparent;
  background-image: linear-gradient(
    to bottom,
    var(--dx-chat-style-toolbar, #101114) 0%,
    color-mix(in srgb, var(--dx-chat-style-toolbar, #101114) 82%, transparent) 100%
  );
}

html body .chat-popup-wrapper > .chat-popup.has-chat-style .chat-popup-messages,
html body .chat-popup-wrapper > .chat-popup.has-chat-style .dx-event-popup-messages {
  background-color: transparent;
  background-image: linear-gradient(rgba(0, 0, 0, .20), rgba(0, 0, 0, .20));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

html body .chat-popup-wrapper > .chat-popup.has-chat-style .dx-chat-composer,
html body .chat-popup-wrapper > .chat-popup.has-chat-style .input-with-tools,
html body .chat-popup-wrapper > .chat-popup.has-chat-style .dx-event-input-row {
  background-color: transparent;
  background-image: linear-gradient(
    to top,
    var(--dx-chat-style-toolbar, #101114) 0%,
    color-mix(in srgb, var(--dx-chat-style-toolbar, #101114) 82%, transparent) 48%,
    transparent 100%
  );
}

/* Shared GIF picker and responsive chat popup: same chat runtime on desktop and mobile. */
.dx-shared-gif-overlay{position:fixed;inset:0;z-index:2147483647;isolation:isolate;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}
.dx-shared-gif-dialog{width:min(720px,96vw);max-height:min(82vh,760px);display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid #98752f;border-radius:18px;background:#171719;color:#f5f0e7;box-shadow:0 18px 70px #000a;overflow:hidden}
.dx-shared-gif-dialog>header{display:flex;align-items:center;justify-content:space-between}.dx-shared-gif-dialog>header button{border:0;background:transparent;color:inherit;font-size:26px;cursor:pointer}
.dx-shared-gif-search{display:flex;align-items:center;gap:10px;border:1px solid #66552f;border-radius:12px;padding:4px 10px}.dx-shared-gif-search input{width:100%;min-width:0;padding:10px 4px;border:0;outline:0;background:transparent;color:inherit;font:inherit}
.dx-shared-gif-hint{font-size:12px;color:#aaa}.dx-shared-gif-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;overflow:auto;min-height:80px}.dx-shared-gif-item{min-width:0;padding:0;border:1px solid #393939;border-radius:10px;background:#222;overflow:hidden;color:inherit;text-align:left;cursor:pointer}.dx-shared-gif-item img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.dx-shared-gif-item span{display:block;padding:5px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dx-shared-gif-more{padding:10px;border:1px solid #8b6a29;border-radius:10px;background:#211c12;color:#f4ce6c;cursor:pointer}.dx-shared-gif-more:disabled{opacity:.6}.dx-shared-gif-empty{grid-column:1/-1;color:#bbb;font-size:13px}
@media(max-width:600px){.dx-shared-gif-overlay{padding:0;align-items:stretch}.dx-shared-gif-dialog{width:100%;max-height:100dvh;height:100dvh;border-radius:0;padding:12px}.dx-shared-gif-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.dx-shared-gif-item span{font-size:10px}.chat-popup{max-width:100vw;max-height:100dvh}.chat-popup .chat-popup-messages{min-height:0;overscroll-behavior:contain}.chat-popup .dx-chat-composer{flex-wrap:nowrap;gap:4px}.chat-popup .dx-chat-composer-input{min-width:0;flex:1}}


/* Pure GIF messages: show only the animation, never the provider card/description. */
.dx-chat-sent-gif { display:block; max-width:min(100%, 320px); }
.dx-chat-sent-gif img,
.dx-chat-sent-gif-image {
  display:block; width:auto; max-width:100%; max-height:320px;
  height:auto; object-fit:contain; border-radius:10px;
}


/* GIF message is media-only; never style it like a rich-link preview card. */
.dx-chat-sent-gif { display:block; min-width:0; max-width:min(100%, 320px); }
.dx-chat-sent-gif img,
.dx-chat-sent-gif-image {
  display:block; width:auto; max-width:100%; max-height:320px; height:auto;
  object-fit:contain; border-radius:10px;
}
.dx-event-gif-message .dx-event-message-body > .dx-chat-sent-gif-image { margin:0; }