* {
  box-sizing: border-box;
}

:root {
  --bg: #070a12;
  --panel: #111725;
  --panel-2: #0d1320;
  --border: rgba(255,255,255,.09);
  --text: #f5f7ff;
  --muted: #8992a7;
  --muted-2: #667087;
  --primary: #695cff;
  --primary-2: #4f8cff;
  --green: #20d68a;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 25%, rgba(93,74,255,.16), transparent 32%),
    radial-gradient(circle at 86% 72%, rgba(48,108,255,.09), transparent 28%),
    var(--bg);
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

/* TOPBAR */

.topbar {
  height: 78px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6vw;
  background: rgba(7,10,18,.82);
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: linear-gradient(135deg,#725cff,#477fff);
  box-shadow: 0 10px 28px rgba(92,83,255,.3);
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  font-size: 14px;
}

.brand span {
  margin-top: 2px;
  font-size: 10px;
  color: var(--muted);
}

.top-status {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #b9c0ce;
  font-size: 12px;
}

.top-status i,
.chat-title i {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(32,214,138,.8);
}

.top-status i {
  width: 6px;
  height: 6px;
}

/* HERO */

.hero {
  min-height: calc(100vh - 78px);
  max-width: 1250px;
  margin: 0 auto;
  padding: 56px 35px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 440px;
  gap: 70px;
  align-items: center;
}

.intro {
  padding-left: 25px;
}

.badge {
  display: inline-flex;
  border: 1px solid rgba(106,91,255,.55);
  color: #a69eff;
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 10px;
  letter-spacing: .18em;
  font-weight: 700;
}

.intro h1 {
  margin: 22px 0 18px;
  font-size: clamp(46px,5vw,70px);
  line-height: .98;
  letter-spacing: -.045em;
}

.intro h1 span {
  color: #7c73ff;
  background: linear-gradient(90deg,#8a7cff,#4f9aff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.intro p {
  max-width: 590px;
  margin: 0;
  color: #8992a7;
  line-height: 1.8;
  font-size: 15px;
}

.features {
  display: flex;
  gap: 12px;
  margin-top: 38px;
}

.feature {
  min-width: 105px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  background: rgba(15,20,32,.62);
  border-radius: 14px;
}

.feature b,
.feature small {
  display: block;
}

.feature b {
  font-size: 12px;
}

.feature small {
  margin-top: 7px;
  color: var(--muted);
  font-size: 9px;
}

/* CHAT */

.chat-card {
  width: 440px;
  height: 630px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(16,22,35,.96);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  box-shadow:
    0 35px 90px rgba(0,0,0,.42),
    0 0 70px rgba(85,72,255,.08);
}

.chat-header {
  height: 72px;
  flex: 0 0 72px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}

.agent-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,#735cff,#4f8cff);
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(91,80,255,.28);
}

.chat-title {
  flex: 1;
}

.chat-title strong,
.chat-title span {
  display: block;
}

.chat-title strong {
  font-size: 13px;
}

.chat-title span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.chat-title i {
  width: 6px;
  height: 6px;
  margin-right: 4px;
}

.chat-title i.offline {
  background: #6c7382;
  box-shadow: none;
}

.header-action {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #a8b0c0;
  border-radius: 10px;
  font-size: 24px;
}

.header-action:hover {
  color: white;
  background: rgba(255,255,255,.06);
}

/* PRECHAT */

.prechat {
  flex: 1;
  min-height: 0;
  padding: 30px 26px 22px;
  overflow-y: auto;
}

.prechat-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(102,88,255,.5);
  border-radius: 11px;
  color: #9b91ff;
  background: rgba(92,76,255,.08);
}

.prechat h2 {
  margin: 18px 0 8px;
  font-size: 20px;
  letter-spacing: -.025em;
}

.prechat > p {
  margin: 0 0 23px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

.field {
  margin-bottom: 15px;
}

.field label {
  display: block;
  margin-bottom: 7px;
  color: #d7dbe5;
  font-size: 10px;
  font-weight: 600;
}

.field label span {
  color: #677188;
  margin-left: 4px;
  font-weight: 400;
}

.field input {
  width: 100%;
  height: 45px;
  padding: 0 13px;
  outline: 0;
  color: white;
  background: #0a0f19;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  font-size: 12px;
  transition: .2s;
}

.field input::placeholder {
  color: #505a70;
}

.field input:focus {
  border-color: rgba(106,91,255,.75);
  box-shadow: 0 0 0 3px rgba(106,91,255,.08);
}

.primary-btn {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 11px;
  color: white;
  font-weight: 700;
  font-size: 12px;
  background: linear-gradient(90deg,#6b5cff,#4d8cff);
  box-shadow: 0 12px 28px rgba(80,85,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.primary-btn:hover {
  filter: brightness(1.08);
}

.primary-btn:disabled {
  opacity: .55;
  cursor: wait;
}

.privacy-note {
  display: block;
  text-align: center;
  margin-top: 12px;
  color: #555f74;
  font-size: 8px;
}

.form-error {
  min-height: 17px;
  margin-top: 9px;
  text-align: center;
  color: #ff8290;
  font-size: 10px;
}

/* CHAT AREA */

.chat-area {
  flex: 1;
  min-height: 0;
  position: relative;
}

.messages {
  height: 100%;
  overflow-y: auto;
  padding: 20px 16px 16px;
  scrollbar-width: thin;
  scrollbar-color: #31394b transparent;
}

.message {
  max-width: 84%;
  margin-bottom: 17px;
}

.message.visitor {
  margin-left: auto;
  text-align: right;
}

.message.ai,
.message.agent,
.message.system {
  margin-right: auto;
}

.message-label {
  margin: 0 0 6px;
  color: #7e89a1;
  font-size: 8px;
}

.message.visitor .message-label {
  display: none;
}

.bubble {
  display: inline-block;
  padding: 11px 13px;
  border-radius: 12px;
  color: #e9edf5;
  background: #171f30;
  border: 1px solid rgba(255,255,255,.045);
  font-size: 11px;
  line-height: 1.55;
  text-align: left;
}

.message.visitor .bubble {
  background: linear-gradient(135deg,#695cff,#5960ed);
  color: white;
  border: 0;
}

.message.agent .bubble {
  background: #10251f;
  border-color: rgba(32,214,138,.16);
}

.message.system .bubble {
  background: transparent;
  border: 0;
  color: #788399;
  font-size: 10px;
  padding-left: 0;
  padding-right: 0;
}

.message-time {
  margin-top: 4px;
  color: #515b70;
  font-size: 7px;
}

/* TYPING */

.typing {
  position: absolute;
  left: 16px;
  bottom: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  color: #7e879a;
  background: rgba(17,23,37,.94);
  border-radius: 10px;
  font-size: 8px;
}

.typing span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #7c70ff;
  animation: typing 1s infinite;
}

.typing span:nth-child(2) {
  animation-delay: .15s;
}

.typing span:nth-child(3) {
  animation-delay: .3s;
}

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: .35;
  }

  30% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

/* CLOSED */

.closed-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  text-align: center;
}

.closed-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: #73e7b2;
  background: rgba(32,214,138,.08);
  border: 1px solid rgba(32,214,138,.2);
  font-size: 24px;
}

.closed-panel h3 {
  margin: 18px 0 8px;
  font-size: 18px;
}

.closed-panel p {
  max-width: 290px;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.closed-panel .primary-btn {
  width: 220px;
}

/* BOTTOM */

.chat-bottom {
  flex: 0 0 auto;
  padding: 12px 14px 10px;
  border-top: 1px solid var(--border);
  background: #101622;
}

.quick-actions {
  display: flex;
  gap: 7px;
  margin-bottom: 10px;
}

.quick-actions button {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: #9ea7b8;
  background: #121a29;
  font-size: 8px;
}

.quick-actions button:hover {
  color: white;
  border-color: rgba(105,92,255,.4);
}

.quick-actions button:disabled {
  opacity: .45;
  cursor: default;
}

.input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

#messageInput {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  resize: none;
  outline: 0;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  color: white;
  background: #0a0f18;
  font-size: 11px;
}

#messageInput:focus {
  border-color: rgba(105,92,255,.7);
}

#messageInput::placeholder {
  color: #555f73;
}

