/* Stacked container */
.chat-stack {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: grid;
    grid-auto-rows: auto;
    row-gap: 12px;
    z-index: 1200;
}

/* Launcher */
.chat-launcher {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .6rem;
    background: rgba(0,0,0,0.6);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: .4rem .8rem .4rem .4rem;
    cursor: pointer;
    backdrop-filter: blur(6px);
}

.chat-launcher img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: transparent;
}

.chat-launcher .label { font-weight: 600; }

/* Panel */
.chat-panel {
    position: relative;
    width: 340px;
    max-height: 60vh;
    display: none;
    flex-direction: column;
    background: #0f0f10;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.chat-panel.is-open { display: flex; animation: slideUp .2s ease-out; }

@keyframes slideUp { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.chat-header { padding: .75rem 1rem; border-bottom: 1px solid var(--color-border); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.chat-banner { padding: .5rem 1rem; color: #b3b3b3; font-size: .9rem; background: #121213; border-bottom: 1px dashed #2a2a2b; }
.chat-banner a { color: #f0f0f0; text-decoration: underline; font-weight: 600; }
.chat-banner a:hover { color: #ffffff; }
.chat-history { padding: .75rem 1rem; overflow-y: auto; flex: 1; display: grid; gap: .5rem; }
.chat-input-row { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--color-border); }
.chat-input-row input { flex: 1; padding: .6rem .75rem; border-radius: 8px; border: 1px solid var(--color-border); background: #161617; color: #fff; }
.chat-input-row button { padding: .6rem 1rem; }

/* Messages */
.chat-msg { padding: .6rem .9rem; border-radius: 12px; max-width: 85%; font-size: .95rem; word-wrap: break-word; }
.msg-user { background-color: #27ae60; color: white; justify-self: end; border-bottom-right-radius: 2px; }
.msg-ai { background-color: #2980b9; color: white; justify-self: start; border-bottom-left-radius: 2px; }

/* Toggle */
.audio-toggle { background: none; border: 1px solid transparent; border-radius: 6px; padding: .3rem .6rem; cursor: pointer; opacity: 0.5; font-size: 1.5rem; }
.audio-toggle:hover { background: var(--color-surface); opacity: 0.8; }
.audio-toggle[aria-pressed="true"] { opacity: 1; border-color: var(--color-primary); }

/* Scrollbar */
.chat-history::-webkit-scrollbar { width: 8px; }
.chat-history::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 4px; }
.chat-history::-webkit-scrollbar-thumb { background-color: #333; border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }
.chat-history::-webkit-scrollbar-thumb:hover { background-color: #555; }

/* Slider */
.penetration-slider { position: relative; display: none; align-items: center; gap: .6rem; background: rgba(0,0,0,0.6); border: 1px solid var(--color-border); border-radius: 999px; padding: .5rem .9rem; backdrop-filter: blur(6px); width: 340px; }
.penetration-slider.is-visible { display: flex; }
.penetration-slider label { white-space: nowrap; margin-right: .6rem; font-size: .9rem; opacity: .95; }
.penetration-slider input[type="range"] { width: 100%; max-width: none; }