/* Doktor Robot - Sohbet Widget'ı Stilleri
   Tüm sınıflar "drw-" ön ekiyle scoped, siteyle çakışmaz. */

.drw-root {
  --drw-primary: #0b6fb8;
  --drw-primary-dark: #084d82;
  --drw-accent: #10b981;
  --drw-bg: #ffffff;
  --drw-bg-soft: #f2f7fc;
  --drw-text: #1c2b3a;
  --drw-text-soft: #5b7186;
  --drw-shadow: 0 12px 32px rgba(11, 111, 184, 0.28);
  position: fixed;
  right: 24px;
  bottom: 120px;
  z-index: 999999;
  font-family: "Segoe UI", "Inter", system-ui, -apple-system, Arial, sans-serif;
  --drw-safe-b: env(safe-area-inset-bottom, 0px);
}

.drw-root * { box-sizing: border-box; }

/* --- Teaser balonu (robot ilk açılışta konuşur) --- */
.drw-teaser {
  position: absolute;
  right: 82px;
  bottom: 2px;
  width: min(300px, calc(100vw - 122px));
  max-width: 300px;
  background: var(--drw-bg);
  color: var(--drw-text);
  padding: 13px 16px;
  border-radius: 18px 18px 6px 18px;
  box-shadow: var(--drw-shadow);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.drw-teaser.drw-show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.drw-teaser-close {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #dfe8f1;
  color: var(--drw-text-soft);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Yuvarlak buton (kapalıyken) --- */
.drw-toggle-wrap {
  position: relative;
  width: 66px;
  height: 66px;
  opacity: 0;
  transform: scale(0.3) translateY(30px);
  animation: drw-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}
.drw-toggle-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--drw-accent);
  animation: drw-ping 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
  pointer-events: none;
}
.drw-toggle {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--drw-primary), var(--drw-primary-dark));
  box-shadow: var(--drw-shadow);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: drw-float 3.2s ease-in-out infinite;
}
.drw-toggle:hover { filter: brightness(1.06); }
.drw-toggle svg { width: 42px; height: 42px; overflow: visible; }
.drw-toggle.drw-attn {
  animation: drw-wiggle 0.7s ease-in-out 2;
}
.drw-toggle.drw-playing {
  animation: drw-play-hop 0.85s ease-in-out 2;
}
.drw-toggle.drw-knocking {
  animation: drw-screen-knock 0.42s ease-in-out 3;
}

/* Robotun kolu ve gözleri sadece ana butonda canlanır */
.drw-toggle .drw-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: drw-blink 4.2s ease-in-out infinite;
}
.drw-toggle .drw-arm-right {
  transform-box: fill-box;
  transform-origin: top center;
  animation: drw-wave 1.6s ease-in-out infinite;
}
.drw-toggle.drw-knocking .drw-arm-right {
  animation: drw-hand-knock 0.28s ease-in-out 5;
}

.drw-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #ff5c5c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  padding: 0 4px;
  animation: drw-badge-pulse 1.6s ease-in-out infinite;
}

@keyframes drw-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes drw-entrance {
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes drw-ping {
  0% { transform: scale(0.85); opacity: 0.55; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}
@keyframes drw-wiggle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  20% { transform: rotate(-10deg) translateY(-3px); }
  40% { transform: rotate(9deg) translateY(0); }
  60% { transform: rotate(-7deg) translateY(-2px); }
  80% { transform: rotate(5deg) translateY(0); }
}
@keyframes drw-wave {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-28deg); }
  40% { transform: rotate(-6deg); }
  60% { transform: rotate(-28deg); }
  80% { transform: rotate(0deg); }
}
@keyframes drw-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.15); }
}
@keyframes drw-badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
@keyframes drw-play-hop {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  22% { transform: translate(-12px, -14px) rotate(-8deg); }
  48% { transform: translate(12px, -18px) rotate(8deg); }
  72% { transform: translate(0, -6px) rotate(-4deg); }
}
@keyframes drw-screen-knock {
  0%, 100% { transform: translate(0, 0) scale(1); }
  28% { transform: translate(-3px, -2px) scale(1.03); }
  58% { transform: translate(2px, 1px) scale(0.99); }
}
@keyframes drw-hand-knock {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  45% { transform: rotate(-42deg) translateX(-3px); }
}

