/* ============================================================
   FORO UBRE
   MESSAGES.CSS
   iOS 27 / Liquid Glass / Carbon
   ============================================================ */


/* ============================================================
   01 — RESET
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-height: 100%;
  background: #050606;
}

body {
  width: 100%;
  min-height: 100vh;
  margin: 0;

  color: #f4f6f4;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    Inter,
    system-ui,
    sans-serif;

  background:
    radial-gradient(
      circle at 18% 10%,
      rgba(76,255,130,.055),
      transparent 30%
    ),
    radial-gradient(
      circle at 84% 75%,
      rgba(72,150,255,.035),
      transparent 28%
    ),
    #050606;

  overflow-x: hidden;
}

button,
input,
textarea {
  font: inherit;
}

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

a {
  color: inherit;
  text-decoration: none;
}


/* ============================================================
   02 — VARIABLES
   ============================================================ */

:root {

  --bg: #050606;
  --bg-2: #080909;

  --glass:
    rgba(20,22,21,.70);

  --glass-strong:
    rgba(17,19,18,.88);

  --glass-soft:
    rgba(255,255,255,.035);

  --glass-highlight:
    rgba(255,255,255,.075);

  --border:
    rgba(255,255,255,.085);

  --border-strong:
    rgba(255,255,255,.13);

  --text:
    #f4f6f4;

  --text-2:
    #a5aaa6;

  --text-3:
    #686e6a;

  --green:
    #72f28b;

  --green-2:
    #4bd96b;

  --green-soft:
    rgba(114,242,139,.11);

  --green-glow:
    rgba(114,242,139,.18);

  --red:
    #ff4e68;

  --red-soft:
    rgba(255,78,104,.12);

  --radius-sm:
    12px;

  --radius:
    18px;

  --radius-lg:
    26px;

  --radius-xl:
    32px;

  --pill:
    999px;

  --ease:
    cubic-bezier(.22,.75,.25,1);

  --sidebar-width:
    248px;

  --chat-width:
    980px;

}


/* ============================================================
   03 — CARBON
   ============================================================ */

.carbon-bg {
  position: fixed;
  inset: 0;

  z-index: -5;

  pointer-events: none;

  opacity: .22;

  background-image:
    linear-gradient(
      135deg,
      rgba(255,255,255,.018) 25%,
      transparent 25%
    ),
    linear-gradient(
      315deg,
      rgba(255,255,255,.014) 25%,
      transparent 25%
    );

  background-size:
    7px 7px,
    7px 7px;

  background-position:
    0 0,
    3px 3px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      rgba(0,0,0,.72)
    );
}


.ambient {
  position: fixed;

  width: 500px;
  height: 500px;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(100px);

  opacity: .055;

  z-index: -4;
}


.ambient-one {
  top: -250px;
  left: -180px;

  background: #5cff82;
}


.ambient-two {
  right: -280px;
  bottom: -260px;

  background: #5c8aff;
}


/* ============================================================
   04 — APP LAYOUT
   ============================================================ */

.app-layout {
  width: 100%;
  min-height: 100vh;

  display: grid;

  grid-template-columns:
    minmax(190px,248px)
    minmax(0,980px);

  justify-content: center;

  gap: 18px;

  padding:
    18px 22px 30px;
}


/* ============================================================
   05 — SIDEBAR
   ============================================================ */

.sidebar {
  position: sticky;
  top: 18px;

  height:
    calc(100vh - 36px);

  min-height: 550px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 15px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius-xl);

  background:
    linear-gradient(
      145deg,
      rgba(28,31,29,.78),
      rgba(12,14,13,.76)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.065),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 24px 70px rgba(0,0,0,.3);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  overflow: hidden;
}


.sidebar::before {
  content: "";

  position: absolute;

  top: 0;
  left: 12%;
  right: 12%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.18),
      transparent
    );

  pointer-events: none;
}


.sidebar-top {
  display: flex;
  flex-direction: column;
}


/* ============================================================
   06 — BRAND
   ============================================================ */

.brand {
  display: flex;
  align-items: center;

  gap: 11px;

  padding:
    6px 8px 24px;
}


.brand-icon {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 13px;

  color: #061008;

  font-size: 20px;

  background:
    linear-gradient(
      145deg,
      #a0ffad,
      #48dc67
    );

  box-shadow:
    0 9px 28px rgba(71,225,101,.18),
    inset 0 1px 1px rgba(255,255,255,.65);
}


.brand-name {
  font-size: 17px;
  font-weight: 760;

  letter-spacing:
    -.4px;
}


/* ============================================================
   07 — NAV
   ============================================================ */

.main-nav {
  display: flex;
  flex-direction: column;

  gap: 5px;
}


.nav-item {
  min-height: 48px;

  display: flex;
  align-items: center;

  gap: 12px;

  padding:
    8px 11px;

  border-radius: 15px;

  color: var(--text-2);

  transition:
    background .22s var(--ease),
    color .22s var(--ease),
    transform .22s var(--ease);
}


.nav-item:hover {
  color: var(--text);

  background:
    rgba(255,255,255,.045);

  transform:
    translateX(2px);
}


.nav-item.active {
  color: var(--text);

  background:
    linear-gradient(
      135deg,
      rgba(111,242,133,.11),
      rgba(255,255,255,.045)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06);
}


.nav-icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  color: var(--text-2);

  font-size: 19px;
}


.nav-item.active .nav-icon {
  color: var(--green);

  background:
    rgba(92,241,116,.08);
}


