@charset "UTF-8";

/* ==========================================================================
   HeldiGPT · Consolidated Minimal UI
   Eine Datei statt styles.css + modern-responsive.css + heldi-tool-health.css
   Ziel: modern, ruhig, minimalistisch, responsive, Dark/Light automatisch.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design Tokens
   -------------------------------------------------------------------------- */

:root {
    --accent: #FAB400;
    --accent-rgb: 250, 180, 0;
    --accent-contrast: #171717;
    --bg: #0d0f12;
    --bg-soft: #111318;
    --surface-1: #151820;
    --surface-2: #1b1f29;
    --surface-3: #242936;
    --text: #f5f5f4;
    --text-muted: #a1a1aa;
    --text-faint: #71717a;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    --danger: #ef4444;
    --success: #22c55e;
    --shadow-md: 0 12px 34px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.44);
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 20px;
    --r-xl: 24px;
    --r-pill: 999px;
    --font: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: Inter, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --topbar-height: 64px;
    --maxw: min(880px, calc(100vw - 32px));
    --chat-pad-x: clamp(12px, 4vw, 28px);
    --chat-pad-y: clamp(16px, 4vh, 36px);
    --composer-pad: clamp(10px, 2vw, 18px);
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --t-fast: 120ms var(--ease);
    --t-mid: 220ms var(--ease);
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #f7f7f8;
        --bg-soft: #ffffff;
        --surface-1: #ffffff;
        --surface-2: #f2f3f5;
        --surface-3: #e8eaee;
        --text: #171717;
        --text-muted: #60646c;
        --text-faint: #8b9099;
        --border: rgba(17, 24, 39, 0.09);
        --border-strong: rgba(17, 24, 39, 0.15);
        --shadow-md: 0 12px 34px rgba(15, 23, 42, 0.08);
        --shadow-lg: 0 24px 80px rgba(15, 23, 42, 0.14);
    }
}

/* --------------------------------------------------------------------------
   Reset / Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    height: 100dvh;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    line-height: 1.55;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a,
input,
textarea {
    touch-action: manipulation;
}

button {
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast), opacity var(--t-fast), filter var(--t-fast);
}

    button:active {
        transform: scale(0.97);
    }

    button:disabled {
        cursor: not-allowed;
        opacity: 0.45;
    }

::selection {
    background: rgba(var(--accent-rgb), 0.28);
    color: var(--text);
}

[hidden] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   App Shell
   -------------------------------------------------------------------------- */

.app {
    display: flex;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    background: radial-gradient(circle at 50% -20%, rgba(var(--accent-rgb), 0.08), transparent 34rem), var(--bg);
}

.main {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
    height: 100dvh;
    min-height: 100dvh;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   Brand (Titel-Logo im Sidebar-Kopf)
   -------------------------------------------------------------------------- */

.brand {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
    font-family: var(--font-display);
    font-size: clamp(15px, 2vw, 17px);
    font-weight: 750;
    letter-spacing: -0.035em;
}

.brand-title {
    height: 48px;
    width: auto;
    max-width: 280px;
    flex: 0 0 auto;
    object-fit: contain;
}

/* Standard = Dark */
.brand-title-light {
    display: none;
}

.brand-title-dark {
    display: block;
}

/* System hell, solange nicht manuell auf Dark gestellt */
@media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]) .brand-title-light {
        display: block;
    }

    html:not([data-theme="dark"]) .brand-title-dark {
        display: none;
    }
}

/* Manuell hell */
html[data-theme="light"] .brand-title-light {
    display: block;
}

html[data-theme="light"] .brand-title-dark {
    display: none;
}

.app-version {
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.icon-btn,
.admin-btn,
.icon-action,
.attach-btn,
.mic-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--text-muted);
    box-shadow: none;
}

    .icon-btn:hover,
    .admin-btn:hover,
    .icon-action:hover,
    .attach-btn:hover,
    .mic-btn:hover {
        background: var(--surface-2);
        border-color: var(--border);
        color: var(--text);
    }

    .icon-action svg,
    .send-btn svg {
        width: 19px;
        height: 19px;
        display: block;
    }

.auth-btn,
.new-chat-btn,
.send-btn,
.terms-accept-btn,
.prompt-btn.primary,
.document-form-btn.primary,
.approval-btn.approve {
    border: 1px solid transparent;
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: 750;
    box-shadow: none;
}

    .auth-btn:hover,
    .new-chat-btn:hover,
    .send-btn:hover:not(:disabled),
    .terms-accept-btn:hover:not(:disabled),
    .prompt-btn.primary:hover,
    .document-form-btn.primary:hover,
    .approval-btn.approve:hover {
        filter: brightness(1.03);
        transform: translateY(-1px);
    }

.auth-btn {
    padding: 9px 16px;
    border-radius: var(--r-pill);
    font-size: 14px;
}

.send-btn {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 14px;
}

/* --------------------------------------------------------------------------
   Model / Budget / User
   -------------------------------------------------------------------------- */

.model-selector {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface-1);
}

.model-btn {
    height: 32px;
    padding: 0 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

    .model-btn:hover:not(:disabled) {
        background: var(--surface-2);
        color: var(--text);
    }

    .model-btn.active {
        background: var(--surface-3);
        color: var(--text);
    }

.budget {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: auto;
}

.budget-bar {
    width: 86px;
    height: 6px;
    overflow: hidden;
    border-radius: var(--r-pill);
    background: var(--surface-3);
}

.budget-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    transition: width 450ms var(--ease), background 180ms ease;
}

    .budget-fill.warn {
        background: #eab308;
    }

    .budget-fill.exceeded {
        background: var(--danger);
    }

.budget-label {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 4px 3px 8px;
    border: 1px solid transparent;
    border-radius: 14px;
}

    .user-info:hover {
        background: var(--surface-1);
        border-color: var(--border);
    }

.user-name {
    max-width: 160px;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-avatar {
    width: 34px;
    height: 34px;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    background-color: var(--surface-3);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--text);
    font-size: 13px;
    font-weight: 750;
    text-transform: uppercase;
    box-shadow: none;
}

    .user-avatar.has-photo {
        background-color: transparent;
        color: transparent;
    }

    .user-avatar.tier-basic {
        border-color: rgba(255, 255, 255, 0.9);
        box-shadow: none;
    }

    .user-avatar.tier-premium {
        border-color: var(--accent);
        box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.28);
    }

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: 312px;
    max-width: min(88vw, 360px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    padding-top: calc(14px + env(safe-area-inset-top));
    border-right: 1px solid var(--border);
    background: var(--bg-soft);
    transform: translateX(-100%);
    transition: transform var(--t-mid);
}

    .sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.new-chat-btn {
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 14px;
}

.chat-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-3) transparent;
}

.chat-item {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 10px;
    border-radius: 12px;
    color: var(--text-muted);
    cursor: pointer;
}

    .chat-item:hover {
        background: var(--surface-1);
        color: var(--text);
    }

    .chat-item.active {
        background: var(--surface-2);
        color: var(--text);
    }

.chat-item-title {
    flex: 1;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-item-actions {
    display: none;
    gap: 2px;
}

.chat-item:hover .chat-item-actions {
    display: inline-flex;
}

.chat-item-actions button {
    padding: 3px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
}

    .chat-item-actions button:hover {
        background: var(--surface-3);
        color: var(--text);
    }

/* --------------------------------------------------------------------------
   Chat
   -------------------------------------------------------------------------- */

.chat {
    width: 100%;
    max-width: var(--maxw);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    margin: 0 auto;
    padding: var(--chat-pad-y) var(--chat-pad-x);
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-3) transparent;
}

    .chat::-webkit-scrollbar,
    .chat-list::-webkit-scrollbar,
    .admin-body::-webkit-scrollbar,
    .terms-body::-webkit-scrollbar,
    .prompt-dialog::-webkit-scrollbar {
        width: 8px;
    }

    .chat::-webkit-scrollbar-thumb,
    .chat-list::-webkit-scrollbar-thumb,
    .admin-body::-webkit-scrollbar-thumb,
    .terms-body::-webkit-scrollbar-thumb,
    .prompt-dialog::-webkit-scrollbar-thumb {
        border: 2px solid transparent;
        border-radius: 999px;
        background: var(--surface-3);
        background-clip: padding-box;
    }

.msg {
    width: 100%;
    display: flex;
    gap: 12px;
    max-width: 100%;
    animation: msgIn 180ms var(--ease) both;
}

@keyframes msgIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.msg .bubble {
    max-width: 100%;
    padding: 13px 15px;
    border-radius: 18px;
    font-size: clamp(0.95rem, 1vw, 1rem);
    line-height: 1.62;
    letter-spacing: -0.006em;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.msg.user {
    justify-content: flex-end;
}

    .msg.user .bubble {
        max-width: min(78%, 42rem);
        border-bottom-right-radius: 6px;
        background: var(--accent);
        color: var(--accent-contrast);
        font-weight: 550;
    }

.msg.bot {
    flex-direction: column;
    align-items: stretch;
}

    .msg.bot .bubble {
        width: 100%;
        max-width: 100%;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: var(--text);
    }

        .msg.bot .bubble.typing,
        .msg.bot .bubble.loading-bubble,
        .msg.bot .bubble.streaming {
            padding: 0 !important;
            border: none;
            background: transparent;
            box-shadow: none;
        }

.bubble a,
.bubble a.bot-link {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    word-break: break-word;
}

    .bubble a:hover,
    .bubble a.bot-link:hover {
        border-bottom-color: var(--accent);
    }

.bubble pre,
.bubble table {
    max-width: 100%;
    overflow-x: auto;
    border-radius: 12px;
}

.bubble code {
    padding: 2px 5px;
    border-radius: 6px;
    background: var(--surface-2);
}

/* --------------------------------------------------------------------------
   Message Meta / Feedback
   -------------------------------------------------------------------------- */

.msg-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: auto;
    max-width: 100%;
    margin-top: 10px;
    padding-left: 0;
    color: var(--text-faint);
    font-size: 0.8rem;
    text-align: left;
}

.meta-confidence,
.meta-cost {
    cursor: help;
}

.msg-meta .meta-feedback,
.msg.bot .feedback,
.msg.bot .feedback-actions,
.msg.bot .message-feedback,
.msg.bot .feedback-buttons {
    display: inline-flex;
    justify-content: flex-start;
    gap: 4px;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.feedback-btn {
    margin: 0 !important;
    padding: 3px 5px;
    border: none;
    border-radius: 9px;
    background: transparent;
    opacity: 0.68;
}

    .feedback-btn:hover,
    .feedback-btn.selected {
        background: var(--surface-2);
        opacity: 1;
    }

/* --------------------------------------------------------------------------
   Loader
   -------------------------------------------------------------------------- */

.loading-bubble {
    width: auto;
}

.gemini-loader {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    min-height: 36px;
    padding: 4px 0;
}

    /* rotierender Ring um das App-Icon */
    .gemini-loader::before {
        content: "";
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        border-radius: 50%;
        background: conic-gradient( from 0deg, transparent 0deg, rgba(var(--accent-rgb), 0.16) 46deg, var(--accent) 112deg, rgba(255, 255, 255, 0.92) 168deg, rgba(var(--accent-rgb), 0.72) 234deg, transparent 318deg );
        box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.12), 0 0 18px rgba(var(--accent-rgb), 0.22);
        mask: radial-gradient(circle, transparent 53%, #000 55%);
        -webkit-mask: radial-gradient(circle, transparent 53%, #000 55%);
        animation: loaderOrbSpin 1.05s linear infinite;
    }

/* App-Icon in der Mitte 
    .gemini-loader::after {
        content: "";
        position: absolute;
        left: 5px;
        top: 50%;
        width: 20px;
        height: 20px;
        border-radius: 7px;
        background: url("Heldi_new.png") center / contain no-repeat;
        filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.26));
        transform: translateY(-50%) scale(1);
        animation: loaderIconBreathe 1.65s ease-in-out infinite;
        pointer-events: none;
    }
*/

.gemini-loader-status {
    color: var(--text-muted) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 0.92rem !important;
    font-weight: 600;
    letter-spacing: -0.02em;
    animation: loaderTextPulse 1.45s ease-in-out infinite;
}

    .gemini-loader-status::before,
    .gemini-loader-status::after,
    .gemini-loader-line,
    .gemini-loader-line::after {
        display: none !important;
        content: none !important;
    }

.msg.bot .bubble.streaming::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 1em;
    margin-left: 3px;
    vertical-align: -0.12em;
    border-radius: 999px;
    background: var(--accent);
    animation: cursorBlink 900ms ease-in-out infinite;
}

@keyframes loaderOrbSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loaderIconBreathe {
    0%, 100% {
        opacity: 0.82;
        transform: translateY(-50%) scale(0.92) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: translateY(-50%) scale(1.04) rotate(-2deg);
    }
}

@keyframes loaderTextPulse {
    0%, 100% {
        opacity: 0.56;
    }

    50% {
        opacity: 1;
    }
}

@keyframes cursorBlink {
    0%, 48% {
        opacity: 1;
    }

    49%, 100% {
        opacity: 0.18;
    }
}

/* --------------------------------------------------------------------------
   Welcome / App Loading
   -------------------------------------------------------------------------- */

.app-loading-panel,
.welcome-panel {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: auto;
    padding: clamp(28px, 7vw, 64px) 0;
    text-align: center;
}

.app-loading-logo,
.wp-logo-wrap,
.intro-logo {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
}

.wp-logo {
    width: clamp(68px, 12vw, 92px);
    height: clamp(68px, 12vw, 92px);
    object-fit: contain;
}

.welcome-panel h1,
.wp-title {
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 7vw, 4rem);
    line-height: 1;
    font-weight: 850;
    letter-spacing: -0.065em;
}

