/* ============================================================
   Filmbol Sohbet Widget — modern UI (2026-10-03)
   messages/assets/chat_ui.css  (global.php'de en son yuklenir -> tema kurallarini ezer)
   ID-ozgul secicilerle yazildi; tema degiskenlerini kullanir (acik/koyu uyumlu).
   ============================================================ */

:root{
  --fbc-accent:#1f6feb;
  --fbc-accent-2:#3fa7ff;
  --fbc-radius:16px;
  --fbc-surface:var(--trow-bg,#fff);
  --fbc-surface-2:var(--body-bg,#f4f6fb);
  --fbc-border:var(--default-border-color,rgba(128,128,128,.18));
  --fbc-text:var(--default-color,#2b2f3a);
  --fbc-muted:var(--default-light-color,#8a90a2);
  --fbc-shadow:0 18px 48px -12px rgba(16,24,40,.38);
}

/* ---------- Toggle (acma) butonu ---------- */
#chat-toggle-button.chat-toggle-button{
  position:fixed; right:18px; bottom:18px; z-index:99990;
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px; border-radius:999px; cursor:pointer;
  font-weight:700; font-size:14px; letter-spacing:.2px; color:#fff;
  background:linear-gradient(135deg,var(--fbc-accent),var(--fbc-accent-2));
  box-shadow:0 10px 26px -6px rgba(31,111,235,.55); border:0;
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s, filter .18s;
}
#chat-toggle-button.chat-toggle-button:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -8px rgba(31,111,235,.65); filter:brightness(1.05); }
#chat-toggle-button.chat-toggle-button:active{ transform:translateY(0); }
#chat-toggle-button .chat-badge{
  position:absolute; top:-6px; right:-4px; min-width:19px; height:19px; padding:0 5px;
  background:#e5484d; color:#fff; border-radius:999px; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--fbc-surface);
}

/* ---------- Panel ---------- */
#chat-panel-body{
  position:fixed !important; right:18px; bottom:74px; z-index:99991;
  width:370px; max-width:calc(100vw - 24px); height:70vh; max-height:620px;
  background:var(--fbc-surface); color:var(--fbc-text);
  border:1px solid var(--fbc-border); border-radius:var(--fbc-radius);
  box-shadow:var(--fbc-shadow); overflow:hidden !important;
  display:none; flex-direction:column;
  transform-origin:bottom right;
  animation:fbcPanelIn .26s cubic-bezier(.16,1,.3,1);
}
#chat-panel-body[style*="display: block"],
#chat-panel-body[style*="display:block"]{ display:flex !important; }
@keyframes fbcPanelIn{ from{ opacity:0; transform:translateY(16px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } }

/* ---------- Panel baslik ---------- */
#chat-panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 16px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--fbc-accent),var(--fbc-accent-2));
  border-bottom:0; color:#fff; font-weight:700; position:static;
}
#chat-panel-head .cph-title{ display:flex; align-items:center; gap:9px; font-size:15px; }
#chat-panel-head .cph-btns{ display:flex; gap:7px; }
#chat-panel-head .cph-btns button{
  cursor:pointer; border:0; background:rgba(255,255,255,.18); color:#fff;
  width:30px; height:30px; border-radius:9px; font-size:15px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; transition:background .15s, transform .15s;
}
#chat-panel-head .cph-btns button:hover{ background:rgba(255,255,255,.34); transform:translateY(-1px); }
#chat-panel-head .cph-btns #chat-close-btn:hover{ background:#e5484d; }

/* ---------- Govde (liste / konusma) ---------- */
#chat-list-view, #chat-conversation-view{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
#chat-list-view{ overflow-y:auto; animation:fbcFade .22s ease; }
#chat-conversation-view{ animation:fbcSlide .24s cubic-bezier(.16,1,.3,1); }
@keyframes fbcFade{ from{opacity:0} to{opacity:1} }
@keyframes fbcSlide{ from{opacity:0; transform:translateX(10px)} to{opacity:1; transform:translateX(0)} }

