:root {
  --app-vh: 100svh;
}

html, body {
  overscroll-behavior: contain;
}

/* ===== Vars ===== */
:root {
  --mdc-accent: #33e29f;
  --mdc-bg-input: #282a2d;
  --mdc-border: #323438;
  --mdc-border-hover: #393b40;
  --mdc-border-focus: #43464b;
  --mdc-btn-icon: #d3d6d9;
  --mdc-btn-icon-hover: #ffffff;
  --mdc-placeholder: #858a8f;
  --mdc-input-text: #ffffff;
  --mdc-user-bubble-bg: var(--mdc-light-black);
  --mdc-scrollbar-thumb: #3f4449;
  --mdc-scrollbar-thumb-hover: #4a5157;
  --mdc-radius-pill: 32px;
  --mdc-radius-btn: 50%;
  --mdc-transition: 140ms cubic-bezier(.4,.2,.2,1);

  --mdc-summary-btn-size: 58px;
  --mdc-chat-row-height: var(--mdc-summary-btn-size);
  --mdc-inner-btn-size: 46px;

  --mdc-summary-btn-size-mobile: 40px;
  --mdc-chat-row-height-mobile: var(--mdc-summary-btn-size-mobile);
  --mdc-inner-btn-size-mobile: 28px;

  --mdc-btn-surface: var(--mdc-bg-input);
  --mdc-btn-border-soft: rgba(255,255,255,.00);
  --mdc-btn-border-strong: rgba(255,255,255,.00);
  --mdc-btn-shadow: 0 1px 2px rgba(0,0,0,.45), 0 2px 5px -2px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  --mdc-btn-shadow-hover: 0 2px 6px -2px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
  --mdc-btn-shadow-active: 0 1px 3px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.05);
  --mdc-focus-ring: 0 0 0 1px #141518, 0 0 0 4px rgba(51,226,159,.35);

  --mdc-input-backplate-bg: #060708;
  --mdc-input-backplate-shadow: 0 -2px 24px -6px rgba(0,0,0,.82), 0 -8px 42px -10px rgba(0,0,0,.72);

  --mdc-chat-max-width: 760px;
  --mdc-chat-side-gap: 10px;
  --mdc-chat-z: 2147482000;

  --mdc-light-black: #1d1f22;
  --mdc-light-black-btn: #1d1f22;

  --mdc-white-glow: 0 0 8px rgba(255,255,255,0.10);
  --mdc-white-glow-strong: 0 0 10px rgba(255,255,255,0.14);
  --mdc-white-glow-btn: 0 0 4px rgba(255,255,255,0.05);
  --mdc-white-glow-btn-strong: 0 0 6px rgba(255,255,255,0.07);

  --mdc-outline-soft: rgba(255,255,255,0.12);
  --mdc-outline-soft-hover: rgba(255,255,255,0.16);
  --mdc-outline-soft-focus: rgba(255,255,255,0.20);

  /* Verstärkter Glow für Summary-Button (v13.57) */
  --mdc-summary-border: rgba(255,255,255,0.20);
  --mdc-summary-border-hover: rgba(255,255,255,0.28);
  --mdc-summary-border-focus: rgba(255,255,255,0.35);
  --mdc-summary-glow: 0 0 8px 0 rgba(255,255,255,0.28);
  --mdc-summary-glow-hover: 0 0 12px 0 rgba(255,255,255,0.38);
  --mdc-summary-glow-active: 0 0 6px 0 rgba(255,255,255,0.24);
}

/* ===== Host & Container ===== */
.mdc-inline-chat-section {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 18px 0 24px 0;
  margin: 0;
  overflow: visible;
}

.mdc-chat-container {
  width: min(900px, 92vw);
  background: transparent;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: visible;
}