.welcome-panel p {
    max-width: 44rem;
    color: var(--text-muted);
    font-size: clamp(1rem, 2vw, 1.12rem);
}

.app-loading-bar {
    width: min(220px, 60vw);
    height: 4px;
    overflow: hidden;
    border-radius: var(--r-pill);
    background: var(--surface-2);
}

    .app-loading-bar span {
        display: block;
        width: 40%;
        height: 100%;
        border-radius: inherit;
        background: var(--accent);
        animation: appLoadingSlide 1.2s ease-in-out infinite;
    }

.app-loading-status {
    min-height: 1.1em;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
}

@keyframes appLoadingSlide {
    from {
        transform: translateX(-120%);
    }

    to {
        transform: translateX(420%);
    }
}

.chat-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: blur(3px);
}

.heldi-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
}

.heldi-orbit,
.spinner {
    width: 38px;
    height: 38px;
    border: 3px solid var(--surface-3);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* --------------------------------------------------------------------------
   Prompt Suggestions
   -------------------------------------------------------------------------- */

.prompt-suggestions {
    width: min(100%, 920px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 10px;
    margin-top: 26px;
}

.prompt-suggestion {
    position: relative;
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface-1);
    color: var(--text);
    text-align: left;
    box-shadow: none;
}

    .prompt-suggestion:hover {
        background: var(--surface-2);
        border-color: var(--border-strong);
        transform: translateY(-1px);
    }

.ps-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 10px;
    background: var(--surface-2);
    font-size: 1.05rem;
}

.ps-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ps-label {
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 750;
}

.ps-text {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prompt-suggestion.prompt-add {
    border-style: dashed;
    background: transparent;
}

.prompt-custom .ps-del {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-muted);
    opacity: 0;
}

.prompt-custom:hover .ps-del {
    opacity: 1;
}

.prompt-custom .ps-del:hover {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger);
}

/* --------------------------------------------------------------------------
   Composer
   -------------------------------------------------------------------------- */

.composer {
    position: sticky;
    bottom: 0;
    z-index: 30;
    padding: var(--composer-pad);
    padding-bottom: calc(var(--composer-pad) + env(safe-area-inset-bottom));
    border-top: none;
    background: linear-gradient(to top, var(--bg) 76%, transparent);
}

.composer-inner {
    width: 100%;
    max-width: var(--maxw);
    min-height: 58px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin: 0 auto;
    padding: 7px;
    padding-left: 12px;
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    background: var(--surface-1);
    box-shadow: var(--shadow-md);
}

    .composer-inner:focus-within {
        border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong));
    }

#input {
    min-height: 38px;
    max-height: min(180px, 34dvh);
    flex: 1;
    resize: none;
    padding: 7px 2px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font-size: 16px;
    line-height: 1.5;
}

    #input::placeholder {
        color: var(--text-faint);
    }

.disclaimer {
    margin-top: 9px;
    padding-inline: 12px;
    color: var(--text-faint);
    font-size: 11px;
    text-align: center;
}

    .disclaimer a {
        color: var(--text-muted);
        text-decoration: underline;
        text-decoration-color: var(--border-strong);
    }

/* --------------------------------------------------------------------------
   Attachments / Cards
   -------------------------------------------------------------------------- */

.attachment-bar {
    width: 100%;
    max-width: var(--maxw);
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 auto 4px;
    padding-inline: 4px;
}

.attachment-chip {
    max-width: 240px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 11px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-1);
    font-size: 0.82rem;
}

.att-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.att-remove {
    border: none;
    background: transparent;
    color: var(--text-muted);
}

    .att-remove:hover {
        color: var(--text);
    }

.bubble-attachment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.12);
    font-size: 0.8rem;
    font-weight: 650;
}

.bot-attachments {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.bot-attachment,
.file-card,
.document-form-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-1);
    box-shadow: none;
}

.bot-attachment {
    max-width: 320px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
}

.file-card {
    width: min(100%, 620px);
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
    padding: 11px 12px;
    color: inherit;
    text-decoration: none;
}

    .file-card:hover,
    .document-form-card:hover {
        background: var(--surface-2);
        border-color: var(--border-strong);
    }

.file-card-badge {
    min-width: 46px;
    flex: 0 0 auto;
    padding: 10px 6px;
    border-radius: 11px;
    background: #6b7280;
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    text-align: center;
}

.ft-pdf .file-card-badge {
    background: #d93025;
}

.ft-word .file-card-badge {
    background: #185abd;
}

.ft-excel .file-card-badge {
    background: #107c41;
}

.ft-ppt .file-card-badge {
    background: #c43e1c;
}

.ft-img .file-card-badge {
    background: #8e44ad;
}

.ft-zip .file-card-badge {
    background: #b7791f;
}

.ft-mail .file-card-badge {
    background: #0078d4;
}

.ft-note .file-card-badge {
    background: #7719aa;
}

.ft-txt .file-card-badge {
    background: #4b5563;
}

.file-card-thumb {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border-radius: 10px;
    object-fit: cover;
    background: var(--surface-3);
}

.file-card-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.file-card-name {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-card-source {
    color: var(--text-muted);
    font-size: 12px;
}

.file-card-open {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    margin-left: auto;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Document Forms / Approvals
   -------------------------------------------------------------------------- */

.document-form-card {
    width: min(100%, 620px);
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 10px;
    padding: 14px;
}

.document-form-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 13px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 1.25rem;
}

.document-form-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.document-form-title {
    color: var(--text);
    font-weight: 750;
}

.document-form-sub {
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.document-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 9px;
}

.document-form-btn,
.approval-btn {
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 750;
}

    .document-form-btn:hover,
    .approval-btn:hover:not(:disabled) {
        background: var(--surface-3);
    }

.approval-box {
    width: min(100%, 620px);
    margin-top: 10px;
    padding: 14px;
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    background: var(--surface-1);
}

.approval-card {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: transparent;
}

.approval-sentence {
    margin-bottom: 10px;
    line-height: 1.5;
}

.approval-summary,
.approval-sublist {
    display: grid;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.84rem;
}

.approval-btn.approve {
    background: var(--accent);
    color: var(--accent-contrast);
}

.approval-btn.reject {
    border-color: rgba(239, 68, 68, 0.28);
    background: transparent;
    color: var(--danger);
}

/* --------------------------------------------------------------------------
   Quick Replies / Notes
   -------------------------------------------------------------------------- */

.quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.quick-reply {
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface-1);
    color: var(--text-muted);
    font-weight: 650;
}

    .quick-reply:hover {
        background: var(--surface-2);
        color: var(--text);
    }

.info-note {
    align-self: center;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface-1);
    color: var(--text-muted);
    font-size: 0.82rem;
}

/* --------------------------------------------------------------------------
   Image Generation / Bot Images
   -------------------------------------------------------------------------- */

.bubble.imagegen-bubble {
    width: auto;
    padding: 0;
    border: none;
    background: transparent;
}

.imagegen-loader {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.imagegen-canvas {
    position: relative;
    width: min(240px, 60vw);
    overflow: hidden;
    aspect-ratio: 1;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb), 0.34), transparent 38%), radial-gradient(circle at 70% 60%, rgba(99, 102, 241, 0.26), transparent 42%), var(--surface-2);
}

    .imagegen-canvas::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.16) 50%, transparent 75%);
        transform: translateX(-100%);
        animation: imageSweep 1.7s ease-in-out infinite;
    }

.imagegen-sparkle {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    font-size: 2rem;
}

.imagegen-caption {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.bot-image {
    display: block;
    max-width: min(280px, 72vw);
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 16px;
    cursor: zoom-in;
}

.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.86);
    cursor: zoom-out;
}

    .image-lightbox img {
        max-width: min(92vw, 1024px);
        max-height: 90vh;
        border-radius: 18px;
        box-shadow: var(--shadow-lg);
    }

@keyframes imageSweep {
    to {
        transform: translateX(100%);
    }
}

/* --------------------------------------------------------------------------
   Speech Status
   -------------------------------------------------------------------------- */

.speech-status {
    width: min(var(--maxw), calc(100vw - 20px));
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px auto 0;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface-1);
}

.speech-orb {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--surface-2);
}

    .speech-orb span {
        width: 4px;
        height: 12px;
        border-radius: var(--r-pill);
        background: var(--accent);
        animation: speechBars 0.8s ease-in-out infinite;
    }

        .speech-orb span:nth-child(2) {
            animation-delay: 0.12s;
        }

        .speech-orb span:nth-child(3) {
            animation-delay: 0.24s;
        }

.speech-status-title {
    font-weight: 750;
    font-size: 0.9rem;
}

.speech-status-text {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.speech-status.error {
    border-color: rgba(239, 68, 68, 0.38);
}

    .speech-status.error .speech-orb span {
        background: var(--danger);
        animation: none;
    }

@keyframes speechBars {
    0%, 100% {
        height: 9px;
        opacity: 0.55;
    }

    50% {
        height: 22px;
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------
   Generic Modals
   -------------------------------------------------------------------------- */

.admin-modal,
.terms-modal,
.prompt-modal,
.heldi-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 24px);
    background: rgba(0, 0, 0, 0.56);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.admin-dialog,
.terms-dialog,
.prompt-dialog,
.heldi-approval {
    width: min(100%, 900px);
    max-height: min(90vh, 900px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--surface-1);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}

.admin-dialog {
    width: min(1100px, 96vw);
    height: min(820px, 92vh);
}

.terms-dialog {
    width: min(880px, 96vw);
}

.prompt-dialog {
    width: min(560px, 100%);
}

.admin-header,
.terms-header,
.prompt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.terms-header {
    justify-content: flex-start;
}

    .admin-header h2,
    .terms-header h2,
    .prompt-header h2 {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 800;
    }

.terms-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.admin-readonly {
    margin-left: 8px;
    padding: 3px 8px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}

.admin-close,
.prompt-close {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
}

    .admin-close:hover,
    .prompt-close:hover {
        background: var(--surface-2);
        color: var(--text);
    }

/* --------------------------------------------------------------------------
   Admin
   -------------------------------------------------------------------------- */

.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px 20px 0;
}

.admin-tab {
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
}

    .admin-tab:hover,
    .admin-tab.active {
        background: var(--surface-2);
        border-color: var(--border-strong);
        color: var(--text);
    }

.admin-body {
    flex: 1;
    overflow: auto;
    padding: 16px 20px 20px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .admin-table th,
    .admin-table td {
        padding: 9px 11px;
        border-bottom: 1px solid var(--border);
        text-align: left;
        vertical-align: top;
        white-space: nowrap;
    }

    .admin-table th {
        position: sticky;
        top: 0;
        background: var(--surface-1);
        color: var(--text-muted);
        font-weight: 750;
    }

    .admin-table td.wrap {
        max-width: 360px;
        white-space: normal;
        word-break: break-word;
    }

.admin-user {
    color: var(--accent);
}

.admin-empty,
.admin-error {
    padding: 24px;
    color: var(--text-muted);
    text-align: center;
}

.admin-error {
    color: var(--danger);
}

/* --------------------------------------------------------------------------
   Terms
   -------------------------------------------------------------------------- */

.terms-body {
    flex: 1;
    overflow-y: auto;
    padding: clamp(16px, 3vw, 26px);
    color: var(--text);
    font-size: clamp(0.95rem, 1.8vw, 1rem);
    line-height: 1.65;
}

    .terms-body ul {
        margin: 12px 0 12px 22px;
    }

    .terms-body a {
        color: var(--accent);
    }

.terms-version {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.terms-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    cursor: pointer;
}

    .terms-check input {
        width: 18px;
        height: 18px;
        margin-top: 4px;
        accent-color: var(--accent);
    }

.terms-error {
    margin-top: 12px;
    color: var(--danger);
    font-size: 0.9rem;
}

.terms-actions,
.prompt-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--border);
    background: var(--surface-1);
}

.terms-accept-btn {
    min-height: 44px;
    padding: 10px 22px;
    border-radius: var(--r-pill);
}

/* --------------------------------------------------------------------------
   Prompt Modal
   -------------------------------------------------------------------------- */

.prompt-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    padding: 16px 20px;
}

.prompt-intro {
    color: var(--text-muted);
    font-size: 0.86rem;
}

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

    .prompt-field > span {
        color: var(--text-muted);
        font-size: 0.8rem;
    }

    .prompt-field input,
    .prompt-field textarea {
        width: 100%;
        resize: vertical;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 13px;
        outline: none;
        background: var(--surface-2);
        color: var(--text);
    }

        .prompt-field input:focus,
        .prompt-field textarea:focus {
            border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
        }

.emoji-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.emoji-pick {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    font-size: 1.05rem;
}

    .emoji-pick:hover,
    .emoji-pick.active {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
    }

.prompt-gen-btn {
    align-self: flex-start;
    padding: 9px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--text);
    font-weight: 700;
}

    .prompt-gen-btn:hover {
        border-color: var(--accent);
    }

    .prompt-gen-btn.loading {
        opacity: 0.6;
        pointer-events: none;
    }

        .prompt-gen-btn.loading::after {
            content: " …";
        }

.prompt-error {
    color: var(--danger);
    font-size: 0.82rem;
}