.nav-label {
  font-size: 14px;
  font-weight: 650;
}


/* ============================================================
   08 — NEW POST
   ============================================================ */

.new-post-button {
  width: 100%;

  margin-top: 18px;

  min-height: 47px;

  border: 0;
  border-radius: 15px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  color: #071008;

  font-size: 13px;
  font-weight: 800;

  cursor: pointer;

  background:
    linear-gradient(
      135deg,
      #9affaa,
      #48dc67
    );

  box-shadow:
    0 12px 28px rgba(70,220,100,.13),
    inset 0 1px 1px rgba(255,255,255,.65);

  transition:
    transform .2s var(--ease),
    box-shadow .2s var(--ease);
}


.new-post-button:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 16px 35px rgba(70,220,100,.2),
    inset 0 1px 1px rgba(255,255,255,.7);
}


.new-post-button:active {
  transform:
    translateY(0) scale(.98);
}


.new-post-icon {
  font-size: 17px;
}


/* ============================================================
   09 — SIDEBAR USER
   ============================================================ */

.sidebar-user {
  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 0;

  padding: 10px;

  border:
    1px solid rgba(255,255,255,.055);

  border-radius: 17px;

  background:
    rgba(255,255,255,.025);
}


.sidebar-avatar {
  width: 38px;
  height: 38px;

  flex-shrink: 0;

  object-fit: cover;

  border-radius: 50%;

  border:
    1px solid rgba(255,255,255,.12);
}


.sidebar-user-info {
  min-width: 0;

  display: flex;
  flex-direction: column;

  overflow: hidden;
}


.sidebar-user-info strong {
  font-size: 12px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.sidebar-user-info small {
  margin-top: 2px;

  color: var(--text-3);

  font-size: 11px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.sidebar-user-more {
  margin-left: auto;

  color: var(--text-3);

  font-size: 16px;
}


/* ============================================================
   10 — MAIN
   ============================================================ */

.messages-main {
  min-width: 0;
  min-height: calc(100vh - 36px);

  display: flex;
}


.messages-layout {
  width: 100%;
  height: calc(100vh - 36px);

  min-height: 560px;

  display: grid;

  grid-template-columns:
    330px
    minmax(0,1fr);

  overflow: hidden;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius-xl);

  background:
    linear-gradient(
      145deg,
      rgba(23,26,24,.72),
      rgba(10,12,11,.84)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.065),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 28px 80px rgba(0,0,0,.32);

  backdrop-filter:
    blur(24px);

  -webkit-backdrop-filter:
    blur(24px);
}


/* ============================================================
   11 — CONVERSATIONS PANEL
   ============================================================ */

.conv-panel {
  position: relative;

  min-width: 0;

  display: flex;
  flex-direction: column;

  border-right:
    1px solid rgba(255,255,255,.075);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.018),
      rgba(255,255,255,.006)
    );
}


/* ============================================================
   12 — CONVERSATION HEADER
   ============================================================ */

.conv-header {
  height: 90px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    17px 18px;

  border-bottom:
    1px solid rgba(255,255,255,.055);
}


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


.section-eyebrow {
  display: flex;
  align-items: center;

  gap: 6px;

  margin-bottom: 5px;

  color: var(--text-3);

  font-size: 9px;
  font-weight: 850;

  letter-spacing: 1.2px;
}


.live-dot {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--green);

  box-shadow:
    0 0 12px rgba(112,245,139,.7);
}


.conv-header h1 {
  margin: 0;

  color: var(--text);

  font-size: 24px;

  line-height: 1;

  letter-spacing:
    -1px;
}


.btn-nueva-conv {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border:
    1px solid rgba(255,255,255,.075);

  border-radius: 13px;

  color: var(--text-2);

  background:
    rgba(255,255,255,.035);

  cursor: pointer;

  font-size: 18px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05);

  transition:
    color .2s var(--ease),
    background .2s var(--ease),
    border-color .2s var(--ease),
    transform .2s var(--ease);
}


.btn-nueva-conv:hover {
  color: var(--green);

  border-color:
    rgba(114,242,139,.2);

  background:
    rgba(114,242,139,.075);

  transform:
    translateY(-1px);
}


.btn-nueva-conv:active {
  transform:
    scale(.94);
}


/* ============================================================
   13 — SEARCH USER
   ============================================================ */

.search-user-box {
  position: absolute;

  top: 78px;
  left: 13px;
  right: 13px;

  z-index: 30;

  padding: 9px;

  border:
    1px solid rgba(255,255,255,.09);

  border-radius: 19px;

  background:
    rgba(15,18,16,.94);

  box-shadow:
    0 25px 65px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.06);

  backdrop-filter:
    blur(24px);

  -webkit-backdrop-filter:
    blur(24px);

  animation:
    search-drop .22s var(--ease) both;
}


@keyframes search-drop {

  from {
    opacity: 0;
    transform:
      translateY(-7px) scale(.98);
  }

  to {
    opacity: 1;
    transform:
      translateY(0) scale(1);
  }

}


.search-user-box.hidden {
  display: none;
}


.message-search {
  height: 43px;

  display: flex;
  align-items: center;

  gap: 8px;

  padding:
    0 9px;

  border:
    1px solid rgba(255,255,255,.065);

  border-radius: 13px;

  background:
    rgba(255,255,255,.035);
}


.message-search-icon {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  color: var(--green);

  background:
    rgba(114,242,139,.07);

  font-size: 15px;
}


