* {
  box-sizing: border-box;
}

:root {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #e5e7eb;
  background: #0b1220;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.hidden {
  display: none !important;
}

.login-screen {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(37, 211, 102, 0.15),
      transparent 30%
    ),
    #0b1220;
}

.login-card {
  width: min(420px, 100%);
  padding: 30px;
  border: 1px solid #253047;
  border-radius: 24px;
  background: #111827;
  box-shadow:
    0 24px 70px
    rgba(0, 0, 0, 0.35);
}

.brand-bubble {
  font-size: 42px;
}

.login-card h1 {
  margin: 12px 0 6px;
}

.login-card p {
  margin: 0 0 20px;
  color: #94a3b8;
}

.login-card input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #334155;
  border-radius: 12px;
  background: #0f172a;
  color: #fff;
  outline: none;
}

.password-input-wrap {
  position: relative;
  width: 100%;
}

.login-card .password-input-wrap input {
  padding-right: 52px;
}

.login-card .password-reveal-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #cbd5e1;
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.login-card .password-reveal-btn:hover,
.login-card .password-reveal-btn.is-pressed {
  background: rgba(148, 163, 184, 0.14);
  color: #fff;
}

.login-card .password-reveal-btn:focus-visible {
  outline: 2px solid #22c55e;
  outline-offset: 1px;
}

.login-card button {
  width: 100%;
  margin-top: 12px;
  padding: 13px;
  border: 0;
  border-radius: 12px;
  background: #22c55e;
  color: #052e16;
  font-weight: 800;
  cursor: pointer;
}

.error {
  color: #fca5a5;
  margin-top: 10px;
  min-height: 20px;
}

.app {
  height: 100dvh;
  display: grid;
  grid-template-columns:
    360px minmax(0, 1fr);
  background: #0b1220;
}

.sidebar {
  min-width: 0;
  border-right:
    1px solid #243047;
  background: #111827;
}

.sidebar-header,
.chat-header,
.selection-header {
  height: 66px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom:
    1px solid #243047;
  background: #111827;
}

.sidebar-header {
  justify-content:
    space-between;
}

.sidebar-header small,
.chat-title small,
.modal-header small {
  display: block;
  color: #94a3b8;
  margin-top: 2px;
}

.icon-btn {
  border: 0;
  background: transparent;
  color: #cbd5e1;
  font-size: 22px;
  cursor: pointer;
  border-radius: 10px;
  padding: 8px 10px;
}

.icon-btn:hover {
  background: #1e293b;
}

.search-wrap {
  padding: 10px 12px;
}

.search-wrap input {
  width: 100%;
  border: 1px solid #26344b;
  background: #0f172a;
  color: #fff;
  border-radius: 12px;
  padding: 11px 13px;
  outline: none;
}

.conversation-list {
  height:
    calc(100dvh - 122px);
  overflow-y: auto;
}

.conversation {
  display: grid;
  grid-template-columns:
    44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom:
    1px solid
    rgba(51, 65, 85, 0.35);
}

.conversation:hover,
.conversation.active {
  background: #182235;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #27364e;
  color: #dbeafe;
  font-weight: 800;
  flex: 0 0 auto;
}

.avatar-wrap {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

.avatar-wrap .avatar {
  width: 100%;
  height: 100%;
}

.retention-clock {
  position: absolute;
  right: -3px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #202c33;
  color: #aebac1;
  border: 2px solid #111827;
  pointer-events: none;
}

.retention-clock svg {
  width: 14px;
  height: 14px;
  display: block;
}

.chat-avatar-wrap {
  flex: 0 0 42px;
}


.conv-main {
  min-width: 0;
}

.conv-row {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content:
    space-between;
}

.conv-row strong,
.conv-preview {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.conv-preview {
  color: #94a3b8;
  margin-top: 4px;
  font-size: 13px;
}

.conv-time {
  color: #64748b;
  font-size: 11px;
  white-space: nowrap;
}

.badge {
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #22c55e;
  color: #052e16;
  font-size: 11px;
  font-weight: 800;
}

.bot-dot {
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  margin-top: 3px;
}

.chat {
  min-width: 0;
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-rows:
    66px minmax(0, 1fr) auto;
  background:
    linear-gradient(
      rgba(11, 18, 32, 0.95),
      rgba(11, 18, 32, 0.95)
    ),
    radial-gradient(
      circle,
      rgba(148, 163, 184, 0.13)
      1px,
      transparent 1px
    );
  background-size:
    auto,
    18px 18px;
}

.chat-title {
  min-width: 0;
  flex: 1;
}

.chat-title strong {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.header-action,
.secondary-action,
.primary-action {
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 8px 10px;
  background: #182235;
  color: #e5e7eb;
  cursor: pointer;
  white-space: nowrap;
}

.header-action:hover,
.secondary-action:hover {
  background: #243047;
}

.header-action:disabled,
.primary-action:disabled {
  opacity: 0.45;
  cursor: default;
}

.primary-action {
  border-color: #22c55e;
  background: #22c55e;
  color: #052e16;
  font-weight: 800;
}

.selection-header {
  overflow-x: auto;
}

.selection-header strong {
  min-width: 120px;
}

.selection-header select {
  border:
    1px solid #334155;
  border-radius: 10px;
  background: #0f172a;
  color: #e5e7eb;
  padding: 8px 9px;
}


.retention-wrap {
  position: relative;
  flex: 0 0 auto;
}

.retention-btn {
  height: 34px;
  min-width: 48px;
  padding: 0 8px;
  border: 1px solid #334155;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #182235;
  color: #e5e7eb;
  cursor: pointer;
}

.retention-btn:hover {
  background: #243047;
}

.retention-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.retention-btn small {
  font-size: 11px;
  color: #cbd5e1;
}

.retention-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  width: 230px;
  padding: 9px;
  border: 1px solid #334155;
  border-radius: 14px;
  background: #111b2b;
  box-shadow:
    0 16px 40px
    rgba(0, 0, 0, 0.42);
}

.retention-menu > strong,
.retention-help {
  display: block;
  padding:
    5px 8px;
}

.retention-help {
  color: #94a3b8;
  font-size: 11px;
  padding-top: 0;
  margin-bottom: 5px;
}

.retention-menu button {
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  border: 0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: transparent;
  color: #e5e7eb;
  text-align: left;
  cursor: pointer;
}

.retention-menu button:hover {
  background: #1e293b;
}

.retention-menu button.active {
  background: rgba(
    37,
    211,
    102,
    0.12
  );
}

.retention-menu button.active b::after {
  content: "✓";
  color: #25d366;
}

.retention-separator {
  height: 1px;
  margin: 6px 4px;
  background: #334155;
}

.bot-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #cbd5e1;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.bot-toggle input {
  display: none;
}

.bot-toggle i {
  width: 38px;
  height: 22px;
  border-radius: 99px;
  background: #475569;
  position: relative;
}

.bot-toggle i::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  left: 3px;
  top: 3px;
  background: white;
  transition: 0.18s;
}

.bot-toggle input:checked + i {
  background: #22c55e;
}

.bot-toggle input:checked + i::after {
  transform: translateX(16px);
}

.messages {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color:
    rgba(255, 255, 255, 0.22)
    transparent;
  padding:
    10px max(10px, 2vw);
}

.messages::-webkit-scrollbar {
  width: 6px;
}

.messages::-webkit-scrollbar-track {
  background: transparent;
}

.messages::-webkit-scrollbar-thumb {
  background:
    rgba(255, 255, 255, 0.20);
  border-radius: 999px;
}

.messages::-webkit-scrollbar-thumb:hover {
  background:
    rgba(255, 255, 255, 0.32);
}

.empty-state {
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  color: #94a3b8;
}

.empty-state > div {
  font-size: 44px;
}

.empty-state h2 {
  color: #e5e7eb;
  margin-bottom: 4px;
}

.message-row {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  min-height: 0;
  height: auto;
  gap: 8px;
  margin: 2px 0;
}

.message-row.outbound-row {
  justify-content: flex-end;
}

.message-selector {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border:
    2px solid #64748b;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  color: transparent;
}

.message-row.selected
.message-selector {
  background: #22c55e;
  border-color: #22c55e;
  color: #052e16;
  font-weight: 900;
}

.message-row.media-selectable {
  cursor: pointer;
}

.message-row.filtered-out {
  opacity: 0.28;
}

.message {
  position: relative;
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  flex: 0 1 auto;
  align-self: flex-start;
  margin: 1px 0;
  padding: 5px 7px 4px;
  border-radius: 8px;
  box-shadow:
    0 1px 1px
    rgba(0, 0, 0, 0.22);
  font-size: 14px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.message.text-message {
  display: inline-grid;
  grid-template-columns:
    minmax(0, auto) auto;
  grid-template-rows: auto;
  align-items: end;
  column-gap: 8px;
  width: auto;
  max-width:
    min(500px, 66%);
}

.message-text {
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message.text-message
.message-meta {
  margin-top: 0;
  white-space: nowrap;
  align-self: end;
  padding-bottom: 1px;
}

.message.inbound {
  background: #1e293b;
  border-top-left-radius: 3px;
}

.message.outbound {
  background: #14532d;
  border-top-right-radius: 3px;
}

.message-meta {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  color: #9ca3af;
  font-size: 10px;
  line-height: 1;
}

.status {
  letter-spacing: -2px;
}

.media-message {
  display: block;
  min-width: min(280px, 62vw);
  max-width: min(440px, 72vw);
}

.media-caption {
  margin-top: 8px;
}

.media-preview-image {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 10px;
  background: #0f172a;
}

.document-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border-radius: 10px;
  background:
    rgba(15, 23, 42, 0.65);
}

.document-icon {
  font-size: 32px;
}

.document-info {
  min-width: 0;
  flex: 1;
}

.document-info strong {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.document-info small {
  display: block;
  color: #94a3b8;
  margin-top: 3px;
}

.media-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.media-action-btn {
  border: 0;
  border-radius: 9px;
  padding: 7px 9px;
  background: rgba(
    255,
    255,
    255,
    0.09
  );
  color: #e5e7eb;
  cursor: pointer;
}

.media-action-btn:hover {
  background: rgba(
    255,
    255,
    255,
    0.16
  );
}

.audio-player {
  width: min(
    340px,
    68vw
  );
  max-width: 100%;
}

.video-player {
  width: 100%;
  max-height: 420px;
  border-radius: 10px;
  background: #000;
}


.scroll-bottom-btn {
  position: absolute;
  right: 16px;
  bottom: 66px;
  z-index: 25;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #2f3b4d;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #202c33;
  color: #d1d7db;
  box-shadow:
    0 2px 8px
    rgba(0, 0, 0, 0.34);
  cursor: pointer;
}

.scroll-bottom-btn:hover {
  background: #2a3942;
}

.scroll-bottom-btn.has-new {
  border-color: #2f3b4d;
  background: #202c33;
}

.scroll-bottom-icon {
  width: 25px;
  height: 25px;
  display: block;
}

.new-message-badge {
  position: absolute;
  top: -6px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #25d366;
  color: #052e16;
  border: 2px solid #111827;
  font-size: 10px;
  font-weight: 800;
}


.composer {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding:
    7px 10px
    max(
      7px,
      env(
        safe-area-inset-bottom
      )
    );
  background: #111827;
  border-top:
    1px solid #243047;
}

.composer textarea {
  width: 100%;
  min-height: 40px;
  max-height: 96px;
  resize: none;
  border: 1px solid #334155;
  border-radius: 20px;
  background: #1e293b;
  color: #f8fafc;
  padding: 9px 13px;
  outline: none;
}

.composer button {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 0;
  border-radius: 50%;
  background: #22c55e;
  color: #052e16;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.composer button:disabled,
.composer textarea:disabled {
  opacity: 0.45;
  cursor: default;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    rgba(2, 6, 23, 0.78);
  backdrop-filter:
    blur(4px);
}

.modal-card {
  width: min(
    1050px,
    100%
  );
  height: min(
    800px,
    92dvh
  );
  display: grid;
  grid-template-rows:
    auto auto auto
    minmax(0, 1fr);
  overflow: hidden;
  border:
    1px solid #334155;
  border-radius: 20px;
  background: #111827;
  box-shadow:
    0 30px 80px
    rgba(0, 0, 0, 0.5);
}

.modal-header {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content:
    space-between;
  padding: 10px 16px;
  border-bottom:
    1px solid #243047;
}

.media-tabs {
  display: flex;
  gap: 7px;
  padding: 10px 14px;
  overflow-x: auto;
  border-bottom:
    1px solid #243047;
}

.media-tab {
  border:
    1px solid #334155;
  border-radius: 999px;
  padding: 8px 12px;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
  white-space: nowrap;
}

.media-tab.active {
  background: #22c55e;
  color: #052e16;
  border-color: #22c55e;
  font-weight: 800;
}

.media-modal-toolbar {
  display: flex;
  align-items: center;
  justify-content:
    space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom:
    1px solid #243047;
}

.media-modal-toolbar > div {
  display: flex;
  gap: 8px;
}

.media-grid {
  overflow-y: auto;
  padding: 14px;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(180px, 1fr)
    );
  gap: 12px;
  align-content: start;
}

.media-grid-empty {
  grid-column: 1 / -1;
  min-height: 280px;
  display: grid;
  place-items: center;
  color: #94a3b8;
}

.media-grid-item {
  min-width: 0;
  position: relative;
  border:
    1px solid #334155;
  border-radius: 14px;
  overflow: hidden;
  background: #0f172a;
  cursor: pointer;
}

.media-grid-item.selected {
  outline:
    3px solid #22c55e;
  outline-offset: -3px;
}

.media-grid-check {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border:
    2px solid white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    rgba(15, 23, 42, 0.75);
  color: transparent;
  font-weight: 900;
}

.media-grid-item.selected
.media-grid-check {
  background: #22c55e;
  color: #052e16;
}

.media-grid-thumb {
  height: 150px;
  display: grid;
  place-items: center;
  background: #111827;
  overflow: hidden;
}

.media-grid-thumb img,
.media-grid-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-grid-thumb
.media-grid-icon {
  font-size: 48px;
}

.media-grid-body {
  padding: 10px;
}

.media-grid-body strong {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.media-grid-body small {
  color: #94a3b8;
  display: block;
  margin-top: 4px;
}

.media-grid-audio {
  width: 100%;
  margin-top: 8px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform:
    translateX(-50%);
  max-width:
    min(92vw, 640px);
  background: #7f1d1d;
  color: #fee2e2;
  border:
    1px solid #b91c1c;
  padding: 11px 14px;
  border-radius: 12px;
  box-shadow:
    0 8px 30px
    rgba(0, 0, 0, 0.4);
  z-index: 150;
}

.mobile-only {
  display: none;
}

@media (
  max-width: 940px
) {
  .header-action span {
    display: none;
  }
}

@media (
  max-width: 760px
) {
  .app {
    display: block;
  }

  .sidebar {
    width: 100%;
    height: 100dvh;
    border-right: 0;
  }

  .chat {
    position: fixed;
    inset: 0;
    z-index: 10;
    transform:
      translateX(100%);
    transition:
      transform 0.2s ease;
  }

  .app.chat-open .chat {
    transform:
      translateX(0);
  }

  .mobile-only {
    display: inline-flex;
  }

  .bot-toggle span {
    display: none;
  }

  .messages {
    padding: 15px 10px;
  }

  .scroll-bottom-btn {
    right: 12px;
    bottom: 78px;
    max-width: calc(100vw - 24px);
    padding: 9px 12px;
  }

  .message {
    max-width: 88%;
  }

  .media-message {
    max-width: 82vw;
  }

  .selection-header {
    padding:
      0 8px;
    gap: 7px;
  }

  .selection-header
  #selectAllBtn {
    font-size: 0;
  }

  .selection-header
  #selectAllBtn::after {
    content: "Todo";
    font-size: 13px;
  }

  .selection-header
  select {
    max-width: 105px;
  }

  .modal {
    padding: 0;
  }

  .modal-card {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    border: 0;
  }

  .media-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
    padding: 8px;
    gap: 8px;
  }

  .media-grid-thumb {
    height: 130px;
  }
}


.message.outbound.sending {
  opacity: 0.72;
}

.message.outbound.failed {
  border: 1px solid #ef4444;
}



@media (max-width: 760px) {
  .retention-menu {
    position: fixed;
    top: 58px;
    right: 8px;
    width: min(260px, calc(100vw - 16px));
  }

  .scroll-bottom-btn {
    right: 10px;
    bottom: 60px;
    width: 42px;
    height: 42px;
    padding: 0;
  }
}


@media (max-width: 760px) {
  .message {
    max-width: 82%;
    font-size: 14px;
  }

  .media-message {
    min-width: min(250px, 72vw);
    max-width: 86vw;
  }
}


/* Información interna del contacto/chat */
.contact-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 90;
  width: min(390px, 100vw);
  height: 100dvh;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr);
  border-left: 1px solid #334155;
  background: #111827;
  box-shadow:
    -12px 0 38px
    rgba(0, 0, 0, 0.34);
}

.contact-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid #243047;
}

.contact-drawer-content {
  overflow-y: auto;
  padding: 18px;
}

.contact-profile-summary {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px 0 22px;
  border-bottom: 1px solid #243047;
}

.large-avatar-wrap {
  width: 68px;
  height: 68px;
  margin-bottom: 10px;
}

.large-avatar-wrap .avatar {
  font-size: 23px;
}

.large-avatar-wrap .retention-clock {
  width: 21px;
  height: 21px;
}

.contact-profile-summary small {
  color: #94a3b8;
  margin-top: 3px;
}

.contact-editor-section {
  padding: 18px 0;
  border-bottom: 1px solid #243047;
}

.contact-editor-section > label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

.contact-editor-section textarea,
.contact-editor-section input {
  width: 100%;
  border: 1px solid #334155;
  border-radius: 11px;
  background: #0f172a;
  color: #f8fafc;
  outline: none;
}

.contact-editor-section textarea {
  min-height: 110px;
  resize: vertical;
  padding: 10px 11px;
}

.contact-editor-section input {
  padding: 9px 10px;
}

.contact-editor-section > small {
  display: block;
  margin-top: 7px;
  color: #94a3b8;
  font-size: 11px;
}

.label-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.label-input-row button {
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 0 12px;
  background: #182235;
  color: #e5e7eb;
  cursor: pointer;
}

.label-input-row button:hover {
  background: #243047;
}

.label-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.label-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  background:
    rgba(37, 211, 102, 0.12);
  color: #d1fae5;
  border: 1px solid
    rgba(37, 211, 102, 0.26);
  font-size: 12px;
}

.label-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.label-chip button {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}

.label-chip button:hover {
  color: #fff;
  background:
    rgba(255, 255, 255, 0.08);
}

.contact-drawer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
}

.profile-save-status {
  color: #94a3b8;
  font-size: 12px;
}

.conv-label-preview {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin-top: 4px;
}

.conv-label-mini {
  max-width: 92px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 2px 5px;
  border-radius: 999px;
  background:
    rgba(37, 211, 102, 0.10);
  color: #a7f3d0;
  font-size: 9px;
}

@media (max-width: 760px) {
  .message.text-message {
    max-width: 86%;
  }

  .contact-drawer {
    width: 100vw;
  }
}


/* ==========================================================
   STICKERS
   ========================================================== */

.message.sticker-message {
  display: block;
  width: auto;
  min-width: 0;
  max-width: 210px;
  padding: 0;
  margin: 4px 0;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  overflow: visible;
}

.message.sticker-message.inbound,
.message.sticker-message.outbound {
  background: transparent !important;
  box-shadow: none !important;
}

.sticker-stage {
  width: fit-content;
  max-width: 190px;
  min-height: 64px;
  display: grid;
  place-items: center;
}

.sticker-preview {
  display: block;
  width: auto;
  height: auto;
  max-width: 180px;
  max-height: 180px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.sticker-message .message-meta {
  width: max-content;
  margin-top: 2px;
  margin-left: auto;
  padding: 2px 5px;
  border-radius: 999px;
  background:
    rgba(11, 18, 32, 0.62);
  color: #cbd5e1;
  backdrop-filter:
    blur(3px);
}

.message-row.outbound-row
.sticker-message .message-meta {
  margin-left: auto;
}

/* En selección, el sticker conserva la apariencia limpia. */
.message-row.selected
.sticker-message {
  outline:
    2px solid
    rgba(37, 211, 102, 0.65);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Galería Multimedia */
.media-grid-thumb
.media-grid-sticker {
  width: auto;
  height: auto;
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
}

.media-grid-item:has(
  .media-grid-sticker
)
.media-grid-thumb {
  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,0.035),
      transparent 65%
    );
}

