/* ═══════════════════════════════════════════════════════════════════════════════
   AI ASSISTANT — Full Stylesheet
   Pixel-perfect match to Linkooc design system.
   Uses CSS custom properties from linkooc-theme.css
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS (local overrides) ────────────────────────────────────────── */
:root {
    --aia-sidebar-w: 380px;
    --aia-green: var(--linkooc-button-primary, #08781B);
    --aia-green-light: var(--linkooc-success-light, #e7f5e9);
    --aia-green-hover: var(--linkooc-green-var-2, #11671E);
    --aia-green-dark: var(--linkooc-button-secondary, #054810);
    --aia-orange: #E67E22;
    --aia-orange-light: #FFF4E6;
    --aia-red: var(--linkooc-error, #BA1919);
    --aia-red-light: #FEF2F2;
    --aia-purple: #7c3aed;
    --aia-text: var(--linkooc-text-display, #000601);
    --aia-text-muted: var(--linkooc-text-muted, #6d6d6d);
    --aia-text-secondary: var(--linkooc-text-display-second, #22AD01);
    --aia-bg: var(--linkooc-bg, #FFFFFF);
    --aia-bg-surface: var(--linkooc-hover-bg, #F7F7F8);
    --aia-border: var(--linkooc-border-color, #dee2e6bf);
    --aia-radius: 12px;
    --aia-radius-sm: 8px;
    --aia-radius-bubble: 18px;
    --aia-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    --aia-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --aia-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --aia-font: var(--linkooc-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

/* ── SIDEBAR PANEL (push layout) ────────────────────────────────────────────── */
.aia-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    width: var(--aia-sidebar-w);
    max-width: 100vw;
    background: var(--aia-bg);
    border-left: 1px solid var(--aia-border);
    display: flex;
    flex-direction: column;
    font-family: var(--aia-font);
    transform: translateX(100%);
    transition: transform var(--aia-transition);
}

.aia-sidebar--open {
    transform: translateX(0);
}

/* ── EMBEDDED MODE (inline in page, not fixed sidebar) ──────────────────────── */
.aia-sidebar--embedded {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
    width: 100%;
    max-width: 100%;
    border-left: none;
    border-radius: var(--aia-radius);
    border: 1px solid var(--aia-border);
    transform: none;
    transition: none;
    height: 100%;
    min-height: 0;
}

/* ── DRAG & DROP OVERLAY ────────────────────────────────────────────────────── */
.aia-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    background: rgba(8, 120, 27, 0.08);
    border: 2px dashed var(--aia-green);
    border-radius: var(--aia-radius);
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.aia-sidebar--drag-active .aia-drop-overlay {
    display: flex;
    animation: aia-drop-fade-in 0.15s ease;
}

.aia-drop-overlay__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--aia-green);
    font-size: 15px;
    font-weight: 500;
}

.aia-drop-overlay__content svg {
    opacity: 0.7;
    animation: aia-drop-bounce 0.6s ease infinite alternate;
}

@keyframes aia-drop-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes aia-drop-bounce {
    from { transform: translateY(0); }
    to   { transform: translateY(-6px); }
}

/* Push layout: shrink the BackOffice .main area when sidebar is open */
.main {
    transition: margin-right var(--aia-transition);
}

body:has(.aia-sidebar--open) .main {
    margin-right: var(--aia-sidebar-w);
}

body:has(.aia-sidebar--open) .aia-fab {
    right: calc(var(--aia-sidebar-w) + 20px);
}

/* ── EXPANDED (full-page) MODE ──────────────────────────────────────────────── */
.aia-sidebar--expanded {
    width: 100vw;
    max-width: 100vw;
    border-left: none;
    z-index: 1200;
}

.aia-sidebar--expanded .aia-header {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    padding: 16px 24px;
}

.aia-sidebar--expanded .aia-messages {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
}

.aia-sidebar--expanded .aia-input-bar {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.aia-sidebar--expanded .aia-context-pills {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
}

/* When expanded, hide the main content entirely and the FAB */
body:has(.aia-sidebar--expanded) .main {
    margin-right: 0;
    opacity: 0;
    pointer-events: none;
}

body:has(.aia-sidebar--expanded) .aia-fab {
    opacity: 0;
    pointer-events: none;
}

/* ── HEADER ─────────────────────────────────────────────────────────────────── */
.aia-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--aia-border);
    flex-shrink: 0;
}

.aia-header__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aia-header__info {
    display: flex;
    flex-direction: column;
}

.aia-header__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--aia-text);
    line-height: 1.2;
}

.aia-header__status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--aia-text-muted);
    line-height: 1.2;
}

.aia-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--aia-green);
    display: inline-block;
}

/* ── Header action buttons (expand + close) ─────────────────────────────────── */
.aia-header__actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.aia-header__expand,
.aia-header__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--aia-text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.aia-header__expand:hover,
.aia-header__close:hover {
    background: var(--aia-bg-surface);
    color: var(--aia-text);
}

/* ── AVATAR ─────────────────────────────────────────────────────────────────── */
.aia-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--aia-green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.aia-avatar--sm {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--aia-green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── MESSAGES AREA ──────────────────────────────────────────────────────────── */
.aia-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-behavior: smooth;
}

.aia-messages::-webkit-scrollbar {
    width: 4px;
}

.aia-messages::-webkit-scrollbar-track {
    background: transparent;
}

.aia-messages::-webkit-scrollbar-thumb {
    background: var(--aia-border);
    border-radius: 2px;
}

/* ── MESSAGE ROW ────────────────────────────────────────────────────────────── */
.aia-msg {
    display: flex;
    gap: 10px;
    max-width: 100%;
    animation: aiaFadeIn 0.2s ease-out;
}

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

.aia-msg--assistant {
    justify-content: flex-start;
    align-items: flex-start;
}

/* ── BUBBLES ────────────────────────────────────────────────────────────────── */
.aia-bubble {
    max-width: 85%;
    line-height: 1.5;
    font-size: 14px;
}

.aia-bubble--user {
    background: var(--aia-green);
    color: white;
    padding: 10px 16px;
    border-radius: var(--aia-radius-bubble) var(--aia-radius-bubble) 4px var(--aia-radius-bubble);
    font-weight: 450;
    word-break: break-word;
}

.aia-bubble--assistant {
    color: var(--aia-text);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aia-bubble__text {
    font-size: 14px;
    color: var(--aia-text);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ── TYPING INDICATOR ───────────────────────────────────────────────────────── */
.aia-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

.aia-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--aia-green);
    opacity: 0.4;
    animation: aiaTyping 1.4s ease-in-out infinite;
}

.aia-typing span:nth-child(2) { animation-delay: 0.2s; }
.aia-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes aiaTyping {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

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

/* ═══════════════════════════════════════════════════════════════════════════════
   CARDS — Shared base styles
   ═══════════════════════════════════════════════════════════════════════════════ */
.aia-card {
    background: var(--aia-bg);
    border: 1px solid var(--aia-border);
    border-radius: var(--aia-radius);
    padding: 16px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aia-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.aia-card__header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aia-card__icon {
    color: var(--aia-text);
    flex-shrink: 0;
}

.aia-card__icon--warn { color: var(--aia-orange); }
.aia-card__icon--error { color: var(--aia-red); }
.aia-card__icon--success { color: var(--aia-green); }
.aia-card__icon--question { color: var(--aia-text-muted); }

.aia-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--aia-text);
}

.aia-card__body {
    font-size: 13.5px;
    color: var(--aia-text);
    line-height: 1.55;
    margin: 0;
}

.aia-card__body--error {
    color: var(--aia-red);
}

.aia-card__details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
    border-top: 1px solid var(--aia-border);
}

.aia-card__detail-line {
    font-size: 13px;
    color: var(--aia-text-muted);
    line-height: 1.4;
}

.aia-card__detail-more {
    font-style: italic;
}

.aia-card__warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--aia-orange-light);
    border-radius: var(--aia-radius-sm);
    font-size: 13px;
    color: var(--aia-orange);
    font-weight: 500;
}

