/* ==========================================================
   Melp Chat AI Assistant - Sidebar UI
   File: css/custom/chat-assistant.css
   ========================================================== */

/* ----------------------------------------------------------
   Panel container
   Reuses .right-sidebar from sidebarPopup.css for the fixed
   right-edge placement. We extend it with a CSS variable so
   width can be resized via the drag handle, mirroring the
   file-summary side panel.
   ---------------------------------------------------------- */
#chatAssistantPanel.ca-sidebar {
    --ca-default-width: 43rem;
    background: var(--white);
    border-left: 0.1rem solid var(--gray);
    box-shadow: -0.4rem 0 1.6rem rgb(from var(--color-text-primary) r g b / 6%);
    box-sizing: border-box;
    min-width: 340px;
    width: var(--ca-default-width);
    right: 0;
    height: calc(100vh - 7.7rem);
    height: calc(100dvh - 7.7rem);

}

/* Legacy wide-mode class kept (no-op) for backward compat */
#chatAssistantPanel.ca-panel-wide {
    width: var(--ca-default-width);
}

/* ----------------------------------------------------------
   Drag handle (left edge) - matches file-summary pattern
   ---------------------------------------------------------- */
.ca-drag-handle {
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: 100%;
    cursor: ew-resize;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ca-drag-handle::after {
    content: '';
    display: block;
    width: 4px;
    height: 36px;
    border-radius: 4px;
    background: var(--dark-gray);
    transition: background 0.15s;
}

.ca-drag-handle:hover::after,
.ca-drag-handle.dragging::after {
    background: var(--slate-gray);
}

/* ----------------------------------------------------------
   Inner layout - flex column so messages take remaining space
   ---------------------------------------------------------- */
.ca-sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
    padding: 0;
}

/* ----------------------------------------------------------
   Header  (clean, brand-light, matches file-summary header)
   ---------------------------------------------------------- */
.ca-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
    min-height: 7.3rem;
    padding: 1rem 1.6rem;
    background-color: var(--white);
    border-bottom: 0.1rem solid var(--gray);
}

.ca-sidebar-header-info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    flex: 1;
}

.ca-sidebar-header-title {

    font-size: var(--font-size-15);
    font-weight: 600;
    color: var(--black);
    line-height: 1.46;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.ca-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.6rem;
}

.ca-header-icon svg {
    width: 1.6rem;
    height: 1.6rem;
}

.ca-header-title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ca-beta-pill {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    background: var(--light-slate-gray);
    border: 0.1rem solid var(--gray);
    color: var(--brown);

    font-size: var(--font-size-15);
    font-weight: 700;
    line-height: 1.4;
    margin-left: 0.2rem;
}

.ca-sidebar-subtitle {

    font-size: var(--font-size-15);
    color: var(--brown);
    line-height: 1.5;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.ca-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.ca-header-action-btn {
    width: 3.2rem;
    height: 3.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0.1rem solid var(--gray);
    border-radius: 0.6rem;
    background: var(--white);
    color: var(--brown);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ca-header-action-btn svg {
    width: 1.7rem;
    height: 1.7rem;
    display: block;
}

.ca-header-action-btn:hover:not(:disabled),
.ca-header-action-btn:focus-visible:not(:disabled) {
    background-color: var(--dark-white);
    border-color: var(--red);
    color: var(--red);
}

.ca-header-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#chatAssistantCloseBtn {
    width: 3.2rem;
    height: 3.2rem;
    display: inline-block;
    border-radius: 0.6rem;
    background-size: 40% !important;
    position: static;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

#chatAssistantCloseBtn:hover {
    background-color: var(--dark-white);
}

/* ----------------------------------------------------------
   Messages area
   ---------------------------------------------------------- */
.ca-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.6rem 1.6rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    background: var(--white);
    scroll-behavior: smooth;
}

.ca-messages-empty {
    justify-content: center;
    align-items: center;
    padding: 2.4rem 1.6rem;
}

.ca-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    padding: 2.4rem 1.6rem;
    max-width: 34rem;
    margin: 0 auto;
    text-align: center;
}

.ca-empty-state .ca-empty-eyebrow {

    font-size: var(--font-size-13);
    font-weight: 700;
    color: var(--red);
    margin: 0;
}

