/* ==========================================================================
   DESIGN 2.0: Tiefe und Bewegung im Track-No.-Look
   Harte, versetzte Druck-Schatten (ohne Weichzeichner, wie Siebdruck),
   Buttons heben sich beim Überfahren und drücken sich beim Klicken ein.
   ========================================================================== */
:root{
  --s-sm:3px 3px 0 var(--ink);
  --s-md:5px 5px 0 var(--ink);
  --s-lg:7px 7px 0 var(--ink);
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

/* --- Buttons --- */
.btn{background:var(--paper);box-shadow:var(--s-sm);transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .15s,color .15s}
.btn::before{display:inline-block;transition:transform .2s var(--spring),opacity .2s}
.btn:hover:not([disabled]){transform:translate(-2px,-2px);box-shadow:var(--s-md)}
.btn:hover:not([disabled])::before{transform:translateX(3px);opacity:1}
.btn:active:not([disabled]){transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);transition-duration:.05s}
.btn[disabled]{box-shadow:none;background:transparent}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover:not([disabled]){background:var(--ink);color:var(--orange);border-color:var(--ink)}
.btn-ghost:hover:not([disabled]){background:var(--orange);color:var(--ink)}
.draft .btn-ghost{background:var(--paper)}
.draft.crisis .btn{box-shadow:3px 3px 0 var(--orange)}
.draft.crisis .btn:hover:not([disabled]){box-shadow:5px 5px 0 var(--orange)}
.draft.crisis .btn-ghost{background:transparent;color:var(--paper)}
.draft.crisis .btn-ghost:hover:not([disabled]){background:var(--paper);color:var(--ink)}

.icon-btn{background:var(--paper);box-shadow:var(--s-sm);transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .15s}
.icon-btn:hover{transform:translate(-2px,-2px);box-shadow:var(--s-md);background:var(--paper);color:var(--ink)}
.icon-btn:active{transform:translate(3px,3px);box-shadow:none}
.icon-btn .dreh{display:inline-block}
.icon-btn[aria-busy="true"]{opacity:1}
.icon-btn[aria-busy="true"] .dreh{animation:drehen .8s linear infinite}
@keyframes drehen{to{transform:rotate(360deg)}}

.chip{background:var(--paper);transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .14s,color .14s}
.chip:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--ink)}
.chip:active{transform:translate(1px,1px);box-shadow:none}

.ig-link{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink);border:1px solid var(--ink);padding:.3rem .55rem;background:var(--paper);box-shadow:2px 2px 0 var(--ink);transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .14s}
.ig-link:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);background:var(--orange)}
.m-link{box-shadow:2px 2px 0 currentColor;transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .14s,color .14s}
.m-link:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 currentColor}

/* --- Tabs mit animiertem Unterstrich --- */
nav.tabs button{position:relative;transition:color .15s}
nav.tabs button::after{content:"";position:absolute;left:1rem;right:1rem;bottom:-1.5px;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
nav.tabs button:first-child::after{left:0}
nav.tabs button:hover::after{transform:scaleX(.4)}
nav.tabs button[aria-selected="true"]::after{transform:scaleX(1)}

/* --- Geisterzahl tickt, wenn sich die Anzahl ändert --- */
.ghost.tick{animation:tick .5s var(--spring)}
@keyframes tick{0%{transform:translateY(-44%)}35%{transform:translateY(-52%) scale(1.04)}100%{transform:translateY(-44%)}}
.masthead h1{animation:hochkommen .5s var(--ease) both}
@keyframes hochkommen{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* --- Posteingang --- */
.conv{transition:background .18s,padding-left .22s var(--ease)}
.conv::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--orange);transform:scaleY(0);transition:transform .22s var(--ease)}
.conv:hover{padding-left:calc(var(--gut) + 6px)}
.conv:hover::before{transform:scaleY(.6)}
.conv[aria-current="true"]{box-shadow:none;padding-left:calc(var(--gut) + 6px)}
.conv[aria-current="true"]::before{transform:scaleY(1)}
.conv .idx{transition:color .18s,transform .22s var(--spring)}
.conv:hover .idx,.conv[aria-current="true"] .idx{color:var(--orange-deep);transform:scale(1.08)}
.conv .unread{animation:puls 2s ease-in-out infinite}
@keyframes puls{50%{opacity:.35}}
#list.einblenden .conv{animation:reinrutschen .4s var(--ease) both;animation-delay:calc(var(--i) * 35ms)}
@keyframes reinrutschen{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}

