/* ============================================================
   bot-chat GÖRSEL YENİLEME v2 — "WOW": aurora + glassmorphism +
   gradient kimlik + hero kart + zengin chat ekranı.
   En son yüklenir; mevcut Tailwind DOM'unu yeniden-skinler.
   ============================================================ */
:root{
  --rx-a1:#8b5cf6; --rx-a2:#d946ef; --rx-a3:#6366f1;
  --rx-grad:linear-gradient(135deg,#6366f1 0%,#8b5cf6 45%,#d946ef 100%);
  --rx-glow:0 8px 30px rgba(139,92,246,.35);
  --rx-glass:rgba(24,22,38,.55); --rx-glass2:rgba(255,255,255,.04);
  --rx-stroke:rgba(255,255,255,.08); --rx-stroke2:rgba(255,255,255,.14);
  --rx-t1:#f6f5fb; --rx-t2:#b3b0c7; --rx-t3:#7b7893;
}
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased; letter-spacing:-.01em;
  background:#08070d !important; position:relative;
}
/* ---------- Aurora arka plan ---------- */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 12% -5%, rgba(99,102,241,.20), transparent 60%),
    radial-gradient(55vw 55vh at 100% 8%, rgba(217,70,239,.15), transparent 55%),
    radial-gradient(45vw 45vh at 60% 115%, rgba(139,92,246,.16), transparent 60%),
    url('/assets/visuals/aurora-network-bg.webp') center/cover no-repeat;
}
#pin-overlay{
  background:
    radial-gradient(circle at 50% 32%,rgba(124,92,246,.22),transparent 32%),
    linear-gradient(rgba(8,7,13,.88),rgba(8,7,13,.94)),
    url('/assets/visuals/aurora-network-bg.webp') center/cover no-repeat !important;
}
#pin-overlay[style*="display: flex"] ~ #simple-menu-btn{ display:none !important; }
.pin-card{
  position:relative; border:1px solid var(--rx-stroke2); border-radius:28px;
  background:rgba(18,16,30,.72); backdrop-filter:blur(24px) saturate(135%);
  box-shadow:0 28px 90px rgba(0,0,0,.55),0 0 0 1px rgba(139,92,246,.06) inset;
}
.pin-card__mascot{ width:126px; height:auto; margin:-76px auto 4px; filter:drop-shadow(0 18px 32px rgba(111,72,232,.36)); }
.pin-card__eyebrow{ display:block; margin-bottom:8px; font:600 9px/1 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing:.24em; color:#a78bfa; }
.pin-input{
  display:block; width:100%; height:52px; margin:12px auto 24px; padding:0 18px;
  border:1px solid var(--rx-stroke2); border-radius:15px; background:rgba(255,255,255,.045);
  color:#fff; text-align:center; font-size:22px; letter-spacing:.38em; caret-color:#a78bfa;
}
.pin-input::placeholder{ letter-spacing:.08em; font-size:13px; color:var(--rx-t3); }
.pin-input:focus{ border-color:#8b5cf6; box-shadow:0 0 0 4px rgba(139,92,246,.14); outline:none; }
.pin-btn{ background:rgba(255,255,255,.045) !important; border:1px solid var(--rx-stroke) !important; backdrop-filter:blur(10px); }
.pin-btn:hover{ background:rgba(139,92,246,.18) !important; border-color:rgba(167,139,250,.45) !important; }
/* ---------- Yüzen cam paneller ---------- */
.flex.h-screen{ position:relative; z-index:1; gap:14px; padding:14px; height:100vh; background:transparent; }
#sidebar{
  background:var(--rx-glass) !important; backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--rx-stroke) !important; border-radius:22px !important;
  box-shadow:0 20px 60px rgba(0,0,0,.45); overflow:hidden;
}
#chat-area{
  background:var(--rx-glass) !important; backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--rx-stroke) !important; border-radius:22px !important;
  box-shadow:0 20px 60px rgba(0,0,0,.45); overflow:hidden; position:relative;
}
#chat-area::before{
  content:""; position:absolute; right:-6%; bottom:-7%; width:min(62vw,920px); aspect-ratio:3/2;
  background:url('/assets/visuals/community-network.webp') center/contain no-repeat;
  opacity:.085; mix-blend-mode:screen; filter:saturate(.8); pointer-events:none;
}
#chat-area > *{ position:relative; z-index:1; }
#chat-area > #profile-panel,
#chat-area > #members-panel,
#chat-area > #nearby-panel{ z-index:30; }
}
/* ---------- Hero (bot kartı) ---------- */
#sidebar > div:first-child{ border-bottom:1px solid var(--rx-stroke) !important; }
#sidebar-bot-avatar{
  width:52px !important; height:52px !important; border-radius:16px !important;
  background:var(--rx-grad) !important; box-shadow:var(--rx-glow); font-size:18px;
}
#sidebar-bot-name{ font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-weight:700; font-size:16px; min-height:20px; }
/* Aksiyon butonları -> cam */
#sidebar .flex.gap-1 > button, #sidebar .flex.gap-1\.5 > button{
  border-radius:12px !important; background:var(--rx-glass2) !important; border:1px solid var(--rx-stroke);
}
#sidebar .flex.gap-1 > button:hover{ border-color:rgba(139,92,246,.4); transform:translateY(-1px); }
#panel-logout-btn{ margin-left:auto; color:#fca5a5; }
.sm-item--logout{ color:#fca5a5 !important; margin-top:8px; border-top:1px solid rgba(255,255,255,.08) !important; }
/* Arama input */
#sidebar input[type="text"]{ background:var(--rx-glass2) !important; border:1px solid var(--rx-stroke) !important; border-radius:14px !important; transition:.18s; }
#sidebar input[type="text"]:focus{ border-color:var(--rx-a1) !important; box-shadow:0 0 0 3px rgba(139,92,246,.18); }

/* ---------- Sekmeler -> gradient pill aktif ---------- */
[id^="sidebar-tab-"]{ border-bottom:none !important; border-radius:12px !important; margin:8px 3px; padding:9px 0 !important; transition:.18s; }
[id^="sidebar-tab-"]:hover{ background:var(--rx-glass2) !important; }
[id^="sidebar-tab-"].border-accent-500{
  background:var(--rx-grad) !important; color:#fff !important; box-shadow:var(--rx-glow);
}

/* ---------- Konuşma listesi -> cam kartlar ---------- */
#conversation-list{ padding:6px 8px; }
.conversation-skeleton{ padding:4px 0; }
.skeleton-row{ display:flex; align-items:center; gap:12px; min-height:64px; padding:10px 8px; }
.skeleton-avatar,.skeleton-copy b,.skeleton-copy i{
  display:block; background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,255,255,.105),rgba(255,255,255,.045));
  background-size:220% 100%; animation:rxSkeleton 1.35s ease-in-out infinite; border-radius:999px;
}
.skeleton-avatar{ width:40px; height:40px; flex:none; }
.skeleton-copy{ flex:1; min-width:0; }
.skeleton-copy b{ width:62%; height:10px; margin-bottom:8px; }
.skeleton-copy i{ width:38%; height:8px; }
@keyframes rxSkeleton{ 0%{background-position:100% 0} 100%{background-position:-120% 0} }
#conversation-list:empty{
  min-height:260px; background:url('/assets/visuals/empty-conversations.webp') center 48px/112px auto no-repeat;
}
#conversation-list:empty::after{
  content:'Your conversations will appear here'; display:block; padding:174px 28px 0;
  color:var(--rx-t3); text-align:center; font-size:12px; line-height:1.5;
}
.conversation-item{ margin-bottom:3px; border-radius:16px !important; border-bottom:none !important; position:relative; }
.conversation-item:hover{ background:rgba(255,255,255,.045) !important; }
.conversation-item.active, .conversation-item.active.bg-dark-700{ background:rgba(139,92,246,.12) !important; border:1px solid rgba(139,92,246,.22); }
.conversation-item.active::before{ content:""; position:absolute; left:-1px; top:50%; transform:translateY(-50%); width:3px; height:30px; background:var(--rx-grad); border-radius:3px; }
.conversation-item .bg-red-500{ background:var(--rx-grad) !important; box-shadow:var(--rx-glow); }
.border-dark-800{ border-color:#16151f !important; }

/* ---------- Chat başlığı ---------- */
#chat-header, #chat-search-bar{ background:transparent !important; border-color:var(--rx-stroke) !important; }
#chat-name{ font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; min-height:27px; }
#chat-header button, #chat-search-bar button{ border-radius:12px; }

/* ---------- Mesajlar (zengin) ---------- */
#messages-wrapper{ padding:24px 26px !important; }
/* gün ayracı gibi merkezlenmiş etiketler */
#messages .text-center.text-xs, #messages .date-separator{ }
/* mesaj balonları */
.chat-message{ display:inline-block; max-width:74%; padding:11px 15px; font-size:14px; line-height:1.5; word-break:break-word; }
.chat-message-incoming{ background:rgba(255,255,255,.055); color:var(--rx-t1); border:1px solid var(--rx-stroke); border-radius:18px 18px 18px 6px; }
.chat-message-outgoing{ background:var(--rx-grad); color:#fff; border-radius:18px 18px 6px 18px; box-shadow:0 6px 20px rgba(139,92,246,.35); }
.chat-message .text-accent-400{ color:#c9b6ff !important; }
/* gönderen adı / zaman */
.message-item .text-xs.font-semibold{ letter-spacing:.01em; }

/* Mesaj geçmişi beklenirken gerçek balon ölçülerini koruyan iskelet. */
.message-skeleton{ width:100%; display:flex; flex-direction:column; gap:13px; padding:10px 0 4px; }
.message-skeleton__row{ display:flex; width:100%; justify-content:flex-start; }
.message-skeleton__row.is-right{ justify-content:flex-end; }
.message-skeleton__row span{
  display:block; width:min(62%,480px); height:62px; border-radius:18px 18px 18px 6px;
  border:1px solid var(--rx-stroke); background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.085),rgba(255,255,255,.035));
  background-size:220% 100%; animation:rxSkeleton 1.35s ease-in-out infinite;
}
.message-skeleton__row.is-right span{ width:min(48%,360px); border-radius:18px 18px 6px 18px; background-color:rgba(139,92,246,.06); }
.message-skeleton__row.is-short span{ width:min(35%,250px); height:48px; }
.message-translation{
  display:flex; align-items:flex-start; gap:7px; margin-top:9px; padding-top:8px;
  border-top:1px solid rgba(255,255,255,.11); color:#c4b5fd; font-size:12.5px;
  line-height:1.45; font-weight:400;
}
.message-translation .fas{ flex:none; margin-top:2px; color:#a78bfa; }

/* ---------- Boş durum (zengin) ---------- */
#messages > .flex.flex-col.items-center{
  padding:64px 20px !important; gap:6px;
}
.chat-welcome{
  min-height:clamp(360px,58vh,620px); text-align:center; isolation:isolate;
}
.chat-welcome__mascot{
  width:clamp(118px,14vw,180px); height:auto; margin-bottom:14px;
  filter:drop-shadow(0 18px 36px rgba(100,66,220,.24));
  animation:rxFloat 6s ease-in-out infinite;
}
.chat-welcome__eyebrow{
  font:600 10px/1 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing:.22em;
  color:#a78bfa; margin-bottom:8px;
}
.chat-welcome__title{
  font:600 clamp(19px,2vw,26px)/1.15 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--rx-t1);
}
.chat-welcome__copy{ max-width:340px; margin-top:4px; color:var(--rx-t3); font-size:13px; }
.panel-empty__art{
  display:block; width:112px; height:112px; object-fit:contain; margin:0 auto 12px;
  filter:drop-shadow(0 12px 24px rgba(91,64,190,.2)); opacity:.9;
}
#friends-empty,#groups-empty,#search-empty,#alerts-empty{
  margin:14px; border:1px solid var(--rx-stroke); border-radius:18px;
  background:linear-gradient(145deg,rgba(139,92,246,.07),rgba(255,255,255,.018));
}
@keyframes rxFloat{
  0%,100%{ transform:translateY(0) rotate(-1deg); }
  50%{ transform:translateY(-8px) rotate(1deg); }
}
@media (prefers-reduced-motion:reduce){ .chat-welcome__mascot{ animation:none; } }
@media (prefers-reduced-motion:reduce){ .skeleton-avatar,.skeleton-copy b,.skeleton-copy i,.message-skeleton__row span{ animation:none; } }
.fas,.fa-solid{ min-width:1em; text-align:center; }
img{ height:auto; }
@media (max-width:768px){
  #chat-area::before{ width:120vw; right:-45%; opacity:.055; }
  .chat-welcome{ min-height:60vh; }
}

