.chat {
  --chat-accent: #6db8ff;
  --chat-bg: #08131e;
  --chat-header: rgba(12, 24, 36, 0.96);
  --chat-composer: rgba(12, 23, 34, 0.98);
  --chat-field: #182532;
  --chat-field-border: rgba(150, 180, 205, 0.16);
}

.chat[data-platform="telegram"] {
  --chat-accent: #72bcff;
  --chat-bg: #07131f;
  --chat-header: rgba(12, 25, 39, 0.96);
  --chat-composer: rgba(10, 22, 34, 0.98);
  --chat-field: #182838;
  --chat-field-border: rgba(112, 188, 255, 0.2);
}

.chat[data-platform="whatsapp"] {
  --chat-accent: #6ed6a4;
  --chat-bg: #07150f;
  --chat-header: rgba(10, 29, 22, 0.96);
  --chat-composer: rgba(9, 25, 19, 0.98);
  --chat-field: #172a23;
  --chat-field-border: rgba(110, 214, 164, 0.2);
}

.chat .chat-header {
  min-height: 60px;
  border-bottom-color: rgba(255, 255, 255, 0.06);
  background: var(--chat-header);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
}

.chat .chat-avatar {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 5px 16px rgba(0, 0, 0, 0.2);
}

.chat .chat-title-row h2 {
  font-size: 1rem;
  font-weight: 760;
  letter-spacing: -0.01em;
}

.chat .chat-connection {
  color: rgba(210, 224, 235, 0.62);
}

.chat .messages {
  padding: 16px 18px 12px;
  gap: 6px;
  background-color: var(--chat-bg);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(0, 0, 0, 0.08)),
    radial-gradient(circle at 20% 0%, rgba(93, 157, 219, 0.09), transparent 34%),
    url("/assets/chat-wallpaper.svg");
  background-size: 100% 100%, 100% 100%, 220px 220px;
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: center, center, center;
}

.chat[data-platform="whatsapp"] .messages {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.014), rgba(0, 0, 0, 0.1)),
    radial-gradient(circle at 18% 0%, rgba(52, 154, 106, 0.1), transparent 36%),
    url("/assets/chat-wallpaper.svg");
}

.chat .message {
  max-width: min(76%, 680px);
  padding: 8px 11px 6px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 18px 18px 18px 6px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 3px 10px rgba(0, 0, 0, 0.17);
  color: #f4f7fb;
}

.chat .message.outgoing {
  border-radius: 18px 18px 6px 18px;
}