/* ===== Plan Limit Banner ===== */
.mdc-plan-limit-banner {
  display:none;
  width:100%;
  box-sizing:border-box;
  padding:10px 14px;
  border:1px solid #3a3d42;
  background:#1f2023;
  color:#ddd;
  border-radius:14px;
  font-size:0.8rem;
  font-weight:500;
  margin:0 0 10px 0;
}
.mdc-plan-limit-banner.mdc-plan-limit-visible{display:block;}
.mdc-plan-limit-banner .mdc-plan-limit-inner{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.mdc-plan-upgrade-btn{
  cursor:pointer;
  background:#fff;
  color:#111;
  font-weight:600;
  border:none;
  padding:8px 14px;
  border-radius:100px;
  font-size:0.78rem;
  box-shadow:0 2px 6px -2px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
  transition:background .18s,color .18s,transform .18s, box-shadow .18s;
}
.mdc-plan-upgrade-btn:hover{
  background:#111;
  color:#fff;
  box-shadow:0 4px 12px -6px rgba(0,0,0,.55),0 0 0 1px #222;
}
.mdc-plan-upgrade-btn:active{transform:scale(.96);}

/* ===== Messages ===== */
.mdc-chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 6px 166px 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: transparent;
  min-height: calc(var(--app-vh) * 0.55);
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--mdc-scrollbar-thumb) transparent;
}
.mdc-chat-messages::-webkit-scrollbar { width: 10px; }
.mdc-chat-messages::-webkit-scrollbar-track { background: transparent; }
.mdc-chat-messages::-webkit-scrollbar-thumb {
  background: var(--mdc-scrollbar-thumb);
  border-radius: 20px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.mdc-chat-messages::-webkit-scrollbar-thumb:hover {
  background: var(--mdc-scrollbar-thumb-hover);
}

@supports (padding: max(0px)) {
  .mdc-chat-messages {
    padding-bottom: calc(166px + env(safe-area-inset-bottom, 0px));
  }
}

/* Passiver Modus */
body:not(.mdc-chat-active) #mdc-chat-messages { display: none; }

/* ===== Bubbles ===== */
.mdc-msg { display: flex; width: 100%; }
.mdc-bubble {
  max-width: 78%;
  padding: 12px 14px;
  border-radius: 18px;
  font-size: 1.03rem;
  font-weight: 500;
  line-height: 1.5;
  border: 1px solid #232326;
  white-space: pre-wrap;
  color: #f1f1f1;
  background: transparent;
}
.mdc-role-user { justify-content: flex-end; }
.mdc-role-user .mdc-bubble {
  background: var(--chat-bubble-user, var(--mdc-user-bubble-bg));
  color: #fff;
  border: 1px solid #35393d;
  font-weight: 450;
}
.mdc-role-assistant { justify-content: flex-start; }
.mdc-role-assistant .mdc-bubble {
  background: transparent;
  color: #f1f1f1;
  border: none;
  padding: 0;
  border-radius: 0;
  max-width: 98%;
  white-space: normal;
}
.mdc-role-assistant .mdc-bubble.mdc-rich p.mdc-h {
  font-size: 1.08rem;
  line-height: 1.5;
  font-weight: 700;
}

/* ===== Fixed Input Bar (Desktop) ===== */
.mdc-chat-form {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  max-width: min(var(--mdc-chat-max-width), calc(100% - 2 * var(--mdc-chat-side-gap)));
  width: 100%;
  padding-left: max(var(--mdc-chat-side-gap), env(safe-area-inset-left, 0px));
  padding-right: max(var(--mdc-chat-side-gap), env(safe-area-inset-right, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: var(--mdc-chat-z);
  pointer-events: auto;
  isolation: isolate;
  background: transparent;
  transform: none;
  box-sizing: border-box;
}
.mdc-chat-form::before {
  content: '';
  display: none;
}

.mdc-chat-form-shell {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.mdc-chat-input-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--mdc-light-black);
  border: none;
  border-radius: var(--mdc-radius-pill);
  padding: 0 14px 0 16px;
  height: var(--mdc-chat-row-height);
  min-height: var(--mdc-chat-row-height);
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 2px 5px rgba(0,0,0,.50),
    0 4px 18px -6px rgba(0,0,0,.55),
    var(--mdc-white-glow);
  transition: box-shadow var(--mdc-transition), transform var(--mdc-transition), background var(--mdc-transition);
}
.mdc-chat-input-row:focus-within {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 3px 12px -4px rgba(0,0,0,.75),
    var(--mdc-white-glow-strong);
}
@media (hover:hover) {
  .mdc-chat-input-row:hover {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 3px 10px -4px rgba(0,0,0,.65),
      var(--mdc-white-glow);
  }
}

/* ===== Chat Buttons ===== */
.mdc-chat-news-btn,
.mdc-chat-back-btn,
.mdc-chat-cancel-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  user-select: none;
  outline: none;
  background: var(--mdc-light-black-btn);
  color: var(--mdc-btn-icon);
  border-radius: var(--mdc-radius-btn);
  border: none;
  box-shadow: var(--mdc-btn-shadow);
  transition:
    background var(--mdc-transition),
    color var(--mdc-transition),
    box-shadow var(--mdc-transition),
    transform var(--mdc-transition),
    filter var(--mdc-transition),
    border-color var(--mdc-transition);
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  overflow: hidden;
}

/* === Zusammenfassen-Button (stärkerer Glow & Border) === */
.mdc-chat-news-btn {
  background: var(--mdc-light-black-btn);
  border: 1px solid var(--mdc-summary-border);
  box-shadow:
    var(--mdc-btn-shadow),
    var(--mdc-summary-glow);
}
@media (hover:hover) {
  .mdc-chat-news-btn:hover {
    color: var(--mdc-btn-icon-hover);
    border-color: var(--mdc-summary-border-hover);
    box-shadow:
      var(--mdc-btn-shadow-hover),
      var(--mdc-summary-glow-hover);
  }
}
.mdc-chat-news-btn:active {
  border-color: var(--mdc-summary-border);
  box-shadow:
    var(--mdc-btn-shadow-active),
    var(--mdc-summary-glow-active);
  transform: scale(.97);
}
.mdc-chat-news-btn:focus-visible {
  border-color: var(--mdc-summary-border-focus);
  box-shadow:
    0 0 0 1px var(--mdc-outline-soft-focus),
    var(--mdc-summary-glow-hover);
  color: var(--mdc-btn-icon-hover);
}

/* Back & Cancel (unverändert) */
.mdc-chat-back-btn,
.mdc-chat-cancel-btn {
  background: var(--mdc-light-black-btn);
  border: 1px solid var(--mdc-outline-soft);
  box-shadow:
    var(--mdc-btn-shadow),
    var(--mdc-white-glow-btn);
}
@media (hover:hover) {
  .mdc-chat-back-btn:hover,
  .mdc-chat-cancel-btn:hover {
    color: var(--mdc-btn-icon-hover);
    border-color: var(--mdc-outline-soft-hover);
    box-shadow:
      var(--mdc-btn-shadow-hover),
      var(--mdc-white-glow-btn-strong);
  }
}
.mdc-chat-back-btn:active,
.mdc-chat-cancel-btn:active {
  border-color: var(--mdc-outline-soft-hover);
  box-shadow:
    var(--mdc-btn-shadow-active),
    var(--mdc-white-glow-btn);
  transform: scale(.97);
}
.mdc-chat-back-btn:focus-visible,
.mdc-chat-cancel-btn:focus-visible {
  border-color: var(--mdc-outline-soft-focus);
  box-shadow:
    0 0 0 1px var(--mdc-outline-soft-focus),
    var(--mdc-white-glow-btn-strong);
  color: var(--mdc-btn-icon-hover);
}

/* Gemeinsame pseudo-layer */
.mdc-chat-news-btn::before,
.mdc-chat-back-btn::before,
.mdc-chat-cancel-btn::before {
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 42%),
    radial-gradient(circle at 30% 15%,rgba(255,255,255,.11),rgba(255,255,255,0) 65%);
  mix-blend-mode: overlay;
  opacity:.52;
  transition: opacity var(--mdc-transition);
  pointer-events:none;
}
.mdc-chat-news-btn:hover::before,
.mdc-chat-back-btn:hover::before,
.mdc-chat-cancel-btn:hover::before { opacity:.65; }
.mdc-chat-news-btn:active::before,
.mdc-chat-back-btn:active::before,
.mdc-chat-cancel-btn:active::before { opacity:.38; }

