:root{
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-ui:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --bg:#0b0910;
  --text:#f5f1f7;
  --muted:#a79fb2;
  --faint:#766f82;

  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.16);

  --rose:#ff6f8d;
  --coral:#ff9e7d;
  --violet:#9a86ff;
  --indigo:#6c6bff;
  --grad-warm:linear-gradient(135deg,#ff6f8d 0%,#ff9e7d 100%);
  --grad-cool:linear-gradient(135deg,#9a86ff 0%,#6c6bff 100%);
  --grad-aura:linear-gradient(120deg,#ff8aa0 0%,#ff9e7d 45%,#9a86ff 100%);

  --bubble-in:rgba(255,255,255,.065);
  --red:#ff7a87; --red-soft:rgba(255,122,135,.14);

  --head-h:56px;
  --safe-top:env(safe-area-inset-top);
  --safe-bot:env(safe-area-inset-bottom);
  --shadow:0 18px 50px -20px rgba(0,0,0,.7);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{height:100%;background:var(--bg)}
body{
  font-family:var(--font-ui);
  background:var(--bg); color:var(--text);
  line-height:1.45; letter-spacing:-.01em;
  height:100dvh; display:flex; flex-direction:column; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── Atmosphäre: Aurora-Verläufe + Grain ── */
.atmosphere{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 48% at 88% -6%, rgba(255,111,141,.30), transparent 62%),
    radial-gradient(52% 42% at -8% 8%, rgba(255,158,125,.16), transparent 60%),
    radial-gradient(60% 50% at 50% 116%, rgba(154,134,255,.26), transparent 60%),
    var(--bg);
}
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

.muted{color:var(--muted)}
button{font-family:inherit;cursor:pointer;border:none;border-radius:14px;font-weight:600;font-size:14px;color:var(--text)}
input,select,textarea{
  width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text);
  border-radius:14px; padding:13px 14px; font-family:inherit; font-size:16px; outline:none;
  transition:border-color .18s, background .18s;
}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{border-color:var(--border-strong);background:var(--surface-2)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23a79fb2' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
textarea{resize:vertical}

.primary-btn{background:var(--grad-warm);color:#1a0c12;font-weight:700;padding:13px 20px;box-shadow:0 10px 26px -12px rgba(255,111,141,.8)}
.primary-btn:active{transform:translateY(1px)}
.primary-btn.lg{padding:15px 20px;font-size:15px}
.ghost-btn{background:var(--surface);color:var(--text);border:1px solid var(--border);padding:13px 16px}
.ghost-btn:active{background:var(--surface-2)}
.danger-btn{background:var(--red-soft);color:var(--red);padding:13px 16px}
.full{width:100%}

/* ── Login ── */
.login-body{display:grid;place-items:center;padding:24px}
.login-card{
  background:var(--surface); border:1px solid var(--border); border-radius:28px;
  padding:42px 30px; width:100%; max-width:360px; text-align:center;
  display:flex; flex-direction:column; gap:14px; backdrop-filter:blur(22px); box-shadow:var(--shadow);
}
.login-icon{font-size:0;width:66px;height:66px;margin:0 auto 6px;border-radius:20px;background:var(--grad-aura);box-shadow:0 14px 34px -12px rgba(255,111,141,.8)}
.login-card h1{font-family:var(--font-display);font-weight:600;font-size:30px}
.login-card button{background:var(--grad-warm);color:#1a0c12;font-weight:700;padding:14px}
.login-error{color:var(--red);font-size:14px}

/* ── View-Stack ── */
#main{flex:1;position:relative;overflow:hidden}
.view{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;animation:viewIn .32s ease}
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
.scroll.pad{padding:18px 18px 32px;display:flex;flex-direction:column;gap:12px}
.empty{padding:70px 28px;text-align:center;line-height:1.7;font-size:15px}

/* ── Kopfzeilen ── */
.app-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:calc(var(--safe-top) + 22px) 22px 16px;
  background:linear-gradient(to bottom,rgba(11,9,16,.7),transparent);
  backdrop-filter:blur(10px);
}
.app-head h1{font-family:var(--font-display);font-weight:600;font-size:34px;letter-spacing:-.02em}
.sub-head{
  display:flex;align-items:center;gap:8px;
  padding:calc(var(--safe-top) + 12px) 14px 12px;
  border-bottom:1px solid var(--border);
  background:rgba(11,9,16,.55);backdrop-filter:blur(18px);
}
.sub-head h2{font-family:var(--font-display);font-weight:600;font-size:21px}
.back-btn{background:var(--surface);border:1px solid var(--border);color:var(--text);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.back-btn svg{width:20px;height:20px}
.back-btn:active{background:var(--surface-2)}
.icon-btn{width:42px;height:42px;border-radius:50%;background:var(--grad-warm);color:#1a0c12;display:grid;place-items:center;box-shadow:0 10px 24px -12px rgba(255,111,141,.9)}
.icon-btn svg{width:22px;height:22px}
.icon-btn:active{transform:scale(.94)}

/* ── Chats-Liste ── */
.chat-list{display:flex;flex-direction:column;padding:6px 12px 12px}
.chat-row{
  display:flex;align-items:center;gap:14px;padding:12px;border-radius:20px;cursor:pointer;
  transition:background .18s,transform .18s; animation:rowIn .4s both;
}
.chat-row:active{background:var(--surface);transform:scale(.99)}
@media(hover:hover){.chat-row:hover{background:var(--surface)}}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chat-avatar{width:58px;height:58px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--surface-2);box-shadow:0 0 0 1px var(--border)}
.chat-meta{flex:1;min-width:0}
.chat-line{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:2px}
.chat-name{font-weight:650;font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-when{font-size:12px;color:var(--faint);flex-shrink:0}
.chat-preview{color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-row.unread .chat-name{font-weight:750}
.chat-row.unread .chat-preview{color:var(--text)}
.unread-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;align-self:center;background:var(--grad-warm);box-shadow:0 0 10px rgba(255,111,141,.6)}

/* ── Avatare-Grid ── */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));padding:14px 18px 24px}
.avatar-card{
  position:relative;border-radius:22px;overflow:hidden;cursor:pointer;aspect-ratio:3/4;
  background:var(--surface-2);box-shadow:0 0 0 1px var(--border),var(--shadow);
  transition:transform .2s; animation:rowIn .45s both;
}
.avatar-card:active{transform:scale(.97)}
@media(hover:hover){.avatar-card:hover{transform:translateY(-4px)}}
.avatar-card img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-card .card-name{
  position:absolute;left:0;right:0;bottom:0;padding:30px 14px 13px;font-weight:650;font-size:16px;
  background:linear-gradient(to top,rgba(8,6,12,.92),rgba(8,6,12,.45) 55%,transparent);
}

/* ── Avatar-Detail ── */
.hero{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:6px}
.avatar-large{width:100%;max-width:300px;aspect-ratio:3/4;object-fit:cover;border-radius:24px;background:var(--surface-2);box-shadow:0 0 0 1px var(--border),var(--shadow)}
.hero-actions{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px}
.side-label{font-size:12.5px;color:var(--muted);font-weight:650;margin-top:10px;letter-spacing:.01em}
.persona-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px;font-family:var(--font-ui);font-size:13.5px;color:var(--muted);white-space:pre-wrap;word-break:break-word;line-height:1.6}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gallery-item{position:relative;cursor:pointer}
.gallery-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;box-shadow:0 0 0 1px var(--border);transition:transform .15s;display:block}
.gallery-item:active img{transform:scale(.95)}
.gallery-tag{position:absolute;left:7px;bottom:7px;font-size:10px;font-weight:700;letter-spacing:.02em;padding:3px 8px;border-radius:9px;background:rgba(8,6,12,.7);color:#fff;backdrop-filter:blur(4px)}

/* ── Wizard ── */
.wizard-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));margin-bottom:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:12.5px;color:var(--muted);font-weight:650}
.field-wide{grid-column:1/-1}
.status{margin-top:14px;font-size:14px;color:var(--coral)}
.status.error{color:var(--red)}