/* ── BADGES ─────────────────────────────────────────────────────────────────── */
.aia-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.aia-badge--safe {
    background: var(--aia-green-light);
    color: var(--aia-green);
}

.aia-badge--warn {
    background: var(--aia-orange-light);
    color: var(--aia-orange);
}

.aia-badge--info {
    background: var(--aia-green-light);
    color: var(--aia-green);
}

/* ── BUTTONS ────────────────────────────────────────────────────────────────── */
.aia-card__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
    flex-wrap: wrap;
}

.aia-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--aia-radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
    font-family: var(--aia-font);
    white-space: nowrap;
}

.aia-btn--primary {
    background: var(--aia-green);
    color: white;
}

.aia-btn--primary:hover:not(:disabled) {
    background: var(--aia-green-hover);
}

.aia-btn--outline {
    background: var(--aia-bg);
    color: var(--aia-text);
    border: 1px solid var(--aia-border);
}

.aia-btn--outline:hover:not(:disabled) {
    background: var(--aia-bg-surface);
    border-color: var(--aia-text-muted);
}

.aia-btn--text {
    background: transparent;
    color: var(--aia-text-muted);
    padding: 8px 12px;
}

.aia-btn--text:hover {
    color: var(--aia-text);
}

.aia-btn--disabled,
.aia-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── LINKS (reject, undo) ──────────────────────────────────────────────────── */
.aia-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--aia-text-muted);
    cursor: pointer;
    border: none;
    background: none;
    padding: 2px 0;
    font-family: var(--aia-font);
    transition: color 0.15s ease;
}

.aia-link:hover {
    color: var(--aia-text);
}

.aia-link--reject { color: var(--aia-text-muted); }
.aia-link--undo { color: var(--aia-green); }

.aia-undone-label {
    font-size: 12px;
    color: var(--aia-text-muted);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CARD VARIANTS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Suggestion card */
.aia-card--suggestion {
    border-color: var(--aia-border);
}

/* Confirmation card (destructive) */
.aia-card--confirmation {
    border-color: var(--aia-orange);
    border-left: 3px solid var(--aia-orange);
}

/* Question card */
.aia-card--question {
    border-color: var(--aia-border);
}

/* Plan card */
.aia-card--plan {
    border-color: var(--aia-border);
}

/* Success card */
.aia-card--success {
    background: var(--aia-green-light);
    border-color: transparent;
}

.aia-card--success .aia-card__title {
    color: var(--aia-green-dark);
}

/* Failed card */
.aia-card--failed {
    background: var(--aia-red-light);
    border-color: transparent;
}

/* ── CHECKBOX ───────────────────────────────────────────────────────────────── */
.aia-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--aia-bg-surface);
    border-radius: var(--aia-radius-sm);
    cursor: pointer;
    font-size: 13px;
    color: var(--aia-text);
    line-height: 1.4;
}

.aia-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    accent-color: var(--aia-green);
    flex-shrink: 0;
    cursor: pointer;
}

.aia-checkbox__label {
    cursor: pointer;
}

