/* /public_html/assets/css/chat/chat-panel.css */

.chat-panel-extras{
  position:sticky;
  top:calc(var(--app-header-safe-height, var(--dashboard-floating-content-offset, 4.25rem)) + 0.45rem);
  z-index:35;
  width:100%;
  padding:0.45rem 0 0.55rem;
  box-sizing:border-box;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  pointer-events:none;
}

.chat-panel-tools{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  flex-wrap:nowrap;
  pointer-events:none;
}

.chat-panel-search-field{
  flex:1 1 auto;
  min-width:0;
  width:100%;
  max-width:min(38rem, calc(100vw - 2.1rem));
  min-height:3.05rem;
  border-radius:999px;
  pointer-events:auto;
  border:1px solid color-mix(in srgb, var(--theme-primary, #38bdf8) 36%, rgba(148,163,184,.30));
  background:color-mix(in srgb, rgba(15,23,42,.82) 84%, var(--theme-primary, #38bdf8) 16%);
  box-shadow:
    0 16px 42px rgba(0, 0, 0, .24),
    0 0 24px color-mix(in srgb, var(--theme-primary, #38bdf8) 13%, transparent);
  backdrop-filter:blur(16px) saturate(1.08);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
}

.chat-panel-search-field .ui-search__input{
  width:100%;
  min-width:0;
}

.chat-panel-tools-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  pointer-events:auto;
}

.chat-panel-body{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.chat-panel-stats{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

@media (min-width: 768px){
  .chat-panel-stats{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

.chat-panel-stat{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.14);
  border-radius:14px;
  padding:14px;
}

.chat-panel-stat__value{
  font-size:22px;
  font-weight:800;
  line-height:1;
  margin-bottom:6px;
}

.chat-panel-stat__label{
  font-size:13px;
  opacity:.78;
}

.chat-panel-status{
  min-height:20px;
  font-size:13px;
  opacity:.82;
}

.chat-rooms-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

@media (min-width: 1024px){
  .chat-rooms-grid{
    grid-template-columns:1fr 1fr;
  }
}

.chat-room-card{
  width:100%;
  text-align:left;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.14);
  border-radius:16px;
  padding:14px;
  cursor:pointer;
  color:inherit;
  transition:transform .08s ease, border-color .08s ease, box-shadow .08s ease;
}

.chat-room-card:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 10px 28px rgba(0,0,0,.14);
}

.chat-room-card:focus-visible{
  outline:none;
  border-color:rgba(255,255,255,.26);
  box-shadow:0 0 0 2px rgba(255,255,255,.10);
}

.chat-room-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.chat-room-card__title-wrap{
  min-width:0;
  flex:1 1 auto;
}

.chat-room-card__title{
  font-size:16px;
  font-weight:800;
  line-height:1.25;
  margin:0;
}

.chat-room-card__type{
  margin-top:4px;
  font-size:12px;
  opacity:.72;
}

.chat-room-card__top-right{
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}

.chat-room-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  font-size:12px;
  line-height:1.15;
  white-space:nowrap;
}

.chat-room-badge--mention{
  color:#fff5cf;
  border-color:rgba(255,214,102,.55);
  background:linear-gradient(180deg, rgba(255,196,61,.24) 0%, rgba(255,196,61,.14) 100%);
  font-weight:700;
  box-shadow:0 8px 20px rgba(255,196,61,.12);
}

.chat-room-badge--unread{
  color:#ffe3ed;
  border-color:rgba(255,120,158,.60);
  background:linear-gradient(180deg, rgba(255,120,158,.24) 0%, rgba(255,120,158,.14) 100%);
  font-weight:700;
  box-shadow:0 8px 20px rgba(214,82,126,.14);
}

.chat-room-badge--muted{
  opacity:.82;
}

.chat-room-badge--public{
  border-color:rgba(115,215,255,.34);
  background:rgba(92,173,255,.12);
  color:#d8f5ff;
}

.chat-room-badge--private{
  border-color:rgba(203,176,255,.34);
  background:rgba(174,136,255,.11);
  color:#efe4ff;
}

.chat-room-badge--announcements{
  border-color:rgba(255,166,193,.52);
  background:rgba(255,120,158,.15);
  color:#ffe3ed;
  font-weight:700;
}

.chat-room-badge--closed{
  font-weight:700;
  color:#ffdbe6;
  border-color:rgba(255,157,186,.55);
  background:linear-gradient(
    180deg,
    rgba(255,120,158,.22) 0%,
    rgba(255,120,158,.12) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 20px rgba(214,82,126,.16);
}

.chat-room-card__context{
  margin-top:10px;
  font-size:13px;
  opacity:.80;
  line-height:1.4;
}

.chat-room-card__preview{
  margin-top:12px;
  font-size:14px;
  line-height:1.42;
  color:inherit;
  word-break:break-word;
}

.chat-room-card__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

.chat-room-card__meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.chat-room-card__date{
  font-size:12px;
  opacity:.72;
  white-space:nowrap;
}

.chat-panel-empty{
  border:1px dashed rgba(255,255,255,.14);
  border-radius:16px;
  padding:18px 16px;
  opacity:.84;
  background:rgba(255,255,255,.02);
}

.chat-panel-loading{
  opacity:.82;
  padding:6px 2px;
}

:where(body.theme-light, html[data-theme="light"]) .chat-room-badge--closed{
  border-color:#e7c3cf;
  background:#fff3f7;
  color:#8c3b57;
  box-shadow:none;
}

:where(body.theme-light, html[data-theme="light"]) .chat-room-badge--mention{
  border-color:#f1d58c;
  background:#fff7df;
  color:#8e6400;
  box-shadow:none;
}

:where(body.theme-light, html[data-theme="light"]) .chat-room-badge--unread{
  border-color:#e7c3cf;
  background:#fff3f7;
  color:#8c3b57;
  box-shadow:none;
}

:where(body.theme-light, html[data-theme="light"]) .chat-room-badge--public{
  border-color:#c4d9ff;
  background:#eef5ff;
  color:#295a95;
}

:where(body.theme-light, html[data-theme="light"]) .chat-room-badge--private{
  border-color:#d9cdf8;
  background:#f6f1ff;
  color:#6b43a5;
}

:where(body.theme-light, html[data-theme="light"]) .chat-room-badge--announcements{
  border-color:#e7c3cf;
  background:#fff3f7;
  color:#8c3b57;
}

:where(body.theme-light, html[data-theme="light"]) .chat-panel-search-field{
  background:color-mix(in srgb, rgba(255,255,255,.92) 84%, rgba(224,242,254,.72));
  border-color:color-mix(in srgb, var(--theme-primary, #38bdf8) 30%, rgba(15,23,42,.10));
  box-shadow:
    0 14px 36px rgba(15, 23, 42, .13),
    0 0 22px color-mix(in srgb, var(--theme-primary, #38bdf8) 12%, transparent);
}

@media (max-width: 767px){
  .chat-panel-extras{
    top:calc(var(--app-header-safe-height, var(--dashboard-floating-content-offset, 4.25rem)) + 0.35rem);
    padding-top:0.35rem;
    padding-bottom:0.45rem;
  }

  .chat-panel-tools{
    flex-wrap:wrap;
  }

  .chat-panel-search-field{
    max-width:calc(100vw - 2.1rem);
  }

  .chat-panel-tools-actions{
    width:100%;
    justify-content:flex-end;
  }

  .chat-panel-stats{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
  }

  .chat-panel-stat{
    min-width:0;
    padding:10px 8px;
    border-radius:14px;
  }

  .chat-panel-stat__value{
    font-size:20px;
    margin-bottom:5px;
  }

  .chat-panel-stat__label{
    font-size:11px;
    line-height:1.15;
  }
}