/* ---------- Sohbet listesi ---------- */
#chat-list-view .message-list{ display:flex; flex-direction:column; padding:6px; }
#chat-list-view .message-item{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px;
  text-decoration:none; color:var(--fbc-text); position:relative; transition:background .15s, transform .12s;
}
#chat-list-view .message-item:hover{ background:rgba(31,111,235,0.08); }
#chat-list-view .message-item:active{ transform:scale(.995); }
#chat-list-view .message-item > img{
  width:46px; height:46px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  background:var(--fbc-surface-2); border:1px solid var(--fbc-border);
}
#chat-list-view .message-info{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:2px; }
#chat-list-view .message-info .username{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#chat-list-view .message-info .preview{ font-size:12.5px; color:var(--fbc-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#chat-list-view .message-info .time{ font-size:11px; color:var(--fbc-muted); margin-top:1px; }
#chat-list-view .message-info .unread-dot{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:10px; height:10px; border-radius:50%; background:var(--fbc-accent); box-shadow:0 0 0 3px rgba(31,111,235,0.22);
}
/* "Yeni Mesaj Gonder" satiri */
#chat-list-view .message-item[data-uid="new"]{
  background:rgba(31,111,235,0.10); margin:4px 6px 8px; border:1px dashed rgba(31,111,235,0.40);
}
#chat-list-view .message-item[data-uid="new"] .username{ color:var(--fbc-accent); }
#chat-list-view .message-item[data-uid="new"] > img{ padding:9px; background:rgba(31,111,235,0.14); border:0; }

/* ---------- Konusma gorunumu ---------- */
#chat-conversation-view .chat-container{
  position:relative; max-width:none !important; margin:0 !important; height:100% !important;
  background:var(--fbc-surface); border-radius:0; display:flex; flex-direction:column; overflow:hidden;
}
#chat-conversation-view .chat-header{
  display:flex; align-items:center; gap:10px; padding:10px 12px; height:auto; flex:0 0 auto;
  background:var(--fbc-surface-2); color:var(--fbc-text); box-shadow:0 1px 0 var(--fbc-border); font-weight:600;
}
#chat-conversation-view .chat-header .back-button,
#chat-conversation-view .chat-header #back-to-list{
  background:transparent; border:0; color:var(--fbc-text); font-size:18px; cursor:pointer;
  width:34px; height:34px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; transition:background .15s;
}
#chat-conversation-view .chat-header .back-button:hover{ background:rgba(31,111,235,0.12); }
#chat-conversation-view .chat-user-info{ display:flex; align-items:center; gap:10px; min-width:0; }
#chat-conversation-view .chat-user-info img{ width:38px; height:38px; border-radius:50%; object-fit:cover; border:1px solid var(--fbc-border); background:var(--fbc-surface); }
#chat-conversation-view .chat-username{ font-size:15px; font-weight:700; max-width:170px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#chat-conversation-view .chat-username a{ color:inherit; text-decoration:none; }
#chat-conversation-view .delete-chat-class{ margin-left:auto; background:transparent; border:0; color:var(--fbc-muted); cursor:pointer; width:34px; height:34px; border-radius:9px; transition:background .15s,color .15s; }
#chat-conversation-view .delete-chat-class i{ font-size:16px !important; }
#chat-conversation-view .delete-chat-class:hover{ background:rgba(229,72,77,.12); color:#e5484d; }

/* mesaj alani */
#chat-conversation-view .chat-messages{
  flex:1 1 auto; min-height:0; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:3px;
  background:var(--fbc-surface);
}
/* baloncuklar */
#chat-conversation-view .message{
  position:relative; max-width:78%; min-width:0; width:fit-content; margin:3px 0; padding:9px 12px 20px;
  border-radius:16px; font-size:13.5px; line-height:1.4; word-wrap:break-word; clear:both;
  box-shadow:0 1px 2px rgba(16,24,40,.08); animation:none;
}
#chat-conversation-view .message .message-text{ white-space:pre-wrap; }
#chat-conversation-view .message .message-time{ position:absolute; right:10px; bottom:5px; font-size:10px; opacity:.7; }
#chat-conversation-view .message.from-me{
  align-self:flex-end; float:none; text-align:left; margin-left:auto;
  background:linear-gradient(135deg,var(--fbc-accent),var(--fbc-accent-2)); color:#fff; border-bottom-right-radius:5px;
}
#chat-conversation-view .message.from-them{
  align-self:flex-start; float:none; background:var(--fbc-surface-2); color:var(--fbc-text); border:1px solid var(--fbc-border); border-bottom-left-radius:5px;
}
#chat-conversation-view .message.from-me .message-time{ color:rgba(255,255,255,.85); }
#chat-conversation-view .message .chat-image-thumb{ max-width:200px; border-radius:10px; display:block; }
#chat-conversation-view .msg-delete{ color:inherit; opacity:.5; }