/* --- Nachrichten --- */
.msg{box-shadow:var(--s-sm)}
.msg.me{box-shadow:3px 3px 0 var(--orange)}
.thread.neu .msg{animation:reinkommen .35s var(--ease) both}
.thread.neu .msg:nth-last-child(1){animation-delay:.08s}
.thread.neu .msg:nth-last-child(2){animation-delay:.04s}
@keyframes reinkommen{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.story .medien{box-shadow:var(--s-sm);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.story:hover .medien{transform:translate(-2px,-2px);box-shadow:var(--s-md)}

/* Herz: springt beim Liken auf */
.msg .herz{box-shadow:2px 2px 0 var(--ink);transition:transform .15s var(--spring),box-shadow .15s,background .15s}
.msg .herz:hover:not([disabled]){transform:translate(-1px,-1px) scale(1.08);box-shadow:3px 3px 0 var(--ink)}
.msg .herz:active:not([disabled]){transform:translate(2px,2px);box-shadow:none}
.msg .herz.an{animation:herzpop .45s var(--spring)}
@keyframes herzpop{0%{transform:scale(.6)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.msg .reaktion{box-shadow:2px 2px 0 var(--ink)}

/* Geteilte Beiträge (offizielle Instagram-Einbettung) */
.msg:has(.geteilt){max-width:min(100%,380px)}
.geteilt{margin:.1rem 0 .5rem}
.embed-rahmen{max-height:470px;overflow:hidden;border:var(--rule) solid var(--ink);box-shadow:var(--s-sm);background:#fff;margin-bottom:.6rem}
.embed-rahmen .instagram-media{margin:0 !important;min-width:0 !important;width:100% !important;border:0 !important;border-radius:0 !important;box-shadow:none !important}
.embed-rahmen iframe{min-width:0 !important;width:100% !important;border-radius:0 !important}
.embed-rahmen a{display:block;padding:1rem;font-family:var(--mono);font-size:.7rem;color:var(--ink)}

/* --- Entwurfs-Ticket --- */
.draft{box-shadow:var(--s-lg);animation:reinkommen .4s var(--ease) both}
.draft.crisis{box-shadow:7px 7px 0 var(--orange)}
.draft textarea{transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.draft textarea:focus{outline:none;box-shadow:4px 4px 0 var(--ink);transform:translate(-2px,-2px)}
.ai-hint{box-shadow:2px 2px 0 var(--ink);border-style:solid}
.draft.crisis .ai-hint{box-shadow:2px 2px 0 var(--orange)}
.note{box-shadow:var(--s-md)}

/* Schreib-Indikator: hüpfende Punkte und laufender Balken */
.typing span{animation:none}
.skeleton{position:relative;overflow:hidden}
.skeleton::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:30%;background:var(--orange);animation:laufen 1.2s var(--ease) infinite}
@keyframes laufen{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
.punkte{display:inline-flex;gap:.25rem;margin-left:.4rem;vertical-align:middle}
.punkte i{width:.4rem;height:.4rem;background:var(--ink);display:block;animation:huepfen 1s var(--ease) infinite}
.punkte i:nth-child(2){animation-delay:.15s}
.punkte i:nth-child(3){animation-delay:.3s}
@keyframes huepfen{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px);background:var(--orange-deep)}}

/* Emoji-Auswahl */
.emoji-btn{box-shadow:2px 2px 0 var(--ink);transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .14s,color .14s}
.emoji-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.emoji-panel{box-shadow:var(--s-md);animation:aufklappen .2s var(--ease)}
@keyframes aufklappen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.emoji-grid button{transition:background .12s,transform .15s var(--spring)}
.emoji-grid button:hover{transform:scale(1.25);position:relative;z-index:1}

/* --- Hinweis unten (Toast) mit Countdown-Balken --- */
.toast{box-shadow:5px 5px 0 var(--orange);overflow:hidden;transition:transform .35s var(--spring),visibility .35s}
.toast button{box-shadow:2px 2px 0 var(--paper);transition:transform .14s var(--ease),box-shadow .14s}
.toast button:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--paper)}
.toast .zeit{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--orange);transform-origin:left;animation:ablaufen linear forwards}
@keyframes ablaufen{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* --- Seiten Leitfaden & Lernen --- */
.guide-editor{box-shadow:var(--s-md);transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.guide-editor:focus{outline:none;box-shadow:var(--s-lg);transform:translate(-2px,-2px)}
.stats{box-shadow:var(--s-md)}
.stat .n{transition:transform .2s var(--spring)}
.stat:hover .n{transform:scale(1.06)}
.pair{box-shadow:var(--s-sm);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.pair:hover{transform:translate(-2px,-2px);box-shadow:var(--s-md)}
.page{animation:hochkommen .35s var(--ease) both}

/* --- Schlanke Scrollbalken --- */
.inbox,.detail{scrollbar-width:thin;scrollbar-color:var(--ink) transparent}

@media (prefers-reduced-motion:reduce){
  .btn:hover,.chip:hover,.icon-btn:hover,.conv:hover,.story:hover .medien,.pair:hover{transform:none !important}
}

/* Zurück-Button im Stil der anderen Buttons */
.dhead .back{background:var(--paper);box-shadow:var(--s-sm);transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .15s}
.dhead .back:hover{transform:translate(-2px,-2px);box-shadow:var(--s-md);background:var(--orange)}
.dhead .back:active{transform:translate(3px,3px);box-shadow:none}

.m-tipp{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;opacity:.7;margin-top:.1rem}

/* Transkribierte Sprachnachricht */
.m-audio.fertig{border-style:solid}
.m-audio .transkript{font-style:italic;margin:.2rem 0 .5rem;white-space:pre-wrap}