@layer tw_base, frosted_ui, tw_components_utils;
@import "frosted-ui/styles.css" layer(frosted_ui);

@layer tw_base {
  @tailwind base;
}

@layer tw_components_utils {
  @tailwind components;
  @tailwind utilities;
}

.frosted-ui {
  --default-font-family: "Inter", sans-serif;
}

:root {
  font-feature-settings: "liga" 1, "calt" 1 !important;
}

@supports (font-variation-settings: normal) {
  .frosted-ui {
    --default-font-family: "InterVariable", sans-serif;
  }
}

/* We have to override this property to allow swipe gestures on mobile chrome. */
.fui-ScrollAreaViewport {
  overscroll-behavior-x: auto;
}

.fui-TooltipContent:has(.fui-TooltipText:empty) {
  display: none;
}

.sent [data-type="mention"] {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  background: var(--white-a3);
}

.sent [data-type="mention"].me {
  background-color: rgba(255, 193, 69, 0.15);
}

.sent [data-type="mention"].me {
  color: #ffd80b;
}

.dark .sent [data-type="mention"].me {
  color: #ffd600;
}

.dark .received [data-type="mention"] {
  background-color: var(--accent-4);
  color: var(--accent-11);
}

.received [data-type="mention"].me {
  background-color: rgba(255, 170, 1, 0.12);
  color: #eb9b00;
}
.dark .received [data-type="mention"].me {
  background-color: rgba(255, 128, 0, 0.143);
  color: #ffc53d;
}

.sent [data-type="code"] {
  background: var(--white-a3);
}

.light .received [data-type="code"] {
  background-color: var(--white-a8);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.messages-container * {
  overflow-anchor: none;
}