/* ATLAS – KI-Assistent (Gestaltung nach Atlas bei Hahne mit Herz, in den Creator-Farben) */
@property --at-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:root { --at-tief: #0e2a30; --at-mitte: #14323a; --at-teal: #1d5c55; --at-hell: #2f7a6d; --at-gold: #f1d6a8; --at-gold2: #c99a5b; --at-linie: #e1e7e4; --at-text: #14323a; --at-leise: #5f7177; }

/* Startknopf: Pille mit wanderndem Leuchtrand, funkelndem Orb und Beschriftung */
.at-knopf { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 2147482000; display: flex; align-items: center; gap: 12px; height: 62px; padding: 6px 22px 6px 6px !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important; cursor: pointer; font: 700 15px Manrope, "Segoe UI", system-ui, sans-serif; color: #fff !important; isolation: isolate; overflow: hidden; min-height: 0 !important;
  background: linear-gradient(135deg, #0e2a30 0%, #14323a 45%, #2f7a6d 100%) !important; box-shadow: 0 18px 40px -16px #0e2a30cc, 0 0 0 1px #ffffff10 inset !important; transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; animation: at-rein .7s cubic-bezier(.2, .85, .2, 1) .6s both; }
@keyframes at-rein { from { opacity: 0; transform: translateY(20px) scale(.9); } to { opacity: 1; transform: none; } }
.at-knopf::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--at-winkel), #ffffff14 0deg, #8fd1c2 80deg, #f1d6a8 120deg, #8fd1c2 160deg, #ffffff14 230deg, #ffffff14 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: at-rand 6s linear infinite; }
.at-knopf::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none; background: linear-gradient(100deg, transparent, #ffffff38, transparent); transform: skewX(-18deg); animation: at-streif 9s ease-in-out 3s infinite; }
@keyframes at-streif { 0% { left: -60%; } 18%, 100% { left: 140%; } }
@keyframes at-rand { to { --at-winkel: 360deg; } }
.at-knopf:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -16px #0e2a30d9, 0 0 0 6px #2f7a6d24 !important; }
.at-knopf:focus-visible { outline: 3px solid var(--at-gold); outline-offset: 3px; }
.at-orb { position: relative; display: grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 50%; color: #fff; overflow: hidden; background: radial-gradient(circle at 32% 28%, #8fd1c2 0%, #2f7a6d 38%, #0e2a30 78%); box-shadow: 0 8px 18px -8px #0009, inset 0 1px 0 #fff6; }
.at-orb::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent 0 70%, #f1d6a88c 80%, transparent 90%); animation: at-drehen 5s linear infinite; }
@keyframes at-drehen { to { transform: rotate(360deg); } }
.at-orb svg { position: relative; width: 24px; height: 24px; filter: drop-shadow(0 0 6px #f1d6a8b3); animation: at-funkeln 3.2s ease-in-out infinite; }
@keyframes at-funkeln { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.12) rotate(12deg); } }
.at-knopf-text { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.at-knopf-text small { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--at-gold); }
.at-knopf-text b { font-size: 16px; font-weight: 800; }
.at-knopf-punkt { position: absolute; z-index: 3; top: 8px; left: 46px; width: 11px; height: 11px; border-radius: 50%; background: #5bd39a; border: 2px solid #14323a; animation: at-online 2.4s ease-out infinite; }
@keyframes at-online { 0% { box-shadow: 0 0 0 0 #5bd39a99; } 70% { box-shadow: 0 0 0 8px #5bd39a00; } 100% { box-shadow: 0 0 0 0 #5bd39a00; } }
body.at-offen .at-knopf { opacity: 0; pointer-events: none; transform: scale(.9); }
/* Im Editor nur der runde Orb – die Vorschau soll frei bleiben */
body.sm-studio:not(.creator-home-open) .at-knopf { height: 58px; padding: 4px !important; gap: 0; }
body.sm-studio:not(.creator-home-open) .at-knopf-text { display: none; }
body.sm-studio:not(.creator-home-open) .at-knopf-punkt { left: 40px; top: 5px; }
@media (min-width: 900px) { body.sm-studio.sm-dock-open:not(.creator-home-open) .at-knopf { right: calc(var(--sm-dock, 380px) + 18px); bottom: 44px; } }
/* Platz für Atlas: „Nach oben“ und Installieren-Leiste rücken darüber */
#hgTop { bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
#hwcInstallBar { bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important; }

/* Fenster */
.at-panel { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 2147482001; width: min(430px, calc(100vw - 24px)); height: min(680px, calc(100dvh - 40px)); display: flex; flex-direction: column; background: #fbfaf7f7; border-radius: 26px; box-shadow: 0 2px 8px #14323a14, 0 40px 90px -30px #14323a99; overflow: hidden; isolation: isolate; font: 15px/1.5 Manrope, "Segoe UI", system-ui, sans-serif; color: var(--at-text); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.at-panel[hidden] { display: none !important; }
.at-panel::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--at-winkel), #14323a1f 0deg, #2f7a6d 70deg, #c99a5b 110deg, #2f7a6d 150deg, #14323a1f 220deg, #14323a1f 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: at-rand 8s linear infinite; }
.at-panel:not([hidden]) { animation: at-auf .42s cubic-bezier(.2, .85, .2, 1) both; }
@keyframes at-auf { from { opacity: 0; transform: translateY(18px) scale(.97); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
#atPanel button, #atPanel textarea { font-family: inherit; margin: 0; box-shadow: none; min-height: 0; }

/* Kopf */
.at-kopf { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 15px 14px 15px 16px; color: #fff; background: linear-gradient(135deg, #0e2a30 0%, #14323a 45%, #2f7a6d 100%); }
.at-kopf::before { content: ""; position: absolute; width: 260px; height: 260px; right: -80px; top: -150px; border-radius: 50%; background: radial-gradient(circle, #c99a5b61, transparent 68%); animation: at-schweben 12s ease-in-out infinite alternate; }
.at-kopf::after { content: ""; position: absolute; width: 220px; height: 220px; left: -90px; bottom: -150px; border-radius: 50%; background: radial-gradient(circle, #8fd1c273, transparent 68%); animation: at-schweben 15s ease-in-out infinite alternate-reverse; }
@keyframes at-schweben { from { transform: translate(0, 0); } to { transform: translate(-30px, 20px); } }
.at-kopf > * { position: relative; z-index: 1; }
.at-kopf .at-orb { width: 44px; height: 44px; } .at-kopf .at-orb svg { width: 21px; height: 21px; }
.at-titel { min-width: 0; flex: 1; display: grid; gap: 1px; }
.at-titel strong { font-size: 17px; letter-spacing: .04em; }
.at-titel em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--at-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #ffffffd1; white-space: nowrap; overflow: hidden; }
.at-status b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.at-status i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #5bd39a; box-shadow: 0 0 0 3px #5bd39a40; }
.at-status[data-z="hoert"] i { background: #ff7a6b; box-shadow: 0 0 0 3px #ff7a6b55; animation: at-online 1.2s infinite; }
.at-status[data-z="denkt"] i, .at-status[data-z="spricht"] i { background: var(--at-gold); box-shadow: 0 0 0 3px #f1d6a855; }
.at-wk-leiste { display: flex; gap: 4px; }
#atPanel .at-wk { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #ffffff38; border-radius: 10px; background: #ffffff14; color: #fff; cursor: pointer; transition: background .2s; }
#atPanel .at-wk:hover { background: #ffffff2e; }
#atPanel .at-wk[aria-pressed="true"] { background: #fff; color: var(--at-mitte); border-color: #fff; }
.at-wk svg { width: 17px; height: 17px; }
.at-wk:focus-visible { outline: 2px solid var(--at-gold); outline-offset: 2px; }

/* Verlauf */
.at-verlauf { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.at-zeile { display: flex; gap: 8px; align-items: flex-end; animation: at-nachricht .38s cubic-bezier(.2, .85, .2, 1) both; }
@keyframes at-nachricht { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.at-zeile.ich { justify-content: flex-end; }
.at-zeile.breit .at-mini { display: none; }
.at-mini { width: 28px; height: 28px; flex: none; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #5fae9e, #1d5c55 50%, #0e2a30); display: grid; place-items: center; color: #fff; }
.at-mini svg { width: 14px; height: 14px; }
.at-blase { position: relative; max-width: 86%; padding: 12px 15px; border-radius: 18px; font-size: 14.5px; line-height: 1.6; word-break: break-word; }
.at-blase p { margin: 0; }
.at-blase.bot { background: #fff; border: 1px solid var(--at-linie); border-bottom-left-radius: 6px; box-shadow: 0 8px 20px -16px #14323a80; }
.at-blase.ich { background: linear-gradient(180deg, var(--at-teal), var(--at-mitte)); color: #fff; border-bottom-right-radius: 6px; white-space: pre-wrap; }
.at-quelle { display: inline-flex; margin: 0 0 6px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; background: #e3f1ec; color: #1d5c55; }
.at-quelle.idee { background: #fbf0dd; color: #8a5a2b; }
.at-btitel { display: block; margin: 0 0 4px; font-size: 15px; font-weight: 800; color: var(--at-mitte); }
.at-blase ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 3px; }
.at-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--at-linie); }
/* Hauptknopf: kräftiges Grün mit weißer Schrift – gewinnt über allgemeine Knopf-Regeln des Editors */
#atPanel .at-aktionen button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; border: 0; background: #1d7a68 !important; background-image: linear-gradient(135deg, #2a9079, #1d6d5e) !important; color: #fff !important; -webkit-text-fill-color: #fff; font-size: 13.5px; font-weight: 800; letter-spacing: .01em; text-shadow: 0 1px 1px #0a2a2440; cursor: pointer; box-shadow: 0 6px 16px -6px #1d6d5e99 !important; transition: transform .15s, box-shadow .15s, background .15s; }
#atPanel .at-aktionen button:hover { transform: translateY(-1px); background-image: linear-gradient(135deg, #31a088, #1f7766) !important; box-shadow: 0 10px 22px -8px #1d6d5eb3 !important; }
#atPanel .at-aktionen button:focus-visible { outline: 3px solid var(--at-gold2); outline-offset: 2px; }
/* Weitere Knöpfe: hell mit grüner Schrift */
#atPanel .at-aktionen button + button { background: #fff !important; background-image: none !important; color: #16564b !important; -webkit-text-fill-color: #16564b; text-shadow: none; border: 1.5px solid #9cc7bb; box-shadow: none !important; }
#atPanel .at-aktionen button + button:hover { background: #eef7f4 !important; border-color: #2a9079; }
.at-tippt { display: flex; gap: 5px; padding: 14px 16px; background: #fff; border: 1px solid var(--at-linie); border-radius: 18px; border-bottom-left-radius: 6px; }
.at-tippt i { width: 7px; height: 7px; border-radius: 50%; background: var(--at-hell); animation: at-hupf 1s ease-in-out infinite; }
.at-tippt i:nth-child(2) { animation-delay: .15s; } .at-tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes at-hupf { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* Begrüßung */
.at-intro { position: relative; overflow: hidden; width: 100%; padding: 20px 18px 16px; border-radius: 22px; text-align: center; color: #fff; background: linear-gradient(160deg, #0e2a30 0%, #14323a 50%, #2f7a6d 100%); box-shadow: 0 20px 40px -24px #14323acc; }
.at-intro::before { content: ""; position: absolute; width: 280px; height: 280px; left: 50%; top: -170px; margin-left: -140px; border-radius: 50%; background: radial-gradient(circle, #c99a5b59, transparent 68%); animation: at-schweben 10s ease-in-out infinite alternate; }
.at-intro > * { position: relative; }
.at-intro .at-orb { width: 72px; height: 72px; margin: 0 auto 10px; box-shadow: 0 0 0 8px #ffffff0f, 0 0 40px #8fd1c28c; }
.at-intro .at-orb svg { width: 32px; height: 32px; }
#atPanel .at-intro h3 { margin: 0 0 6px; font-size: 21px; line-height: 1.2; color: #fff; font-weight: 800; }
.at-rolle { display: inline-block; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px; background: #ffffff1a; border: 1px solid #ffffff2e; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--at-gold); }
.at-vorstellung { min-height: 3.2em; margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: #ffffffe6; }
.at-vorstellung.tippt::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--at-gold); animation: at-cursor .8s steps(1) infinite; }
@keyframes at-cursor { 50% { opacity: 0; } }
.at-faehig { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; text-align: left; }
.at-faehig li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #ffffff12; border: 1px solid #ffffff1f; font-size: 13px; opacity: 0; animation: at-nachricht .45s cubic-bezier(.2, .85, .2, 1) forwards; }
.at-faehig li > span { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 10px; background: #ffffff24; color: var(--at-gold); }
.at-faehig li > span svg { width: 16px; height: 16px; }
.at-faehig b { display: block; } .at-faehig small { display: block; color: #ffffffb8; font-size: 12px; }
.at-intro.klein .at-faehig, .at-intro.klein .at-orb { display: none; }
.at-intro.klein { padding: 14px 16px 10px; }

/* Vorschläge, Eingabe, Hinweis */
.at-chips { display: flex; gap: 6px; padding: 0 14px 8px; overflow-x: auto; scrollbar-width: none; }
.at-chips:empty { display: none; }
#atPanel .at-chips button { flex: none; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid #cfdcd6; background: #fff; color: #34474e; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
#atPanel .at-chips button:hover { border-color: var(--at-teal); color: var(--at-teal); }
.at-fuss { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--at-linie); background: #fff; }
#atPanel .at-eingabe { flex: 1; min-height: 44px; max-height: 120px; padding: 11px 14px; border-radius: 14px; border: 1.5px solid #cfdcd6; background: #fbfaf7; color: var(--at-text); font-size: 14.5px; line-height: 1.4; resize: none; }
#atPanel .at-eingabe:focus { outline: none; border-color: var(--at-teal); box-shadow: 0 0 0 4px #1d5c5520; background: #fff; }
#atPanel .at-mikro, #atPanel .at-senden { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 14px; display: grid; place-items: center; cursor: pointer; }
#atPanel .at-mikro { border: 1.5px solid #cfdcd6; background: #fff; color: var(--at-teal); }
#atPanel .at-mikro.an { border-color: #e2574c; background: #e2574c; color: #fff; animation: at-online 1.2s infinite; }
#atPanel .at-senden { border: 0; background: linear-gradient(140deg, var(--at-gold), var(--at-gold2)); color: var(--at-mitte); }
.at-mikro svg, .at-senden svg { width: 20px; height: 20px; }
.at-info { padding: 0 14px 10px; background: #fff; font-size: 11.5px; color: var(--at-leise); }
.at-info summary { cursor: pointer; list-style: none; text-align: center; }
.at-info summary::-webkit-details-marker { display: none; }
.at-info p { margin: 6px 0 0; line-height: 1.5; }

/* Einladung */
.at-einladung { position: fixed; right: 20px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 2147482000; width: min(300px, calc(100vw - 40px)); padding: 16px 16px 14px; border-radius: 18px 18px 6px 18px; background: #fff; color: var(--at-text); box-shadow: 0 20px 50px -18px #14323a8c; border: 1px solid var(--at-linie); font: 14px/1.5 Manrope, "Segoe UI", system-ui, sans-serif; animation: at-nachricht .5s cubic-bezier(.2, .85, .2, 1) both; }
.at-einladung b { display: block; font-size: 16px; margin: 0 0 4px; }
.at-einladung p { margin: 0 0 10px; color: var(--at-leise); }
#atEinladung button { font-family: inherit; margin: 0; box-shadow: none; min-height: 0; cursor: pointer; }
#atEinladung .at-einladung-go { height: 38px; padding: 0 14px; border: 0; border-radius: 11px; background: linear-gradient(120deg, #2f7a6d, #14323a); color: #fff; font-weight: 800; }
#atEinladung .at-einladung-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: #f1f4f2; color: var(--at-text); font-size: 17px; line-height: 1; }

@media (max-width: 560px) {
  .at-knopf { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); height: 56px; padding: 4px 16px 4px 4px !important; }
  .at-orb { width: 46px; height: 46px; }
  .at-knopf-text b { font-size: 14.5px; }
  .at-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; }
  .at-panel::after { display: none; }
  .at-einladung { right: 14px; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .at-knopf, .at-knopf::before, .at-knopf::after, .at-orb::before, .at-orb svg, .at-knopf-punkt, .at-panel::after, .at-kopf::before, .at-kopf::after, .at-intro::before, .at-panel:not([hidden]), .at-zeile, .at-faehig li, .at-tippt i { animation: none !important; }
  .at-faehig li { opacity: 1; }
}
@media print { .at-knopf, .at-panel, .at-einladung { display: none !important; } }