// Three-column chat layout: 10% | 80% | 10% (resizable)

.o_action_manager:has(.o_ai_chat) {
    height: 100%;

    > .o_action.o_ai_chat {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0;
    }
}

.o_content:has(.o_ai_chat) {
    padding: 0 !important;
    overflow: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    display: flex;
    flex-direction: column;
}

.o_ai_chat.o_action {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex: 1 1 auto;
    align-items: stretch;
    align-self: stretch;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0;
    overflow: hidden;
    background: var(--o-view-background-color, #f8f9fa);
    padding: 0;
    margin: 0;
}

.o_ai_chat_col {
    min-height: 0;
    height: 100%;

    &--left {
        flex: 0 0 var(--ai-left-width, 10%);
        width: var(--ai-left-width, 10%);
        min-width: 0;
        background: var(--o-gray-100, #f1f3f5);
        overflow: hidden;
    }

    &--center {
        flex: 1 1 var(--ai-center-width, 80%);
        width: var(--ai-center-width, 80%);
        min-width: 0;
        background: #fff;
        overflow: hidden;
    }

    &--right {
        flex: 0 0 var(--ai-right-width, 10%);
        width: var(--ai-right-width, 10%);
        min-width: 0;
        background: var(--o-gray-100, #f1f3f5);
        overflow: hidden;
        padding: 0.75rem 0.5rem;
    }
}

.o_ai_chat_resize_handle {
    flex: 0 0 6px;
    width: 6px;
    cursor: col-resize;
    background: transparent;
    align-self: stretch;
    position: relative;
    z-index: 3;
    touch-action: none;
    transition: background 0.15s;

    &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 2px;
        width: 2px;
        background: var(--border-color, #dee2e6);
    }

    &:hover,
    &--active {
        background: rgba(113, 75, 103, 0.12);

        &::after {
            background: var(--o-brand-primary, #714b67);
            width: 3px;
            left: 1px;
        }
    }
}

body.o_ai_chat_resizing {
    cursor: col-resize !important;
    user-select: none !important;
}

.o_ai_chat_history_item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.25rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 0.15s;

    &:hover {
        background: rgba(0, 0, 0, 0.05);

        .o_ai_chat_delete {
            opacity: 1;
        }
    }

    &.active {
        background: var(--o-brand-primary, #714b67);
        color: #fff;

        .o_ai_chat_delete {
            color: rgba(255, 255, 255, 0.8);
            opacity: 1;
        }
    }
}

.o_ai_chat_history_title {
    flex: 1;
    font-size: 0.85rem;
}

.o_ai_chat_delete {
    opacity: 0;
    flex-shrink: 0;
}

.o_ai_chat_header_title {
    max-width: 240px;
}

.o_ai_chat_model_select select {
    min-width: 120px;
}

.o_ai_chat_messages {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.o_ai_chat_message {
    max-width: 85%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.o_ai_chat_message_user {
    align-self: flex-end;
    background: var(--o-brand-primary, #714b67);
    color: #fff;
    border-bottom-right-radius: 0.25rem;
}

.o_ai_chat_message_assistant {
    align-self: flex-start;
    background: var(--o-gray-100, #f1f3f5);
    border-bottom-left-radius: 0.25rem;
}

.o_ai_chat_message_role {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    opacity: 0.85;
}

.o_ai_chat_input {
    resize: none;
    min-height: 48px;
}

.o_ai_chat_send {
    min-width: 48px;
    height: 48px;
}

.o_ai_chat_typing .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 2px;
    border-radius: 50%;
    background: var(--o-gray-500, #6c757d);
    animation: o_ai_typing 1.2s infinite ease-in-out;

    &:nth-child(2) {
        animation-delay: 0.2s;
    }

    &:nth-child(3) {
        animation-delay: 0.4s;
    }
}

// Right panel sections
.o_ai_chat_panel_section {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color, #dee2e6);

    &--grow {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
}

.o_ai_chat_panel_title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--o-gray-600, #6c757d);
    margin-bottom: 0.5rem;
}

.o_ai_chat_panel_empty {
    line-height: 1.4;
}

.o_ai_chat_memory_input {
    font-size: 0.8rem;
    resize: vertical;
    min-height: 72px;
}

.o_ai_chat_timeline {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.o_ai_chat_timeline_item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    border-radius: 0.375rem;
    padding: 0.45rem 0.5rem;
    cursor: pointer;
    transition: background 0.15s;

    &:hover {
        background: rgba(0, 0, 0, 0.05);
    }
}

.o_ai_chat_timeline_role {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--o-gray-600, #6c757d);
    margin-bottom: 0.15rem;
}

.o_ai_chat_timeline_preview {
    font-size: 0.8rem;
    width: 100%;
    color: inherit;
}

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