.ca-empty-state .ca-empty-hint {

    font-size: var(--font-size-15);
    color: var(--slate-gray);
    line-height: 1.55;
    margin: 0;
}

.ca-messages::-webkit-scrollbar {
    width: 0.5rem;
}

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

.ca-messages::-webkit-scrollbar-thumb {
    background: var(--gray);
    border-radius: 0.4rem;
}

.ca-messages::-webkit-scrollbar-thumb:hover {
    background: var(--slate-gray);
}

.melpasistentLogo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    animation: ca-empty-float 4s ease-in-out infinite;
}

.melpasistentLogo svg {
    height: 3.8rem !important;
    width: 3.8rem !important;
    animation: ca-empty-spin 12s linear infinite;
}

@keyframes ca-empty-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes ca-empty-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ca-welcome {

    font-size: var(--font-size-17);
    color: var(--black);
    text-align: center;
    line-height: 1.5;
    font-weight: 600;
    margin: 0;
}

/* ----------------------------------------------------------
   Message bubbles
   ---------------------------------------------------------- */
.ca-msg {
    display: flex;
    flex-direction: column;
    max-width: 92%;
    gap: 0.35rem;
}

.ca-msg.ca-msg-user {
    align-self: flex-end;
    align-items: flex-end;
}

.ca-msg.ca-msg-ai {
    align-self: flex-start;
    align-items: flex-start;
    max-width: 100%;
}

.ca-messages .ca-bubble {
    min-width: unset;
    max-width: 100%;
    padding: 1.1rem 1.4rem;

    font-size: var(--font-size-15);
    line-height: 1.9;
    color: var(--black);
    word-break: break-word;
    overflow: hidden;
    margin: 0;
    border-radius: 1.2rem;
    box-shadow: 0 1px 2px rgb(from var(--color-text-primary) r g b / 4%);
}

/* User bubble */
.ca-messages .sender-user-details.ca-bubble {
    position: relative;
    background-color: var(--light-slate-gray);
    border-radius: 0.2rem 0.2rem 0rem 0rem;
}

/* AI bubble */
.ca-messages .reciever-user-details.ca-bubble {
    position: relative;
    background-color: rgb(from var(--color-background) r g b / 48%);
    border-radius: 0.2rem 0.5rem 0rem 0.5rem;
    white-space: normal;
}

.ca-bubble-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
    min-height: 2.8rem;
}

.ca-msg-user .ca-bubble-actions {
    justify-content: flex-end;
    padding-right: 0.2rem;
}

.ca-msg-ai .ca-bubble-actions {
    justify-content: flex-start;
    padding-left: 0.2rem;
    opacity: 1;
    pointer-events: auto;
}

.ca-msg-user:hover .ca-bubble-actions,
.ca-msg-user:focus-within .ca-bubble-actions,
.ca-msg:focus-within .ca-bubble-actions,
.ca-bubble-copy-btn.is-copied,
.ca-bubble-copy-btn.is-copy-error {
    opacity: 1;
    pointer-events: auto;
}

