/* Yonetici Sohbeti: sol menu tam sayfa, cercevesiz tam ekran hissi */
/* Sohbet sayfasi icerigi tam genislikte, bosluksuz */
#app #page-sohbet{width:100% !important;max-width:none !important;padding:0 !important;margin:0 !important}
#app #page-sohbet .chat-page{
  max-width:none !important;width:100% !important;margin:0 !important;
  display:flex !important;flex-direction:column !important;
  border:0 !important;border-radius:0 !important;overflow:hidden !important;
  background:radial-gradient(900px 500px at 85% -5%,rgba(46,160,220,.12),transparent 65%),linear-gradient(165deg,#0a283e 0%,#041626 70%) !important;
  box-shadow:none !important;
  min-height:calc(100vh - 40px) !important;height:calc(100vh - 40px) !important;
}

/* Baslik: buyuk, foto rozetli, canli gosterge */
.chat-page-head{
  display:flex !important;align-items:center !important;gap:16px !important;
  padding:18px 28px !important;
  background:linear-gradient(120deg,rgba(12,80,120,.95),rgba(7,34,55,.95)) !important;
  border-bottom:1px solid rgba(96,170,210,.26) !important;
  position:relative !important;overflow:hidden !important;
}
.chat-page-head::after{
  content:"" !important;position:absolute !important;inset:0 !important;pointer-events:none !important;
  background:linear-gradient(115deg,transparent 30%,rgba(140,220,250,.08) 45%,transparent 60%) !important;
  background-size:250% 100% !important;animation:chatShine 7s ease-in-out infinite !important;
}
@keyframes chatShine{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}
.chat-page-icon{
  width:58px;height:58px;flex:0 0 auto;display:grid;place-items:center;border-radius:17px;
  background:linear-gradient(145deg,#1d86c9,#0a4a76);border:1px solid rgba(110,205,240,.5);
  color:#eafcff;box-shadow:0 0 28px rgba(45,170,220,.4);
}
.chat-page-icon svg{width:29px;height:29px}
.chat-page-head>div{flex:1;min-width:0}
.chat-page-head small{display:block;color:#5fd7e3;font-size:11px;font-weight:900;letter-spacing:2.4px}
.chat-page-head h2{margin:4px 0 2px;font-size:27px;color:#f2faff}
.chat-page-head p{margin:0;color:#8fb6cb;font-size:12.5px}
.admin-chat-dot.big{width:13px;height:13px}
.admin-chat-dot{
  width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:#5a7280;
  box-shadow:0 0 0 3px rgba(90,114,128,.14);transition:.2s;
}
.admin-chat-dot.on{background:#25e0a6;box-shadow:0 0 0 3px rgba(37,224,166,.16),0 0 14px rgba(37,224,166,.9)}
.admin-chat-sound,.admin-chat-clear{
  border:1px solid rgba(120,180,210,.3) !important;background:rgba(8,30,48,.8) !important;
  color:#a8cadb !important;font-size:15px !important;line-height:1 !important;
  width:36px !important;height:36px !important;border-radius:11px !important;cursor:pointer !important;
  display:grid !important;place-items:center !important;padding:0 !important;flex:0 0 auto !important;
}
.admin-chat-sound[data-on="1"]{border-color:rgba(90,220,240,.55) !important;color:#8fe8ff !important;box-shadow:0 0 10px rgba(90,220,240,.25) !important}
.admin-chat-sound:hover,.admin-chat-clear:hover{color:#fff !important;border-color:#6ad7ef !important}
.admin-chat-clear{border-color:rgba(255,130,150,.4) !important;color:#ff9fb0 !important}
.admin-chat-clear:hover{border-color:#ff7d95 !important;background:rgba(174,40,68,.35) !important}
.admin-chat-clear.hidden{display:none !important}

/* Cevrimici yoneticiler: foto baloncuklu */
.admin-chat-online.page-online{
  display:flex !important;gap:9px !important;flex-wrap:wrap !important;align-items:center !important;
  padding:12px 28px !important;border-bottom:1px solid rgba(96,170,210,.16) !important;
  background:rgba(6,28,45,.55) !important;
}
.admin-chat-online.page-online::before{content:"Çevrimiçi:";color:#7d99a5;font-size:11.5px;font-weight:800;letter-spacing:.5px}
.admin-chat-online.page-online:empty{display:none !important}
.admin-chat-online.page-online[hidden]{display:none !important}
.chat-online-chip{
  display:inline-flex !important;align-items:center !important;gap:8px !important;
  padding:4px 14px 4px 4px !important;border-radius:999px !important;
  background:rgba(20,70,100,.6) !important;border:1px solid rgba(90,200,220,.3) !important;
  color:#d3efff !important;font-size:12.5px !important;font-weight:800 !important;
}
.chat-online-chip i,.chat-online-chip img{
  width:26px !important;height:26px !important;display:grid !important;place-items:center !important;
  border-radius:50% !important;color:#06202c !important;font-size:10px !important;font-style:normal !important;font-weight:900 !important;
  overflow:hidden !important;object-fit:cover !important;
}

/* Mesaj alani: tam ekran, gercekci balonlar */
.admin-chat-body.page-body{
  display:flex !important;flex-direction:column !important;gap:12px !important;
  padding:22px 28px !important;flex:1 !important;min-height:0 !important;overflow-y:auto !important;
  scrollbar-width:thin !important;
  background:radial-gradient(760px 420px at 100% 0,rgba(40,160,200,.09),transparent 70%) !important;
}
.admin-chat-empty{padding:70px 20px;text-align:center;color:#7e9dae;font-size:14.5px;line-height:1.8}
.admin-chat-empty b{display:block;font-size:17px;color:#cfe9f7;margin-bottom:6px}
.chat-day{
  align-self:center !important;margin:6px 0 2px !important;padding:5px 16px !important;
  border-radius:999px !important;background:rgba(20,70,100,.5) !important;border:1px solid rgba(90,200,220,.2) !important;
  color:#8fb9cc !important;font-size:11.5px !important;font-weight:800 !important;
}
.chat-msg{display:flex;gap:10px;align-items:flex-end;animation:chatMsgIn .22s ease;max-width:78%}
@keyframes chatMsgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.chat-msg.mine{flex-direction:row-reverse;align-self:flex-end}
.chat-msg:not(.mine){align-self:flex-start}
.chat-avatar{
  width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  font-size:14px;font-weight:900;color:#062029;overflow:hidden;object-fit:cover;
  box-shadow:0 3px 12px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.4);
  border:2px solid rgba(255,255,255,.14);
}
.chat-bubble{max-width:min(560px,60vw);padding:11px 16px;border-radius:17px 17px 17px 6px;background:rgba(16,58,86,.92);border:1px solid rgba(96,170,210,.28);box-shadow:0 6px 18px rgba(0,8,20,.3)}
.chat-msg.mine .chat-bubble{border-radius:17px 17px 6px 17px;background:linear-gradient(135deg,rgba(236,185,66,.96),rgba(196,136,25,.96));border-color:rgba(255,222,141,.55)}
.chat-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.chat-meta b{font-size:12.5px;color:#a9d5ea;font-weight:800}
.chat-msg.mine .chat-meta b{color:#3d2a02}
.chat-meta time{font-size:10px;color:#7c9db0}
.chat-msg.mine .chat-meta time{color:#6b5109}
.chat-bubble p{margin:0;font-size:14.5px;line-height:1.6;color:#eaf7ff;overflow-wrap:anywhere}
.chat-msg.mine .chat-bubble p{color:#2a1c00}

/* Dosya kartlari */
.chat-file-card{
  display:flex !important;align-items:center !important;gap:12px !important;
  text-decoration:none !important;color:inherit !important;
  padding:5px !important;border-radius:10px !important;
}
.chat-msg.mine .chat-file-card{color:#2a1c00}
.chat-file-icon{font-size:30px}
.chat-file-card.img{flex-direction:column !important;align-items:stretch !important;gap:8px !important}
.chat-file-card.img img{max-width:min(340px,52vw);border-radius:10px;display:block;background:#000}
.chat-file-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.chat-file-meta b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
.chat-file-meta small{font-size:11px;opacity:.75}

/* Yaziyor gostergesi */
.admin-chat-typing.page-typing{
  display:flex !important;align-items:center !important;gap:9px !important;
  padding:9px 28px !important;
  background:rgba(6,28,45,.6) !important;color:#8fd9ef !important;font-size:12.5px !important;
}
.admin-chat-typing[hidden]{display:none !important}
.typing-dots{display:inline-flex;gap:4px}
.typing-dots i{width:6px;height:6px;border-radius:50%;background:#5cd8f0;animation:typingBounce 1.1s infinite}
.typing-dots i:nth-child(2){animation-delay:.15s}
.typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}

/* Alt bar: dosya + girdi + gonder */
.admin-chat-form.page-form{
  display:flex !important;gap:11px !important;padding:16px 28px 22px !important;
  border-top:1px solid rgba(96,170,210,.22) !important;background:rgba(5,24,38,.88) !important;
  align-items:center !important;
}
.chat-attach{
  width:46px !important;height:46px !important;flex:0 0 auto !important;
  display:grid !important;place-items:center !important;font-size:20px !important;cursor:pointer !important;
  border:1px solid rgba(120,180,210,.35) !important;border-radius:13px !important;background:rgba(10,40,62,.8) !important;
  transition:.15s !important;
}
.chat-attach:hover{border-color:#6ad7ef !important;transform:translateY(-1px)}
.admin-chat-form.page-form input#chatInput{
  flex:1 !important;min-width:0 !important;border:1px solid #22516e !important;border-radius:13px !important;
  background:#04182a !important;color:#eaf7ff !important;font-size:14.5px !important;padding:13px 17px !important;outline:0 !important;
}
.admin-chat-form.page-form input#chatInput:focus{border-color:#3fd0f0 !important;box-shadow:0 0 0 3px rgba(63,208,240,.12) !important}
.admin-chat-form.page-form button#chatSend{
  padding:0 26px !important;height:46px !important;flex:0 0 auto !important;border:1px solid #e6b73d !important;border-radius:13px !important;
  background:linear-gradient(135deg,#ffd970,#e2a72a) !important;color:#332200 !important;
  font-size:14px !important;font-weight:900 !important;cursor:pointer !important;white-space:nowrap !important;
}
.admin-chat-form.page-form button#chatSend:hover{filter:brightness(1.08)}
.admin-chat-form.page-form button#chatSend:disabled{opacity:.6;cursor:wait}

@media(max-width:900px){
  .chat-msg{max-width:96%}
  .chat-bubble{max-width:78vw}
  .chat-file-card.img img{max-width:70vw}
  .admin-chat-body.page-body{padding:14px !important}
  .admin-chat-form.page-form{padding:12px 14px 16px !important}
  .chat-page-head{padding:14px 16px !important}
  .chat-page-head h2{font-size:21px}
}