.prompt-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 12px;
    font-weight: 750;
}

    .prompt-btn.ghost {
        background: var(--surface-2);
        color: var(--text);
    }

/* --------------------------------------------------------------------------
   Heldi Approval Modal / Meta Extensions
   -------------------------------------------------------------------------- */

.heldi-modal-overlay {
    z-index: 9999;
}

.heldi-approval {
    width: min(520px, 100%);
    max-height: 88vh;
    overflow: auto;
}

.heldi-approval__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 12px;
}

.heldi-approval__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--accent);
    font-size: 20px;
}

.heldi-approval__title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
}

.heldi-approval__intro {
    margin: 0 20px 6px;
    color: var(--text-muted);
    font-size: 13px;
}

.heldi-action {
    overflow: hidden;
    margin: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.heldi-action__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.heldi-action__name {
    flex: 1;
    font-weight: 750;
    font-size: 14px;
}

.heldi-action__summary {
    padding: 8px 14px 2px;
    color: var(--text);
    font-size: 13px;
}

.heldi-action__details {
    display: grid;
    gap: 6px;
    margin: 6px 0 10px;
    padding: 0 14px;
}

.heldi-kv {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px;
    font-size: 13px;
}

.heldi-kv__k {
    color: var(--text-muted);
}

.heldi-kv__v {
    white-space: pre-wrap;
    word-break: break-word;
}

.heldi-badge {
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.heldi-badge--normal {
    background: rgba(34, 197, 94, 0.14);
    color: var(--success);
}

.heldi-badge--elevated {
    background: rgba(var(--accent-rgb), 0.16);
    color: var(--accent);
}

.heldi-badge--destructive {
    background: rgba(239, 68, 68, 0.14);
    color: var(--danger);
}

.heldi-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

    .heldi-toggle input {
        display: none;
    }

.heldi-toggle__track {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
}

    .heldi-toggle__track::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #fff;
        transition: transform var(--t-fast);
    }

.heldi-toggle input:checked + .heldi-toggle__track {
    background: var(--accent);
}

    .heldi-toggle input:checked + .heldi-toggle__track::after {
        transform: translateX(16px);
    }

.heldi-approval__foot {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface-1);
}

.heldi-btn {
    padding: 10px 16px;
    border: 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 750;
}

.heldi-btn--ghost {
    background: var(--surface-2);
    color: var(--text);
}

.heldi-btn--primary {
    background: var(--accent);
    color: var(--accent-contrast);
}

.heldi-btn--danger {
    background: var(--danger);
    color: #fff;
}

.heldi-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 2px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
}

.heldi-meta__src {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface-1);
    color: var(--text-muted);
    text-decoration: none;
}

    .heldi-meta__src:hover {
        border-color: var(--accent);
        color: var(--text);
    }

.heldi-meta__spacer {
    flex: 1 1 auto;
}

.heldi-meta__info {
    position: relative;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: help;
}

.heldi-meta__tip {
    position: absolute;
    right: 0;
    bottom: 26px;
    z-index: 50;
    display: none;
    padding: 8px 10px;
    border-radius: 8px;
    background: #111;
    color: #fff;
    white-space: nowrap;
    font-size: 12px;
}

.heldi-meta__info:hover .heldi-meta__tip {
    display: block;
}

.heldi-fb {
    display: inline-flex;
    gap: 4px;
}

.heldi-fb__btn {
    width: 28px;
    height: 26px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
}

    .heldi-fb__btn:hover,
    .heldi-fb__btn.is-active {
        border-color: var(--accent);
        color: var(--text);
    }

/* --------------------------------------------------------------------------
   Tool Health Banner
   -------------------------------------------------------------------------- */

#heldi-toolhealth-banner {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #b3261e;
    color: #fff;
    font: 600 14px/1.4 var(--font);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
}

    #heldi-toolhealth-banner .heldi-toolhealth-msg {
        flex: 1 1 auto;
    }

    #heldi-toolhealth-banner .heldi-toolhealth-close {
        flex: 0 0 auto;
        padding: 0 4px;
        border: 0;
        background: transparent;
        color: #fff;
        font-size: 22px;
        line-height: 1;
        opacity: 0.85;
    }

        #heldi-toolhealth-banner .heldi-toolhealth-close:hover {
            opacity: 1;
        }

body.heldi-toolhealth-active {
    padding-top: 44px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 920px) {
    :root {
        --maxw: min(980px, calc(100vw - 32px));
    }

    .topbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .topbar-right {
        justify-content: flex-start;
        padding-bottom: 2px;
    }

    .msg.user .bubble,
    .msg.bot .bubble {
        max-width: 100%;
    }

    .budget-bar {
        width: 70px;
    }

    .user-name {
        max-width: 120px;
    }
}

@media (max-width: 640px) {
    :root {
        --topbar-height: auto;
        --maxw: calc(100vw - 20px);
        --chat-pad-x: 10px;
        --chat-pad-y: 14px;
        --composer-pad: 9px;
    }

    .app {
        background: var(--bg);
    }

    .topbar {
        gap: 8px;
        padding: 8px 10px;
    }

    .topbar-left {
        gap: 8px;
    }

    .topbar-right {
        flex-wrap: nowrap;
        gap: 6px;
    }

    .brand span:first-of-type {
        max-width: 42vw;
    }

    .brand-logo {
        width: 30px;
        height: 30px;
    }

    .app-version {
        display: none;
    }

    .icon-btn,
    .admin-btn,
    .icon-action,
    .attach-btn,
    .mic-btn,
    .send-btn {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .model-selector {
        height: 38px;
        flex-shrink: 0;
    }

    .model-btn {
        height: 30px;
        padding: 0 10px;
        font-size: 11px;
    }

    .budget-bar {
        display: none;
    }

    .budget-label {
        padding: 5px 8px;
        border: 1px solid var(--border);
        border-radius: var(--r-pill);
        background: var(--surface-1);
        font-size: 11px;
    }

    .user-name {
        display: none;
    }

    .user-info {
        padding: 0;
    }

    .chat {
        gap: 13px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .msg .bubble {
        padding: 12px 13px;
        border-radius: 17px;
        font-size: 0.95rem;
        line-height: 1.55;
    }

    .msg.bot .bubble {
        padding: 0;
    }

    .welcome-panel,
    .app-loading-panel {
        padding: 34px 0 24px;
        gap: 13px;
    }

    .wp-logo {
        width: 70px;
        height: 70px;
    }

    .welcome-panel h1,
    .wp-title {
        font-size: clamp(2.05rem, 11vw, 3rem);
    }

    .prompt-suggestions {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 18px;
    }

    .prompt-suggestion {
        min-height: 66px;
        padding: 12px;
        border-radius: 16px;
    }

    .ps-text {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .composer {
        padding-top: 8px;
        background: linear-gradient(to top, var(--bg) 82%, transparent);
    }

    .composer-inner {
        min-height: 54px;
        gap: 4px;
        padding: 6px;
        padding-left: 10px;
        border-radius: 18px;
    }

    #input {
        max-height: 30dvh;
        padding: 7px 0;
    }

    .disclaimer {
        margin-top: 7px;
        font-size: 10.5px;
        line-height: 1.35;
    }

    .attachment-bar {
        padding-inline: 10px;
    }

    .file-card {
        gap: 10px;
        padding: 10px;
        border-radius: 15px;
    }

    .file-card-badge {
        min-width: 42px;
        padding: 9px 5px;
        font-size: 10px;
    }

    .file-card-open {
        display: none;
    }

    .document-form-card {
        width: 100%;
        padding: 12px;
        border-radius: 16px;
    }

    .document-form-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .document-form-btn {
        width: 100%;
        min-height: 42px;
    }

    .speech-status {
        margin-inline: 10px;
        border-radius: 16px;
    }

    .sidebar {
        width: min(90vw, 340px);
    }

    .admin-modal,
    .terms-modal,
    .prompt-modal,
    .heldi-modal-overlay {
        align-items: stretch;
        padding: 0;
    }

    .admin-dialog,
    .terms-dialog,
    .prompt-dialog,
    .heldi-approval {
        width: 100%;
        height: 100dvh;
        max-height: none;
        border-right: none;
        border-left: none;
        border-radius: 0;
    }

    .admin-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .admin-tab {
        white-space: nowrap;
    }

    .admin-table {
        min-width: 760px;
    }
}

@media (max-width: 380px) {
    .brand span:first-of-type {
        display: none;
    }

    .topbar-right {
        gap: 5px;
    }

    .icon-btn,
    .admin-btn,
    .icon-action,
    .attach-btn,
    .mic-btn,
    .send-btn {
        width: 38px;
        height: 38px;
    }

    .model-btn {
        padding-inline: 8px;
    }

    .composer-inner {
        padding-left: 8px;
    }

    .disclaimer {
        display: none;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .topbar {
        position: relative;
    }

    .welcome-panel {
        padding-block: 14px;
    }

    .wp-logo {
        width: 56px;
        height: 56px;
    }

    .prompt-suggestions {
        margin-top: 10px;
    }

    #input {
        max-height: 24dvh;
    }
}

/* --------------------------------------------------------------------------
   Touch / Accessibility
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
    button,
    .prompt-suggestion,
    .quick-reply,
    .file-card,
    .document-form-btn {
        min-height: 44px;
    }
}

@media (hover: none) {
    .prompt-suggestion:hover,
    .file-card:hover,
    .quick-reply:hover,
    .send-btn:hover:not(:disabled) {
        transform: none;
    }

    .chat-item-actions {
        display: inline-flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}
.answer-now-btn {
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--text);
    font-weight: 750;
}

    .answer-now-btn:hover:not(:disabled) {
        border-color: var(--accent);
        background: var(--surface-3);
    }

.answer-now-btn {
    align-self: flex-start;
    margin: 8px 0 0 0;
    padding: 7px 11px;
    border: 1px solid var(--border, rgba(255,255,255,.16));
    border-radius: 999px;
    background: var(--surface-2, rgba(255,255,255,.08));
    color: var(--text, inherit);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

    .answer-now-btn:hover:not(:disabled) {
        border-color: var(--accent, #6aa8ff);
        background: var(--surface-3, rgba(255,255,255,.12));
    }

    .answer-now-btn:disabled {
        opacity: .65;
        cursor: default;
    }

    .answer-now-btn.answer-now-inline {
        display: inline-flex;
        width: fit-content;
        margin-left: 52px;
    }

/* Sofort antworten rechts beim Bot-Loader */
.msg.bot.has-answer-now {
    display: grid;
    grid-template-columns: minmax(0, auto) max-content;
    align-items: center;
    column-gap: 10px;
}

.answer-now-btn.answer-now-inline {
    justify-self: end;
    align-self: center;
    width: fit-content;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--border, rgba(255,255,255,.16));
    border-radius: 999px;
    background: var(--surface-2, rgba(255,255,255,.08));
    color: var(--text, inherit);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

    .answer-now-btn.answer-now-inline:hover:not(:disabled) {
        border-color: var(--accent, #6aa8ff);
        background: var(--surface-3, rgba(255,255,255,.12));
    }

    .answer-now-btn.answer-now-inline:disabled {
        opacity: .65;
        cursor: default;
    }

/* Dateikarten: Titel, Beschreibung, Quelle */
.file-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.file-card-name {
    font-weight: 800;
}

.file-card-description {
    font-size: 13px;
    opacity: .88;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-card-source,
.file-card-path {
    font-size: 12px;
    opacity: .66;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Send-Button Icon exakt mittig */
.send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .send-btn svg {
        display: block;
        width: 20px;
        height: 20px;
        margin: 0;
    }
/* ==========================================================================
   Compact polish: Chat, Dateikarten, Sofort antworten, Mobile
   ========================================================================== */

/* Bot-Loader + Sofort antworten rechts */
.msg.bot.has-answer-now {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
}

    .msg.bot.has-answer-now .bubble {
        grid-column: 1;
        min-width: 0;
    }

.answer-now-btn,
.answer-now-btn.answer-now-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 30px;
    margin: 0;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
}

    .answer-now-btn.answer-now-inline {
        grid-column: 2;
        justify-self: end;
    }

    .answer-now-btn:hover:not(:disabled) {
        border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
        background: var(--surface-2);
        color: var(--text);
    }

    .answer-now-btn:disabled {
        opacity: .6;
    }

/* Kompakte Dateikarten */
.file-card {
    width: min(100%, 540px);
    min-height: 54px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-1) 94%, transparent);
    color: var(--text);
    text-decoration: none !important;
}

    .file-card:hover {
        border-color: var(--border-strong);
        background: var(--surface-2);
        transform: translateY(-1px);
    }

.file-card-badge {
    min-width: 38px;
    width: 38px;
    padding: 7px 4px;
    border-radius: 9px;
    font-size: 9.5px;
    font-weight: 850;
    line-height: 1;
}

.file-card-thumb {
    width: 38px;
    height: 38px;
    border-radius: 9px;
}

.file-card-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.file-card-name {
    overflow: hidden;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-card-description {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-card-source,
.file-card-path {
    overflow: hidden;
    color: var(--text-faint);
    font-size: 11px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-card-open {
    width: 24px;
    height: 24px;
    margin-left: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-faint);
    font-size: 14px;
}

.file-card:hover .file-card-open {
    background: var(--surface-3);
    color: var(--text);
}

/* Send-Pfeil optisch zentrieren */
.send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

    .send-btn svg {
        display: block;
        width: 20px;
        height: 20px;
        margin: 0;
        transform: translate(1.5px, 0.5px);
    }

/* Schlankere Chatabstände */
.chat {
    gap: 14px;
}

.msg .bubble {
    line-height: 1.55;
}

/* Mobile: Dateikarten noch kompakter */
@media (max-width: 640px) {
    .msg.bot.has-answer-now {
        grid-template-columns: 1fr;
        row-gap: 6px;
    }

    .answer-now-btn.answer-now-inline {
        grid-column: 1;
        justify-self: end;
        min-height: 28px;
        padding: 5px 9px;
        font-size: 11px;
    }

    .file-card {
        width: 100%;
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px;
        min-height: 50px;
        padding: 8px;
        border-radius: 13px;
    }

    .file-card-badge {
        width: 34px;
        min-width: 34px;
        padding: 7px 3px;
        font-size: 9px;
    }

    .file-card-open {
        display: none;
    }

    .file-card-name {
        font-size: 13px;
    }

    .file-card-description {
        font-size: 11.5px;
    }

    .file-card-source,
    .file-card-path {
        font-size: 10.5px;
    }
}
/* ==========================================================================
   Anpassungen: Chatbreite, Quick Replies, Prompt-Kacheln
   ========================================================================== */

/* Chatbereich immer 75% der Bildschirmbreite */
:root {
    --maxw: 75vw;
}

/* Quick Replies kleiner + Akzentfarbe */
.quick-reply {
    min-height: 30px;
    padding: 6px 11px;
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 12px;
    font-weight: 750;
}

    .quick-reply:hover {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 88%, #fff);
        color: var(--accent-contrast);
    }

/* Prompt-Vorschlag-Kacheln kompakter */
.prompt-suggestions {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 8px;
    margin-top: 18px;
}

.prompt-suggestion {
    min-height: 58px;
    gap: 9px;
    padding: 10px 11px;
    border-radius: 14px;
}

.ps-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 0.95rem;
}

.ps-label {
    font-size: 0.7rem;
}

.ps-text {
    font-size: 0.78rem;
}

@media (max-width: 640px) {
    :root {
        --maxw: 75vw;
    }

    .prompt-suggestion {
        min-height: 54px;
        padding: 9px 10px;
    }
}
/* ==========================================================================
   Welcome-Titel kompakter + moderner
   ========================================================================== */

.welcome-panel h1,
.wp-title {
    font-family: Inter, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    font-size: clamp(1.75rem, 5.2vw, 3.15rem);
    font-weight: 780;
    line-height: 1.04;
    letter-spacing: -0.055em;
}

.welcome-panel p {
    max-width: 38rem;
    font-size: clamp(0.92rem, 1.5vw, 1.02rem);
    line-height: 1.55;
}

.wp-logo,
.intro-logo {
    width: clamp(58px, 9vw, 78px);
    height: clamp(58px, 9vw, 78px);
}

@media (max-width: 640px) {
    .welcome-panel h1,
    .wp-title {
        font-size: clamp(1.7rem, 9vw, 2.45rem);
        letter-spacing: -0.05em;
    }

    .welcome-panel p {
        font-size: 0.92rem;
    }
}
/* ==========================================================================
   Feinschliff: Quick Replies minimalistisch, Prompt-Kacheln etwas größer
   ========================================================================== */

/* Quick Replies: nur dünner Akzent-Rahmen, sonst ruhig */
.quick-reply {
    min-height: 30px;
    padding: 6px 11px;
    border: 1px solid color-mix(in srgb, var(--accent) 72%, transparent);
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    box-shadow: none;
}

    .quick-reply:hover {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 8%, transparent);
        color: var(--text);
        transform: none;
    }

/* Prompt-Vorschläge: minimal größer, dafür weniger pro Reihe */
.prompt-suggestions {
    width: min(100%, 860px);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 10px;
    margin-top: 20px;
}

.prompt-suggestion {
    min-height: 68px;
    gap: 11px;
    padding: 12px 13px;
    border-radius: 16px;
}

.ps-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 1rem;
}

.ps-label {
    font-size: 0.74rem;
}

.ps-text {
    font-size: 0.82rem;
}

@media (max-width: 640px) {
    .prompt-suggestions {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .prompt-suggestion {
        min-height: 62px;
        padding: 11px 12px;
    }
}
/* ==========================================================================
   Minimal Approval Cards
   ========================================================================== */

.approval-box {
    width: min(100%, 560px);
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: color-mix(in srgb, var(--surface-1) 96%, transparent);
    box-shadow: none;
}

.approval-box-head {
    padding: 4px 4px 2px;
}

.approval-box-title {
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.approval-box-sub {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.approval-card {
    display: grid;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-2);
}

    .approval-card.risk-destructive {
        border-color: rgba(239, 68, 68, 0.35);
    }

    .approval-card.risk-elevated {
        border-color: rgba(var(--accent-rgb), 0.35);
    }

.approval-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.approval-card-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    background: var(--surface-3);
    font-size: 1.05rem;
}

.approval-card-main {
    min-width: 0;
}

.approval-card-title {
    overflow: hidden;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.approval-card-service {
    margin-top: 1px;
    color: var(--text-faint);
    font-size: 0.74rem;
    font-weight: 650;
}

.approval-card-summary {
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.approval-card-details {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 5px 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
}

    .approval-card-details dt {
        color: var(--text-faint);
        font-weight: 700;
    }

    .approval-card-details dd {
        min-width: 0;
        color: var(--text-muted);
        overflow-wrap: anywhere;
    }

.approval-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 2px;
}

.approval-btn {
    min-height: 36px;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
}

    .approval-btn.reject {
        border: 1px solid var(--border);
        background: transparent;
        color: var(--text-muted);
    }

        .approval-btn.reject:hover:not(:disabled) {
            background: var(--surface-3);
            color: var(--text);
        }

    .approval-btn.approve {
        border: 1px solid transparent;
        background: var(--accent);
        color: var(--accent-contrast);
    }

        .approval-btn.approve:hover:not(:disabled) {
            filter: brightness(1.03);
            transform: none;
        }

@media (max-width: 640px) {
    .approval-box {
        width: 100%;
        padding: 8px;
        border-radius: 18px;
    }

    .approval-card {
        padding: 12px;
        border-radius: 15px;
    }

    .approval-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .approval-btn {
        width: 100%;
    }
}
/* Dual-Identity rechts oben: Cloud (Entra) + Windows (Kerberos) gestapelt */
.user-identities {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    line-height: 1.2;
}

.user-win-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    opacity: 0.75;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 1px 8px;
}

    .user-win-name.win-kerberos {
        color: #4caf7d; /* grün = Kerberos, Delegation möglich */
        opacity: 1;
    }

.win-badge {
    font-size: 0.8em;
}
.meta-sources {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.meta-source {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--text-faint);
    font-size: 0.75rem;
    line-height: 1.2;
    text-decoration: none;
}

    .meta-source:hover {
        border-color: var(--accent);
        color: var(--text);
    }

    .meta-source sup {
        color: var(--accent);
        font-size: 0.72em;
        font-weight: 800;
    }
.meta-sources-row {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 5px 7px;
    margin-top: -4px;
    color: var(--text-faint);
    font-size: 0.76rem;
}

.meta-source {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--text-faint);
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}

    .meta-source:hover {
        border-color: var(--accent);
        color: var(--text);
    }

    .meta-source sup {
        color: var(--accent);
        font-size: 0.72em;
        font-weight: 850;
    }

@media (max-width: 640px) {
    .meta-sources-row {
        grid-template-columns: repeat(2, max-content);
    }
}

@media (max-width: 420px) {
    .meta-sources-row {
        grid-template-columns: 1fr;
    }
}
.meta-sources-row {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 5px 7px;
    margin-top: -3px;
    color: var(--text-faint);
    font-size: 0.76rem;
}

.meta-source {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    max-width: 260px;
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--text-faint);
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}

    .meta-source:hover {
        border-color: var(--accent);
        color: var(--text);
    }

    .meta-source sup {
        flex: 0 0 auto;
        color: var(--accent);
        font-size: 0.72em;
        font-weight: 850;
    }