.ca-bubble-copy-btn,
.ca-table-copy-btn {
    width: 2.8rem;
    height: 2.8rem;
    border: 0;
    border-radius: 0.7rem;
    background: transparent;
    color: rgb(from var(--color-text-primary) r g b / 68%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

.ca-bubble-copy-btn:hover,
.ca-table-copy-btn:hover,
.ca-bubble-copy-btn:focus-visible,
.ca-table-copy-btn:focus-visible {
    background: rgb(from var(--light-black) r g b / 6%);
    color: rgb(from var(--color-text-primary) r g b / 88%);
    outline: none;
}

.ca-bubble-copy-btn.is-copied,
.ca-table-copy-btn.is-copied {
    background: rgb(from var(--light-black) r g b / 8%);
    color: rgb(from var(--color-text-primary) r g b / 92%);
}

.ca-bubble-copy-btn.is-copy-error,
.ca-table-copy-btn.is-copy-error {
    background: rgb(from var(--light-black) r g b / 8%);
    color: rgb(from var(--color-text-primary) r g b / 92%);
}

.ca-bubble-copy-btn i,
.ca-table-copy-btn i {
    font-size: var(--font-size-15);
}

/* ----------------------------------------------------------
   Read more inline link
   ---------------------------------------------------------- */
.ca-more-text {
    display: none;
}

.ca-read-more {
    font-size: var(--font-size-15);

    font-weight: 600;
    color: var(--red);
    cursor: pointer;
    padding-left: 0.3rem;
    white-space: nowrap;
}

.ca-read-more:hover {
    text-decoration: underline;
}

/* ----------------------------------------------------------
   Streaming status (collapsible "thinking" panel)
   ---------------------------------------------------------- */
.ca-stream-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.ca-stream-status-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    font-size: var(--font-size-15);
    font-weight: 600;
    line-height: 1.5;
    color: var(--brown);
    cursor: pointer;
    text-align: left;
}

.ca-stream-status-text {
    flex: 1;
    min-width: 0;
    animation: ca-status-pulse 1.4s ease-in-out infinite;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.ca-stream-status-text::before {
    content: '';
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--red);
    flex-shrink: 0;
    animation: ca-dot-pulse 1.4s ease-in-out infinite;
}

.ca-stream-chevron {
    flex-shrink: 0;
    font-size: var(--font-size-15);
    color: var(--slate-gray);
    transition: transform 0.2s ease;
}

.ca-stream-open .ca-stream-chevron {
    transform: rotate(180deg);
}

.ca-stream-body {
    padding-top: 0.6rem;
    border-top: 0.1rem solid rgb(from var(--dark-black) r g b / 6%);
    font-size: var(--font-size-15);
    line-height: 1.7;
    color: var(--slate-gray);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Hide expand/collapse affordance and body until real streamed text arrives. */
.ca-stream-wrap.ca-stream-no-body .ca-stream-chevron {
    display: none;
}

.ca-stream-wrap.ca-stream-no-body .ca-stream-status-toggle {
    cursor: default;
    pointer-events: none;
}

.ca-stream-wrap.ca-stream-no-body .ca-stream-body {
    display: none;
}

/* ----------------------------------------------------------
   Bubble rich content (markdown, tables, code)
   ---------------------------------------------------------- */
.ca-bubble p {
    margin: 0 0 0.7rem;
}

.ca-bubble p:last-child {
    margin-bottom: 0;
}

.ca-bubble h1,
.ca-bubble h2,
.ca-bubble h3,
.ca-bubble h4,
.ca-bubble h5,
.ca-bubble h6 {
    margin: 0.9rem 0 0.5rem;
    font-size: var(--font-size-15);
    font-weight: 700;
    line-height: 1.4;
    color: var(--black);
}

.ca-bubble ul,
.ca-bubble ol {
    margin: 0.5rem 0;
    padding-left: 2.1rem;
}

.ca-bubble li {
    margin: 0.3rem 0;
}

.ca-bubble code {
    background: var(--light-slate-gray);
    border-radius: 0.4rem;
    padding: 0.1rem 0.45rem;

    font-size: var(--font-size-15);
}

.ca-bubble pre {
    background: var(--dark-slate-gray);
    border: 0.1rem solid var(--gray);
    border-radius: 0.8rem;
    margin: 0.8rem 0;
    padding: 1rem 1.2rem;
    overflow-x: auto;
    white-space: pre;
}

.ca-bubble pre code {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.ca-table-wrap {
    width: 100%;
    margin: 0.8rem 0;
    border-radius: 0.8rem;
    border: 0.1rem solid var(--gray);
    background: var(--white);
    overflow: hidden;
}

.ca-table-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.4rem 0.5rem;
    border-bottom: 0.1rem solid rgb(from var(--black) r g b / 6%);
    background: rgb(from var(--color-surface) r g b / 94%);
}

.ca-table-copy-btn {
    opacity: 0.68;
}

.ca-table-wrap:hover .ca-table-copy-btn,
.ca-table-wrap:focus-within .ca-table-copy-btn,
.ca-table-copy-btn.is-copied,
.ca-table-copy-btn.is-copy-error {
    opacity: 1;
}

.ca-bubble table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-15);
    line-height: 1.5;
    white-space: normal;
    background: var(--white);
}

.ca-bubble th,
.ca-bubble td {
    border-bottom: 0.1rem solid var(--gray);
    border-right: 0.1rem solid var(--gray);
    padding: 0.7rem 0.9rem;
    text-align: left;
    vertical-align: top;
}

.ca-bubble th:last-child,
.ca-bubble td:last-child {
    border-right: 0;
}

.ca-bubble tr:last-child td {
    border-bottom: 0;
}

