/* EDUVILO_SOPHIE_SELECTION_V1 */
.sophie-clickable-passage{
  position:relative;
  cursor:pointer;
  border-radius:12px;
  padding:8px 10px;
  margin-left:-10px!important;
  margin-right:-10px!important;
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.sophie-clickable-passage:hover,
.sophie-clickable-passage:focus-visible{
  background:color-mix(in srgb,var(--primary-light,#e5e4fa) 68%,white);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--primary,#5b56d6) 38%,transparent);
  outline:none;
}
.sophie-clickable-passage::after{
  content:'👩‍🏫';
  display:inline-block;
  margin-left:8px;
  font-size:.92em;
  opacity:.72;
  transform:translateY(1px);
}
.sophie-clickable-passage.sophie-selected{
  background:color-mix(in srgb,var(--primary-light,#e5e4fa) 82%,white);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--primary,#5b56d6) 52%,transparent);
}
.sophie-selection-panel{
  position:fixed;
  z-index:10050;
  display:none;
  width:min(440px,calc(100vw - 24px));
  max-height:min(520px,calc(100vh - 24px));
  overflow:auto;
  background:var(--card,#fff);
  color:var(--text,#1f2937);
  border:1px solid color-mix(in srgb,var(--primary,#5b56d6) 32%,#d7dce5);
  border-radius:20px;
  box-shadow:0 18px 55px rgba(20,32,60,.22);
  padding:14px;
  font:inherit;
}
.sophie-selection-panel.open{display:block;animation:sophieSelectionIn .16s ease-out}
@keyframes sophieSelectionIn{from{opacity:0;transform:translateY(5px) scale(.985)}to{opacity:1;transform:none}}
.sophie-selection-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.sophie-selection-title{font-size:1.02rem;color:var(--primary-dark,var(--primary,#4f46c8))}
.sophie-selection-close{border:0;background:transparent;color:inherit;font-size:1.6rem;line-height:1;cursor:pointer;padding:0 4px;opacity:.65}
.sophie-selection-close:hover{opacity:1}
.sophie-selection-label{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.6;margin-bottom:5px}
.sophie-selection-quote{font-size:.91rem;line-height:1.45;max-height:105px;overflow:auto;padding:9px 10px;border-radius:12px;background:var(--primary-light,#f0efff);border-left:3px solid var(--primary,#5b56d6);margin-bottom:10px}
.sophie-selection-actions{display:flex;flex-wrap:wrap;gap:7px}
.sophie-selection-actions button{border:1px solid color-mix(in srgb,var(--primary,#5b56d6) 30%,#d8dce5);border-radius:999px;background:var(--card,#fff);color:inherit;padding:8px 11px;font:inherit;font-size:.85rem;font-weight:650;cursor:pointer;transition:transform .14s ease,background .14s ease,border-color .14s ease}
.sophie-selection-actions button:hover:not(:disabled){transform:translateY(-1px);background:var(--primary-light,#f0efff);border-color:var(--primary,#5b56d6)}
.sophie-selection-actions button:disabled{cursor:wait;opacity:.5}
.sophie-selection-stop{margin-left:auto}
.sophie-selection-status{font-size:.8rem;opacity:.68;margin-top:9px;min-height:1.2em}
.sophie-selection-answer{font-size:.92rem;line-height:1.48;margin-top:9px;padding:10px 11px;border-radius:12px;background:color-mix(in srgb,var(--accent,#37b7ff) 10%,white);border:1px solid color-mix(in srgb,var(--accent,#37b7ff) 28%,#dce2e8)}
.sophie-selection-panel.busy .sophie-selection-title::after{content:'';display:inline-block;width:9px;height:9px;margin-left:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sophieSelectionSpin .7s linear infinite}
@keyframes sophieSelectionSpin{to{transform:rotate(360deg)}}
/* Ein alter Diagnose-Link aus der Sprachentwicklung soll Lernende nicht stören. */
#sophie-audio-diagnose{display:none!important}
@media(max-width:720px){
  .sophie-selection-panel{width:auto!important;left:12px!important;right:12px!important;top:auto!important;bottom:12px!important;border-radius:18px;padding:12px;max-height:min(60vh,520px)}
  .sophie-selection-actions button{flex:1 1 auto}
  .sophie-selection-stop{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  .sophie-selection-panel.open,.sophie-selection-panel.busy .sophie-selection-title::after{animation:none}
}

/* EDUVILO Sophie – Ganzkörperdarstellung */
.sophie-avatar,
.sophie-avatar-stage,
.sophie-avatar-wrap {
    overflow: visible !important;
}

.sophie-avatar img,
.sophie-avatar-stage img,
.sophie-avatar-wrap img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 82vh !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform-origin: center bottom !important;
}

@media (max-width: 900px) {
    .sophie-avatar img,
    .sophie-avatar-stage img,
    .sophie-avatar-wrap img {
        max-height: 62vh !important;
    }
}

/* EDUVILO Sophie – Position final korrigieren */
.sophie-avatar-stage,
.sophie-avatar-wrap {
    position: relative !important;
    overflow: hidden !important;
}

.sophie-avatar {
    position: absolute !important;
    right: 28px !important;
    bottom: 18px !important;
    top: auto !important;

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

    height: min(68vh, 760px) !important;
    max-height: calc(100% - 24px) !important;
    width: auto !important;

    transform: none !important;
}

.sophie-avatar img,
.sophie-avatar-stage img,
.sophie-avatar-wrap img {
    display: block !important;

    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center bottom !important;

    transform-origin: center bottom !important;
}

/* keine künstliche Kopf-Schaukelbewegung */
.sophie-avatar,
.sophie-avatar img {
    animation-name: none !important;
}

/* Tablet */
@media (max-width: 1100px) {
    .sophie-avatar {
        right: 12px !important;
        height: min(60vh, 650px) !important;
    }
}

/* Mobile */
@media (max-width: 700px) {
    .sophie-avatar {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        margin: 12px auto 0 !important;

        height: min(52vh, 480px) !important;
        max-width: 92% !important;
    }
}


/* EDUVILO Sophie - finale Viewport-Position */
.sophie-avatar {
    position: fixed !important;
    right: clamp(16px, 3vw, 42px) !important;
    bottom: var(--sophie-footer-offset, 24px) !important;
    top: auto !important;

    width: auto !important;
    height: min(44vh, 560px) !important;
    max-height: calc(100vh - var(--sophie-footer-offset, 24px) - 24px) !important;

    z-index: 45 !important;
    transform: none !important;
    animation: none !important;

    pointer-events: none !important;
}

.sophie-avatar img {
    display: block !important;
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    animation: none !important;
}

.sophie-avatar-stage,
.sophie-avatar-wrap {
    overflow: visible !important;
}

@media (max-width: 800px) {
    .sophie-avatar {
        right: 8px !important;
        height: min(38vh, 430px) !important;
    }
}


/* EDUVILO Sophie - echter Avatar-Container */
#sophie-mascot {
    position: fixed !important;
    right: clamp(18px, 3vw, 38px) !important;
    bottom: var(--sophie-footer-offset, 22px) !important;
    top: auto !important;
    left: auto !important;

    width: clamp(190px, 17vw, 250px) !important;
    height: auto !important;
    max-height: calc(100vh - var(--sophie-footer-offset, 22px) - 24px) !important;

    margin: 0 !important;
    transform: none !important;
    animation: none !important;

    overflow: visible !important;
    pointer-events: none !important;
    z-index: 45 !important;
}

#sophie-mascot .sophie-standing-img {
    display: block !important;

    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: calc(100vh - var(--sophie-footer-offset, 22px) - 24px) !important;

    object-fit: contain !important;
    object-position: center bottom !important;

    margin: 0 !important;
    transform: none !important;
    animation: none !important;
}

@media (max-width: 800px) {
    #sophie-mascot {
        right: 10px !important;
        width: clamp(150px, 32vw, 210px) !important;
    }
}


/* =========================================================
   EDUVILO SOPHIE - FINAL RESPONSIVE VIEWPORT FIT
   ========================================================= */

#sophie-mascot {
    position: fixed !important;
    right: clamp(14px, 2.5vw, 34px) !important;
    bottom: var(--sophie-bottom, 18px) !important;
    top: auto !important;
    left: auto !important;

    width: auto !important;
    height: var(--sophie-height, 440px) !important;
    max-width: none !important;
    max-height: none !important;

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

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    pointer-events: none !important;
    z-index: 45 !important;

    transform: none !important;
    animation: none !important;

    transition:
        height .22s ease,
        bottom .22s ease !important;
}

#sophie-mascot .sophie-standing-img {
    display: block !important;

    width: auto !important;
    height: 100% !important;

    max-width: none !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center bottom !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    animation: none !important;
}

@media (max-width: 800px) {
    #sophie-mascot {
        right: 8px !important;
    }
}