@media (max-width: 640px) {
    .meta-sources-row {
        grid-template-columns: repeat(2, max-content);
    }
}

@media (max-width: 420px) {
    .meta-sources-row {
        grid-template-columns: 1fr;
    }

    .meta-source {
        max-width: 100%;
    }
}
.meta-sources-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.meta-source-inline {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    color: var(--text-faint);
    cursor: help;
    line-height: 1;
}

    .meta-source-inline:hover {
        color: var(--text);
    }

    .meta-source-inline sup {
        color: var(--accent);
        font-size: 0.68em;
        font-weight: 850;
        margin-right: 1px;
    }
/* ==========================================================================
   UI Refresh 2026: moderner, ruhiger, responsiv für Phone / Tablet / Desktop
   ========================================================================== */

:root {
    --maxw: clamp(340px, 76vw, 1080px);
    --topbar-blur-bg: color-mix(in srgb, var(--bg) 78%, transparent);
    --glass-surface: color-mix(in srgb, var(--surface-1) 88%, transparent);
    --soft-highlight: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Grundlayout */
body {
    min-height: 100dvh;
    background: radial-gradient(circle at 20% -10%, rgba(var(--accent-rgb), 0.11), transparent 32rem), radial-gradient(circle at 90% 10%, rgba(99, 102, 241, 0.08), transparent 28rem), var(--bg);
}

.app {
    background: transparent;
}

.main {
    overflow: hidden;
}

/* Topbar moderner */
.topbar {
    min-height: 66px;
    padding: 12px clamp(14px, 3vw, 34px);
    background: var(--topbar-blur-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025);
}

.brand {
    gap: 12px;
}

.brand-logo {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    filter: drop-shadow(0 8px 20px rgba(var(--accent-rgb), 0.14));
}

.app-version {
    background: var(--glass-surface);
}

/* Buttons weicher */
.icon-btn,
.admin-btn,
.icon-action,
.attach-btn,
.mic-btn,
.send-btn,
.model-selector,
.user-info {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.icon-btn,
.admin-btn,
.icon-action,
.attach-btn,
.mic-btn {
    border-color: var(--border);
    background: color-mix(in srgb, var(--surface-1) 70%, transparent);
}

    .icon-btn:hover,
    .admin-btn:hover,
    .icon-action:hover,
    .attach-btn:hover,
    .mic-btn:hover {
        border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
        background: color-mix(in srgb, var(--surface-2) 86%, var(--soft-highlight));
    }

.send-btn {
    border-radius: 15px;
    box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.22);
}

/* Chatbreite passend je Gerät */
.chat,
.composer-inner,
.attachment-bar {
    max-width: var(--maxw);
}

.chat {
    gap: clamp(14px, 2vw, 20px);
    padding-top: clamp(18px, 3.5vh, 42px);
    padding-bottom: clamp(18px, 3vh, 34px);
}

/* Nachrichten optisch hochwertiger */
.msg.user .bubble {
    max-width: min(76%, 680px);
    border-radius: 20px 20px 7px 20px;
    box-shadow: 0 10px 26px rgba(var(--accent-rgb), 0.16);
}

.msg.bot {
    gap: 8px;
}

    .msg.bot .bubble {
        max-width: 100%;
        color: var(--text);
    }

.bubble code {
    border: 1px solid var(--border);
}

/* Composer moderner */
.composer {
    padding-top: 12px;
    background: linear-gradient(to top, var(--bg) 72%, color-mix(in srgb, var(--bg) 72%, transparent) 88%, transparent);
}

.composer-inner {
    min-height: 62px;
    gap: 8px;
    padding: 8px;
    padding-left: 14px;
    border-radius: 24px;
    background: var(--glass-surface);
    border-color: color-mix(in srgb, var(--border-strong) 82%, transparent);
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

    .composer-inner:focus-within {
        border-color: color-mix(in srgb, var(--accent) 70%, var(--border-strong));
        box-shadow: 0 18px 58px rgba(0, 0, 0, 0.28), 0 0 0 3px rgba(var(--accent-rgb), 0.12);
    }

#input {
    font-size: 16px;
}

/* Welcome-Bereich */
.welcome-panel,
.app-loading-panel {
    max-width: min(920px, calc(100vw - 28px));
}

    .welcome-panel h1,
    .wp-title {
        background: linear-gradient(135deg, var(--text), color-mix(in srgb, var(--accent) 65%, var(--text)));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .welcome-panel p {
        color: var(--text-muted);
    }

/* Prompt-Kacheln moderner */
.prompt-suggestions {
    width: min(100%, 920px);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 12px;
}

.prompt-suggestion {
    min-height: 76px;
    border-radius: 20px;
    background: var(--glass-surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

    .prompt-suggestion:hover {
        border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
        background: color-mix(in srgb, var(--surface-2) 88%, var(--soft-highlight));
        transform: translateY(-2px);
    }

.ps-icon {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
}

/* Quick Replies */
.quick-replies {
    gap: 8px;
}

.quick-reply {
    min-height: 34px;
    padding: 7px 13px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-1) 82%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

    .quick-reply:hover {
        background: color-mix(in srgb, var(--accent) 11%, var(--surface-2));
    }

/* Dateikarten */
.file-card {
    width: min(100%, 620px);
    min-height: 62px;
    grid-template-columns: 42px minmax(0, 1fr) 28px;
    padding: 10px 12px;
    border-radius: 18px;
    background: var(--glass-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

    .file-card:hover {
        border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
        transform: translateY(-2px);
    }

.file-card-badge,
.file-card-thumb {
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 12px;
}

.file-card-name {
    font-size: 14px;
}

.file-card-description {
    font-size: 12.5px;
}

/* Modals */
.admin-dialog,
.terms-dialog,
.prompt-dialog,
.heldi-approval {
    border-radius: 28px;
    background: color-mix(in srgb, var(--surface-1) 96%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --maxw: calc(100vw - 40px);
    }

    .topbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .user-name {
        max-width: 110px;
    }

    .prompt-suggestions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Handy */
@media (max-width: 640px) {
    :root {
        --maxw: calc(100vw - 20px);
        --chat-pad-x: 10px;
        --chat-pad-y: 14px;
        --composer-pad: 8px;
    }

    body {
        background: var(--bg);
    }

    .topbar {
        position: sticky;
        grid-template-columns: 1fr;
        gap: 8px;
        min-height: auto;
        padding: 8px 10px;
    }

    .topbar-left {
        justify-content: space-between;
    }

    .topbar-right {
        justify-content: flex-start;
        gap: 6px;
        padding-bottom: 2px;
        overflow-x: auto;
    }

    .brand {
        font-size: 15px;
    }

    .brand-logo {
        width: 31px;
        height: 31px;
        border-radius: 10px;
    }

    .model-selector {
        flex: 0 0 auto;
    }

    .chat {
        gap: 13px;
        padding-inline: 10px;
    }

    .msg {
        gap: 9px;
    }

        .msg.user .bubble {
            max-width: 88%;
            border-radius: 18px 18px 6px 18px;
        }

        .msg .bubble {
            font-size: 0.95rem;
        }

    .composer {
        padding: 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }

    .composer-inner {
        min-height: 56px;
        border-radius: 20px;
        padding: 7px;
        padding-left: 11px;
    }

    .send-btn,
    .attach-btn,
    .mic-btn {
        width: 40px;
        height: 40px;
    }

    .prompt-suggestions {
        grid-template-columns: 1fr;
        gap: 9px;
        width: 100%;
    }

    .prompt-suggestion {
        min-height: 66px;
        border-radius: 17px;
    }

    .file-card {
        width: 100%;
        grid-template-columns: 38px minmax(0, 1fr);
        min-height: 56px;
        padding: 9px;
        border-radius: 16px;
    }

    .file-card-badge,
    .file-card-thumb {
        width: 38px;
        min-width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .file-card-open {
        display: none;
    }

    .admin-modal,
    .terms-modal,
    .prompt-modal,
    .heldi-modal-overlay {
        padding: 0;
    }

    .admin-dialog,
    .terms-dialog,
    .prompt-dialog,
    .heldi-approval {
        width: 100%;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
    }
}

/* Sehr kleine Displays */
@media (max-width: 380px) {
    .brand span:first-of-type {
        display: inline;
        max-width: 36vw;
    }

    .model-btn {
        padding-inline: 7px;
    }

    .budget-label {
        display: none;
    }

    .msg.user .bubble {
        max-width: 94%;
    }
}
/* ==========================================================================
   Feinschliff: weniger Weiß, moderne Headlines, dezente Chat-Scrollbar
   ========================================================================== */

:root {
    --text: #ecebe7;
    --text-heading: color-mix(in srgb, var(--text) 86%, var(--accent) 14%);
    --headline-panel: color-mix(in srgb, var(--surface-1) 70%, transparent);
    --headline-border: color-mix(in srgb, var(--accent) 42%, transparent);
}

/* Light Mode: ebenfalls weniger hartes Schwarz/Weiß */
@media (prefers-color-scheme: light) {
    :root {
        --text: #222222;
        --text-heading: color-mix(in srgb, #171717 82%, var(--accent) 18%);
        --headline-panel: color-mix(in srgb, #ffffff 82%, transparent);
        --headline-border: color-mix(in srgb, var(--accent) 46%, rgba(17, 24, 39, 0.12));
    }
}

/* Allgemein: Text etwas ruhiger */
body {
    color: var(--text);
}

.brand,
.document-form-title,
.approval-card-title,
.file-card-name,
.admin-header h2,
.terms-header h2,
.prompt-header h2 {
    color: var(--text-heading);
}

/* Welcome-Headline nicht mehr hart weiß/Gradient, sondern modern gerahmt */
.welcome-panel h1,
.wp-title {
    display: inline-block;
    width: fit-content;
    max-width: min(100%, 820px);
    padding: clamp(10px, 1.8vw, 18px) clamp(16px, 3vw, 30px);
    border: 1px solid var(--headline-border);
    border-radius: clamp(20px, 3vw, 32px);
    background: linear-gradient( 135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 44% ), var(--headline-panel);
    color: var(--text-heading);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    text-shadow: none;
}

/* HeldiGPT-Schriftzug oben: dezenter Akzent-Rahmen */
.brand span:first-of-type {
    padding: 5px 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);*/
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-1) 58%, transparent);
    color: var(--text-heading);
}

/* Weiß in Bot-Antworten leicht abmildern */
.msg.bot .bubble {
    color: color-mix(in srgb, var(--text) 90%, var(--text-muted) 10%);
}

.msg.user .bubble {
    color: color-mix(in srgb, var(--accent-contrast) 92%, #000 8%);
}

/* Chat-Scrollbar moderner und unauffälliger */
.chat {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 32%, transparent) transparent;
}

    .chat::-webkit-scrollbar {
        width: 10px;
    }

    .chat::-webkit-scrollbar-track {
        background: transparent;
    }

    .chat::-webkit-scrollbar-thumb {
        border: 3px solid transparent;
        border-radius: 999px;
        background: linear-gradient( 180deg, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--surface-3) 80%, transparent) ) padding-box;
    }

        .chat::-webkit-scrollbar-thumb:hover {
            background: linear-gradient( 180deg, color-mix(in srgb, var(--accent) 76%, transparent), color-mix(in srgb, var(--surface-3) 92%, transparent) ) padding-box;
        }

/* Auf Handy Headlines kompakter */
@media (max-width: 640px) {
    .welcome-panel h1,
    .wp-title {
        max-width: calc(100vw - 28px);
        padding: 10px 15px;
        border-radius: 20px;
    }

    .brand span:first-of-type {
        padding: 4px 8px;
    }

    .chat::-webkit-scrollbar {
        width: 6px;
    }
}
/* ==========================================================================
   Feinschliff: Überschriften ohne Rahmen
   ========================================================================== */

.welcome-panel h1,
.wp-title {
    display: block;
    width: auto;
    max-width: min(100%, 820px);
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--text-heading);
    -webkit-background-clip: initial;
    background-clip: initial;
}

/* Falls durch vorherige Regel ein fehlerhafter Rahmen am HeldiGPT-Schriftzug aktiv ist */
.brand span:first-of-type {
    border: none;
    background: transparent;
    padding: 0;
    color: var(--text-heading);
}

@media (max-width: 640px) {
    .welcome-panel h1,
    .wp-title {
        max-width: calc(100vw - 28px);
        padding: 0;
        border-radius: 0;
    }

    .brand span:first-of-type {
        padding: 0;
    }
}
.app-update-button {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 100001;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: 750;
    box-shadow: var(--shadow-lg);
}
/* ==========================================================================
   UI Overhaul 0.5.0 · Theme-Toggle, Safe-Areas, Motion & A11y Polish
   ========================================================================== */

/* ---------- Manuelles Theme (überschreibt prefers-color-scheme) ---------- */
html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #f7f7f8;
    --bg-soft: #ffffff;
    --surface-1: #ffffff;
    --surface-2: #f2f3f5;
    --surface-3: #e8eaee;
    --text: #171717;
    --text-muted: #60646c;
    --text-faint: #8b9099;
    --border: rgba(17, 24, 39, 0.09);
    --border-strong: rgba(17, 24, 39, 0.15);
    --shadow-md: 0 12px 34px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 24px 80px rgba(15, 23, 42, 0.14);
}

/* Dunkle Tokens explizit erzwingen, falls OS auf Light steht */
@media (prefers-color-scheme: light) {
    html[data-theme="dark"] {
        --bg: #0d0f12;
        --bg-soft: #111318;
        --surface-1: #151820;
        --surface-2: #1b1f29;
        --surface-3: #242936;
        --text: #f5f5f4;
        --text-muted: #a1a1aa;
        --text-faint: #71717a;
        --border: rgba(255, 255, 255, 0.08);
        --border-strong: rgba(255, 255, 255, 0.14);
        --shadow-md: 0 12px 34px rgba(0, 0, 0, 0.28);
        --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.44);
    }
}

/* Theme-Toggle: passendes Icon je Modus zeigen */
.theme-toggle .icon-moon {
    display: none;
}

.theme-toggle .icon-sun {
    display: block;
}

html[data-theme="light"] .theme-toggle .icon-sun {
    display: none;
}

html[data-theme="light"] .theme-toggle .icon-moon {
    display: block;
}

@media (prefers-color-scheme: light) {
    html:not([data-theme]) .theme-toggle .icon-sun {
        display: none;
    }

    html:not([data-theme]) .theme-toggle .icon-moon {
        display: block;
    }
}

/* ---------- SVG-Icon-Größen für neue Buttons ---------- */
.icon-btn svg,
.admin-btn svg,
.admin-close svg,
.prompt-close svg {
    width: 19px;
    height: 19px;
    display: block;
}

/* ---------- Safe-Areas (Mobil, Notch/Gesten-Leiste) ---------- */
.composer {
    padding-bottom: calc(var(--composer-pad) + env(safe-area-inset-bottom));
    padding-left: calc(var(--composer-pad) + env(safe-area-inset-left));
    padding-right: calc(var(--composer-pad) + env(safe-area-inset-right));
}

.topbar {
    padding-top: calc(10px + env(safe-area-inset-top));
}

.sidebar {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

/* ---------- Große Desktops: mehr Lesebreite nutzen ---------- */
@media (min-width: 1600px) {
    :root {
        --maxw: min(1040px, calc(100vw - 64px));
    }
}


/* ---------- Micro-Interactions: Nachrichten sanft einblenden ---------- */
@keyframes msg-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.msg {
    animation: msg-in 260ms var(--ease) both;
}

/* ---------- A11y: Fokus-Ringe systematisch ---------- */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---------- A11y: Reduced Motion respektieren ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* ==========================================================================
   Layout v3: keine Topbar · Sidebar volle Höhe · Standard ausgeklappt
   (sb-expanded), Hover/☰ temporär (sb-peek) · Rail nach Chatstart
   ========================================================================== */

.app {
    flex-direction: row;
}

.app-body {
    position: relative;
    display: flex;
    flex: 1;
    min-height: 0;
}

.main {
    height: 100dvh;
    min-height: 0;
}

:root {
    --sidebar-rail-w: 68px;
    --sidebar-w: 300px;
}

.sidebar-head {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 4px;
}

/* Brand im Footer (unter dem User) */
.sidebar-footer .brand {
    padding: 8px 6px 2px;
}

@media (min-width: 861px) {
    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        height: 100dvh;
        z-index: 60;
        width: var(--sidebar-rail-w);
        max-width: none;
        padding-left: 10px;
        padding-right: 10px;
        overflow: hidden;
        transform: none;
        box-shadow: none;
        transition: width var(--t-mid), box-shadow var(--t-mid), padding var(--t-mid);
    }

        .app:is(.sb-expanded, .sb-peek) .sidebar,
        .sidebar:hover {
            width: var(--sidebar-w);
            padding-left: 14px;
            padding-right: 14px;
        }

    /* Schatten nur beim temporären Überlagern */
    .app:not(.sb-expanded) .sidebar:hover,
    .app.sb-peek:not(.sb-expanded) .sidebar {
        box-shadow: var(--shadow-lg);
    }

    .sidebar .sb-label {
        opacity: 0;
        white-space: nowrap;
        transition: opacity var(--t-fast);
    }

    .app:is(.sb-expanded, .sb-peek) .sidebar .sb-label,
    .sidebar:hover .sb-label {
        opacity: 1;
    }

    .sidebar .chat-list {
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--t-fast);
    }

    .app:is(.sb-expanded, .sb-peek) .sidebar .chat-list,
    .sidebar:hover .chat-list {
        opacity: 1;
        pointer-events: auto;
    }

    .sidebar .model-selector {
        flex-direction: column;
        padding: 3px;
    }

    .app:is(.sb-expanded, .sb-peek) .sidebar .model-selector,
    .sidebar:hover .model-selector {
        flex-direction: row;
    }

    .sidebar .btn-abbr {
        display: inline;
        font-weight: 800;
    }

    .app:is(.sb-expanded, .sb-peek) .sidebar .btn-abbr,
    .sidebar:hover .btn-abbr {
        display: none;
    }

    .sidebar .model-btn .sb-label {
        display: none;
    }

    .app:is(.sb-expanded, .sb-peek) .sidebar .model-btn .sb-label,
    .sidebar:hover .model-btn .sb-label {
        display: inline;
        opacity: 1;
    }

    .sidebar .budget-bar {
        max-width: 44px;
        transition: max-width var(--t-mid);
    }

    .app:is(.sb-expanded, .sb-peek) .sidebar .budget-bar,
    .sidebar:hover .budget-bar {
        max-width: none;
    }

    .sidebar .budget-label {
        display: none;
    }

    .app:is(.sb-expanded, .sb-peek) .sidebar .budget-label,
    .sidebar:hover .budget-label {
        display: inline;
    }

    .main {
        margin-left: var(--sidebar-rail-w);
        transition: margin-left var(--t-mid);
    }

    .app.sb-expanded .main {
        margin-left: var(--sidebar-w);
    }

    .sidebar-backdrop {
        display: none !important;
    }
}

.sidebar-hover-zone {
    display: none !important;
}

@media (max-width: 860px) {
    .sidebar {
        top: 0;
    }
}

/* ---------- Sidebar-Bausteine (Footer, Aktionen, Icons) ---------- */
.sb-label {
    display: inline;
}

.new-chat-btn,
.sidebar-action {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 14px;
}

.sidebar-action {
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
}

    .sidebar-action:hover {
        background: var(--surface-2);
        border-color: var(--border);
        color: var(--text);
    }

.sb-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
}

    .sb-icon svg {
        width: 19px;
        height: 19px;
        display: block;
    }