.ca-bubble th {
    background: var(--light-slate-gray);
    font-weight: 700;
    color: var(--black);
}

.ca-bubble hr {
    border: 0;
    border-top: 0.1rem solid var(--gray);
    margin: 1rem 0;
}

.ca-task-item {
    list-style: none;
    margin-left: -1.8rem;
}

.ca-task-item input {
    margin-right: 0.5rem;
    vertical-align: -0.1rem;
}

.ca-citation {
    color: var(--slate-gray);
    font-size: var(--font-size-15);
    margin-left: 0.15rem;
}

.ca-bubble blockquote {
    border-left: 0.3rem solid var(--red);
    color: var(--brown);
    margin: 0.8rem 0;
    padding: 0.2rem 0 0.2rem 1.2rem;
    background: var(--light-slate-brown-v3);
    border-radius: 0 0.4rem 0.4rem 0;
}

.ca-type-cursor {
    display: inline-block;
    width: 0.6rem;
    height: 1.5rem;
    margin-left: 0.2rem;
    background: var(--red);
    vertical-align: -0.2rem;
    animation: ca-cursor-blink 1s steps(2, start) infinite;
}

@keyframes ca-cursor-blink {
    0%, 45% { opacity: 1; }
    46%, 100% { opacity: 0; }
}

/* ----------------------------------------------------------
   Notices (warning, info, usage)
   ---------------------------------------------------------- */
.ca-message-notice {
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 0.1rem solid rgb(from var(--black) r g b / 8%);
    font-size: var(--font-size-15);
    line-height: 1.5;
}

.ca-message-warning {
    color: var(--red);
}

.ca-message-muted {
    color: var(--slate-gray);
}

