/* ---------- GENEL DEĞİŞKENLER ---------- */
:root {
  --radius: 8px;
  --transition: 0.25s ease;
  --vh: 1vh; /* Mobil address‑bar shrink fix için JS'ten güncellenebilir */
  --bounce-easing: cubic-bezier(0.36, 0.07, 0.19, 0.97);
  --elastic-easing: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Avatar boyutları için varsayılan değerler */
  --bot-avatar-size: 36px;
  --user-avatar-size: 36px;
  --header-avatar-size: 36px;
  --button-icon-size: 24px;
}

/* ---------- FULLSCREEN ---------- */
.chat-container.fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 9999 !important;
}

/* ---------- TEMEL RESPONSIVE BOYUTLAR ---------- */
.chat-container{
  width: clamp(320px, 90vw, 600px);
  height: clamp(520px, 85vh, 90vh);
}

/* XXL (≥1200px) – masaüstü geniş */
@media (min-width:1200px){
  .chat-container{width:600px;}
}

/* LG (≥992px) */
@media (min-width:992px) and (max-width:1199.98px){
  .chat-container{width:520px;}
}

/* MD (≥768px) */
@media (min-width:768px) and (max-width:991.98px){
  .chat-container{width:480px;}
}

/* SM (≥576px) */
@media (min-width:576px) and (max-width:767.98px){
  .chat-container{width:90vw;height:90vh;}
}

/* XS (<576px) – telefon dikey */
@media (max-width:575.98px){
  .chat-container{
    position: fixed !important;
    inset: 0 !important;
    width:100vw !important;
    height:100dvh !important;
    border-radius:0 !important;
  }
  #fullscreen-toggle{display:none!important;}
  
  /* Mesaj balonları */
  .message{max-width:90%;}
  
  /* Follow‑up & starter prompts */
  .follow-up-prompts button,
  .starter-prompts .prompt-button{
    font-size:0.8rem;
    min-width:120px;
    padding:6px 10px;
  }
}

/* ---------- DOSYA & GÖRSEL EKLER ---------- */
.attached-file{
  padding:6px 16px;
  gap:8px;
}
.attached-file .file-info span{flex:1;min-width:0;}
@media (max-width:480px){
  .attached-file .file-info svg,
  .attached-file .file-info img{display:none;}
  .attached-file{font-size:0.9rem;padding:4px 12px;}
}

/* ---------- SCROLLBAR GİZLEME ---------- */
#chat-window,
.chat-messages{
  scrollbar-width:none;
}
#chat-window::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar{display:none;}

/* ===  FULL‑MOBILE MODAL  ================================================= */
@media (max-width:575.98px){
  /* ChatWindow mobilde slide‑in modal */
  .chat-window.mobile-full {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transform: translateY(100%);           /* başlangıç: ekran dışında */
    animation: slideIn .45s cubic-bezier(.36,.66,.04,1) forwards;
    will-change: transform;
    box-sizing: border-box !important;
  }
  .chat-window.mobile-full.hide{
    animation: slideOut .35s cubic-bezier(.36,.66,.04,1) forwards;
  }
  @keyframes slideIn  {to{transform:translateY(0);}}
  @keyframes slideOut {to{transform:translateY(100%);}}
}