.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* Modell-Auswahl in der Sidebar */
.sidebar .model-selector {
    width: 100%;
    height: auto;
    display: flex;
}

.sidebar .model-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
}

.btn-abbr {
    display: none;
}

/* Budget in der Sidebar */
.sidebar .budget {
    width: 100%;
    padding: 4px 6px;
}

.sidebar .budget-bar {
    flex: 1;
    width: auto;
}

/* User: Avatar + UPN */
.sidebar .user-info {
    width: 100%;
    padding: 6px;
    border-radius: 14px;
    justify-content: flex-start;
}

.sidebar .user-name {
    max-width: 190px;
}

.sidebar .user-identities {
    align-items: flex-start;
}

/* Theme-Toggle-Icons */
#themeToggleBtn .icon-moon {
    display: none;
}

#themeToggleBtn .icon-sun {
    display: block;
}

html[data-theme="light"] #themeToggleBtn .icon-sun {
    display: none;
}

html[data-theme="light"] #themeToggleBtn .icon-moon {
    display: block;
}

@media (prefers-color-scheme: light) {
    html:not([data-theme]) #themeToggleBtn .icon-sun {
        display: none;
    }

    html:not([data-theme]) #themeToggleBtn .icon-moon {
        display: block;
    }
}

/* ---------- Welcome: Bot-Logo mit ruhiger, moderner Animation ---------- */
@keyframes heldi-reveal {
    0% {
        opacity: 0;
        transform: scale(0.85);
        filter: blur(6px) drop-shadow(0 10px 28px rgba(var(--accent-rgb), 0));
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0) drop-shadow(0 10px 28px rgba(var(--accent-rgb), 0.28));
    }
}