.mdc-chat-news-btn:hover,
.mdc-chat-back-btn:hover,
.mdc-chat-cancel-btn:hover:not(:disabled) {
  color: var(--mdc-btn-icon-hover);
}
.mdc-chat-news-btn:active,
.mdc-chat-back-btn:active:not(:disabled),
.mdc-chat-cancel-btn:active:not(:disabled) {
  transform: scale(.97);
}

.mdc-chat-news-btn {
  width: var(--mdc-summary-btn-size);
  height: var(--mdc-summary-btn-size);
  min-width: var(--mdc-summary-btn-size);
  min-height: var(--mdc-summary-btn-size);
}
.mdc-chat-back-btn,
.mdc-chat-cancel-btn {
  width: var(--mdc-inner-btn-size);
  height: var(--mdc-inner-btn-size);
  min-width: var(--mdc-inner-btn-size);
  min-height: var(--mdc-inner-btn-size);
}

.mdc-chat-news-btn svg,
.mdc-chat-back-btn svg,
.mdc-chat-cancel-btn svg {
  transition: stroke 160ms ease, color 160ms ease, transform 200ms ease;
  max-width: 60%;
  max-height: 60%;
  stroke: currentColor;
}
.mdc-chat-news-btn:hover svg,
.mdc-chat-back-btn:hover svg,
.mdc-chat-cancel-btn:hover svg { transform: scale(1.08); }
.mdc-chat-news-btn:active svg,
.mdc-chat-back-btn:active svg,
.mdc-chat-cancel-btn:active svg { transform: scale(.92); }