/* ---------- Input alanı -> cam pill + gradient gönder ---------- */
#input-area{ background:transparent !important; border-color:var(--rx-stroke) !important; }
#message-input{
  background:var(--rx-glass2) !important; border:1px solid var(--rx-stroke) !important; border-radius:16px !important;
  transition:border-color .15s, box-shadow .15s;
}
#message-input:focus{ border-color:var(--rx-a1) !important; box-shadow:0 0 0 3px rgba(139,92,246,.16); }
/* gradient gönder butonu (HTML'e eklendi: .rx-send) */
.rx-send{
  width:46px; height:46px; flex:none; border:none; border-radius:14px; cursor:pointer;
  background:var(--rx-grad); color:#fff; display:grid; place-items:center; font-size:16px;
  box-shadow:var(--rx-glow); transition:transform .15s, box-shadow .15s;
}
.rx-send:hover{ transform:translateY(-2px) scale(1.04); }
.rx-send:active{ transform:translateY(0) scale(.98); }

/* ---------- Yan paneller (profil/üyeler/yakındakiler) ---------- */
#profile-panel, #members-panel, #nearby-panel{
  background:var(--rx-glass) !important; backdrop-filter:blur(20px);
  border:1px solid var(--rx-stroke) !important; border-radius:22px !important; margin-left:0;
}