@media (max-width: 760px) {
  .message.sticker-message {
    max-width: 190px;
  }

  .sticker-stage {
    max-width: 170px;
  }

  .sticker-preview {
    max-width: 165px;
    max-height: 165px;
  }
}


/* ==========================================================
   ÁLBUMES DE FOTOS
   ========================================================== */

.image-group-row {
  display: flex;
  align-items: flex-start;
  margin: 3px 0;
}

.image-group-row.outbound-row {
  justify-content: flex-end;
}

.image-group {
  width: min(430px, 64%);
  overflow: hidden;
  border-radius: 10px;
  background: #1e293b;
  box-shadow:
    0 1px 2px
    rgba(0, 0, 0, 0.25);
}

.image-group.outbound {
  background: #14532d;
}

.image-group-grid {
  display: grid;
  gap: 2px;
  overflow: hidden;
  background: #0b1220;
}

.image-group-grid.count-2 {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

.image-group-grid.count-3,
.image-group-grid.count-4,
.image-group-grid.count-many {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

.image-group-tile {
  position: relative;
  min-width: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #111827;
  cursor: pointer;
}

.image-group-grid.count-3
.image-group-tile:first-child {
  grid-row: span 2;
  aspect-ratio: auto;
}

.image-group-tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.image-group-more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    rgba(0, 0, 0, 0.52);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

.image-group-download {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-top:
    1px solid
    rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 14px;
  background:
    rgba(10, 20, 27, 0.56);
  color: #f8fafc;
  cursor: pointer;
  font-weight: 750;
}

.image-group-download:hover {
  background:
    rgba(10, 20, 27, 0.78);
}

.image-group-download svg {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
}

.image-group-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 5px 7px;
  color: #aebac1;
  font-size: 10px;
}

/* ==========================================================
   NUEVO CHAT
   ========================================================== */

.sidebar-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.new-chat-card {
  width: min(520px, 100%);
  max-height: min(760px, 92dvh);
  display: grid;
  grid-template-rows:
    auto minmax(0, 1fr);
  overflow: hidden;
  border:
    1px solid #334155;
  border-radius: 18px;
  background: #111827;
  box-shadow:
    0 24px 70px
    rgba(0, 0, 0, 0.48);
}

.new-chat-content {
  overflow-y: auto;
  padding: 18px;
}

.field-label {
  display: block;
  margin:
    14px 0 7px;
  color: #e5e7eb;
  font-weight: 700;
  font-size: 13px;
}

.field-label:first-child {
  margin-top: 0;
}

.new-chat-input {
  width: 100%;
  border:
    1px solid #334155;
  border-radius: 11px;
  padding: 10px 11px;
  background: #0f172a;
  color: #f8fafc;
  outline: none;
}

textarea.new-chat-input {
  resize: vertical;
  min-height: 90px;
}

.field-help {
  display: block;
  margin-top: 6px;
  color: #94a3b8;
  font-size: 11px;
}

.new-chat-notice {
  margin-top: 14px;
  padding: 10px 11px;
  border:
    1px solid
    rgba(37, 211, 102, 0.24);
  border-radius: 10px;
  background:
    rgba(37, 211, 102, 0.08);
  color: #d1fae5;
  font-size: 12px;
}

.new-chat-notice.warning {
  border-color:
    rgba(245, 158, 11, 0.28);
  background:
    rgba(245, 158, 11, 0.08);
  color: #fde68a;
}

.new-chat-error {
  min-height: 20px;
  margin-top: 12px;
  color: #fca5a5;
  font-size: 12px;
}

.new-chat-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 12px;
}

@media (max-width: 760px) {
  .image-group {
    width: min(360px, 88%);
  }

  .new-chat-card {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
}


/* ==========================================================
   VISOR INTERNO DE IMÁGENES
   ========================================================== */

.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: 62px minmax(0, 1fr);
  background: rgba(3, 8, 15, 0.96);
  backdrop-filter: blur(4px);
}

.image-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border-bottom:
    1px solid rgba(255, 255, 255, 0.08);
  background: rgba(12, 20, 30, 0.92);
}

.image-viewer-title {
  min-width: 0;
}

.image-viewer-title strong {
  display: block;
  max-width: min(60vw, 520px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.image-viewer-title small {
  display: block;
  color: #94a3b8;
  margin-top: 2px;
}

.image-viewer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.image-viewer-icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: #e5e7eb;
  cursor: pointer;
  font-size: 20px;
}

.image-viewer-icon-btn:hover {
  background: rgba(255, 255, 255, 0.09);
}

.image-viewer-icon-btn svg {
  width: 22px;
  height: 22px;
}

.image-viewer-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 22px 82px 28px;
}

.image-viewer-image-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: default;
  touch-action: none;
}

.image-viewer-image-wrap.zoomed {
  cursor: grab;
}

.image-viewer-image-wrap.dragging {
  cursor: grabbing;
}

.image-viewer-img {
  display: block;
  width: auto;
  height: auto;

  /* Abre SIEMPRE completa y con margen, no ampliada. */
  max-width:
    min(
      calc(100vw - 190px),
      92vw
    );
  max-height:
    calc(100dvh - 125px);

  object-fit: contain;
  transform-origin: center center;
  transform:
    translate(
      var(--viewer-pan-x, 0px),
      var(--viewer-pan-y, 0px)
    )
    scale(
      var(--viewer-zoom, 1)
    );
  transition:
    transform 120ms ease;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.image-viewer-image-wrap.dragging
.image-viewer-img {
  transition: none;
}


.image-viewer-zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background:
    rgba(255, 255, 255, 0.055);
}

.image-viewer-zoom-controls
.image-viewer-icon-btn {
  width: 34px;
  height: 34px;
  font-size: 22px;
}

.image-viewer-zoom-value {
  min-width: 58px;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.image-viewer-zoom-value:hover {
  background:
    rgba(255, 255, 255, 0.08);
}

.image-viewer-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 46px;
  height: 46px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(32, 44, 51, 0.88);
  color: #f8fafc;
  cursor: pointer;
  font-size: 34px;
  line-height: 1;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.34);
}

.image-viewer-nav:hover {
  background: rgba(42, 57, 66, 0.98);
}

.image-viewer-prev {
  left: 14px;
}

.image-viewer-next {
  right: 14px;
}

.media-preview-image,
.image-group-tile {
  cursor: zoom-in;
}

@media (max-width: 760px) {
  .image-viewer-stage {
    padding: 12px 8px 66px;
  }

  .image-viewer-img {
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 150px);
  }

  .image-viewer-zoom-controls {
    position: absolute;
    left: 50%;
    bottom: 12px;
    z-index: 5;
    transform: translateX(-50%);
    background: rgba(32, 44, 51, 0.92);
  }

  .image-viewer-nav {
    width: 40px;
    height: 40px;
    top: auto;
    bottom: 18px;
    transform: none;
    font-size: 30px;
  }

  .image-viewer-prev {
    left: 16px;
  }

  .image-viewer-next {
    right: 16px;
  }
}


/* ==========================================================
   ADJUNTOS SALIENTES
   ========================================================== */

.composer-shell {
  position: relative;
  min-width: 0;
  background: #111827;
  border-top: 1px solid #243047;
}

.composer-shell .composer {
  border-top: 0;
}

.attach-wrap {
  position: relative;
  flex: 0 0 auto;
}

.attach-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
  font-size: 21px;
}

.attach-btn:hover {
  background: #1e293b;
}

.attach-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.attach-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 55;
  width: 210px;
  padding: 7px;
  border: 1px solid #334155;
  border-radius: 14px;
  background: #111b2b;
  box-shadow:
    0 14px 36px
    rgba(0, 0, 0, 0.42);
}

.attach-menu button {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  background: transparent;
  color: #e5e7eb;
  cursor: pointer;
  text-align: left;
}

.attach-menu button:hover {
  background: #1e293b;
}

.attach-menu button span:first-child {
  width: 25px;
  text-align: center;
  font-size: 20px;
}

.attachment-tray {
  max-height: 190px;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 9px 10px 4px;
  scrollbar-width: thin;
  scrollbar-color:
    rgba(255,255,255,.18)
    transparent;
}

.attachment-card {
  position: relative;
  width: 150px;
  min-width: 150px;
  height: 132px;
  overflow: hidden;
  border: 1px solid #334155;
  border-radius: 11px;
  background: #0f172a;
}

.attachment-card-preview {
  height: 82px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #111827;
}

.attachment-card-preview img,
.attachment-card-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attachment-card-icon {
  font-size: 34px;
}

.attachment-card-info {
  min-width: 0;
  padding: 7px 8px;
}

.attachment-card-info strong {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
}

.attachment-card-info small {
  display: block;
  margin-top: 2px;
  color: #94a3b8;
  font-size: 9px;
}

.attachment-remove {
  position: absolute;
  z-index: 4;
  top: 5px;
  right: 5px;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.88);
  color: #fff;
  cursor: pointer;
  font-size: 17px;
}

.attachment-uploading {
  pointer-events: none;
  opacity: 0.68;
}

.attachment-upload-banner {
  min-width: 150px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  color: #cbd5e1;
  font-size: 12px;
  text-align: center;
}

.drop-overlay {
  position: absolute;
  inset: 66px 0 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    rgba(11, 18, 32, 0.88);
  backdrop-filter: blur(3px);
  pointer-events: none;
}

.drop-overlay > div {
  min-width: min(360px, 90%);
  padding: 28px;
  border:
    2px dashed #64748b;
  border-radius: 18px;
  text-align: center;
  color: #e5e7eb;
}

.drop-overlay strong {
  display: block;
  font-size: 17px;
}

.drop-overlay small {
  display: block;
  margin-top: 6px;
  color: #94a3b8;
}

@media (max-width: 760px) {
  .attach-menu {
    position: fixed;
    left: 8px;
    bottom: 58px;
    width: min(230px, calc(100vw - 16px));
  }

  .attachment-card {
    width: 132px;
    min-width: 132px;
  }

  .drop-overlay {
    inset: 66px 0 0;
  }
}


/* ==========================================================
   PERFIL PÚBLICO DEL NEGOCIO
   ========================================================== */

.business-profile-card {
  width: min(760px, calc(100vw - 28px));
  max-height: min(900px, 94dvh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #334155;
  border-radius: 18px;
  background: #111827;
  box-shadow:
    0 24px 70px
    rgba(0, 0, 0, 0.48);
}

.business-profile-content {
  overflow-y: auto;
  padding: 16px 18px 18px;
}

.business-profile-state {
  min-height: 18px;
  margin-bottom: 7px;
  color: #94a3b8;
  font-size: 12px;
}

.business-profile-section {
  padding: 15px;
  margin-top: 12px;
  border: 1px solid #263449;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.62);
}

.business-profile-section:first-of-type {
  margin-top: 0;
}

.business-profile-section-title,
.schedule-heading,
.preview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.business-profile-section-title > div,
.schedule-heading > div,
.preview-heading > div {
  min-width: 0;
}

.business-profile-section-title strong,
.schedule-heading strong,
.preview-heading strong {
  display: block;
}

.business-profile-section-title small,
.schedule-heading small,
.preview-heading small {
  display: block;
  margin-top: 3px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 400;
}

.field-counter {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 5px;
  color: #94a3b8;
  font-size: 10px;
}

.field-counter b {
  flex: 0 0 auto;
  color: #aebac1;
}

.business-readonly-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 15px;
  padding: 10px 11px;
  border-radius: 10px;
  background: #0b1220;
  color: #94a3b8;
  font-size: 12px;
}

.business-readonly-row strong {
  color: #e5e7eb;
}

.schedule-public-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #0b1220;
  color: #d1fae5;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.schedule-public-toggle input {
  accent-color: #25d366;
}

.business-schedule-rows {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.business-schedule-row {
  display: grid;
  grid-template-columns:
    minmax(95px, 1fr)
    82px
    104px
    16px
    104px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 9px;
  border-radius: 10px;
  background: #0b1220;
}

.business-schedule-day {
  color: #e5e7eb;
  font-size: 12px;
  font-weight: 700;
}

.business-schedule-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #cbd5e1;
  font-size: 11px;
}

.business-schedule-open input {
  accent-color: #25d366;
}

.business-schedule-row input[type="time"] {
  width: 100%;
  min-width: 0;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 7px 5px;
  background: #111827;
  color: #f8fafc;
}

.business-schedule-row input[type="time"]:disabled {
  opacity: 0.34;
}

.business-schedule-dash {
  color: #64748b;
  text-align: center;
}

.description-count {
  flex: 0 0 auto;
  color: #94a3b8;
  font-size: 11px;
}

.description-count.too-long {
  color: #fca5a5;
}

.business-description-preview {
  min-height: 105px;
  max-height: 240px;
  overflow: auto;
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid #334155;
  border-radius: 11px;
  background: #07101b;
  color: #e5e7eb;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.45;
}

.business-profile-actions {
  position: sticky;
  bottom: -18px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin: 15px -18px -18px;
  padding: 12px 18px;
  border-top: 1px solid #263449;
  background:
    rgba(17, 24, 39, 0.97);
  backdrop-filter: blur(8px);
}

.business-profile-actions
.profile-save-status {
  margin-right: auto;
}

@media (max-width: 760px) {
  .business-profile-card {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .business-profile-content {
    padding: 12px;
  }

  .business-profile-section {
    padding: 12px;
  }

  .business-profile-section-title,
  .schedule-heading,
  .preview-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .business-schedule-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
  }

  .business-schedule-day {
    font-size: 15px;
  }

  .business-schedule-open {
    justify-self: start;
    min-height: 34px;
  }

  .business-schedule-row
  input[type="time"] {
    grid-column: 1;
    width: 100%;
    min-height: 46px;
    font-size: 17px;
    padding: 10px 12px;
  }

  .business-schedule-dash {
    display: none;
  }

  .business-profile-actions {
    bottom: -12px;
    margin:
      14px -12px -12px;
    padding:
      10px 12px;
    flex-wrap: wrap;
  }

  .business-profile-actions
  .profile-save-status {
    width: 100%;
  }
}


/* ==========================================================
   EMOJIS Y REACCIONES
   ========================================================== */

.emoji-wrap {
  position: relative;
  flex: 0 0 auto;
}

.emoji-btn {
  font-family:
    "Segoe UI Emoji",
    "Noto Color Emoji",
    "Apple Color Emoji",
    sans-serif !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center;
  background: transparent !important;
  color: #cbd5e1 !important;
  font-size: 23px !important;
  font-weight: 400 !important;
}

.emoji-btn:hover {
  background: #1e293b !important;
}

.emoji-picker {
  position: fixed;
  z-index: 320;
  left: 12px;
  top: 12px;
  width: min(390px, calc(100vw - 24px));
  max-height: min(360px, calc(100dvh - 24px));
  overflow: hidden;
  border: 1px solid #334155;
  border-radius: 15px;
  background: #111b2b;
  box-shadow:
    0 18px 42px
    rgba(0, 0, 0, 0.58);
}

.emoji-picker-header {
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px 0 13px;
  border-bottom: 1px solid #263449;
  color: #e5e7eb;
  font-size: 12px;
}

.emoji-picker-close {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  border: 0 !important;
  background: transparent !important;
  color: #94a3b8 !important;
  font-size: 20px !important;
}

.emoji-picker-close:hover {
  background: #1e293b !important;
}

.emoji-grid {
  max-height: 280px;
  overflow-y: auto;
  padding: 9px;
  display: grid;
  grid-template-columns:
    repeat(8, minmax(0, 1fr));
  gap: 3px;
  scrollbar-width: thin;
}

.emoji-grid button {
  font-family:
    "Segoe UI Emoji",
    "Noto Color Emoji",
    "Apple Color Emoji",
    sans-serif !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 0;
  border: 0 !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center;
  background: transparent !important;
  color: inherit !important;
  font-size: 24px !important;
  font-weight: 400 !important;
}

.emoji-grid button:hover {
  background:
    rgba(255,255,255,.08)
    !important;
}

.message-row.has-reactions {
  margin-bottom: 12px;
}

/*
 * v0.7.4:
 * las reacciones son overlays de la propia burbuja.
 * No crean un wrapper y no intervienen en el ancho del texto.
 */
.message-reactions {
  position: absolute;
  z-index: 7;
  left: 8px;
  bottom: -13px;
  min-height: 22px;
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 0;
  pointer-events: auto;
}

.message.outbound
.message-reactions {
  left: auto;
  right: 8px;
}

.message-reaction-chip {
  font-family:
    "Segoe UI Emoji",
    "Noto Color Emoji",
    "Apple Color Emoji",
    sans-serif;
  min-width: 27px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid #334155;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #111827;
  color: #f8fafc;
  box-shadow:
    0 1px 2px
    rgba(0,0,0,.32);
  font-size: 14px;
  line-height: 1;
}

.message-reaction-chip.mine {
  border-color:
    rgba(37, 211, 102, .55);
  background:
    rgba(20, 83, 45, .96);
  cursor: pointer;
}

.message-reaction-chip.theirs {
  cursor: default;
}

.reaction-trigger {
  position: absolute;
  z-index: 8;
  top: 3px;
  right: -34px;
  width: 29px;
  height: 29px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    rgba(30, 41, 59, .96);
  color: #cbd5e1;
  opacity: 0;
  transform: scale(.92);
  cursor: pointer;
  font-family:
    "Segoe UI Emoji",
    "Noto Color Emoji",
    "Apple Color Emoji",
    sans-serif;
  font-size: 16px;
  transition:
    opacity 100ms ease,
    transform 100ms ease,
    background 100ms ease;
}

.message-row:hover
.reaction-trigger,
.reaction-trigger:focus-visible {
  opacity: 1;
  transform: scale(1);
}

.reaction-trigger:hover {
  background: #334155;
}

.reaction-picker {
  position: fixed;
  z-index: 250;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border: 1px solid #334155;
  border-radius: 999px;
  background: #111b2b;
  box-shadow:
    0 14px 38px
    rgba(0,0,0,.52);
}

.reaction-picker button {
  font-family:
    "Segoe UI Emoji",
    "Noto Color Emoji",
    "Apple Color Emoji",
    sans-serif;
  width: 37px;
  height: 37px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: #f8fafc;
  cursor: pointer;
  font-size: 21px;
  transition:
    transform 100ms ease,
    background 100ms ease;
}

.reaction-picker button:hover {
  transform: scale(1.15);
  background:
    rgba(255,255,255,.08);
}

.reaction-picker
.reaction-more-btn {
  border: 1px solid #475569;
  color: #cbd5e1;
  font-family:
    system-ui,
    sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.reaction-picker
.reaction-more-btn:hover {
  border-color: #64748b;
  background:
    rgba(255,255,255,.10);
}

.reaction-picker
.remove-reaction-btn {
  margin-left: 2px;
  border-left: 1px solid #334155;
  color: #94a3b8;
  font-size: 22px;
}

@media (max-width: 760px) {
  .emoji-picker {
    left: 8px;
    right: auto;
    top: auto;
    bottom: 64px;
    width: calc(100vw - 16px);
    max-height: min(330px, calc(100dvh - 80px));
  }

  .emoji-grid {
    grid-template-columns:
      repeat(7, minmax(0, 1fr));
  }

  .reaction-trigger {
    opacity: .72;
    right: -31px;
  }

  .reaction-picker {
    max-width:
      calc(100vw - 12px);
  }

  .reaction-picker button {
    width: 34px;
    height: 34px;
    font-size: 19px;
  }
}


/* ==========================================================
   v0.8.0 — RESPUESTAS, MENÚS CONTEXTUALES Y BLOQUEADOS
   ========================================================== */

.blocked-contact-marker {
  margin-left: 5px;
  font-size: 12px;
  vertical-align: 1px;
}

.conversation.blocked {
  opacity: .86;
}

.reply-composer-bar {
  position: relative;
  min-height: 56px;
  margin: 6px 10px 0;
  border-radius: 9px;
  display: grid;
  grid-template-columns:
    4px minmax(0, 1fr) 36px;
  overflow: hidden;
  background: #1b2738;
  border: 1px solid #2d3a50;
}

.reply-composer-accent {
  background: #25d366;
}

.reply-composer-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 8px 10px;
}