.send-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 0;
  border-radius: 12px;
  color: white;
  background: linear-gradient(135deg,#6b5cff,#4f8cff);
  font-size: 18px;
}

.send-btn:disabled {
  opacity: .45;
}

.powered {
  padding-top: 9px;
  text-align: center;
  color: #4c566b;
  font-size: 7px;
  letter-spacing: .18em;
}

/* RESPONSIVE */

@media (max-width: 950px) {
  .hero {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 35px;
    padding-top: 35px;
  }

  .intro {
    padding-left: 0;
    text-align: center;
  }

  .intro p {
    margin-left: auto;
    margin-right: auto;
  }

  .features {
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .topbar {
    padding: 0 20px;
  }

  .hero {
    padding: 25px 12px;
  }

  .intro h1 {
    font-size: 42px;
  }

  .features {
    display: none;
  }

  .chat-card {
    width: 100%;
    max-width: 440px;
    height: 650px;
    border-radius: 18px;
  }
}

/* =========================================================
   SPONTANEFT LIVE - PRECHAT / VIEWPORT FIX
   ========================================================= */

html,
body {
  min-height: 100%;
}

body {
  overflow-x: hidden;
}

/* Chat kartı hiçbir zaman ekran yüksekliğini aşmasın */
.chat-card {
  width: min(440px, calc(100vw - 32px));
  height: min(630px, calc(100vh - 120px));
  max-height: calc(100vh - 120px);
  min-height: 0;
  box-sizing: border-box;
}

/* Pre-chat içeriği kartın içinde kendi kendine scroll edebilsin */
.prechat {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 24px 26px 22px;
}

/* Form elemanlarının genişliği taşmasın */
.prechat form,
.prechat .field {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.prechat .field input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Buton kartın dışına çıkmasın */
.prechat .primary-btn {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Mobil / küçük yükseklikler */
@media (max-height: 800px) {

  .chat-card {
    height: calc(100vh - 100px);
    max-height: calc(100vh - 100px);
  }

  .prechat {
    padding-top: 18px;
    padding-bottom: 16px;
  }

  .prechat h2 {
    margin-top: 12px;
    margin-bottom: 7px;
  }

  .prechat > p {
    margin-bottom: 16px;
  }

  .field {
    margin-bottom: 11px;
  }

  .field input {
    height: 42px;
  }

  .primary-btn {
    height: 45px;
  }
}

@media (max-width: 700px) {

  .chat-card {
    width: calc(100vw - 24px);
    height: calc(100vh - 88px);
    max-height: calc(100vh - 88px);
    border-radius: 18px;
  }

  .prechat {
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media (max-height: 680px) {

  .chat-card {
    height: calc(100vh - 70px);
    max-height: calc(100vh - 70px);
  }

  .prechat-icon {
    width: 32px;
    height: 32px;
  }

  .prechat h2 {
    font-size: 18px;
  }

  .prechat > p {
    font-size: 10px;
  }
}


/* =========================================================
   SPONTANEFT LIVE — CHAT PENCERE BOYUT / OKUNABİLİRLİK
   ========================================================= */

/* Masaüstü */
.chat-card {
  width: min(440px, calc(100vw - 32px));

  /*
   * Ekranın kullanılabilir yüksekliğine göre otomatik boyut.
   * Büyük ekranlarda 630px'i geçmez.
   * Küçük ekranlarda alt kısmı ekran dışına taşımaz.
   */
  height: clamp(500px, calc(100dvh - 220px), 630px);
  max-height: calc(100dvh - 220px);
  min-height: 0;

  box-sizing: border-box;
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

/* Chat gövdesi */
.chat-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Mesaj alanı */
.messages {
  min-height: 0;
  padding-bottom: 12px;
}

/* Yazıyor göstergesi */
.typing {
  flex-shrink: 0;
}

/* Alt composer */
.chat-bottom {
  flex-shrink: 0;
  padding: 12px 14px 10px;
  box-sizing: border-box;
}

/* Hızlı işlem butonları */
.quick-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.quick-actions button {
  flex: 1 1 0;
  min-width: 0;

  min-height: 38px;
  padding: 9px 12px;

  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;

  white-space: nowrap;
  text-align: center;

  border-radius: 10px;
}

/* Mesaj yazma satırı */
.input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}

/* Mesaj kutusu */
#messageInput {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  max-height: 100px;

  box-sizing: border-box;

  font-size: 13px;
  line-height: 1.4;
}

/* Gönder butonu */
#sendBtn {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;

  font-size: 18px;
}

/* Powered yazısı */
.powered {
  margin-top: 7px;
  font-size: 10px;
  line-height: 1.2;
}

/* =========================================================
   DAHA KÜÇÜK MASAÜSTÜ / LAPTOP EKRANLARI
   ========================================================= */

@media (max-height: 800px) and (min-width: 701px) {

  .chat-card {
    height: calc(100dvh - 185px);
    max-height: calc(100dvh - 185px);
    min-height: 480px;
  }

  .chat-header {
    min-height: 68px;
  }

  .chat-bottom {
    padding: 9px 12px 8px;
  }

  .quick-actions {
    margin-bottom: 7px;
  }

  .quick-actions button {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 11px;
  }

  #messageInput {
    min-height: 40px;
  }

  #sendBtn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
}

/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 700px) {

  .chat-card {
    width: calc(100vw - 24px);

    height: calc(100dvh - 105px);
    max-height: calc(100dvh - 105px);

    min-height: 500px;

    border-radius: 18px;
  }

  .quick-actions {
    gap: 7px;
  }

  .quick-actions button {
    min-height: 40px;
    padding: 9px 10px;
    font-size: 12px;
  }

  .chat-bottom {
    padding: 10px 10px 8px;
  }
}

/* Çok kısa ekranlar */
@media (max-height: 680px) {

  .chat-card {
    height: calc(100dvh - 85px);
    max-height: calc(100dvh - 85px);
    min-height: 0;
  }

  .chat-bottom {
    padding: 7px 9px 6px;
  }

  .quick-actions {
    margin-bottom: 6px;
  }

  .quick-actions button {
    min-height: 34px;
    padding: 7px 8px;
    font-size: 10px;
  }

  #messageInput {
    min-height: 38px;
  }

  #sendBtn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }

  .powered {
    display: none;
  }
}