.message-search input {
  min-width: 0;
  flex: 1;

  border: 0;
  outline: 0;

  color: var(--text);

  background: transparent;

  font-size: 12px;
}


.message-search input::placeholder {
  color:
    var(--text-3);
}


.close-search {
  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  border: 0;
  border-radius: 50%;

  color: var(--text-3);

  background:
    rgba(255,255,255,.045);

  cursor: pointer;
}


.close-search:hover {
  color: var(--text);

  background:
    rgba(255,255,255,.08);
}


/* ============================================================
   14 — SEARCH RESULTS
   ============================================================ */

.search-results {
  max-height: 310px;

  margin-top: 8px;

  overflow-y: auto;
}


.search-results::-webkit-scrollbar {
  width: 4px;
}


.search-results::-webkit-scrollbar-thumb {
  background:
    rgba(255,255,255,.12);

  border-radius:
    999px;
}


.search-result-item {
  min-height: 58px;

  display: flex;
  align-items: center;

  gap: 10px;

  padding:
    8px;

  border-radius: 13px;

  cursor: pointer;

  transition:
    background .18s ease,
    transform .18s ease;
}


.search-result-item:hover {
  background:
    rgba(255,255,255,.045);

  transform:
    translateX(2px);
}


.avatar-sm {
  width: 36px;
  height: 36px;

  flex-shrink: 0;

  object-fit: cover;

  border-radius: 50%;

  border:
    1px solid rgba(255,255,255,.1);

  background:
    #121513;
}


.search-result-info {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.search-result-info strong {
  overflow: hidden;

  color: var(--text);

  font-size: 12px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.search-result-info small {
  color: var(--text-3);

  font-size: 10px;
}


.search-result-arrow {
  margin-left: auto;

  color: var(--text-3);

  font-size: 17px;
}


.search-empty {
  min-height: 110px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 5px;

  color: var(--text-3);

  font-size: 11px;
}


.search-empty-icon {
  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  margin-bottom: 3px;

  border-radius: 11px;

  color: var(--text-2);

  background:
    rgba(255,255,255,.035);

  font-size: 17px;
}


/* ============================================================
   15 — CONVERSATIONS LIST
   ============================================================ */

.conv-list {
  min-height: 0;

  flex: 1;

  overflow-y: auto;

  padding:
    8px;
}


.conv-list::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar {
  width: 5px;
}


.conv-list::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}


.conv-list::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb {
  background:
    rgba(255,255,255,.09);

  border-radius:
    999px;
}


.conv-list::-webkit-scrollbar-thumb:hover,
.chat-messages::-webkit-scrollbar-thumb:hover {
  background:
    rgba(255,255,255,.15);
}


/* ============================================================
   16 — CONVERSATION ITEM
   ============================================================ */

.conv-item {
  position: relative;

  min-height: 76px;

  display: flex;
  align-items: center;

  gap: 11px;

  margin-bottom: 4px;

  padding:
    10px;

  border:
    1px solid transparent;

  border-radius: 17px;

  cursor: pointer;

  transition:
    background .2s var(--ease),
    border-color .2s var(--ease),
    transform .2s var(--ease);
}


.conv-item:hover {
  background:
    rgba(255,255,255,.04);

  border-color:
    rgba(255,255,255,.045);

  transform:
    translateX(2px);
}


.conv-item.activa {
  border-color:
    rgba(114,242,139,.12);

  background:
    linear-gradient(
      135deg,
      rgba(114,242,139,.095),
      rgba(255,255,255,.035)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045);
}


.conv-avatar-wrap {
  position: relative;

  width: 45px;
  height: 45px;

  flex-shrink: 0;
}


.avatar {
  width: 45px;
  height: 45px;

  display: block;

  object-fit: cover;

  border-radius: 50%;

  border:
    1px solid rgba(255,255,255,.1);

  background:
    #121513;
}


.online-dot {
  position: absolute;

  right: 0;
  bottom: 1px;

  width: 9px;
  height: 9px;

  border:
    2px solid #101310;

  border-radius: 50%;

  background:
    var(--green);

  box-shadow:
    0 0 9px rgba(114,242,139,.55);
}


.conv-info {
  min-width: 0;
  flex: 1;

  display: flex;
  flex-direction: column;
}


.conv-name-row {
  display: flex;
  align-items: center;

  min-width: 0;
}


.conv-info strong {
  max-width: 100%;

  overflow: hidden;

  color: var(--text);

  font-size: 12px;

  font-weight: 750;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.conv-info small {
  margin-top: 2px;

  color: var(--text-3);

  font-size: 9px;
}


.conv-ultimo {
  max-width: 100%;

  margin:
    5px 0 0;

  overflow: hidden;

  color: var(--text-3);

  font-size: 10px;

  line-height: 1.25;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.conv-item.activa .conv-ultimo {
  color:
    var(--text-2);
}


/* ============================================================
   17 — UNREAD BADGE
   ============================================================ */

.badge-noLeidos {
  min-width: 19px;
  height: 19px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  padding:
    0 5px;

  border-radius:
    999px;

  color:
    #071008;

  background:
    var(--green);

  box-shadow:
    0 5px 15px rgba(114,242,139,.18);

  font-size: 9px;
  font-weight: 900;
}


/* ============================================================
   18 — LOADING
   ============================================================ */

.loading {
  min-height: 200px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 10px;

  color: var(--text-3);

  font-size: 11px;
}


.loading-spinner {
  width: 22px;
  height: 22px;

  border:
    2px solid rgba(255,255,255,.08);

  border-top-color:
    var(--green);

  border-radius: 50%;

  animation:
    spinner .75s linear infinite;
}


@keyframes spinner {

  to {
    transform: rotate(360deg);
  }

}


/* ============================================================
   19 — NO CONVERSATIONS
   ============================================================ */

.no-conversations {
  min-height: 330px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  padding:
    30px 20px;

  text-align: center;
}


.no-conversations-icon {
  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  margin-bottom: 15px;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius: 19px;

  color: var(--green);

  background:
    linear-gradient(
      145deg,
      rgba(114,242,139,.08),
      rgba(255,255,255,.035)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 18px 45px rgba(0,0,0,.25);

  font-size: 23px;
}


.no-conversations strong {
  color: var(--text);

  font-size: 14px;
}


.no-conversations span {
  max-width: 220px;

  margin-top: 6px;

  color: var(--text-3);

  font-size: 11px;

  line-height: 1.5;
}


.no-conversations button {
  height: 35px;

  display: flex;
  align-items: center;

  gap: 6px;

  margin-top: 15px;

  padding:
    0 13px;

  border:
    1px solid rgba(114,242,139,.12);

  border-radius: 11px;

  color: var(--green);

  background:
    rgba(114,242,139,.07);

  cursor: pointer;

  font-size: 10px;
  font-weight: 750;

  transition:
    background .2s ease,
    transform .2s ease;
}


.no-conversations button:hover {
  background:
    rgba(114,242,139,.12);

  transform:
    translateY(-1px);
}


/* ============================================================
   20 — CHAT PANEL
   ============================================================ */

.chat-panel {
  min-width: 0;
  min-height: 0;

  position: relative;

  display: flex;
  flex-direction: column;

  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(114,242,139,.035),
      transparent 35%
    ),
    rgba(7,9,8,.24);
}


/* ============================================================
   21 — EMPTY CHAT
   ============================================================ */

.chat-empty {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  padding: 40px;

  text-align: center;
}


.empty-icon {
  width: 82px;
  height: 82px;

  display: grid;
  place-items: center;

  margin-bottom: 19px;

  border:
    1px solid rgba(255,255,255,.075);

  border-radius: 27px;

  color: var(--green);

  background:
    linear-gradient(
      145deg,
      rgba(114,242,139,.085),
      rgba(255,255,255,.035)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.065),
    0 22px 55px rgba(0,0,0,.3);

  font-size: 31px;

  animation:
    empty-float 4s ease-in-out infinite;
}


@keyframes empty-float {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-4px);
  }

}


.chat-empty h2 {
  margin: 0;

  color: var(--text);

  font-size: 18px;

  letter-spacing:
    -.5px;
}


.chat-empty p {
  max-width: 330px;

  margin:
    8px 0 0;

  color: var(--text-3);

  font-size: 12px;

  line-height: 1.55;
}


.empty-new-chat {
  height: 39px;

  display: flex;
  align-items: center;

  gap: 7px;

  margin-top: 18px;

  padding:
    0 15px;

  border:
    1px solid rgba(114,242,139,.12);

  border-radius: 13px;

  color: var(--green);

  background:
    rgba(114,242,139,.065);

  cursor: pointer;

  font-size: 11px;
  font-weight: 750;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}


.empty-new-chat:hover {
  background:
    rgba(114,242,139,.11);

  border-color:
    rgba(114,242,139,.2);

  transform:
    translateY(-1px);
}


/* ============================================================
   22 — CHAT HEADER
   ============================================================ */

.chat-header {
  height: 74px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    10px 17px;

  border-bottom:
    1px solid rgba(255,255,255,.065);

  background:
    rgba(10,12,11,.52);

  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,.12);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}