.reply-composer-body strong {
  color: #5ee28d;
  font-size: 12px;
}

.reply-composer-body span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #cbd5e1;
  font-size: 12px;
}

.reply-cancel-btn {
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 23px;
  cursor: pointer;
}

.reply-cancel-btn:hover {
  background:
    rgba(255,255,255,.05);
  color: #e2e8f0;
}

.message-reply-quote {
  min-width: 0;
  margin:
    -2px -2px 6px;
  padding: 6px 8px;
  border-left:
    3px solid #25d366;
  border-radius: 5px;
  background:
    rgba(2, 6, 23, .23);
  cursor: pointer;
}

.message-reply-quote strong {
  display: block;
  margin-bottom: 2px;
  color: #6ee7a0;
  font-size: 11px;
}

.message-reply-quote span {
  display: block;
  max-width: 360px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #cbd5e1;
  font-size: 11px;
}

.message-row.reply-highlight
.message {
  outline:
    2px solid
    rgba(37, 211, 102, .7);
  outline-offset: 3px;
}

.wa-context-menu {
  position: fixed;
  z-index: 500;
  width: 210px;
  padding: 6px;
  border:
    1px solid #334155;
  border-radius: 10px;
  background: #172033;
  box-shadow:
    0 18px 45px
    rgba(0,0,0,.52);
}

.wa-context-menu button {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  display: grid;
  grid-template-columns:
    25px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  text-align: left;
  background: transparent;
  color: #e5e7eb;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}

.wa-context-menu button:hover {
  background: #233047;
}

.wa-context-menu button:disabled {
  opacity: .4;
  cursor: default;
}

.wa-context-menu
.danger-menu-item {
  color: #fca5a5;
}

.wa-context-separator {
  height: 1px;
  margin: 5px 4px;
  background: #334155;
}

.blocked-modal-card {
  width:
    min(520px, 100%);
  max-height:
    min(680px, 90dvh);
  display: grid;
  grid-template-rows:
    auto auto minmax(0, 1fr);
  overflow: hidden;
  border:
    1px solid #334155;
  border-radius: 18px;
  background: #111827;
  box-shadow:
    0 28px 75px
    rgba(0,0,0,.52);
}

.blocked-status {
  min-height: 20px;
  padding: 9px 14px;
  color: #94a3b8;
  font-size: 12px;
  border-bottom:
    1px solid #243047;
}

.blocked-contacts-list {
  min-height: 170px;
  max-height: 520px;
  overflow-y: auto;
  padding: 8px;
}

.blocked-contact-row {
  min-height: 58px;
  display: grid;
  grid-template-columns:
    40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
}

.blocked-contact-row:hover {
  background: #182235;
}

.blocked-contact-row
.blocked-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #2b3549;
  font-weight: 800;
}

.blocked-contact-main {
  min-width: 0;
}

.blocked-contact-main strong,
.blocked-contact-main small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.blocked-contact-main small {
  margin-top: 3px;
  color: #94a3b8;
}

.unblock-contact-btn {
  border:
    1px solid #475569;
  border-radius: 9px;
  padding: 7px 9px;
  background: #182235;
  color: #e5e7eb;
  cursor: pointer;
}

.unblock-contact-btn:hover {
  background: #26344b;
}

.blocked-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #94a3b8;
  padding: 18px;
}

.confirm-action-card {
  width:
    min(420px, 100%);
  padding: 20px;
  border:
    1px solid #334155;
  border-radius: 16px;
  background: #111827;
  box-shadow:
    0 28px 75px
    rgba(0,0,0,.55);
}

.confirm-action-card h3 {
  margin: 0 0 9px;
}

.confirm-action-card p {
  margin: 0;
  color: #aeb9ca;
  line-height: 1.45;
}

.confirm-action-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.danger-action {
  border:
    1px solid #ef4444;
  border-radius: 10px;
  padding: 8px 12px;
  background: #dc2626;
  color: white;
  cursor: pointer;
  font-weight: 700;
}

.danger-action:hover {
  background: #ef4444;
}

@media (max-width: 760px) {
  .wa-context-menu {
    width: 200px;
  }

  .reply-composer-bar {
    margin-left: 6px;
    margin-right: 6px;
  }
}



/* ==========================================================
   v0.8.1 — ESTILO DE CONVERSACIÓN TIPO WHATSAPP
   ========================================================== */

.wa-formatted-text strong {
  font-weight: 700;
}

.wa-formatted-text em {
  font-style: italic;
}

.wa-formatted-text del {
  text-decoration-thickness: 1px;
  opacity: .88;
}

.wa-format-monospace {
  display: inline;
  padding: 1px 3px;
  border-radius: 3px;
  background:
    rgba(0, 0, 0, .16);
  font-family:
    Consolas,
    "Courier New",
    monospace;
  font-size: .95em;
  white-space: pre-wrap;
}

/* Respuesta citada más parecida a WhatsApp. */
.message-reply-quote {
  position: relative;
  min-width: 150px;
  max-width: 100%;
  min-height: 42px;
  margin: 0 0 5px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  display: grid;
  grid-template-columns:
    4px minmax(0, 1fr) auto;
  overflow: hidden;
  background:
    rgba(0, 0, 0, .16);
  cursor: pointer;
}

.message.inbound
.message-reply-quote {
  background:
    rgba(255, 255, 255, .055);
}

.message.outbound
.message-reply-quote {
  background:
    rgba(0, 0, 0, .15);
}

.message-reply-bar {
  width: 4px;
  height: 100%;
  background: #53bdeb;
}

.message-reply-quote.quoted-outbound
.message-reply-bar {
  background: #06cf9c;
}

.message-reply-content {
  min-width: 0;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.message-reply-content strong {
  display: block;
  margin: 0;
  color: #53bdeb;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
}

.message-reply-quote.quoted-outbound
.message-reply-content strong {
  color: #06cf9c;
}

.message-reply-content span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(241, 245, 249, .86);
  font-size: 11.5px;
  line-height: 1.25;
}

.message-reply-media-icon {
  width: 38px;
  min-width: 38px;
  display: grid;
  place-items: center;
  background:
    rgba(0, 0, 0, .10);
  font-family:
    "Segoe UI Emoji",
    "Noto Color Emoji",
    sans-serif;
  font-size: 17px;
}

/*
 * Reacciones tipo WhatsApp.
 * La fila reserva espacio debajo de la burbuja.
 * Por eso la reacción NO puede invadir hora/palomitas.
 */
.message-row.has-reactions {
  margin-bottom: 15px !important;
}

.message-reactions {
  position: absolute !important;
  z-index: 9;
  left: 8px !important;
  right: auto !important;
  bottom: -15px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  pointer-events: none;
}

.message.outbound
.message-reactions {
  left: auto !important;
  right: 8px !important;
}

.message-reactions-pill {
  min-width: 30px;
  height: 24px;
  padding: 1px 7px;
  border:
    2px solid #0b1220;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: #202c3b;
  color: #f8fafc;
  box-shadow:
    0 1px 2px
    rgba(0, 0, 0, .34);
  font-family:
    "Segoe UI Emoji",
    "Noto Color Emoji",
    "Apple Color Emoji",
    sans-serif;
  line-height: 1;
  pointer-events: auto;
}

.message.outbound
.message-reactions-pill {
  background: #1f3c38;
}

.message-reactions-pill.mine {
  cursor: pointer;
}

.message-reactions-pill:disabled {
  opacity: 1;
  cursor: default;
}

.message-reactions-pill:hover:not(:disabled) {
  filter: brightness(1.08);
}

.reaction-emojis {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 14px;
  line-height: 1;
}

.reaction-emojis span + span {
  margin-left: -2px;
}