/* =========================================================
   SPONTANEFT LIVE — PREMIUM CHAT EXPERIENCE
   ========================================================= */

/* ---------------------------------------------------------
   CHAT CONTAINER
   --------------------------------------------------------- */

.chat-card {
  position: relative;
  isolation: isolate;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(91, 88, 255, .10),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(17, 23, 38, .98),
      rgba(10, 15, 27, .99)
    );

  border: 1px solid rgba(255,255,255,.11);

  box-shadow:
    0 35px 90px rgba(0,0,0,.48),
    0 0 80px rgba(86,82,255,.08);

  backdrop-filter: blur(22px);
}

/* Üst başlık */
.chat-header {
  position: relative;
  flex-shrink: 0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.012)
    );

  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Başlık altına ince ışık */
.chat-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;

  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(112,104,255,.45),
    transparent
  );

  opacity: .65;
}

/* ---------------------------------------------------------
   AVATAR
   --------------------------------------------------------- */

.chat-header .avatar,
.chat-header .brand-avatar {
  box-shadow:
    0 8px 24px rgba(91,88,255,.25),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* ---------------------------------------------------------
   MESSAGE AREA
   --------------------------------------------------------- */

.messages {
  scroll-behavior: smooth;

  padding: 18px 15px 16px;

  scrollbar-width: thin;
  scrollbar-color:
    rgba(255,255,255,.12)
    transparent;
}

.messages::-webkit-scrollbar {
  width: 5px;
}

.messages::-webkit-scrollbar-track {
  background: transparent;
}

.messages::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 20px;
}

