/* Sohbet acilir penceresi — her menude */
.chat-pop{
  position:fixed;right:20px;bottom:20px;z-index:9990;
  width:min(380px,calc(100vw - 32px));
  display:none;flex-direction:column;
  border:1px solid rgba(95,232,242,.5);border-radius:16px;overflow:hidden;
  background:linear-gradient(165deg,#0a2840,#041524);
  box-shadow:0 24px 60px rgba(0,6,18,.6),0 0 34px rgba(42,170,220,.28);
  animation:cpIn .25s cubic-bezier(.2,.8,.3,1);
}
.chat-pop.open{display:flex}
@keyframes cpIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}

.cp-head{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:linear-gradient(120deg,rgba(12,80,120,.95),rgba(7,34,55,.95));
  border-bottom:1px solid rgba(96,170,210,.26);
}
.cp-dot{width:10px;height:10px;border-radius:50%;background:#25e0a6;flex:0 0 auto;
  box-shadow:0 0 10px rgba(37,224,166,.9);animation:cpPulse 1.6s ease-in-out infinite}
@keyframes cpPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.78)}}
.cp-head>div{flex:1;min-width:0}
.cp-head b{display:block;color:#eefaff;font-size:13.5px;font-weight:800}
.cp-head small{display:block;color:#8fb2c4;font-size:10.5px;margin-top:1px}
.cp-close{
  width:28px;height:28px;border-radius:8px;cursor:pointer;flex:0 0 auto;
  border:1px solid rgba(120,180,210,.3);background:rgba(8,30,48,.8);color:#a8cadb;font-size:12px;
}
.cp-close:hover{color:#fff;border-color:#6ad7ef}

.cp-body{
  display:flex;flex-direction:column;gap:10px;padding:14px;
  height:340px;max-height:50vh;overflow-y:auto;scrollbar-width:thin;
  background:radial-gradient(300px 180px at 100% 0,rgba(40,160,200,.09),transparent 70%);
}
.cp-empty{padding:40px 16px;text-align:center;color:#7e9dae;font-size:12.5px;line-height:1.6}
.cp-msg{display:flex;gap:8px;align-items:flex-start;animation:cpMsgIn .2s ease}
@keyframes cpMsgIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.cp-msg.mine{flex-direction:row-reverse}
.cp-face{width:30px;height:30px;flex:0 0 30px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:#1d5b80;color:#04202c;font-size:11px;font-weight:900;border:1.5px solid rgba(255,255,255,.2)}
.cp-face img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.cp-bubble{max-width:74%;padding:9px 12px;border-radius:13px 13px 13px 4px;
  background:rgba(16,58,86,.92);border:1px solid rgba(96,170,210,.28)}
.cp-msg.mine .cp-bubble{border-radius:13px 13px 4px 13px;
  background:linear-gradient(135deg,rgba(236,185,66,.96),rgba(196,136,25,.96));border-color:rgba(255,222,141,.55)}
.cp-meta{display:flex;align-items:baseline;gap:6px;margin-bottom:3px}
.cp-meta b{font-size:10.5px;color:#a9d5ea;font-weight:800}
.cp-msg.mine .cp-meta b{color:#3d2a02}
.cp-meta time{font-size:9px;color:#7c9db0}
.cp-msg.mine .cp-meta time{color:#6b5109}
.cp-bubble p{margin:0;font-size:13px;line-height:1.5;color:#eaf7ff;overflow-wrap:anywhere}
.cp-msg.mine .cp-bubble p{color:#2a1c00}
.cp-file{font-size:12.5px;color:#8fe8ff;text-decoration:none;font-weight:700}

.cp-typing{display:flex;align-items:center;gap:7px;padding:7px 14px;
  background:rgba(6,28,45,.65);color:#8fd9ef;font-size:11.5px;border-top:1px solid rgba(96,170,210,.16)}
.cp-typing[hidden]{display:none}
.typing-dots{display:inline-flex;gap:3px}
.typing-dots i{width:5px;height:5px;border-radius:50%;background:#5cd8f0;animation:cpBounce 1.1s infinite}
.typing-dots i:nth-child(2){animation-delay:.15s}
.typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes cpBounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}

.cp-form{display:flex;gap:8px;padding:10px;border-top:1px solid rgba(96,170,210,.22);background:rgba(5,24,38,.9)}
.cp-form input{flex:1;min-width:0;border:1px solid #22516e;border-radius:11px;background:#04182a;
  color:#eaf7ff;font-size:13px;padding:11px 13px;outline:0}
.cp-form input:focus{border-color:#3fd0f0;box-shadow:0 0 0 3px rgba(63,208,240,.12)}
.cp-form button{width:42px;flex:0 0 auto;border:1px solid #e6b73d;border-radius:11px;
  background:linear-gradient(135deg,#ffd970,#e2a72a);color:#332200;font-size:17px;font-weight:900;cursor:pointer}
.cp-form button:hover{filter:brightness(1.08)}

@media(max-width:600px){
  .chat-pop{right:8px;bottom:8px;left:8px;width:auto}
  .cp-body{height:44vh}
}