/* ── Einstellungen ── */
.settings-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:22px;margin:18px;display:flex;flex-direction:column;gap:12px;backdrop-filter:blur(20px);box-shadow:var(--shadow)}
.settings-card h2{font-family:var(--font-display);font-weight:600;font-size:18px}
.settings-actions{display:flex;gap:10px;margin-top:10px}
.hint{font-size:12px;line-height:1.5}
.logout-btn{display:block;margin:6px auto 30px;background:none;color:var(--faint);font-size:14px;padding:8px}

/* ── Chat-Fenster ── */
.chat-head{display:flex;align-items:center;gap:11px;padding:calc(var(--safe-top) + 9px) 14px 9px;border-bottom:1px solid var(--border);background:rgba(11,9,16,.6);backdrop-filter:blur(20px);z-index:2}
.chat-thumb{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--surface-2);box-shadow:0 0 0 1px var(--border)}
.chat-title{display:flex;flex-direction:column;line-height:1.25}
.chat-title #c-name{font-family:var(--font-display);font-weight:600;font-size:18px}
.chat-sub{font-size:12px;color:var(--coral);display:flex;align-items:center;gap:5px}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 rgba(255,158,125,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,158,125,.5)}70%{box-shadow:0 0 0 6px rgba(255,158,125,0)}100%{box-shadow:0 0 0 0 rgba(255,158,125,0)}}