/* ── RADIO GROUP (questions) ────────────────────────────────────────────────── */
.aia-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.aia-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--aia-border);
    border-bottom: none;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--aia-text);
    background: var(--aia-bg);
    transition: background 0.15s ease;
}

.aia-radio:first-child {
    border-radius: var(--aia-radius-sm) var(--aia-radius-sm) 0 0;
}

.aia-radio:last-child {
    border-bottom: 1px solid var(--aia-border);
    border-radius: 0 0 var(--aia-radius-sm) var(--aia-radius-sm);
}

.aia-radio:hover {
    background: var(--aia-bg-surface);
}

.aia-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--aia-border);
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.aia-radio input[type="radio"]:checked {
    border-color: var(--aia-green);
}

.aia-radio input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--aia-green);
}

.aia-radio__circle { display: none; }
.aia-radio__label { cursor: pointer; }

/* ── PLAN STEPS ─────────────────────────────────────────────────────────────── */
.aia-plan-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aia-plan-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
}

.aia-plan-step__num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--aia-green-light);
    color: var(--aia-green);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.aia-plan-step__content {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.aia-plan-step__tool {
    font-size: 12px;
    font-weight: 600;
    color: var(--aia-text);
    font-family: monospace;
}

.aia-plan-step__desc {
    font-size: 12.5px;
    color: var(--aia-text-muted);
}

.aia-plan-step--rejected {
    opacity: 0.5;
    text-decoration: line-through;
}

/* ── PLAN PREVIEW (bulk import) ─────────────────────────────────────────────── */
.aia-plan__summary {
    font-size: 13px;
    color: var(--aia-text);
    margin: 0 0 8px;
    line-height: 1.4;
}

.aia-plan__badges {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.aia-plan-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.aia-plan-badge--add {
    background: var(--aia-green-light);
    color: var(--aia-green);
}

.aia-plan-badge--modify {
    background: var(--aia-orange-light);
    color: var(--aia-orange);
}

.aia-plan-badge--delete {
    background: var(--aia-red-light);
    color: var(--aia-red);
}

/* Review mode counter */
.aia-plan__review-counter {
    font-size: 12px;
    color: var(--aia-text-muted);
    margin-bottom: 10px;
    display: flex;
    gap: 6px;
    align-items: center;
}

.aia-plan__counter-accepted { color: var(--aia-green); font-weight: 600; }
.aia-plan__counter-rejected { color: var(--aia-red); font-weight: 600; }
.aia-plan__counter-sep { color: var(--aia-border); }

/* Category groups */
.aia-plan__categories {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aia-plan-cat {
    border: 1px solid var(--aia-border);
    border-radius: var(--aia-radius);
    overflow: hidden;
    background: var(--aia-bg);
}

.aia-plan-cat__header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--aia-bg-surface);
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--aia-text);
    text-align: left;
    font-family: var(--aia-font);
    transition: background var(--aia-transition);
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
}

.aia-plan-cat__header:hover {
    background: var(--aia-border);
}

.aia-plan-cat__chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: var(--aia-text-muted);
}

.aia-plan-cat__chevron--open {
    transform: rotate(90deg);
}

.aia-plan-cat__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.aia-plan-cat__counts {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
    padding-right: 6px;
}

.aia-cat-count {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
}

.aia-cat-count--add { background: var(--aia-green-light); color: var(--aia-green); }
.aia-cat-count--modify { background: var(--aia-orange-light); color: var(--aia-orange); }
.aia-cat-count--delete { background: var(--aia-red-light); color: var(--aia-red); }

/* Category header row (wraps header button + category-level actions) */
.aia-plan-cat__header-row {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}

.aia-plan-cat__header-row .aia-plan-cat__header {
    flex: 1 1 0;
    min-width: 0;
}

.aia-plan-cat__folder {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
}

/* Category type badges (existante / NOUVELLE) */
.aia-plan-cat__type-badge {
    flex-shrink: 0;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0px 4px;
    border-radius: 4px;
    line-height: 1.6;
}

.aia-plan-cat__type-badge--existing {
    background: var(--aia-bg-surface);
    color: var(--aia-text-muted);
    border: 1px solid var(--aia-border);
}