.reaction-count {
  color: #cbd5e1;
  font-family:
    system-ui,
    sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.message-meta {
  position: relative;
  z-index: 2;
}

/* Los captions usan el mismo formato tipográfico. */
.media-caption.wa-formatted-text {
  white-space: normal;
}

@media (max-width: 760px) {
  .message-row.has-reactions {
    margin-bottom: 15px !important;
  }

  .message-reactions {
    bottom: -15px !important;
  }
}



/* ==========================================================
   v0.8.2 — CORRECCIÓN REAL DE RESPUESTAS Y REACCIONES
   ========================================================== */

/*
 * La burbuja normal sigue siendo:
 *
 *   texto | hora
 *
 * Cuando hay respuesta:
 *
 *   cita cita
 *   texto hora
 *
 * Esto evita que el texto de respuesta aparezca a la derecha
 * del recuadro citado.
 */
.message.text-message.has-reply {
  grid-template-columns:
    minmax(0, 1fr) auto !important;
  grid-template-rows:
    auto auto !important;
  row-gap: 3px;
  column-gap: 8px;
  align-items: end;
}

/* La cita ocupa TODO el ancho superior. */
.message.text-message.has-reply
.message-reply-quote {
  grid-column:
    1 / -1 !important;
  grid-row:
    1 !important;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin:
    -1px 0 2px !important;
  box-sizing: border-box;
  align-self: stretch;
}

/* El mensaje contestado va debajo, a la izquierda. */
.message.text-message.has-reply
.message-text {
  grid-column:
    1 !important;
  grid-row:
    2 !important;
  align-self: end;
}

/* La hora/palomitas van debajo, a la derecha. */
.message.text-message.has-reply
.message-meta {
  grid-column:
    2 !important;
  grid-row:
    2 !important;
  align-self: end;
  margin-top: 0 !important;
  padding-bottom: 1px;
}

/*
 * Ajuste fino del recuadro citado para acercarlo a WhatsApp.
 */
.message-reply-quote {
  min-height: 39px !important;
  border-radius: 6px !important;
}

.message-reply-content {
  padding:
    5px 7px !important;
  gap: 1px !important;
}

.message-reply-content strong {
  font-size:
    11px !important;
}

.message-reply-content span {
  font-size:
    11px !important;
}

/*
 * REACCIONES:
 * En WhatsApp la reacción aparece como una cápsula pequeña
 * montada parcialmente sobre el borde inferior de la burbuja.
 *
 * La ponemos SIEMPRE en la zona inferior izquierda.
 * La hora está a la derecha, por lo que nunca pueden chocar.
 */
.message-row.has-reactions {
  margin-bottom:
    13px !important;
}

.message-reactions,
.message.outbound
.message-reactions,
.message.inbound
.message-reactions {
  position:
    absolute !important;
  z-index:
    10 !important;

  left:
    8px !important;
  right:
    auto !important;

  bottom:
    -12px !important;

  min-height:
    0 !important;

  margin:
    0 !important;
  padding:
    0 !important;

  display:
    block !important;

  pointer-events:
    none;
}

/* Cápsula más pequeña, como WhatsApp. */
.message-reactions-pill {
  min-width:
    27px !important;
  height:
    21px !important;

  padding:
    0 6px !important;

  border:
    2px solid #0b1220 !important;

  border-radius:
    999px !important;

  gap:
    2px !important;

  background:
    #202c3b !important;

  box-shadow:
    0 1px 2px
    rgba(0, 0, 0, .38) !important;

  pointer-events:
    auto;
}

.message.outbound
.message-reactions-pill {
  background:
    #1d3533 !important;
}

.reaction-emojis {
  font-size:
    13px !important;
}

.reaction-count {
  font-size:
    9px !important;
}

/*
 * La hora siempre queda por encima del fondo de la burbuja,
 * pero la reacción está en la esquina contraria.
 */
.message-meta {
  position:
    relative;
  z-index:
    3;
}

@media (max-width: 760px) {
  .message-row.has-reactions {
    margin-bottom:
      13px !important;
  }

  .message-reactions,
  .message.outbound
  .message-reactions,
  .message.inbound
  .message-reactions {
    left:
      7px !important;
    right:
      auto !important;
    bottom:
      -12px !important;
  }
}



/* ==========================================================
   v0.8.3 — AJUSTE FINO DE REACCIONES
   ========================================================== */

/*
 * v0.8.2: bottom -12px
 * v0.8.3: bottom -16px
 *
 * Quedan sólo ~5px montados sobre una cápsula de 21px,
 * visualmente más cerca del comportamiento de WhatsApp.
 */
.message-row.has-reactions {
  margin-bottom:
    17px !important;
}

.message-reactions,
.message.outbound
.message-reactions,
.message.inbound
.message-reactions {
  bottom:
    -16px !important;
}

@media (max-width: 760px) {
  .message-row.has-reactions {
    margin-bottom:
      17px !important;
  }

  .message-reactions,
  .message.outbound
  .message-reactions,
  .message.inbound
  .message-reactions {
    bottom:
      -16px !important;
  }
}



/* ==========================================================
   v0.8.4 — ICONOS DE ARCHIVO + ENTREGA NO CONFIRMADA
   ========================================================== */

.document-card {
  grid-template-columns:
    auto minmax(0, 1fr);
}

.file-type-icon {
  width: 42px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 6px;
  display: grid;
  grid-template-rows:
    minmax(0, 1fr) 15px;
  overflow: hidden;
  background: #334155;
  box-shadow:
    inset 0 0 0 1px
    rgba(255, 255, 255, .08);
  font-family:
    system-ui,
    sans-serif;
  user-select: none;
}

.file-type-badge {
  display: grid;
  place-items: center;
  padding-top: 2px;
  color: white;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.file-type-icon small {
  display: grid;
  place-items: center;
  padding: 0 2px;
  background:
    rgba(0, 0, 0, .22);
  color:
    rgba(255,255,255,.92);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .15px;
  line-height: 1;
}

/* Word */
.file-type-word {
  background: #2563a9;
}

/* Excel */
.file-type-excel {
  background: #107c41;
}

/* PowerPoint */
.file-type-powerpoint {
  background: #c43e1c;
}

/* PDF */
.file-type-pdf {
  background: #c62828;
}

.file-type-pdf
.file-type-badge {
  font-size: 12px;
  letter-spacing: -.3px;
}

/* Comprimidos */
.file-type-archive {
  background: #9a6700;
}

.file-type-archive
.file-type-badge {
  font-size: 11px;
}

/* Texto / datos */
.file-type-text {
  background: #5b6474;
}

.file-type-text
.file-type-badge {
  font-size: 11px;
}

.file-type-data {
  background: #6d4c9a;
}

.file-type-data
.file-type-badge {
  font-size: 12px;
}

.file-type-generic {
  background: #64748b;
}

.file-type-generic
.file-type-badge {
  font-size: 9px;
}

.media-grid-file-type {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.file-type-icon.compact {
  width: 62px;
  height: 72px;
  border-radius: 9px;
  grid-template-rows:
    minmax(0, 1fr) 20px;
}

.file-type-icon.compact
.file-type-badge {
  font-size: 26px;
}

.file-type-icon.compact
small {
  font-size: 10px;
}

.file-type-pdf.compact
.file-type-badge,
.file-type-archive.compact
.file-type-badge,
.file-type-text.compact
.file-type-badge,
.file-type-generic.compact
.file-type-badge {
  font-size: 16px;
}

/* Entrega no confirmada */
.delivery-warning {
  width: 0;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  font-family:
    "Segoe UI Emoji",
    sans-serif;
  font-size: 11px;
  line-height: 1;
  cursor: help;
  transition:
    opacity 120ms ease,
    width 120ms ease,
    margin-left 120ms ease;
}

.delivery-warning.visible {
  width: 14px;
  max-width: 14px;
  opacity: 1;
  margin-left: 2px;
}

.delivery-warning.pending {
  color: #fbbf24;
}

.delivery-warning.failed {
  color: #f87171;
}

.message-meta
.delivery-warning.visible {
  transform:
    translateY(-.5px);
}



/* ==========================================================
   v0.8.5 — FILTROS DE CHATS + SCROLL DE BANDEJA
   ========================================================== */

/*
 * La barra superior, búsqueda y filtros quedan fijos.
 * Únicamente la lista de conversaciones hace scroll.
 */
.sidebar {
  height: 100dvh;
  display: grid;
  grid-template-rows:
    auto auto auto minmax(0, 1fr);
  overflow: hidden;
}

.search-wrap {
  min-height: 0;
}

.conversation-filter-shell {
  position: relative;
  z-index: 14;
  min-width: 0;
  padding:
    0 10px 9px;
  border-bottom:
    1px solid
    rgba(36, 48, 71, .72);
  background: #111827;
}

.conversation-filters {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x:
    contain;
  scrollbar-width: none;
}

.conversation-filters::-webkit-scrollbar {
  display: none;
}

.conversation-filter {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 13px;
  border:
    1px solid #334155;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #151e2d;
  color: #cbd5e1;
  cursor: pointer;
  font-family:
    inherit;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}

.conversation-filter:hover {
  background: #1e293b;
  border-color: #475569;
}

.conversation-filter.active {
  border-color:
    rgba(37, 211, 102, .36);
  background:
    rgba(37, 211, 102, .13);
  color: #8df0b2;
}

.conversation-filter-more-wrap {
  position: relative;
  flex: 0 0 auto;
}

.conversation-filter-more {
  width: 36px;
  padding: 0;
  font-size: 17px;
  font-weight: 800;
}

.conversation-filter-more
span {
  transform:
    translateY(-2px);
}

.conversation-filter-menu {
  position: fixed;
  z-index: 520;
  width: 190px;
  padding: 6px;
  border:
    1px solid #334155;
  border-radius: 10px;
  background: #172033;
  box-shadow:
    0 18px 45px
    rgba(0,0,0,.52);
}

/*
 * El menú se coloca visualmente debajo del botón mediante CSS
 * en escritorio; el ancho de sidebar es estable.
 */
@media (min-width: 761px) {
  .conversation-filter-menu {
    left: 159px;
    top: 144px;
  }
}

.conversation-filter-menu button {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  display: grid;
  grid-template-columns:
    25px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  text-align: left;
  background: transparent;
  color: #e5e7eb;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.conversation-filter-menu
button:hover {
  background: #233047;
}

.conversation-filter-menu
button.active {
  background:
    rgba(37, 211, 102, .12);
  color: #86efac;
}

/*
 * Scroll de conversaciones.
 * Ya no depende de un calc fijo: ocupa automáticamente todo
 * el espacio restante de la pantalla.
 */
.conversation-list {
  height: auto !important;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior:
    contain;
  scrollbar-gutter:
    stable;
  scrollbar-width:
    thin;
  scrollbar-color:
    #42516a transparent;
}

/* Chromium / Electron */
.conversation-list::-webkit-scrollbar {
  width: 7px;
}

.conversation-list::-webkit-scrollbar-track {
  background: transparent;
}

.conversation-list::-webkit-scrollbar-thumb {
  border:
    2px solid transparent;
  border-radius: 999px;
  background:
    #42516a;
  background-clip:
    padding-box;
}

.conversation-list::-webkit-scrollbar-thumb:hover {
  background:
    #5a6b86;
  background-clip:
    padding-box;
}

.conversation-filter-empty {
  min-height: 220px;
  padding: 28px 24px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 9px;
  text-align: center;
  color: #94a3b8;
}

.conversation-filter-empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1d293b;
  color: #cbd5e1;
  font-family:
    "Segoe UI Emoji",
    system-ui,
    sans-serif;
  font-size: 20px;
}

.conversation-filter-empty p {
  margin: 0;
  max-width: 240px;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .sidebar {
    height: 100dvh;
    display: grid;
    grid-template-rows:
      auto auto auto minmax(0, 1fr);
    overflow: hidden;
  }

  .conversation-filter-shell {
    padding-left: 8px;
    padding-right: 8px;
  }

  .conversation-filter {
    height: 33px;
    padding:
      0 12px;
  }

  .conversation-filter-menu {
    position: fixed;
    left: auto;
    right: 8px;
    top: 145px;
  }

  .conversation-list {
    min-height: 0;
    overscroll-behavior-y:
      contain;
  }
}



/* ==========================================================
   v0.8.6 — SEGURIDAD DE ARCHIVOS
   ========================================================== */

.media-security {
  margin: 6px 0 0;
  padding: 7px 8px;
  border:
    1px solid #334155;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background:
    rgba(15, 23, 42, .58);
}

.media-security-main {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.media-security-icon {
  flex: 0 0 auto;
  font-family:
    "Segoe UI Emoji",
    sans-serif;
  font-size: 14px;
}

.media-security-copy {
  min-width: 0;
}

.media-security-copy strong,
.media-security-copy small {
  display: block;
}

.media-security-copy strong {
  font-size: 10.5px;
  line-height: 1.3;
}

.media-security-copy small {
  margin-top: 2px;
  color: #aab6c8;
  font-size: 9.5px;
  line-height: 1.35;
}

.media-security-clean {
  border-color:
    rgba(34, 197, 94, .32);
}

.media-security-clean
.media-security-copy strong {
  color: #86efac;
}

.media-security-clean_warning {
  border-color:
    rgba(245, 158, 11, .38);
}

.media-security-clean_warning
.media-security-copy strong {
  color: #fcd34d;
}

.media-security-blocked {
  border-color:
    rgba(239, 68, 68, .55);
  background:
    rgba(127, 29, 29, .19);
}

.media-security-blocked
.media-security-copy strong {
  color: #fca5a5;
}

.media-security-scan_error {
  border-color:
    rgba(249, 115, 22, .50);
}

.media-security-scan_error
.media-security-copy strong {
  color: #fdba74;
}

.media-security-scanning,
.media-security-pending {
  border-color:
    rgba(59, 130, 246, .35);
}

.media-security-scanning
.media-security-copy strong,
.media-security-pending
.media-security-copy strong {
  color: #93c5fd;
}

.retry-media-scan {
  flex: 0 0 auto;
  border:
    1px solid #475569;
  border-radius: 7px;
  padding: 6px 8px;
  background: #1e293b;
  color: #e2e8f0;
  cursor: pointer;
  font: inherit;
  font-size: 9.5px;
  white-space: nowrap;
}

.retry-media-scan:hover {
  background: #2b3a51;
}

.retry-media-scan:disabled {
  opacity: .55;
  cursor: wait;
}

.media-security-placeholder {
  min-height: 112px;
  padding: 16px;
  border:
    1px solid #334155;
  border-radius: 9px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  text-align: center;
  background:
    rgba(15, 23, 42, .52);
}

.media-security-placeholder-icon {
  width: 39px;
  height: 39px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1e293b;
  font-family:
    "Segoe UI Emoji",
    sans-serif;
  font-size: 18px;
}

.media-security-placeholder strong {
  font-size: 11px;
}

.media-security-placeholder small {
  max-width: 300px;
  color: #94a3b8;
  font-size: 9.5px;
  line-height: 1.4;
}

/* Un archivo bloqueado nunca debe parecer clicable. */
.media-security-blocked
+ .media-actions {
  display: none !important;
}



/* ==========================================================
   v0.8.7 — ENLACES SEGUROS Y CLICABLES
   ========================================================== */

.safe-chat-link {
  position: relative;
  display: inline;
  color: #53bdeb;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.message.outbound
.safe-chat-link {
  color: #74c7ec;
}

.safe-chat-link::after {
  content: " ↗";
  display: inline;
  color: currentColor;
  font-size: .75em;
  opacity: .75;
  text-decoration: none;
}

.safe-chat-link:hover {
  filter: brightness(1.13);
}

.safe-chat-link.link-checking {
  cursor: wait;
  opacity: .72;
}

.safe-chat-link.link-safe {
  text-decoration-color:
    rgba(74, 222, 128, .85);
}

.safe-chat-link.link-warning {
  text-decoration-color:
    #fbbf24;
}

.safe-chat-link.link-danger {
  color: #fca5a5;
  text-decoration-color:
    #ef4444;
}

.safe-chat-link.link-unverified {
  text-decoration-style: dotted;
}

.link-safety-card {
  width: min(520px, 100%);
  max-height: min(680px, 90dvh);
  padding: 18px;
  border: 1px solid #334155;
  border-radius: 17px;
  overflow-y: auto;
  background: #111827;
  box-shadow:
    0 28px 75px
    rgba(0,0,0,.55);
}

.link-safety-card.safe {
  border-color:
    rgba(34,197,94,.42);
}

.link-safety-card.warning {
  border-color:
    rgba(245,158,11,.50);
}

.link-safety-card.danger {
  border-color:
    rgba(239,68,68,.60);
}

.link-safety-header {
  display: grid;
  grid-template-columns:
    45px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}

.link-safety-big-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1e293b;
  font-family:
    "Segoe UI Emoji",
    sans-serif;
  font-size: 21px;
}

.link-safety-header h3 {
  margin: 0;
  font-size: 16px;
}

.link-safety-header p {
  margin: 3px 0 0;
  color: #94a3b8;
  font-size: 11.5px;
  line-height: 1.4;
}

.link-safety-url {
  margin-top: 14px;
  padding: 10px;
  border: 1px solid #334155;
  border-radius: 9px;
  overflow-wrap: anywhere;
  background:
    rgba(15,23,42,.70);
  color: #dbeafe;
  font-family:
    Consolas,
    "Courier New",
    monospace;
  font-size: 11px;
  line-height: 1.45;
}

.link-safety-details {
  margin-top: 12px;
  display: grid;
  gap: 7px;
}

.link-safety-detail {
  display: grid;
  grid-template-columns:
    18px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  color: #cbd5e1;
  font-size: 11px;
  line-height: 1.45;
}

.link-safety-detail-safe {
  color: #86efac;
}

.link-safety-detail-warning {
  color: #fcd34d;
}

.link-safety-detail-danger {
  color: #fca5a5;
}

.link-safety-detail-neutral {
  color: #aab6c8;
}

.link-safety-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.primary-action {
  border: 1px solid #22c55e;
  border-radius: 10px;
  padding: 8px 12px;
  background: #16a34a;
  color: white;
  cursor: pointer;
  font-weight: 700;
}

.primary-action:hover {
  background: #22c55e;
}

@media (max-width: 560px) {
  .link-safety-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .link-safety-actions button {
    width: 100%;
  }
}



/* ==========================================================
   v0.8.8 — FIX MÓVIL: LOS FILTROS NO DEBEN CRUZAR AL CHAT
   ========================================================== */

/*
 * En v0.8.5 la barra de filtros recibió z-index:14 y su menú z-index:520.
 * En móvil, el chat tiene z-index:10, así que esos hijos del sidebar
 * podían pintarse ENCIMA del chat abierto.
 *
 * Creamos un stacking context propio para TODO el sidebar:
 *
 * sidebar z-index:1
 * chat    z-index:10
 *
 * De ese modo, aunque un hijo del sidebar tenga z-index alto, nunca puede
 * superar al chat mientras éste está abierto.
 */
@media (max-width: 760px) {
  .sidebar {
    position: relative;
    z-index: 1;
    isolation: isolate;
  }

  .chat {
    z-index: 10;
  }

  /*
   * Refuerzo: mientras la conversación está abierta, el sidebar no debe
   * recibir taps/clics aunque permanezca debajo durante la animación.
   */
  .app.chat-open .sidebar {
    pointer-events: none;
  }

  /*
   * El menú desplegable pertenece a la bandeja, no a la conversación.
   * Si quedó abierto justo antes de entrar a un chat, tampoco podrá
   * aparecer sobre éste.
   */
  .app.chat-open
  .conversation-filter-menu {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /*
   * La barra de filtros conserva su z-index sólo dentro del stacking
   * context del sidebar, suficiente para quedar sobre la lista de chats.
   */
  .conversation-filter-shell {
    z-index: 2;
  }
}



/* ==========================================================
   v0.8.9 — ABRIR/CAMBIAR CHAT DIRECTAMENTE EN EL FINAL
   ========================================================== */

/*
 * Antes `.messages` tenía `scroll-behavior: smooth`.
 * Eso hacía que incluso un scroll programático con behavior:auto
 * pudiera animarse dependiendo del navegador.
 *
 * Las animaciones deseadas ahora las solicita app.js explícitamente
 * con behavior:"smooth"; el posicionamiento inicial siempre es instantáneo.
 */
.messages {
  scroll-behavior: auto !important;
}

/*
 * Mientras se descargan/renderizan los mensajes del chat nuevo no mostramos
 * el scrollTop heredado de la conversación anterior.
 *
 * Se quita tras dos requestAnimationFrame, cuando el viewport ya está
 * colocado en el último mensaje.
 */
.chat.switching-conversation
.messages {
  visibility: hidden;
}



/* ==========================================================
   v0.9.0 — CONTROL BOT / ATENCIÓN PERSONAL MUY VISIBLE
   ========================================================== */

.conversation {
  position: relative;
  grid-template-columns:
    44px minmax(0, 1fr) 58px;
  border-left:
    4px solid transparent;
  padding-left:
    10px;
  min-height: 86px;
  transition:
    background 120ms ease,
    border-color 120ms ease;
}

.conversation.control-bot {
  border-left-color: #22c55e;
  background:
    linear-gradient(
      90deg,
      rgba(34, 197, 94, .075),
      transparent 48%
    );
}

.conversation.control-human {
  border-left-color: #f59e0b;
  background:
    linear-gradient(
      90deg,
      rgba(245, 158, 11, .08),
      transparent 48%
    );
}

.conversation.control-blocked {
  border-left-color: #ef4444;
}

.conversation.control-bot:hover,
.conversation.control-bot.active {
  background:
    linear-gradient(
      90deg,
      rgba(34, 197, 94, .14),
      #182235 55%
    );
}

.conversation.control-human:hover,
.conversation.control-human.active {
  background:
    linear-gradient(
      90deg,
      rgba(245, 158, 11, .15),
      #182235 55%
    );
}

.conv-control-status {
  width: fit-content;
  max-width: 100%;
  min-height: 22px;
  margin-top: 6px;
  padding: 3px 8px 3px 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  white-space: nowrap;
}

.conv-control-status strong {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .35px;
}

.conv-control-status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
}

.conv-control-status.bot {
  border-color:
    rgba(34, 197, 94, .35);
  background:
    rgba(34, 197, 94, .10);
  color: #86efac;
}

.conv-control-status.bot
.conv-control-status-dot {
  background: #22c55e;
  box-shadow:
    0 0 0 3px
    rgba(34, 197, 94, .12);
}

.conv-control-status.human {
  border-color:
    rgba(245, 158, 11, .40);
  background:
    rgba(245, 158, 11, .10);
  color: #fcd34d;
}

.conv-control-status.human
.conv-control-status-dot {
  background: #f59e0b;
  box-shadow:
    0 0 0 3px
    rgba(245, 158, 11, .12);
}

.conv-control-status.blocked {
  border-color:
    rgba(239, 68, 68, .40);
  background:
    rgba(239, 68, 68, .10);
  color: #fca5a5;
}

.conv-control-status.blocked
.conv-control-status-dot {
  background: #ef4444;
}

.conversation-side {
  min-width: 54px;
  display: grid;
  justify-items: end;
  align-content: center;
  gap: 7px;
}

.conversation-bot-switch {
  width: 54px;
  height: 30px;
  padding: 0 4px;
  border: 1px solid #475569;
  border-radius: 999px;
  display: grid;
  grid-template-columns:
    20px 1fr;
  align-items: center;
  gap: 2px;
  background: #1e293b;
  cursor: pointer;
  user-select: none;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    opacity 120ms ease;
}

.conversation-bot-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.conversation-bot-switch-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  font-family:
    "Segoe UI Emoji",
    system-ui,
    sans-serif;
  font-size: 12px;
  line-height: 1;
}

.conversation-bot-switch i {
  width: 23px;
  height: 14px;
  border-radius: 999px;
  position: relative;
  background: #64748b;
  transition:
    background 120ms ease;
}

.conversation-bot-switch i::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f8fafc;
  transition:
    transform 120ms ease;
}

.conversation-bot-switch.enabled {
  border-color:
    rgba(34, 197, 94, .55);
  background:
    rgba(34, 197, 94, .12);
}

.conversation-bot-switch.enabled i {
  background: #22c55e;
}

.conversation-bot-switch.enabled
i::after {
  transform: translateX(9px);
}

.conversation-bot-switch.disabled {
  opacity: .48;
  cursor: not-allowed;
}

.bot-toggle {
  min-height: 38px;
  padding: 4px 7px 4px 9px;
  border: 1px solid #475569;
  border-radius: 12px;
  gap: 7px;
  background: #182235;
  transition:
    border-color 120ms ease,
    background 120ms ease;
}

.chat-control-status {
  min-width: 52px;
  text-align: center;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .45px;
}

.bot-toggle.bot-active {
  border-color:
    rgba(34, 197, 94, .55);
  background:
    rgba(34, 197, 94, .12);
  color: #86efac;
}

.bot-toggle.human-control {
  border-color:
    rgba(245, 158, 11, .55);
  background:
    rgba(245, 158, 11, .11);
  color: #fcd34d;
}

.bot-toggle.blocked-control {
  border-color:
    rgba(239, 68, 68, .55);
  background:
    rgba(239, 68, 68, .11);
  color: #fca5a5;
  cursor: not-allowed;
}

.bot-toggle.human-control i {
  background: #a16207;
}

.bot-toggle.blocked-control i {
  background: #7f1d1d;
}

.bot-toggle input:disabled + i {
  opacity: .55;
}

.bot-dot {
  display: none !important;
}

@media (max-width: 760px) {
  .conversation {
    grid-template-columns:
      42px minmax(0, 1fr) 55px;
    gap: 9px;
    min-height: 84px;
    padding-right: 9px;
  }

  .conv-control-status {
    margin-top: 5px;
  }

  .conv-control-status strong {
    font-size: 9px;
  }

  .conversation-bot-switch {
    width: 52px;
    height: 29px;
  }

  .bot-toggle {
    min-width: 74px;
    min-height: 36px;
    padding-left: 7px;
    padding-right: 6px;
  }

  .chat-control-status {
    min-width: 37px;
    font-size: 9px;
  }

  .bot-toggle i {
    width: 31px;
    height: 19px;
  }

  .bot-toggle i::after {
    width: 13px;
    height: 13px;
  }

  .bot-toggle input:checked + i::after {
    transform: translateX(12px);
  }
}



/* ==========================================================
   v0.9.1 — AJUSTE MÓVIL: EVITAR RECORTE / DESBORDAMIENTO
   ========================================================== */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  position: relative;
}

.app,
.chat,
.sidebar {
  max-width: 100%;
}

@media (max-width: 760px) {
  html,
  body,
  #app,
  .app,
  .chat,
  .sidebar {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .app {
    width: 100vw;
    min-width: 0;
  }

  .chat {
    width: 100vw;
    max-width: 100vw;
    left: 0;
    right: 0;
    overflow-x: hidden;
  }

  .chat-header,
  .selection-header,
  .composer-shell,
  .composer,
  .messages,
  .message-row,
  .message,
  .message.text-message,
  .media-message {
    max-width: 100%;
    min-width: 0;
  }

  .chat-header,
  .selection-header {
    width: 100%;
    max-width: 100vw;
    gap: 8px;
    padding-left: 8px;
    padding-right: 8px;
    overflow: hidden;
  }

  .chat-title {
    flex: 1 1 auto;
    min-width: 0;
  }

  .chat-avatar-wrap {
    flex: 0 0 auto;
  }

  .header-action,
  .retention-wrap,
  .retention-btn,
  .bot-toggle,
  .icon-btn.mobile-only,
  .selection-header select,
  .selection-header .header-action,
  .selection-header .icon-btn,
  .selection-header strong {
    flex: 0 0 auto;
    min-width: 0;
  }

  .header-action,
  .retention-btn,
  .bot-toggle {
    padding-left: 8px;
    padding-right: 8px;
  }

  .messages {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }

  .message-row {
    width: 100%;
  }

  .message {
    max-width: min(86%, 86vw);
  }

  .message.text-message {
    max-width: min(86%, 86vw);
  }

  .media-message {
    min-width: 0;
    width: auto;
    max-width: min(86vw, 420px);
  }

  .document-card,
  .media-actions,
  .document-info,
  .document-info strong,
  .document-info small,
  .safe-chat-link {
    min-width: 0;
    max-width: 100%;
  }
}


/* ==========================================================
   v0.10.0 — CONFIGURADOR DEL BOT + OPENAI
   ========================================================== */

.bot-config-card {
  width:
    min(920px, 96vw);
  height:
    min(860px, 94dvh);
  border:
    1px solid #334155;
  border-radius: 17px;
  display: grid;
  grid-template-rows:
    auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: #111827;
  box-shadow:
    0 28px 80px
    rgba(0, 0, 0, .58);
}

.bot-config-body {
  min-height: 0;
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color:
    #475569 transparent;
}

.bot-config-body::-webkit-scrollbar {
  width: 7px;
}

.bot-config-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #475569;
}

.bot-config-section {
  margin-bottom: 14px;
  padding: 14px;
  border:
    1px solid #2b3a51;
  border-radius: 13px;
  background:
    rgba(15, 23, 42, .52);
}

.bot-section-heading {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content:
    space-between;
  gap: 12px;
}

.bot-section-heading > div {
  min-width: 0;
}

.bot-section-heading strong {
  display: block;
  color: #e5e7eb;
  font-size: 14px;
}

.bot-section-heading small,
.bot-field small {
  display: block;
  margin-top: 3px;
  color: #94a3b8;
  font-size: 10.5px;
  line-height: 1.4;
}

.bot-field {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.bot-field > span {
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
}

.bot-field input,
.bot-field select,
.bot-field textarea {
  width: 100%;
  min-width: 0;
  border:
    1px solid #334155;
  border-radius: 9px;
  padding: 9px 10px;
  outline: none;
  background: #0f172a;
  color: #e5e7eb;
  font: inherit;
  font-size: 12px;
}

.bot-field textarea {
  resize: vertical;
  line-height: 1.45;
}

.bot-field input:focus,
.bot-field select:focus,
.bot-field textarea:focus {
  border-color:
    rgba(34, 197, 94, .65);
  box-shadow:
    0 0 0 2px
    rgba(34, 197, 94, .10);
}

.bot-ai-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 10px 14px;
}

.bot-setting-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #cbd5e1;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
}

.bot-setting-switch-inline {
  min-height: 38px;
}

.bot-setting-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bot-setting-switch i {
  width: 34px;
  height: 20px;
  flex: 0 0 34px;
  border-radius: 999px;
  position: relative;
  background: #475569;
  transition:
    background 120ms ease;
}

.bot-setting-switch i::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  transition:
    transform 120ms ease;
}

.bot-setting-switch
input:checked + i {
  background: #22c55e;
}

.bot-setting-switch
input:checked + i::after {
  transform:
    translateX(14px);
}

.openai-status {
  flex: 0 0 auto;
  padding: 6px 9px;
  border:
    1px solid #475569;
  border-radius: 999px;
  color: #cbd5e1;
  background: #1e293b;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.openai-status.configured {
  border-color:
    rgba(34, 197, 94, .45);
  color: #86efac;
  background:
    rgba(34, 197, 94, .10);
}

.openai-status.not-configured {
  border-color:
    rgba(245, 158, 11, .40);
  color: #fcd34d;
  background:
    rgba(245, 158, 11, .08);
}

.bot-ai-actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.bot-inline-status {
  color: #94a3b8;
  font-size: 10.5px;
  line-height: 1.4;
}

.bot-rules-list {
  display: grid;
  gap: 10px;
}

.bot-rules-empty {
  padding: 22px;
  border:
    1px dashed #475569;
  border-radius: 10px;
  text-align: center;
  color: #94a3b8;
  font-size: 11px;
}

.bot-rule-card {
  padding: 12px;
  border:
    1px solid #334155;
  border-radius: 11px;
  background: #111c2e;
}

.bot-rule-top {
  display: flex;
  align-items: center;
  justify-content:
    space-between;
  gap: 10px;
}

.bot-rule-delete {
  width: 34px;
  height: 32px;
  border:
    1px solid
    rgba(239, 68, 68, .30);
  border-radius: 8px;
  background:
    rgba(127, 29, 29, .18);
  color: #fca5a5;
  cursor: pointer;
}

.bot-rule-delete:hover {
  background:
    rgba(127, 29, 29, .34);
}

.bot-rule-grid {
  display: grid;
  grid-template-columns:
    minmax(180px, .55fr)
    minmax(0, 1.45fr);
  gap: 12px;
}

.bot-config-footer {
  min-height: 62px;
  padding: 10px 14px;
  border-top:
    1px solid #2b3a51;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  background: #111827;
}

.bot-config-footer
.bot-inline-status {
  margin-right: auto;
}