.ca-message-usage {
    color: var(--slate-gray);
    font-size: var(--font-size-15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.ca-message-usage-text {
    min-width: 0;
    flex: 1 1 auto;
}

@keyframes ca-status-pulse {
    0%, 100% { opacity: 0.65; }
    50% { opacity: 1; }
}

/* ----------------------------------------------------------
   Pagination CTA inside bubble
   ---------------------------------------------------------- */
.ca-pagination-cta {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 0.1rem solid rgb(from var(--black) r g b / 8%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}

.ca-pagination-cta-text {
    font-size: var(--font-size-15);
    line-height: 1.6;
    color: var(--brown);
}

.ca-pagination-cta-btn {
    border: 0;
    border-radius: 0.6rem;
    padding: 0.8rem 1.6rem;
    background: var(--red);
    color: var(--white);

    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.18s ease;
    font-size: var(--font-size-15);
    font-weight: 600;
}

.ca-pagination-cta-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.ca-pagination-cta-btn:disabled {
    opacity: 0.55;
    cursor: default;
    transform: none;
}

/* ----------------------------------------------------------
   Export download CTA inside bubble
   ---------------------------------------------------------- */
.ca-export-card {
    margin-top: 1.2rem;
    padding: 1.2rem 1.4rem;
    background: var(--white);
    border-radius: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ca-export-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.ca-export-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 0.6rem;
    background: transparent;
    overflow: hidden;
}

.ca-export-icon-pdf {
    background: transparent;
}

.ca-export-icon-xlsx {
    background: transparent;
}

.ca-export-icon-csv {
    background: transparent;
}

.ca-export-icon-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ca-export-info {
    flex: 1 1 auto;
    min-width: 0;
}

.ca-export-title {
    font-size: var(--font-size-15);
    font-weight: 600;
    color: var(--black);
    margin-bottom: 0.2rem;
}

.ca-export-text {
    font-size: var(--font-size-15);
    line-height: 1.45;
    color: var(--slate-gray);
}

.ca-export-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.ca-export-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    border: 0.1rem solid var(--gray);
    border-radius: 0.6rem;
    padding: 0.7rem 1.4rem;
    background: var(--white);
    color: var(--black);

    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    font-size: var(--font-size-15);
    font-weight: 600;
    box-shadow: 0 0.1rem 0.2rem rgb(from var(--color-text-primary) r g b / 4%);
    width: 100%;

}

.ca-export-download-btn:hover:not(:disabled) {
    background: var(--light-slate-gray);
    border-color: var(--slate-gray);
    color: var(--dark-black);
}

.ca-export-download-btn:active:not(:disabled) {
    background: var(--light-slate-gray);
}

.ca-export-download-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.ca-export-btn-icon {
    font-size: var(--font-size-15);
    color: var(--slate-gray);
}

.ca-export-download-btn:hover:not(:disabled) .ca-export-btn-icon {
    color: var(--black);
}

.ca-export-status {
    display: none;
    min-height: 1.6rem;
    font-size: var(--font-size-13);
    line-height: 1.4;
    color: var(--slate-gray);
}

.ca-export-status.ca-export-status-visible {
    display: block;
}

.ca-export-status-error {
    color: var(--red);
}

/* ----------------------------------------------------------
   Typing dots
   ---------------------------------------------------------- */
.ca-typing {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.4rem;
    background: var(--white);
    border: 0.1rem solid var(--gray);
    border-radius: 1.2rem;
    border-bottom-left-radius: 0.3rem;
    width: fit-content;
}

.ca-typing-dot {
    width: 0.7rem;
    height: 0.7rem;
    background: var(--red);
    border-radius: 50%;
    animation: ca-dot-pulse 1.4s infinite ease-in-out;
    display: inline-block;
}

.ca-typing-dot:nth-child(1) { animation-delay: 0s; }
.ca-typing-dot:nth-child(2) { animation-delay: 0.22s; }
.ca-typing-dot:nth-child(3) { animation-delay: 0.44s; }

@keyframes ca-dot-pulse {
    0%, 60%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    30% {
        transform: scale(1.35);
        opacity: 1;
    }
}

/* ----------------------------------------------------------
   Suggestion chips
   ---------------------------------------------------------- */
.ca-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    padding: 1rem 1.6rem;
    background: var(--white);
    border-top: 0.1rem solid var(--gray);
    flex-shrink: 0;
}

.ca-chip {
    background: var(--white);
    border: 0.1rem solid var(--gray);
    border-radius: 2rem;
    padding: 0.6rem 1.3rem;

    font-size: var(--font-size-13);
    font-weight: 500;
    color: var(--brown);
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.12s ease;
    white-space: nowrap;
    line-height: 1.4;
}

.ca-chip:hover {
    border-color: var(--red);
    color: var(--red);
    background: var(--light-slate-brown-v3);
    transform: translateY(-1px);
}

.ca-chip:active {
    transform: translateY(0);
}

@keyframes ca-enhance-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------
   Melp AI pill input (mai-)
   ---------------------------------------------------------- */
.mai-input-area {
    display: flex;
    align-items: flex-end;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    margin: 1.2rem 1.6rem;
    background: var(--white);
    border: 0.1rem solid var(--gray);
    border-radius: 0.4rem;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.2s ease;
}

.mai-input-area:focus-within {
    border-color: var(--gray);
}

.mai-enhance-btn {
    width: 2.8rem;
    height: 2.8rem;
    min-width: 2.8rem;
    border: none;
    background: transparent;
    color: var(--red);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.15s ease, color 0.15s ease;
}

.mai-enhance-btn:hover {
    transform: scale(1.1);
}

.mai-enhance-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.mai-enhance-btn.is-loading .mai-sparkle {
    animation: mai-sparkle-blink 1s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.mai-enhance-btn.is-loading .mai-sparkle-1 { animation-delay: 0s; }
.mai-enhance-btn.is-loading .mai-sparkle-2 { animation-delay: 0.5s; }
.mai-enhance-btn.is-loading .mai-sparkle-3 { animation-delay: 0.2s; }
.mai-enhance-btn.is-loading .mai-sparkle-4 { animation-delay: 0.7s; }
.mai-enhance-btn.is-loading .mai-sparkle-5 { animation-delay: 0.35s; }

@keyframes mai-sparkle-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.15; transform: scale(0.7); }
}

.mai-enhance-btn svg {
    width: 1.9rem;
    height: 1.9rem;
}