.aia-plan-cat__type-badge--new {
    background: var(--aia-purple, #7c3aed);
    color: #fff;
}

/* Category-level accept/reject actions */
.aia-plan-cat__actions {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 6px 4px 0;
    flex-shrink: 0;
}

/* New category variant (subtle left accent) */
.aia-plan-cat--new {
    border-left: 3px solid var(--aia-purple, #7c3aed);
}

/* New categories badge in summary */
.aia-plan-badge--new-cat {
    background: rgba(124, 58, 237, 0.1);
    color: var(--aia-purple, #7c3aed);
}

/* Items container */
.aia-plan-cat__items {
    display: flex;
    flex-direction: column;
}

/* Category with children indicator */
.aia-plan-cat--has-children > .aia-plan-cat__header-row .aia-plan-cat__folder::after {
    content: "▸";
    font-size: 8px;
    margin-left: -2px;
    opacity: 0.5;
}

/* Drag handle (grip dots) */
.aia-plan-cat__drag-handle {
    display: flex;
    align-items: center;
    padding: 4px 2px;
    cursor: grab;
    flex-shrink: 0;
}

.aia-plan-cat__drag-handle:active {
    cursor: grabbing;
}

/* Drop target highlight */
.aia-plan-cat--drop-target {
    outline: 2px dashed var(--aia-purple, #7c3aed);
    outline-offset: -2px;
    background: rgba(124, 58, 237, 0.05);
}

/* Category rename inline input */
.aia-plan-cat__rename-input {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--aia-font);
    color: var(--aia-text);
    background: var(--aia-bg);
    border: 1px solid var(--aia-purple, #7c3aed);
    border-radius: var(--aia-radius-sm);
    padding: 2px 6px;
    outline: none;
    min-width: 0;
}

.aia-plan-cat__rename-input:focus {
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

/* Item dragging state */
.aia-plan-item--dragging {
    opacity: 0.4;
}

.aia-plan-item[draggable="true"] {
    cursor: grab;
}

.aia-plan-item[draggable="true"]:active {
    cursor: grabbing;
}

/* Edit button for category rename */
.aia-plan-item__btn--edit {
    color: var(--aia-text-muted);
}

.aia-plan-item__btn--edit:hover {
    color: var(--aia-purple, #7c3aed);
    background: rgba(124, 58, 237, 0.1);
}

/* Individual item row */
.aia-plan-item {
    padding: 8px 12px 8px 14px;
    border-top: 1px solid color-mix(in srgb, var(--aia-border) 50%, transparent);
    transition: background var(--aia-transition), opacity var(--aia-transition);
}

.aia-plan-item:first-child {
    border-top: none;
}

.aia-plan-item--accepted {
    background: var(--aia-green-light);
}

.aia-plan-item--rejected {
    background: var(--aia-red-light);
    opacity: 0.6;
}

.aia-plan-item__main {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Change type icons */
.aia-plan-item__icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.aia-plan-item__icon--add {
    background: var(--aia-green-light);
    color: var(--aia-green);
}

.aia-plan-item__icon--modify {
    background: var(--aia-orange-light);
    color: var(--aia-orange);
}

.aia-plan-item__icon--delete {
    background: var(--aia-red-light);
    color: var(--aia-red);
}

.aia-plan-item__info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.aia-plan-item__name {
    font-size: 13px;
    font-weight: 500;
    color: var(--aia-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aia-plan-item__name--strike {
    text-decoration: line-through;
    color: var(--aia-red);
}

.aia-plan-item__price {
    font-size: 12px;
    font-weight: 600;
    color: var(--aia-text-muted);
    white-space: nowrap;
}

/* Item toolbar (edit fields + review actions on own row) */
.aia-plan-item__toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding-left: 28px;
}

.aia-plan-item__edit-btns {
    display: flex;
    gap: 3px;
}

.aia-plan-item__review-btns {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

.aia-plan-item__btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--aia-border);
    background: var(--aia-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s ease;
    color: var(--aia-text-muted);
}

.aia-plan-item__btn:hover {
    border-color: var(--aia-text-muted);
}

.aia-plan-item__btn--accept.aia-plan-item__btn--active {
    background: var(--aia-green);
    border-color: var(--aia-green);
    color: white;
}

.aia-plan-item__btn--reject.aia-plan-item__btn--active {
    background: var(--aia-red);
    border-color: var(--aia-red);
    color: white;
}

/* Change details (old → new) */
.aia-plan-item__details {
    margin-top: 4px;
    padding-left: 28px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aia-plan-item__detail {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 11.5px;
    flex-wrap: wrap;
    line-height: 1.6;
}

.aia-plan-item__detail-label {
    color: var(--aia-text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.aia-plan-item__detail-old {
    color: var(--aia-red);
    text-decoration: line-through;
}

.aia-plan-item__detail-arrow {
    color: var(--aia-text-muted);
    font-size: 10px;
}

.aia-plan-item__detail-new {
    color: var(--aia-green);
    font-weight: 500;
}

/* Inline edit inputs */
.aia-plan-item__input {
    font-family: var(--aia-font);
    font-size: 12px;
    padding: 3px 6px;
    border: 1.5px solid var(--aia-green);
    border-radius: 4px;
    outline: none;
    background: var(--aia-bg);
    color: var(--aia-text);
    transition: border-color 0.15s ease;
}

.aia-plan-item__input:focus {
    border-color: var(--aia-green);
    box-shadow: 0 0 0 2px rgba(8, 120, 27, 0.15);
}

.aia-plan-item__input--text {
    flex: 1;
    min-width: 80px;
}

.aia-plan-item__input--price {
    width: 70px;
    text-align: right;
}

/* Edit trigger button on details */
.aia-plan-item__edit-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--aia-text-muted);
    padding: 2px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.aia-plan-item__detail:hover .aia-plan-item__edit-btn {
    opacity: 1;
}

.aia-plan-item__edit-btn:hover {
    color: var(--aia-green);
}

/* Edit cancel button */
.aia-plan-item__edit-cancel {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--aia-red);
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 3px;
    display: flex;
    align-items: center;
}

.aia-plan-item__edit-cancel:hover {
    background: var(--aia-red-light);
}

/* Edit row — legacy class, now inside toolbar */
.aia-plan-item__edit-row {
    margin-top: 4px;
    padding-left: 28px;
    display: flex;
    gap: 4px;
}

.aia-plan-item__edit-field-btn {
    font-family: var(--aia-font);
    font-size: 10px;
    padding: 1px 6px;
    border: 1px solid var(--aia-border);
    border-radius: 10px;
    background: var(--aia-bg);
    color: var(--aia-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0;
    transition: all 0.15s ease;
    line-height: 1.4;
    white-space: nowrap;
}

.aia-plan-item__edit-field-btn:hover {
    border-color: var(--aia-green);
    color: var(--aia-green);
    background: var(--aia-green-light);
}

/* Inline edit section under item */
.aia-plan-item__inline-edit {
    margin-top: 4px;
    padding-left: 28px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Confirm small button in header */
.aia-btn--confirm-sm {
    font-family: var(--aia-font);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    border: none;
    background: var(--aia-green);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s ease;
}

.aia-btn--confirm-sm:hover {
    background: var(--aia-green-hover);
}

/* Disabled primary button */
.aia-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── MULTI-PRICE DISPLAY ────────────────────────────────────────────────────── */
.aia-plan-item__prices {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.aia-plan-item__price-entry {
    display: flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

.aia-plan-item__price-unit {
    font-size: 10px;
    color: var(--aia-text-muted);
    font-weight: 400;
    opacity: 0.8;
}

.aia-plan-item__price-entry + .aia-plan-item__price-entry::before {
    content: "·";
    color: var(--aia-text-muted);
    margin-right: 2px;
    opacity: 0.5;
}

/* ── MULTI-PRICE EDITOR ─────────────────────────────────────────────────────── */
.aia-plan-item__prices-editor {
    width: 100%;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--vscode-editor-background, #f9fafb);
    border: 1px solid var(--aia-border);
    border-radius: var(--aia-radius);
    padding: 8px 10px;
}

.aia-plan-item__price-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.aia-plan-item__price-row--header {
    padding-bottom: 2px;
    border-bottom: 1px solid var(--aia-border);
    margin-bottom: 2px;
}

.aia-plan-item__price-col-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--aia-text-muted);
}

.aia-plan-item__price-col-label--unit {
    flex: 1 1 100px;
    min-width: 0;
}

.aia-plan-item__price-col-label--price {
    width: 72px;
    flex: 0 0 72px;
    text-align: right;
}

.aia-plan-item__input--unit {
    flex: 1 1 100px;
    min-width: 0;
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid var(--aia-border);
    border-radius: 4px;
    background: var(--aia-surface, #fff);
    color: var(--aia-text);
}

.aia-plan-item__input--price-num {
    width: 72px;
    flex: 0 0 72px;
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid var(--aia-border);
    border-radius: 4px;
    background: var(--aia-surface, #fff);
    color: var(--aia-text);
    text-align: right;
}

.aia-plan-item__price-currency {
    font-size: 12px;
    color: var(--aia-text-muted);
    flex-shrink: 0;
}

.aia-plan-item__price-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--aia-text-muted);
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 4px;
    flex-shrink: 0;
    line-height: 1;
}

.aia-plan-item__price-remove:hover {
    background: var(--aia-red-light);
    color: var(--aia-red);
}

.aia-plan-item__price-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    padding-top: 4px;
    border-top: 1px solid var(--aia-border);
}

.aia-plan-item__price-add {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--aia-green);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.aia-plan-item__price-add:hover {
    background: var(--aia-green-light, rgba(34, 197, 94, 0.08));
}

.aia-plan-item__price-done {
    background: none;
    border: 1px solid var(--aia-green);
    cursor: pointer;
    color: var(--aia-green);
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 600;
    margin-left: auto;
}

.aia-plan-item__price-done:hover {
    background: var(--aia-green);
    color: white;
}

.aia-plan-item__edit-multi-btn {
    background: none;
    border: 1px dashed var(--aia-border);
    cursor: pointer;
    color: var(--aia-text-muted);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
}

.aia-plan-item__edit-multi-btn:hover {
    border-color: var(--aia-green);
    color: var(--aia-green);
    background: var(--aia-green-light, rgba(34, 197, 94, 0.08));
}

/* ── DÉPLACER BUTTON ────────────────────────────────────────────────────────── */
.aia-plan-item__btn--move {
    color: var(--aia-text-muted);
    border-color: transparent;
    background: transparent;
}

.aia-plan-item__btn--move:hover {
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.08);
}

/* ── REORDER BUTTONS ────────────────────────────────────────────────────────── */
.aia-plan-item__btn--reorder {
    color: var(--aia-text-muted);
    border-color: transparent;
    background: transparent;
}

.aia-plan-item__btn--reorder:hover:not(:disabled) {
    color: var(--aia-text);
    background: rgba(0, 0, 0, 0.06);
    border-color: var(--aia-border);
}

.aia-plan-item__btn--reorder:disabled {
    opacity: 0.2;
    cursor: default;
}

/* ── MOVE DIALOG (Déplacer vers...) ─────────────────────────────────────────── */
.aia-move-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.aia-move-dialog {
    background: var(--aia-bg);
    border: 1px solid var(--aia-border);
    border-radius: var(--aia-radius);
    box-shadow: var(--aia-shadow-lg);
    min-width: 260px;
    max-width: 340px;
    max-height: 400px;
    display: flex;
    flex-direction: column;
}

.aia-move-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--aia-border);
}

.aia-move-dialog__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--aia-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aia-move-dialog__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--aia-text-muted);
    font-size: 14px;
    padding: 2px;
    border-radius: 4px;
}

.aia-move-dialog__close:hover {
    background: var(--aia-red-light);
    color: var(--aia-red);
}

.aia-move-dialog__list {
    overflow-y: auto;
    padding: 6px 0;
}

.aia-move-dialog__option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--aia-font);
    font-size: 13px;
    color: var(--aia-text);
    text-align: left;
    transition: background 0.1s ease;
}

.aia-move-dialog__option:hover {
    background: rgba(124, 58, 237, 0.08);
}

.aia-move-dialog__folder {
    font-size: 14px;
}

.aia-move-dialog__empty {
    padding: 16px 12px;
    text-align: center;
    font-size: 12px;
    color: var(--aia-text-muted);
}

/* ── SUCCESS DETAILS ────────────────────────────────────────────────────────── */
.aia-success-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aia-success-detail {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--aia-text);
    line-height: 1.45;
}

.aia-success-detail svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.aia-success-meta {
    font-size: 11.5px;
    color: var(--aia-text-muted);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CONTEXT PILLS
   ═══════════════════════════════════════════════════════════════════════════════ */
.aia-context-pills {
    display: flex;
    gap: 6px;
    padding: 6px 16px;
    border-top: 1px solid var(--aia-border);
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
}

.aia-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: var(--aia-green-light);
    color: var(--aia-green);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.4;
}

.aia-pill__label {
    color: var(--aia-text-muted);
    font-weight: 400;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.aia-pill__value {
    color: var(--aia-green);
    font-weight: 600;
}

.aia-pill__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: none;
    background: transparent;
    color: var(--aia-text-muted);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    margin-left: 1px;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.aia-pill__remove:hover {
    background: rgba(8, 120, 27, 0.15);
    color: var(--aia-green);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   INPUT BAR
   ═══════════════════════════════════════════════════════════════════════════════ */
.aia-input-bar {
    padding: 12px 16px 10px;
    border-top: 1px solid var(--aia-border);
    flex-shrink: 0;
}

.aia-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--aia-border);
    border-radius: 24px;
    background: var(--aia-bg);
    transition: border-color 0.15s ease;
}

.aia-input-wrapper:focus-within {
    border-color: var(--aia-green);
    box-shadow: 0 0 0 3px rgba(8, 120, 27, 0.08);
}

.aia-input-icon {
    color: var(--aia-text-muted);
    flex-shrink: 0;
}

.aia-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13.5px;
    font-family: var(--aia-font);
    color: var(--aia-text);
    padding: 2px 0;
}

.aia-input::placeholder {
    color: var(--aia-text-muted);
}

.aia-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--aia-green);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.aia-send-btn:hover:not(:disabled) {
    background: var(--aia-green-hover);
}