.chat[data-platform="telegram"] .message.incoming {
  background: linear-gradient(145deg, #203b54 0%, #2b5274 100%);
}

.chat[data-platform="telegram"] .message.outgoing {
  background: linear-gradient(145deg, #435bd3 0%, #704bcf 100%);
}

.chat[data-platform="whatsapp"] .message.incoming {
  background: linear-gradient(145deg, #1b4135 0%, #285a48 100%);
}

.chat[data-platform="whatsapp"] .message.outgoing {
  background: linear-gradient(145deg, #1d674f 0%, #2b8767 100%);
}

.chat .message-sender {
  margin: 0 1px 4px;
  font-size: 0.73rem;
  font-weight: 780;
  letter-spacing: 0.005em;
}

.chat[data-platform="telegram"] .message.incoming .message-sender {
  color: #9bd5ff;
}

.chat[data-platform="whatsapp"] .message.incoming .message-sender {
  color: #9be6bd;
}

.chat .message.outgoing .message-sender {
  color: rgba(255, 255, 255, 0.7);
}

.chat .message-text {
  line-height: 1.38;
}

.chat .message-meta {
  min-width: 42px;
  margin-top: 2px;
  color: rgba(229, 238, 247, 0.63);
  font-size: 0.64rem;
  gap: 4px;
}

.chat .message.outgoing .message-meta {
  color: rgba(246, 249, 252, 0.7);
}

.chat[data-platform="telegram"] .message-state.read {
  color: #91d2ff;
}

.chat[data-platform="whatsapp"] .message-state.read {
  color: #8ce8bc;
}

.chat .date-separator {
  margin: 8px 0;
  color: rgba(224, 234, 243, 0.72);
}

.chat .date-separator span {
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(15, 27, 39, 0.78);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14);
}

.chat[data-platform="whatsapp"] .date-separator span {
  background: rgba(12, 35, 27, 0.8);
}

.chat .message.has-attachment {
  padding: 5px 5px 6px;
}

.chat .message.has-attachment > .message-sender {
  margin: 3px 7px 5px;
}

.chat .message.has-attachment > .message-text:not([hidden]) {
  margin: 5px 7px 1px;
}

.chat .message.has-attachment > .message-meta {
  margin-right: 6px;
  margin-left: 6px;
}

.chat .message-attachment {
  margin: 0 0 4px;
}

.chat .message-image-link,
.chat .message-video {
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.chat .message-image-link {
  max-width: min(360px, 78vw);
  background: rgba(5, 12, 20, 0.22) !important;
}

.chat .message-image {
  max-height: 430px;
}

.chat .message-video {
  max-width: min(380px, 80vw);
  max-height: 430px;
  background: #05080b;
}

.chat .message-file {
  min-width: min(280px, 72vw);
  max-width: min(380px, 80vw);
  padding: 10px 11px;
  gap: 11px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 14px;
  background: rgba(5, 13, 21, 0.22);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025) inset;
  transform: none;
}

.chat .message-file:hover,
.chat .message-file:focus-visible {
  background: rgba(255, 255, 255, 0.085);
  filter: none;
}

.chat .message-file:active {
  transform: none;
}

.chat .message-file-icon {
  flex-basis: 46px;
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  font-size: 9px;
}

.chat[data-platform="telegram"] .message-file-icon {
  background: linear-gradient(145deg, rgba(105, 190, 255, 0.54), rgba(76, 116, 219, 0.56));
}

.chat[data-platform="whatsapp"] .message-file-icon {
  background: linear-gradient(145deg, rgba(93, 218, 154, 0.5), rgba(43, 139, 96, 0.58));
}

.chat .message-file-copy strong {
  font-size: 13px;
  font-weight: 700;
}

.chat .message-file-copy small {
  color: rgba(229, 237, 244, 0.66);
  font-size: 11px;
}

.chat .composer {
  gap: 8px;
  padding: 8px 10px max(8px, env(safe-area-inset-bottom));
  border-top-color: rgba(255, 255, 255, 0.055);
  background: var(--chat-composer);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.12);
}

.chat .composer textarea {
  border: 1px solid var(--chat-field-border);
  background: var(--chat-field);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025) inset;
}

.chat .composer textarea:focus {
  border-color: var(--chat-accent);
  box-shadow: 0 0 0 1px var(--chat-accent);
}

.chat .composer button.attachment-button {
  color: rgba(220, 231, 240, 0.72);
}

.chat .composer button.attachment-button:hover,
.chat .composer button.attachment-button:focus-visible {
  color: var(--chat-accent);
  background: rgba(255, 255, 255, 0.055);
}

.chat[data-platform="telegram"] .composer > button[type="submit"] {
  background: linear-gradient(145deg, #3797ed, #5867e8);
  box-shadow: 0 5px 16px rgba(43, 126, 224, 0.28);
}

.chat[data-platform="whatsapp"] .composer > button[type="submit"] {
  background: linear-gradient(145deg, #2dbb78, #268d63);
  box-shadow: 0 5px 16px rgba(38, 151, 99, 0.25);
}

.chat .attachment-preview-card {
  border-color: rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
}

.chat[data-platform="telegram"] .attachment-preview-file-icon {
  background: rgba(94, 166, 237, 0.18);
  color: #9bd5ff;
}

.chat[data-platform="whatsapp"] .attachment-preview-file-icon {
  background: rgba(78, 190, 129, 0.18);
  color: #9be6bd;
}

@media (max-width: 760px) {
  .chat .chat-header {
    min-height: 58px;
  }

  .chat .messages {
    padding: 11px 8px 9px;
    gap: 6px;
    background-size: 100% 100%, 100% 100%, 196px 196px;
  }

  .chat .message {
    max-width: 88%;
    border-radius: 17px 17px 17px 6px;
  }

  .chat .message.outgoing {
    border-radius: 17px 17px 6px 17px;
  }

  .chat .message-image-link {
    max-width: min(330px, 82vw);
  }

  .chat .message-video {
    max-width: min(340px, 84vw);
  }

  .chat .message-file {
    min-width: min(250px, 76vw);
    max-width: min(340px, 84vw);
  }

  .chat .composer {
    padding: 7px 8px max(7px, env(safe-area-inset-bottom));
  }
}