/* ═══════════════════════════════════════════════
   CHAT ASSISTANT — Side Panel (Sprint 28)
   Panel ist rechts fixiert, Content schiebt zusammen
   ═══════════════════════════════════════════════ */

/* Panel — rechts fixiert, immer volle Höhe */
.chat-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 420px; z-index: 900;
    display: flex; flex-direction: column;
    background: var(--bg);
    border-left: 1px solid var(--border);
    box-shadow: -2px 0 12px rgba(0,0,0,.1);
    transition: width .2s ease;
}

/* ── Eingeklappt: 52px-Streifen — gespiegelte Sidebar ── */
.chat-panel-collapsed {
    width: 52px; overflow: hidden;
    background: var(--sb-bg, #1a1a2e);
    border-left: 1px solid var(--sb-border, rgba(255,255,255,.08));
    align-items: center; justify-content: flex-start;
    gap: 16px; padding: 8px 0;
    cursor: pointer;
}
.fr-layout.chat-collapsed .fr-main { margin-right: 52px; }

/* Strip Header (Toggle-Button oben) */
.chat-strip-header {
    width: 100%; display: flex; align-items: center; justify-content: center;
    padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0; min-height: 48px;
}
.chat-strip-toggle {
    width: 32px; height: 32px; border: none; cursor: pointer;
    background: var(--primary, #e63946); color: #fff;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.chat-strip-toggle:hover { filter: brightness(1.1); }

/* Chat-Icon im Streifen */
.chat-strip-icon {
    width: 100%; display: flex; align-items: center; justify-content: center;
    padding: 12px 0; color: rgba(255,255,255,.55); cursor: pointer;
    transition: color .15s;
}
.chat-strip-icon:hover { color: #fff; }

/* Badge (Anzahl Nachrichten) */
.chat-strip-badge {
    background: var(--primary); color: #fff;
    font-size: calc(10px * var(--fs)); font-weight: 700;
    min-width: 20px; height: 20px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; padding: 0 5px;
}

/* Collapse-Button im Header (wie fr-sb-toggle) */
.chat-collapse-btn {
    width: 26px; height: 26px; border: none;
    background: transparent; color: var(--text-muted); cursor: pointer;
    border-radius: 6px; display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.chat-collapse-btn:hover { background: var(--bg-hover); color: var(--text); }

/* Content zusammenschieben wenn Chat offen */
.fr-layout.chat-open .fr-main {
    margin-right: 420px;
    transition: margin-right .25s ease;
}
.fr-layout.chat-collapsed .fr-main {
    margin-right: 52px;
    transition: margin-right .25s ease;
}
.fr-main {
    margin-right: 0;
    transition: margin-right .25s ease;
}

/* Header */
.chat-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-14) var(--sp-16);
    border-bottom: 1px solid var(--border);
    background: var(--bg-card); flex-shrink: 0;
}
.chat-header-left {
    display: flex; align-items: center; gap: var(--sp-10);
    color: var(--primary); min-width: 0;
}
.chat-header-title {
    font-size: calc(15px * var(--fs)); font-weight: 600;
    color: var(--text);
}
.chat-header-sub {
    font-size: calc(11px * var(--fs)); color: var(--text-muted);
}
.chat-header-actions {
    display: flex; gap: var(--sp-4); flex-shrink: 0;
}

/* Messages area */
.chat-messages {
    flex: 1; overflow-y: auto;
    padding: var(--sp-16);
    display: flex; flex-direction: column; gap: var(--sp-10);
}

/* Welcome state */
.chat-welcome {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: var(--sp-24) var(--sp-12);
    gap: var(--sp-10); margin-top: auto; margin-bottom: auto;
}
.chat-welcome-icon { color: var(--primary); opacity: .4; }
.chat-welcome-title {
    font-size: calc(16px * var(--fs)); font-weight: 600;
    color: var(--text);
}
.chat-welcome-sub {
    font-size: calc(12px * var(--fs)); color: var(--text-muted);
    max-width: 340px; line-height: 1.5;
}

/* Suggestion chips */
.chat-suggestions {
    display: flex; flex-wrap: wrap; gap: var(--sp-6);
    justify-content: center; padding: var(--sp-6) 0;
}
.chat-chip {
    background: rgba(var(--primary-rgb), .1);
    color: var(--primary); border: 1px solid rgba(var(--primary-rgb), .25);
    border-radius: 20px; padding: var(--sp-6) var(--sp-12);
    font-size: calc(11px * var(--fs)); cursor: pointer;
    transition: all .15s; white-space: nowrap;
}
.chat-chip:hover {
    background: rgba(var(--primary-rgb), .2);
    border-color: rgba(var(--primary-rgb), .4);
}
.chat-chip-sm {
    padding: var(--sp-4) var(--sp-8);
    font-size: calc(10px * var(--fs));
}

/* Bubbles */
.chat-bubble {
    max-width: 88%; padding: var(--sp-10) var(--sp-14);
    border-radius: var(--radius); word-wrap: break-word;
    line-height: 1.5; font-size: calc(13px * var(--fs));
}
.chat-bubble-user {
    align-self: flex-end;
    background: var(--primary); color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-bubble-ai {
    align-self: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
    color: var(--text);
}
.chat-bubble-error {
    border-color: rgba(var(--danger-rgb), .3);
    background: rgba(var(--danger-rgb), .08);
}
.chat-bubble-time {
    font-size: calc(10px * var(--fs)); color: var(--text-muted);
    margin-top: var(--sp-4); text-align: right; opacity: .6;
}
.chat-bubble-user .chat-bubble-time { color: rgba(255,255,255,.6); }

/* Loading dots */
.chat-bubble-loading { padding: var(--sp-12) var(--sp-16); }
.chat-dots { display: flex; gap: 6px; align-items: center; }
.chat-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-muted); opacity: .4;
    animation: chatDot 1.4s ease-in-out infinite;
}
.chat-dot:nth-child(2) { animation-delay: .2s; }
.chat-dot:nth-child(3) { animation-delay: .4s; }
@keyframes chatDot {
    0%, 80%, 100% { opacity: .4; transform: scale(1); }
    40% { opacity: 1; transform: scale(1.2); }
}

/* Input area */
.chat-input-area {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    padding: var(--sp-10) var(--sp-14);
}
.chat-quick-row {
    display: flex; gap: var(--sp-4); flex-wrap: wrap;
    margin-bottom: var(--sp-6);
}
.chat-input-row {
    display: flex; gap: var(--sp-8); align-items: flex-end;
}
.chat-input {
    flex: 1; resize: none; overflow-y: auto;
    padding: var(--sp-10) var(--sp-12);
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg); color: var(--text);
    font-size: calc(13px * var(--fs)); font-family: inherit;
    line-height: 1.4; min-height: 40px; max-height: 120px;
    transition: border-color .15s;
}
.chat-input:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .15);
}
.chat-input::placeholder { color: var(--text-muted); }
.chat-send-btn {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    padding: 0; border-radius: var(--radius); flex-shrink: 0;
}