.aia-send-btn--disabled,
.aia-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.aia-disclaimer {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--aia-text-muted);
    text-align: center;
    line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ATTACHMENT BUTTON & STRIP
   ═══════════════════════════════════════════════════════════════════════════════ */
.aia-attach-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--aia-text-muted);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: color 0.15s ease, background 0.15s ease;
}

.aia-attach-btn:hover {
    color: var(--aia-green);
    background: rgba(8, 120, 27, 0.08);
}

.aia-attachments-strip {
    display: flex;
    gap: 8px;
    padding: 0 4px 8px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.aia-attachment-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--aia-border);
    flex-shrink: 0;
}

.aia-attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover overlay with action buttons (same pattern as Image.razor) */
.aia-attachment-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 1;
}

.aia-attachment-thumb:hover .aia-attachment-overlay {
    opacity: 1;
}

.aia-attachment-action {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: var(--aia-text, #1e1e1e);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 0.7rem;
    padding: 0;
}

.aia-attachment-action:hover {
    background: var(--aia-green, #08781B);
    color: #fff;
}

.aia-attachment-action--danger:hover {
    background: var(--aia-danger, #dc3545);
    color: #fff;
}

/* Attachment error toast */
.aia-attachment-error {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.25);
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--aia-danger, #dc3545);
    margin-bottom: 4px;
}

.aia-attachment-error__dismiss {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--aia-danger, #dc3545);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
}

/* PDF conversion indicator */
.aia-attachment-converting {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--aia-text-muted);
    font-size: 0.8rem;
    animation: aia-pulse 1.5s ease-in-out infinite;
}

.aia-attachment-converting i {
    font-size: 1.2rem;
    color: var(--aia-green);
}

@keyframes aia-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* File icon for text attachments in the attachment strip */
.aia-attachment-file-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--aia-surface);
    gap: 2px;
}