.mai-enhance-btn:not(.hideCls) {
    animation: mai-enhance-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes mai-enhance-pop {
    0%   { opacity: 0; transform: scale(0.4) rotate(-15deg); }
    60%  { opacity: 1; transform: scale(1.15) rotate(4deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

.mai-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.4rem 0;

    font-size: var(--font-size-15);
    font-weight: 500;
    color: var(--black);
    resize: none;
    outline: none;
    overflow-y: hidden;
    max-height: 12rem;
    height: auto;
    min-height: 2.7rem;
    line-height: 1.5;
}

.mai-input::placeholder {
    color: var(--dark-gray);
}

.mai-input:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.mai-counter {

    font-size: var(--font-size-13);
    color: var(--dark-gray);
    white-space: nowrap;
    user-select: none;
    padding: 0 0.6rem 0 0.2rem;
    width: 6.2rem;
    min-width: 6.2rem;
    flex-shrink: 0;
    text-align: right;
}

.mai-counter.is-limit {
    color: var(--red);
}

.mai-send-btn,
.mai-stop-btn {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    background: var(--red);
    border: none;
    border-radius: 0.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.mai-send-btn:hover,
.mai-stop-btn:hover {
    transform: scale(1.08);
}

.mai-send-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.mai-send-btn svg {
    width: 1.4rem;
    height: 1.4rem;
    pointer-events: none;
}

.mai-stop-btn svg {
    width: 2.4rem;
    height: 2.4rem;
    pointer-events: none;
}

.mai-enhance-status {
    position: absolute;
    left: 1.6rem;
    bottom: calc(100% + 0.6rem);
    max-width: calc(100% - 3.2rem);
    padding: 0.6rem 1rem;
    border: 0.1rem solid var(--gray);
    border-radius: 0.7rem;
    background: var(--white);
    color: var(--brown);

    font-size: var(--font-size-13);
    line-height: 1.4;
    box-shadow: 0 0.4rem 1.2rem rgb(from var(--color-text-primary) r g b / 8%);
    z-index: 3;
    transition: opacity 0.2s ease, transform 0.2s ease;

}

.mai-enhance-status.ca-enhance-status-fading {
    opacity: 0;
    transform: translateY(0.4rem);
    pointer-events: none;
}

/* ----------------------------------------------------------
   Mention dropdown
   ---------------------------------------------------------- */
.mai-input-wrap {
    position: relative;
    flex-shrink: 0;
}

.ca-mention-dropdown {
    position: absolute;
    background: var(--white);
    border: 0.1rem solid var(--gray);
    max-height: 18rem;
    overflow-y: auto;
    flex-shrink: 0;
    bottom: 100%;
    left: 1.6rem;
    right: 1.6rem;
    width: auto;
    border-radius: 0.4rem;
    z-index: 4;
    box-shadow: 0 0.6rem 1.6rem rgb(from var(--color-text-primary) r g b / 10%);
}

.ca-mention-dropdown::-webkit-scrollbar {
    width: 0.4rem;
}

.ca-mention-dropdown::-webkit-scrollbar-thumb {
    background: var(--gray);
    border-radius: 0.4rem;
}

#caMentionList {
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
}

.ca-mention-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 1.2rem;
    cursor: pointer;
    transition: background 0.15s ease;

}

.ca-mention-item:hover,
.ca-mention-item.ca-mention-focused {
    background: var(--light-slate-brown-v3);
}

.ca-mention-avatar {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 0.4rem;
    object-fit: cover;
    flex-shrink: 0;
    border: 0.15rem solid var(--gray);
}

.ca-mention-name {
    font-size: var(--font-size-15);
    color: var(--black);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----------------------------------------------------------
   Header trigger button (lives inside chat-header userGroupList)
   Both SVGs are stacked absolutely so we can cross-fade between
   them without the display:none swap, which would break the
   rotate transition.
   ---------------------------------------------------------- */
.chatAssistantHeaderBtn .nav-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    transition: transform 0.6s cubic-bezier(0.25, 0.85, 0.35, 1.05);
    transform-origin: center center;
}

.chatAssistantHeaderBtn .nav-icon svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.25s ease;
    pointer-events: none;
}

/* Outline icon visible by default */
.chatAssistantHeaderBtn .nav-icon svg:nth-of-type(1) {
    opacity: 1;
}

/* Filled (gradient) icon hidden by default, but kept in the DOM
   so opacity can animate smoothly. */
.chatAssistantHeaderBtn .nav-icon svg:nth-of-type(2) {
    opacity: 0;
    /* Override the global .chatEvent rule that hides the 2nd SVG */
    display: inline-block !important;
}

.chatAssistantHeaderBtn:hover .nav-icon svg:nth-of-type(1),
.chatAssistantHeaderBtn.active .nav-icon svg:nth-of-type(1) {
    opacity: 0 !important;
    /* Cancel the svg-states.css `display:none` rule so opacity wins. */
    display: inline-block !important;
}

.chatAssistantHeaderBtn:hover .nav-icon svg:nth-of-type(2),
.chatAssistantHeaderBtn.active .nav-icon svg:nth-of-type(2) {
    opacity: 1 !important;
    display: inline-block !important;
}

/* Rotation applies to the .nav-icon container so it carries both
   stacked SVGs uniformly. On hover: one quick spin, then a slow
   continuous spin until the cursor leaves. */
.chatAssistantHeaderBtn:hover .nav-icon,
.chatAssistantHeaderBtn:focus-within .nav-icon {
    animation:
        ca-header-quick-spin 0.6s cubic-bezier(0.25, 0.85, 0.35, 1.05) 0s 1 forwards,
        ca-header-spin 6s linear 0.6s infinite;
}

.chatAssistantHeaderBtn.active .nav-icon {
    animation: ca-header-spin 6s linear infinite;
}

@keyframes ca-header-quick-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes ca-header-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------
   Dark mode
   ---------------------------------------------------------- */
.darkmode #chatAssistantPanel.ca-sidebar {
    background: var(--light-black-v2);
    border-left: 0.1rem solid var(--light-brown);
    box-shadow: -0.3rem 0 0.4rem 0 var(--color-text-primary);
}