.drw-knock-ripple {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid rgba(16, 185, 129, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
  pointer-events: none;
  animation: drw-knock-ripple 0.9s ease-out forwards;
}
@keyframes drw-knock-ripple {
  0% { opacity: 0.9; transform: scale(0.55); }
  100% { opacity: 0; transform: scale(1.65); }
}

.drw-knock-hand {
  position: absolute;
  right: 76px;
  bottom: 58px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate(10px, 8px) rotate(16deg) scale(0.82);
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(8, 77, 130, 0.26));
  z-index: 2;
}
.drw-knock-hand svg {
  width: 30px;
  height: 30px;
  display: block;
}
.drw-knock-hand.drw-show {
  animation: drw-visible-hand-knock 1.25s ease-in-out forwards;
}
@keyframes drw-visible-hand-knock {
  0% { opacity: 0; transform: translate(10px, 8px) rotate(16deg) scale(0.78); }
  14% { opacity: 1; transform: translate(-4px, -3px) rotate(-12deg) scale(1.04); }
  28% { opacity: 1; transform: translate(6px, 3px) rotate(10deg) scale(0.96); }
  45% { opacity: 1; transform: translate(-4px, -3px) rotate(-12deg) scale(1.04); }
  62% { opacity: 1; transform: translate(5px, 2px) rotate(8deg) scale(0.98); }
  100% { opacity: 0; transform: translate(10px, 8px) rotate(16deg) scale(0.78); }
}

.drw-play-note {
  position: absolute;
  right: 0;
  bottom: 96px;
  width: 176px;
  max-width: calc(100vw - 32px);
  background: #0f1f2f;
  color: #fff;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(15, 31, 47, 0.2);
  text-align: center;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.drw-play-note.drw-show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.drw-social-pop {
  position: absolute;
  right: 0;
  bottom: 84px;
  width: 252px;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  color: var(--drw-text);
  border: 1px solid #e2ebf4;
  border-radius: 16px 16px 5px 16px;
  box-shadow: 0 14px 34px rgba(18, 39, 66, 0.16);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  overflow: hidden;
}
.drw-social-pop.drw-show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.drw-social-main {
  width: 100%;
  min-height: 58px;
  border: none;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 34px 11px 12px;
  cursor: pointer;
  text-align: left;
}
.drw-social-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #f58529, #dd2a7b 48%, #8134af 76%, #515bd4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.drw-social-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.drw-social-copy b {
  font-size: 13px;
  line-height: 1.2;
}
.drw-social-copy small {
  color: var(--drw-text-soft);
  font-size: 11.5px;
  line-height: 1.25;
  margin-top: 2px;
}
.drw-social-close {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: #eef4f8;
  color: var(--drw-text-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

.drw-sparkle {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--drw-accent);
  box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.18);
  pointer-events: none;
  animation: drw-sparkle 0.85s ease forwards;
}
@keyframes drw-sparkle {
  0% { opacity: 0; transform: scale(0.4) translateY(0); }
  35% { opacity: 1; transform: scale(1) translateY(-8px); }
  100% { opacity: 0; transform: scale(0.2) translateY(-24px); }
}