@media (max-width: 760px) {
  .bot-config-card {
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .bot-config-body {
    padding: 10px;
  }

  .bot-config-section {
    padding: 11px;
  }

  .bot-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .bot-ai-grid,
  .bot-rule-grid {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .bot-config-footer {
    padding-bottom:
      max(
        10px,
        env(safe-area-inset-bottom)
      );
    flex-wrap: wrap;
  }

  .bot-config-footer
  .bot-inline-status {
    width: 100%;
    margin-right: 0;
  }

  .bot-config-footer
  button {
    flex: 1 1 auto;
  }
}



/* ==========================================================
   v0.10.4 — MENSAJE FUERA DE HORARIO
   ========================================================== */

.bot-away-cooldown-field {
  max-width: 330px;
}

.bot-number-with-suffix {
  display: grid;
  grid-template-columns:
    minmax(90px, 130px) auto;
  align-items: center;
  gap: 8px;
}

.bot-number-with-suffix > span {
  color: #94a3b8;
  font-size: 11px;
}



@media (max-width: 420px) {
  .business-schedule-row {
    padding: 10px;
  }

  .business-schedule-open {
    font-size: 14px;
  }

  .business-schedule-row input[type="time"] {
    font-size: 16px;
  }
}


/* ==========================================================
   v0.10.11 — SELECTOR DE PLANTILLAS APROBADAS
   ========================================================== */

.new-chat-template-picker {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.new-chat-template-picker
.secondary-action {
  min-width: 44px;
  padding-left: 12px;
  padding-right: 12px;
}

.new-chat-template-preview {
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid #334155;
  border-radius: 10px;
  background: #0b1220;
}

.new-chat-template-preview-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  color: #e5e7eb;
  font-size: 12px;
  font-weight: 700;
}

.new-chat-template-preview-title span {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 500;
}

.new-chat-template-preview-body {
  margin-top: 8px;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.new-chat-template-variables {
  margin-top: 10px;
}

@media (max-width: 520px) {
  .new-chat-template-picker {
    grid-template-columns:
      minmax(0, 1fr) 44px;
  }
}


/* v0.10.12 — ventana de atención 24 h */
.service-window-banner { margin:8px 10px 0; padding:8px 10px; border:1px solid #334155; border-radius:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:rgba(15,23,42,.92); }
.service-window-banner.open { border-color:rgba(34,197,94,.38); background:rgba(20,83,45,.13); }
.service-window-banner.closed { border-color:rgba(245,158,11,.42); background:rgba(120,53,15,.12); }
.service-window-banner-main { min-width:0; display:flex; align-items:center; gap:9px; }
.service-window-icon { flex:0 0 auto; font-size:12px; }
.service-window-banner.open .service-window-icon { color:#4ade80; }
.service-window-copy { min-width:0; display:grid; gap:2px; }
.service-window-copy strong { color:#e5e7eb; font-size:11px; }
.service-window-copy small { color:#94a3b8; font-size:9.5px; line-height:1.35; }
.service-window-template-btn { flex:0 0 auto; min-height:34px; border:1px solid rgba(34,197,94,.42); border-radius:8px; padding:7px 11px; background:rgba(34,197,94,.14); color:#86efac; font-size:10px; font-weight:800; cursor:pointer; }
.service-window-template-btn:hover { background:rgba(34,197,94,.22); }
.conv-service-window { width:fit-content; max-width:100%; margin-top:3px; padding:2px 6px; border-radius:999px; font-size:8.5px; font-weight:750; line-height:1.3; white-space:nowrap; }
.conv-service-window.open { color:#86efac; background:rgba(34,197,94,.10); }
.conv-service-window.closed { color:#fcd34d; background:rgba(245,158,11,.10); }
@media (max-width:760px) { .service-window-banner { margin:6px 8px 0; padding:8px; align-items:stretch; } .service-window-banner.closed { flex-direction:column; } .service-window-template-btn { width:100%; } .service-window-copy small { font-size:9px; } }


/* ==========================================================
   v0.10.13 — ADMINISTRADOR DE PLANTILLAS
   ========================================================== */
.template-manager-card{width:min(1120px,97vw);height:min(880px,95dvh);border:1px solid #334155;border-radius:18px;display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden;background:#111827;box-shadow:0 28px 80px rgba(0,0,0,.58)}
.template-manager-toolbar{min-height:56px;padding:9px 14px;border-bottom:1px solid #243047;display:flex;align-items:center;justify-content:space-between;gap:10px}.template-manager-toolbar>div{display:flex;align-items:center;gap:8px}
.template-manager-layout{min-height:0;display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,1.55fr)}.template-manager-list-panel{min-height:0;border-right:1px solid #243047;background:#0c1422}.template-manager-list{height:100%;min-height:0;overflow-y:auto;padding:8px;display:grid;align-content:start;gap:6px;scrollbar-width:thin;scrollbar-color:#475569 transparent}
.template-manager-item{width:100%;min-width:0;border:1px solid transparent;border-radius:10px;padding:10px;background:transparent;color:#e5e7eb;text-align:left;cursor:pointer}.template-manager-item:hover{border-color:#334155;background:#172033}.template-manager-item-top{display:flex;align-items:flex-start;justify-content:space-between;gap:7px}.template-manager-item-top strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}.template-manager-item>small{display:block;margin-top:4px;color:#94a3b8;font-size:9.5px}.template-manager-item-body{display:-webkit-box;margin-top:7px;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#cbd5e1;font-size:10px;line-height:1.35}.template-manager-item em{display:block;margin-top:7px;color:#fcd34d;font-size:8.5px;font-style:normal}
.template-manager-empty-list,.template-editor-empty{min-height:180px;display:grid;place-items:center;align-content:center;gap:5px;padding:24px;text-align:center;color:#94a3b8}.template-editor-empty strong{color:#cbd5e1;font-size:13px}.template-editor-empty small{font-size:10px}.template-editor-panel{min-height:0;overflow:hidden}.template-editor-form{height:100%;min-height:0;overflow-y:auto;padding:14px;scrollbar-width:thin;scrollbar-color:#475569 transparent}
.template-editor-heading{margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:10px}.template-editor-heading strong{display:block;color:#f8fafc;font-size:15px}.template-editor-heading small{display:block;margin-top:3px;color:#94a3b8;font-size:10px}.template-status-badge{flex:0 0 auto;padding:4px 7px;border:1px solid #475569;border-radius:999px;font-size:8.5px;font-weight:800;white-space:nowrap}.template-status-badge.approved{border-color:rgba(34,197,94,.38);color:#86efac;background:rgba(34,197,94,.09)}.template-status-badge.pending{border-color:rgba(245,158,11,.38);color:#fcd34d;background:rgba(245,158,11,.08)}.template-status-badge.rejected{border-color:rgba(239,68,68,.38);color:#fca5a5;background:rgba(127,29,29,.14)}
.template-editor-warning{margin-bottom:10px;padding:9px 10px;border:1px solid rgba(245,158,11,.34);border-radius:9px;background:rgba(120,53,15,.15);color:#fde68a;font-size:10px;line-height:1.4}.template-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}.template-editor-grid .bot-field:first-child{grid-column:span 2}.template-editor-form .bot-field em{margin-left:4px;color:#64748b;font-size:9px;font-style:normal;font-weight:500}.template-editor-form input[readonly]{opacity:.72;cursor:default}.template-editor-subheading{margin:14px 0 8px}.template-editor-subheading strong,.template-editor-subheading small{display:block}.template-editor-subheading strong{color:#e5e7eb;font-size:12px}.template-editor-subheading small{margin-top:3px;color:#94a3b8;font-size:9.5px;line-height:1.4}.template-variable-example-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}.template-buttons-section{margin-top:12px;padding:0 12px 12px;border:1px solid #2b3a51;border-radius:11px;background:rgba(15,23,42,.38)}
.template-manager-preview-message{width:min(430px,100%);min-height:88px;padding:11px 12px;border-radius:8px;background:#1f2c34;color:#e9edef;font-size:11px;line-height:1.45;box-shadow:0 1px 2px rgba(0,0,0,.22)}.template-preview-header{display:block;margin-bottom:7px;font-size:12px}.template-preview-body{white-space:normal;overflow-wrap:anywhere}.template-preview-footer{display:block;margin-top:8px;color:#8696a0;font-size:9px}.template-preview-buttons{margin:10px -12px -11px;border-top:1px solid rgba(255,255,255,.08);display:grid}.template-preview-buttons span{min-height:34px;display:grid;place-items:center;border-top:1px solid rgba(255,255,255,.05);color:#53bdeb;font-size:10px;font-weight:650}.template-preview-buttons span:first-child{border-top:0}.template-editor-actions{min-height:58px;margin-top:14px;padding-top:10px;border-top:1px solid #243047;display:flex;align-items:center;justify-content:flex-end;gap:8px}.template-editor-actions .bot-inline-status{margin-right:auto}
@media (max-width:760px){.template-manager-card{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;border:0;border-radius:0}.template-manager-toolbar{align-items:flex-start;flex-direction:column}.template-manager-layout{grid-template-columns:1fr;grid-template-rows:minmax(145px,34dvh) minmax(0,1fr)}.template-manager-list-panel{border-right:0;border-bottom:1px solid #243047}.template-editor-grid,.template-variable-example-list{grid-template-columns:1fr}.template-editor-grid .bot-field:first-child{grid-column:span 1}.template-editor-form{padding:10px}.template-editor-actions{flex-wrap:wrap;padding-bottom:max(8px,env(safe-area-inset-bottom))}.template-editor-actions .bot-inline-status{width:100%;margin-right:0}.template-editor-actions button{flex:1 1 auto}}


/* v0.10.14 — variables compartidas entre bot y plantillas */
.template-arleyn-variables{margin:9px 0 13px;padding:0 11px 11px;border:1px solid #2b3a51;border-radius:11px;background:rgba(15,23,42,.34)}
.template-arleyn-variable-chips{display:flex;flex-wrap:wrap;gap:6px}
.template-arleyn-variable-chips button{max-width:100%;min-height:27px;border:1px solid rgba(37,211,102,.28);border-radius:999px;padding:4px 8px;background:rgba(20,83,45,.14);color:#86efac;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:8.5px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.template-arleyn-variable-chips button:hover{border-color:rgba(37,211,102,.55);background:rgba(20,83,45,.25)}
.template-arleyn-variable-values{margin-top:9px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}
.template-arleyn-variable-values>div{min-width:0;padding:5px 6px;border-radius:7px;display:grid;gap:2px;background:rgba(2,6,23,.33)}
.template-arleyn-variable-values code,.template-arleyn-variable-values span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px}.template-arleyn-variable-values code{color:#5eead4}.template-arleyn-variable-values span{color:#94a3b8}
.template-manager-auto-note{color:#86efac!important}.new-chat-template-auto-vars{margin-top:8px;padding-top:7px;border-top:1px solid rgba(255,255,255,.07);color:#86efac;font-size:9px;line-height:1.35}
@media(max-width:760px){.template-arleyn-variable-values{grid-template-columns:1fr}.template-arleyn-variable-chips{gap:5px}.template-arleyn-variable-chips button{font-size:8px}}


/* v0.10.15 — validación y diagnóstico de plantillas Meta */
.template-meta-format-note {
  display: block;
  margin-top: 4px;
  color: #fbbf24 !important;
  line-height: 1.4;
}
.template-meta-format-note code {
  color: #fde68a;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
#templateEditorSaveStatus {
  max-width: min(560px, 100%);
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}


/* ==========================================================
   v0.10.16 — FORMATO WHATSAPP EN PLANTILLAS
   ========================================================== */

.template-format-toolbar {
  min-height: 34px;
  margin: 5px 0 6px;
  padding: 4px;
  border: 1px solid #334155;
  border-radius: 9px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  background: rgba(15, 23, 42, .48);
}

.template-format-toolbar button {
  width: 30px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  background: transparent;
  color: #cbd5e1;
  font-size: 12px;
  cursor: pointer;
}

.template-format-toolbar button:hover:not(:disabled) {
  border-color: #475569;
  background: #1e293b;
  color: #f8fafc;
}

.template-format-toolbar button:focus-visible {
  outline: 2px solid #25d366;
  outline-offset: 1px;
}

.template-format-toolbar button:disabled {
  opacity: .4;
  cursor: default;
}

.template-format-toolbar-help {
  margin-left: 4px;
  color: #64748b;
  font-size: 8.5px;
}

.template-editor-form .bot-field > small code {
  padding: 1px 3px;
  border-radius: 4px;
  background: rgba(15, 23, 42, .65);
  color: #a7f3d0;
  font-size: .95em;
}

.template-manager-preview-message
.template-preview-body strong {
  font-weight: 700;
}

.template-manager-preview-message
.template-preview-body em {
  font-style: italic;
}

.template-manager-preview-message
.template-preview-body del {
  opacity: .78;
}

.template-manager-preview-message
.template-preview-body
.wa-format-monospace {
  padding: 1px 3px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .25);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  white-space: pre-wrap;
}

@media (max-width: 760px) {
  .template-format-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #111827;
  }

  .template-format-toolbar-help {
    display: none;
  }

  .template-format-toolbar button {
    width: 34px;
    height: 31px;
  }
}


/* ==========================================================
   v0.10.18 — PERMISOS REALES DE PLANTILLAS META
   ========================================================== */

.template-manager-item em {
  line-height: 1.35;
}

.template-editor-warning {
  white-space: normal;
}


/* ==========================================================
   v0.10.19 — PLANTILLAS MULTIMEDIA / ENVÍO DE ESCANEOS
   ========================================================== */

.new-chat-template-media {
  margin-top: 12px;
  padding: 11px;
  border: 1px solid #334155;
  border-radius: 11px;
  background: rgba(15, 23, 42, .42);
}

.new-chat-template-media-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.new-chat-template-media-heading > div {
  min-width: 0;
}

.new-chat-template-media-heading strong,
.new-chat-template-media-heading small {
  display: block;
}

.new-chat-template-media-heading strong {
  color: #e5e7eb;
  font-size: 11px;
}

.new-chat-template-media-heading small {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 9px;
}

.new-chat-template-media-list {
  margin-top: 9px;
  display: grid;
  gap: 5px;
}

.new-chat-template-media-empty {
  padding: 10px;
  border: 1px dashed #334155;
  border-radius: 8px;
  color: #64748b;
  font-size: 9px;
  text-align: center;
}

.new-chat-template-media-item {
  min-width: 0;
  min-height: 40px;
  padding: 6px 7px;
  border: 1px solid #293548;
  border-radius: 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  background: rgba(2, 6, 23, .32);
}

.new-chat-template-media-item-icon {
  font-size: 15px;
}

.new-chat-template-media-item-name {
  min-width: 0;
  overflow: hidden;
  color: #dbe4ee;
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.new-chat-template-media-item-name small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 8px;
}

.new-chat-template-media-item button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}

.new-chat-template-media-item button:hover {
  background: #263246;
  color: #f8fafc;
}

.new-chat-template-send-mode {
  margin-top: 10px;
  display: grid;
  gap: 7px;
}

.new-chat-template-send-mode > label:not(.bot-field) {
  padding: 8px 9px;
  border: 1px solid #334155;
  border-radius: 9px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

.new-chat-template-send-mode > label:not(.bot-field):has(input:checked) {
  border-color: rgba(37, 211, 102, .48);
  background: rgba(20, 83, 45, .12);
}

.new-chat-template-send-mode input[type="radio"] {
  margin-top: 2px;
}

.new-chat-template-send-mode span strong,
.new-chat-template-send-mode span small {
  display: block;
}

.new-chat-template-send-mode span strong {
  color: #e5e7eb;
  font-size: 10px;
}

.new-chat-template-send-mode span small {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 8.5px;
  line-height: 1.35;
}

.new-chat-template-media-warning {
  padding: 7px 8px;
  border: 1px solid rgba(245, 158, 11, .28);
  border-radius: 8px;
  background: rgba(120, 53, 15, .12);
  color: #fcd34d;
  font-size: 8.5px;
  line-height: 1.4;
}

.new-chat-template-media-required {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  color: #93c5fd;
  font-size: 9px;
  line-height: 1.35;
}

#newChatMergedFilenameWrap {
  margin-bottom: 0;
}

@media (max-width: 520px) {
  .new-chat-template-media-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .new-chat-template-media-heading .secondary-action {
    width: 100%;
  }
}


/* ==========================================================
   v0.10.20 — CREADOR DE PLANTILLAS DOCUMENT / IMAGE
   ========================================================== */

.template-header-section {
  display: grid;
  gap: 8px;
}

.template-header-sample {
  padding: 10px;
  border: 1px solid #334155;
  border-radius: 10px;
  background: rgba(15, 23, 42, .38);
}

.template-header-sample-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.template-header-sample-top > div {
  min-width: 0;
}

.template-header-sample-top strong,
.template-header-sample-top small {
  display: block;
}

.template-header-sample-top strong {
  color: #e5e7eb;
  font-size: 10px;
}

.template-header-sample-top small {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 8.5px;
  line-height: 1.35;
}

.template-header-sample-selected {
  margin-top: 8px;
  padding: 7px 8px;
  border: 1px solid #334155;
  border-radius: 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  background: rgba(2, 6, 23, .35);
}

.template-header-sample-selected > span:nth-child(2) {
  min-width: 0;
}

.template-header-sample-selected strong,
.template-header-sample-selected small {
  display: block;
}

.template-header-sample-selected strong {
  overflow: hidden;
  color: #dbe4ee;
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-header-sample-selected small {
  margin-top: 2px;
  color: #64748b;
  font-size: 8px;
}

.template-header-sample-selected > button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}

.template-header-sample-selected > button:hover:not(:disabled) {
  background: #263246;
  color: #f8fafc;
}

.template-header-sample-privacy {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 8px;
  line-height: 1.4;
}

.template-header-sample .template-editor-warning {
  margin-top: 8px;
}

.template-header-sample code {
  padding: 1px 3px;
  border-radius: 4px;
  background: rgba(2, 6, 23, .55);
}

.template-preview-media-header {
  min-height: 56px;
  margin-bottom: 7px;
  padding: 9px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(0, 0, 0, .13);
  color: #334155;
  font-size: 10px;
}

.template-preview-image-header {
  min-height: 92px;
  justify-content: center;
  flex-direction: column;
}

@media (max-width: 600px) {
  .template-header-sample-top {
    align-items: stretch;
    flex-direction: column;
  }

  .template-header-sample-top .secondary-action {
    width: 100%;
  }
}


/* ==========================================================
   v0.10.21 — HEADER COMPACTO + CENTRO DE CONFIGURACIÓN
   ========================================================== */

.sidebar-header {
  min-width: 0;
  gap: 8px;
  padding-left: 14px;
  padding-right: 10px;
  overflow: hidden;
}

.sidebar-header > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.sidebar-header > div:first-child > strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#connectionState {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-actions {
  flex: 0 0 auto;
  min-width: 0;
  gap: 0;
}

.sidebar-actions .icon-btn {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  font-size: 20px;
}

/* Centro de Configuración */
.settings-hub-card {
  width: min(560px, 100%);
  max-height: min(760px, 92dvh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #334155;
  border-radius: 18px;
  background: #111827;
  box-shadow:
    0 28px 80px
    rgba(0, 0, 0, .5);
}

.settings-hub-header {
  width: 100%;
  min-width: 0;
}

.settings-hub-body {
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
}

.settings-category {
  min-width: 0;
  margin-bottom: 15px;
}

.settings-category:last-child {
  margin-bottom: 0;
}

.settings-category-heading {
  min-width: 0;
  margin: 0 4px 7px;
}

.settings-category-heading strong,
.settings-category-heading small {
  display: block;
}

.settings-category-heading strong {
  color: #e5e7eb;
  font-size: 11px;
  font-weight: 800;
}

.settings-category-heading small {
  margin-top: 2px;
  color: #64748b;
  font-size: 8.5px;
}

.settings-menu-row {
  width: 100%;
  min-width: 0;
  min-height: 58px;
  border: 1px solid #2b394f;
  border-radius: 11px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  background: #0f172a;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.settings-menu-row:hover {
  border-color: #3d4d66;
  background: #162033;
}

.settings-menu-row:focus-visible {
  outline: 2px solid #22c55e;
  outline-offset: 2px;
}

.settings-menu-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(30, 41, 59, .9);
  font-size: 17px;
}

.settings-menu-copy {
  min-width: 0;
}

.settings-menu-copy strong,
.settings-menu-copy small {
  display: block;
  min-width: 0;
}

.settings-menu-copy strong {
  color: #e5e7eb;
  font-size: 10.5px;
  font-weight: 750;
}

.settings-menu-copy small {
  margin-top: 3px;
  color: #94a3b8;
  font-size: 8.5px;
  line-height: 1.35;
}

.settings-menu-arrow {
  justify-self: end;
  color: #64748b;
  font-size: 23px;
  line-height: 1;
}

.settings-category-session {
  padding-top: 2px;
}

.settings-menu-row-danger:hover {
  border-color: rgba(248, 113, 113, .42);
  background: rgba(127, 29, 29, .16);
}

.settings-menu-row-danger .settings-menu-copy strong {
  color: #fca5a5;
}

@media (max-width: 420px) {
  .sidebar-header {
    padding-left: 12px;
    padding-right: 7px;
  }

  .sidebar-actions .icon-btn {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .settings-hub-body {
    padding: 9px;
  }

  .settings-menu-row {
    grid-template-columns: 32px minmax(0, 1fr) 14px;
    gap: 7px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .settings-menu-icon {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }
}


/* ==========================================================
   v0.10.22 — WEBHOOK / MENSAJE RECIBIDO CON RETRASO
   ========================================================== */

.service-window-copy small {
  white-space: pre-line;
}

.inbound-delay-notice {
  margin: 6px 0 2px;
  padding: 5px 6px;
  border-top: 1px solid rgba(245, 158, 11, .22);
  display: grid;
  gap: 2px;
  color: #fbbf24;
  font-size: 8px;
  line-height: 1.35;
}

.inbound-delay-notice strong {
  color: #fcd34d;
  font-size: 8.5px;
  font-weight: 800;
}

.inbound-delay-notice span {
  color: rgba(253, 230, 138, .82);
}

.message.inbound .inbound-delay-notice {
  max-width: 100%;
}

@media (max-width: 760px) {
  .inbound-delay-notice {
    font-size: 7.8px;
  }

  .service-window-copy small {
    line-height: 1.45;
  }
}


/* ==========================================================
   v0.11.0 — ENSEÑAR AL BOT / BASE DE CONOCIMIENTO
   ========================================================== */
.bot-teach-section{overflow:hidden}.bot-knowledge-count{flex:0 0 auto;padding:4px 7px;border:1px solid rgba(34,197,94,.32);border-radius:999px;background:rgba(20,83,45,.15);color:#86efac;font-size:8.5px;font-weight:800;white-space:nowrap}.bot-teach-chat{max-height:260px;min-height:110px;margin-top:10px;padding:8px;overflow-y:auto;overscroll-behavior:contain;border:1px solid #334155;border-radius:11px;display:grid;align-content:start;gap:7px;background:rgba(2,6,23,.35)}.bot-teach-empty{padding:18px 12px;color:#64748b;font-size:9px;line-height:1.55;text-align:center}.bot-teach-message{width:fit-content;max-width:min(82%,520px);padding:7px 9px;border-radius:10px;display:grid;gap:3px;background:#1e293b}.bot-teach-message.is-user{justify-self:end;background:rgba(20,83,45,.72)}.bot-teach-message.is-assistant{justify-self:start}.bot-teach-message strong{color:#cbd5e1;font-size:8px}.bot-teach-message span{color:#f1f5f9;font-size:9.5px;line-height:1.45}.bot-teach-composer{margin-top:8px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:7px}.bot-teach-composer textarea{min-width:0;resize:vertical}.bot-teach-composer .primary-action{min-width:84px}.bot-teach-actions{min-height:27px;display:flex;align-items:center;justify-content:space-between;gap:9px}.bot-teach-actions .text-action{flex:0 0 auto;border:0;background:transparent;color:#94a3b8;font-size:8.5px;cursor:pointer}.bot-teach-actions .text-action:hover{color:#e2e8f0;text-decoration:underline}.bot-knowledge-heading{margin:13px 0 7px;padding-top:11px;border-top:1px solid #293548}.bot-knowledge-heading strong,.bot-knowledge-heading small{display:block}.bot-knowledge-heading strong{color:#e5e7eb;font-size:10.5px}.bot-knowledge-heading small{margin-top:2px;color:#64748b;font-size:8.5px}.bot-knowledge-list{display:grid;gap:8px}.bot-knowledge-empty{padding:14px 10px;border:1px dashed #334155;border-radius:9px;color:#64748b;font-size:9px;line-height:1.45;text-align:center}.bot-knowledge-card{min-width:0;padding:9px;border:1px solid #334155;border-radius:10px;background:rgba(15,23,42,.48)}.bot-knowledge-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.bot-knowledge-card-head>div:first-child{min-width:0}.bot-knowledge-card-head strong,.bot-knowledge-card-head small{display:block}.bot-knowledge-card-head strong{color:#f1f5f9;font-size:10.5px}.bot-knowledge-card-head small{margin-top:2px;color:#94a3b8;font-size:8.5px;line-height:1.4}.bot-knowledge-card-actions{flex:0 0 auto;display:flex;gap:4px}.bot-knowledge-card-actions button{min-height:27px;padding:0 7px;border:1px solid #334155;border-radius:6px;background:#111827;color:#cbd5e1;font-size:8px;cursor:pointer}.bot-knowledge-card-actions button:hover{border-color:#475569;background:#1e293b}.bot-knowledge-card-actions button.danger:hover{border-color:rgba(248,113,113,.45);color:#fca5a5}.bot-knowledge-card-block{margin-top:7px;display:grid;gap:2px}.bot-knowledge-card-block strong{color:#94a3b8;font-size:8px;text-transform:uppercase;letter-spacing:.02em}.bot-knowledge-card-block span{color:#cbd5e1;font-size:8.5px;line-height:1.35}.bot-knowledge-card-block em{color:#64748b;font-size:8px;font-style:normal}.bot-knowledge-triggers{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px}.bot-knowledge-triggers span{padding:3px 5px;border:1px solid #334155;border-radius:999px;background:#0f172a;color:#94a3b8;font-size:7.8px}.bot-knowledge-editor{margin-top:10px;padding:10px;border:1px solid rgba(59,130,246,.38);border-radius:11px;display:grid;gap:8px;background:rgba(30,58,138,.08)}.bot-knowledge-editor-title strong,.bot-knowledge-editor-title small{display:block}.bot-knowledge-editor-title strong{color:#dbeafe;font-size:10.5px}.bot-knowledge-editor-title small{margin-top:2px;color:#64748b;font-size:8px}.bot-knowledge-editor-actions{display:flex;justify-content:flex-end;gap:6px}.bot-knowledge-security-note{display:block;margin-top:10px;color:#fbbf24;font-size:8px;line-height:1.4}@media(max-width:620px){.bot-teach-composer{grid-template-columns:1fr}.bot-teach-composer .primary-action{width:100%}.bot-knowledge-card-head{flex-direction:column}.bot-knowledge-card-actions{width:100%}.bot-knowledge-card-actions button{flex:1 1 0}.bot-teach-message{max-width:92%}}


/* ==========================================================
   v0.11.1 — ROUTING LOCAL DEL CONOCIMIENTO
   ========================================================== */

.bot-knowledge-always-toggle {
  min-height: 49px;
  padding: 8px 9px;
  border: 1px solid #334155;
  border-radius: 9px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(15, 23, 42, .35);
  cursor: pointer;
}

.bot-knowledge-always-toggle input {
  margin-top: 3px;
}

.bot-knowledge-always-toggle span {
  min-width: 0;
}

.bot-knowledge-always-toggle strong,
.bot-knowledge-always-toggle small {
  display: block;
}

.bot-knowledge-always-toggle strong {
  color: #e5e7eb;
  font-size: 9.5px;
}

.bot-knowledge-always-toggle small {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 8px;
  line-height: 1.4;
}

.bot-knowledge-global-badge {
  width: fit-content;
  margin-top: 5px;
  padding: 2px 6px;
  border: 1px solid rgba(59, 130, 246, .35);
  border-radius: 999px;
  display: inline-block;
  background: rgba(30, 64, 175, .14);
  color: #93c5fd;
  font-size: 7.5px;
  font-style: normal;
  font-weight: 750;
}


/* ==========================================================
   v0.11.2 — ENSEÑANZA SEGURA / BORRADOR
   ========================================================== */

.bot-teach-draft-note {
  margin-top: 5px;
  color: #64748b;
  font-size: 7.8px;
  line-height: 1.35;
}

#botTeachInput:disabled {
  opacity: .78;
  cursor: wait;
}


/* ==========================================================
   v0.11.3 — BACKEND VISIBLE / FALLBACK AUTOMÁTICO
   ========================================================== */

.bot-teach-header-badges {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
}

.bot-runtime-version {
  padding: 4px 7px;
  border: 1px solid #475569;
  border-radius: 999px;
  background: rgba(15, 23, 42, .6);
  color: #94a3b8;
  font-size: 7.8px;
  font-weight: 750;
  white-space: nowrap;
}

.bot-runtime-version.is-current {
  border-color: rgba(34, 197, 94, .34);
  background: rgba(20, 83, 45, .14);
  color: #86efac;
}

.bot-runtime-version.is-stale {
  border-color: rgba(245, 158, 11, .5);
  background: rgba(120, 53, 15, .16);
  color: #fbbf24;
}

/* ==========================================================
   MULTICUENTA — WHATSAPP BUSINESS + CLOUD API
   ========================================================== */

.chat-title {
  min-width: 0;
}

.chat-account-badge,
.conv-account-chip,
.conv-archived-chip,
.message-source-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  font-weight: 750;
  letter-spacing: .01em;
}

.chat-account-badge {
  margin-top: 3px;
  padding: 2px 7px;
  border: 1px solid rgba(148, 163, 184, .28);
  background: rgba(15, 23, 42, .42);
  color: #cbd5e1;
  font-size: 9px;
}

.chat-account-badge[data-mode="coexistence"],
.conv-account-chip.coexistence {
  border-color: rgba(34, 197, 94, .35);
  background: rgba(22, 101, 52, .16);
  color: #bbf7d0;
}

.chat-account-badge[data-mode="cloud_api"],
.conv-account-chip.cloud_api {
  border-color: rgba(56, 189, 248, .35);
  background: rgba(3, 105, 161, .14);
  color: #bae6fd;
}

.conv-account-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.conv-account-chip,
.conv-archived-chip {
  padding: 2px 6px;
  border: 1px solid rgba(148, 163, 184, .2);
  background: rgba(15, 23, 42, .34);
  color: #aebdce;
  font-size: 8px;
}

.conv-archived-chip {
  color: #cbd5e1;
}

.send-account-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 5px 12px;
  border-top: 1px solid rgba(148, 163, 184, .14);
  border-bottom: 1px solid rgba(148, 163, 184, .14);
  background: rgba(15, 23, 42, .52);
}

.send-account-label,
.send-account-hint {
  color: #94a3b8;
  font-size: 10px;
}

.send-account-label {
  font-weight: 700;
  white-space: nowrap;
}

.send-account-select {
  min-width: 150px;
  max-width: 260px;
  height: 26px;
  padding: 0 28px 0 9px;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 8px;
  background: #172033;
  color: #e5e7eb;
  font-size: 10px;
  outline: none;
}

.send-account-select:focus {
  border-color: rgba(34, 197, 94, .6);
}

.send-account-hint {
  margin-left: auto;
  white-space: nowrap;
}

.message-source-badge {
  margin-bottom: 5px;
  padding: 2px 6px;
  border: 1px solid rgba(148, 163, 184, .2);
  background: rgba(15, 23, 42, .2);
  color: rgba(226, 232, 240, .72);
  font-size: 8px;
  line-height: 1.2;
}

.message.outbound.origin-business-app {
  box-shadow: inset 3px 0 0 rgba(34, 197, 94, .66);
}

.message.outbound.origin-panel {
  box-shadow: inset 3px 0 0 rgba(56, 189, 248, .66);
}

.message.outbound.origin-bot {
  box-shadow: inset 3px 0 0 rgba(168, 85, 247, .68);
}

.message-source-badge.business-app {
  color: #bbf7d0;
}

.message-source-badge.panel {
  color: #bae6fd;
}

.message-source-badge.bot {
  color: #e9d5ff;
}

.message-source-badge.customer {
  color: #cbd5e1;
}

@media (max-width: 760px) {
  .send-account-bar {
    gap: 6px;
    padding-inline: 8px;
  }

  .send-account-hint {
    display: none;
  }

  .send-account-select {
    min-width: 0;
    width: 100%;
  }
}

/* ==========================================================
   v0.12.0 — REDISEÑO PROFESIONAL / ARLEYN INBOX
   Capa visual sin cambiar la lógica existente.
   ========================================================== */

.professional-ui {
  --ui-bg: #08101c;
  --ui-bg-elevated: #0d1626;
  --ui-surface: #101b2d;
  --ui-surface-2: #142136;
  --ui-surface-3: #19283f;
  --ui-border: rgba(148, 163, 184, .14);
  --ui-border-strong: rgba(148, 163, 184, .24);
  --ui-text: #edf2f7;
  --ui-text-soft: #b6c2d2;
  --ui-muted: #7f8ea3;
  --ui-faint: #536176;
  --ui-accent: #24c875;
  --ui-accent-strong: #16a85d;
  --ui-accent-soft: rgba(36, 200, 117, .12);
  --ui-blue: #55b9f3;
  --ui-warning: #f5b942;
  --ui-danger: #fb7185;
  --ui-radius-xs: 7px;
  --ui-radius-sm: 10px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 18px;
  --ui-shadow: 0 16px 40px rgba(0, 0, 0, .28);
  color-scheme: dark;
  background: var(--ui-bg);
  color: var(--ui-text);
}

.professional-ui,
.professional-ui button,
.professional-ui input,
.professional-ui textarea,
.professional-ui select {
  font-family: Inter, "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

.professional-ui button,
.professional-ui input,
.professional-ui textarea,
.professional-ui select {
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease, opacity 140ms ease, transform 140ms ease;
}

.professional-ui button:focus-visible,
.professional-ui input:focus-visible,
.professional-ui textarea:focus-visible,
.professional-ui select:focus-visible {
  outline: 2px solid rgba(36, 200, 117, .72);
  outline-offset: 2px;
}

.professional-ui .ui-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
}

/* ===== Login ===== */
.professional-ui .login-screen {
  padding: 32px;
  background:
    radial-gradient(circle at 20% 15%, rgba(36, 200, 117, .09), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(85, 185, 243, .06), transparent 30%),
    var(--ui-bg);
}

.professional-ui .login-card {
  width: min(410px, 100%);
  padding: 34px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(20, 33, 54, .98), rgba(13, 22, 38, .98));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .38);
}

.professional-ui .brand-bubble {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(36, 200, 117, .22);
  border-radius: 14px;
  background: var(--ui-accent-soft);
  font-size: 24px;
}

.professional-ui .login-card h1 {
  margin: 18px 0 7px;
  color: var(--ui-text);
  font-size: 24px;
  letter-spacing: -.02em;
}

.professional-ui .login-card p {
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.5;
}

.professional-ui .login-card input {
  min-height: 46px;
  border-color: var(--ui-border-strong);
  border-radius: 11px;
  background: rgba(8, 16, 28, .74);
}

.professional-ui .login-card button[type="submit"] {
  min-height: 45px;
  border-radius: 11px;
  background: var(--ui-accent);
  color: #042c18;
  box-shadow: 0 8px 20px rgba(36, 200, 117, .16);
}

.professional-ui .login-card button[type="submit"]:hover {
  background: #31d985;
  transform: translateY(-1px);
}

/* ===== Estructura principal ===== */
.professional-ui .app {
  grid-template-columns: 336px minmax(0, 1fr);
  background: var(--ui-bg);
}

.professional-ui .sidebar {
  border-right: 1px solid var(--ui-border);
  background: var(--ui-bg-elevated);
  box-shadow: 8px 0 26px rgba(0, 0, 0, .08);
}

.professional-ui .sidebar-header,
.professional-ui .chat-header,
.professional-ui .selection-header {
  height: 70px;
  border-bottom: 1px solid var(--ui-border);
  background: rgba(13, 22, 38, .96);
}

.professional-ui .sidebar-header {
  padding: 0 14px;
}

.professional-ui .sidebar-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.professional-ui .workspace-mark {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(36, 200, 117, .22);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(36, 200, 117, .2), rgba(36, 200, 117, .07));
  color: #9cf3c3;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: -.02em;
}

.professional-ui .sidebar-brand-copy {
  min-width: 0;
}

.professional-ui .sidebar-brand-copy > strong {
  display: block;
  color: var(--ui-text);
  font-size: 14px;
  font-weight: 760;
  letter-spacing: -.01em;
}

.professional-ui #connectionState {
  position: relative;
  width: fit-content;
  max-width: 190px;
  margin-top: 4px;
  padding-left: 12px;
  color: var(--ui-muted);
  font-size: 10px;
  font-weight: 600;
}

.professional-ui #connectionState::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(36, 200, 117, .1);
}

.professional-ui .sidebar-actions {
  gap: 5px;
}

.professional-ui .sidebar-actions .icon-btn,
.professional-ui .icon-btn {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ui-text-soft);
  font-size: 18px;
}

.professional-ui .sidebar-actions .icon-btn:hover,
.professional-ui .icon-btn:hover {
  border-color: var(--ui-border);
  background: var(--ui-surface-2);
  color: var(--ui-text);
}

/* ===== Buscar + filtros ===== */
.professional-ui .search-wrap {
  padding: 12px 12px 8px;
}

.professional-ui .search-wrap input {
  height: 42px;
  padding: 0 13px 0 38px;
  border: 1px solid var(--ui-border);
  border-radius: 11px;
  background:
    linear-gradient(90deg, transparent 0),
    var(--ui-bg);
  color: var(--ui-text);
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .015);
}

.professional-ui .search-wrap {
  position: relative;
}

.professional-ui .search-wrap::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 25px;
  top: 27px;
  width: 13px;
  height: 13px;
  border: 1.6px solid var(--ui-muted);
  border-radius: 50%;
  pointer-events: none;
}

.professional-ui .search-wrap::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 36px;
  top: 39px;
  width: 6px;
  height: 1.6px;
  transform: rotate(45deg);
  transform-origin: left center;
  border-radius: 999px;
  background: var(--ui-muted);
  pointer-events: none;
}

.professional-ui .search-wrap input::placeholder {
  color: #66768c;
}

.professional-ui .search-wrap input:focus {
  border-color: rgba(36, 200, 117, .42);
  box-shadow: 0 0 0 3px rgba(36, 200, 117, .07);
}

.professional-ui .conversation-filter-shell {
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--ui-border);
}

.professional-ui .conversation-filters {
  gap: 5px;
}

.professional-ui .conversation-filter {
  min-height: 30px;
  padding: 0 10px;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ui-muted);
  font-size: 10.5px;
  font-weight: 650;
}

.professional-ui .conversation-filter:hover {
  border-color: transparent;
  background: rgba(148, 163, 184, .07);
  color: var(--ui-text-soft);
}

.professional-ui .conversation-filter.active {
  border-color: rgba(36, 200, 117, .16);
  background: rgba(36, 200, 117, .11);
  color: #a7f3cf;
  box-shadow: none;
}

.professional-ui .conversation-filter-more {
  width: 30px;
  padding: 0;
}

.professional-ui .conversation-filter-menu {
  padding: 6px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 12px;
  background: #111c2e;
  box-shadow: var(--ui-shadow);
}

.professional-ui .conversation-filter-menu button {
  min-height: 34px;
  border-radius: 8px;
  color: var(--ui-text-soft);
  font-size: 11px;
}

.professional-ui .conversation-filter-menu button:hover {
  background: var(--ui-surface-3);
  color: var(--ui-text);
}

/* ===== Lista de conversaciones ===== */
.professional-ui .conversation-list {
  height: calc(100dvh - 161px);
  padding: 4px 6px 12px;
  background: var(--ui-bg-elevated);
}

.professional-ui .conversation-list::-webkit-scrollbar {
  width: 5px;
}

.professional-ui .conversation-list::-webkit-scrollbar-thumb {
  border: 0;
  background: rgba(148, 163, 184, .23);
}

.professional-ui .conversation {
  min-height: 80px;
  margin: 2px 0;
  padding: 10px 9px 10px 10px;
  grid-template-columns: 42px minmax(0, 1fr) 43px;
  gap: 10px;
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  border-radius: 11px;
  background: transparent;
  box-shadow: none;
}

.professional-ui .conversation.control-bot,
.professional-ui .conversation.control-human,
.professional-ui .conversation.control-blocked {
  background: transparent;
}

.professional-ui .conversation.control-human {
  border-left-color: rgba(245, 185, 66, .72);
}

.professional-ui .conversation.control-blocked {
  border-left-color: rgba(251, 113, 133, .78);
}

.professional-ui .conversation:hover,
.professional-ui .conversation.control-bot:hover,
.professional-ui .conversation.control-human:hover,
.professional-ui .conversation.control-blocked:hover {
  border-color: rgba(148, 163, 184, .09);
  background: rgba(25, 40, 63, .55);
}

.professional-ui .conversation.active,
.professional-ui .conversation.control-bot.active,
.professional-ui .conversation.control-human.active,
.professional-ui .conversation.control-blocked.active {
  border-color: rgba(85, 185, 243, .14);
  border-left-color: var(--ui-accent);
  background: linear-gradient(90deg, rgba(36, 200, 117, .08), rgba(20, 33, 54, .72) 42%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .01);
}

.professional-ui .conversation .avatar-wrap {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
}

.professional-ui .conversation .avatar {
  border: 1px solid rgba(148, 163, 184, .11);
  background: linear-gradient(145deg, #22334c, #19273b);
  color: #dce8f5;
  font-size: 13px;
  font-weight: 780;
}

.professional-ui .conversation .retention-clock {
  right: -2px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  border-width: 2px;
  border-color: var(--ui-bg-elevated);
  background: #223047;
  color: #9aa8bb;
}

.professional-ui .conversation .retention-clock svg {
  width: 11px;
  height: 11px;
}

.professional-ui .conv-row {
  gap: 8px;
}

.professional-ui .conv-row strong {
  color: var(--ui-text);
  font-size: 12.2px;
  font-weight: 720;
  letter-spacing: -.005em;
}

.professional-ui .conv-time {
  color: var(--ui-faint);
  font-size: 9px;
  font-weight: 550;
}

.professional-ui .conv-preview {
  margin-top: 3px;
  color: #8d9bb0;
  font-size: 10.5px;
  line-height: 1.3;
}

.professional-ui .conv-account-row {
  gap: 4px;
  margin-top: 5px;
}

.professional-ui .conv-account-chip,
.professional-ui .conv-archived-chip,
.professional-ui .conv-label-mini,
.professional-ui .conv-service-window {
  min-height: 17px;
  padding: 2px 5px;
  border: 0;
  border-radius: 5px;
  font-size: 7.8px;
  font-weight: 700;
  line-height: 1.1;
}

.professional-ui .conv-account-chip {
  background: rgba(85, 185, 243, .08);
  color: #8dcdf3;
}

.professional-ui .conv-account-chip.coexistence {
  background: rgba(36, 200, 117, .09);
  color: #9be9bf;
}

.professional-ui .conv-archived-chip {
  background: rgba(148, 163, 184, .08);
  color: #9daabd;
}

.professional-ui .conv-control-status {
  min-height: 18px;
  margin-top: 5px;
  padding: 0;
  gap: 5px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
}

.professional-ui .conv-control-status strong {
  color: #8c9bb0;
  font-size: 8px;
  font-weight: 730;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.professional-ui .conv-control-status.human strong {
  color: #d7aa4e;
}

.professional-ui .conv-control-status.bot strong {
  color: #78cda0;
}

.professional-ui .conv-control-status-dot {
  width: 5px;
  height: 5px;
  flex-basis: 5px;
  box-shadow: none !important;
}

.professional-ui .conv-label-preview {
  gap: 3px;
  margin-top: 4px;
}

.professional-ui .conv-label-mini {
  max-width: 80px;
  background: rgba(148, 163, 184, .07);
  color: #8f9db0;
}

.professional-ui .conversation-side {
  min-width: 40px;
  gap: 7px;
}

.professional-ui .badge {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border: 0;
  background: var(--ui-accent);
  color: #032716;
  font-size: 9px;
  font-weight: 850;
  box-shadow: none;
}

.professional-ui .conversation-bot-switch {
  width: 42px;
  height: 24px;
  padding: 0 3px;
  grid-template-columns: 15px 1fr;
  border-color: rgba(148, 163, 184, .14);
  background: rgba(148, 163, 184, .07);
  opacity: .38;
}

.professional-ui .conversation:hover .conversation-bot-switch,
.professional-ui .conversation.active .conversation-bot-switch,
.professional-ui .conversation-bot-switch:focus-within,
.professional-ui .conversation-bot-switch.enabled {
  opacity: .92;
}

.professional-ui .conversation-bot-switch-icon {
  width: 15px;
  height: 15px;
  font-size: 9px;
  filter: saturate(.7);
}

.professional-ui .conversation-bot-switch i {
  width: 18px;
  height: 11px;
  background: #526176;
}

.professional-ui .conversation-bot-switch i::after {
  width: 7px;
  height: 7px;
}

.professional-ui .conversation-bot-switch.enabled i {
  background: var(--ui-accent);
}

.professional-ui .conversation-bot-switch.enabled i::after {
  transform: translateX(7px);
}

.professional-ui .conversation-filter-empty {
  min-height: 220px;
  color: var(--ui-muted);
}

.professional-ui .conversation-filter-empty-icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--ui-border);
  background: rgba(148, 163, 184, .05);
  color: var(--ui-muted);
  font-size: 19px;
}

/* ===== Chat / encabezado ===== */
.professional-ui .chat {
  background:
    radial-gradient(circle at 50% 30%, rgba(39, 58, 88, .08), transparent 36%),
    var(--ui-bg);
}

.professional-ui .chat-header {
  gap: 8px;
  padding: 0 14px 0 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .012);
}

.professional-ui .chat-header .chat-avatar-wrap {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
}

.professional-ui .chat-header .avatar {
  border: 1px solid rgba(148, 163, 184, .12);
  background: linear-gradient(145deg, #263852, #1a293d);
  font-size: 13px;
}

.professional-ui .chat-title {
  flex: 1 1 auto;
  min-width: 100px;
  margin-right: 8px;
}

.professional-ui .chat-title > strong {
  display: block;
  overflow: hidden;
  color: var(--ui-text);
  font-size: 13px;
  font-weight: 740;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.professional-ui .chat-title small {
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: 9.5px;
}

.professional-ui .chat-account-badge {
  margin-top: 3px;
  padding: 2px 6px;
  border: 0;
  border-radius: 5px;
  background: rgba(85, 185, 243, .08);
  color: #91ccee;
  font-size: 8px;
}

.professional-ui .header-action,
.professional-ui .retention-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ui-muted);
  gap: 6px;
  font-size: 10px;
  font-weight: 650;
}

.professional-ui .header-action:hover:not(:disabled),
.professional-ui .retention-btn:hover:not(:disabled) {
  border-color: var(--ui-border);
  background: var(--ui-surface-2);
  color: var(--ui-text-soft);
}

.professional-ui .header-action:disabled,
.professional-ui .retention-btn:disabled {
  opacity: .28;
}

.professional-ui .header-action .ui-icon {
  width: 17px;
  height: 17px;
}

.professional-ui .retention-btn {
  gap: 3px;
}

.professional-ui .bot-toggle {
  min-height: 36px;
  padding: 3px 6px 3px 8px;
  border-color: var(--ui-border-strong);
  border-radius: 9px;
  background: rgba(148, 163, 184, .06);
}

.professional-ui .chat-control-status {
  min-width: 42px;
  color: var(--ui-muted);
  font-size: 8.5px;
  letter-spacing: .04em;
}

.professional-ui .bot-toggle.bot-active {
  border-color: rgba(36, 200, 117, .28);
  background: rgba(36, 200, 117, .08);
  color: #92e7b8;
}

.professional-ui .bot-toggle.human-control {
  border-color: rgba(245, 185, 66, .28);
  background: rgba(245, 185, 66, .07);
  color: #e5bd68;
}

.professional-ui .chat.empty .chat-header .header-action,
.professional-ui .chat.empty .chat-header .retention-wrap,
.professional-ui .chat.empty .chat-header #headerBotControl {
  visibility: hidden;
  pointer-events: none;
}

.professional-ui .chat.empty .chat-header .chat-avatar-wrap {
  opacity: .65;
}

/* ===== Estado vacío ===== */
.professional-ui .empty-state {
  width: min(620px, calc(100% - 48px));
  height: auto;
  margin: auto;
  padding: 40px 28px;
  place-items: center;
  border: 0;
  border-radius: 24px;
  color: var(--ui-muted);
}

.professional-ui .empty-state-visual {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(36, 200, 117, .14);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(36, 200, 117, .11), rgba(85, 185, 243, .05));
  color: #84d9ad;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
}

.professional-ui .empty-state > .empty-state-visual {
  font-size: inherit;
}

.professional-ui .empty-state-visual svg {
  width: 34px;
  height: 34px;
}

.professional-ui .empty-state h2 {
  margin: 18px 0 7px;
  color: var(--ui-text);
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.02em;
}

.professional-ui .empty-state p {
  max-width: 460px;
  margin: 0;
  color: var(--ui-muted);
  font-size: 11.5px;
  line-height: 1.6;
}

.professional-ui .empty-state-features {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px 14px;
  color: #718096;
  font-size: 9px;
  font-weight: 600;
}

.professional-ui .empty-state-features span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.professional-ui .empty-state-features i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ui-accent);
  opacity: .65;
}

.professional-ui .chat.empty .composer-shell {
  display: none;
}

/* ===== Mensajes ===== */
.professional-ui .messages {
  padding: 22px clamp(18px, 3.2vw, 46px);
  scrollbar-color: rgba(148, 163, 184, .22) transparent;
  background:
    linear-gradient(rgba(8, 16, 28, .965), rgba(8, 16, 28, .965)),
    radial-gradient(circle at 20% 30%, rgba(85, 185, 243, .08), transparent 32%);
}

.professional-ui .messages::-webkit-scrollbar {
  width: 5px;
}

.professional-ui .message-row {
  margin: 3px 0;
}

.professional-ui .message {
  padding: 7px 9px 6px;
  border: 1px solid rgba(255, 255, 255, .025);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  font-size: 12.5px;
  line-height: 1.36;
}

.professional-ui .message.inbound {
  border-top-left-radius: 4px;
  background: #172336;
}

.professional-ui .message.outbound {
  border-top-right-radius: 4px;
  background: #125238;
}

.professional-ui .message.text-message {
  max-width: min(620px, 72%);
  column-gap: 9px;
}

.professional-ui .message-meta {
  color: rgba(191, 205, 220, .58);
  font-size: 8.5px;
}

.professional-ui .message-source-badge {
  margin-bottom: 4px;
  padding: 2px 5px;
  border: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, .035);
  color: rgba(226, 232, 240, .6);
  font-size: 7.5px;
  font-weight: 700;
}

.professional-ui .message.outbound.origin-business-app,
.professional-ui .message.outbound.origin-panel,
.professional-ui .message.outbound.origin-bot {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.professional-ui .message.outbound.origin-business-app {
  border-left: 2px solid rgba(36, 200, 117, .58);
}

.professional-ui .message.outbound.origin-panel {
  border-left: 2px solid rgba(85, 185, 243, .58);
}

.professional-ui .message.outbound.origin-bot {
  border-left: 2px solid rgba(180, 129, 255, .58);
}

.professional-ui .scroll-bottom-btn {
  border: 1px solid var(--ui-border-strong);
  background: #152238;
  color: var(--ui-text-soft);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}

/* ===== Compositor ===== */
.professional-ui .composer-shell {
  padding: 0 18px 14px;
  border: 0;
  background: linear-gradient(180deg, rgba(8, 16, 28, 0), rgba(8, 16, 28, .96) 24%);
}

.professional-ui .composer-shell .composer {
  min-height: 50px;
  padding: 5px 6px 5px 8px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 15px;
  background: #121f33;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

.professional-ui .composer-shell .composer:focus-within {
  border-color: rgba(36, 200, 117, .32);
  box-shadow: 0 0 0 3px rgba(36, 200, 117, .05), 0 10px 28px rgba(0, 0, 0, .18);
}

.professional-ui .composer textarea {
  min-height: 38px;
  padding: 9px 7px;
  background: transparent;
  color: var(--ui-text);
  font-size: 12px;
  line-height: 1.4;
}

.professional-ui .composer textarea::placeholder {
  color: #607086;
}

.professional-ui .attach-btn,
.professional-ui .emoji-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: transparent;
  color: #8190a4;
  font-size: 17px;
}

.professional-ui .attach-btn:hover:not(:disabled),
.professional-ui .emoji-btn:hover:not(:disabled) {
  background: rgba(148, 163, 184, .07);
  color: var(--ui-text-soft);
}

.professional-ui #sendBtn {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--ui-accent);
  color: #032716;
  font-size: 17px;
  box-shadow: 0 7px 18px rgba(36, 200, 117, .13);
}

.professional-ui #sendBtn:hover:not(:disabled) {
  background: #31d985;
  transform: translateY(-1px);
}

