@charset "UTF-8";

/* ========================================================================
   MERGED: dashboard.css  (FIRST)
   ======================================================================== */

/* Layout */
/* === Global UI Font (Custom) ============================================= */
@font-face {
  font-family: "GlobalUI";
  src: url("../z_index/globalfont-light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GlobalUI";
  src: url("../z_index/globalfont-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Zentrales Font-System */
:root{
  /* Dashboard-UI-Font + Fallbacks */
  --font-ui: "GlobalUI", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Editor-Font (Messenger). Wenn du ihn separat willst, später einfach überschreiben. */
  --wa-editor-font: var(--font-ui);
}

body {
  margin: 0;
  font-family: var(--font-ui);
  background: #fafafa;
  color: #222;
}
.container { max-width: 1100px; margin: 20px auto; padding: 0 16px; }
.h2 { margin:0; font-size:18px; }
.top-actions { display:flex; align-items:center; justify-content:space-between; margin:18px 0; }

.flash { background:#eef6ff; border:1px solid #cfe3ff; color:#174a8b; padding:10px 12px; border-radius:8px; font-size:13px; margin-bottom:12px; }
.empty { color:#666; font-size:14px; padding:20px 0; }

.grid { display:grid; gap:16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* Card */
.card { background:#fff; border:1px solid #e6e6e6; border-radius:4px; overflow:visible; box-shadow:0 1px 0 rgba(0,0,0,.02); display:flex; flex-direction:column; }
.card-cover { background:#f4f4f4; aspect-ratio:16/10; width:100%; display:block; object-fit:cover; }
.card-body { padding:12px 12px 12px 12px; }
.card-title { font-size:16px; font-weight:bold; margin:10px 0 6px 0; }
.card-desc { font-size:13px; color:#555; min-height:38px; }
.card-url small { font-size:12px; }
.muted { color:#888; }

/* Status-Zeile oben (wie Screenshot) */
.status-row { display:flex; align-items:center; justify-content:space-between; padding:12px; }
.status-left { display:flex; align-items:baseline; gap:10px; }
.status-label { font-weight:300; letter-spacing:.2px; color:#444; }
.status-value { font-weight:700; }
.status-online { color:#1a7f3b; }
.status-offline { color:#9b0f0f; }

/* Loader (3 Punkte, Apple-like) */
.status-value.loading { display:inline-flex; gap:6px; align-items:center; min-width:50px; }
.status-value.loading .dot {
  width:6px; height:6px; border-radius:50%; background: #777; opacity:.25;
  animation: blink 1s infinite ease-in-out;
}
.status-value.loading .dot:nth-child(2){ animation-delay:.15s }
.status-value.loading .dot:nth-child(3){ animation-delay:.30s }
@keyframes blink { 0%, 80%, 100% { opacity:.25 } 40% { opacity:1 } }

/* Buttons */
.btn {
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  text-decoration:none;
  font-size:14px;
  border:1px solid #ddd;
  background:#fff;
  color:#111;
  cursor:pointer;
  font-family: var(--font-ui);
}

.btn:hover { background:#f2f2f2; }
.btn-primary { background:#111; color:#fff; border-color:#111; }
.btn-primary:hover { background:#000; }
.btn-ghost { background:#fff; color:#111; }
.btn-danger { background:#ffe9e9; color:#b40000; border-color:#f1c0c0; }
.btn-danger:hover { background:#ffdede; }
.btn-xs { padding:4px 8px; font-size:12px; }

/* Status-Toggle Farbe je Zustand */
.card[data-current="offline"] .status-toggle { background:#6FAD00; color:#fff; }
.card[data-current="offline"] .status-toggle:hover { filter: brightness(0.95); }
.card[data-current="online"]  .status-toggle { background:#FF0101; color:#fff; }
.card[data-current="online"]  .status-toggle:hover { filter: brightness(0.95); }

/* Reihen unter dem Titel */
.hairline { border:0; border-top:1px solid #ececec; margin:12px 0; }
.row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
/* Obere Aktionszeile: links Edit/Kopie/Löschen, rechts Share */
.row.row-actions-top{
  margin-top:8px;
  position:relative;
  overflow:visible;

  /* alle Buttons in einer Zeile, links starten */
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:nowrap;
}

/* ab dem 4. Kind (WhatsApp) alles nach rechts schieben */
.row.row-actions-top > *:nth-child(4){
  margin-left:auto;
}

/* Linke Aktionsgruppe in der Karten-Zeile */
.row-actions-top .row-actions-left{
  justify-content: flex-start; /* statt space-between von .row */
  flex-wrap: nowrap;
}

/* Löschen Popover */
.delete-form { margin:0; position:relative; }

.confirm-pop {
  position:absolute;
  right:0;
  bottom: calc(100% + 8px); /* Popover über dem Button */
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
  padding:10px;
  z-index:2000;
  min-width:220px;
}
.confirm-text { font-size:13px; margin-bottom:8px; }
.confirm-actions { display:flex; gap:8px; justify-content:flex-end; }

/* Responsive */
@media (max-width: 520px){
  .status-row { padding:10px; }
  .card-title { font-size:15px; }
  .btn-share { font-size:13px; }
}
[hidden] { display: none !important; }

/* --- Apple-like 3-dot loader in STATUS --- */
.status-value.status-loading {
  display: inline-flex;
  align-items: center;
  min-width: 64px;         /* verhindert "Zucken" beim Ersetzen */
  justify-content: center;
}

.status-value.status-loading .dots {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  line-height: 1;
}

.status-value.status-loading .dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;       /* übernimmt Online/Offline-Farbe der Pill */
  opacity: .35;
  animation: dot-bounce 900ms infinite ease-in-out;
  display: block;
}

/* zeitliche Versetzung */
.status-value.status-loading .dots i:nth-child(2) { animation-delay: .12s; }
.status-value.status-loading .dots i:nth-child(3) { animation-delay: .24s; }

@keyframes dot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .35; }
  40%           { transform: translateY(-3px); opacity: 1; }
}
/* optional, nur für hübscheren Übergang */
.status-value.status-typing { opacity: .7; letter-spacing: .08em; }

/* URL-Status: offline = grau (wie bisher), online = grün wie der Button */
.card .card-url small { 
  color: #777;                 /* offline/plain-text */
}

.card .card-url small a {
  color: #16a34a;              /* online/link: grün */
  text-decoration: none;
  font-weight: 600;
  transition: color .15s ease;
}

.card .card-url small a:hover,
.card .card-url small a:focus {
  color: #0f7a36;              /* dunkler beim Hover */
  text-decoration: underline;
  outline: none;
}

/* Wenn der Link aktiv ist, sollen die .muted-Teile nicht grau bleiben */
.card .card-url small a .muted {
  color: inherit;
  opacity: 1;
}
/* Online/Offline Rahmen an der Karte */
.card {
  transition: border-color .15s ease, box-shadow .15s ease;
}

.card[data-current="online"] {
  border-color: #3F8F5D;               /* grün */
  box-shadow: 0 0 0 0px rgba(22,163,74,.18) inset,
              0 1px 0 rgba(0,0,0,.02);
}

.card[data-current="offline"] {
  border-color: #8E120B;               /* rot */
  box-shadow: 0 0 0 0px rgba(180,0,0,.18) inset,
              0 1px 0 rgba(0,0,0,.02);
}
/* Schlanker Umschalt-Button oben rechts */
.status-toggle {
  padding: 4px 10px;     /* vorher: 8px 12px  → deutlich flacher */
  line-height: 1.1;      /* kompakter ohne Font-Änderung */
  border-radius: 8px;    /* etwas kantiger */
  min-height: 28px;      /* gute Klickfläche behalten */
  font-weight: 300;      /* optional: wirkt „knackiger“ */
}
/* === STATUS-BAR über dem Startbild: full-width grün/rot === */

/* Grundlayout der Leiste */
.grid .card .status-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  margin:0 0 8px 0;
  border-radius:3px 3px 0 0;          /* oben rund, damit an Cover anschließt */
  background:#999;                    /* Fallback */
  transition:background-color .2s ease, color .2s ease;
}

/* Farbe abhängig vom Online-Status (kommt aus data-current am <article.card>) */
.grid .card[data-current="online"]  .status-row{ background:#00C2B6; } /* grün */
.grid .card[data-current="offline"] .status-row{ background:#FF5500; } /* rot  */

/* Text in der Leiste: „STATUS:“ + ONLINE/OFFLINE weiß */
.grid .card .status-row .status-label,
.grid .card .status-row .status-value{
  color:#fff !important;
}

/* Das Badge selbst nicht extra einfärben – nur Text weiß lassen */
.grid .card .status-row .status-value.status-online,
.grid .card .status-row .status-value.status-offline{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
}

/* Der Schalter bleibt wie er ist: Farben NICHT zwangs-weiß machen */
.grid .card .status-row .status-toggle{
  /* keine Farb-Überschreibung hier – erhält existierende .btn-Optik */
}

/* Optische Verbindung zur Cover-Kachel (falls das Cover eigene Rundungen hat) */
.grid .card > a {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* Haarlinie UNTER „Editieren / Kopieren / Löschen“ */
:root { --hairline-color: #e5e7eb; } /* optional, falls noch nicht vorhanden */

.grid .card .row-actions-top{
  padding-bottom: 8px;
  position: relative;
}

.grid .card .row-actions-top::after{
  content: "";
  display: block;
  height: 0;
  border-top: 1px solid var(--hairline-color);
  margin-top: 8px;
  opacity: .9;
}
/* Pastell-Look NUR im WA-Fancy-Messenger, nicht in der Dashboard-Karte */
.wa-fancy-panel .btn-share.wa-fancy,
.wa-fancy-panel .btn-share[data-wa-fancy]{
  background-color:#f1fcf5 !important;
  border-color:#dcefe3 !important;
  color:#0b5d3f !important;
}

.wa-fancy-panel .btn-share.wa-fancy:hover,
.wa-fancy-panel .btn-share[data-wa-fancy]:hover{
  filter: brightness(0.98) !important;
}

/* Haarlinie nach der Share-Button-Zeile */
.row-share{
  position: relative;
  padding-bottom: 8px;        /* kleiner Abstand vor der Linie */
}

.row-share::after{
  content: "";
  display: block;
  height: 0;
  border-top: 1px solid var(--hairline-color, #e5e7eb); /* Fallback falls Var fehlt */
  margin-top: 8px;
  opacity: .9;
}
/* === WA Fancy: Editor sauber einpassen ================================== */
.wa-fancy-panel{
  overflow: hidden;                 /* nichts übersteht die Rundung */
  border-radius: 12px;
}

.wa-fancy-editor{
  display: block;
  width: 100%;
  box-sizing: border-box;           /* Padding + Border in die Breite einrechnen */
  margin: 0;
  padding: 12px 14px;
  min-height: 160px;
  background: #fff;
  border: 1px solid #dfe3e7;        /* wie die Pastell-Buttons */
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: #222;
  white-space: pre-wrap;            /* Zeilen bleiben erhalten */
  word-break: break-word;
  outline: none;
}

.wa-fancy-editor:focus{
  border-color: #c7d3e2;
  box-shadow: 0 0 0 3px rgba(44, 98, 180, .12);
}

/* Placeholder für leeren Editor (nutzt data-placeholder am Element) */
.wa-fancy-editor:empty::before{
  content: attr(data-placeholder);
  color: #a3a9b3;
  pointer-events: none;
}

/* oben ein bisschen Luft zwischen Toolbar/Msgbar und Editor */
.wa-fancy-panel .wa-msgbar{ margin-bottom: 6px; }
/* --- Cards spacing override --- */
.dashboard-grid,
.cards,
.cards-grid {
  row-gap: 28px;          /* wirkt bei Grid & modernem Flex */
}

.card {
  margin-bottom: 20px;    /* zusätzlicher „unten“-Puffer je Karte */
}
/* Fancy-Editor auf 600px begrenzen + dünner Scrollbar */
.wa-fancy-panel .wa-fancy-editor{
  position: relative;                 /* <<< Overlay an Editor binden */
  min-height: 200px;
  max-height: 600px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;  /* smooth auf iOS */
  scrollbar-width: thin;              /* Firefox */
}


/* WebKit Scrollbar (Chrome/Safari/Edge) */
.wa-fancy-panel .wa-fancy-editor::-webkit-scrollbar{
  width: 6px;
}
.wa-fancy-panel .wa-fancy-editor::-webkit-scrollbar-track{
  background: transparent;
}
.wa-fancy-panel .wa-fancy-editor::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.25);
  border-radius: 4px;
}
.wa-fancy-panel .wa-fancy-editor::-webkit-scrollbar-thumb:hover{
  background: rgba(0,0,0,.35);
}

/* === Emoji-Picker (leichtgewichtig) ==================================== */
.wa-emoji-popup {
  position: fixed;
  z-index: 1200;
  inset: auto auto 20px 20px;
  width: 420px;                       /* Desktop-Basis */
  max-width: 420px;
  max-height: 420px;
  display: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.18), 0 4px 18px rgba(0,0,0,.08);
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.25;
}
.wa-emoji-popup.open {
  display: grid;
  grid-template-rows: auto auto 1fr;
}

/* Responsive: auf schmalen Viewports wie ein Keyboard verhalten */
@media (max-width: 720px){
  .wa-emoji-popup{
    width: auto;
    max-width: calc(100vw - 24px);    /* rechts nicht abgeschnitten */
  }
}
@media (max-width: 520px){
  .wa-emoji-popup{
    inset: auto 8px 8px 8px;          /* fast Vollbreite unten, wie Keyboard */
  }
  .wa-emoji-grid .row{
    grid-template-columns: repeat(7, 1fr);   /* größere Tasten auf Handy */
  }
}
@media (max-width: 380px){
  .wa-emoji-grid .row{
    grid-template-columns: repeat(6, 1fr);   /* sehr schmal: 6 Spalten */
  }
}

.wa-emoji-head { display: flex; gap: 8px; align-items: center; padding: 8px; border-bottom: 1px solid #eef0f4; }
.wa-emoji-search { flex: 1; height: 32px; padding: 0 10px; border: 1px solid #e5e7eb; border-radius: 8px; }
.wa-emoji-tone { display: inline-flex; gap: 4px; }
.wa-emoji-tone button { height: 28px; min-width: 28px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; cursor: pointer; user-select: none; }
.wa-emoji-tone button.active { outline: 2px solid #3b82f6; outline-offset: 1px; }

.wa-emoji-tabs { display: grid; grid-auto-flow: column; gap: 4px; padding: 6px; border-bottom: 1px solid #eef0f4; }
.wa-emoji-tab { height: 28px; border: 0; border-radius: 6px; background: #f6f7f9; cursor: pointer; }
.wa-emoji-tab.active { background: #e9eefc; }

.wa-emoji-grid { padding: 6px; overflow: auto; -webkit-overflow-scrolling: touch; }
.wa-emoji-grid::-webkit-scrollbar { width: 8px; height: 8px; }
.wa-emoji-grid { scrollbar-width: thin; }
.wa-emoji-grid .row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.wa-emoji-item {
  font-size: 22px; line-height: 1; display: grid; place-items: center;
  height: 36px; border-radius: 8px; cursor: pointer; user-select: none;
}
.wa-emoji-item:hover { background: #f3f4f6; }
.wa-emoji-foot { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-top: 1px solid #eef0f4; font-size: 12px; color: #555; }
.wa-emoji-close { border: 0; background: transparent; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.wa-emoji-close:hover { background: #f3f4f6; }

/* === Icon-Buttons: Editieren / Kopieren / Löschen / WA / X / FB ============= */
/* Gemeinsames Icon-Button-Layout (100×100 PNGs aus ../gra, runtergerendert) */

.row-share{
  gap: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
/* In der Kartenaktionszeile sitzt .row-share ganz rechts */
.row-actions-top .row-share{
  margin-left:auto;          /* alles dazwischen wird „Leerraum“ */
  justify-content:flex-end;  /* Icons innerhalb der Gruppe rechtsbündig */
}

/* Basis-Style für ALLE Icon-only-Buttons in der Karte */
.card .row-share .btn-share,
.card [data-action="edit"],
.card [data-action="copy"],
.card [data-copy-slug],
.card [data-delete-confirm]{
  flex: 0 0 auto;
  width: 37px !important;
  height: 37px !important;
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 8px;

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  /* Text/Label unsichtbar machen, Klickfläche behalten */
  font-size: 0;
  line-height: 0;

  /* Icon als Background */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100% !important; /* 100×100 PNG → vollflächig in 50×50 */
}

/* Hover-Feedback nur leichtes „Lift“ */
.card .row-share .btn-share:hover,
.card [data-action="edit"]:hover,
.card [data-action="copy"]:hover,
.card [data-copy-slug]:hover,
.card [data-delete-confirm]:hover{
  filter: brightness(0.98);
  transform: translateY(-1px);
}

/* --- Share-Icons (relative Pfade wie bei den Fonts) ------------------------ */
.card .row-share .btn-share.wa{
  background-image: url("../gra/whatsapp.png");
}

.card .row-share .btn-share.x{
  background-image: url("../gra/twitter.png");
}

.card .row-share .btn-share.fb{
  background-image: url("../gra/facebook.png");
}

/* --- Email-Corrector Icon (rechts neben Facebook) -------------------------- */
.card .row-share .btn-share.email{
  background-image: url("../gra/email.png");
}

/* --- Action-Icons (Edit / Copy / Delete) ----------------------------------- */
.card [data-action="edit"]{
  background-image: url("../gra/editieren.png");
}

.card [data-action="copy"],
.card [data-copy-slug]{
  background-image: url("../gra/kopieren.png");
}

.card [data-delete-confirm]{
  background-image: url("../gra/loeschen.png");
}

/* ========================================================================
   MERGED: wa_fancy_index.css  (SECOND)
   ======================================================================== */

/* WhatsApp Fancy – WYSIWYG */
.wa-fancy-panel{
  margin-top:10px;
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fafafa;
}

.wa-fancy-toolbar{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.wa-fancy-toolbar button{
  appearance:none;
  border:1px solid #d1d5db;
  background:#fff;
  padding:4px 8px;
  border-radius:6px;
  cursor:pointer;
  user-select:none;
}

.wa-fancy-toolbar button.is-active{
  border-color:#111827;
  background:#f3f4f6;
}

.wa-fancy-toolbar .sep{
  width:1px;
  height:20px;
  background:#e5e7eb;
  margin:0 2px;
}

.wa-fancy-toolbar select.wa-font-style{
  border:1px solid #d1d5db;
  background:#fff;
  padding:4px 8px;
  border-radius:6px;
}

.wa-fancy-label{ display:block; font-weight:600; margin:6px 0 4px; }

/* --- Konsolidierte .wa-fancy-editor-Definition (aus wa_fancy_index.css) --- */
.wa-fancy-editor{
  width:100%;
  min-height:120px;                 /* (späterer Override in wa_fancy_index.css) */
  padding:10px;
  border:1px solid #e5e7eb;         /* (späterer Override in wa_fancy_index.css) */
  border-radius:8px;
  background:#fff;
  line-height:1.4;
  outline:none;
  white-space:pre-wrap;
  word-break:break-word;

  /* Unicode-Abdeckung / breite Fonts (spätere Ergänzungen) */
  font-family:
    system-ui, -apple-system, "Segoe UI",
    Roboto, "Noto Sans", "Noto Sans Symbols", "Noto Sans Math",
    "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji",
    sans-serif;
  font-size:17px;
  line-height:1.45;
}

.wa-fancy-editor:empty:before{
  content: attr(data-placeholder);
  color:#9ca3af;
}

.wa-fancy-editor.is-empty::before{
  content: attr(data-placeholder);
  color: #9aa2b1;
  pointer-events: none;
}

.wa-fancy-editor b,
.wa-fancy-editor [data-mark="bold"]{ font-weight:700; }

.wa-fancy-editor i,
.wa-fancy-editor [data-mark="italic"]{ font-style:italic; }

.wa-fancy-editor s,
.wa-fancy-editor [data-mark="strike"]{ text-decoration:line-through; }

.wa-fancy-editor code,
.wa-fancy-editor [data-mark="mono"]{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background:#f5f5f5;
  border:1px solid #eee;
  border-radius:4px;
  padding:0 .15em;
}

/* einfache Listen/Zitate für Optik im Editor */
.wa-fancy-editor .wa-li{ display:block; }
.wa-fancy-editor .wa-li::before{ content: attr(data-bullet) " "; color:#6b7280; }
.wa-fancy-editor .wa-ol{ counter-reset: wa-ol; }
.wa-fancy-editor .wa-ol .wa-li{ counter-increment: wa-ol; }
.wa-fancy-editor .wa-ol .wa-li::before{ content: counter(wa-ol) ". "; color:#6b7280; }

.wa-fancy-editor blockquote{
  border-left:3px solid #d1d5db;
  margin:6px 0;
  padding:4px 8px;
  color:#374151;
  background:#fafafa;
  border-radius:4px;
}

.wa-fancy-check{ display:flex; align-items:center; gap:8px; margin-top:8px; }

/* Actions: 1. Zeile Buttons (Copy links, Send rechts), 2. Zeile Counter rechts */
.wa-fancy-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:10px;
}

/* Copy links: schiebt den Rest nach rechts */
.wa-fancy-actions .wa-fancy-copy{
  margin-right:auto;
  position:relative; /* für "copied" indicator */
}

/* Counter eine Zeile drunter, rechtsbündig */
.wa-fancy-actions .wa-send-count{
  flex: 0 0 100%;
  display:block;
  text-align:right;
  margin-top:6px;
}

.wa-fancy-actions .wa-fancy-copy.wa-copied::after{
  content:"✓";
  position:absolute;
  right:6px;
  top:4px;
  font-size:12px;
  line-height:1;
}

.wa-fancy-status{ font-size:12px; color:#6b7280; }



/* Fancy-Font Vorschau (Editor nutzt Unicode-Substitution; Klassen nur, falls du visuell trennen willst) */
.wa-font-flag{
  display:inline-block;
  padding:0 .25em;
  border:1px dashed #e5e7eb;
  border-radius:4px;
  margin-left:6px;
  font-size:.9em;
  color:#6b7280;
}

/* Button Styling */
.btn.btn-share.wa-fancy{ background:#25D366; color:#fff; border-color:#20b659; }
.btn.btn-share.wa-fancy:hover{ filter:brightness(0.95); }

.wa-fancy-toolbar button,
.wa-fancy-toolbar select{
  margin-right: 6px;
}

/* ============================================================
   Toolbar Rows: FONT / BULLET / SYMBOL bündig (stabil)
   ============================================================ */

#wa-public-panel .wa-fancy-toolbar.wa-tb{
  display:grid;
  row-gap: 10px;
  margin-bottom: 8px;
}

#wa-public-panel .wa-fancy-toolbar.wa-tb .wa-tb-row{
  display:grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  align-items: center;
}

#wa-public-panel .wa-fancy-toolbar.wa-tb .wa-tb-label{
  font-weight: 600;
  opacity: .9;
  white-space: nowrap;
}

#wa-public-panel .wa-fancy-toolbar.wa-tb .wa-tb-ctrl{
  display:flex;
  align-items:center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Select/Button margins neutralisieren (du hast global margin-right drin) */
#wa-public-panel .wa-fancy-toolbar.wa-tb .wa-tb-ctrl button,
#wa-public-panel .wa-fancy-toolbar.wa-tb .wa-tb-ctrl select{
  margin: 0 !important;
}

/* SYMBOL-Zeile: msgbar soll nicht selbst wieder „nach rechts drücken“ */
#wa-public-panel .wa-row-symbol .wa-msgbar{
  margin: 0 !important;
  gap: .75rem;
}

#wa-public-panel .wa-row-symbol .wa-msgbar .wa-emoji-btn{
  margin-left: 0 !important;
}

/* === Toolbar als echte Tabelle (2 Spalten, 3 Zeilen) ===================== */
#wa-public-panel .wa-fancy-toolbar .wa-tb-table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

#wa-public-panel .wa-fancy-toolbar .wa-tb-table td{
  vertical-align: middle;
  text-align: left;
  padding: 0;
  height: 40px;
}

#wa-public-panel .wa-fancy-toolbar .wa-tb-table .wa-tb-label{
  width: 90px;
  height: 40px;
  white-space: nowrap;
  padding-right: 12px;
  font-weight: 600;
  opacity: .9;
}

#wa-public-panel .wa-fancy-toolbar .wa-tb-table .wa-tb-ctrl{
  width: 100%;
}

/* Controls im rechten Feld links halten */
#wa-public-panel .wa-fancy-toolbar .wa-tb-table .wa-tb-ctrl *{
  text-align: left;
}

/* Deko-Button (rechts neben Emoji): Rahmen + Hintergrund entfernen */
#wa-public-panel .wa-msgbar .wa-sym-toggle{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  appearance: none;
  -webkit-appearance: none;
  transform: translateY(-3px) !important; /* z.B. -1 bis -4 */
}

/* auch beim Hover/Focus absolut “nackt” */
#wa-public-panel .wa-msgbar .wa-sym-toggle:hover,
#wa-public-panel .wa-msgbar .wa-sym-toggle:focus,
#wa-public-panel .wa-msgbar .wa-sym-toggle:focus-visible{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: translateY(-3px) !important; /* z.B. -1 bis -4 */
}



/* CSS AUS INDEX */
 :root{
    --left-color:  #35a4ae; /* Gelb (links) */
    --right-color: #819FA2; /* Magenta (rechts) */
  }
  @font-face{
    font-family: "MinionRS";
    src: url("/expose/z_index/minion.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  * { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
body { font: 15px/1.5 var(--font-ui); color:#111; background:#fff; }


  /* 50/50 exakt mittig, volle Höhe */
  .split {
    display: grid;
    grid-template-columns: 1fr;
    height: calc(100svh - var(--topbar-h));
  }


  /* Eigene Scroll-Container pro Spalte – Scrollleisten unsichtbar */
  .panel {
    position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #fff;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* IE/Edge (Legacy) */
  }
  .panel::-webkit-scrollbar {         /* Chromium/Safari/Opera/Edge (Chromium) */
    width: 0; height: 0; display: none;
  }

  /* Oberer Weißbereich mit Wort – exakt 50vh hoch */
  .white-head{
    position: relative;
    height: 50vh;
    background: #fff;
  }

  /* Großes Wort im weißen Bereich, knapp über der Farbkante */
  .word {
    position: absolute;
    left: 50%;
    bottom: 2vh;                      /* sitzt direkt über der Farbkante */
    transform: translateX(-50%);
    width: 100%;
    pointer-events: none;
    z-index: 2;
  }
  .word img { width: 90%; height: auto; display: block; }
  .word .img-left  { margin-left: auto; margin-right: 0; }
  .word .img-right { margin-left: 0; margin-right: auto; }

  /* Kleine Top-Notiz oben rechts in der linken Spalte (Minion) */
  .minion-topnote{
    position: absolute;
    top: 30px;
    right: 25px;
    max-width: 46%;
    font-family: "MinionRS", "Minion", serif;
    font-weight: 400;
    line-height: 1.25;
    font-kerning: normal;
    font-variant-ligatures: common-ligatures;
    text-align: right;
    color: #111;
    pointer-events: none;
    z-index: 3;
  }

  /* Farbfläche als eigener Content-Block – scrollt mit */
  .color-body{
    position: relative;
    background: var(--left-color);
    padding: 24px;                    /* Inhalt nur im Farbbereich */
    min-height: 60vh;                 /* genug Fläche auch bei wenig Content */
    z-index: 1;
  }
  .color-body.right { background: var(--right-color); }
  /* Farbfelder: Minion einsetzen */
  .color-body,
  .color-body * {
    font-family: "MinionRS", "Minion", serif;
    font-weight: 400;
    font-kerning: normal;
    font-variant-ligatures: common-ligatures;
  }

  /* Überschrift im Farbfeld etwas kräftiger – Minion hat evtl. kein echtes Bold */
  .color-body .title {
    font-weight: 600; /* leicht kräftiger ohne harte Fette */
    letter-spacing: 0.01em;
  }

  /* Textfarbe: gelb = dunkelgrau, magenta = weiß */
  .color-body { color: #2a2a2a; }
  .color-body.right { color: #fff; }

  /* Links & Inline-Elemente sollen die Farbe erben */
  .color-body a,
  .color-body strong,
  .color-body em,
  .color-body .p,
  .color-body .title { color: inherit; }

  .title{ margin: 0 0 12px; font-size: 18px; font-weight: 700; }
  .demo { height: 140px; border:1px solid #e5e7eb; border-radius:12px; background:rgba(255,255,255,.35); display:grid; place-items:center; margin:10px 0; }
  .p { margin: 0 0 10px; background: rgba(255,255,255,.35); padding:10px 12px; border-radius:10px; }

  /* === Topbar (leichtgewichtig, keine Abhängigkeiten) === */
  :root { --topbar-h: 56px; }
  body { padding-top: var(--topbar-h); } /* Platz für die fixe Topbar */

  .rs-topbar {
    position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
    background: #fff; border-bottom: 1px solid #e5e7eb; z-index: 1000;
    font: 14px/1.2 system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  }
  .rs-topbar-inner {
    width: 100%; margin: 0; height: 100%;
    display: flex; align-items: center; justify-content: flex-end;
    padding: 0 20px;
}
.rs-brand {
    display: inline-flex; gap: 10px; align-items: baseline;
    font-weight: 400; letter-spacing: .02em; color: #111; text-decoration: none;
}
  .rs-brand small { font-weight: 500; opacity: .7; letter-spacing: .03em; }

/* Brand-Text nur gezielt zeigen (siehe @media unten) */
.fx-brand { display: none; }
.rs-actions { display: inline-flex; gap: 10px; align-items: center; }
  .rs-link {
    display: inline-flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 12px; border-radius: 8px; text-decoration: none;
    border: 1px solid #e5e7eb; color: #111; background: #fff;
  }
  .rs-link:hover { background: #f8f9fb; }

  .rs-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 14px; border-radius: 8px; border: 0;
    color: #fff; background: #111; cursor: pointer;
  }
  .rs-btn:hover { filter: brightness(1.07); }

  /* Login-Dropdown ohne JS */
  .rs-login { position: relative; }
  .rs-login > summary {
    list-style: none; cursor: pointer; user-select: none; outline: none;
  }
  .rs-login > summary::-webkit-details-marker { display: none; }
  .rs-login > summary .rs-link { border-color: #e5e7eb; }

  /* Panel */
  .rs-login[open] .rs-panel,
  .rs-login:has(> summary:focus-visible) .rs-panel { display: block; }
  .rs-panel {
    position: absolute; right: 0; top: calc(100% + 8px);
    display: none; width: 280px; padding: 14px; border-radius: 12px;
    background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.10), 0 2px 10px rgba(0,0,0,.06);
    border: 1px solid #eef0f4;
  }
  .rs-field { display: grid; gap: 6px; margin-bottom: 10px; }
  .rs-field label { font-size: 12px; color: #555; }
  .rs-input {
    height: 36px; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 0 10px; font: inherit; width: 100%;
  }
  .rs-input:focus { outline: 2px solid #3b82f6; outline-offset: 2px; border-color: #bfdbfe; }

  .rs-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; }

  .rs-muted { font-size: 12px; color: #666; text-decoration: none; }
  .rs-muted:hover { text-decoration: underline; }

  /* Info + Messenger im linken (gelben) Bereich */
  .public-info{
    max-width: 720px;
    margin: 16px auto 8px;
  }
  .public-info h2{ margin:0 0 8px 0; font:700 22px/1.2 Arial, Helvetica, sans-serif; }
  .public-info p { margin:0 0 2px 0; color:#333; }

  .wa-fancy-public{
    max-width: 720px;
    margin: 12px auto 40px;  /* zentriert */
  }
    /* === OVERRIDE: Messenger nicht mit Minion belegen (exakt wie Dashboard) === */
.color-body .wa-fancy-panel,
.color-body .wa-fancy-panel * {
  font-family: Arial, Helvetica, sans-serif !important;
  /* keine weight/style-Zwangsbelegung hier! */
}

/* Bold/Kursiv explizit zulassen */
.color-body .wa-fancy-panel b,
.color-body .wa-fancy-panel strong { font-weight: 700; }

.color-body .wa-fancy-panel i,
.color-body .wa-fancy-panel em { font-style: italic; }

/* ABER: Fancy-Glyphen im Editor nie kursiv/fett anzeigen */
.color-body .wa-fancy-panel .wa-fancy-editor .wa-glyph-guard,
.color-body .wa-fancy-panel .wa-fancy-editor .wa-glyph-guard * {
  font-style: normal !important;
  font-weight: normal !important;
}

/* Editor-Grundlage */
.wa-fancy-panel .wa-fancy-editor {
  font-family: inherit !important;
  line-height: 1.4;
  white-space: pre-wrap;
}
/* Buttons/Select optisch angleichen */
.wa-fancy-panel button,
.wa-fancy-panel select,
.wa-fancy-panel .wa-fancy-label {
  font-family: inherit !important;
}
    /* === Emoji-Picker (leichtgewichtig) ==================================== */
/* === Emoji-Picker (leichtgewichtig) ==================================== */
.wa-emoji-popup {
  position: fixed;
  z-index: 1200;
  inset: auto auto 20px 20px;
  width: 420px;                       /* Desktop-Basis */
  max-width: 420px;
  max-height: 420px;
  display: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.18), 0 4px 18px rgba(0,0,0,.08);
  overflow: hidden;
  font: 14px/1.25 system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
.wa-emoji-popup.open {
  display: grid;
  grid-template-rows: auto auto 1fr;
}

/* Responsive: auf schmalen Viewports wie ein Keyboard verhalten */
@media (max-width: 720px){
  .wa-emoji-popup{
    width: auto;
    max-width: calc(100vw - 24px);    /* rechts nicht abgeschnitten */
  }
}
@media (max-width: 520px){
  .wa-emoji-popup{
    inset: auto 8px 8px 8px;          /* fast Vollbreite unten, wie Keyboard */
  }
  .wa-emoji-grid .row{
    grid-template-columns: repeat(7, 1fr);   /* größere Tasten auf Handy */
  }
}
@media (max-width: 380px){
  .wa-emoji-grid .row{
    grid-template-columns: repeat(6, 1fr);   /* sehr schmal: 6 Spalten */
  }
}

.wa-emoji-head { display: flex; gap: 8px; align-items: center; padding: 8px; border-bottom: 1px solid #eef0f4; }
.wa-emoji-search { flex: 1; height: 32px; padding: 0 10px; border: 1px solid #e5e7eb; border-radius: 8px; }
.wa-emoji-tone { display: inline-flex; gap: 4px; }
.wa-emoji-tone button { height: 28px; min-width: 28px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; cursor: pointer; }
.wa-emoji-tone button.active { outline: 2px solid #3b82f6; outline-offset: 1px; }

.wa-emoji-tabs { display: grid; grid-auto-flow: column; gap: 4px; padding: 6px; border-bottom: 1px solid #eef0f4; }
.wa-emoji-tab { height: 28px; border: 0; border-radius: 6px; background: #f6f7f9; cursor: pointer; }
.wa-emoji-tab.active { background: #e9eefc; }

.wa-emoji-grid { padding: 6px; overflow: auto; -webkit-overflow-scrolling: touch; }
.wa-emoji-grid::-webkit-scrollbar { width: 8px; height: 8px; }
.wa-emoji-grid { scrollbar-width: thin; }
.wa-emoji-grid .row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.wa-emoji-item {
  font-size: 22px; line-height: 1; display: grid; place-items: center;
  height: 36px; border-radius: 8px; cursor: pointer; user-select: none;
}
.wa-emoji-item:hover { background: #f3f4f6; }
.wa-emoji-foot { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-top: 1px solid #eef0f4; font-size: 12px; color: #555; }
.wa-emoji-close { border: 0; background: transparent; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.wa-emoji-close:hover { background: #f3f4f6; }
/* Counter rechtsbündig, klein, dezent */
.wa-fancy-actions{ display:flex; align-items:center; gap:10px; }
.wa-send-count{ margin-left:auto; font-size:8px; opacity:.2; text-align:right; min-width:2ch; }
/* ==== Fullscreen-Messenger (Mobile) ===================================== */
@media (max-width: 820px) {
  /* Back-Button nur im Fullscreen zeigen, sonst alles wie vorher */
  .rs-back[hidden] { display: none !important; }
  body.wa-full .rs-actions > *:not(.rs-back) { display: none !important; }
  body.wa-full .rs-back { display: inline-flex !important; }

  /* Brand NUR im Fullscreen anzeigen + Layout links/rechts verteilen */
  body.wa-full .fx-brand { display: inline-flex !important; }
  body.wa-full .rs-topbar-inner { justify-content: space-between; }

  /* <<< NEU: Topbar im Fullscreen gelb wie die linke Fläche */
  body.wa-full .rs-topbar {
    background: var(--left-color) !important;
    border-bottom: 1px solid var(--left-color) !important;
  }

  /* Rest der Seite ausblenden, nur Host-Panel sichtbar + fullscreen */
  body.wa-full .split { height: calc(100svh - var(--topbar-h)); }
  body.wa-full .panel { display: none !important; }
  body.wa-full #wa-host {
    display: block !important;
    position: fixed !important;
    inset: var(--topbar-h) 0 0 0;   /* unter der Topbar */
    z-index: 900;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;               /* fokussiert nur den Messenger */
  }

  /* Website-Deko in Fullscreen ausblenden */
  body.wa-full #wa-host .white-head,
  body.wa-full #wa-host .public-info { display: none !important; }

  /* Messenger flächig machen */
  body.wa-full #wa-host .color-body {
    background: #fff;               /* kein Gelb im Fullscreen */
    padding: 12px;
    min-height: auto;
  }
  body.wa-full #wa-host .wa-fancy-panel {
    max-width: none;
    margin: 0;
  }
}
/* === Symbols-Keyboard Layout (wie Dashboard) ============================= */
.wa-msgbar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:.75rem;
  margin:0;                 /* << bündig im Toolbar-Slot */
  width:100%;
}

/* Wenn .wa-msgbar in der SYMBOL-Toolbar-Zeile steckt:
   das interne Label ausblenden, sonst steht "SYMBOL:" doppelt */
#wa-public-panel .wa-row-symbol .wa-symbol-slot .wa-msgbar .wa-label{
  display:none !important;
}

.wa-sym-toggle{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  font:inherit;
  cursor:pointer;
  padding:4px 6px;
  border-radius:6px;

  outline:0;                /* << Button-Rand/Fokus-Rand weg */
  box-shadow:none;
  -webkit-tap-highlight-color: transparent;
}

/* In der Nachrichten-Zeile: Emoji schiebt sich nach rechts,
   Deko-Button hängt direkt daneben */
.wa-msgbar .wa-emoji-btn{
  margin-left:auto;
}

/* kein Hover-Hintergrund (wie gewünscht "ohne Rand/Box") */
.wa-sym-toggle:hover{ background:transparent; }
.wa-sym-toggle:focus,
.wa-sym-toggle:focus-visible{ outline:0; box-shadow:none; }


.wa-sym-toggle .car{
  display:inline-block; transform:translateY(-1px) rotate(0deg);
  transition:transform .15s;
}
.wa-sym-toggle[aria-expanded="true"] .car{
  transform:translateY(-1px) rotate(180deg);
}

.wa-sym-wrap{ position:relative; }

/* Palette: Basis/Mobile */
.wa-sym-palette{
  position:absolute; right:0; z-index:50;
  min-width:min(140px, 92vw); max-width:92vw;
  background:#fff; border:1px solid rgba(0,0,0,.15);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  border-radius:10px; padding:6px; display:none;
  overflow: hidden;            /* clippt jeden Überstand innerhalb der Palette */

}
.wa-sym-palette.open{ display:block; }

/* Eine Zeile = eine „Keyboard-Row“ */
/* Basis = MOBILE: klassisch Flex, keine Zwangsumbrüche */
.wa-sym-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:6px;
  padding:4px 6px;
  height:40px;
}


/* Einzelner Key */
.wa-sym-btn{
  flex:0 0 auto;
  width:40px; height:40px;             /* kompakter, quadratischer Key */
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid rgba(0,0,0,.08);
  background:#fafafa; cursor:pointer; user-select:none;
  font-size:20px; line-height:1;
}
.wa-sym-btn:hover{ background:#f0f0f0; }

/* Handy: kleinere Keys, Zeilen dürfen umbrechen */
@media (max-width:520px){
  .wa-sym-row{ flex-wrap:wrap; height:auto; }
  .wa-sym-btn{ width:32px; height:32px; font-size:18px; }
}

/* Action-Buttons (Copy / WhatsApp / X / Telegram): identische Klickfläche, kein Hintergrund */
.wa-fancy-panel .wa-fancy-actions .wa-fancy-copy,
.wa-fancy-panel .wa-fancy-actions .wa-fancy-send{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  width: 54px;
  height: 54px;
  min-width: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  border-radius: 0 !important;
}


/* Kein Hover-Background */
.wa-fancy-panel .wa-fancy-actions .wa-fancy-copy:hover,
.wa-fancy-panel .wa-fancy-actions .wa-fancy-send:hover{
  background: transparent !important;
  filter: none !important;
}

/* Alle 4 Icons identisch skalieren */
.wa-fancy-panel .wa-fancy-actions .wa-fancy-copy img,
.wa-fancy-panel .wa-fancy-actions .wa-fancy-send img{
  width: 50px;
  height: 50px;
  display: block;
}



/* === Quick Templates (unter Messenger) ================================== */
.wa-tpl-wrap{
  max-width: 720px;
  margin: 10px auto 0;
  padding: 12px 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.55);
}

.wa-tpl-head{
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.wa-tpl-title{
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
}

.wa-tpl-sub{
  font-size: 12px;
  opacity: .75;
}

/* Tabs */
.wa-tpl-tabs{
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.wa-tpl-tab{
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.75);
  cursor: pointer;
  font: 700 12px/30px system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
.wa-tpl-tab:hover{ background: rgba(255,255,255,.95); }
.wa-tpl-tab.is-active{
  border-color: rgba(0,0,0,.30);
  background: #fff;
}

.wa-tpl-list{
  display: grid;
  gap: 8px;
}

.wa-tpl-item{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.06);
}

.wa-tpl-text{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.25;
  user-select: text;
  overflow-wrap: anywhere;
}

.wa-tpl-btn{
  height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  cursor: pointer;
  font: 600 13px/1.0 system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}

.wa-tpl-btn:hover{ background: #f6f7f9; }

.wa-tpl-btn.is-ok{
  border-color: rgba(0,0,0,.20);
}

@media (max-width:520px){
  .wa-tpl-item{
    grid-template-columns: 1fr auto;  /* Text + Button in einer Zeile */
    align-items: center;
  }
  .wa-tpl-text{
    min-width: 0;                     /* wichtig für sauberen Umbruch */
  }
  .wa-tpl-btn{
    width: auto;                      /* keine Vollbreite */
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 28px;
  }
}

.wa-tpl-head{
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}
.wa-tpl-title{
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
}
.wa-tpl-sub{
  font-size: 12px;
  opacity: .75;
}
.wa-tpl-list{
  display: grid;
  gap: 8px;
}
.wa-tpl-item{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.06);
}
.wa-tpl-text{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.25;
  user-select: text;
  overflow-wrap: anywhere;
}
.wa-tpl-btn{
  height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  cursor: pointer;
  font: 600 13px/1.0 system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
.wa-tpl-btn:hover{ background: #f6f7f9; }
.wa-tpl-btn.is-ok{
  border-color: rgba(0,0,0,.20);
}
@media (max-width:520px){
  .wa-tpl-item{
    grid-template-columns: 1fr auto;  /* Text + Button in einer Zeile */
    align-items: center;
  }
  .wa-tpl-text{
    min-width: 0;                     /* wichtig für sauberen Umbruch */
  }
  .wa-tpl-btn{
    width: auto;                      /* keine Vollbreite */
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 28px;
  }
}


/* === Desktop: 12 Spalten fix, 200px hoch, keine Überlappungen ========== */
@media (min-width:821px){
  .wa-fancy-panel{ overflow:visible !important; }
  .wa-sym-wrap{ position:relative !important; }

  .wa-sym-palette{
    position:absolute !important;
    right:0 !important;
    bottom:100% !important;
    z-index:50;
    /* 12*40 + 11*6 = 546 + 16 (Padding) = 562 */
    width:562px !important;
    min-width:562px !important;
    max-width:562px !important;
    height:260px !important;
    max-height:260px !important;

    padding:8px !important;
    background:#fff;
    border:1px solid rgba(0,0,0,.15);
    border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    display:none;
    overflow-x:hidden;
    overflow-y:auto;
    box-sizing:border-box !important;
  }
  .wa-sym-palette.open{ display:block !important; }

  /* Jede Zeile ist ein 12er-Grid mit fixen 40px-Spalten */
  .wa-sym-row{
    display:grid !important;
    grid-template-columns: repeat(12, 40px) !important;
    grid-auto-rows: 40px !important;
    grid-auto-flow: row !important;        /* links→rechts, dann nächste Zeile */
    gap:6px !important;
    padding:0 !important;
    margin:0 !important;
    justify-content:start !important;
    align-content:start !important;
    align-items:stretch !important;
    height:auto !important;
    box-sizing:border-box !important;
  }

  /* Falls im Markup Trenner/Spacer o.ä. existieren → im Desktop verstecken */
  .wa-sym-row .wa-gap,
  .wa-sym-row .sep,
  .wa-sym-row .spacer{
    display:none !important;
  }

  /* Buttons hart „entgiften“: keinerlei erzwungene Spalten/Order/Position */
  .wa-sym-btn{
    position:static !important;
    order:0 !important;
    grid-column:auto !important;
    grid-row:auto !important;

    flex:none !important;
    width:40px !important;
    height:40px !important;
    margin:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    box-sizing:border-box !important;
    border-radius:8px;
    border:1px solid rgba(0,0,0,.08);
    background:#fafafa;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    user-select:none;
  }
}

/* Emoji-Button Styling */
.wa-msgbar .wa-emoji-btn{
  appearance: none;          /* Browser-Button-Styles killen (Safari/iOS z.B.) */
  -webkit-appearance: none;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width: 40px;      /* Größe */
  height: 40px;
  padding: 0;

  border-radius: 1px;
  border: 0;        /* kein Rahmen */
  background: transparent;   /* HINTERGRUND WEG */
  box-shadow: none;          /* falls irgendwo Schatten kommt */

  cursor:pointer;
  font-size:25px;   /* Emoji-Größe */
}
.wa-msgbar .wa-emoji-btn:hover{
  background: transparent;   /* auch beim Hover nichts einfärben */
}


.wa-hs-hint{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 10px 12px 10px 14px;
  border-radius: 10px;
  background: rgba(0,0,0,.85);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  z-index: 3000;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

.wa-hs-hint.is-hidden{
  display: none;
}

.wa-hs-hint strong{
  font-size: 13px;
  display: block;
  margin-bottom: 2px;
}

.wa-hs-hint .wa-hs-text{
  flex: 1 1 auto;
}

.wa-hs-hint .wa-hs-close{
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

/* Etwas Luft für iPhone-Safe-Area unten */
@supports(padding: max(0px)){
  .wa-hs-hint{
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px) + 6px);
    bottom: max(12px, env(safe-area-inset-bottom, 0px) + 6px);
  }
}

.wa-hs-inline{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f3f3f3;
  font-size: 13px;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.wa-hs-inline-title{
  font-weight: 600;
  margin-bottom: 2px;
}

.wa-hs-inline-main{
  flex: 1 1 auto;
}

.wa-hs-inline-actions{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wa-hs-inline-btn{
  padding: 5px 9px;
  border-radius: 8px;
  border: 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: #111;
  color: #fff;
}

.wa-hs-inline-btn:disabled{
  opacity: .6;
  cursor: default;
}

.wa-hs-inline-close{
  align-self: flex-end;
  background: transparent;
  border: 0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

  /* Panel auf der Startseite: Header mit "Öffnen" ausblenden */
  #wa-public-card .card-head{
    display:none !important;
  }

  /* Messenger-Panel immer offen & sichtbar halten – egal was wa_fancy.css sagt */
  #wa-public-panel{
    display:block !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    opacity:1 !important;
    visibility:visible !important;
  }
/* === Empty Overlay für "<div><br></div>" (Editor ist nicht :empty) ======= */
.wa-fancy-panel .wa-fancy-editor{
  position: relative;                 /* Anker für Overlay */
}

.wa-fancy-panel .wa-empty-overlay{
  position: absolute;
  inset: 0;
  display: none;                      /* wird per JS an/aus geschaltet */
  align-items: flex-start;
  justify-content: flex-start;
  padding: 12px 14px;                 /* muss zum Editor-Padding passen */
  box-sizing: border-box;

  color: #a3a9b3;
  pointer-events: auto;               /* Click soll Fokus setzen */
  user-select: none;
  z-index: 30;
}

.wa-fancy-panel .wa-empty-overlay.is-on{
  display: flex;
}

/* === Overlay robust stapeln (Wrapper als Anker) =========================== */
.wa-fancy-panel .wa-editor-wrap{
  position: relative;
}

.wa-fancy-panel .wa-fancy-editor{
  position: relative;   /* ok, aber jetzt nur noch für internes */
  z-index: 1;
}

.wa-fancy-panel .wa-empty-overlay{
  z-index: 2;           /* sicher über dem Editor */
}