.messages::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.20);
}

/* ---------------------------------------------------------
   GENEL MESAJLER
   --------------------------------------------------------- */

.message {
  position: relative;

  margin-bottom: 12px;

  animation: messageAppear .22s ease-out both;
}

@keyframes messageAppear {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------
   ZİYARETÇİ MESAJLARI
   --------------------------------------------------------- */

.message.visitor {
  display: flex;
  justify-content: flex-end;
}

.message.visitor .bubble,
.message.visitor .message-bubble {
  background:
    linear-gradient(
      135deg,
      #665cff,
      #4f8cff
    );

  color: #fff;

  border: 1px solid rgba(255,255,255,.12);

  border-radius:
    17px
    17px
    5px
    17px;

  box-shadow:
    0 10px 26px rgba(77,79,255,.20);

  max-width: 82%;
}

/* ---------------------------------------------------------
   AI MESAJLARI
   --------------------------------------------------------- */

.message.ai {
  display: flex;
  justify-content: flex-start;
}

.message.ai .bubble,
.message.ai .message-bubble {
  background:
    linear-gradient(
      180deg,
      rgba(31,39,59,.96),
      rgba(23,30,47,.96)
    );

  color: rgba(255,255,255,.92);

  border:
    1px solid
    rgba(255,255,255,.085);

  border-radius:
    17px
    17px
    17px
    5px;

  box-shadow:
    0 10px 25px rgba(0,0,0,.16);

  max-width: 84%;
}

/* AI mesajının hafif sol ışığı */
.message.ai .bubble::before,
.message.ai .message-bubble::before {
  content: "";
  display: inline-block;

  width: 5px;
  height: 5px;

  margin-right: 7px;

  vertical-align: middle;

  border-radius: 50%;

  background: #7b72ff;

  box-shadow:
    0 0 9px rgba(123,114,255,.65);
}

/* ---------------------------------------------------------
   TEMSİLCİ MESAJLARI
   --------------------------------------------------------- */

.message.agent {
  display: flex;
  justify-content: flex-start;
}

.message.agent .bubble,
.message.agent .message-bubble {
  background:
    linear-gradient(
      180deg,
      rgba(24,53,48,.98),
      rgba(20,43,40,.98)
    );

  color: rgba(255,255,255,.95);

  border:
    1px solid
    rgba(67,211,157,.18);

  border-radius:
    17px
    17px
    17px
    5px;

  max-width: 84%;

  box-shadow:
    0 10px 28px rgba(0,0,0,.16),
    0 0 20px rgba(47,202,149,.035);
}

/* ---------------------------------------------------------
   MESAJ ZAMANI
   --------------------------------------------------------- */

.message .time,
.message-time {
  opacity: .48;

  font-size: 9px;

  letter-spacing: .01em;
}

/* ---------------------------------------------------------
   SYSTEM MESAJLARI
   --------------------------------------------------------- */

.message.system {
  display: flex;
  justify-content: center;

  margin: 16px 8px;
}

.message.system .bubble,
.message.system .message-bubble {
  max-width: 90%;

  padding: 8px 12px;

  background:
    rgba(255,255,255,.035);

  border:
    1px solid
    rgba(255,255,255,.07);

  color:
    rgba(255,255,255,.52);

  border-radius: 999px;

  text-align: center;

  font-size: 10px;
}

/* ---------------------------------------------------------
   TYPING INDICATOR
   --------------------------------------------------------- */

.typing {
  display: flex;
  align-items: center;
  gap: 8px;

  min-height: 34px;

  padding: 5px 15px 9px;

  color: rgba(255,255,255,.45);

  font-size: 10px;
}

.typing::before {
  content: "✦";

  display: flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  border-radius: 7px;

  color: #918aff;

  background:
    rgba(102,92,255,.10);

  border:
    1px solid
    rgba(102,92,255,.20);

  animation: aiPulse 1.5s ease-in-out infinite;
}

.typing::after {
  content: "●  ●  ●";

  letter-spacing: 3px;

  color: #827aff;

  animation: typingDots 1.25s ease-in-out infinite;
}

@keyframes aiPulse {
  0%, 100% {
    opacity: .45;
    transform: scale(.94);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes typingDots {
  0%, 100% {
    opacity: .25;
  }

  50% {
    opacity: 1;
  }
}

/* ---------------------------------------------------------
   QUICK ACTIONS
   --------------------------------------------------------- */

.quick-actions {
  display: flex;
  gap: 8px;

  padding: 0 1px;

  margin-bottom: 9px;
}

.quick-actions button {
  position: relative;

  min-height: 40px;

  padding: 9px 13px;

  color: rgba(255,255,255,.76);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.025)
    );

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 11px;

  font-size: 11px;
  font-weight: 600;

  letter-spacing: .01em;

  cursor: pointer;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

.quick-actions button:hover {
  transform: translateY(-1px);

  color: #fff;

  background:
    linear-gradient(
      180deg,
      rgba(102,92,255,.15),
      rgba(102,92,255,.07)
    );

  border-color:
    rgba(112,103,255,.32);

  box-shadow:
    0 8px 20px rgba(66,61,255,.10);
}

.quick-actions button:active {
  transform: translateY(0);
}

.quick-actions button[data-action="agent"] {
  border-color:
    rgba(61,210,157,.17);
}

.quick-actions button[data-action="agent"]:hover {
  background:
    rgba(42,187,137,.10);

  border-color:
    rgba(61,210,157,.35);
}

/* ---------------------------------------------------------
   INPUT
   --------------------------------------------------------- */

.input-row {
  position: relative;

  padding: 4px;

  background:
    rgba(255,255,255,.025);

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 15px;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.input-row:focus-within {
  border-color:
    rgba(103,96,255,.42);

  box-shadow:
    0 0 0 3px rgba(103,96,255,.07);
}

#messageInput {
  border: 0 !important;
  outline: none !important;

  background: transparent !important;

  padding:
    10px
    11px !important;

  resize: none;

  color: rgba(255,255,255,.92) !important;
}

#messageInput::placeholder {
  color: rgba(255,255,255,.34);
}

/* Gönder */
#sendBtn {
  border: 0;

  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      #665cff,
      #4e8cff
    );

  box-shadow:
    0 8px 18px rgba(74,77,255,.20);

  transition:
    transform .18s ease,
    filter .18s ease,
    opacity .18s ease;
}