/* ===== Input ===== */
.mdc-chat-input {
  flex: 1 1 auto;
  background: transparent;
  color: var(--mdc-input-text);
  border: none;
  outline: none;
  font-size: 1.02rem;
  min-width: 0;
  font-weight: 500;
  letter-spacing: .2px;
  padding: 0;
  line-height: 1.35;
  height: 62%;
}
.mdc-chat-input::placeholder {
  color: var(--mdc-placeholder);
  font-weight: 400;
  opacity: .9;
  transition: opacity var(--mdc-transition);
}
.mdc-chat-input:focus::placeholder { opacity: .42; }
.mdc-chat-input:disabled { opacity:.45; cursor:not-allowed; }

.mdc-typing {
  opacity: .85;
  animation: mdcPulse 1.2s ease-in-out infinite;
}
@keyframes mdcPulse {
  0% { opacity: .55; }
  50% { opacity: 1; }
  100% { opacity: .55; }
}

/* ===== Mobile (<=680px) ===== */
@media (max-width: 680px) {
  :root {
    --mdc-size-scale-mobile: 1.15;
    --mdc-font-scale-mobile: 1.10;
    --mdc-summary-btn-size-mobile: calc(40px * var(--mdc-size-scale-mobile));
    --mdc-inner-btn-size-mobile: calc(28px * var(--mdc-size-scale-mobile));
    --mdc-chat-row-height-mobile: var(--mdc-summary-btn-size-mobile);
    --mdc-mobile-backplate-height: calc(59px * var(--mdc-size-scale-mobile));
    --mdc-messages-padding-mobile: calc(158px * var(--mdc-size-scale-mobile));
  }

  .mdc-chat-container { width: calc(100% - 20px); }

  .mdc-chat-form {
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    padding-left: max(var(--mdc-chat-side-gap), env(safe-area-inset-left, 0px));
    padding-right: max(var(--mdc-chat-side-gap), env(safe-area-inset-right, 0px));
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    transform: none;
    box-sizing: border-box;
  }

  .mdc-chat-form::before {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: calc(var(--mdc-mobile-backplate-height) + env(safe-area-inset-bottom, 0px));
    background: var(--mdc-input-backplate-bg);
    box-shadow: var(--mdc-input-backplate-shadow);
    z-index: -1;
    pointer-events: none;
  }
  body.mdc-chat-active .mdc-chat-form::before {
    box-shadow: 0 -4px 50px -12px rgba(0,0,0,.88), 0 -10px 56px -14px rgba(0,0,0,.80);
  }

  .mdc-chat-form-shell {
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .mdc-chat-input-row {
    height: var(--mdc-chat-row-height-mobile);
    min-height: var(--mdc-chat-row-height-mobile);
    padding: 0 12px 0 14px;
    min-width: 0;
  }

  .mdc-chat-back-btn,
  .mdc-chat-cancel-btn {
    width: var(--mdc-inner-btn-size-mobile);
    height: var(--mdc-inner-btn-size-mobile);
    min-width: var(--mdc-inner-btn-size-mobile);
    min-height: var(--mdc-inner-btn-size-mobile);
  }

  .mdc-chat-news-btn {
    width: var(--mdc-summary-btn-size-mobile);
    height: var(--mdc-summary-btn-size-mobile);
    min-width: var(--mdc-summary-btn-size-mobile);
    min-height: var(--mdc-summary-btn-size-mobile);
  }

  .mdc-chat-input { font-size: calc(0.88rem * var(--mdc-font-scale-mobile)); }
  .mdc-bubble { font-size: calc(0.90rem * var(--mdc-font-scale-mobile)); }
  #mdc-inline-chat .mdc-bubble.mdc-rich p.mdc-h { font-size: calc(0.98rem * var(--mdc-font-scale-mobile)) !important; }
  #mdc-inline-chat .mdc-bubble.mdc-rich.mdc-normal p.mdc-h { font-size: calc(1.02rem * var(--mdc-font-scale-mobile)) !important; }

  .mdc-plan-limit-banner { font-size:0.72rem; }

  .mdc-chat-messages {
    padding-bottom: calc(var(--mdc-messages-padding-mobile) + env(safe-area-inset-bottom, 0px));
  }
}

/* === Mobile-only: Scroll-Offset für kurze Viewports (<850px) === */
@media (max-width: 900px) and (max-height: 849px) {
  #mdc-inline-chat,
  .mdc-inline-chat-section {
    scroll-margin-top: 52px;
  }
}

/* Sehr schmale & kurze Mobile-Layouts */
@media (max-width: 680px) and (max-height: 849px) {
  #mdc-inline-chat { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mdc-typing { animation: none; }
  .mdc-chat-news-btn,
  .mdc-chat-back-btn,
  .mdc-chat-cancel-btn,
  .mdc-chat-input-row { transition: none; }
  .mdc-chat-news-btn svg,
  .mdc-chat-back-btn svg,
  .mdc-chat-cancel-btn svg { transition: none; }
  .mdc-plan-upgrade-btn { transition:none; }
}

/* ===== Visibility Guard ===== */
body.mdc-chat-active #mdc-inline-chat,
body.has-bottom-search #mdc-inline-chat {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.mdc-chat-active #mdc-inline-chat[hidden],
body.has-bottom-search #mdc-inline-chat[hidden] {
  display: flex !important;
}

