/* Dialer ekranı */
/* ============================================================
AGENT DIALER EKRANI
============================================================ */
.dialer-layout {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(260px,320px);
grid-template-rows:minmax(0,1fr) auto;
gap:16px; height:100%;
align-items:stretch;
min-width:0;
max-width:100%;
}
.dialer-main {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
}
.dialer-side {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
#page-dialer .dialer-side > :not(.agent-camps-panel) { flex: 0 0 auto; }
#page-dialer .dialer-side > .agent-camps-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
#page-dialer.page.active {
  position: absolute;
  inset: 0;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
  container-name: dialer;
}
#page-dialer > #dialer-page-hdr,
#page-dialer > #dialer-inbound-banner {
  flex: 0 0 auto;
  position: relative;
  z-index: 6;
}
#page-dialer > .dialer-layout {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}
@media (min-width: 1025px) {
  #page-dialer.page.active {
    display: flex;
    flex-direction: column;
  }
  #page-dialer > .dialer-layout {
    flex: 1 1 auto;
    min-height: 0;
  }
  #page-dialer .dialer-main {
    min-height: 0;
    overflow: hidden;
  }
}
#page-dialer .dialer-main > #customer-card.customer-card--empty {
  flex: 1 1 auto;
  min-height: 240px;
  min-width: 0;
}
#page-dialer .dialer-main > #customer-card:not(.customer-card--empty) {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  height: auto;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
#page-dialer #customer-card:not(.customer-card--empty) > #cust-data {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#page-dialer #customer-card:not(.customer-card--empty) > #outcome-dock {
  flex: 0 0 auto;
}
#page-dialer #customer-card:not(.customer-card--empty):has(#outcome-dock:not([hidden])) {
  padding-bottom: 0;
}
#page-dialer #customer-card:not(.customer-card--empty) > #cust-empty {
  display: none !important;
  flex: none !important;
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}
#page-dialer #call-actions,
#page-dialer #prev-call-info {
  flex: 0 0 auto;
}
#page-dialer .call-action-row {
  flex-wrap: wrap;
}
#page-dialer .call-action-btn {
  flex: 1 1 140px;
  min-width: 0;
}
#page-dialer #ready-section {
  grid-column: 1;
  grid-row: 2;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
#page-dialer #customer-card.customer-card--empty {
  flex: 1 1 auto;
  min-height: 240px;
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#page-dialer .cust-empty.cust-empty--outbound-wait {
  flex: 1 1 auto;
  min-height: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
