body {
    height: 100vh;
    margin: 0;
    position: relative;
}
.chat-icon {
    position: fixed;
    bottom: 5px; /* Abstand vom unteren Rand */
    right: 5px; /* Abstand vom rechten Rand */
    width: 110px;
    height: 110px;
    cursor: pointer;
    z-index: 10000; /* Erhöhter z-index */
}
.chat-icon img {
    width: 100%;
    height: auto; /* Beibehaltung des Seitenverhältnisses */
    object-fit: cover; /* Stellt sicher, dass das Bild den gesamten Raum füllt */
}

/* Issue #5: Dashboard-Button für Lehrer */
.dashboard-icon {
    position: fixed;
    bottom: 122px; /* über dem Chat-Icon (110px + 5px + 7px Abstand) */
    right: 68px; /* links neben dem Config-Button (10px + 50px + 8px Gap) */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #003366;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    transition: background-color 0.2s, opacity 0.2s ease;
}
.dashboard-icon:hover {
    background-color: #004085;
}

.chat-container {
    font-family: Arial, sans-serif;
    background-color: #004085; /* Dunkleres Blau */
    color: white;
    width: 35%;
    height: 80%;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999; /* Erhöhter z-index */
    display: none;
}

/* Issue #42: Links/Rechts-Toggle */
.chat-container.left-side {
    right: auto;
    left: 20px;
}
.chat-icon.left-side {
    right: auto;
    left: 5px;
}
.dashboard-icon.left-side {
    right: auto;
    left: 68px;
}
.config-icon.left-side {
    right: auto;
    left: 10px;
}
.stop-icon.left-side {
    right: auto;
    left: 10px;
}

.header-side-toggle {
    background: none;
    border: none;
    color: rgba(255,255,255,0.75);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
    flex-shrink: 0;
    margin-right: 4px;
    transition: color 0.15s, background 0.15s;
}
.header-side-toggle:hover {
    color: white;
    background: rgba(255,255,255,0.15);
}
.chat-header {
    background-color: #003366;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #004085;
    position: relative;
}

.chat-header h1 {
    margin: 0;
    font-size: 20px;
    flex-grow: 1;
    text-align: center;
    z-index: 1;
}

.chat-header-icon-container {
    position: absolute;
    top: -25px; /* Hält die untere Seite bündig */
    left: 10px; /* Abstand vom linken Rand */
    z-index: 11;
}

.chat-header-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.header-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 1;
}

.header-icon img {
    width: 100%;
    height: 100%;
}

.chat-window {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.chat-container pre code {
}

.chat-container code {
}

.message {
    margin: 10px 0;
    padding: 10px 15px;
    border-radius: 20px;
    max-width: 60%;
    word-wrap: break-word;
    max-width: 100%; /* Stellt sicher, dass es nicht breiter wird */
}

.received {
    background-color: #0056b3;
    align-self: flex-start;
}

.sent {
    background-color: #0d6efd;
    align-self: flex-end;
}

.message_loading {
    align-self: flex-start; /* Linksbündig ausrichten */
    margin-left: 10px;
}

.input-container {
    display: flex;
    align-items: flex-end;
    padding: 10px;
    background-color: #003366;
    border-top: 1px solid #004085;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

#chat-input {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 20px;
    margin-right: 10px;
    font-size: 16px;
    box-sizing: border-box;
    resize: none;
    overflow-y: hidden;
    max-height: 80px; /* ~4 Zeilen */
    line-height: 1.4;
    font-family: Arial, sans-serif;
    vertical-align: middle;
}

.chat-window a {
    color: #aab1e2;
}

.connection-lost {
    color: red;
    font-size: 16px;
    text-align: center;
    width: 100%;
}

.privacy-notice {
    text-align: center;
    font-size: 11px;
    color: #999;
    padding: 2px 8px 6px;
    background: white;
}

.msg-time {
    font-size: 0.7em;
    opacity: 0.6;
    display: block;
    margin-top: 4px;
    text-align: right;
}

.history-separator {
    text-align: center;
    font-size: 0.75em;
    opacity: 0.6;
    margin: 8px 0 12px;
    padding: 4px 0;
    border-top: 1px solid rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

button {
    background-color: #0d6efd;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 16px;
    box-sizing: border-box; /* Neu hinzugefügt */
}

button:hover {
    background-color: #0a58ca;
}

/* Media Query für kleine Bildschirme */
@media (max-width: 768px) {
    .chat-container {
        width: 90%;
        margin-left: 5%;
    }
}

.main-inner {
    position: relative;
}

/* Issue #10: Dateiupload */
.chat-container.drag-over {
    outline: 3px dashed #4F46E5;
    outline-offset: -4px;
}

#upload-button {
    background: none;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 16px;
    flex-shrink: 0;
    color: #444;
}

#upload-button:hover {
    background-color: #f0f0f0;
}