#sendBtn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

#sendBtn:active {
  transform: translateY(0);
}

#sendBtn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ---------------------------------------------------------
   POWERED
   --------------------------------------------------------- */

.powered {
  opacity: .35;

  text-align: center;

  letter-spacing: .04em;
}

/* =========================================================
   TEMSİLCİYE BAĞLANMA EKRANI
   ========================================================= */

.agent-handoff {
  position: absolute;

  inset: 68px 0 0 0;

  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 25px;

  background:
    radial-gradient(
      circle at center,
      rgba(86,79,255,.13),
      transparent 58%
    ),
    rgba(8,13,24,.93);

  backdrop-filter: blur(12px);

  animation: handoffAppear .25s ease-out;
}

.agent-handoff.hidden {
  display: none;
}

.agent-handoff-card {
  width: min(310px, 100%);

  padding: 26px 22px;

  text-align: center;

  background:
    linear-gradient(
      180deg,
      rgba(28,35,55,.98),
      rgba(18,24,40,.98)
    );

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 20px;

  box-shadow:
    0 25px 70px rgba(0,0,0,.40),
    0 0 50px rgba(89,80,255,.08);
}

.agent-handoff-icon {
  width: 52px;
  height: 52px;

  margin: 0 auto 15px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 16px;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      #665cff,
      #4d8cff
    );

  box-shadow:
    0 12px 30px rgba(80,78,255,.25);

  font-size: 21px;
}