.darkmode #chatAssistantPanel .ca-sidebar-inner,
.darkmode #chatAssistantPanel .ca-messages,
.darkmode #chatAssistantPanel .ca-chips {
    background: var(--light-black-v2);
}

.darkmode #chatAssistantPanel .ca-sidebar-header {
    background: var(--light-slate-black-v2);
    border-bottom-color: var(--light-brown);
}

.darkmode #chatAssistantPanel .ca-sidebar-header-title,
.darkmode #chatAssistantPanel .ca-welcome,
.darkmode #chatAssistantPanel .ca-bubble,
.darkmode #chatAssistantPanel .ca-bubble h1,
.darkmode #chatAssistantPanel .ca-bubble h2,
.darkmode #chatAssistantPanel .ca-bubble h3,
.darkmode #chatAssistantPanel .ca-bubble h4,
.darkmode #chatAssistantPanel .ca-bubble h5,
.darkmode #chatAssistantPanel .ca-bubble h6,
.darkmode #chatAssistantPanel .ca-export-title,
.darkmode #chatAssistantPanel .ca-mention-name,
.darkmode #chatAssistantPanel .mai-input {
    color: var(--white);
}

.darkmode #chatAssistantPanel .ca-sidebar-subtitle,
.darkmode #chatAssistantPanel .ca-empty-hint,
.darkmode #chatAssistantPanel .ca-stream-status-toggle,
.darkmode #chatAssistantPanel .ca-stream-body,
.darkmode #chatAssistantPanel .ca-citation,
.darkmode #chatAssistantPanel .ca-message-muted,
.darkmode #chatAssistantPanel .ca-message-usage,
.darkmode #chatAssistantPanel .ca-pagination-cta-text,
.darkmode #chatAssistantPanel .ca-export-text,
.darkmode #chatAssistantPanel .ca-export-status,
.darkmode #chatAssistantPanel .mai-counter,
.darkmode #chatAssistantPanel .mai-input::placeholder {
    color: var(--dark-gray);
}

.darkmode #chatAssistantPanel #chatAssistantCloseBtn:hover,
.darkmode #chatAssistantPanel .ca-header-action-btn:hover:not(:disabled),
.darkmode #chatAssistantPanel .ca-chip:hover,
.darkmode #chatAssistantPanel .ca-mention-item:hover,
.darkmode #chatAssistantPanel .ca-mention-item.ca-mention-focused,
.darkmode #chatAssistantPanel .ca-export-download-btn:hover:not(:disabled),
.darkmode #chatAssistantPanel .ca-export-download-btn:active:not(:disabled) {
    background-color: var(--light-brown);
}