.chat-back {
  display: none;

  width: 38px;
  height: 38px;
  flex-shrink: 0;

  place-items: center;

  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;

  color: var(--text-2);
  background: rgba(255,255,255,.035);

  cursor: pointer;
  font-size: 19px;

  transition:
    color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.chat-back:active {
  transform: scale(.94);
}

.chat-back:hover {
  color: var(--text);
  background: rgba(255,255,255,.06);
}


.chat-person {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 11px;
}


.chat-avatar {
  width: 43px;
  height: 43px;
}


.chat-person > div {
  min-width: 0;

  display: flex;
  flex-direction: column;
}


.chat-person strong {
  overflow: hidden;

  color: var(--text);

  font-size: 13px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.chat-person a {
  display: flex;
  align-items: center;

  gap: 4px;

  margin-top: 4px;

  color: var(--text-3);

  font-size: 9px;

  transition:
    color .18s ease;
}


.chat-person a:hover {
  color:
    var(--green);
}


.chat-more {
  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(255,255,255,.055);

  border-radius: 11px;

  color: var(--text-3);

  background:
    rgba(255,255,255,.025);

  cursor: pointer;

  font-size: 17px;

  transition:
    color .18s ease,
    background .18s ease;
}


.chat-more:hover {
  color: var(--text);

  background:
    rgba(255,255,255,.055);
}


/* ============================================================
   23 — CHAT MESSAGES
   ============================================================ */

.chat-messages {
  min-height: 0;

  flex: 1;

  overflow-y: auto;

  padding:
    22px 25px;

  display: flex;
  flex-direction: column;

  gap: 7px;

  scroll-behavior:
    smooth;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.012),
      transparent 65%
    );
}


.mensaje {
  max-width: min(72%, 510px);

  display: flex;

  animation:
    message-in .22s var(--ease) both;
}