.aia-attachment-file-icon i {
    font-size: 1.3rem;
    color: var(--aia-green);
}

.aia-attachment-file-name {
    font-size: 0.55rem;
    color: var(--aia-text-muted);
    line-height: 1.1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 56px;
    padding: 0 2px;
}

/* Text file badge in message history */
.aia-msg-file-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(8, 120, 27, 0.1);
    border: 1px solid rgba(8, 120, 27, 0.2);
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--aia-text);
}

.aia-msg-file-badge i {
    color: var(--aia-green);
}

/* Images in sent user messages — clickable */
.aia-msg-image {
    transition: opacity 0.15s ease;
}

.aia-msg-image:hover {
    opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   IMAGE PREVIEW LIGHTBOX
   ═══════════════════════════════════════════════════════════════════════════════ */
.aia-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: aia-lightbox-in 0.2s ease;
    cursor: pointer;
}

@keyframes aia-lightbox-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.aia-lightbox__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 90vw;
    max-height: 90vh;
    cursor: default;
}

.aia-lightbox__content img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.aia-lightbox__caption {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    text-align: center;
    max-width: 50vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aia-lightbox__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.aia-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Images in sent user messages */
.aia-msg-images {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.aia-msg-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FLOATING ACTION BUTTON
   ═══════════════════════════════════════════════════════════════════════════════ */
.aia-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1098;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 14px;
    background: var(--aia-green);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(8, 120, 27, 0.35);
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, right var(--aia-transition);
}

.aia-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(8, 120, 27, 0.45);
}

.aia-fab:active {
    transform: scale(0.97);
}