.chat-log{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:7px;padding:16px 14px calc(84px + env(safe-area-inset-bottom) + var(--kb, 0px))}
.msg{max-width:80%;padding:9px 13px 7px;border-radius:20px;font-size:15px;position:relative;word-wrap:break-word;display:flex;flex-direction:column;animation:bubbleIn .26s ease both}
@keyframes bubbleIn{from{opacity:0;transform:translateY(7px) scale(.98)}to{opacity:1;transform:none}}
.msg .bubble-text{white-space:pre-wrap;line-height:1.45}
.msg.user{align-self:flex-end;background:var(--grad-warm);color:#23121a;border-bottom-right-radius:7px;box-shadow:0 8px 22px -14px rgba(255,111,141,.9)}
.msg.assistant{align-self:flex-start;background:var(--bubble-in);border:1px solid var(--border);border-bottom-left-radius:7px;backdrop-filter:blur(10px)}
.msg.image{padding:5px}
.msg img{display:block;border-radius:16px;width:240px;max-width:72vw;max-height:340px;object-fit:cover;cursor:pointer}
.msg em{font-style:italic;opacity:.85}
.msg.user em{color:#5a2b1f}
.msg.assistant em{color:var(--coral)}
.msg-time{font-size:10px;opacity:.55;align-self:flex-end;margin-top:3px}
.msg.user .msg-time{color:#5a2b1f;opacity:.7}
.msg.image .msg-time{position:absolute;right:12px;bottom:11px;color:#fff;background:rgba(0,0,0,.5);padding:2px 7px;border-radius:9px;opacity:1}
/* Regie-/Rahmen-Anweisung (Kontext, wird nicht beantwortet) */
.msg.director{align-self:center;max-width:88%;background:var(--surface-2);border:1px dashed var(--violet);border-radius:14px;color:var(--muted);font-style:italic;font-size:13.5px;padding:8px 14px;gap:3px}
.msg.director .director-label{font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);font-weight:600;opacity:.85}
.msg.director .bubble-text{white-space:pre-wrap;line-height:1.45;color:var(--text);opacity:.82}

/* Typing-Indikator */
.typing{display:flex;gap:4px;padding:13px}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:typing 1.3s infinite}
.typing span:nth-child(2){animation-delay:.18s}.typing span:nth-child(3){animation-delay:.36s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.chat-input{position:fixed;bottom:var(--kb, 0px);left:50%;transform:translateX(-50%);width:100%;max-width:460px;z-index:20;display:flex;gap:9px;align-items:flex-end;padding:10px 12px max(10px, calc(env(safe-area-inset-bottom) - 16px));background:rgba(11,9,16,.78);backdrop-filter:blur(20px);border-top:1px solid var(--border);transition:bottom .12s ease}
.chat-input textarea{flex:1;max-height:120px;border-radius:22px;background:var(--surface-2)}
.round-btn{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:var(--surface-2);border:1px solid var(--border);color:var(--muted);display:grid;place-items:center}
.round-btn svg{width:21px;height:21px}
.round-btn.send{background:var(--grad-warm);color:#23121a;border-color:transparent;box-shadow:0 8px 20px -10px rgba(255,111,141,.9)}
.round-btn:active{transform:scale(.92)}

/* ── Tableiste ── */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:460px;z-index:20;display:flex;gap:4px;padding:7px 14px max(8px, calc(env(safe-area-inset-bottom) - 26px));background:rgba(11,9,16,.82);backdrop-filter:blur(24px) saturate(1.4);border-top:1px solid var(--border)}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 4px;background:none;color:var(--faint);font-size:11px;font-weight:650;border-radius:14px;transition:color .18s}
.tabbar button svg{width:24px;height:24px;transition:transform .2s}
.tabbar button.active{color:var(--rose)}
.tabbar button.active svg{transform:translateY(-1px)}
.tabbar button:active svg{transform:scale(.88)}

/* ── Overlay + Lightbox ── */
.overlay{position:fixed;inset:0;background:rgba(8,6,12,.8);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;z-index:60;color:var(--text);padding:24px;text-align:center}
.spinner{width:46px;height:46px;border-radius:50%;background:conic-gradient(from 0deg,transparent,var(--rose),var(--coral),var(--violet),transparent);mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.lightbox{position:fixed;inset:0;background:rgba(6,4,10,.94);backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:70;padding:24px;animation:viewIn .2s ease}
.lightbox img{max-width:100%;max-height:82%;border-radius:18px;box-shadow:var(--shadow)}
.lightbox-bar{display:flex;gap:10px}

/* ── Desktop: zentrierter App-Rahmen ── */
@media(min-width:600px){
  body{max-width:460px;margin:0 auto;box-shadow:0 0 0 1px var(--border),0 40px 120px -40px rgba(0,0,0,.9)}
}

/* ── Datums-Trenner im Chat ── */
.date-sep{align-self:center;font-size:11px;font-weight:650;color:var(--faint);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:4px 12px;margin:8px 0 2px;letter-spacing:.04em}

/* ── Bild-Platzhalter im Chat (Generierung läuft) ── */
.img-ph{width:240px;max-width:72vw;height:300px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-size:13px;
  background:linear-gradient(110deg,var(--surface) 30%,var(--surface-2) 45%,var(--surface) 60%);
  background-size:220% 100%;animation:shimmer 1.6s linear infinite}
@keyframes shimmer{to{background-position:-220% 0}}
.img-ph .spinner{width:30px;height:30px}
.img-ph.failed{animation:none;background:var(--red-soft);color:var(--red);padding:16px;text-align:center;height:auto;min-height:120px}
.img-ph .retry-btn{background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:9px 16px;border-radius:12px;font-size:13px}

/* ── Aktionsblatt (Long-Press auf Nachricht) ── */
.sheet{position:fixed;inset:0;z-index:80;background:rgba(6,4,10,.6);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;animation:viewIn .18s ease}
.sheet-card{width:100%;max-width:460px;background:rgba(20,16,28,.97);border-top:1px solid var(--border);border-radius:24px 24px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:9px;animation:sheetUp .22s ease}
@keyframes sheetUp{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}

/* ── Wizard: Generator-Zeile ── */
.row-inline{display:flex;gap:8px;align-items:stretch}
.row-inline input{flex:1;min-width:0}
.row-inline button{flex-shrink:0;white-space:nowrap}

/* Studio: Modus-Umschalter */
.seg{display:flex;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:5px;margin-bottom:18px}
.seg button{flex:1;background:transparent;color:var(--text);border:none;padding:10px 12px;border-radius:10px;font-weight:600;font-size:14px}
.seg button.active{background:var(--grad-warm);color:#1a0c12;box-shadow:0 8px 20px -12px rgba(255,111,141,.8)}
input[type=file]{padding:10px;font-size:13px}