@keyframes message-in {

  from {
    opacity: 0;
    transform:
      translateY(5px)
      scale(.985);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }

}


.mensaje.suyo {
  align-self: flex-start;
}


.mensaje.mio {
  align-self: flex-end;
}


.mensaje-burbuja {
  padding:
    9px 12px 7px;

  border:
    1px solid rgba(255,255,255,.065);

  border-radius:
    16px 16px 16px 5px;

  background:
    linear-gradient(
      145deg,
      rgba(32,36,33,.78),
      rgba(16,18,17,.8)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 6px 20px rgba(0,0,0,.14);
}


.mensaje.mio .mensaje-burbuja {
  border-color:
    rgba(114,242,139,.13);

  border-radius:
    16px 16px 5px 16px;

  background:
    linear-gradient(
      145deg,
      rgba(61,125,70,.48),
      rgba(31,70,38,.52)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 7px 22px rgba(0,0,0,.16);
}


.mensaje-burbuja p {
  margin: 0;

  color:
    #e9ecea;

  font-size: 13px;

  line-height: 1.45;

  white-space: pre-wrap;

  word-break: break-word;
}


.mensaje-tiempo {
  display: flex;
  align-items: center;

  justify-content: flex-end;

  gap: 3px;

  margin-top: 4px;

  color:
    rgba(255,255,255,.34);

  font-size: 8px;
}


.mensaje.mio .mensaje-tiempo {
  color:
    rgba(216,255,221,.43);
}


/* ============================================================
   24 — TYPING
   ============================================================ */

.chat-typing {
  min-height: 24px;

  flex-shrink: 0;

  display: flex;
  align-items: center;

  padding:
    0 23px;

  color: var(--text-3);

  font-size: 9px;
}


.typing-dots {
  display: inline-flex;

  align-items: center;

  gap: 3px;

  margin-right: 5px;
}


.typing-dots i {
  width: 4px;
  height: 4px;

  display: block;

  border-radius: 50%;

  background:
    var(--green);

  animation:
    typing-dot 1.2s infinite ease-in-out;
}


.typing-dots i:nth-child(2) {
  animation-delay: .15s;
}


.typing-dots i:nth-child(3) {
  animation-delay: .3s;
}


@keyframes typing-dot {

  0%,
  60%,
  100% {
    opacity: .3;
    transform:
      translateY(0);
  }

  30% {
    opacity: 1;
    transform:
      translateY(-2px);
  }

}


/* ============================================================
   25 — INPUT AREA
   ============================================================ */

.chat-input-area {
  min-height: 70px;

  flex-shrink: 0;

  display: flex;
  align-items: flex-end;

  gap: 9px;

  padding:
    11px 15px 13px;

  border-top:
    1px solid rgba(255,255,255,.055);

  background:
    rgba(8,10,9,.72);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}


.chat-input-area textarea {
  min-height: 43px;
  max-height: 120px;

  flex: 1;

  resize: none;

  outline: none;

  padding:
    12px 14px;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius:
    15px;

  color: var(--text);

  background:
    rgba(255,255,255,.035);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);

  font-size: 12px;

  line-height: 1.45;

  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


.chat-input-area textarea::placeholder {
  color:
    var(--text-3);
}


.chat-input-area textarea:focus {
  border-color:
    rgba(114,242,139,.25);

  background:
    rgba(255,255,255,.045);

  box-shadow:
    0 0 0 3px rgba(114,242,139,.035),
    inset 0 1px 0 rgba(255,255,255,.035);
}


.chat-input-area button {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border: 0;

  border-radius: 14px;

  color: #071008;

  background:
    linear-gradient(
      145deg,
      #9affaa,
      #48dc67
    );

  box-shadow:
    0 9px 24px rgba(70,220,100,.13),
    inset 0 1px 1px rgba(255,255,255,.65);

  cursor: pointer;

  font-size: 17px;

  transition:
    transform .2s var(--ease),
    box-shadow .2s var(--ease),
    opacity .2s ease;
}


.chat-input-area button:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 13px 30px rgba(70,220,100,.2),
    inset 0 1px 1px rgba(255,255,255,.7);
}


.chat-input-area button:active {
  transform:
    scale(.94);
}


.chat-input-area button:disabled {
  opacity: .45;

  cursor:
    not-allowed;

  transform:
    none;
}


/* ============================================================
   26 — BOTTOM NAV
   ============================================================ */

.bottom-nav {
  display: none;
}


/* ============================================================
   27 — RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {

  .app-layout {
    grid-template-columns:
      215px
      minmax(0,900px);

    max-width:
      1200px;

    padding-left:
      14px;

    padding-right:
      14px;
  }


  .messages-layout {
    grid-template-columns:
      300px
      minmax(0,1fr);
  }

}


@media (max-width: 820px) {

  .app-layout {
    grid-template-columns:
      190px
      minmax(0,1fr);

    gap: 13px;
  }


  .messages-layout {
    grid-template-columns:
      275px
      minmax(0,1fr);

    border-radius:
      27px;
  }


  .nav-item {
    padding-left:
      8px;

    padding-right:
      8px;
  }


  .nav-label {
    font-size:
      13px;
  }


  .chat-messages {
    padding:
      18px;
    }

}


/* ============================================================
   28 — TABLET / MOBILE
   ============================================================ */

@media (max-width: 700px) {

  body {
    padding-bottom:
      calc(74px + env(safe-area-inset-bottom));
  }


  .app-layout {
    display: block;

    min-height: 100vh;

    padding:
      0 10px 30px;
  }


  .sidebar {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 64px;

    min-height: 0;

    z-index: 100;

    display: flex;
    flex-direction: row;
    align-items: center;

    padding:
      8px 13px;

    border:
      0;

    border-bottom:
      1px solid rgba(255,255,255,.075);

    border-radius: 0;

    background:
      rgba(7,9,8,.91);

    box-shadow:
      0 12px 35px rgba(0,0,0,.3);

    backdrop-filter:
      blur(20px);

    -webkit-backdrop-filter:
      blur(20px);
  }


  .sidebar-top {
    width: 100%;

    display: flex;
    flex-direction: row;
    align-items: center;
  }


  .brand {
    padding: 0;

    gap: 9px;
  }


  .brand-icon {
    width: 36px;
    height: 36px;

    border-radius: 11px;

    font-size: 17px;
  }


  .brand-name {
    font-size: 15px;
  }


  .main-nav {
    margin-left: auto;

    flex-direction: row;

    gap: 2px;
  }


  .nav-item {
    width: 40px;
    height: 40px;

    min-height: 40px;

    padding: 0;

    justify-content: center;

    border-radius: 12px;
  }


  .nav-label,
  .new-post-button,
  .sidebar-user {
    display: none;
  }


  .nav-icon {
    width: 35px;
    height: 35px;
  }


  .messages-main {
    width: 100%;

    min-height: 100vh;

    padding-top:
      64px;
  }


  .messages-layout {
    width: 100%;
    height:
      calc(100vh - 64px - 78px);

    min-height: 500px;

    display: block;

    border:
      0;

    border-radius: 0;

    background:
      transparent;

    box-shadow:
      none;

    backdrop-filter:
      none;

    -webkit-backdrop-filter:
      none;

    overflow: visible;
  }


  .conv-panel {
    width: 100%;
    height: 100%;

    border:
      1px solid var(--border);

    border-radius:
      25px;

    background:
      linear-gradient(
        145deg,
        rgba(23,26,24,.78),
        rgba(10,12,11,.84)
      );

    overflow:
      hidden;
  }


  .chat-panel {
    position: fixed;

    inset:
      64px 0 74px 0;

    z-index: 150;

    display: none;

    border:
      0;

    border-radius: 0;

    background:
      #080a09;
  }


  body.chat-open .conv-panel {
    display: none;
  }


  body.chat-open {
    overflow: hidden;
    overscroll-behavior: none;
  }


  body.chat-open .chat-panel {
    display: flex;
  }


  .chat-header {
    height: 67px;

    padding:
      9px 11px;

    gap: 8px;
  }


  .chat-back {
    display: grid;
  }


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


  .chat-messages {
    padding:
      16px 13px;
  }


  .mensaje {
    max-width:
      82%;
  }


  .chat-input-area {
    padding:
      9px 10px 10px;
  }


  .search-user-box {
    top:
      75px;

    left:
      9px;

    right:
      9px;
  }


  .bottom-nav {
    position: fixed;

    display: block;

    left: 10px;
    right: 10px;

    bottom:
      calc(
        10px +
        env(safe-area-inset-bottom)
      );

    z-index: 300;
  }


  .bottom-nav-inner {
    height: 62px;

    display: grid;

    grid-template-columns:
      repeat(4,1fr);

    align-items: center;

    padding:
      5px;

    border:
      1px solid rgba(255,255,255,.09);

    border-radius:
      21px;

    background:
      rgba(17,20,18,.88);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.075),
      0 18px 45px rgba(0,0,0,.42);

    backdrop-filter:
      blur(24px);

    -webkit-backdrop-filter:
      blur(24px);
  }


  .bottom-nav-btn {
    height: 52px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 2px;

    border-radius:
      16px;

    color:
      var(--text-3);

    font-size: 9px;
    font-weight: 700;

    transition:
      color .2s ease,
      background .2s ease;
  }


  .bottom-nav-btn.active {
    color:
      var(--text);

    background:
      rgba(255,255,255,.055);
  }


  .bn-icon {
    width: 29px;
    height: 27px;

    display: grid;
    place-items: center;

    font-size: 18px;
  }


  .bottom-nav-btn.active .bn-icon {
    color:
      var(--green);
  }

}