/* ===== Abo-Tarifseite Override ===== */
body:has(#abo-root):not(:has(#abo-success-chat-anchor)) #mdc-inline-chat {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body:has(#abo-root):not(:has(#abo-success-chat-anchor)) .mdc-chat-form {
  display: none !important;
}

/* ===== Kontakt/Support-Seite Override ===== */
body:has(.contact-form-section) #mdc-inline-chat {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body:has(.contact-form-section) .mdc-chat-form {
  display: none !important;
}

/* ===== Legal-Seiten (Impressum / AGB / Widerruf / Datenschutz) Override ===== */
body:has(.midnyght-legal) #mdc-inline-chat {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body:has(.midnyght-legal) .mdc-chat-form {
  display: none !important;
}

/* ===== Profil-/Auth-Modal: Chat-Leiste ausblenden ===== */
body:has(.modal-backdrop.active) .mdc-chat-form {
  display: none !important;
}
body:has(.modal-backdrop.active) .mdc-chat-messages {
  padding-bottom: 16px !important;
}
@media (max-width: 680px) {
  body:has(.modal-backdrop.active) .mdc-chat-messages {
    padding-bottom: 12px !important;
  }
}

/* ===== v13.59: Scroll-Padding Fix – verhindert Überdeckung der letzten Coin-Zeile durch die Chat-Leiste ===== */
/* Greift nur, wenn der Inline-Chat aktiv ist (voll oder passiv als Bottom-Search). */
/* Mobile (≤680px): verwende die in chat.css definierten mobilen Padding-/Backplate-Variablen + Reserve. */
@media (max-width: 680px) {
  body.mdc-chat-active #crypto-table-container,
  body.has-bottom-search #crypto-table-container {
    padding-bottom: calc(var(--mdc-messages-padding-mobile) + 24px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* 681px–1100px: konservative Einrückung analog zur Desktop-Messages-Höhe plus Reserve. */
@media (min-width: 681px) and (max-width: 1100px) {
  body.mdc-chat-active #crypto-table-container,
  body.has-bottom-search #crypto-table-container {
    padding-bottom: calc(166px + 16px + env(safe-area-inset-bottom, 0px)) !important;
  }
}