/* Canli destek penceresi — ana sayfa (landing.css) ve panel (app.css) degiskenleriyle uyumlu */
.sc-fab, .sc-box {
  --sc-accent: var(--action, var(--accent, #6b8bff));
  --sc-bg: var(--panel, var(--surface, #1f1f1f));
  --sc-raised: var(--raised, #272727);
  --sc-sunk: var(--sunk, #141414);
  --sc-ink: var(--ink, var(--text, #fff));
  --sc-ink-3: var(--ink-3, #8c8c8c);
  --sc-line: var(--line, #313131);
  --sc-read: #34d399;
  --sc-bubble-ink: var(--sc-raised);
  font-family: var(--font, system-ui, sans-serif);
}
.sc-fab { position: fixed; right: 20px; bottom: 84px; z-index: 45; width: 52px; height: 52px; border-radius: 50%;
  padding: 12px; background: var(--sc-raised); color: var(--sc-accent); cursor: pointer;
  border: 1px solid var(--sc-line); box-shadow: 0 8px 22px rgb(0 0 0 / .35); transition: transform .15s ease, background .15s ease; }
.sc-fab:hover { transform: translateY(-2px) scale(1.05); }
.sc-fab:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.sc-fab svg { width: 100%; height: 100%; display: block; }
.sc-fab .sc-ico-x { display: none; }
.sc-fab.is-open { background: var(--sc-accent); color: #fff; border-color: transparent; }
.sc-fab.is-open .sc-ico-chat { display: none; }
.sc-fab.is-open .sc-ico-x { display: block; padding: 2px; }
.sc-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #f26d78; color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; border: 2px solid var(--sc-bg); }
.sc-badge[hidden] { display: none; }

.sc-box { position: fixed; right: 84px; bottom: 20px; z-index: 46; width: 360px; height: min(560px, calc(100dvh - 40px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--sc-bg); color: var(--sc-ink);
  border: 1px solid var(--sc-line); box-shadow: 0 24px 60px rgb(0 0 0 / .5); animation: sc-in .2s cubic-bezier(.22, 1, .36, 1);
  transform-origin: bottom right; }
.sc-box[hidden] { display: none; }
@keyframes sc-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }

.sc-head { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 16px; background: var(--sc-raised); border-bottom: 1px solid var(--sc-line); }
.sc-av { position: relative; width: 28px; height: 28px; flex: none; align-self: flex-end; }
.sc-av img { width: 100%; height: 100%; display: block; border-radius: 50%; background: var(--sc-sunk); border: 1px solid var(--sc-line); }
.sc-av-lg { width: 40px; height: 40px; align-self: center; }
.sc-on { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--sc-read); border: 2px solid var(--sc-raised); }
.sc-ht { display: grid; gap: 2px; min-width: 0; flex: 1; }
.sc-ht b { font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-ht small { font-size: 12px; color: var(--sc-ink-3); }
.sc-x { width: 32px; height: 32px; padding: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--sc-ink-3); cursor: pointer; }
.sc-x svg { width: 100%; height: 100%; display: block; }
.sc-x:hover { background: var(--sc-bg); color: var(--sc-ink); }

.sc-list { flex: 1; overflow-y: auto; padding: 14px 12px 6px; display: flex; flex-direction: column; overscroll-behavior: contain; }
.sc-day { display: flex; justify-content: center; margin: 6px 0 10px; }
.sc-day span { font-size: 11px; font-weight: 600; color: var(--sc-ink-3); background: var(--sc-raised); padding: 3px 10px; border-radius: 999px; }
.sc-row { display: flex; gap: 8px; align-items: flex-end; margin-top: 2px; }
.sc-row.is-head { margin-top: 10px; }
.sc-user { justify-content: flex-end; }
.sc-msg { max-width: 78%; padding: 8px 12px 6px; border-radius: 16px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.sc-txt { white-space: pre-wrap; }
.sc-txt a, .sc-off a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sc-off a { color: var(--sc-accent); font-weight: 650; }
.sc-agent .sc-msg { background: var(--sc-raised); border-radius: 6px 16px 16px 6px; }
.sc-agent.is-head .sc-msg { border-top-left-radius: 16px; }
.sc-agent.is-tail .sc-msg { border-bottom-left-radius: 16px; border-bottom-left-radius: 4px; }
.sc-user .sc-msg { background: var(--sc-accent); color: #fff; border-radius: 16px 6px 6px 16px; }
.sc-user.is-head .sc-msg { border-top-right-radius: 16px; }
.sc-user.is-tail .sc-msg { border-bottom-right-radius: 4px; }
.sc-meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 -2px 10px; font-size: 10.5px; opacity: .7; white-space: nowrap; }
.sc-meta svg { width: 13px; height: 13px; }
.sc-tk svg { width: 17px; height: 11px; display: block; }
.sc-tk.is-read { color: var(--sc-read); opacity: 1; filter: brightness(1.15); }
.sc-user .sc-meta:has(.is-read) { opacity: 1; }
.is-failed .sc-msg { opacity: .55; }
.sc-receipt { align-self: flex-end; margin: 4px 2px 0; font-size: 11px; color: var(--sc-ink-3); }

.sc-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding: 4px 12px 10px; }
.sc-chips[hidden] { display: none; }
.sc-chips button { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--sc-accent); background: transparent;
  color: var(--sc-accent); font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; transition: background .15s; }
.sc-chips button:hover { background: var(--sc-accent); color: #fff; }

.sc-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 10px 8px; border-top: 1px solid var(--sc-line); }
.sc-form[hidden] { display: none; }
.sc-form textarea { flex: 1; resize: none; min-height: 42px; max-height: 110px; padding: 11px 14px; border-radius: 21px;
  border: 1px solid var(--sc-line); background: var(--sc-raised); color: var(--sc-ink); font: inherit; font-size: 14px; outline: none; }
.sc-form textarea:focus { border-color: var(--sc-accent); }
.sc-form button { width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; padding: 10px; background: var(--sc-accent); color: #fff; cursor: pointer; transition: opacity .15s, transform .15s; }
.sc-form button:disabled { opacity: .4; cursor: default; }
.sc-form button:not(:disabled):hover { transform: scale(1.06); }
.sc-form button svg { width: 100%; height: 100%; display: block; }
.sc-foot { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px 10px; font-size: 11px; color: var(--sc-ink-3); }
.sc-foot svg { width: 12px; height: 12px; color: var(--sc-ink-3); }

@media (max-width: 767px) {
  .sc-fab { right: 14px; bottom: calc(70px + env(safe-area-inset-bottom)); width: 46px; height: 46px; padding: 10px; }
  .sc-box { inset: auto 8px calc(8px + env(safe-area-inset-bottom)) 8px; width: auto; height: min(80dvh, 600px); z-index: 75; }
  .sc-form textarea { font-size: 16px; }
}