/* ============================================================
   29 — SMALL MOBILE
   ============================================================ */

@media (max-width: 430px) {

  .app-layout {
    padding-left:
      8px;

    padding-right:
      8px;
  }


  .brand-name {
    display: none;
  }


  .main-nav {
    gap: 0;
  }


  .conv-header {
    height:
      84px;

    padding:
      15px;
  }


  .conv-header h1 {
    font-size:
      22px;
  }


  .conv-item {
    min-height:
      71px;

    padding:
      9px;
  }


  .avatar,
  .conv-avatar-wrap {
    width:
      42px;

    height:
      42px;
  }


  .conv-info strong {
    font-size:
      11px;
  }


  .conv-ultimo {
    font-size:
      9px;
  }


  .chat-empty {
    padding:
      25px;
  }


  .empty-icon {
    width:
      70px;

    height:
      70px;

    border-radius:
      23px;

    font-size:
      27px;
  }


  .chat-empty h2 {
    font-size:
      17px;
  }


  .chat-empty p {
    font-size:
      11px;
  }


  .mensaje {
    max-width:
      88%;
  }


  .mensaje-burbuja p {
    font-size:
      12px;
  }


  .chat-input-area textarea {
    font-size:
      11px;
  }


  .chat-input-area button {
    width:
      41px;

    height:
      41px;
  }

}