#page-dialer #customer-card.customer-card--empty > .cust-outbound-wait {
  flex: 1 1 auto;
  width: 100%;
  min-height: 100%;
  height: 100%;
  margin: 0;
  justify-content: center;
  align-items: center;
}
#page-dialer .cust-empty {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  margin: -18px -28px -12px;
  width: calc(100% + 56px);
}
#page-dialer .cust-empty-default {
  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
  max-height: 100%;
  grid-template-rows: minmax(0, 1fr);
}
#daily-goal-bar {
  overflow: visible;
  flex-shrink: 0;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  margin-bottom: 4px;
}
#page-dialer #daily-goal-bar > .dialer-fold-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 8px 2px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
#page-dialer #daily-goal-bar.is-collapsed .daily-goal-body { display: none; }
#page-dialer #daily-goal-bar:not(.is-collapsed) { padding: 8px 12px; }
#page-dialer #daily-goal-bar:not(.is-collapsed) .dialer-fold-chevron { transform: rotate(90deg); }
#page-dialer #daily-goal-bar .daily-goal-fold-meta {
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
}
#page-dialer #customer-card:not(.customer-card--empty) > #cust-data {
  display: flex;
  flex-direction: column;
}
#page-dialer #ctab-map-panel {
  flex: 1 1 auto;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  margin: 0;
}
#page-dialer .contact-map-frame {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 280px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 12px;
}
#page-dialer #contact-map-canvas,
#page-dialer .contact-map-frame .gm-style {
  width: 100%;
  height: 100%;
  min-height: 280px;
  border-radius: 14px;
}
@container dialer (max-width: 1040px) {
  #page-dialer > .dialer-layout {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    gap: 8px;
  }
  #page-dialer .dialer-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  #page-dialer .dialer-side {
    flex: 0 1 auto;
    width: 100%;
    max-height: 34%;
    min-height: 0;
    overflow: auto;
  }
  #page-dialer #ready-section { flex: 0 0 auto; width: 100%; }
}
.agent-camp-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.agent-camp-name.is-slide { text-overflow: clip; }
.agent-camp-name.is-slide > i {
  display: inline-block;
  font-style: normal;
  font-weight: inherit;
  white-space: nowrap;
  animation: mbNameSlide ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .agent-camp-name.is-slide > i { animation: none; }
}
/* Status bar */
.dialer-status-bar {
display:flex; align-items:center; gap:10px;
padding:14px 18px; border-radius:var(--radius);
background:var(--bg-2); border:1px solid var(--border);
box-shadow:var(--shadow); flex-wrap:wrap; gap:10px;
}
.status-indicator {
display:flex; align-items:center; gap:7px;
}
.status-dot {
width:10px; height:10px; border-radius:50%;
transition:var(--transition);
}
.status-dot.offline { background:var(--text-3); }
.status-dot.ready   { background:var(--green); box-shadow:0 0 8px var(--green); animation:blink 2s infinite; }
.status-dot.calling { background:var(--accent); box-shadow:0 0 8px var(--accent); animation:blink 1.2s infinite; }
.status-dot.on_call {
background: hsl(calc(215 - var(--voice-progress, 0) * 95), calc(78% + var(--voice-progress, 0) * 12%), calc(52% + var(--voice-progress, 0) * 6%));
box-shadow:
  0 0 calc(6px + var(--voice-progress, 0) * 14px) hsla(calc(175 - var(--voice-progress, 0) * 40), 85%, 48%, 0.65),
0 0 2px rgba(255,255,255,0.35) inset;
animation: blink 1.5s infinite;
}
.status-dot.wrapping{ background:var(--yellow); box-shadow:0 0 8px var(--yellow); }
.status-dot.break   { background:var(--yellow); }
.status-label { font-size:13px; font-weight:700; }
.dialer-timer-block {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-width: 112px;
min-height: 52px;
margin-left: auto;
}
.voice-ring-canvas {
pointer-events: none;
display: block;
}
.voice-ring-canvas--timer {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 112px;
height: 112px;
z-index: 0;
}
.dialer-timer {
font-family:var(--mono); font-size:18px; font-weight:800;
letter-spacing:0.5px;
margin:0;
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
color: hsl(calc(215 - var(--voice-progress, 0) * 100), 45%, calc(28% + var(--voice-progress, 0) * 12%));
text-shadow: 0 0 12px rgba(255,255,255,0.35);
}
[data-theme="dark"] .dialer-timer {
color: hsl(calc(200 - var(--voice-progress, 0) * 90), 70%, calc(78% - var(--voice-progress, 0) * 8%));
text-shadow: 0 0 14px rgba(0,0,0,0.5);
}
/* Customer card */
.customer-card {
background:var(--bg-2); border:1px solid var(--border);
border-radius:var(--radius); padding:20px 24px;
box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px;
overflow-y:auto;
overflow-x: hidden;
}
.customer-card.customer-card--empty {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 0;
  overflow-y: visible;
  overflow-x: hidden;
  flex: 0 1 auto;
  align-self: stretch;
  min-height: 0;
}
.cust-header { display:flex; align-items:flex-start; gap:14px; }
.cust-header .dialer-timer-block {
margin-left: auto;
flex: 0 0 112px;
min-width: 112px;
min-height: 84px;
pointer-events: none;
}
.cust-avatar-voice-wrap {
position: relative;
width: 84px;
height: 84px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.voice-ring-canvas--cust {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 112px;
height: 112px;
z-index: 0;
}
.cust-avatar-voice-wrap .cust-avatar {
z-index: 1;
}
.cust-avatar {
width:60px; height:60px; border-radius:50%;
background: linear-gradient(135deg, var(--accent), var(--purple));
display:flex; align-items:center; justify-content:center;
color:white; font-size:20px; font-weight:800; flex-shrink:0;
position: relative;
overflow: hidden;
}
.cust-avatar .cust-av-inner {
position: relative;
z-index: 2;
line-height: 1;
}
.cust-avatar--fluid {
background: transparent;
box-shadow: 0 4px 20px rgba(37, 99, 235, 0.25);
}
.cust-avatar--fluid::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
z-index: 0;
background: linear-gradient(145deg,
  hsl(calc(252 - var(--voice-progress, 0) * 55), 58%, calc(44% + var(--voice-progress, 0) * 6%)),
  hsl(calc(175 - var(--voice-progress, 0) * 45), 52%, calc(38% + var(--voice-progress, 0) * 8%)));
animation: none;
filter: none;
opacity: 1;
}
.cust-avatar--fluid::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.35) 0%, transparent 55%);
pointer-events: none;
z-index: 1;
opacity: 0.38;
}
.cust-name   { font-size:19px; font-weight:800; letter-spacing:-.4px; }
.cust-phone  { font-family:var(--mono); font-size:14px; color:var(--text-2); margin-top:3px; }
.cust-badge-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.cust-fields {
display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.cust-field { display:flex; flex-direction:column; gap:2px; overflow:visible; }
.addr-suggest {
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30;
  background:var(--bg-2); border:1px solid var(--border); border-radius:8px;
  box-shadow:var(--shadow-md); overflow:hidden;
}
.addr-suggest button {
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  width:100%; text-align:left; padding:8px 10px; border:0;
  border-bottom:1px solid var(--border); background:transparent;
  color:var(--text); font-size:12px; font-weight:700; cursor:pointer;
}
.addr-suggest button:last-child { border-bottom:0; }
.addr-suggest button:hover { background:var(--bg-3); }
.addr-suggest .sub { font-size:10px; font-weight:600; color:var(--text-3); }
.addr-suggest .empty { padding:8px 10px; font-size:11px; color:var(--text-3); }
.cust-field-lbl { font-size:11px; color:var(--text-3); font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.cust-field-val { font-size:14px; font-weight:600; color:var(--text); }
.cust-field-val.mono { font-family:var(--mono); }
.cust-empty {
position: relative;
display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
/* Kart padding’ini nötrler — aurora kenarlarda beyaz bırakmaz */
margin: -22px -34px -16px;
width: calc(100% + 68px);
max-width: none;
padding: 12px 18px 18px;
text-align:center; gap:14px; color:var(--text-3);
overflow: hidden;
  border-radius: 14px;
  min-height: 0;
}
/* Aurora + metin aynı ızgarada: tek kutu, iç “kart” hissi yok */
.cust-outbound-wait {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: min(36vh, 320px);
  padding: 28px 18px 22px;
  text-align: center;
}
.cust-outbound-wait__rings {
  position: relative;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
}
.cust-outbound-wait__rings span {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  animation: cust-outbound-pulse 1.8s ease-out infinite;
}
.cust-outbound-wait__rings span:nth-child(2) { animation-delay: .55s; }
.cust-outbound-wait__rings i {
  position: relative;
  z-index: 1;
  font-size: 30px;
  color: var(--accent);
}
.cust-outbound-wait__time {
  font-family: var(--mono);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
}
.cust-outbound-wait__time[hidden] { display: none !important; }
.cust-outbound-wait__title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}
.outcome-note-hint {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
}
@media (max-width: 768px) {
  .outcome-note-hint { display: none; }
}
.cust-outbound-wait__sub {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-3);
  max-width: 340px;
}
@keyframes cust-outbound-pulse {
  0% { transform: scale(0.55); opacity: 0.8; }
  100% { transform: scale(1.15); opacity: 0; }
}
.cust-empty-default {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(200px, auto);
  width: 100%;
  margin: 0;
  max-width: none;
  min-height: min(36vh, 320px);
  align-items: stretch;
  border-radius: 14px;
  overflow: hidden;
}
.cust-empty-stage {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  clip-path: inset(0 round 14px);
  /* Aurora ile aynı pastel tonlarda taban — kenarlarda kart beyazına sert kesilmez */
  background:
    radial-gradient(125% 90% at 50% 42%, color-mix(in srgb, #fce7f3 55%, var(--bg-2)) 0%, transparent 62%),
    radial-gradient(90% 70% at 18% 88%, color-mix(in srgb, #bae6fd 35%, var(--bg-2)) 0%, transparent 55%),
    radial-gradient(95% 75% at 88% 12%, color-mix(in srgb, #ddd6fe 40%, var(--bg-2)) 0%, transparent 58%),
    var(--bg-2);
  isolation: isolate;
}
.cust-empty-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-2) 18%, transparent) 0%,
    transparent 18%,
    transparent 82%,
    color-mix(in srgb, var(--bg-2) 22%, transparent) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.cust-empty-aurora {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 320%;
  height: 380%;
  min-width: 480px;
  min-height: 460px;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 160deg,
    color-mix(in srgb, #f472b6 70%, transparent),
    color-mix(in srgb, #a78bfa 65%, transparent),
    color-mix(in srgb, #38bdf8 60%, transparent),
    color-mix(in srgb, #4ade80 55%, transparent),
    color-mix(in srgb, #fbbf24 58%, transparent),
    color-mix(in srgb, #fb7185 65%, transparent),
    color-mix(in srgb, #f472b6 70%, transparent)
  );
  filter: blur(56px) saturate(1.05);
  opacity: 0.42;
  pointer-events: none;
  z-index: 0;
}
.cust-empty-aurora--a {
  animation: cust-empty-aurora-spin 48s linear infinite;
}
.cust-empty-aurora--b {
  opacity: 0.36;
  background: conic-gradient(
    from -40deg,
    color-mix(in srgb, #818cf8 68%, transparent),
    color-mix(in srgb, #2dd4bf 62%, transparent),
    color-mix(in srgb, #f472b6 65%, transparent),
    color-mix(in srgb, #fcd34d 58%, transparent),
    color-mix(in srgb, #818cf8 68%, transparent)
  );
  animation: cust-empty-aurora-spin-rev 64s linear infinite, cust-empty-aurora-hue 18s ease-in-out infinite;
}
.cust-empty-aurora--c {
  opacity: 0.28;
  width: 200%;
  height: 220%;
  min-width: 360px;
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    color-mix(in srgb, #ec4899 45%, transparent),
    color-mix(in srgb, #22d3ee 35%, transparent) 42%,
    transparent 70%
  );
  animation: cust-empty-aurora-drift 26s ease-in-out infinite, cust-empty-aurora-pulse 14s ease-in-out infinite;
}
@keyframes cust-empty-aurora-spin {
  from { transform: translate(-50%, -50%) rotate(0deg) scale(1.02); }
  to { transform: translate(-50%, -50%) rotate(360deg) scale(1.06); }
}
@keyframes cust-empty-aurora-spin-rev {
  from { transform: translate(-50%, -50%) rotate(360deg) scale(1.08); }
  to { transform: translate(-50%, -50%) rotate(0deg) scale(1.02); }
}
@keyframes cust-empty-aurora-hue {
  0%, 100% { filter: blur(56px) saturate(1) hue-rotate(0deg); }
  25% { filter: blur(52px) saturate(1.15) hue-rotate(42deg); }
  50% { filter: blur(50px) saturate(0.95) hue-rotate(-28deg); }
  75% { filter: blur(54px) saturate(1.1) hue-rotate(18deg); }
}
@keyframes cust-empty-aurora-drift {
  0%, 100% { transform: translate(-50%, -50%) translate(0, 0) scale(1); }
  33% { transform: translate(-50%, -50%) translate(6%, -4%) scale(1.08); }
  66% { transform: translate(-50%, -50%) translate(-5%, 5%) scale(0.96); }
}
@keyframes cust-empty-aurora-pulse {
  0%, 100% { opacity: 0.22; }
  50% { opacity: 0.38; }
}
.cust-empty-copy {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: center;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 8px;
  width: 100%;
  max-width: 100%;
  text-align: center;
}
/* Dialer boş kartta maskot hedefi (global maskot buraya hizalanır) */
.cust-empty-mascot-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 92px;
  margin: -36px 0 0 -36px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}
/* Meraklı küçük karakter: JS ile --mx/--my (rastgele gezinti) */
.cust-empty-mascot {
  position: absolute;
  left: calc(50% + var(--mx, 0px));
  top: calc(40% + var(--my, 0px));
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  transform: scale(var(--mascot-scale, 1));
  transform-origin: center center;
  transition:
    left 2.85s cubic-bezier(0.33, 1, 0.68, 1),
    top 2.85s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
  pointer-events: none;
  z-index: 2;
}
/* Sohbet: sağ alt; bildirim: üst tarafa bakış (zil sağ üst) */
.cust-empty--peek-chat .cust-empty-mascot {
  left: auto;
  right: max(8px, 3.5%);
  top: auto;
  bottom: 16%;
  margin: 0;
  --mx: 0px;
  --my: 0px;
}
.cust-empty--peek-chat .cust-empty-mascot-eyes {
  transform: translateX(5px);
}
.cust-empty--peek-chat .cust-empty-eye::after {
  transform: translate(-42%, -34%);
}
.cust-empty--peek-notif .cust-empty-mascot {
  left: 13%;
  top: 24%;
  right: auto;
  bottom: auto;
  margin: -36px 0 0 -36px;
  --mx: 0px;
  --my: 0px;
}
.cust-empty--peek-notif .cust-empty-eye::after {
  transform: translate(-30%, -62%);
}
.cust-empty-mascot-tag {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% - 2px);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-2);
  max-width: 92px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--bg-2) 82%, transparent);
  pointer-events: none;
  line-height: 1.2;
  display: none !important;
}
.settings-mascot-preview-wrap {
  margin-top: 12px;
  padding: 14px 14px 16px;
  border-radius: 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.settings-mascot-preview-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  align-self: flex-start;
}
.settings-mascot-preview-stage {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--m-c0, hsl(var(--m-d0, 310), 62%, 88%)) 35%, var(--bg-2)),
    var(--bg-2)
  );
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  --mascot-range-fr: 1;
}
.settings-mascot-wander-bounds {
  position: absolute;
  left: 8px;
  bottom: 8px;
  top: auto;
  right: auto;
  transform: none;
  width: calc(4px + (100% - 16px) * var(--mascot-range-fr, 1));
  height: calc(4px + (100% - 16px) * var(--mascot-range-fr, 1));
  max-width: calc(100% - 16px);
  max-height: calc(100% - 16px);
  border: 2px dashed color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: 10px;
  pointer-events: none;
  z-index: 0;
  box-sizing: border-box;
}
.settings-mascot-preview-mascot {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  transform: scale(calc(1.08 * var(--mascot-user-scale, 1)));
  transform-origin: center center;
}
.global-mascot .cust-empty-mascot,
.settings-mascot-preview-mascot {
  /* küpe konumu */
  overflow: visible;
}
.settings-mascot-preview-mascot .cust-empty-blob {
  margin-top: 6px;
}