/* ---------- Modallar ---------- */
[id$="-modal"].fixed.inset-0, #clear-history-modal.fixed.inset-0{ backdrop-filter:blur(8px); }
[id$="-modal"] > div{ box-shadow:0 24px 70px rgba(0,0,0,.6) !important; border:1px solid var(--rx-stroke) !important; border-radius:20px !important; }
[id$="-modal"]:not(.hidden) > div{ animation:rxPop .18s cubic-bezier(.4,0,.2,1); }
@keyframes rxPop{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
[id$="-modal"] input:focus, [id$="-modal"] textarea:focus, [id$="-modal"] select:focus{ border-color:var(--rx-a1) !important; box-shadow:0 0 0 3px rgba(139,92,246,.16); outline:none; }

/* ---------- Bağlantı durum bandı ---------- */
#connection-banner{ display:none; align-items:center; gap:8px; font-size:12.5px; padding:8px 20px; background:rgba(245,158,11,.14); color:#fbbf24; border-bottom:1px solid rgba(245,158,11,.25); }
#connection-banner.show{ display:flex; }
#connection-banner.ok{ background:rgba(34,197,94,.14); color:#4ade80; border-bottom-color:rgba(34,197,94,.25); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.22); }
::-webkit-scrollbar-track{ background:transparent; }

button{ transition:background-color .15s, color .15s, transform .1s, box-shadow .15s; }

/* ---------- Mobil ---------- */
@media (max-width:768px){
  .flex.h-screen{ padding:0; gap:0; }
  #sidebar{ border-radius:0 !important; }
  #chat-area{ border-radius:0 !important; }
  #message-input{ font-size:16px; }
  .conversation-item{ padding:12px !important; }
  .chat-message{ max-width:86%; }
}