/* ============================================================
   30 — REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    scroll-behavior:
      auto !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }

}


/* ============================================================
   31 — SELECTION
   ============================================================ */

::selection {
  color:
    #061008;

  background:
    rgba(114,242,139,.7);
}


/* ============================================================
   FORO UBRE — MOBILE NAV / NOTIFICATIONS FIX
   iPhone 11 / 12 / 13 / 14 and narrow Android screens
   ============================================================ */
.notification-nav { position:relative; min-width:0; }
.notification-nav .nav-icon { position:relative; }

@media (max-width:700px) {
  .sidebar {
    padding-left:max(8px, env(safe-area-inset-left));
    padding-right:max(8px, env(safe-area-inset-right));
    padding-top:max(8px, env(safe-area-inset-top));
    height:calc(64px + env(safe-area-inset-top));
  }

  .messages-main { padding-top:calc(64px + env(safe-area-inset-top)); }

  .main-nav {
    flex:1;
    min-width:0;
    margin-left:auto;
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:2px;
    max-width:270px;
  }

  .main-nav .nav-item,
  .main-nav .notification-nav {
    width:auto;
    min-width:0;
    max-width:none;
    height:40px;
    min-height:40px;
    padding:0;
    display:grid;
    place-items:center;
    overflow:visible;
  }

  .main-nav .nav-icon {
    width:34px;
    height:34px;
    margin:0;
  }

  .notification-badge {
    top:2px;
    right:calc(50% - 19px);
    min-width:15px;
    height:15px;
    padding:0 4px;
    font-size:9px;
    box-shadow:0 0 0 2px rgba(7,9,11,.92),0 4px 12px rgba(255,77,103,.28);
  }
}

@media (max-width:430px) {
  .sidebar { padding-left:max(6px,env(safe-area-inset-left)); padding-right:max(6px,env(safe-area-inset-right)); }
  .main-nav { max-width:252px; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; }
  .main-nav .nav-item,.main-nav .notification-nav { height:38px; min-height:38px; }
  .main-nav .nav-icon { width:32px; height:32px; font-size:18px; border-radius:11px; }
  .notification-badge { right:calc(50% - 17px); top:1px; }
}

/* ============================================================
   FORO UBRE — LLAMADAS Y VIDEOLLAMADAS
   ============================================================ */

.chat-call-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.chat-call-btn {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.035);
  color: #bfc5cd;
  cursor: pointer;
  transition: .2s ease;
}

.chat-call-btn:hover {
  background: rgba(255,255,255,.09);
  color: #fff;
  transform: translateY(-1px);
}

.chat-call-btn:active {
  transform: scale(.94);
}

.chat-call-btn i {
  font-size: 18px;
}

.call-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2,3,4,.68);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  opacity: 1;
  animation: callOverlayIn .22s ease both;
}

.call-overlay.hidden {
  display: none;
}

.call-overlay.closing {
  animation: callOverlayOut .22s ease both;
}

.call-window {
  position: relative;
  width: min(680px, 100%);
  height: min(760px, calc(100dvh - 40px));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(24,27,31,.97), rgba(7,9,11,.98));
  box-shadow: 0 35px 100px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05);
}

.call-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  height: 62px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(0,0,0,.52), transparent);
}

.call-status-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e7e9ec;
  font-size: 13px;
  font-weight: 700;
}

.call-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #72f28b;
  box-shadow: 0 0 14px rgba(114,242,139,.55);
}

.call-close-mini {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  background: rgba(255,255,255,.06);
  color: #d8dbe0;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.call-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.06), transparent 28%),
    radial-gradient(circle at 20% 80%, rgba(114,242,139,.035), transparent 32%),
    #07090b;
}

.call-remote-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-align: center;
}

.call-avatar-wrap {
  width: 108px;
  height: 108px;
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 0 7px rgba(255,255,255,.025);
  margin-bottom: 7px;
}

.call-avatar-wrap img,
.call-avatar-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.call-remote-placeholder strong {
  font-size: 18px;
}

.call-remote-placeholder span {
  color: #8e959e;
  font-size: 12px;
}

.call-remote-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #050606;
}

.call-local-video {
  position: absolute;
  right: 18px;
  bottom: 94px;
  z-index: 3;
  width: 150px;
  height: 210px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: #090a0c;
  box-shadow: 0 15px 40px rgba(0,0,0,.5);
}

.call-overlay.audio-call .call-remote-video,
.call-overlay.audio-call .call-local-video {
  display: none !important;
}

.call-overlay.incoming .call-controls {
  display: none !important;
}

.call-incoming-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 42px;
  z-index: 6;
  justify-content: center;
  gap: 18px;
}

.call-action {
  min-width: 126px;
  height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #fff;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 15px 35px rgba(0,0,0,.3);
}

.call-action.reject {
  background: #30343a;
}

.call-action.accept {
  background: #2ebf62;
}

.call-action i {
  font-size: 19px;
}

.call-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 25px;
  z-index: 7;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.call-control {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 17px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(24,27,31,.88);
  backdrop-filter: blur(12px);
  cursor: pointer;
  font-size: 20px;
}

.call-control.off {
  background: rgba(255,255,255,.13);
}

.call-control.hangup {
  width: 58px;
  height: 50px;
  border-radius: 17px;
  background: #d83e55;
  transform: rotate(135deg);
}

.call-control.hangup i {
  transform: rotate(-135deg);
}

.call-overlay.minimized {
  inset: auto 16px 16px auto;
  width: 230px;
  height: 150px;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  place-items: stretch;
}