#upload-button:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ── P5: Config-Button + Overlay ─────────────────────────────────────────── */
.config-icon {
    position: fixed;
    bottom: 180px;
    right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    transition: background-color 0.2s, opacity 0.2s ease;
}
.config-icon:hover { background-color: #2d3748; }

.cfg-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e53935;
    pointer-events: none;
}

.config-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: min(50vw, 800px);
    height: 100%;
    background: white;
    z-index: 9999;
    box-shadow: -4px 0 20px rgba(0,0,0,0.2);
    display: none;
    flex-direction: column;
    border-left: 1px solid #ddd;
}

@media (max-width: 768px) {
    .config-overlay {
        width: 100vw;
    }
}

.config-overlay-header {
    background: #003366;
    color: white;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.config-overlay-header h2 { font-size: 15px; margin: 0; font-weight: 600; }

.config-overlay-close {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    line-height: 1;
}
.config-overlay-close:hover { background: rgba(255,255,255,0.2); }

.config-overlay-iframe {
    flex: 1;
    border: none;
    width: 100%;
}

.config-overlay.left-side {
    right: auto;
    left: 0;
    box-shadow: 4px 0 20px rgba(0,0,0,0.2);
    border-left: none;
    border-right: 1px solid #ddd;
}

.suggest-panel {
    position: fixed;
    top: 0;
    right: min(50vw, 800px);
    width: 360px;
    height: 100%;
    background: white;
    z-index: 9998;
    box-shadow: -4px 0 16px rgba(0,0,0,0.15);
    display: none;
    flex-direction: column;
    border-left: 1px solid #ddd;
}

.suggest-panel.left-side {
    right: auto;
    left: min(50vw, 800px);
    box-shadow: 4px 0 16px rgba(0,0,0,0.15);
    border-left: none;
    border-right: 1px solid #ddd;
}

@media (max-width: 768px) {
    .suggest-panel, .suggest-panel.left-side {
        right: 0;
        left: 0;
        width: 100vw;
        z-index: 10001;
    }
}

.suggest-panel-header {
    background: #003366;
    color: white;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
}

.suggest-panel-close {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    line-height: 1;
}
.suggest-panel-close:hover { background: rgba(255,255,255,0.2); }

.suggest-panel-messages {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.suggest-smsg-ki {
    background: #dce9f7;
    border-radius: 6px 6px 6px 0;
    padding: 8px 10px;
    font-size: 13px;
    color: #1a2a40;
    align-self: flex-start;
    max-width: 90%;
    line-height: 1.5;
}

.suggest-smsg-user {
    background: #003366;
    color: white;
    border-radius: 6px 6px 0 6px;
    padding: 8px 10px;
    font-size: 13px;
    align-self: flex-end;
    max-width: 90%;
}

/* Issue #70: Kosten-Zeile im Prompt-Assistent-Panel */
.suggest-smsg-cost {
    font-size: 10px;
    color: #aaa;
    align-self: flex-start;
    padding: 0 2px 4px 2px;
}

.suggest-panel-loading {
    padding: 10px 14px;
    font-size: 13px;
    color: #777;
    font-style: italic;
    display: none;
    align-items: center;
    flex-shrink: 0;
    border-top: 1px solid #eee;
}

.suggest-panel-input-row {
    display: none;
    border-top: 1px solid #c5d8ee;
    background: white;
    flex-shrink: 0;
}

.suggest-panel-input-row input {
    flex: 1;
    border: none;
    padding: 10px 12px;
    font-size: 13px;
    outline: none;
    font-family: inherit;
}

.suggest-panel-input-row button {
    background: #003366;
    color: white;
    border: none;
    padding: 0 16px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.suggest-panel-input-row button:hover { background: #004085; }

.suggest-panel-preview {
    margin: 8px 12px 12px;
    padding: 10px 12px;
    background: #f0f7ff;
    border: 1px solid #99bbdd;
    border-radius: 6px;
    display: none;
    flex-direction: column;
    flex-shrink: 0;
}

.suggest-panel-preview-label {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.suggest-panel-preview-text {
    font-size: 12px;
    color: #222;
    white-space: pre-wrap;
    line-height: 1.5;
    margin-bottom: 10px;
    max-height: 180px;
    overflow-y: auto;
}

.suggest-panel-preview-actions {
    display: flex;
    gap: 8px;
}

.suggest-panel-preview-actions button:first-child {
    background: #003366;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.suggest-panel-preview-actions button:first-child:hover { background: #004085; }

.suggest-panel-preview-actions button:last-child {
    background: none;
    border: 1px solid #aaa;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 13px;
    cursor: pointer;
    color: #555;
    transition: background 0.15s;
}
.suggest-panel-preview-actions button:last-child:hover { background: #f0f0f0; }

/* ── Issue #43: Stop-Button + Lock-Modal ─────────────────────────────────── */
.stop-icon {
    position: fixed;
    bottom: 122px;
    right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #c0392b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    transition: background-color 0.2s, opacity 0.2s ease;
}
.stop-icon:hover { background-color: #922b21; }

/* Issue #155: Lehrer-Buttons auf 40% Deckkraft wenn Chat offen */
body.chat-open .dashboard-icon,
body.chat-open .config-icon,
body.chat-open .stop-icon {
    opacity: 0.4;
}
body.chat-open .dashboard-icon:hover,
body.chat-open .config-icon:hover,
body.chat-open .stop-icon:hover {
    opacity: 1;
}

.lock-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 100001;
    align-items: center;
    justify-content: center;
}

.lock-modal-dialog {
    background: white;
    border-radius: 10px;
    padding: 28px 32px 24px;
    width: min(360px, 90vw);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lock-modal-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
}

.lock-modal-desc {
    margin: 0;
    font-size: 14px;
    color: #444;
}

.lock-modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lock-modal-field label {
    font-size: 13px;
    color: #555;
}

.lock-modal-field input[type="number"] {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
    color: #1a1a1a;
    background: white;
    width: 100%;
    box-sizing: border-box;
    margin-right: 0;
    flex: none;
}

.lock-modal-field input[type="number"]:focus {
    outline: 2px solid #003366;
    border-color: #003366;
}

.lock-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}

.lock-modal-cancel {
    background: #f0f0f0;
    color: #333;
    border: none;
    border-radius: 20px;
    padding: 9px 20px;
    font-size: 14px;
    cursor: pointer;
}
.lock-modal-cancel:hover { background: #ddd; }

.lock-modal-confirm {
    background: #c0392b;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 9px 20px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
}
.lock-modal-confirm:hover { background: #922b21; }

/* ── Lightbox (Issue #15) ────────────────────────────────────────────────── */
#mmb-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0,0,0,0.88);
    align-items: center;
    justify-content: center;
}
#mmb-lb-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    font-size: 22px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
    padding: 0;
    line-height: 1;
}
#mmb-lb-close:hover { background: rgba(255,255,255,0.3); }
#mmb-lb-inner {
    width: 90vw;
    height: 90vh;
    overflow: auto;
}
#mmb-lb-canvas {
    min-width: 100%;
    min-height: 100%;
}
#mmb-lb-img {
    display: block;
    margin: 0 auto;
    height: auto;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}
#mmb-lb-img.mmb-dragging { cursor: grabbing; }
.mmb-lb-trigger { cursor: zoom-in !important; }

/* Issue #46: Schüler-Feedback-Buttons */
.mmb-feedback {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.mmb-fb-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    line-height: 1.4;
    opacity: 0.75;
    transition: opacity 0.15s, background 0.15s;
}
.mmb-fb-btn:hover {
    opacity: 1;
    background: rgba(255,255,255,0.12);
}
.mmb-fb-saved {
    font-size: 12px;
    opacity: 0.8;
    margin-left: 4px;
}
.mmb-fb-panel {
    width: 100%;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mmb-fb-input {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.12);
    color: white;
    font-size: 13px;
}
.mmb-fb-input::placeholder { color: rgba(255,255,255,0.55); }
.mmb-fb-actions {
    display: flex;
    gap: 6px;
}
.mmb-fb-save, .mmb-fb-cancel {
    padding: 4px 12px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 12px;
}
.mmb-fb-save {
    background: rgba(255,255,255,0.85);
    color: #003366;
    font-weight: 600;
}
.mmb-fb-save:hover { background: white; }
.mmb-fb-cancel {
    background: transparent;
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.3);
}
.mmb-fb-cancel:hover { background: rgba(255,255,255,0.1); }

/* ── Issue #100: Lautsprecher-Button ───────────────────────────────────── */
.mmb-speak-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    line-height: 1.4;
    opacity: 0.75;
    transition: opacity 0.15s, background 0.15s;
    margin-top: 6px;
    display: inline-block;
}
.mmb-speak-btn:hover { opacity: 1; background: rgba(255,255,255,0.12); }
.mmb-speak-btn:disabled { cursor: default; opacity: 0.5; }

/* ── Issue #53: Memory-Button + Memory-Overlay ──────────────────────────── */
/* Issue #110: 🧠-Memory-Button im Chat-Header */
.mmb-mem-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    font-size: 18px;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
    z-index: 12;
    flex-shrink: 0;
    margin-left: 55px;   /* Avatar: left 10px + width 50px → Button rechts davon */
}
.mmb-mem-btn:hover { color: white; background: rgba(255,255,255,0.12); }
.mmb-mem-btn.active { color: white; }