/* --- Sohbet paneli --- */
.drw-panel {
  position: absolute;
  right: 0;
  bottom: 82px;
  width: 340px;
  max-width: calc(100vw - 32px);
  height: 480px;
  max-height: calc(100vh - 140px);
  background: var(--drw-bg);
  border-radius: 18px;
  box-shadow: var(--drw-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.drw-panel.drw-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.drw-header {
  background: linear-gradient(120deg, var(--drw-primary), var(--drw-primary-dark));
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.drw-header-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.drw-header-avatar svg { width: 26px; height: 26px; }
.drw-header-info { flex: 1; min-width: 0; }
.drw-header-name { font-size: 14.5px; font-weight: 700; }
.drw-header-status { font-size: 11.5px; opacity: 0.85; display: flex; align-items: center; gap: 5px; }
.drw-dot { width: 7px; height: 7px; border-radius: 50%; background: #21e07a; display: inline-block; }
.drw-close,
.drw-sound-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drw-sound-btn svg { width: 15px; height: 15px; }
.drw-close:hover,
.drw-sound-btn:hover { background: rgba(255,255,255,0.28); }

.drw-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  background: var(--drw-bg-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.drw-body::-webkit-scrollbar { width: 5px; }
.drw-body::-webkit-scrollbar-thumb { background: #c7d7e5; border-radius: 3px; }

.drw-msg {
  max-width: 84%;
  font-size: 13.5px;
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: 14px;
  animation: drw-pop 0.18s ease;
  white-space: pre-line;
}
@keyframes drw-pop {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.drw-msg-bot {
  align-self: flex-start;
  background: #fff;
  color: var(--drw-text);
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 8px rgba(20, 40, 70, 0.06);
}
.drw-msg-user {
  align-self: flex-end;
  background: var(--drw-primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.drw-doctor-card {
  align-self: flex-start;
  max-width: 94%;
  background: #fff;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 8px rgba(20, 40, 70, 0.06);
  padding: 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.drw-card-copy { min-width: 0; }
.drw-doctor-photo {
  width: 44px;
  height: 44px;
  border: none;
  padding: 0;
  border-radius: 10px;
  background: var(--drw-bg-soft);
  flex-shrink: 0;
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
}
.drw-doctor-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.drw-photo-zoom {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(8, 77, 130, 0.86);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
}
.drw-doctor-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--drw-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.drw-doctor-avatar svg { width: 28px; height: 28px; }
.drw-doctor-name { font-size: 13.5px; font-weight: 700; color: var(--drw-text); }
.drw-doctor-branch { font-size: 12px; color: var(--drw-text-soft); margin-top: 1px; }
.drw-doctor-summary {
  color: var(--drw-text);
  font-size: 12.3px;
  line-height: 1.4;
  margin-top: 6px;
}
.drw-doctor-new {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--drw-accent);
  padding: 2px 7px;
  border-radius: 8px;
}

.drw-typing {
  align-self: flex-start;
  background: #fff;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  padding: 10px 14px;
  display: flex;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(20, 40, 70, 0.06);
}
.drw-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b7c6d6;
  animation: drw-typing-dot 1.1s infinite ease-in-out;
}
.drw-typing span:nth-child(2) { animation-delay: 0.15s; }
.drw-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes drw-typing-dot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1); }
}

.drw-info-card {
  align-self: flex-start;
  max-width: 94%;
  background: #fff;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(20, 40, 70, 0.06);
}
.drw-info-image {
  width: 100%;
  height: 118px;
  background: var(--drw-bg-soft);
  overflow: hidden;
}
.drw-info-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.drw-info-copy { padding: 11px 12px 12px; }
.drw-info-kicker {
  color: var(--drw-accent);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.drw-info-title {
  color: var(--drw-text);
  font-size: 14px;
  font-weight: 800;
}
.drw-info-text {
  color: var(--drw-text-soft);
  font-size: 12.5px;
  line-height: 1.42;
  margin-top: 5px;
}

.drw-choice-row {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: 94%;
}
.drw-choice {
  border: none;
  background: var(--drw-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.drw-choice + .drw-choice {
  background: #ffffff;
  border: 1px solid #d7e5f0;
  color: var(--drw-primary-dark);
}

.drw-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 10px;
  flex-shrink: 0;
  background: var(--drw-bg-soft);
}
.drw-chip {
  border: 1px solid #cfe0ef;
  background: #fff;
  color: var(--drw-primary-dark);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 11px;
  border-radius: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, transform 0.1s ease;
}
.drw-chip:hover { background: var(--drw-bg-soft); }
.drw-chip:active { transform: scale(0.96); }

.drw-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  background: var(--drw-accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 10px;
  align-self: flex-start;
  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.22);
}

.drw-inputbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid #e6edf4;
  background: #fff;
  flex-shrink: 0;
}
.drw-input {
  flex: 1;
  border: 1px solid #dbe6f0;
  background: var(--drw-bg-soft);
  border-radius: 20px;
  padding: 9px 14px;
  font-size: 13px;
  outline: none;
  color: var(--drw-text);
}
.drw-input:focus { border-color: var(--drw-primary); }
.drw-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--drw-primary);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.drw-send i { font-size: 14px; line-height: 1; }

.drw-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.drw-lightbox.drw-open { display: flex; }
.drw-lightbox-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(8, 24, 42, 0.68);
  cursor: zoom-out;
}
.drw-lightbox-dialog {
  position: relative;
  width: min(420px, calc(100vw - 44px));
  max-height: min(620px, calc(100vh - 44px));
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.drw-lightbox-dialog img {
  width: 100%;
  height: min(500px, calc(100vh - 150px));
  object-fit: contain;
  background: var(--drw-bg-soft);
  border-radius: 10px;
}
.drw-lightbox-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--drw-primary-dark);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drw-lightbox-caption {
  color: var(--drw-text);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  line-height: 1.35;
}

@media (max-width: 480px) {
  .drw-root { right: 12px; bottom: 108px; }
  .drw-panel {
    width: calc(100vw - 24px);
    height: calc(100vh - 110px);
    bottom: 78px;
    right: -4px;
  }
  .drw-teaser {
    right: 0;
    bottom: 82px;
    width: min(300px, calc(100vw - 24px));
    max-width: none;
    border-radius: 18px 18px 18px 6px;
  }
  .drw-play-note {
    right: 0;
    bottom: 96px;
    width: 176px;
    max-width: calc(100vw - 24px);
  }
  .drw-social-pop {
    right: 0;
    bottom: 84px;
    width: min(252px, calc(100vw - 24px));
  }
  .drw-knock-hand {
    right: 76px;
    bottom: 58px;
  }
  .drw-lightbox-dialog {
    width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
  }
  .drw-lightbox-dialog img {
    height: min(420px, calc(100vh - 130px));
  }
}