/* giris alani */
#chat-conversation-view .chat-input{
  display:flex; align-items:flex-end; gap:6px; padding:9px 10px; flex:0 0 auto;
  background:var(--fbc-surface-2); border-top:1px solid var(--fbc-border);
}
#chat-conversation-view .chat-input textarea{
  flex:1 1 auto; resize:none; min-height:40px; max-height:120px; padding:10px 14px;
  border:1px solid var(--fbc-border); border-radius:20px; background:var(--fbc-surface); color:var(--fbc-text);
  font-size:13.5px; line-height:1.4; outline:none; font-family:inherit; transition:border-color .15s, box-shadow .15s;
}
#chat-conversation-view .chat-input textarea:focus{ border-color:var(--fbc-accent); box-shadow:0 0 0 3px rgba(31,111,235,0.16); }
#chat-conversation-view .chat-input button{
  flex:0 0 auto; width:40px; height:40px; margin:0; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--fbc-muted); cursor:pointer; font-size:19px !important;
  display:inline-flex; align-items:center; justify-content:center; transition:background .15s, color .15s, transform .12s;
}
#chat-conversation-view .chat-input button i{ font-size:19px !important; color:inherit !important; }
#chat-conversation-view .chat-input button:hover{ background:rgba(31,111,235,0.12); color:var(--fbc-accent); }
#chat-conversation-view .chat-input #send-button{ background:linear-gradient(135deg,var(--fbc-accent),var(--fbc-accent-2)); color:#fff; }
#chat-conversation-view .chat-input #send-button i{ color:#fff !important; }
#chat-conversation-view .chat-input #send-button:hover{ color:#fff; transform:translateY(-1px); filter:brightness(1.06); }

/* dosya onizleme + emoji */
#chat-conversation-view .file-preview{ margin:0 10px 6px; background:var(--fbc-surface); border:1px solid var(--fbc-border); border-radius:10px; }
#chat-conversation-view .emoji-panel{ background:var(--fbc-surface); border:1px solid var(--fbc-border); border-radius:12px; box-shadow:var(--fbc-shadow); }

/* arama sonuclari (compose) */
#chat-conversation-view .search-result, #chat-conversation-view .chat-search-result{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; cursor:pointer; transition:background .15s;
}
#chat-conversation-view .search-result:hover, #chat-conversation-view .chat-search-result:hover{ background:rgba(31,111,235,0.10); }
#chat-conversation-view .search-result img, #chat-conversation-view .chat-search-result img{ width:38px; height:38px; border-radius:50%; object-fit:cover; border:1px solid var(--fbc-border); }
#chat-conversation-view input[type="text"], #chat-conversation-view input[type="search"]{
  width:100%; padding:11px 14px; border:1px solid var(--fbc-border); border-radius:12px; background:var(--fbc-surface); color:var(--fbc-text); outline:none;
}
#chat-conversation-view input[type="text"]:focus{ border-color:var(--fbc-accent); box-shadow:0 0 0 3px rgba(31,111,235,0.16); }

/* ---------- ince scrollbar ---------- */
#chat-list-view::-webkit-scrollbar, #chat-conversation-view .chat-messages::-webkit-scrollbar{ width:8px; }
#chat-list-view::-webkit-scrollbar-thumb, #chat-conversation-view .chat-messages::-webkit-scrollbar-thumb{ background:var(--fbc-border); border-radius:8px; }
#chat-list-view::-webkit-scrollbar-thumb:hover, #chat-conversation-view .chat-messages::-webkit-scrollbar-thumb:hover{ background:var(--fbc-muted); }

/* ---------- MOBIL: tam ekran ---------- */
@media (max-width:600px){
  #chat-panel-body{
    bottom: 55px !important;
	width: 90% !important;
	max-width: 100% !important;
	height: 70% !important;
	max-height: 100% !important;
	border-radius: 0;
	border: 0;
	animation: fbcPanelInMobile .26s cubic-bezier(.16, 1, .3, 1);
  }
  @keyframes fbcPanelInMobile{ from{opacity:0; transform:translateY(100%)} to{opacity:1; transform:translateY(0)} }
  #chat-panel-head{ padding:14px 16px; }
  #chat-toggle-button.chat-toggle-button{ right:14px; bottom:14px; padding:12px 16px; }
  #chat-conversation-view .message{ max-width:86%; font-size:14.5px; }
  #chat-conversation-view .chat-input textarea{ font-size:15px; } /* iOS zoom'u onle */
  #chat-list-view .message-item{ padding:12px; }
}