/* Wenn Memory-Button vorhanden, braucht Wave-Button keinen eigenen Avatar-Abstand */
.mmb-mem-btn + .mmb-wave-btn { margin-left: 0; }

/* Issue #110: Memory-Popover (analoger Stil zum Voice-Popover) */
.mmb-memory-popover {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 8px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    padding: 12px;
    z-index: 10002;
    min-width: 240px;
    color: #1a1a1a;
}
.mmb-memory-popover.open { display: block; }

.mmb-memory-popover-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #555;
    margin: 0 0 6px 0;
}

.mmb-memory-popover-desc {
    font-size: 12px;
    color: #666;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.mmb-memory-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 7px;
    font-size: 13px;
    color: #1a1a1a;
    resize: vertical;
    font-family: Arial, sans-serif;
    line-height: 1.5;
    display: block;
    margin-bottom: 8px;
}
.mmb-memory-textarea:focus {
    outline: 2px solid #6c3483;
    border-color: #6c3483;
}

.mmb-memory-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.mmb-memory-delete {
    background: #c0392b;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 13px;
    cursor: pointer;
}
.mmb-memory-delete:hover { background: #922b21; }

.mmb-memory-save {
    background: #6c3483;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 600;
}
.mmb-memory-save:hover { background: #512e74; }

/* Issue #88: Mikrofon-Icon für Spracheingaben */
.audio-badge {
    font-size: 0.85em;
    opacity: 0.75;
    margin-right: 2px;
    vertical-align: middle;
}

/* Issue #92: Mikrofon-Button im Widget */
#mic-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.15s, opacity 0.15s;
    line-height: 1;
    flex-shrink: 0;
}
#mic-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
#mic-button.recording {
    animation: mic-pulse 1s ease-in-out infinite;
    color: #c0392b;
}
@keyframes mic-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(1.15); }
}
.mic-error {
    font-size: 12px;
    color: #c0392b;
    padding: 2px 8px;
    display: none;
}
.mic-error.visible { display: block; }