@keyframes heldi-breathe {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.045) rotate(-1.2deg);
    }
}

@keyframes heldi-aura {
    0%, 100% {
        opacity: 0.35;
        transform: translateX(-50%) scale(0.94);
    }

    50% {
        opacity: 0.7;
        transform: translateX(-50%) scale(1.06);
    }
}

.welcome-panel {
    position: relative;
    text-align: center;
}

    .welcome-panel .wp-logo {
        display: block;
        width: clamp(96px, 13vw, 132px);
        height: auto;
        margin: 0 auto 16px;
        animation: heldi-reveal 700ms var(--ease) both, heldi-breathe 6s ease-in-out 700ms infinite;
        will-change: transform, filter;
    }

    /* Weiche, pulsierende Aura hinter dem Logo */
    .welcome-panel::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: clamp(180px, 22vw, 240px);
        height: clamp(180px, 22vw, 240px);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(var(--accent-rgb), 0.18), transparent 62%);
        animation: heldi-aura 6s ease-in-out infinite;
        pointer-events: none;
        z-index: -1;
    }

@media (prefers-reduced-motion: reduce) {
    .welcome-panel .wp-logo {
        animation: heldi-reveal 0.01ms both;
    }

    .welcome-panel::before {
        animation: none;
        opacity: 0.4;
    }
}
/* ==========================================================================
   HELDELE CI · Style-Guide 04/2026
   Schrift: Proxima Nova Condensed (Fallback: Calibri – NIE mischen)
   Farben: HELDELE-Gelb #FAB400 · Schwarz · Weiß (keine Fremdfarben)
   ========================================================================== */