/* Markdown in AI bubbles */
.chat-md { display: flex; flex-direction: column; gap: var(--sp-4); }
.chat-md-block { line-height: 1.5; }
.chat-md-h2 { font-size: calc(14px * var(--fs)); font-weight: 700; margin-top: var(--sp-6); }
.chat-md-h3 { font-size: calc(13px * var(--fs)); font-weight: 600; margin-top: var(--sp-4); color: var(--primary); }
.chat-md-li { padding-left: var(--sp-12); position: relative; }
.chat-md code {
    background: rgba(var(--primary-rgb), .08); padding: 1px 4px;
    border-radius: 3px; font-size: calc(11px * var(--fs));
}
.chat-md strong { font-weight: 600; }

/* Tables in chat */
.chat-table-wrap { overflow-x: auto; margin: var(--sp-4) 0; }
.chat-table {
    width: 100%; border-collapse: collapse;
    font-size: calc(11px * var(--fs));
}
.chat-table th, .chat-table td {
    padding: var(--sp-4) var(--sp-8);
    border: 1px solid var(--border);
    text-align: left; white-space: nowrap;
}
.chat-table th {
    background: var(--bg-tint); font-weight: 600;
    font-size: calc(10px * var(--fs)); text-transform: uppercase;
    letter-spacing: .3px;
}
.chat-table tr:hover td { background: rgba(var(--primary-rgb), .04); }

/* Screen Topbar-Button */
.scr-topbar-btn { position: relative; }
.scr-topbar-btn.active {
    color: var(--primary);
    background: rgba(var(--primary-rgb), .12);
}
.scr-topbar-badge {
    position: absolute; top: -2px; right: -2px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--danger); color: #fff;
    font-size: 9px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}

/* Chat FAB */
/* Topbar Chat-Toggle-Button */
.chat-topbar-btn { transition: color .15s; }
.chat-topbar-btn.active { color: var(--primary) !important; background: var(--primary-tint) !important; border-color: var(--primary) !important; }

/* FAB ausblenden wenn Panel voll offen */
.fr-layout.chat-open:not(.chat-collapsed) ~ .chat-fab,
body .fr-layout.chat-open:not(.chat-collapsed) + * /* .chat-fab removed */

/* .chat-fab removed */

.chat-fab:active { transform: scale(.95); }

/* ── Mobile: Chat komplett ausblenden ── */
@media (max-width: 768px) {
    .chat-panel,
    .chat-panel-collapsed { display: none !important; }
    .fr-layout.chat-open .fr-main,
    .fr-layout.chat-collapsed .fr-main { margin-right: 0 !important; }
}