.darkmode #chatAssistantPanel .sender-user-details.ca-bubble,
.darkmode #chatAssistantPanel .ca-bubble code,
.darkmode #chatAssistantPanel .ca-bubble th,
.darkmode #chatAssistantPanel .ca-typing,
.darkmode #chatAssistantPanel .ca-chip,
.darkmode #chatAssistantPanel .mai-input-area,
.darkmode #chatAssistantPanel .mai-enhance-status,
.darkmode #chatAssistantPanel .ca-mention-dropdown,
.darkmode #chatAssistantPanel .ca-export-card,
.darkmode #chatAssistantPanel .ca-export-download-btn,
.darkmode #chatAssistantPanel .ca-header-action-btn {
    background: var(--light-slate-black-v2);
    border-color: var(--light-brown);
}

.darkmode #chatAssistantPanel .ca-beta-pill {
    background: var(--white);
    border-color: var(--white);
    color: var(--black);
}

.darkmode #chatAssistantPanel .reciever-user-details.ca-bubble,
.darkmode #chatAssistantPanel .ca-bubble table,
.darkmode #chatAssistantPanel .ca-bubble pre {
    background: var(--light-black-v2);
    border-color: var(--light-brown);
}

.darkmode #chatAssistantPanel .ca-table-toolbar {
    background: rgb(from var(--light-black-v2) r g b / 94%);
    border-bottom-color: var(--light-brown);
}

.darkmode #chatAssistantPanel .ca-stream-body,
.darkmode #chatAssistantPanel .ca-message-notice,
.darkmode #chatAssistantPanel .ca-pagination-cta {
    border-top-color: var(--light-brown);
}

.darkmode #chatAssistantPanel .ca-bubble hr,
.darkmode #chatAssistantPanel .ca-table-wrap,
.darkmode #chatAssistantPanel .ca-bubble th,
.darkmode #chatAssistantPanel .ca-bubble td,
.darkmode #chatAssistantPanel .ca-export-download-btn,
.darkmode #chatAssistantPanel .ca-chip,
.darkmode #chatAssistantPanel .mai-input-area,
.darkmode #chatAssistantPanel .mai-enhance-status,
.darkmode #chatAssistantPanel .ca-mention-dropdown,
.darkmode #chatAssistantPanel .ca-mention-avatar,
.darkmode #chatAssistantPanel .ca-header-action-btn {
    border-color: var(--light-brown);
}

.darkmode #chatAssistantPanel .ca-bubble blockquote {
    background: rgb(from var(--color-brand) r g b / 12%);
    color: var(--dark-white);
}

.darkmode #chatAssistantPanel .ca-chip {
    color: var(--gray);
}

.darkmode #chatAssistantPanel .ca-chip:hover {
    color: var(--white);
}

.darkmode #chatAssistantPanel .ca-export-download-btn {
    color: var(--white);
    box-shadow: none;

}

.darkmode #chatAssistantPanel .ca-bubble-copy-btn,
.darkmode #chatAssistantPanel .ca-table-copy-btn {
    color: rgb(from var(--color-text-inverse) r g b / 72%);
}

.darkmode #chatAssistantPanel .ca-bubble-copy-btn:hover,
.darkmode #chatAssistantPanel .ca-table-copy-btn:hover,
.darkmode #chatAssistantPanel .ca-bubble-copy-btn:focus-visible,
.darkmode #chatAssistantPanel .ca-table-copy-btn:focus-visible,
.darkmode #chatAssistantPanel .ca-bubble-copy-btn.is-copied,
.darkmode #chatAssistantPanel .ca-table-copy-btn.is-copied,
.darkmode #chatAssistantPanel .ca-bubble-copy-btn.is-copy-error,
.darkmode #chatAssistantPanel .ca-table-copy-btn.is-copy-error {
    background: rgb(from var(--color-surface) r g b / 10%);
    color: rgb(from var(--color-text-inverse) r g b / 96%);
}

.darkmode #chatAssistantPanel .ca-export-btn-icon,
.darkmode #chatAssistantPanel .ca-export-download-btn:hover:not(:disabled) .ca-export-btn-icon {
    color: var(--gray);
}

.darkmode #chatAssistantPanel .ca-drag-handle::after,
.darkmode #chatAssistantPanel .ca-messages::-webkit-scrollbar-thumb,
.darkmode #chatAssistantPanel .ca-mention-dropdown::-webkit-scrollbar-thumb {
    background: var(--border-v2);
}

/* Small responsive tweak */
@media (max-width: 1024px) {
    #chatAssistantPanel.ca-sidebar {
        width: 100% !important;
        min-width: 0;
    }
    .ca-drag-handle { display: none; }
}