.aia-fab--hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    :root {
        --aia-sidebar-w: 100vw;
    }

    .aia-fab {
        top: auto;
        bottom: 16px;
        right: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .aia-sidebar,
    .aia-fab,
    .aia-msg,
    .aia-typing span {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CARD SHELL — Header Right Slot
   ═══════════════════════════════════════════════════════════════════════════════ */
.aia-card__header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RISK BADGE
   ═══════════════════════════════════════════════════════════════════════════════ */
.aia-risk {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.aia-risk svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.aia-risk--readonly {
    background: #EBF5FB;
    color: #2980B9;
}

.aia-risk--safe {
    background: var(--aia-green-light);
    color: var(--aia-green);
}

.aia-risk--reversible {
    background: var(--aia-green-light);
    color: var(--aia-green-dark);
    border: 1px solid var(--aia-green);
}

.aia-risk--destructive {
    background: var(--aia-orange-light);
    color: #C0392B;
    border: 1px solid var(--aia-orange);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   EXECUTION CARD — Executing Spinner State
   ═══════════════════════════════════════════════════════════════════════════════ */
.aia-card--executing {
    border-color: var(--aia-border);
    background: var(--aia-bg-surface);
}

.aia-exec-spinner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.aia-exec-spinner__ring {
    width: 22px;
    height: 22px;
    border: 3px solid var(--aia-border);
    border-top-color: var(--aia-green);
    border-radius: 50%;
    animation: aia-spin 0.8s linear infinite;
}

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

.aia-exec-spinner__label {
    font-size: 0.85rem;
    color: var(--aia-text-muted);
}

.aia-exec-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.aia-exec-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--aia-text-muted);
}

.aia-exec-step svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.aia-exec-step--done {
    color: var(--aia-green);
}

.aia-exec-step--pending {
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   UNDO TOAST
   ═══════════════════════════════════════════════════════════════════════════════ */
.aia-undo-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--aia-text, #1a1a1a);
    color: #fff;
    border-radius: var(--aia-radius-sm);
    box-shadow: var(--aia-shadow);
    font-size: 0.85rem;
    animation: aia-toast-in 0.25s ease-out;
    overflow: hidden;
}

.aia-undo-toast--exit {
    animation: aia-toast-out 0.2s ease-in forwards;
}

@keyframes aia-toast-in {
    from { transform: translateX(-50%) translateY(20px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}

@keyframes aia-toast-out {
    from { transform: translateX(-50%) translateY(0); opacity: 1; }
    to   { transform: translateX(-50%) translateY(20px); opacity: 0; }
}

.aia-undo-toast__message {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aia-undo-toast__undo-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    color: var(--aia-green-light);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.aia-undo-toast__undo-btn:hover {
    background: rgba(255,255,255,0.1);
}

.aia-undo-toast__close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}

.aia-undo-toast__close:hover {
    color: #fff;
}

.aia-undo-toast__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--aia-green);
    animation: aia-toast-progress var(--toast-duration, 5s) linear forwards;
}

@keyframes aia-toast-progress {
    from { width: 100%; }
    to   { width: 0%; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AI EXPANDED PANEL — Full-screen overlay with sessions sidebar + chat replay
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Navbar button accent ────────────────────────────────────────────────────── */
.topbar-btn-ai svg {
    color: var(--aia-green);
}
.topbar-btn-ai:hover svg {
    color: var(--aia-green-hover);
}

/* ── Overlay backdrop ────────────────────────────────────────────────────────── */
.aix-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 24px;
    animation: aix-fade-in 0.2s ease-out;
}

@keyframes aix-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Container (sessions + chat) ─────────────────────────────────────────────── */
.aix-container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    background: var(--aia-bg);
    border-radius: var(--aia-radius);
    box-shadow: var(--aia-shadow);
    overflow: hidden;
    animation: aix-scale-in 0.2s ease-out;
}

@keyframes aix-scale-in {
    from { transform: scale(0.97); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ── Sessions sidebar ────────────────────────────────────────────────────────── */
.aix-sessions {
    width: 280px;
    min-width: 280px;
    background: var(--aia-bg-surface);
    border-right: 1px solid var(--aia-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.aix-sessions__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--aia-border);
}

.aix-sessions__title {
    font-family: var(--aia-font);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--aia-text);
    margin: 0;
}

.aix-sessions__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--aia-radius-sm);
    background: transparent;
    color: var(--aia-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.aix-sessions__close:hover {
    background: var(--aia-border);
    color: var(--aia-text);
}

/* ── New session button ──────────────────────────────────────────────────────── */
.aix-session-new {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 12px 8px;
    padding: 10px 14px;
    border: 1px dashed var(--aia-border);
    border-radius: var(--aia-radius-sm);
    background: var(--aia-bg);
    color: var(--aia-green);
    font-family: var(--aia-font);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.aix-session-new:hover {
    border-color: var(--aia-green);
    background: var(--aia-green-light);
}

/* ── Session list ────────────────────────────────────────────────────────────── */
.aix-sessions__list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.aix-sessions__group-label {
    padding: 10px 16px 4px;
    font-family: var(--aia-font);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--aia-text-muted);
}

.aix-session-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.12s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: var(--aia-font);
}

.aix-session-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.aix-session-item--active {
    background: var(--aia-green-light);
}

.aix-session-item--active:hover {
    background: var(--aia-green-light);
}

.aix-session-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--aia-radius-sm);
    background: var(--aia-bg);
    border: 1px solid var(--aia-border);
    flex-shrink: 0;
}

.aix-session-item--active .aix-session-item__icon {
    background: var(--aia-green);
    border-color: var(--aia-green);
    color: #fff;
}

.aix-session-item__info {
    flex: 1;
    min-width: 0;
}

.aix-session-item__title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--aia-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aix-session-item__meta {
    font-size: 0.75rem;
    color: var(--aia-text-muted);
    margin-top: 1px;
}

/* ── Chat replay area ────────────────────────────────────────────────────────── */
.aix-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--aia-bg);
}