/* ===  BUTON / AVATAR / BALON MICRO‑HOVER  ================================ */
.chat-button:hover {
  transform: scale(1.12) rotate(5deg);
  transition: transform 0.3s var(--elastic-easing);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.prompt-button:hover,
.follow-up-prompts button:hover {
  transform: translateY(-4px) scale(1.05);
  transition: all 0.3s var(--elastic-easing);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.copy-button:active {
  transform: scale(.85);
  transition: transform 0.15s var(--bounce-easing);
}

/* Chat button pulse effect */
.chat-button {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

/* ===  MESAJ BALONLARI ANİMASYONLARI  ================================ */
/* Mesaj balonları animasyonu */
.message.bot {
  animation: botMessageIn 0.4s var(--bounce-easing) forwards;
  transform-origin: left center;
  opacity: 0;
}

.message.user {
  animation: userMessageIn 0.4s var(--bounce-easing) forwards;
  transform-origin: right center;
  opacity: 0;
}

@keyframes botMessageIn {
  0% {
    opacity: 0;
    transform: translateX(-20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes userMessageIn {
  0% {
    opacity: 0;
    transform: translateX(20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* ===  HEADER BUTONLARI  ================================ */
.reset-button,
.close-button {
  transition: transform 0.2s var(--bounce-easing);
}

.reset-button:hover,
.close-button:hover {
  transform: scale(1.2) rotate(5deg);
}

.reset-button:active,
.close-button:active {
  transform: scale(0.9);
}

/* Yazma baloncuğu (bot düşünüyor) pırıltısı */
.thinking {
  animation: thinkingBounce 0.6s var(--bounce-easing) forwards;
}

@keyframes thinkingBounce {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.thinking .dot{opacity:.3;}
@keyframes bubbleFlash{
  0%{opacity:.3;transform:scale(0.8);}
  50%{opacity:.9;transform:scale(1.2);}
  100%{opacity:.3;transform:scale(0.8);}
}
.thinking .dot{
  animation: bubbleFlash 1.2s var(--elastic-easing) infinite;
}

/* Send button animation */
.send-button:hover {
  transform: scale(1.15) rotate(5deg);
  transition: all 0.3s var(--elastic-easing);
}

.send-button:active {
  transform: scale(0.9);
  transition: transform 0.15s var(--bounce-easing);
}

/* Textarea focus animation */
textarea:focus {
  box-shadow: 0 0 0 3px rgba(98, 70, 234, 0.2);
  transition: all 0.3s var(--bounce-easing);
}

/* ===  BUTON ANİMASYONLARI  ================================ */
.send-button:hover svg {
  animation: sendButtonWiggle 1s var(--elastic-easing) infinite;
}

@keyframes sendButtonWiggle {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px) rotate(5deg); }
  75% { transform: translateX(-2px); }
}

/* Tüm butonlar için hover efekti */
button {
  transition: all 0.3s var(--bounce-easing);
}

button:hover {
  transform: scale(1.05);
}

button:active {
  transform: scale(0.95);
}

/* Prompts container popup animasyonu */
.starter-prompts, .follow-up-prompts {
  animation: promptsPopIn 0.5s var(--elastic-easing) forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes promptsPopIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  50% {
    opacity: 1;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Prompt butonları için kademeli animasyon */
.prompt-button, .follow-up-prompts button {
  animation: buttonPopIn 0.5s var(--elastic-easing) forwards;
  opacity: 0;
  transform: translateY(20px);
}

.prompt-button:nth-child(1), .follow-up-prompts button:nth-child(1) { animation-delay: 0.1s; }
.prompt-button:nth-child(2), .follow-up-prompts button:nth-child(2) { animation-delay: 0.2s; }
.prompt-button:nth-child(3), .follow-up-prompts button:nth-child(3) { animation-delay: 0.3s; }
.prompt-button:nth-child(4), .follow-up-prompts button:nth-child(4) { animation-delay: 0.4s; }
.prompt-button:nth-child(5), .follow-up-prompts button:nth-child(5) { animation-delay: 0.5s; }

@keyframes buttonPopIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  60% {
    opacity: 1;
    transform: translateY(-5px) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Chat window açılış animasyonu */
.chat-window:not(.mobile-full) {
  animation: windowPopIn 0.5s var(--elastic-easing) forwards;
}

@keyframes windowPopIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  60% {
    opacity: 1;
    transform: translateY(-10px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Reset butonu animasyonu */
.reset-button:hover svg {
  animation: resetSpin 2s var(--elastic-easing) infinite;
}

@keyframes resetSpin {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(-20deg); }
  30% { transform: rotate(20deg); }
  40% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
  60% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* ===  PARLAMA & GRADİYAN EFEKTLERİ  ================================ */
.message.bot .message-bubble {
  background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.05) 100%);
  position: relative;
  overflow: hidden;
}

/* Bot mesajlarında parlama efekti */
.message.bot .message-bubble::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  animation: shimmer 4s infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) rotate(30deg);
  }
  100% {
    transform: translateX(100%) rotate(30deg);
  }
}

/* Kullanıcı mesajları için gradyan */
.message.user .message-bubble {
  background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%, rgba(0,0,0,0.1) 100%);
  box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.2);
}

/* Chat butonu için pulse efekti */
@keyframes glowPulse {
  0% {
    box-shadow: 0 0 5px rgba(98, 70, 234, 0.5),
                0 0 10px rgba(98, 70, 234, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(98, 70, 234, 0.8),
                0 0 30px rgba(98, 70, 234, 0.5);
  }
  100% {
    box-shadow: 0 0 5px rgba(98, 70, 234, 0.5),
                0 0 10px rgba(98, 70, 234, 0.3);
  }
}

/* Reset butonu için parıltı efekti */
.reset-button svg {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.reset-button svg::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  animation: resetButtonShimmer 3s infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes resetButtonShimmer {
  0% {
    transform: translateX(-100%) rotate(30deg);
  }
  100% {
    transform: translateX(100%) rotate(30deg);
  }
}

/* ===  MARKDOWN STİLLERİ  ================================ */
.message-bubble {
  text-align: left; /* Mesajların içeriğini her zaman sola hizala */
  overflow: hidden; /* Taşmaları engelle */
}

.message-bubble h1, 
.message-bubble h2, 
.message-bubble h3 {
  margin-top: 10px;
  margin-bottom: 8px;
  font-weight: bold;
  line-height: 1.2;
  text-align: left;
  width: 100%;
}

.message-bubble h1 {
  font-size: 1.3em;
}

.message-bubble h2 {
  font-size: 1.2em;
}

.message-bubble h3 {
  font-size: 1.1em;
}

.message-bubble p {
  margin-bottom: 10px;
  margin-top: 0;
  width: 100%;
  text-align: left;
}

.message-bubble ul, 
.message-bubble ol {
  margin: 10px 0;
  padding-left: 24px;
  width: 100%;
  box-sizing: border-box;
}

.message-bubble ul {
  list-style-type: disc;
}

.message-bubble ol {
  list-style-type: decimal;
}

.message-bubble li {
  padding-left: 5px;
  margin-bottom: 5px;
  display: list-item;
}

/* Markdown içinde liste içerikleri için daha iyi görünüm */
.message-bubble li p {
  margin: 0;
  padding: 0;
}

/* Bot mesajlarında liste elemanları için özel stil */
.message.bot .message-bubble ul li,
.message.bot .message-bubble ol li {
  color: inherit;
}

/* Mesaj balonlarındaki paragraflar arasında daha iyi boşluk */
.message-bubble p + p {
  margin-top: 8px;
}

/* Mesaj içinde kod blokları için daha iyi görünüm */
.message-bubble pre {
  background-color: rgba(0, 0, 0, 0.07);
  padding: 12px;
  border-radius: 5px;
  overflow-x: auto;
  margin: 10px 0;
  width: 100%;
  box-sizing: border-box;
  font-family: monospace;
}

.message-bubble code {
  font-family: monospace;
  background-color: rgba(0, 0, 0, 0.06);
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 0.9em;
  display: inline;
  word-break: break-word;
}

.message-bubble pre code {
  background-color: transparent;
  padding: 0;
  font-size: 0.9em;
  display: block;
  color: inherit;
  width: 100%;
}

.message-bubble a {
  color: #3366BB;
  text-decoration: none;
  border-bottom: 1px solid rgba(51, 102, 187, 0.3);
  transition: all 0.2s;
  word-break: break-word;
}

.message-bubble a:hover {
  border-bottom-color: #3366BB;
}

/* Inline elementleri için düzenlemeler */
.message-bubble strong, 
.message-bubble em, 
.message-bubble code, 
.message-bubble a {
  display: inline;
  vertical-align: baseline;
  line-height: inherit;
}

/* Mesaj konteyneri düzeltmeleri */
.message {
  display: flex;
  max-width: 80%;
  word-break: break-word;
  align-items: flex-start;
}

.message-bubble {
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

/* Markdown elementleri için animasyon */
.message-bubble *:not(img) {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- AVATAR BOYUTLARI ---------- */
/* Avatar alanları */
.message-avatar {
  display: flex;
  align-items: flex-start;
  margin-right: 10px;
  flex-shrink: 0;
}

.bot-message-avatar, .user-message-avatar {
  min-width: var(--bot-avatar-size);
  min-height: var(--bot-avatar-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-avatar img {
  border-radius: 50%;
  width: var(--bot-avatar-size);
  height: var(--bot-avatar-size);
  object-fit: cover;
}

.bot-message-avatar img {
  width: var(--bot-avatar-size);
  height: var(--bot-avatar-size);
}

.user-message-avatar img {
  width: var(--user-avatar-size);
  height: var(--user-avatar-size);
}

.message.bot {
  display: flex;
  align-items: flex-start;
}

.message.user {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
}

.user-message-avatar {
  margin-right: 0;
  margin-left: 10px;
}

.chat-header-avatar {
  display: flex;
  align-items: center;
}

.chat-header-avatar img {
  width: var(--header-avatar-size);
  height: var(--header-avatar-size);
  border-radius: 50%;
  object-fit: cover;
}

button[class*="chat"] img,
.chat-button img {
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  object-fit: cover;
}