.professional-ui .send-account-bar,
.professional-ui .service-window-banner,
.professional-ui .reply-composer-bar,
.professional-ui .attachment-tray {
  width: calc(100% - 6px);
  margin: 0 auto;
  border: 1px solid var(--ui-border);
  border-bottom: 0;
  background: rgba(16, 27, 45, .98);
}

.professional-ui .send-account-bar {
  min-height: 36px;
  padding: 5px 10px;
  border-radius: 11px 11px 0 0;
}

.professional-ui .send-account-label,
.professional-ui .send-account-hint {
  color: var(--ui-muted);
  font-size: 9px;
}

.professional-ui .send-account-select {
  height: 27px;
  border-color: var(--ui-border);
  border-radius: 7px;
  background: #18263b;
  color: var(--ui-text-soft);
  font-size: 9px;
}

.professional-ui .service-window-banner {
  padding: 8px 10px;
  color: var(--ui-text-soft);
}

/* ===== Drawer de contacto ===== */
.professional-ui .contact-drawer {
  width: min(380px, 100vw);
  grid-template-rows: 70px minmax(0, 1fr);
  border-left: 1px solid var(--ui-border-strong);
  background: #0e1929;
  box-shadow: -24px 0 70px rgba(0, 0, 0, .34);
}

.professional-ui .contact-drawer-header {
  padding: 0 16px;
  border-color: var(--ui-border);
  background: #101c2e;
}