.aix-chat__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--aia-border);
}

.aix-chat__header-title {
    font-family: var(--aia-font);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--aia-text);
}

.aix-chat__header-date {
    font-family: var(--aia-font);
    font-size: 0.8rem;
    color: var(--aia-text-muted);
}

/* ── Chat messages ───────────────────────────────────────────────────────────── */
.aix-chat__messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aix-chat__msg {
    display: flex;
    gap: 10px;
    max-width: 80%;
}

.aix-chat__msg--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.aix-chat__msg--assistant {
    align-self: flex-start;
}

.aix-chat__msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.aix-chat__msg--user .aix-chat__msg-avatar {
    background: var(--aia-green);
    color: #fff;
}

.aix-chat__msg--assistant .aix-chat__msg-avatar {
    background: var(--aia-bg-surface);
    border: 1px solid var(--aia-border);
    color: var(--aia-green);
}

.aix-chat__msg-bubble {
    padding: 10px 14px;
    border-radius: var(--aia-radius-bubble);
    font-family: var(--aia-font);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--aia-text);
    word-wrap: break-word;
}

.aix-chat__msg--user .aix-chat__msg-bubble {
    background: var(--aia-green);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.aix-chat__msg--assistant .aix-chat__msg-bubble {
    background: var(--aia-bg-surface);
    border: 1px solid var(--aia-border);
    border-bottom-left-radius: 4px;
}

.aix-chat__msg-time {
    font-size: 0.7rem;
    color: var(--aia-text-muted);
    margin-top: 4px;
    text-align: right;
}

.aix-chat__msg--assistant .aix-chat__msg-time {
    text-align: left;
}

/* ── Empty & loading states ──────────────────────────────────────────────────── */
.aix-chat__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--aia-text-muted);
    font-family: var(--aia-font);
}

.aix-chat__empty svg {
    color: var(--aia-green);
    opacity: 0.4;
}

.aix-chat__empty-text {
    font-size: 0.9rem;
}

.aix-chat__empty-hint {
    font-size: 0.8rem;
    opacity: 0.7;
}

.aix-chat__loading,
.aix-sessions__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--aia-text-muted);
    font-family: var(--aia-font);
    font-size: 0.85rem;
}

.aix-sessions__empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--aia-text-muted);
    font-family: var(--aia-font);
    font-size: 0.85rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .aix-overlay {
        padding: 0;
    }
    .aix-container {
        border-radius: 0;
        flex-direction: column;
    }
    .aix-sessions {
        width: 100%;
        min-width: unset;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--aia-border);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AI SESSIONS PAGE — /ai-sessions
   Uses linkooc-master-detail layout. Only page-specific overrides below.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Session group date labels ───────────────────────────────────────────────── */
.linkooc-list-group-label {
    padding: 10px var(--linkooc-spacing-md, 1rem) 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--linkooc-text-muted, #6d6d6d);
}

/* ── Chat messages scroll area (inside linkooc-detail-content) ───────────────── */
.linkooc-detail-panel .aip-chat__messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* (Search styles removed — page now uses linkooc-search-box pattern) */

/* ═══════════════════════════════════════════════════════════════════════════════
   USAGE PANEL — Copilot-style usage quota dropdown
   ═══════════════════════════════════════════════════════════════════════════════ */

.aia-header__expand--active {
    color: var(--aia-green);
}

.aia-usage-panel {
    border-bottom: 1px solid var(--linkooc-border-subtle, #e5e5e5);
    background: var(--linkooc-bg-secondary, #fafafa);
    padding: 14px 16px;
    font-size: 13px;
    animation: aia-slide-down .15s ease-out;
}

@keyframes aia-slide-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.aia-usage-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.aia-usage-panel__title {
    font-weight: 600;
    font-size: 13px;
    color: var(--linkooc-text-primary, #1a1a1a);
}

.aia-usage-panel__settings {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--linkooc-text-secondary, #666);
    border-radius: 4px;
    transition: background .15s;
}

.aia-usage-panel__settings:hover {
    background: var(--linkooc-hover-bg, rgba(0,0,0,.05));
}

.aia-usage-panel__rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aia-usage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--linkooc-border-subtle, #e9e9e9);
}

.aia-usage-row:last-of-type {
    border-bottom: none;
}

.aia-usage-row__label {
    color: var(--linkooc-text-primary, #1a1a1a);
    font-weight: 500;
}

.aia-usage-row__value {
    color: var(--linkooc-text-secondary, #666);
    font-weight: 600;
}

.aia-usage-bar {
    padding: 2px 0;
}

.aia-usage-bar__track {
    height: 6px;
    background: var(--linkooc-border-subtle, #e5e5e5);
    border-radius: 3px;
    overflow: hidden;
}

.aia-usage-bar__fill {
    height: 100%;
    background: var(--aia-green);
    border-radius: 3px;
    transition: width .3s ease;
}

.aia-usage-bar__fill--warning {
    background: #e6a700;
}

.aia-usage-bar__fill--danger {
    background: #d93025;
}

.aia-usage-panel__detail {
    font-size: 12px;
    color: var(--linkooc-text-secondary, #888);
    text-align: center;
}

.aia-usage-panel__note {
    font-size: 12px;
    color: var(--linkooc-text-secondary, #888);
    margin-top: 4px;
    line-height: 1.4;
}

.aia-usage-panel__note--warning {
    color: #d93025;
    font-weight: 500;
}

.aia-usage-panel__loading {
    text-align: center;
    color: var(--linkooc-text-secondary, #888);
    padding: 8px 0;
}