/* ── Issue #101: Waveform-Icon + Voice-Popover ───────────────────────────── */
.mmb-wave-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    font-size: 18px;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
    z-index: 12;          /* über Avatar-Container (z-index: 11) */
    flex-shrink: 0;
    margin-left: 55px;    /* Avatar: left 10px + width 50px → Button rechts davon */
}
.mmb-wave-btn:hover { color: white; background: rgba(255,255,255,0.12); }
.mmb-wave-btn.active { color: white; }

.mmb-voice-popover {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 8px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    padding: 12px;
    z-index: 10002;
    min-width: 220px;
    color: #1a1a1a;
}
.mmb-voice-popover.open { display: block; }

.mmb-voice-popover-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #555;
    margin: 0 0 8px 0;
}

.mmb-voice-list {
    list-style: none;
    margin: 0 0 10px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mmb-voice-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s;
    font-size: 14px;
    border: 2px solid transparent;
}
.mmb-voice-item:hover { background: #f0eaf8; }
.mmb-voice-item.selected {
    background: #ede4f7;
    border-color: #6c3483;
}

.mmb-voice-name {
    font-weight: 600;
    min-width: 56px;
}

.mmb-voice-desc {
    color: #666;
    font-size: 12px;
}

.mmb-voice-check {
    margin-left: auto;
    color: #6c3483;
    font-size: 16px;
    display: none;
}
.mmb-voice-item.selected .mmb-voice-check { display: inline; }

.mmb-autoplay-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-top: 1px solid #eee;
    margin-top: 4px;
    font-size: 13px;
    color: #333;
}

.mmb-autoplay-label { font-weight: 600; }

.mmb-toggle {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}
.mmb-toggle input { opacity: 0; width: 0; height: 0; }
.mmb-toggle-slider {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s;
}
.mmb-toggle-slider::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
}
.mmb-toggle input:checked + .mmb-toggle-slider { background: #6c3483; }
.mmb-toggle input:checked + .mmb-toggle-slider::before { transform: translateX(16px); }

/* Memory-Löschen Bestätigungs-Overlay */
.mmb-delete-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mmb-delete-confirm-box {
    background: white;
    border: 1px solid #ccd3db;
    border-radius: 10px;
    padding: 22px 24px;
    max-width: 320px;
    width: calc(100% - 40px);
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}
.mmb-delete-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}