.professional-ui .contact-drawer-header strong {
  font-size: 13px;
  font-weight: 740;
}

.professional-ui .contact-drawer-content {
  padding: 18px;
}

.professional-ui .contact-profile-summary {
  padding: 10px 0 22px;
  border-color: var(--ui-border);
}

.professional-ui .large-avatar-wrap {
  width: 72px;
  height: 72px;
}

.professional-ui .large-avatar-wrap .avatar {
  border: 1px solid var(--ui-border-strong);
  background: linear-gradient(145deg, #263a56, #1a293f);
}

.professional-ui .contact-profile-summary > strong {
  font-size: 15px;
  font-weight: 740;
}

.professional-ui .contact-profile-summary small {
  color: var(--ui-muted);
  font-size: 10px;
}

.professional-ui .contact-editor-section {
  padding: 18px 0;
  border-color: var(--ui-border);
}

.professional-ui .contact-editor-section > label {
  color: var(--ui-text-soft);
  font-size: 10px;
  font-weight: 720;
  text-transform: uppercase;
  letter-spacing: .055em;
}

.professional-ui .contact-editor-section textarea,
.professional-ui .contact-editor-section input {
  border-color: var(--ui-border-strong);
  border-radius: 10px;
  background: #0a1422;
  color: var(--ui-text);
  font-size: 11px;
}

.professional-ui .contact-editor-section > small,
.professional-ui .profile-save-status {
  color: var(--ui-muted);
  font-size: 9px;
}

.professional-ui .label-input-row button,
.professional-ui .primary-action,
.professional-ui .secondary-action {
  border-radius: 9px;
}

/* ===== Menús, modales y configuración ===== */
.professional-ui .modal {
  background: rgba(3, 8, 15, .72);
  backdrop-filter: blur(8px);
}

.professional-ui .modal-card,
.professional-ui .settings-hub-card {
  border: 1px solid var(--ui-border-strong);
  border-radius: 18px;
  background: #0f1a2b;
  box-shadow: 0 34px 100px rgba(0, 0, 0, .48);
}

.professional-ui .settings-hub-header,
.professional-ui .modal-header {
  border-color: var(--ui-border);
  background: rgba(16, 28, 46, .96);
}

.professional-ui .settings-hub-header strong,
.professional-ui .modal-header strong {
  color: var(--ui-text);
  font-size: 13px;
}

.professional-ui .settings-hub-header small,
.professional-ui .modal-header small {
  color: var(--ui-muted);
  font-size: 9px;
}

.professional-ui .settings-hub-body {
  padding: 16px;
}

.professional-ui .settings-category-heading {
  margin: 2px 3px 8px;
}

.professional-ui .settings-category-heading strong {
  color: var(--ui-text-soft);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.professional-ui .settings-category-heading small {
  color: var(--ui-faint);
  font-size: 8px;
}

.professional-ui .settings-menu-row {
  min-height: 62px;
  border-color: var(--ui-border);
  border-radius: 12px;
  background: #111f32;
}

.professional-ui .settings-menu-row:hover {
  border-color: var(--ui-border-strong);
  background: #16263c;
  transform: translateY(-1px);
}

.professional-ui .settings-menu-icon {
  border: 1px solid rgba(148, 163, 184, .08);
  background: rgba(148, 163, 184, .06);
}

.professional-ui .settings-menu-copy strong {
  color: var(--ui-text);
  font-size: 10.5px;
}

.professional-ui .settings-menu-copy small {
  color: var(--ui-muted);
}

.professional-ui .settings-menu-arrow {
  color: var(--ui-faint);
}

.professional-ui .retention-menu,
.professional-ui .attach-menu,
.professional-ui .emoji-picker,
.professional-ui .reaction-picker {
  border-color: var(--ui-border-strong);
  background: #111d30;
  box-shadow: var(--ui-shadow);
}

/* ===== Scrollbars generales ===== */
.professional-ui * {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .22) transparent;
}

.professional-ui *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.professional-ui *::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(148, 163, 184, .2);
}

.professional-ui *::-webkit-scrollbar-track {
  background: transparent;
}

/* ===== Responsive ===== */
@media (max-width: 1240px) {
  .professional-ui .app {
    grid-template-columns: 310px minmax(0, 1fr);
  }

  .professional-ui .header-action span {
    display: none;
  }

  .professional-ui .header-action {
    width: 36px;
    padding: 0;
    justify-content: center;
  }

  .professional-ui .conversation {
    grid-template-columns: 40px minmax(0, 1fr) 38px;
    gap: 8px;
  }
}

@media (max-width: 900px) {
  .professional-ui .app {
    grid-template-columns: 292px minmax(0, 1fr);
  }

  .professional-ui .conversation-bot-switch {
    opacity: .82;
  }

  .professional-ui .messages {
    padding-inline: 16px;
  }
}

@media (max-width: 760px) {
  .professional-ui .app {
    grid-template-columns: 1fr;
  }

  .professional-ui .sidebar-header,
  .professional-ui .chat-header,
  .professional-ui .selection-header {
    height: 62px;
  }

  .professional-ui .conversation-list {
    height: calc(100dvh - 153px);
  }

  .professional-ui .conversation {
    min-height: 74px;
  }

  .professional-ui .message.text-message {
    max-width: 86%;
  }

  .professional-ui .composer-shell {
    padding-inline: 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .professional-ui .empty-state-features {
    display: none;
  }
}

@media (hover: none) {
  .professional-ui .conversation-bot-switch {
    opacity: .88;
  }
}

.professional-ui #connectionState::before {
  background: #64748b;
  box-shadow: 0 0 0 3px rgba(100, 116, 139, .1);
}

.professional-ui #connectionState[data-status="online"]::before {
  background: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(36, 200, 117, .1);
}

.professional-ui #connectionState[data-status="reconnecting"]::before {
  background: var(--ui-warning);
  box-shadow: 0 0 0 3px rgba(245, 185, 66, .1);
}

.professional-ui #connectionState[data-status="offline"]::before {
  background: var(--ui-danger);
  box-shadow: 0 0 0 3px rgba(251, 113, 133, .1);
}

/* ============================================================
   CONTACTOS + ARCHIVADOS — UI 2026-09
   ============================================================ */

