/* Letzte Cleaning Prüfung: 03.10.2026
   Letztes Cleaning: 16.09.2026 */

/* Hilfe-Messenger: runder Startknopf unten rechts, darüber ein Fenster mit
   vier Reitern (Startseite, Nachrichten, Hilfe, Neuigkeiten). Gestaltung
   folgt den Token der Contentfactory (ai-contentfactory-polish.css); die
   Werte stehen hier noch einmal mit Rückfall, weil der Messenger auch auf
   Seiten laufen soll, die dieses Stylesheet nicht laden. */

/* Dasselbe gilt für die Schriften: ohne die Vorlage fiele der Messenger auf Arial zurück (AL-20261012-09). */
@import url("confacai-schriften.css?v=1");

.support-messenger {
  --sm-bg: var(--cf-surface, #11131a);
  --sm-bg-deep: var(--cf-bg-elevated, #0c0e14);
  --sm-surface: var(--cf-surface-hover, #171a23);
  --sm-surface-active: var(--cf-surface-active, #1b1e28);
  --sm-border: var(--cf-border, #262a35);
  --sm-border-strong: var(--cf-border-strong, #363c4a);
  --sm-text: var(--cf-text, #f4f6fb);
  --sm-text-soft: var(--cf-text-soft, #c7ccd7);
  --sm-muted: var(--cf-muted, #9199aa);
  --sm-dim: var(--cf-dim, #697286);
  --sm-accent: var(--cf-accent, #ff304f);
  --sm-accent-hover: var(--cf-accent-hover, #ff4763);
  --sm-success: var(--cf-success, #52d69a);
  --sm-radius: 16px;
  --sm-radius-card: var(--cf-radius-surface, 10px);
  --sm-radius-control: var(--cf-radius-control, 7px);
  --sm-shadow: 0 28px 90px rgba(0, 0, 0, .68), 0 0 0 1px rgba(255, 48, 79, .08);
  --sm-focus: var(--cf-focus-ring, 0 0 0 3px rgba(255, 48, 79, .2));
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 10080;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sm-text);
}

/* WL16-12 (16.10.2026): Der Knopf steht fest unten rechts und ist immer sichtbar – auch bei geöffnetem Formular (Betreiber:
   „der Button soll da bleiben und unter Weiter-Button bzw. der Box sein“). Die Formularfenster der confacAI-Hauptseite lassen
   am PC unten 90 px frei (22 px Rand + 56 px Knopf + 12 px Luft): das Fenster mit „Weiter“ endet über dem Knopf, beide
   überlappen nie. Movie Studio und Werbestudio bleiben unverändert. */
@media (min-width: 761px) {
  :is(html, #sm#platz) body:has(#factory-workspace) :is(.generic-tool-modal, .shorts-production-modal, .dubbing-production-modal, .transcription-production-modal).is-open { padding-bottom: 90px !important; }
  :is(html, #sm#platz) body:has(#factory-workspace) :is(.shorts-production-modal, .dubbing-production-modal, .transcription-production-modal).is-open :is(.shorts-production-dialog, .dubbing-production-dialog, .transcription-production-dialog) { max-height: 100% !important; }
  /* WL22-43 (22.10.2026): Mit dieser Höhengrenze schnitten „Video übersetzen“ und Shorts den Knopf „Produktion starten“
     unten ab – ihr Inhalt war auf overflow: visible gestellt (ai-contentfactory-control-center.css). Der Inhalt scrollt jetzt
     im Fenster, die Startleiste bleibt als deckender Abschluss unten stehen. */
  :is(html, #sm#platz) body:has(#factory-workspace) :is(.shorts-production-modal, .dubbing-production-modal).is-open :is(.shorts-production-body, .dubbing-production-body) { flex: 1 1 auto; min-height: 0 !important; overflow-y: auto !important; padding-bottom: 0 !important; }
  :is(html, #sm#platz) body:has(#factory-workspace) :is(.shorts-production-modal, .dubbing-production-modal).is-open :is(.shorts-production-body, .dubbing-production-body) .workspace-actions {
    background: var(--cf-bg-elevated, #11131a);
    border-top: 1px solid rgba(135, 145, 170, .16);
    bottom: 0 !important;
    position: sticky !important;
    z-index: 3;
  }
}
/* MOB19-06 (19.10.2026): Das allgemeine Werkzeugfenster scrollt bis 1024 px als Ganzes, sein Inhalt nicht (ai-contentfactory-pages.css).
   Die Höhengrenze gilt für dieses Fenster deshalb erst ab 1025 px – am Tablet lief der Inhalt (z. B. die Stimmen der Sprachausgabe)
   sonst unten aus dem Rahmen. */
@media (min-width: 1025px) {
  :is(html, #sm#platz) body:has(#factory-workspace) .generic-tool-modal.is-open .generic-tool-modal-dialog { max-height: 100% !important; }
}

.support-messenger *,
.support-messenger *::before,
.support-messenger *::after { box-sizing: border-box; }

.support-messenger button { font: inherit; color: inherit; }

/* --- Startknopf ---------------------------------------------------------- */
.sm-launcher {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff2347, #c81236);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 14px 36px rgba(255, 35, 71, .34), 0 2px 8px rgba(0, 0, 0, .5);
  transition: transform .18s ease, box-shadow .18s ease;
}

.sm-launcher:hover { transform: translateY(-1px); box-shadow: 0 18px 42px rgba(255, 35, 71, .42), 0 2px 8px rgba(0, 0, 0, .5); }
.sm-launcher:focus-visible { outline: 0; box-shadow: var(--sm-focus), 0 14px 36px rgba(255, 35, 71, .34); }
.sm-launcher svg { width: 26px; height: 26px; transition: opacity .16s ease, transform .16s ease; }
.sm-launcher [data-sm-icon="close"] { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.6); }
.support-messenger.is-open .sm-launcher [data-sm-icon="chat"] { opacity: 0; transform: rotate(90deg) scale(.6); }
.support-messenger.is-open .sm-launcher [data-sm-icon="close"] { opacity: 1; transform: none; }

.sm-launcher-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  border: 2px solid var(--cf-bg, #08090d);
  background: #fff;
  color: #c81236;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

.sm-launcher-badge[hidden] { display: none; }

/* --- Fenster ------------------------------------------------------------- */
.sm-panel {
  position: absolute;
  right: 0;
  bottom: 70px;
  display: flex;
  flex-direction: column;
  width: 384px;
  max-width: calc(100vw - 44px);
  /* 180 statt 110 px Abzug (CFAI-MOB-20260924-070): In niedrigen Fenstern, z. B. Tablet quer mit
     768 px Hoehe, reichte das Fenster sonst bis an den oberen Rand und verdeckte Credits,
     Sprachumschalter und Profilknopf der Kopfzeile. Ab 860 px Fensterhoehe bleibt es bei 680 px. */
  height: min(680px, calc(100vh - 180px));
  overflow: hidden;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  background: var(--sm-bg);
  box-shadow: var(--sm-shadow);
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.support-messenger.is-open .sm-panel { opacity: 1; transform: none; pointer-events: auto; }
.sm-panel[hidden] { display: none; }

.sm-view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.sm-view[hidden] { display: none; }

.sm-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #4b5367 transparent;
  scrollbar-width: thin;
}

/* Kopf der Startseite: Marke, Team, Begrüßung. Rot statt vidIQ-Blau, aber
   dieselbe Aufgabe - der Kunde soll sehen, dass hier Menschen antworten. */
.sm-hero {
  position: relative;
  padding: 22px 22px 68px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255, 48, 79, .32), transparent 60%),
    linear-gradient(160deg, #3a0c17 0%, #1a0810 55%, var(--sm-bg) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.sm-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
.sm-brand { display: inline-flex; align-items: center; gap: 9px; }
.sm-brand img { height: 22px; width: auto; display: block; }
.sm-brand-logo { width: 26px; height: 26px; border-radius: 7px; }
/* Faellt ein Markenbild aus, tritt der Schriftzug an seine Stelle. Das
   [hidden] braucht die eigene Regel, weil ".sm-brand img" mit display:block
   sonst gewinnt und ein verstecktes Bild trotzdem Platz nimmt. */
.sm-brand img[hidden] { display: none; }
.sm-brand-text { font-family: 'Space Grotesk', 'DM Sans', Arial, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: .2px; color: #fff; }
.sm-brand-text b { color: var(--sm-accent); font-weight: 600; }
.sm-team { display: flex; align-items: center; }
.sm-team-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: -8px;
  border: 2px solid #23101a;
  border-radius: 50%;
  background: linear-gradient(135deg, #2a2f3d, #1a1d27);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.sm-team-avatar:first-child { margin-left: 0; }
.sm-team-avatar.is-accent { background: linear-gradient(135deg, #ff2347, #c81236); }

.sm-hero h2 {
  margin: 0;
  font-family: 'Space Grotesk', 'DM Sans', Arial, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.sm-hero h2 small { display: block; margin-bottom: 4px; color: rgba(255, 255, 255, .78); font-size: 20px; font-weight: 600; }

.sm-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 9px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  cursor: pointer;
}
.sm-close:hover { background: rgba(255, 255, 255, .12); }
.sm-close svg { width: 16px; height: 16px; }

/* Die Karte "Sende uns eine Nachricht" ragt in den Kopf hinein - und muss
   darueber liegen: der Kopf ist positioniert und wuerde sie sonst verdecken. */
.sm-home-body { position: relative; z-index: 1; padding: 0 16px 18px; margin-top: -48px; display: grid; gap: 12px; }

.sm-card {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-card);
  background: var(--sm-surface);
  color: var(--sm-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.sm-card:hover { border-color: var(--sm-border-strong); background: var(--sm-surface-active); }
.sm-card:focus-visible { outline: 0; box-shadow: var(--sm-focus); }

.sm-card-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sm-card-row > div { min-width: 0; }
.sm-card strong { display: block; font-size: 14px; font-weight: 700; }
.sm-card small { display: block; margin-top: 2px; color: var(--sm-muted); font-size: 12.5px; line-height: 1.4; }
.sm-card-arrow { flex: 0 0 auto; width: 20px; height: 20px; color: var(--sm-accent); }

.sm-card-image {
  width: 100%;
  aspect-ratio: 16 / 8;
  margin: -14px -16px 12px;
  width: calc(100% + 32px);
  object-fit: cover;
  border-bottom: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-card) var(--sm-radius-card) 0 0;
  background: #0d0f16;
}

.sm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.sm-tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 48, 79, .14);
  color: #ff7189;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

.sm-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-control);
  background: var(--sm-bg-deep);
}
.sm-search:focus-within { border-color: var(--sm-accent); box-shadow: var(--sm-focus); }
.sm-search svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--sm-dim); }
.sm-search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 0;
  border: 0;
  background: transparent;
  color: var(--sm-text);
  font: inherit;
  outline: 0;
}
.sm-search input::placeholder { color: var(--sm-dim); }

/* --- Reiter mit Kopfzeile ------------------------------------------------ */
.sm-head {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 8px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--sm-border);
  background: var(--sm-bg);
}
.sm-head h3 {
  margin: 0;
  font-family: 'Space Grotesk', 'DM Sans', Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sm-head-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--sm-text-soft);
  cursor: pointer;
}
.sm-head-button:hover { background: var(--sm-surface); color: var(--sm-text); }
.sm-head-button svg { width: 18px; height: 18px; }
.sm-head-platzhalter { width: 36px; height: 36px; }
/* Kopf mit Zusatzknopf (Neues Gespraech, AL-20261001-82): beide Seiten gleich
   breit, damit der Titel mittig bleibt. */
.sm-head.hat-zusatz { grid-template-columns: 76px 1fr 76px; }
.sm-head-rechts { display: flex; justify-content: flex-end; gap: 4px; }

.sm-section { padding: 14px 16px; }
.sm-section-title { margin: 0 0 10px; color: var(--sm-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* --- Listen (Tickets, Sammlungen, Artikel, Neuigkeiten) ------------------- */
.sm-list { display: grid; gap: 8px; padding: 12px 16px 16px; }
.sm-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-card);
  background: var(--sm-surface);
  color: var(--sm-text);
  text-align: left;
  cursor: pointer;
}
.sm-row:hover { border-color: var(--sm-border-strong); background: var(--sm-surface-active); }
.sm-row:focus-visible { outline: 0; box-shadow: var(--sm-focus); }
.sm-row > div { min-width: 0; }
.sm-row strong { display: block; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-row small { display: block; margin-top: 2px; color: var(--sm-muted); font-size: 12px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-row .sm-card-arrow { width: 18px; height: 18px; color: var(--sm-dim); }
.sm-row.is-unread strong::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--sm-accent);
  vertical-align: 1px;
}

.sm-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(145, 153, 170, .16);
  color: var(--sm-text-soft);
}
.sm-status.is-answered { background: rgba(82, 214, 154, .16); color: var(--sm-success); }
.sm-status.is-open { background: rgba(255, 48, 79, .14); color: #ff7189; }
.sm-status.is-closed { background: rgba(105, 114, 134, .18); color: var(--sm-muted); }

.sm-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 260px;
  padding: 24px;
  text-align: center;
}
.sm-empty svg { width: 34px; height: 34px; margin-bottom: 4px; color: var(--sm-text-soft); }
.sm-empty strong { font-family: 'Space Grotesk', 'DM Sans', Arial, sans-serif; font-size: 17px; }
.sm-empty p { margin: 0; color: var(--sm-muted); font-size: 13px; }
.sm-empty.is-done svg { color: var(--sm-success); }

.sm-loading { padding: 30px; color: var(--sm-muted); text-align: center; font-size: 13px; }
.sm-error { margin: 12px 16px; padding: 12px 14px; border: 1px solid rgba(255, 91, 114, .4); border-radius: var(--sm-radius-card); color: #ff9ba3; font-size: 13px; }

/* --- Knöpfe ---------------------------------------------------------------- */
.sm-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border: 0;
  border-radius: var(--sm-radius-control);
  background: linear-gradient(135deg, #ff2347, #e20d35);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(255, 35, 71, .24);
}
.sm-primary:hover { background: var(--sm-accent-hover); }
.sm-primary:disabled { opacity: .55; cursor: wait; box-shadow: none; }
.sm-primary:focus-visible { outline: 0; box-shadow: var(--sm-focus); }
.sm-primary svg { width: 16px; height: 16px; }
.sm-center { display: grid; place-items: center; padding: 0 16px 20px; }

/* --- Gespräch ------------------------------------------------------------- */
.sm-thread { display: grid; gap: 10px; padding: 14px 16px; }
.sm-bubble {
  max-width: 86%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sm-bubble.is-customer { justify-self: end; border-bottom-right-radius: 4px; background: linear-gradient(135deg, #ff2347, #c81236); color: #fff; }
.sm-bubble.is-team { justify-self: start; border-bottom-left-radius: 4px; border: 1px solid var(--sm-border); background: var(--sm-surface); }
.sm-bubble time { display: block; margin-top: 4px; font-size: 10.5px; opacity: .7; }
.sm-thread-intro { padding: 4px 2px 0; color: var(--sm-muted); font-size: 12px; text-align: center; }

.sm-composer {
  display: grid;
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--sm-border);
  background: var(--sm-bg);
}
.sm-composer input,
.sm-composer textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-control);
  background: var(--sm-bg-deep);
  color: var(--sm-text);
  font: inherit;
  outline: 0;
  resize: vertical;
}
.sm-composer input:focus,
.sm-composer textarea:focus { border-color: var(--sm-accent); box-shadow: var(--sm-focus); }
.sm-composer textarea { min-height: 84px; }
.sm-composer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sm-composer-row small { color: var(--sm-dim); font-size: 12px; }
.sm-composer .sm-error { margin: 0; }

/* --- Hilfeartikel ---------------------------------------------------------- */
.sm-article { padding: 16px 18px 24px; }
.sm-article h4 { margin: 0 0 4px; font-family: 'Space Grotesk', 'DM Sans', Arial, sans-serif; font-size: 19px; line-height: 1.25; }
.sm-article .sm-article-meta { margin: 0 0 14px; color: var(--sm-muted); font-size: 12px; }
.sm-article p { margin: 0 0 12px; color: var(--sm-text-soft); font-size: 14px; line-height: 1.6; }
.sm-article ul { margin: 0 0 12px; padding-left: 18px; color: var(--sm-text-soft); }
.sm-article li { margin-bottom: 5px; line-height: 1.55; }
.sm-article strong { color: var(--sm-text); }
.sm-article-help {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--sm-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--sm-muted);
  font-size: 12.5px;
}
.sm-article-help button {
  padding: 7px 12px;
  border: 1px solid var(--sm-border-strong);
  border-radius: var(--sm-radius-control);
  background: var(--sm-surface);
  color: var(--sm-text);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.sm-article-help button:hover { border-color: var(--sm-accent); }

/* --- Neuigkeiten ------------------------------------------------------------ */
.sm-news { display: grid; gap: 12px; padding: 14px 16px 16px; }
.sm-news-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; margin-top: 14px; }
.sm-news-intro strong { display: block; font-family: 'Space Grotesk', 'DM Sans', Arial, sans-serif; font-size: 16px; }
.sm-news-intro small { color: var(--sm-muted); font-size: 12px; }
/* Das Markenzeichen im Kopf war zuerst das Logo als Bild: rot auf transparent,
   auf dem roten Kreis unsichtbar, auf dem Telefon gequetscht. Jetzt ein
   eingebettetes Symbol in fester Groesse - es muss nichts laden und kann
   nicht schrumpfen. */
.sm-news-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border: 1px solid var(--sm-border-strong);
  border-radius: 50%;
  background: var(--sm-bg-deep);
  color: var(--sm-accent);
}
.sm-news-avatar svg { width: 20px; height: 20px; flex: 0 0 auto; }
.sm-news time { display: block; margin-bottom: 4px; color: var(--sm-dim); font-size: 11.5px; }

/* --- Fußleiste ---------------------------------------------------------------- */
.sm-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* fuenf Reiter seit AL-20261001-77 (Chat) */
  border-top: 1px solid var(--sm-border);
  background: var(--sm-bg-deep);
}
.sm-tab {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 4px 11px;
  border: 0;
  background: transparent;
  color: var(--sm-muted);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.sm-tab svg { width: 22px; height: 22px; }
.sm-tab:hover { color: var(--sm-text); }
.sm-tab.is-active { color: var(--sm-accent); }
.sm-tab:focus-visible { outline: 0; box-shadow: inset var(--sm-focus); }
.sm-tab-label { position: relative; }
.sm-tab-dot {
  position: absolute;
  top: -14px;
  right: -12px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--sm-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}
.sm-tab-dot[hidden] { display: none; }

/* --- Telefon: Fenster füllt den Bildschirm ------------------------------------ */
@media (max-width: 520px) {
  .support-messenger { right: 14px; bottom: 14px; }
  .sm-panel {
    position: fixed;
    inset: 0;
    width: auto;
    max-width: none;
    height: auto;
    border-radius: 0;
    border: 0;
  }
  .support-messenger.is-open .sm-launcher { display: none; }
  .sm-hero { padding-top: 18px; }
}

/* Handy und Tablet: kein runder Knopf unten rechts (MOB17-26) - dort fliegt
   die Eingabe der Werkzeuge mit. Die Hilfe oeffnet "Hilfe & Kontakt" im
   Profilmenue; offen bleibt der Knopf als Schliessen-Kreuz stehen. */
@media (max-width: 1024px) {
  .support-messenger:not(.is-open) .sm-launcher { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-panel, .sm-launcher, .sm-launcher svg, .sm-card { transition: none; }
}

/* KI-Hilfe-Assistent (AL-20261001-57): Einstieg oben im Hilfe-Reiter, Gespraech
   in den Blasen der Ticket-Ansicht, Uebergabe an den Support als Knopf. */
.sm-assistent-karte { border-color: rgba(255, 35, 71, .45); background: linear-gradient(135deg, rgba(255, 35, 71, .12), rgba(255, 35, 71, .03)); }
/* Dieselbe Karte auf der Startseite (AL-20261001-64): Sie ragt dort in den Kopfbereich hinein -
   ohne deckenden Grund schiene dessen Unterkante als Linie durch die halbtransparente Fläche. */
.sm-card.sm-assistent-karte { background: linear-gradient(135deg, rgba(255, 35, 71, .12), rgba(255, 35, 71, .03)), var(--sm-surface); }
.sm-card.sm-assistent-karte:hover { border-color: rgba(255, 35, 71, .7); background: linear-gradient(135deg, rgba(255, 35, 71, .16), rgba(255, 35, 71, .05)), var(--sm-surface-active); }
.sm-assistent-denkt { color: var(--sm-muted); font-style: italic; }
.sm-assistent-uebergabe { display: flex; justify-content: center; padding: 4px 0 2px; }
.sm-assistent-uebergabe button { padding: 7px 12px; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-control); background: transparent; color: var(--sm-text-soft); font: inherit; font-size: 12.5px; cursor: pointer; }
.sm-assistent-uebergabe button:hover { border-color: var(--sm-accent); color: var(--sm-text); }
.sm-assistent-uebergabe.ist-empfohlen button { border-color: var(--sm-accent); color: var(--sm-text); }