/* ---------- Proxima Nova Condensed · komplette Familie ---------- */
@font-face {
    font-family: "Proxima Nova Condensed";
    src: url("fonts/ProximaNovaCond-Thin.otf") format("opentype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Proxima Nova Condensed";
    src: url("fonts/ProximaNovaCond-ThinIt.otf") format("opentype");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Proxima Nova Condensed";
    src: url("fonts/ProximaNovaCond-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Proxima Nova Condensed";
    src: url("fonts/ProximaNovaCond-LightIt.otf") format("opentype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Proxima Nova Condensed";
    src: url("fonts/ProximaNovaCond-Reg.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Proxima Nova Condensed";
    src: url("fonts/ProximaNovaCond-RegIt.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Proxima Nova Condensed";
    src: url("fonts/ProximaNovaCond-Sbold.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Proxima Nova Condensed";
    src: url("fonts/ProximaNovaCond-SboldIt.otf") format("opentype");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Proxima Nova Condensed";
    src: url("fonts/ProximaNovaCond-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Proxima Nova Condensed";
    src: url("fonts/ProximaNovaCond-BoldIt.otf") format("opentype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Proxima Nova Condensed";
    src: url("fonts/ProximaNovaCond-Xbold.otf") format("opentype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Proxima Nova Condensed";
    src: url("fonts/ProximaNovaCond-Black.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;

}
@font-face {
    font-family: "Proxima Nova Condensed";
    src: url("fonts/ProximaNovaCond-XboldIt.otf") format("opentype");
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Proxima Nova Condensed";
    src: url("fonts/ProximaNovaCond-BlackIt.otf") format("opentype");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* ---------- Design Tokens auf CI umstellen ---------- */
:root {
    /* Primärfarben lt. Style-Guide */
    --accent: #FAB400; /* HELDELE-Gelb (digital) */
    --accent-rgb: 250, 180, 0;
    --accent-contrast: #000000; /* Schwarz auf Gelb */
    /* Schrift: eine Familie pro Medium – Proxima Nova Condensed, sonst Calibri */
    --font: "Proxima Nova Condensed", Calibri, "Segoe UI", sans-serif;
    --font-display: "Proxima Nova Condensed", Calibri, "Segoe UI", sans-serif;
    /* Neutrale Grautöne statt Warmton (Schwarz/Weiß-Basis) */
    --text: #f5f5f5;
    --text-heading: #ffffff;
    --headline-panel: transparent;
    --headline-border: transparent;
}

@media (prefers-color-scheme: light) {
    :root {
        --text: #000000; /* Schwarz als Textfarbe lt. CI */
        --text-heading: #000000;
    }
}

html[data-theme="light"] {
    --text: #000000;
    --text-heading: #000000;
}

/* Condensed-Schrift braucht etwas mehr Laufweite/größere Größen */
body {
    letter-spacing: 0;
    line-height: 1.5;
}

.welcome-panel h1,
.wp-title {
    letter-spacing: -0.01em;
    font-weight: 700;
    /* Kein Farbverlauf: Überschriften in Weiß (dark) / Schwarz (light) */
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--text-heading);
}

/* ---------- Fremdfarben entfernen: nur Gelb/Schwarz/Weiß ---------- */
/* Body-Hintergrund: Indigo-Verlauf raus, nur dezenter Gelb-Schein */
body {
    background: radial-gradient(circle at 50% -10%, rgba(var(--accent-rgb), 0.10), transparent 30rem), var(--bg);
}

/* Bildgenerierungs-Loader ohne Indigo */
.imagegen-canvas {
    background: radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb), 0.34), transparent 40%), radial-gradient(circle at 70% 60%, rgba(var(--accent-rgb), 0.14), transparent 44%), var(--surface-2);
}

/* Kerberos-Badge: Grün → neutral (Funktionsfarben sparsam) */
.user-win-name.win-kerberos {
    color: var(--accent);
}

/* Dateikarten-Badges: neutrales Schwarz/Grau statt Office-Farbwelt
   (Ausnahme: bewusst beibehalten? → dann diesen Block löschen) */
.file-card-badge {
    background: #1a1a1a;
    color: #fff;
    border: 1px solid var(--border);
}

.ft-pdf .file-card-badge,
.ft-word .file-card-badge,
.ft-excel .file-card-badge,
.ft-ppt .file-card-badge,
.ft-img .file-card-badge,
.ft-zip .file-card-badge,
.ft-mail .file-card-badge,
.ft-note .file-card-badge,
.ft-txt .file-card-badge {
    background: #1a1a1a;
}

html[data-theme="light"] .file-card-badge {
    background: #000;
}

/* ---------- Gelb konsequent als Akzent ---------- */
/* Sende-Button, Primär-Buttons: Schwarz auf Gelb (wie Logo-Kontrastregel) */
.auth-btn,
.new-chat-btn,
.send-btn,
.terms-accept-btn,
.prompt-btn.primary,
.document-form-btn.primary,
.approval-btn.approve {
    background: var(--accent);
    color: #000;
}

/* User-Bubble: Gelb mit schwarzem Text (CI-Kontrast) */
.msg.user .bubble {
    background: var(--accent);
    color: #000;
    box-shadow: none;
}

/* Bot-Text: reines Weiß/Schwarz statt Warmton-Mischung */
.msg.bot .bubble {
    color: var(--text);
}
/* ==========================================================================
   Proxima Nova Condensed · Gewichts-Normalisierung
   Verfügbare Schnitte: 300 Light · 400 Regular · 600 Semibold · 700 Bold
   Zwischenwerte (650/750/780/850) runden sonst alle auf Bold → zu fett.
   ========================================================================== */

/* Grundtext: Regular */
body {
    font-weight: 400;
}

/* Sekundäre Labels & Kachel-Texte: Regular statt fett */
.ps-text,
.file-card-description,
.file-card-source,
.file-card-path,
.chat-item-title,
.budget-label,
.user-name,
.disclaimer,
.approval-card-summary,
.speech-status-text,
.app-loading-status,
.prompt-intro,
.info-note {
    font-weight: 400;
}

/* Hervorhebungen: Semibold (600) statt 650–750 */
.ps-label,
.sidebar-action,
.model-btn,
.quick-reply,
.answer-now-btn,
.app-version,
.admin-readonly,
.admin-tab,
.file-card-name,
.document-form-btn,
.approval-btn,
.prompt-gen-btn,
.prompt-btn,
.heldi-btn,
.speech-status-title,
.document-form-title,
.user-avatar,
.meta-source,
.bubble-attachment {
    font-weight: 600;
}

    /* Primär-Buttons & Titel: Bold nur wo es Gewicht braucht */
    .auth-btn,
    .new-chat-btn,
    .send-btn,
    .terms-accept-btn,
    .prompt-btn.primary,
    .approval-btn.approve,
    .brand,
    .admin-header h2,
    .terms-header h2,
    .prompt-header h2,
    .approval-card-title,
    .approval-box-title {
        font-weight: 700;
    }

/* Große Headline: Bold, Condensed braucht kaum negative Laufweite */
.welcome-panel h1,
.wp-title {
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* User-Bubble: Regular statt 550 (rundet sonst auf 600) */
.msg.user .bubble {
    font-weight: 400;
}

/* Condensed ist schmal → Basistexte minimal größer für Lesbarkeit */
.msg .bubble {
    font-size: clamp(1rem, 1.05vw, 1.06rem);
}

.ps-label {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.ps-text {
    font-size: 0.88rem;
    letter-spacing: 0.02em;
}
/* ==========================================================================
   Typografie-Finale · Proxima Nova Condensed
   Klare Hierarchie: 300 Light (groß) · 400 Regular (Text) · 600 Semibold
   (UI/Labels) · 700 Bold (nur Marke & Primäraktionen). Positive Laufweite,
   großzügige Zeilenhöhe – ruhig, modern, minimalistisch.
   ========================================================================== */

/* ---------- Basis ---------- */
body {
    font-weight: 400;
    letter-spacing: 0.012em;
    line-height: 1.6;
}

/* Alle negativen Laufweiten neutralisieren */
.brand,
.gemini-loader-status,
.approval-box-title,
.welcome-panel h1,
.wp-title,
.msg .bubble {
    letter-spacing: 0.01em;
}

/* ---------- Display: Welcome-Headline ---------- */
.welcome-panel h1,
.wp-title {
    font-weight: 600;
    font-size: clamp(2rem, 5.5vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: 0.015em;
    color: var(--text-heading);
}

.welcome-panel h2,
.welcome-panel p {
    font-weight: 400;
    font-size: clamp(0.98rem, 1.5vw, 1.08rem);
    letter-spacing: 0.015em;
    color: var(--text-muted);
}

/* ---------- Marke ---------- */
.brand {
    font-weight: 700;
    font-size: clamp(16px, 2vw, 18px);
    letter-spacing: 0.03em;
}

.app-version {
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---------- Fließtext: Chat ---------- */
.msg .bubble {
    font-size: clamp(1.02rem, 1.1vw, 1.1rem);
    line-height: 1.7;
    letter-spacing: 0.014em;
    font-weight: 400;
}

.msg.user .bubble {
    font-weight: 400;
}

#input {
    letter-spacing: 0.014em;
}

/* Loader-Status ruhig, nicht fett */
.gemini-loader-status {
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* ---------- UI-Ebene: Buttons & Controls (600) ---------- */
.sidebar-action,
.new-chat-btn,
.model-btn,
.auth-btn,
.quick-reply,
.answer-now-btn,
.admin-tab,
.document-form-btn,
.approval-btn,
.prompt-gen-btn,
.prompt-btn,
.heldi-btn,
.terms-accept-btn {
    font-weight: 600;
    letter-spacing: 0.03em;
}

    /* Primäraktionen: Bold als bewusster Kontrast */
    .send-btn,
    .new-chat-btn,
    .auth-btn,
    .terms-accept-btn,
    .prompt-btn.primary,
    .approval-btn.approve {
        font-weight: 700;
    }

/* ---------- Titel-Ebene (600 statt 700–800) ---------- */
.admin-header h2,
.terms-header h2,
.prompt-header h2,
.heldi-approval__title,
.document-form-title,
.approval-card-title,
.approval-box-title,
.speech-status-title,
.heldi-action__name {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ---------- Kleine Labels & Meta (Sperrung wichtig!) ---------- */
.ps-label {
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

.ps-text {
    font-weight: 400;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.chat-item-title {
    font-weight: 400;
    font-size: 14.5px;
    letter-spacing: 0.02em;
}

.file-card-name {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.file-card-description,
.file-card-source,
.file-card-path,
.approval-card-summary,
.document-form-sub,
.speech-status-text,
.prompt-intro,
.disclaimer,
.info-note,
.msg-meta,
.meta-source,
.budget-label,
.user-name,
.admin-table {
    font-weight: 400;
    letter-spacing: 0.025em;
}

/* ---------- GROSSBUCHSTABEN: brauchen die stärkste Sperrung ---------- */
.file-card-badge,
.heldi-badge,
.admin-readonly,
.user-avatar {
    font-weight: 600;
    letter-spacing: 0.08em;
}

.file-card-badge {
    font-size: 9.5px;
}

/* ---------- Zahlen: tabellarisch für ruhige Ausrichtung ---------- */
.budget-label,
.msg-meta,
.admin-table {
    font-variant-numeric: tabular-nums;
}
/* ==========================================================================
   Design Polish v3 · Ruhige Rail, ausgewogener Welcome-Screen, dezenter Fokus
   ========================================================================== */

/* ---------- Rail: aufgeräumt & zentriert (expanded/peek/hover = voll) ---------- */
@media (min-width: 861px) {
    .sidebar {
        gap: 8px;
        border-right: 1px solid var(--border);
        background: color-mix(in srgb, var(--bg-soft) 92%, transparent);
    }

        /* Labels im Rail: unsichtbar UND ohne Platzbedarf */
        .sidebar .sb-label {
            display: inline-block;
            max-width: 0;
            opacity: 0;
            overflow: hidden;
            white-space: nowrap;
            vertical-align: middle;
            transition: opacity var(--t-fast), max-width var(--t-mid);
        }

        .app:is(.sb-expanded, .sb-peek) .sidebar .sb-label,
        .sidebar:hover .sb-label {
            max-width: 200px;
            opacity: 1;
        }

        /* Brand ist ein Flex-Container – braucht volle Breite statt 200px */
        .sidebar .brand.sb-label {
            display: flex;
        }

        .app:is(.sb-expanded, .sb-peek) .sidebar .brand.sb-label,
        .sidebar:hover .brand.sb-label {
            max-width: none;
        }

        .sidebar .user-identities {
            max-width: 0;
            opacity: 0;
            overflow: hidden;
            transition: opacity var(--t-fast), max-width var(--t-mid);
        }

        .app:is(.sb-expanded, .sb-peek) .sidebar .user-identities,
        .sidebar:hover .user-identities {
            max-width: 220px;
            opacity: 1;
        }

        /* Neuer Chat: Rail = neutrales Icon, voll = gelber Button */
        .sidebar .new-chat-btn {
            width: 48px;
            min-height: 48px;
            margin: 4px auto 0;
            justify-content: center;
            gap: 0;
            padding: 0;
            border: 1px solid var(--border);
            background: var(--surface-2);
            color: var(--text);
            transition: width var(--t-mid), background var(--t-mid), color var(--t-mid), margin var(--t-mid), gap var(--t-mid), padding var(--t-mid);
        }

        .app:is(.sb-expanded, .sb-peek) .sidebar .new-chat-btn,
        .sidebar:hover .new-chat-btn {
            width: 100%;
            margin: 4px 0 0;
            justify-content: flex-start;
            gap: 10px;
            padding: 10px 12px;
            border-color: transparent;
            background: var(--accent);
            color: #000;
        }

        /* Aktionen: Rail zentriert, voll linksbündig */
        .sidebar .sidebar-action,
        .sidebar .user-info {
            width: 48px;
            margin: 0 auto;
            justify-content: center;
            gap: 0;
            padding: 10px 0;
            transition: width var(--t-mid), padding var(--t-mid), gap var(--t-mid);
        }

        .app:is(.sb-expanded, .sb-peek) .sidebar .sidebar-action,
        .app:is(.sb-expanded, .sb-peek) .sidebar .user-info,
        .sidebar:hover .sidebar-action,
        .sidebar:hover .user-info {
            width: 100%;
            justify-content: flex-start;
            gap: 10px;
            padding: 10px 12px;
        }

        .sidebar .model-selector,
        .sidebar .budget {
            width: 48px;
            margin: 0 auto;
            transition: width var(--t-mid);
        }

        .app:is(.sb-expanded, .sb-peek) .sidebar .model-selector,
        .app:is(.sb-expanded, .sb-peek) .sidebar .budget,
        .sidebar:hover .model-selector,
        .sidebar:hover .budget {
            width: 100%;
        }

        /* Toggle-Button im Kopf: Rail zentriert, voll links */
        .sidebar .sidebar-head {
            justify-content: center;
        }

        .app:is(.sb-expanded, .sb-peek) .sidebar .sidebar-head,
        .sidebar:hover .sidebar-head {
            justify-content: flex-start;
        }

    .sidebar-footer {
        align-items: stretch;
        gap: 8px;
    }
}

/* ---------- Welcome: Hero mit klarer Hierarchie ---------- */
.welcome-panel {
    gap: 10px;
}

    /* Eyebrow-Subline ÜBER der Headline wirkt hochwertiger */
    .welcome-panel h2 {
        order: -1;
        margin-bottom: 2px;
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--accent);
    }

    .welcome-panel h1,
    .wp-title {
        font-weight: 600;
        font-size: clamp(2.2rem, 6vw, 3.8rem);
        line-height: 1.05;
        letter-spacing: 0.01em;
    }

    /* Logo näher an den Titel binden */
    .welcome-panel .wp-logo {
        margin-bottom: 6px;
    }

/* Kacheln: mehr Präsenz, klarere Trennung von der Fläche */
.prompt-suggestions {
    margin-top: 34px;
}

.prompt-suggestion {
    border-color: color-mix(in srgb, var(--border-strong) 85%, transparent);
    background: color-mix(in srgb, var(--surface-1) 96%, transparent);
}

    .prompt-suggestion:hover {
        border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
    }

.ps-icon {
    background: var(--surface-3);
}

.ps-label {
    color: var(--text);
}

/* ---------- Composer: gelber Ring nur dezent, nicht dauerhaft grell ---------- */
.composer-inner:focus-within {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24);
}

/* ---------- App-Loading: Titel im gleichen Stil wie Welcome ---------- */
.wp-title {
    font-weight: 600;
}

.app-loading-bar {
    margin-top: 6px;
}

/* ---------- Topbar: BETA-Badge dezenter ---------- */
.app-version {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--accent);
}
/* ---------- Sehr kleine Screens: Sidebar als ziehbares Bottom-Sheet ---------- */
@media (max-width: 480px) {
    :root {
        /* Sichtbarer Rest des Sheets im geschlossenen Zustand (nur Grabber) */
        --sheet-peek: 22px;
    }

    .sidebar {
        inset: auto 0 0 0;
        width: 100%;
        max-width: 100%;
        height: 80dvh;
        max-height: 80dvh;
        padding-top: 10px;
        border-right: none;
        border-top: 1px solid var(--border);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
        touch-action: none; /* damit der Drag nicht scrollt */
        /* Standard: komplett unten, nur der Grabber lugt heraus */
        transform: translateY(calc(100% - var(--sheet-peek)));
        transition: transform var(--t-mid);
    }

        .sidebar.open {
            transform: translateY(0);
        }

        /* Während des Ziehens: keine Transition (folgt dem Finger) */
        .sidebar.dragging {
            transition: none;
        }

        /* Grabber – große Trefferfläche zum Hochziehen */
        .sidebar::before {
            content: "";
            display: block;
            flex: 0 0 auto;
            width: 44px;
            height: 5px;
            margin: 0 auto 10px;
            border-radius: 999px;
            background: var(--surface-3);
        }

        /* Inhalte im geschlossenen Zustand nicht antippbar */
        .sidebar:not(.open) .chat-list,
        .sidebar:not(.open) .sidebar-footer,
        .sidebar:not(.open) .new-chat-btn {
            pointer-events: none;
        }

    /* Eingabezeile bleibt immer über dem Peek-Streifen erreichbar */
    .composer {
        padding-bottom: calc(var(--composer-pad) + var(--sheet-peek) + env(safe-area-inset-bottom));
    }

    /* Backdrop nur, wenn das Sheet wirklich offen ist */
    .sidebar-backdrop {
        transition: opacity var(--t-fast);
    }
}
/* ==========================================================================
   Codeblöcke in Bot-Antworten
   ========================================================================== */

.code-block {
    width: min(100%, 100%);
    margin: 10px 0;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: var(--surface-2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.code-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-3);
}

.code-block-lang {
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.code-block-copy {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

    .code-block-copy:hover {
        border-color: var(--accent);
        color: var(--text);
    }

    .code-block-copy.is-done {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 16%, transparent);
        color: var(--text);
    }

.code-block pre {
    max-height: 460px;
    margin: 0;
    padding: 12px 14px;
    overflow: auto;
    background: transparent;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-3) transparent;
}

.code-block code {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: "Cascadia Code", "JetBrains Mono", Consolas, "Courier New", monospace;
    font-size: 12.8px;
    line-height: 1.62;
    letter-spacing: 0;
    white-space: pre;
    tab-size: 4;
}

/* Farbiger Akzentstreifen je Sprache */
.code-block.lang-powershell {
    border-left: 3px solid var(--accent);
}

.code-block.lang-bash,
.code-block.lang-cmd,
.code-block.lang-sql,
.code-block.lang-csharp,
.code-block.lang-js,
.code-block.lang-json,
.code-block.lang-xml,
.code-block.lang-yaml,
.code-block.lang-html,
.code-block.lang-css,
.code-block.lang-generic {
    border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
}

/* Inline-Code */
.inline-code {
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text);
    font-family: "Cascadia Code", Consolas, monospace;
    font-size: 0.88em;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .code-block {
        border-radius: 12px;
    }

        .code-block pre {
            max-height: 320px;
            padding: 10px 11px;
        }

        .code-block code {
            font-size: 12px;
        }
}
/* Container des inkrementellen Streamings sollen layout-neutral sein */
.bubble > .stream-committed,
.bubble > .stream-tail {
    display: contents;
}
/* === Feedback & Support === */
.feedback-type-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.feedback-type {
    flex: 1 1 30%;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(127, 127, 127, .35));
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: .9rem;
}

    .feedback-type:hover {
        border-color: currentColor;
    }

    .feedback-type.active {
        border-color: var(--accent, #e2001a);
        box-shadow: inset 0 0 0 1px var(--accent, #e2001a);
    }

.feedback-ok {
    margin-top: 10px;
    font-size: .9rem;
    color: #2e9e5b;
}
/* Markdown-Antworten: ruhige Typografie und echte Inhaltsstruktur */

.msg.bot .bubble.markdown-body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: normal;
    white-space: normal;
    overflow-wrap: anywhere;
}

.markdown-body > * {
    margin-block: 0 1rem;
}

.markdown-body > :last-child {
    margin-bottom: 0;
}

.markdown-body :is(h1, h2, h3, h4, h5, h6) {
    margin: 1.5rem 0 .65rem;
    color: var(--text);
    font-family: var(--font);
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -.015em;
}

.markdown-body > :first-child {
    margin-top: 0;
}

.markdown-body h1 {
    font-size: 1.45rem;
}

.markdown-body h2 {
    font-size: 1.25rem;
}

.markdown-body h3 {
    font-size: 1.1rem;
}

.markdown-body :is(h4, h5, h6) {
    font-size: 1rem;
}

.markdown-body strong {
    font-weight: 650;
}

.markdown-body :is(ul, ol) {
    padding-left: 1.5rem;
}

.markdown-body ul {
    list-style: disc outside;
}

.markdown-body ol {
    list-style: decimal outside;
}

.markdown-body li {
    display: list-item;
    margin-block: .35rem;
    padding-left: .2rem;
}

    .markdown-body li > p {
        margin-block: .4rem;
    }

    .markdown-body li > :is(ul, ol) {
        margin-block: .4rem;
    }

.markdown-body blockquote {
    padding: .6rem 1rem;
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    background: var(--surface-1);
    color: var(--text-muted);
}

    .markdown-body blockquote > :last-child {
        margin-bottom: 0;
    }

.markdown-body hr {
    height: 0;
    margin-block: 1.5rem;
    border: 0;
    border-top: 1px solid var(--border-strong);
}

.markdown-body .bot-link {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 3px;
}

    .markdown-body .bot-link:hover {
        color: var(--accent);
    }

.markdown-body :is(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.markdown-body .inline-code {
    padding: .12em .35em;
    border-radius: 5px;
    font-size: .88em;
    white-space: break-spaces;
    overflow-wrap: anywhere;
}

.markdown-body .code-block {
    margin-block: 1rem;
    box-shadow: none;
}

    .markdown-body .code-block pre {
        white-space: pre;
        overflow-wrap: normal;
    }

    .markdown-body .code-block code {
        font-size: .85rem;
    }

.markdown-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
}

.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
}

.markdown-body :is(th, td) {
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.markdown-body th {
    background: var(--surface-2);
    font-weight: 600;
}

.markdown-body tbody tr:last-child td {
    border-bottom: 0;
}

.markdown-body .file-card {
    width: 100%;
    max-width: 620px;
    margin-block: .75rem;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--surface-1);
    box-shadow: none;
    text-decoration: none;
}

.markdown-body .file-card-name {
    font-family: var(--font);
    font-size: .95rem;
    font-weight: 600;
    white-space: normal;
}

.markdown-body .file-card-source {
    font-size: .8rem;
    font-weight: 400;
    color: var(--text-muted);
}

.markdown-fallback {
    white-space: pre-wrap;
}

@media (max-width: 640px) {
    .msg.bot .bubble.markdown-body {
        font-size: 15px;
        line-height: 1.65;
    }

    .markdown-body :is(th, td) {
        padding: .55rem .65rem;
    }
}
a.sidebar-action {
    color: inherit;
    text-decoration: none;
}
/* ==========================================================================
   Startseite · AI-first Hero (Logo + Badge, Headline, ein Promptfeld, Chips)
   ========================================================================== */

.welcome-panel {
    max-width: min(820px, calc(100vw - 28px));
    gap: 12px;
}

    /* Logo mit überlappendem Modus-Badge */
    .welcome-panel .wp-logo-wrap {
        position: relative;
        width: auto;
        height: auto;
        display: inline-block;
        margin: 4px 0 14px;
    }

        .welcome-panel .wp-logo-wrap .wp-logo {
            margin: 0;
        }

    .welcome-panel .wp-mode-badge {
        position: absolute;
        left: 50%;
        bottom: -8px;
        transform: translateX(-50%);
        padding: 3px 12px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        white-space: nowrap;
        color: #000;
        background: var(--accent);
        box-shadow: 0 0 0 3px var(--bg), 0 0 18px rgba(var(--accent-rgb), 0.35);
    }

    .welcome-panel h1 {
        font-size: clamp(1.9rem, 4.6vw, 3.2rem);
    }

    .welcome-panel .wp-mode-suffix {
        color: var(--accent);
        white-space: nowrap;
    }

    .welcome-panel .wp-subline {
        max-width: 34rem;
        color: var(--text-muted);
        font-size: clamp(0.98rem, 1.5vw, 1.1rem);
        line-height: 1.5;
    }

    /* Farbakzente je Modus */
    .welcome-panel.mode-code .wp-mode-badge {
        background: #4fc3f7;
        box-shadow: 0 0 0 3px var(--bg), 0 0 18px rgba(79, 195, 247, 0.35);
    }

    .welcome-panel.mode-code .wp-mode-suffix {
        color: #4fc3f7;
    }

    .welcome-panel.mode-mini .wp-mode-badge {
        background: #81c784;
        box-shadow: 0 0 0 3px var(--bg), 0 0 18px rgba(129, 199, 132, 0.35);
    }

    .welcome-panel.mode-mini .wp-mode-suffix {
        color: #81c784;
    }

/* Promptfeld in der Mitte */
.wp-composer-slot {
    width: 100%;
    margin-top: 14px;
}

.composer.is-hero {
    position: static;
    padding: 0;
    background: none;
}

    .composer.is-hero .composer-inner {
        max-width: 100%;
        min-height: 64px;
        align-items: center;
        padding: 8px 8px 8px 16px;
        border-radius: 32px;
        box-shadow: 0 18px 54px rgba(0, 0, 0, 0.28);
    }

    .composer.is-hero .send-btn {
        width: 46px;
        height: 46px;
        border-radius: 50%;
    }

    .composer.is-hero .disclaimer {
        display: none;
    }

.wp-composer-slot .attachment-bar {
    margin-bottom: 8px;
    justify-content: center;
}

/* Quick-Action-Karten unter dem Promptfeld (Optik wie Screenshot) */
.wp-chips {
    width: min(100%, 1040px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 18px;
}

    .wp-chips .wp-card {
        position: relative;
        min-height: 150px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 16px 16px 36px;
        border: 1px solid var(--border-strong);
        border-radius: 18px;
        background: color-mix(in srgb, var(--surface-1) 80%, transparent);
        text-align: left;
        box-shadow: none;
        animation: wpChipIn 320ms var(--ease) both;
    }

        .wp-chips .wp-card:hover {
            border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
            background: color-mix(in srgb, var(--accent) 5%, var(--surface-1));
            transform: translateY(-2px);
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
        }

    .wp-chips .ps-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 6px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        background: var(--surface-3);
        font-size: 1.2rem;
    }

    .wp-chips .ps-label {
        color: var(--text);
        font-size: 0.98rem;
        font-weight: 600;
        letter-spacing: 0.01em;
    }

    .wp-chips .ps-text {
        color: var(--text-muted);
        font-size: 0.86rem;
        line-height: 1.4;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .wp-chips .ps-arrow {
        position: absolute;
        right: 14px;
        bottom: 12px;
        color: var(--accent);
        font-size: 1rem;
        transition: transform var(--t-fast);
    }

    .wp-chips .wp-card:hover .ps-arrow {
        transform: translateX(3px);
    }

    .wp-chips .prompt-add {
        border-style: dashed;
        background: transparent;
    }

    .wp-chips .prompt-custom .ps-del {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 22px;
        height: 22px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--surface-2);
        color: var(--text-muted);
        font-size: 0.7rem;
        opacity: 0;
    }

    .wp-chips .prompt-custom:hover .ps-del {
        opacity: 1;
    }

@media (max-width: 640px) {
    .wp-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

        .wp-chips .wp-card {
            min-height: 120px;
            padding: 12px 12px 30px;
        }
}

.wp-tagline {
    margin-top: 22px;
    color: var(--text-faint);
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

@keyframes wpChipIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 640px) {
    .composer.is-hero .composer-inner {
        border-radius: 24px;
    }

    .wp-chips .prompt-suggestion {
        padding: 7px 12px;
    }

    .wp-tagline {
        display: none;
    }
}

/* ==========================================================================
   Feinschliff: Badge höher, kompakte Prompt-Karten (halbe Höhe)
   ========================================================================== */

/* Modus-Badge weiter nach oben ans Logo */
.welcome-panel .wp-mode-badge {
    bottom: 10px;
}

.welcome-panel .wp-logo-wrap {
    margin: 4px 0 4px;
}

/* Karten: horizontal, ca. halbe Höhe */
.wp-chips {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

    .wp-chips .wp-card {
        min-height: 72px;
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 2px;
        align-items: center;
        padding: 12px 34px 12px 12px;
        border-radius: 16px;
    }

    .wp-chips .ps-icon {
        grid-row: 1 / span 2;
        width: 36px;
        height: 36px;
        margin: 0;
        border-radius: 10px;
        font-size: 1.05rem;
    }

    .wp-chips .ps-label {
        grid-column: 2;
        align-self: end;
        font-size: 0.92rem;
        line-height: 1.2;
    }

    .wp-chips .ps-text {
        grid-column: 2;
        align-self: start;
        font-size: 0.8rem;
        line-height: 1.3;
        -webkit-line-clamp: 1;
    }

    .wp-chips .ps-arrow {
        top: 50%;
        bottom: auto;
        right: 12px;
        transform: translateY(-50%);
    }

    .wp-chips .wp-card:hover .ps-arrow {
        transform: translate(3px, -50%);
    }

@media (max-width: 640px) {
    .wp-chips {
        grid-template-columns: 1fr;
        gap: 8px;
    }

        .wp-chips .wp-card {
            min-height: 60px;
            padding: 10px 32px 10px 10px;
        }
}
/* ==========================================================================
   Modus-Badge als rundes Symbol unten rechts am Logo
   ========================================================================== */

.welcome-panel .wp-mode-badge {
    left: auto;
    right: -14px;
    bottom: 4px;
    transform: none;
    width: 46px;
    height: 46px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #000;
    background: var(--accent);
    letter-spacing: 0;
    box-shadow: 0 0 0 4px var(--bg), 0 0 22px rgba(var(--accent-rgb), 0.45);
    animation: wpBadgeIn 420ms var(--ease) 350ms both;
}

    .welcome-panel .wp-mode-badge svg {
        width: 22px;
        height: 22px;
        display: block;
    }

@keyframes wpBadgeIn {
    from {
        opacity: 0;
        transform: scale(0.6);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 640px) {
    .welcome-panel .wp-mode-badge {
        width: 38px;
        height: 38px;
        right: -10px;
    }

        .welcome-panel .wp-mode-badge svg {
            width: 18px;
            height: 18px;
        }
}

/* ==========================================================================
   Start-Ladeanimation (GIF, je nach Theme)
   ========================================================================== */

.app-loading-panel {
    gap: 0;
}

.app-loading-anim {
    width: clamp(160px, 28vw, 280px);
    height: auto;
    object-fit: contain;
}

/* Standard = Dark */
.app-loading-anim-light {
    display: none;
}

.app-loading-anim-dark {
    display: block;
}

/* System hell, solange nicht manuell auf Dark gestellt */
@media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]) .app-loading-anim-light {
        display: block;
    }

    html:not([data-theme="dark"]) .app-loading-anim-dark {
        display: none;
    }
}

/* Manuell hell */
html[data-theme="light"] .app-loading-anim-light {
    display: block;
}

html[data-theme="light"] .app-loading-anim-dark {
    display: none;
}

/* Status nur für Screenreader */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* ---------- Ladebildschirm: Sidebar komplett ausblenden ---------- */
.app.is-loading .sidebar,
.app.is-loading .sidebar-backdrop {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.sidebar {
    transition: width var(--t-mid), box-shadow var(--t-mid), padding var(--t-mid), opacity var(--t-mid), visibility 0s linear 0s;
}

.app.is-loading .sidebar {
    transition: opacity var(--t-mid), visibility 0s linear var(--t-mid);
}

@media (min-width: 861px) {
    .app.is-loading .main {
        margin-left: 0;
    }
}

/* ==========================================================================
   Landingpage ai.heldele.de
   ========================================================================== */

.landing-body {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    margin: 0;
    padding: clamp(16px, 4vw, 40px);
}

.landing-panel {
    max-width: min(1100px, calc(100vw - 28px));
    gap: 14px;
}

    .landing-panel h2 {
        margin-bottom: 8px;
    }

    /* Grid überschreibt bewusst .wp-chips */
    .landing-panel .landing-cards {
        width: min(100%, 1040px);
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
        margin-top: 28px;
    }

        /* Karte: vertikal, groß, kein Grid aus .wp-chips .wp-card */
        .landing-panel .landing-cards a.landing-card {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            min-height: 220px;
            padding: 28px 26px 56px;
            border: 1px solid var(--border-strong);
            border-radius: 22px;
            background: color-mix(in srgb, var(--surface-1) 90%, transparent);
            color: var(--text);
            text-align: left;
            text-decoration: none;
            cursor: pointer;
            transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid), background var(--t-mid);
        }

            .landing-panel .landing-cards a.landing-card:hover {
                transform: translateY(-3px);
                border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
                background: color-mix(in srgb, var(--accent) 5%, var(--surface-1));
                box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3);
            }

            .landing-panel .landing-cards a.landing-card:focus-visible {
                outline: 2px solid var(--accent);
                outline-offset: 3px;
            }

            .landing-panel .landing-cards a.landing-card .ps-icon {
                width: 60px;
                height: 60px;
                margin: 0 0 6px;
                display: grid;
                place-items: center;
                border-radius: 16px;
                background: var(--surface-3);
                font-size: 1.8rem;
            }

            .landing-panel .landing-cards a.landing-card .ps-label {
                font-size: 1.4rem;
                font-weight: 600;
                line-height: 1.2;
                letter-spacing: 0.01em;
                color: var(--text);
            }

            .landing-panel .landing-cards a.landing-card .ps-text {
                display: block;
                overflow: visible;
                -webkit-line-clamp: unset;
                white-space: normal;
                text-overflow: clip;
                font-size: 1rem;
                line-height: 1.5;
                color: var(--text-muted);
            }

            /* Pfeil unten rechts */
            .landing-panel .landing-cards a.landing-card::after {
                content: "→";
                position: absolute;
                right: 22px;
                bottom: 18px;
                color: var(--accent);
                font-size: 1.3rem;
                transition: transform var(--t-fast);
            }

            .landing-panel .landing-cards a.landing-card:hover::after {
                transform: translateX(4px);
            }

    .landing-panel .wp-tagline {
        margin-top: 30px;
    }

@media (max-width: 900px) {
    .landing-panel .landing-cards {
        grid-template-columns: 1fr;
        gap: 14px;
    }

        .landing-panel .landing-cards a.landing-card {
            min-height: 150px;
            padding: 22px 20px 48px;
        }

    .landing-panel .wp-tagline {
        display: block;
    }
}