.professional-ui .sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.professional-ui .conversation-list {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

.professional-ui .archived-shortcut {
  width: calc(100% - 18px);
  min-height: 52px;
  margin: 7px 9px 3px;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--ui-text-soft);
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.professional-ui .archived-shortcut:hover {
  border-color: var(--ui-border);
  background: rgba(148, 163, 184, .055);
  color: var(--ui-text);
}

.professional-ui .archived-shortcut.active {
  border-color: rgba(36, 200, 117, .18);
  background: rgba(36, 200, 117, .09);
  color: #c2f8da;
}

.professional-ui .archived-shortcut-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(148, 163, 184, .08);
  color: #91a2b9;
}

.professional-ui .archived-shortcut.active .archived-shortcut-icon {
  background: rgba(36, 200, 117, .13);
  color: #78e4ad;
}

.professional-ui .archived-shortcut-icon svg {
  width: 18px;
  height: 18px;
}

.professional-ui .archived-shortcut-copy {
  min-width: 0;
}

.professional-ui .archived-shortcut-copy strong,
.professional-ui .archived-shortcut-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.professional-ui .archived-shortcut-copy strong {
  font-size: 11.5px;
  font-weight: 720;
}

.professional-ui .archived-shortcut-copy small {
  margin-top: 2px;
  color: var(--ui-faint);
  font-size: 8.5px;
}

.professional-ui .archived-shortcut-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, .10);
  border-radius: 999px;
  background: rgba(148, 163, 184, .08);
  color: var(--ui-muted);
  font-size: 9.5px;
  font-weight: 750;
}

.professional-ui .archived-shortcut-count.empty {
  opacity: .5;
}

.professional-ui .avatar,
.professional-ui .contact-avatar-preview {
  position: relative;
  overflow: hidden;
}

.professional-ui .avatar-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.professional-ui .contact-avatar-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.professional-ui .conv-row > strong {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 5px;
}

.professional-ui .conv-note-marker {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-grid;
  place-items: center;
  border-radius: 5px;
  background: rgba(56, 189, 248, .08);
  color: #72c9f4;
}

.professional-ui .conv-note-marker svg {
  width: 12px;
  height: 12px;
}

.professional-ui .contact-profile-editor {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ui-border);
}

.professional-ui .contact-photo-editor {
  display: grid;
  justify-items: center;
  gap: 9px;
}

.professional-ui .contact-photo-actions {
  min-height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.professional-ui .compact-action {
  min-height: 29px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 9.5px;
}

.professional-ui .text-action {
  padding: 5px 7px;
  border: 0;
  background: transparent;
  color: var(--ui-muted);
  font-size: 9.5px;
  font-weight: 650;
  cursor: pointer;
}

.professional-ui .text-action:hover {
  color: var(--ui-text);
}

.professional-ui .danger-text-action {
  color: #f59aa9;
}

.professional-ui .contact-profile-name-block {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 2px;
}

.professional-ui .contact-profile-name-block strong {
  max-width: 245px;
  overflow: hidden;
  color: var(--ui-text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.professional-ui .contact-profile-name-block small {
  color: var(--ui-muted);
  font-size: 9.5px;
}

.professional-ui .contact-editor-section input[type="text"] {
  width: 100%;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--ui-border);
  border-radius: 9px;
  outline: none;
  background: var(--ui-bg);
  color: var(--ui-text);
}

.professional-ui .contact-editor-section input[type="text"]:focus,
.professional-ui .contact-editor-section textarea:focus {
  border-color: rgba(36, 200, 117, .40);
  box-shadow: 0 0 0 3px rgba(36, 200, 117, .06);
}

.professional-ui .label-color-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.professional-ui .label-color-row > span {
  color: var(--ui-faint);
  font-size: 9px;
  font-weight: 650;
}

.professional-ui .label-color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.professional-ui .label-color-swatch {
  --label-color: #94a3b8;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--label-color);
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04);
}

.professional-ui .label-color-swatch[data-label-color="emerald"] { --label-color: #34d399; }
.professional-ui .label-color-swatch[data-label-color="cyan"] { --label-color: #22d3ee; }
.professional-ui .label-color-swatch[data-label-color="blue"] { --label-color: #60a5fa; }
.professional-ui .label-color-swatch[data-label-color="violet"] { --label-color: #a78bfa; }
.professional-ui .label-color-swatch[data-label-color="amber"] { --label-color: #fbbf24; }
.professional-ui .label-color-swatch[data-label-color="rose"] { --label-color: #fb7185; }

.professional-ui .label-color-swatch.selected {
  border-color: #e5eef9;
  box-shadow: 0 0 0 2px rgba(229,238,249,.13);
}

.professional-ui .label-chip,
.professional-ui .conv-label-mini {
  --label-text: #b4c1d1;
  --label-bg: rgba(148, 163, 184, .08);
  --label-border: rgba(148, 163, 184, .12);
  border-color: var(--label-border) !important;
  background: var(--label-bg) !important;
  color: var(--label-text) !important;
}

.professional-ui .label-tone-emerald { --label-text:#77e3ac; --label-bg:rgba(52,211,153,.09); --label-border:rgba(52,211,153,.16); }
.professional-ui .label-tone-cyan { --label-text:#67dff0; --label-bg:rgba(34,211,238,.08); --label-border:rgba(34,211,238,.15); }
.professional-ui .label-tone-blue { --label-text:#8bbcf9; --label-bg:rgba(96,165,250,.09); --label-border:rgba(96,165,250,.16); }
.professional-ui .label-tone-violet { --label-text:#c0aaf8; --label-bg:rgba(167,139,250,.09); --label-border:rgba(167,139,250,.16); }
.professional-ui .label-tone-amber { --label-text:#f3cc6a; --label-bg:rgba(251,191,36,.08); --label-border:rgba(251,191,36,.15); }
.professional-ui .label-tone-rose { --label-text:#f59aaa; --label-bg:rgba(251,113,133,.08); --label-border:rgba(251,113,133,.15); }

.professional-ui .label-empty-state {
  color: var(--ui-faint);
  font-size: 9.5px;
}

.professional-ui .context-menu-svg {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
}

.professional-ui .context-menu-svg svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 760px) {
  .professional-ui .conversation-list {
    height: auto;
  }

  .professional-ui .archived-shortcut-copy small {
    display: none;
  }
}

.professional-ui .label-chip.selected-for-color {
  box-shadow: 0 0 0 2px rgba(226, 232, 240, .14);
}

.professional-ui .label-chip .label-chip-name {
  max-width: 180px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.professional-ui .label-chip .label-chip-name:hover {
  color: #fff;
}

/* ===== Rail lateral, inspirado en la navegación de WhatsApp Desktop ===== */
.professional-ui .app {
  grid-template-columns: 58px 320px minmax(0, 1fr);
}

.professional-ui .workspace-rail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 7px;
  border-right: 1px solid var(--ui-border);
  background: #0b1422;
}

.professional-ui .workspace-rail-main,
.professional-ui .workspace-rail-bottom {
  display: grid;
  gap: 7px;
}

.professional-ui .workspace-rail-btn {
  position: relative;
  width: 43px;
  height: 43px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #7f8da1;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}

.professional-ui .workspace-rail-btn:hover {
  border-color: rgba(148, 163, 184, .09);
  background: rgba(148, 163, 184, .065);
  color: #c8d3df;
}

.professional-ui .workspace-rail-btn.active {
  border-color: rgba(36, 200, 117, .16);
  background: rgba(36, 200, 117, .11);
  color: #8ce9b8;
}

.professional-ui .workspace-rail-btn.active::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 10px;
  width: 3px;
  height: 23px;
  border-radius: 0 3px 3px 0;
  background: var(--ui-accent);
}

.professional-ui .workspace-rail-btn svg {
  width: 21px;
  height: 21px;
}

.professional-ui .workspace-rail-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border: 2px solid #0b1422;
  border-radius: 999px;
  background: var(--ui-accent);
  color: #052e1c;
  font-size: 7.5px;
  font-weight: 850;
  line-height: 1;
}

@media (max-width: 1240px) {
  .professional-ui .app {
    grid-template-columns: 54px 300px minmax(0, 1fr);
  }

  .professional-ui .workspace-rail {
    padding-inline: 5px;
  }
}

@media (max-width: 900px) {
  .professional-ui .app {
    grid-template-columns: 52px 282px minmax(0, 1fr);
  }

  .professional-ui .workspace-rail-btn {
    width: 41px;
    height: 41px;
  }
}

@media (max-width: 760px) {
  .professional-ui .workspace-rail {
    display: none;
  }

  .professional-ui .app {
    grid-template-columns: 1fr;
  }
}

/* Configuración vive en el rail; en la cabecera dejamos sólo la acción contextual. */
.professional-ui .sidebar-actions #settingsBtn {
  display: none;
}

.professional-ui .label-chip .label-chip-name {
  width: auto;
  height: auto;
  min-width: 0;
  border-radius: 0;
  background: transparent;
}

.professional-ui .archive-menu-fallback {
  display: none;
}

@media (max-width: 760px) {
  .professional-ui .archive-menu-fallback {
    display: flex;
  }
}
.professional-ui .label-chip .label-chip-name:hover {
  background: transparent;
}
@media (max-width: 760px) {
  .professional-ui .sidebar-actions #settingsBtn {
    display: inline-grid;
  }
}

/* ===== Ajustes WhatsApp-like: actividad en archivados y catálogo de etiquetas ===== */
.professional-ui .workspace-rail-activity-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border: 2px solid #0b1422;
  border-radius: 50%;
  background: var(--ui-accent);
  box-shadow: 0 0 0 1px rgba(36, 200, 117, .14);
}

.professional-ui .label-filter-bar {
  display: flex;
  gap: 6px;
  padding: 0 10px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.professional-ui .label-filter-bar::-webkit-scrollbar {
  display: none;
}

.professional-ui .label-filter-chip {
  --label-text: #b4c1d1;
  --label-bg: rgba(148, 163, 184, .07);
  --label-border: rgba(148, 163, 184, .12);
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--label-border);
  border-radius: 999px;
  background: var(--label-bg);
  color: var(--label-text);
  font-size: 9.5px;
  font-weight: 680;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.professional-ui .label-filter-chip:hover {
  border-color: color-mix(in srgb, var(--label-text) 28%, transparent);
}

.professional-ui .label-filter-chip.active {
  box-shadow: 0 0 0 2px rgba(226, 232, 240, .08);
  border-color: color-mix(in srgb, var(--label-text) 36%, transparent);
}

.professional-ui .contact-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.professional-ui .contact-section-heading > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.professional-ui .contact-section-heading strong {
  color: var(--ui-text);
  font-size: 11px;
  font-weight: 750;
}

.professional-ui .contact-section-heading small {
  color: var(--ui-faint);
  font-size: 9px;
  line-height: 1.35;
}

.professional-ui .label-catalog-picker,
.professional-ui .label-create-block {
  display: grid;
  gap: 6px;
}

.professional-ui .label-create-block {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, .08);
}

.professional-ui .label-catalog-picker > label,
.professional-ui .label-create-block > label {
  color: var(--ui-faint);
  font-size: 9px;
  font-weight: 680;
}

.professional-ui .label-picker-row,
.professional-ui .label-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.professional-ui .label-picker-row select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 34px 0 11px;
  border: 1px solid var(--ui-border);
  border-radius: 9px;
  outline: none;
  background: #0b1422;
  color: var(--ui-text);
  font-size: 10px;
  cursor: pointer;
}

.professional-ui .label-picker-row select:focus {
  border-color: rgba(36, 200, 117, .40);
  box-shadow: 0 0 0 3px rgba(36, 200, 117, .06);
}

.professional-ui .label-picker-row button,
.professional-ui .label-input-row button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 9px;
  background: rgba(148, 163, 184, .07);
  color: #d7e0eb;
  font-size: 9.5px;
  font-weight: 720;
  cursor: pointer;
}

.professional-ui .label-picker-row button:hover,
.professional-ui .label-input-row button:hover {
  border-color: rgba(36, 200, 117, .22);
  background: rgba(36, 200, 117, .08);
  color: #9ce9bf;
}

.professional-ui .label-picker-row button:disabled,
.professional-ui .label-input-row button:disabled {
  opacity: .45;
  cursor: default;
}

.professional-ui .label-color-row {
  justify-content: space-between;
}

.professional-ui .label-chips {
  margin-top: 10px;
}


/* ==========================================================
   v0.12.1 — APARIENCIA / ESCALA TIPOGRÁFICA
   ========================================================== */
:root {
  --app-text-scale: 1.05;
  --chat-message-font-size: 16px;
  --app-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html, body, button, input, textarea, select { font-family: var(--app-font-family) !important; }
.professional-ui .sidebar-brand-copy strong,
.professional-ui .settings-menu-copy strong,
.professional-ui .settings-category-heading strong,
.professional-ui .modal-header strong { font-size: calc(12px * var(--app-text-scale)); }
.professional-ui .sidebar-brand-copy small,
.professional-ui .settings-menu-copy small,
.professional-ui .settings-category-heading small,
.professional-ui .modal-header small { font-size: calc(9.5px * var(--app-text-scale)); }
.professional-ui .search-wrap input { font-size: calc(11.5px * var(--app-text-scale)); }
.professional-ui .conversation-filter,
.professional-ui .conversation-filter-menu button { font-size: calc(9.5px * var(--app-text-scale)); }
.professional-ui .conv-row strong { font-size: calc(13px * var(--app-text-scale)); }
.professional-ui .conv-preview { font-size: calc(11.2px * var(--app-text-scale)); }
.professional-ui .conv-time { font-size: calc(9.2px * var(--app-text-scale)); }
.professional-ui .conv-account-chip, .professional-ui .conv-archived-chip, .professional-ui .conv-label-mini, .professional-ui .conv-service-window { font-size: calc(8px * var(--app-text-scale)); }
.professional-ui .conv-control-status strong { font-size: calc(8.2px * var(--app-text-scale)); }
.professional-ui .chat-title > strong { font-size: calc(13.5px * var(--app-text-scale)); }
.professional-ui .chat-title small { font-size: calc(10px * var(--app-text-scale)); }
.professional-ui .chat-account-badge, .professional-ui .header-action, .professional-ui .retention-btn, .professional-ui .chat-control-status { font-size: calc(9px * var(--app-text-scale)); }
.professional-ui .message { font-size: var(--chat-message-font-size) !important; line-height: 1.38; }
.professional-ui .message-meta { font-size: calc(var(--chat-message-font-size) * .67); }
.professional-ui .message-source-badge { font-size: calc(var(--chat-message-font-size) * .58); }
.professional-ui .message-reply-content strong, .professional-ui .message-reply-content span { font-size: calc(var(--chat-message-font-size) * .78) !important; }
.professional-ui .composer textarea { font-size: calc(var(--chat-message-font-size) * .95) !important; line-height: 1.42; }
.professional-ui .contact-drawer, .professional-ui .contact-editor-section, .professional-ui .label-catalog-filter-bar, .professional-ui .conversation-filter-empty { font-size: calc(12px * var(--app-text-scale)); }
.appearance-settings-card { width:min(620px,calc(100vw - 28px)); max-height:min(760px,calc(100dvh - 28px)); overflow:hidden; border:1px solid var(--ui-border-strong,#2b394d); border-radius:18px; background:var(--ui-bg-elevated,#101a2a); color:var(--ui-text,#e8eef6); box-shadow:0 28px 80px rgba(0,0,0,.46); }
.appearance-settings-body { max-height:calc(100dvh - 190px); padding:18px; overflow-y:auto; display:grid; gap:13px; }
.appearance-setting-block { padding:15px; border:1px solid var(--ui-border,#253349); border-radius:13px; background:rgba(148,163,184,.035); }
.appearance-setting-heading, .appearance-select-label { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.appearance-setting-heading > div, .appearance-select-label > span { min-width:0; display:grid; gap:3px; }
.appearance-setting-heading strong, .appearance-select-label strong { color:var(--ui-text,#e8eef6); font-size:13px; }
.appearance-setting-heading small, .appearance-select-label small { color:var(--ui-muted,#8796aa); font-size:10.5px; line-height:1.4; }
.appearance-value { flex:0 0 auto; min-width:52px; padding:5px 8px; border-radius:8px; background:rgba(36,200,117,.09); color:#9be9bf; font-size:11px; font-weight:750; text-align:center; }
.appearance-range { width:100%; margin:16px 0 5px; accent-color:var(--ui-accent,#24c875); cursor:pointer; }
.appearance-range-labels { display:flex; justify-content:space-between; color:var(--ui-faint,#64748b); font-size:9px; }
.appearance-select-label select { width:min(230px,45%); min-height:38px; padding:0 10px; border:1px solid var(--ui-border-strong,#334155); border-radius:9px; background:#0d1727; color:var(--ui-text,#e8eef6); outline:none; }
.appearance-preview-card { padding:14px; border:1px solid var(--ui-border,#253349); border-radius:13px; background:linear-gradient(rgba(8,16,28,.96),rgba(8,16,28,.96)),radial-gradient(circle at 20% 30%,rgba(85,185,243,.08),transparent 36%); }
.appearance-preview-label { display:block; margin-bottom:11px; color:var(--ui-muted,#8796aa); font-size:calc(9px * var(--app-text-scale)); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.appearance-preview-chat { display:grid; gap:7px; }
.appearance-preview-message { width:fit-content; max-width:82%; padding:7px 9px; border-radius:10px; color:#eef4fa; font-size:var(--chat-message-font-size); line-height:1.38; }
.appearance-preview-message.inbound { justify-self:start; border-top-left-radius:4px; background:#172336; }
.appearance-preview-message.outbound { justify-self:end; border-top-right-radius:4px; background:#125238; }
.appearance-settings-actions { padding:12px 18px 16px; display:flex; justify-content:flex-end; gap:9px; border-top:1px solid var(--ui-border,#253349); }
.settings-menu-icon { font-family:var(--app-font-family) !important; }
@media (max-width:620px) { .appearance-setting-heading, .appearance-select-label { align-items:flex-start; flex-direction:column; } .appearance-select-label select { width:100%; } }

/* ===== Estado local de atención: leído/no leído y archivos revisados ===== */
.professional-ui .message-row.local-unread-message .message.inbound {
  box-shadow:
    inset 3px 0 0 rgba(56, 189, 248, .82),
    0 8px 22px rgba(2, 8, 23, .16);
}

.professional-ui .message-row.local-unread-message .message.inbound::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .12);
}

.professional-ui .message.inbound.media-opened-local {
  background:
    linear-gradient(180deg, rgba(18, 52, 68, .96), rgba(20, 43, 58, .96));
  border-color: rgba(34, 211, 238, .24);
}

.professional-ui .message-row.media-opened-local .document-card,
.professional-ui .message-row.media-opened-local .media-preview-image,
.professional-ui .message-row.media-opened-local .video-player,
.professional-ui .message-row.media-opened-local .audio-player {
  filter: saturate(.94);
}

.professional-ui .message-row.selection-selectable {
  cursor: pointer;
}

.professional-ui .selection-header #markSelectedReadBtn,
.professional-ui .selection-header #markSelectedUnreadBtn {
  min-width: 88px;
}

.professional-ui .selection-header #markSelectedUnreadBtn:not(:disabled) {
  color: #bae6fd;
  border-color: rgba(56, 189, 248, .28);
}

.professional-ui .wa-context-menu button:disabled {
  opacity: .42;
  cursor: default;
}

@media (max-width: 980px) {
  .professional-ui .selection-header #markSelectedReadBtn,
  .professional-ui .selection-header #markSelectedUnreadBtn {
    min-width: auto;
  }
}


/* ==========================================================
   IMPRESIÓN DIRECTA CON SELECTOR DE IMPRESORA
   ========================================================== */

.media-action-btn.print-one {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.print-action-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.image-group-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 20, 27, 0.56);
}

.image-group-actions .image-group-download,
.image-group-print {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 10px;
  background: transparent;
  color: #f8fafc;
  cursor: pointer;
  font-weight: 720;
}

.image-group-actions .image-group-download {
  border-top: 0;
}

.image-group-print {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.image-group-actions .image-group-download:hover,
.image-group-print:hover {
  background: rgba(255, 255, 255, 0.07);
}

.image-group-print .print-action-icon {
  width: 19px;
  height: 19px;
}

.image-group-print-one {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 4;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(17, 27, 33, 0.82);
  color: #f8fafc;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.image-group-print-one:hover {
  background: rgba(32, 44, 51, 0.96);
}

.image-group-print-one .print-action-icon {
  width: 18px;
  height: 18px;
}

@media (max-width: 760px) {
  .image-group-actions {
    grid-template-columns: 1fr;
  }

  .image-group-print {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
}