/* ── Pickers (slash commands + @-mentions) — stage 2.2 / v1.1.36 ──
   Floating dropdown that lives above the composer. Keyboard-first;
   the mouse just clicks pre-highlighted items. ── */
.cadeo-chat-picker {
    position: absolute;
    bottom: 100%;
    left: 16px;
    right: 16px;
    margin-bottom: 6px;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    padding: 4px;
    z-index: 10;
}
.cadeo-chat-picker-empty {
    padding: 12px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
}
.cadeo-chat-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-in-out);
}
.cadeo-chat-picker-item:hover,
.cadeo-chat-picker-item.is-selected {
    background: var(--bg-secondary);
}
.cadeo-chat-picker-item.is-selected { box-shadow: inset 0 0 0 1px rgba(74,144,217,0.4); }
.cadeo-chat-picker-icon {
    display: inline-flex;
    color: var(--accent-blue);
    flex-shrink: 0;
}
.cadeo-chat-picker-icon svg { width: 14px; height: 14px; }
.cadeo-chat-picker-kind {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    background: var(--bg-secondary);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    min-width: 36px;
    text-align: center;
}
.cadeo-chat-picker-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}
.cadeo-chat-picker-label {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.cadeo-chat-picker-token {
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    font-weight: 400;
    margin-left: 6px;
}
.cadeo-chat-picker-hint {
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cadeo-chat-picker-shortcut {
    flex-shrink: 0;
    font-size: var(--font-size-2xs);
    color: var(--text-tertiary);
    background: var(--bg-secondary);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

/* @-mention pill in the composer — an inline atomic chip the user
   can backspace away as a unit. */
.cadeo-chat-mention-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    margin: 0 2px;
    background: rgba(74,144,217,0.12);
    color: var(--accent-blue);
    border-radius: var(--radius-full);
    font-size: var(--font-size-12);
    font-weight: 600;
    user-select: all;
    cursor: default;
    vertical-align: baseline;
}

@media (prefers-reduced-motion: reduce) {
    .cadeo-chat-picker-item { transition: none; }
}

/* Composer — fixed bottom */
.cadeo-chat-composer-wrap {
    position: relative; /* anchor for the slash/mention picker */
    flex-shrink: 0;
    border-top: 1px solid var(--border-light);
    padding: 10px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cadeo-chat-composer {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.cadeo-chat-input {
    flex: 1;
    min-height: 38px;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--duration-fast) var(--ease-in-out);
}
.cadeo-chat-input:focus { border-color: var(--accent-blue); }
.cadeo-chat-input[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: var(--text-tertiary);
}
.cadeo-chat-send,
.cadeo-chat-stop {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--accent-fill);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast) var(--ease-in-out);
}
.cadeo-chat-send svg,
.cadeo-chat-stop svg { width: 16px; height: 16px; }
.cadeo-chat-send:hover { background: var(--accent-fill-hover); }
.cadeo-chat-send:disabled { background: var(--text-tertiary); cursor: default; opacity: 0.5; }
.cadeo-chat-stop { background: var(--color-red); }
.cadeo-chat-stop:hover { background: var(--color-red-fill-hover); }
.cadeo-chat-send:focus-visible,
.cadeo-chat-stop:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); }

/* Composer footer — model badge + keyboard hints */
.cadeo-chat-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}
.cadeo-chat-model-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-weight: 500;
}
.cadeo-chat-model-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-circle);
    background: var(--color-green-fill);
    flex-shrink: 0;
}
.cadeo-chat-model-badge.is-offline::before { background: var(--text-tertiary); }
.cadeo-chat-model-badge.is-cloud::before { background: var(--accent-blue); }
.cadeo-chat-keys {
    flex: 1;
    text-align: right;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}
.cadeo-chat-keys kbd {
    font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', sans-serif;
    font-size: var(--font-size-2xs);
    background: var(--bg-secondary);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

@media (prefers-reduced-motion: reduce) {
    .cadeo-chat-pin-btn,
    .cadeo-chat-newthread-btn,
    .cadeo-chat-close-btn,
    .cadeo-chat-input,
    .cadeo-chat-send,
    .cadeo-chat-stop,
    .cadeo-chat-example { transition: none; }
    .cadeo-chat-stream-cursor { animation: none; opacity: 1; }
}

/* Zap icon (header entry point) — sits next to the user avatar */
.cadeo-chat-trigger {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast) var(--ease-in-out),
                color var(--duration-fast) var(--ease-in-out);
}
.cadeo-chat-trigger svg { width: 18px; height: 18px; }
.cadeo-chat-trigger:hover { background: var(--bg-secondary); color: var(--accent-blue); }
.cadeo-chat-trigger:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); }
.cadeo-chat-trigger.is-active { color: var(--accent-blue); background: rgba(74,144,217,0.12); }

@media (prefers-reduced-motion: reduce) {
    .cadeo-chat-trigger { transition: none; }
}