.agent-handoff-title {
  color: #fff;

  font-size: 15px;
  font-weight: 700;

  margin-bottom: 8px;
}

.agent-handoff-text {
  color: rgba(255,255,255,.55);

  font-size: 11px;
  line-height: 1.55;

  margin-bottom: 17px;
}

.agent-handoff-loader {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.agent-handoff-loader span {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #827aff;

  animation:
    handoffDots 1.2s ease-in-out infinite;
}

.agent-handoff-loader span:nth-child(2) {
  animation-delay: .15s;
}

.agent-handoff-loader span:nth-child(3) {
  animation-delay: .30s;
}

@keyframes handoffAppear {
  from {
    opacity: 0;
    transform: scale(.98);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes handoffDots {
  0%, 100% {
    opacity: .25;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* ---------------------------------------------------------
   KAPATILMIŞ CHAT
   --------------------------------------------------------- */

.closed-panel {
  margin: auto;

  padding: 28px 22px;

  text-align: center;

  color: rgba(255,255,255,.62);
}

.closed-panel::before {
  content: "✓";

  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  margin: 0 auto 13px;

  border-radius: 15px;

  color: #7ce4ba;

  background:
    rgba(61,210,157,.09);

  border:
    1px solid
    rgba(61,210,157,.16);

  font-size: 20px;
}

/* ---------------------------------------------------------
   MOBİL
   --------------------------------------------------------- */

@media (max-width: 700px) {

  .messages {
    padding-left: 11px;
    padding-right: 11px;
  }

  .message.visitor .bubble,
  .message.visitor .message-bubble,
  .message.ai .bubble,
  .message.ai .message-bubble,
  .message.agent .bubble,
  .message.agent .message-bubble {
    max-width: 88%;
  }

  .quick-actions button {
    min-height: 42px;
    font-size: 11px;
  }

  .agent-handoff {
    inset: 62px 0 0 0;
  }
}

/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .message,
  .agent-handoff,
  .typing::before,
  .typing::after,
  .agent-handoff-loader span {
    animation: none !important;
  }
}



/* ============================================================
   SPONTANEFT FILE UPLOAD UI
   ============================================================ */

.file-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  color: #aab3c7;
  background: #121a29;
  font-size: 17px;
  cursor: pointer;
  transition: .18s ease;
}

.file-btn:hover {
  color: white;
  border-color: rgba(105,92,255,.55);
  background: #182138;
  transform: translateY(-1px);
}

.file-btn:disabled {
  opacity: .55;
  cursor: wait;
}

.file-btn.uploading {
  animation: fileUploadPulse 1s infinite ease-in-out;
}

@keyframes fileUploadPulse {
  0%,100% { opacity: .55; }
  50% { opacity: 1; }
}

.file-card {
  min-width: 190px;
  max-width: 310px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  color: #e9edf5;
  background: #111a2a;
  text-decoration: none;
  box-sizing: border-box;
}

.file-card:hover {
  border-color: rgba(105,92,255,.45);
  background: #172139;
}

.file-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(105,92,255,.14);
}

.file-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.file-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.file-info span {
  color: #707b91;
  font-size: 8px;
}

.file-open {
  color: #7c70ff;
}

.file-image-wrap {
  max-width: 280px;
}

.message-image {
  display: block;
  max-width: 280px;
  max-height: 260px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
}

.file-caption {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  color: #aab3c7;
  font-size: 8px;
}

.file-caption span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   FILE UPLOAD UI
   ============================================================ */

.file-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  color: #aab3c7;
  background: #121a29;
  font-size: 17px;
  cursor: pointer;
  transition: .18s ease;
}

.file-btn:hover {
  color: white;
  border-color: rgba(105,92,255,.55);
  background: #182138;
  transform: translateY(-1px);
}

.file-btn:disabled {
  opacity: .55;
  cursor: wait;
  transform: none;
}

.file-btn.uploading {
  animation: fileUploadPulse 1s infinite ease-in-out;
}

@keyframes fileUploadPulse {
  0%,100% { opacity: .55; }
  50% { opacity: 1; }
}

.file-input {
  display: none !important;
}

.file-card {
  min-width: 190px;
  max-width: 310px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  color: #e9edf5;
  background: #111a2a;
  text-decoration: none;
  box-sizing: border-box;
}

.file-card:hover {
  border-color: rgba(105,92,255,.45);
  background: #172139;
}

.file-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(105,92,255,.14);
  font-size: 16px;
}

.file-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.file-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
}

.file-info span {
  color: #707b91;
  font-size: 8px;
}

.file-open {
  color: #7c70ff;
  font-size: 14px;
}

.file-image-wrap {
  max-width: 280px;
}

.message-image {
  display: block;
  width: auto;
  max-width: 280px;
  max-height: 260px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.08);
  cursor: zoom-in;
}

.file-caption {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  color: #aab3c7;
  font-size: 8px;
}

.file-caption span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-caption small {
  flex: 0 0 auto;
  color: #68748a;
}

@media (max-width: 520px) {
  .file-btn {
    width: 42px;
    flex-basis: 42px;
  }

  .file-image-wrap,
  .message-image {
    max-width: 230px;
  }

  .file-card {
    min-width: 170px;
    max-width: 260px;
  }
}