.call-overlay.minimized .call-window {
  width: 230px;
  height: 150px;
  border-radius: 18px;
}

.call-overlay.minimized .call-controls,
.call-overlay.minimized .call-incoming-actions,
.call-overlay.minimized .call-remote-placeholder,
.call-overlay.minimized .call-topbar .call-status-wrap {
  display: none !important;
}

.call-overlay.minimized .call-local-video {
  right: 8px;
  bottom: 8px;
  width: 70px;
  height: 82px;
}

@keyframes callOverlayIn {
  from { opacity: 0; transform: scale(.97); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes callOverlayOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(.97); }
}

@media (max-width: 700px) {
  .chat-call-actions {
    gap: 3px;
  }

  .chat-call-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .call-overlay {
    padding: 0;
  }

  .call-window {
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .call-topbar {
    padding-top: env(safe-area-inset-top);
    height: calc(62px + env(safe-area-inset-top));
  }

  .call-local-video {
    right: 12px;
    bottom: 112px;
    width: 112px;
    height: 160px;
  }

  .call-incoming-actions {
    bottom: calc(34px + env(safe-area-inset-bottom));
  }

  .call-controls {
    bottom: calc(22px + env(safe-area-inset-bottom));
  }

  .call-overlay.minimized {
    inset: auto 10px calc(74px + env(safe-area-inset-bottom)) auto;
    width: 190px;
    height: 125px;
  }

  .call-overlay.minimized .call-window {
    width: 190px;
    height: 125px;
  }
}


/* ============================================================
   EVENTOS DE LLAMADA DENTRO DEL CHAT
   ============================================================ */
.mensaje-llamada {
  width: min(330px, 82%);
  margin: 8px auto;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 10px 30px rgba(0,0,0,.14);
  animation: callEventIn .24s ease both;
}
.mensaje-llamada-icon {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--green);
  background: rgba(114,242,139,.08);
  border: 1px solid rgba(114,242,139,.10);
}
.mensaje-llamada-copy { min-width: 0; display:flex; flex-direction:column; gap:2px; }
.mensaje-llamada-copy strong { font-size: 11px; font-weight: 800; color: var(--text); }
.mensaje-llamada-copy span { font-size: 10px; color: var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mensaje-llamada-status { margin-left:auto; color:var(--green); font-size:13px; font-weight:800; }
.mensaje-llamada.finalizada { opacity:.65; }
@keyframes callEventIn { from { opacity:0; transform:translateY(6px) scale(.98); } to { opacity:1; transform:none; } }


/* ============================================================
   LLAMADAS V2 — VIDEO ESTABLE + MOBILE SAFE AREA
   ============================================================ */
.call-overlay .call-window {
  isolation: isolate;
}

.call-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: block;
  contain: layout paint;
}

.call-remote-placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s ease, visibility .2s ease;
}

.call-remote-placeholder.has-remote-video {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.call-remote-video {
  position: absolute !important;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  background: #050607;
  border: 0;
  outline: 0;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.call-remote-video:not(.has-stream) {
  opacity: 0;
  pointer-events: none;
}

.call-remote-video.has-stream {
  opacity: 1;
}

.call-local-video {
  position: absolute !important;
  z-index: 8;
  right: 18px;
  bottom: 94px;
  width: clamp(104px, 23vw, 168px);
  height: clamp(148px, 32vw, 236px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.22);
  background: #090a0c;
  box-shadow: 0 18px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.22);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.call-local-video:not(.has-stream) {
  opacity: 0;
  pointer-events: none;
}

.call-local-video.has-stream {
  opacity: 1;
}

.call-topbar,
.call-controls,
.call-incoming-actions {
  z-index: 12;
}

.call-overlay.video-call .call-stage {
  background: #050607;
}

.call-overlay.video-call .call-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.34), transparent 18%, transparent 70%, rgba(0,0,0,.42));
}

.call-overlay.video-call .call-local-video,
.call-overlay.video-call .call-controls,
.call-overlay.video-call .call-topbar,
.call-overlay.video-call .call-incoming-actions {
  z-index: 14;
}

.call-overlay.minimized .call-remote-video {
  object-fit: cover;
}

@media (max-width: 700px) {
  .call-window {
    height: 100dvh !important;
    min-height: 100svh;
  }

  .call-stage {
    height: 100%;
  }

  .call-local-video {
    right: 12px;
    bottom: calc(104px + env(safe-area-inset-bottom));
    width: 104px;
    height: 148px;
    border-radius: 17px;
  }

  .call-controls {
    bottom: calc(18px + env(safe-area-inset-bottom));
  }

  .call-incoming-actions {
    bottom: calc(28px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 430px) {
  .call-local-video {
    width: 92px;
    height: 130px;
    right: 10px;
    bottom: calc(98px + env(safe-area-inset-bottom));
    border-radius: 15px;
  }

  .call-control {
    width: 48px;
    height: 48px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .call-local-video {
    width: 96px;
    height: 128px;
    right: calc(10px + env(safe-area-inset-right));
    bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .call-controls {
    bottom: calc(10px + env(safe-area-inset-bottom));
  }
}

/* Historial persistente de llamadas */
.mensaje-llamada.historial-llamada {
  background: linear-gradient(145deg, rgba(114,242,139,.055), rgba(255,255,255,.018));
}

.mensaje-llamada.historial-llamada .mensaje-llamada-status {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: #72f28b;
  background: rgba(114,242,139,.08);
}