@property --border-angle {
        syntax: '<angle>';
        inherits: false;
        initial-value: 0deg;
    }

    /* Modern Chat Container */
    .chat-container {
        height: calc(100vh - 200px);
        min-height: 400px;
        background: var(--background);
    }

    /* Typewriter cursor — smooth pulse for streaming text */
    .typewriter-cursor {
        display: inline-block;
        width: 2.5px;
        height: 1.15em;
        background-color: var(--primary);
        margin-left: 2px;
        animation: cursor-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        vertical-align: text-bottom;
        border-radius: 1px;
    }

    @keyframes cursor-pulse {
        0%, 40% { opacity: 1; }
        50% { opacity: 0.3; }
        60%, 100% { opacity: 1; }
    }

    /* Tool execution status - quieter secondary pills */
    .tool-status {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 10px;
        width: fit-content;
    }

    .tool-status-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 0.71rem;
        font-weight: 560;
        letter-spacing: 0.015em;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        animation: tool-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid transparent;
    }

    @keyframes tool-slide-in {
        from {
            opacity: 0;
            transform: translateX(-10px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateX(0) scale(1);
        }
    }

    .tool-status-item.executing {
        background: color-mix(in srgb, var(--primary) 8%, transparent);
        color: color-mix(in srgb, var(--primary) 86%, var(--foreground) 14%);
        border-color: color-mix(in srgb, var(--primary) 14%, transparent);
    }

    .tool-status-item.success {
        background: rgba(34, 197, 94, 0.07);
        color: #15803d;
        border-color: rgba(34, 197, 94, 0.12);
        animation: tool-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1), tool-success-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;
    }

    @keyframes tool-success-pop {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }

    .tool-status-item.retrying {
        background: rgba(245, 158, 11, 0.08);
        color: #d97706;
        border-color: rgba(245, 158, 11, 0.15);
        animation: tool-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1), tool-retry-pulse 2s ease-in-out infinite;
    }

    @keyframes tool-retry-pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
        50% { box-shadow: 0 0 8px 2px rgba(245, 158, 11, 0.15); }
    }

    .tool-status-item.error {
        display: none;
    }

    /* Smooth arc spinner */
    .tool-spinner {
        width: 12px;
        height: 12px;
        border: 2px solid transparent;
        border-top-color: #6366f1;
        border-right-color: rgba(99, 102, 241, 0.3);
        border-radius: 50%;
        animation: spin 0.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    .tool-status-item.retrying .tool-spinner {
        border-top-color: #d97706;
        border-right-color: rgba(245, 158, 11, 0.3);
    }

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

    /* Dark mode: lighter pill colors for contrast on dark bg */
    [data-theme="dark"] .tool-status-item.success {
        color: #4ade80;
    }

    [data-theme="dark"] .tool-status-item.retrying {
        color: #fbbf24;
    }

    /* Transient thinking layer */
    .inline-thinking {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 4px 0;
        width: 100%;
        min-height: 32px;
        overflow: hidden;
        animation: thinking-enter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

    /* Shimmer text status label */
    .thinking-status-chip {
        position: relative;
        z-index: 1;
        display: inline-block;
        width: fit-content;
        font-size: 0.7rem;
        font-weight: 620;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--foreground-secondary);
        background: linear-gradient(
            90deg,
            rgba(59, 130, 246, 0) 0%,
            rgba(59, 130, 246, 0.45) 50%,
            rgba(59, 130, 246, 0) 100%
        );
        background-size: 200% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        animation: shimmer-text 1.6s linear infinite;
    }

    @keyframes shimmer-text {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* Retrying shimmer override */
    .inline-thinking[data-thinking-mode="retrying"] .thinking-status-chip {
        color: #d97706;
        background: linear-gradient(90deg, rgba(251, 191, 36, 0) 0%, rgba(251, 191, 36, 0.5) 50%, rgba(251, 191, 36, 0) 100%);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        animation: shimmer-text 1.6s linear infinite;
    }

    .thinking-copy {
        position: relative;
        z-index: 1;
        display: grid;
        gap: 0;
        transition: opacity 0.16s ease, transform 0.16s ease;
    }

    .thinking-copy.is-transitioning {
        opacity: 0;
        transform: translateY(4px);
    }

    /* Caption — hidden in generic mode, visible during tool use */
    .thinking-line-primary {
        font-size: 0.85rem;
        font-weight: 480;
        line-height: 1.4;
        letter-spacing: -0.005em;
        max-width: 90%;
        color: var(--foreground-secondary);
        background: linear-gradient(
            90deg,
            rgba(59, 130, 246, 0) 0%,
            rgba(59, 130, 246, 0.3) 50%,
            rgba(59, 130, 246, 0) 100%
        );
        background-size: 200% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        animation: shimmer-text 1.8s linear infinite;
    }

    .thinking-line-primary:empty {
        display: none;
    }

    .inline-thinking.fade-out {
        animation: thinking-fade-out 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    @keyframes thinking-fade-out {
        to {
            opacity: 0;
            transform: translateY(-4px);
            filter: blur(4px);
        }
    }

    /* Status icons */
    .status-icon {
        width: 14px;
        height: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .status-icon svg {
        width: 14px;
        height: 14px;
    }

    /* Modern chat bubbles */
    .message-container {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        max-width: 85%;
        animation: message-fade-in 0.3s ease-out;
    }

    @keyframes message-fade-in {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .message-container.user {
        margin-left: auto;
        flex-direction: row;
    }

    .message-container.assistant {
        margin-right: auto;
        flex-direction: row;
    }

    /* Modern avatar */
    .avatar-modern {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 14px;
    }

    .avatar-assistant {
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        color: white;
    }

    .avatar-user-enhanced {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        color: white;
        font-weight: 600;
    }

    /* Modern bubbles */
    .chat-bubble-modern {
        padding: 14px 18px;
        border-radius: 18px;
        line-height: 1.5;
        font-size: 0.95rem;
    }

    .chat-bubble-assistant {
        color: var(--foreground);
    }

    /* Message content styling */
    .message-content {
        word-wrap: break-word;
    }

    .message-content p {
        margin: 0 0 0.75em 0;
    }

    .message-content p:last-child {
        margin-bottom: 0;
    }

    /* Message attachments styling */
    .message-attachments {
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .attachment-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .attachment-item {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 10px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        font-size: 0.8rem;
        max-width: 200px;
    }

    .attachment-icon {
        font-size: 1rem;
        flex-shrink: 0;
    }

    .attachment-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        min-width: 0;
    }

    .attachment-size {
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.7rem;
        flex-shrink: 0;
    }

    .message-content ul, .message-content ol {
        margin: 0.5em 0;
        padding-left: 1.5em;
    }

    .message-content li {
        margin: 0.25em 0;
    }

    .message-content code {
        background: rgba(0, 0, 0, 0.05);
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 0.9em;
        font-family: 'SF Mono', Monaco, monospace;
    }

    .message-content pre {
        background: #1e1e1e;
        border-radius: 8px;
        padding: 0;
        margin: 0.75em 0;
        overflow: hidden;
    }

    .message-content pre code {
        display: block;
        padding: 12px 16px;
        background: transparent;
        color: #d4d4d4;
        overflow-x: auto;
    }

    .code-block-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 16px;
        background: #2d2d2d;
        border-bottom: 1px solid #404040;
        font-size: 0.75rem;
        color: #888;
    }

    .copy-code-btn {
        padding: 4px 8px;
        border-radius: 4px;
        background: #404040;
        color: #ccc;
        border: none;
        cursor: pointer;
        font-size: 0.7rem;
        transition: all 0.2s;
    }

    .copy-code-btn:hover {
        background: #505050;
    }

    /* Timestamp */
    .message-timestamp {
        margin-top: 6px;
        font-size: 0.7rem;
        opacity: 0.5;
    }

    /* User message styling (template classes) */
    .message-user {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 16px;
        animation: message-fade-in 0.3s ease-out;
    }

    .bubble-user {
        background: #E8E8ED;
        color: #1D1D1F;
        padding: 14px 18px;
        border-radius: 18px;
        border-bottom-right-radius: 4px;
        max-width: 50%;
        line-height: 1.5;
        font-size: 0.95rem;
    }

    [data-theme="dark"] .bubble-user {
        background: #2C2C2E;
        color: #F5F5F7;
    }

    .message-time-user {
        margin-top: 6px;
        font-size: 0.7rem;
        color: var(--muted-foreground);
        opacity: 0.7;
        text-align: right;
    }

    /* Assistant message styling */
    .message-assistant {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
        animation: message-fade-in 0.3s ease-out;
    }

    .assistant-avatar {
        width: 32px;
        height: 32px;
        min-width: 32px;
        background: #000000;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .assistant-avatar svg,
    .assistant-avatar img {
        width: 16px;
        height: 16px;
        color: white;
    }

    /* "Enne" name label above assistant content */
    .message-content-wrapper::before {
        content: 'Enne';
        display: block;
        font-size: 0.8rem;
        font-weight: 620;
        color: var(--foreground);
        letter-spacing: -0.01em;
        margin-bottom: 4px;
        line-height: 1;
    }

    .message-content-wrapper {
        flex: 1;
        min-width: 0;
    }

    /* Canvas-style assistant — no bubble, full-width like Claude/ChatGPT */
    .bubble-assistant {
        padding: 2px 0;
        line-height: 1.7;
        font-size: 0.938rem;
        letter-spacing: -0.011em;
        min-width: 0;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        max-width: 100%;
        transition: padding 0.35s ease, background-color 0.35s ease,
                    border-radius 0.35s ease, max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.35s ease, border-color 0.35s ease;
    }

    /* Dark mode: subtle surface tint so assistant text isn't on pure black */
    [data-theme="dark"] .bubble-assistant:not(.is-thinking) {
        background: rgba(255, 255, 255, 0.02);
        border-radius: 14px;
        padding: 8px 12px;
        margin: -8px -12px;
    }

    /* Thinking state — compact bubble with animated conic-gradient border */
    .bubble-assistant.is-thinking {
        position: relative;
        min-width: 200px;
        max-width: 320px;
        padding: 14px 18px;
        background: var(--card);
        border: 1px solid transparent;
        border-radius: 18px;
        border-bottom-left-radius: 4px;
        box-shadow: 0 0 16px 2px rgba(59, 130, 246, 0.06);
        z-index: 0;
    }

    .bubble-assistant.is-thinking::after {
        content: '';
        position: absolute;
        inset: -1.5px;
        border-radius: inherit;
        padding: 1.5px;
        background: conic-gradient(
            from var(--border-angle, 0deg),
            transparent 30%,
            rgba(59, 130, 246, 0.6) 65%,
            rgba(139, 92, 246, 0.5) 80%,
            rgba(59, 130, 246, 0.6) 92%,
            transparent 100%
        );
        -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        animation: border-spin 2.8s linear infinite;
        pointer-events: none;
        z-index: -1;
        transform: translateZ(0);
        will-change: background;
    }

    @keyframes border-spin {
        to { --border-angle: 360deg; }
    }

    .bubble-assistant.is-thinking .message-content {
        display: block;
        width: 100%;
    }

    /* Formatted message content styling — canvas typography */
    .bubble-assistant p {
        margin: 0 0 0.85em 0;
        line-height: 1.7;
    }

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

    .bubble-assistant .formatted-list {
        margin: 0.6em 0;
        padding-left: 1.6em;
        list-style-type: disc;
    }

    .bubble-assistant .formatted-list li {
        margin-bottom: 0.45em;
        padding-left: 0.3em;
        line-height: 1.65;
    }

    .bubble-assistant .formatted-list li:last-child {
        margin-bottom: 0;
    }

    .bubble-assistant .formatted-numbered-list {
        margin: 0.6em 0;
        padding-left: 1.6em;
        list-style-type: decimal;
    }

    .bubble-assistant .formatted-numbered-list li {
        margin-bottom: 0.65em;
        padding-left: 0.3em;
        line-height: 1.65;
    }

    .bubble-assistant .formatted-numbered-list li:last-child {
        margin-bottom: 0;
    }

    /* Email metadata styling */
    .bubble-assistant .email-meta {
        margin: 0.2em 0;
        color: var(--muted-foreground);
        font-size: 0.88em;
    }

    /* Email entry block styling */
    .bubble-assistant .email-entry {
        margin: 0.85em 0;
        padding: 0.85em 1em;
        background: color-mix(in srgb, var(--primary) 3%, transparent);
        border-left: 3px solid var(--primary);
        border-radius: 0 8px 8px 0;
    }

    .bubble-assistant .email-entry:first-child {
        margin-top: 0;
    }

    .bubble-assistant .email-entry p {
        margin: 0.15em 0;
    }

    .bubble-assistant .email-entry p:first-child {
        margin-top: 0;
    }

    .bubble-assistant .email-entry p:last-child {
        margin-bottom: 0;
    }

    /* Inline email metadata in lists */
    .bubble-assistant span.email-meta {
        display: block;
        margin-top: 0.2em;
        color: var(--muted-foreground);
        font-size: 0.88em;
    }

    .bubble-assistant strong {
        font-weight: 620;
        color: var(--foreground);
    }

    .bubble-assistant em {
        font-style: italic;
    }

    .bubble-assistant code {
        background: color-mix(in srgb, var(--primary) 8%, transparent);
        padding: 0.15em 0.45em;
        border-radius: 5px;
        font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
        font-size: 0.88em;
    }

    /* Headings — clean hierarchy for canvas layout */
    .bubble-assistant h1,
    .bubble-assistant h2,
    .bubble-assistant h3 {
        line-height: 1.35;
        letter-spacing: -0.02em;
        color: var(--foreground);
    }

    .bubble-assistant h1 {
        font-size: 1.35em;
        font-weight: 650;
        margin: 1.4em 0 0.6em 0;
    }

    .bubble-assistant h2 {
        font-size: 1.2em;
        font-weight: 620;
        margin: 1.2em 0 0.5em 0;
    }

    .bubble-assistant h3 {
        font-size: 1.05em;
        font-weight: 600;
        margin: 1em 0 0.4em 0;
    }

    .bubble-assistant h1:first-child,
    .bubble-assistant h2:first-child,
    .bubble-assistant h3:first-child {
        margin-top: 0.25em;
    }

    /* Horizontal rule */
    .bubble-assistant hr {
        border: none;
        height: 1px;
        background: var(--border);
        margin: 1.5em 0;
    }

    .bubble-assistant blockquote {
        margin: 0.75em 0;
        padding: 0.4em 0 0.4em 1.2em;
        border-left: 3px solid var(--primary);
        color: var(--muted-foreground);
        font-style: italic;
    }

    .message-time-assistant {
        margin-top: 8px;
        font-size: 0.7rem;
        opacity: 0.5;
    }

    /* Provider badge — hidden since name shown via ::before */
    .message-meta {
        display: none;
    }

    .command-badge {
        font-size: 0.7rem;
        padding: 2px 8px;
        border-radius: 10px;
        background: rgba(99, 102, 241, 0.1);
        color: #6366f1;
        font-weight: 500;
    }

    /* ── Table enhancements for canvas layout ── */
    .message-content .table-wrapper {
        overflow-x: auto;
        max-width: 100%;
        margin: 14px 0;
        border-radius: 10px;
        border: 1px solid var(--border);
    }
    .message-content .table-wrapper table {
        margin: 0;
        border: none;
        border-radius: 0;
        font-size: 0.9em;
        width: 100%;
    }
    .message-content .table-wrapper th {
        font-weight: 600;
        font-size: 0.875em;
        color: var(--muted-foreground);
        padding: 10px 14px;
        background: var(--secondary);
    }
    .message-content .table-wrapper td {
        padding: 10px 14px;
    }
    .message-content .table-wrapper th,
    .message-content .table-wrapper td {
        border: none;
        border-bottom: 1px solid var(--border);
    }
    .message-content .table-wrapper tr:last-child td {
        border-bottom: none;
    }
    [data-theme="dark"] .message-content .table-wrapper {
        border-color: var(--border-light);
    }

    /* Entity cards - Premium multi-card support */
    /* ── Entity Cards — grid layout, side-by-side ── */
    .entity-card-container {
        margin-top: 14px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 10px;
    }

    .entity-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 14px 16px;
        transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
        animation: card-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
        position: relative;
        overflow: hidden;
    }

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

    .entity-card-clickable {
        cursor: pointer;
    }

    .entity-card-clickable:hover {
        border-color: color-mix(in srgb, var(--primary) 30%, transparent);
        box-shadow: 0 2px 12px color-mix(in srgb, var(--primary) 8%, transparent);
        transform: translateY(-1px);
    }

    .entity-card-clickable:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }

    /* Action accent — subtle left bar */
    .entity-card.card-created {
        border-left: 2.5px solid #22c55e;
    }

    .entity-card.card-updated {
        border-left: 2.5px solid #3b82f6;
    }

    .entity-card.card-deleted {
        border-left: 2.5px solid #ef4444;
        opacity: 0.8;
    }

    .entity-card.card-deleted .entity-card-name {
        text-decoration: line-through;
        opacity: 0.6;
    }

    /* Card header — compact row */
    .entity-card-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

    .entity-card-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .entity-card-icon svg {
        width: 16px;
        height: 16px;
    }

    .entity-card-icon.icon-contact {
        background: rgba(99, 102, 241, 0.1);
        color: #6366f1;
    }

    .entity-card-icon.icon-organization {
        background: rgba(236, 72, 153, 0.1);
        color: #ec4899;
    }

    .entity-card-icon.icon-project {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

    .entity-card-icon.icon-task {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
    }

    .entity-card-title-section {
        flex: 1;
        min-width: 0;
    }

    .entity-card-type-row {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 1px;
    }

    .entity-card-type {
        font-size: 0.65rem;
        color: var(--muted-foreground);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 600;
    }

    .entity-card-action {
        font-size: 0.6rem;
        padding: 1px 7px;
        border-radius: 8px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        animation: action-badge-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
    }

    @keyframes action-badge-in {
        from { opacity: 0; transform: scale(0.85); }
        to { opacity: 1; transform: scale(1); }
    }

    .action-created {
        background: rgba(34, 197, 94, 0.1);
        color: #16a34a;
    }

    .action-updated {
        background: rgba(59, 130, 246, 0.1);
        color: #2563eb;
    }

    .action-deleted {
        background: rgba(239, 68, 68, 0.1);
        color: #dc2626;
    }

    .entity-card-name {
        font-size: 0.93rem;
        font-weight: 600;
        color: var(--foreground);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }

    /* Details — compact list */
    .entity-card-details {
        font-size: 0.78rem;
        color: var(--muted-foreground);
        margin-bottom: 0;
    }

    .entity-card-detail {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 3px 0;
        padding: 2px 0;
    }

    .detail-icon {
        width: 13px;
        height: 13px;
        opacity: 0.55;
        flex-shrink: 0;
    }

    .detail-label {
        font-weight: 500;
        color: var(--foreground);
        opacity: 0.7;
    }

    .detail-value {
        color: var(--foreground);
        opacity: 0.85;
    }

    .entity-card-badges {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
        margin-bottom: 6px;
    }

    /* Footer — no border, just inline link */
    .entity-card-footer {
        margin-top: 10px;
        padding-top: 0;
        display: flex;
        align-items: center;
    }

    .view-link {
        font-size: 0.75rem;
        color: var(--primary);
        font-weight: 550;
        display: flex;
        align-items: center;
        gap: 3px;
        opacity: 0.7;
        transition: opacity 0.2s ease, gap 0.2s ease;
    }

    .entity-card-clickable:hover .view-link {
        opacity: 1;
        gap: 6px;
    }

    .view-link-arrow {
        transition: transform 0.2s ease;
        font-size: 0.85em;
    }

    .entity-card-clickable:hover .view-link-arrow {
        transform: translateX(2px);
    }

    /* Status and Priority badges */
    .status-badge, .priority-badge {
        font-size: 0.65rem;
        padding: 2px 8px;
        border-radius: 10px;
        font-weight: 550;
    }

    .status-pending { background: rgba(251, 191, 36, 0.12); color: #d97706; }
    .status-in-progress, .status-in_progress { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
    .status-completed { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
    .status-cancelled { background: rgba(107, 114, 128, 0.12); color: #6b7280; }
    .status-active { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
    .status-on-hold, .status-on_hold { background: rgba(251, 191, 36, 0.12); color: #d97706; }

    .priority-low { background: rgba(107, 114, 128, 0.12); color: #6b7280; }
    .priority-medium { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
    .priority-high { background: rgba(251, 146, 60, 0.12); color: #ea580c; }
    .priority-critical { background: rgba(239, 68, 68, 0.12); color: #dc2626; }

    /* Dark mode: entity card overrides */
    [data-theme="dark"] .entity-card {
        border-color: var(--border-light);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    }

    [data-theme="dark"] .entity-card-clickable:hover {
        box-shadow: 0 2px 12px rgba(59, 130, 246, 0.12);
    }

    /* Grouped entity cards */
    .entity-group {
        margin-top: 6px;
    }

    .entity-group-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 0;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--foreground);
        letter-spacing: -0.01em;
    }

    .entity-group-icon {
        width: 24px;
        height: 24px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .entity-group-icon svg {
        width: 13px;
        height: 13px;
    }

    .entity-group-count {
        font-size: 0.65rem;
        font-weight: 600;
        padding: 1px 7px;
        border-radius: 8px;
        margin-left: auto;
    }

    /* Compact card row within a group */
    .entity-card-compact {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 8px;
        margin-bottom: 4px;
        cursor: pointer;
        transition: border-color 0.2s ease, background 0.2s ease;
        animation: card-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
    }

    .entity-card-compact:last-child {
        margin-bottom: 0;
    }

    .entity-card-compact:hover {
        border-color: color-mix(in srgb, var(--primary) 30%, transparent);
        background: var(--card-hover);
    }

    .entity-card-compact.card-created {
        border-left: 2.5px solid #22c55e;
    }

    .entity-card-compact.card-updated {
        border-left: 2.5px solid #3b82f6;
    }

    .entity-card-compact.card-deleted {
        border-left: 2.5px solid #ef4444;
        opacity: 0.7;
    }

    .entity-card-compact.card-deleted .compact-name {
        text-decoration: line-through;
        opacity: 0.6;
    }

    .compact-icon {
        width: 26px;
        height: 26px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .compact-icon svg {
        width: 13px;
        height: 13px;
    }

    .compact-name {
        font-size: 0.85rem;
        font-weight: 560;
        color: var(--foreground);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }

    .compact-detail {
        font-size: 0.78rem;
        color: var(--muted-foreground);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 180px;
    }

    .compact-arrow {
        color: var(--muted-foreground);
        opacity: 0;
        transition: opacity 0.2s ease;
        font-size: 0.8rem;
        flex-shrink: 0;
    }

    .entity-card-compact:hover .compact-arrow {
        opacity: 0.7;
    }

    [data-theme="dark"] .entity-card-compact {
        border-color: var(--border-light);
    }

    /* Skeleton loading cards */
    .entity-card-skeleton {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 14px 16px;
        position: relative;
        overflow: hidden;
        animation: card-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
    }

    .skeleton-bar {
        background: var(--border);
        border-radius: 4px;
        position: relative;
        overflow: hidden;
    }

    .skeleton-bar::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.08) 50%,
            transparent 100%
        );
        animation: skeleton-shimmer 1.5s ease-in-out infinite;
    }

    [data-theme="dark"] .skeleton-bar::after {
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.04) 50%,
            transparent 100%
        );
    }

    @keyframes skeleton-shimmer {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }

    .skeleton-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

    .skeleton-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .skeleton-title {
        flex: 1;
    }

    .skeleton-type {
        width: 60px;
        height: 10px;
        margin-bottom: 6px;
    }

    .skeleton-name {
        width: 140px;
        height: 14px;
    }

    .skeleton-detail {
        height: 10px;
        margin: 6px 0;
    }

    .skeleton-detail:nth-child(1) { width: 75%; }
    .skeleton-detail:nth-child(2) { width: 55%; }

    .entity-card-skeleton.fade-out {
        animation: skeleton-fade-out 0.3s ease forwards;
    }

    @keyframes skeleton-fade-out {
        to {
            opacity: 0;
            transform: scale(0.97);
        }
    }

    [data-theme="dark"] .entity-card-skeleton {
        border-color: var(--border-light);
    }

    /* Scroll button */
    .scroll-to-bottom-btn {
        position: absolute;
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--card);
        border: 1px solid var(--border);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
        z-index: 10;
    }

    .scroll-to-bottom-btn:hover {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }

    /* Modern input area */
    .chat-input-container-modern {
        padding: 16px 20px;
        background: var(--background);
        border-top: 0px solid var(--border);
    }

    .chat-form-modern {
        max-width: 800px;
        margin: 0 auto;
    }

    .chat-input-wrapper {
        display: flex;
        align-items: flex-end;
        gap: 12px;
        background: var(--card);
        border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
        border-radius: 26px;
        padding: 8px 8px 8px 20px;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.04),
            0 1px 2px rgba(0, 0, 0, 0.03);
    }

    .chat-input-wrapper::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) scaleX(0);
        width: 60%;
        height: 2px;
        border-radius: 1px;
        background: color-mix(in srgb, var(--primary) 25%, transparent);
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                    opacity 0.3s ease;
        opacity: 0;
        pointer-events: none;
    }

    .chat-input-wrapper.focused {
        border-color: color-mix(in srgb, var(--primary) 40%, transparent);
        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.06),
            0 1px 3px rgba(0, 0, 0, 0.04),
            0 0 0 4px color-mix(in srgb, var(--primary) 8%, transparent);
        transform: translateY(-2px);
    }

    .chat-input-wrapper.focused::after {
        transform: translateX(-50%) scaleX(1);
        opacity: 1;
    }

    .chat-input-wrapper:hover:not(.focused) {
        transform: translateY(-1px);
        border-color: color-mix(in srgb, var(--border) 80%, transparent);
        box-shadow:
            0 4px 14px rgba(0, 0, 0, 0.06),
            0 1px 4px rgba(0, 0, 0, 0.04);
    }

    .chat-input-modern {
        flex: 1;
        border: none;
        background: transparent;
        font-size: 0.95rem;
        line-height: 1.5;
        letter-spacing: 0.01em;
        resize: none;
        max-height: 120px;
        padding: 8px 0;
        color: var(--foreground);
    }

    .chat-input-modern:focus {
        outline: none;
    }

    .chat-input-modern::placeholder {
        color: var(--muted-foreground);
        opacity: 0.55;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .chat-input-modern:focus::placeholder {
        opacity: 0.3;
        transform: translateX(4px);
    }

    .send-button-modern {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--primary);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
        flex-shrink: 0;
    }

    .send-button-modern:hover:not(:disabled) {
        background: var(--primary-hover, #4f46e5);
        transform: scale(1.05);
    }

    .send-button-modern:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .send-button-modern svg {
        width: 18px;
        height: 18px;
        color: white;
    }

    /* Status badges */
    .status-badge {
        font-size: 0.7rem;
        padding: 2px 8px;
        border-radius: 10px;
        font-weight: 500;
    }

    .priority-badge {
        font-size: 0.7rem;
        padding: 2px 8px;
        border-radius: 10px;
        font-weight: 500;
    }

    /* Execution result styling */
    .execution-result {
        margin-top: 12px;
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 0.85rem;
    }

    .execution-result:not(.execution-error) {
        background: rgba(34, 197, 94, 0.1);
        border: 1px solid rgba(34, 197, 94, 0.2);
    }

    .execution-error {
        background: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.2);
    }

    /* File Preview Container */
    .file-preview-container {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px;
        margin-bottom: 8px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 12px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .file-preview-container.hidden {
        display: none;
    }

    .file-preview-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: var(--background);
        border: 1px solid var(--border);
        border-radius: 8px;
        font-size: 0.85rem;
        max-width: 200px;
    }

    .file-preview-item .file-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .file-preview-item .file-icon svg {
        width: 100%;
        height: 100%;
        color: var(--primary);
    }

    .file-preview-item .file-name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--foreground);
    }

    .file-preview-item .file-size {
        font-size: 0.75rem;
        color: var(--foreground-secondary);
        flex-shrink: 0;
    }

    .file-preview-item .remove-file {
        width: 20px;
        height: 20px;
        padding: 0;
        background: transparent;
        border: none;
        color: var(--foreground-secondary);
        cursor: pointer;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s ease;
        flex-shrink: 0;
    }

    .file-preview-item .remove-file:hover {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

    .file-preview-item .remove-file svg {
        width: 14px;
        height: 14px;
    }

    /* Image preview thumbnail */
    .file-preview-item.image-preview {
        padding: 4px;
    }

    .file-preview-item.image-preview .file-thumbnail {
        width: 48px;
        height: 48px;
        object-fit: cover;
        border-radius: 4px;
    }

    /* Attach button active state */
    .attach-btn.has-files {
        background: rgba(99, 102, 241, 0.1);
        color: var(--primary);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent);
        animation: ring-pulse 2s ease infinite;
    }

    @keyframes ring-pulse {
        0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent); }
        50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
    }

    /* Voice Recording Styles */
    .voice-btn {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: none;
        background: transparent;
        color: var(--muted-foreground);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        flex-shrink: 0;
    }

    .meeting-btn {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        border: none;
        background: transparent;
        color: var(--muted-foreground);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        flex-shrink: 0;
    }

    .voice-btn:hover {
        background: color-mix(in srgb, var(--foreground) 5%, transparent);
        color: var(--foreground);
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--foreground) 4%, transparent);
    }

    .meeting-btn:hover {
        background: color-mix(in srgb, var(--foreground) 5%, transparent);
        color: var(--foreground);
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--foreground) 4%, transparent);
    }

    .voice-btn.recording {
        background: #ef4444;
        color: white;
        animation: voice-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    .meeting-btn.recording {
        background: #0ea5e9;
        color: white;
        animation: meeting-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes voice-pulse {
        0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
        50% { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
    }

    @keyframes meeting-pulse {
        0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.35); }
        50% { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(14, 165, 233, 0); }
    }

    .voice-indicator {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 12px;
        margin-bottom: 10px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .voice-indicator.hidden { display: none; }

    .voice-waves {
        display: flex;
        align-items: center;
        gap: 2px;
        height: 20px;
    }

    .voice-waves span {
        width: 3px;
        background: #ef4444;
        border-radius: 2px;
        animation: voice-wave 1s ease-in-out infinite;
    }

    .voice-waves span:nth-child(1) { animation-delay: 0s; }
    .voice-waves span:nth-child(2) { animation-delay: 0.1s; }
    .voice-waves span:nth-child(3) { animation-delay: 0.2s; }
    .voice-waves span:nth-child(4) { animation-delay: 0.3s; }
    .voice-waves span:nth-child(5) { animation-delay: 0.4s; }

    @keyframes voice-wave {
        0%, 100% { height: 6px; }
        50% { height: 20px; }
    }

    .voice-status-text {
        color: var(--muted-foreground);
        font-size: 0.85rem;
    }

    .voice-timer {
        font-family: monospace;
        font-size: 0.9rem;
        color: #ef4444;
        min-width: 40px;
    }

    .voice-action-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }

    .voice-action-btn.hidden {
        display: none;
    }

    .voice-send {
        margin-left: auto;
        background: #16a34a;
        color: white;
    }

    .voice-send:hover {
        background: #15803d;
        transform: scale(1.08);
    }

    .voice-stop {
        background: var(--secondary);
        color: var(--foreground);
        border: 1px solid var(--border);
    }

    .voice-stop:hover {
        background: color-mix(in srgb, var(--secondary) 80%, var(--foreground) 20%);
        transform: scale(1.06);
    }

    .voice-cancel {
        background: #dc2626;
        color: white;
    }

    .voice-cancel:hover {
        background: #b91c1c;
        transform: scale(1.08);
    }

    /* Audio Player in Chat Bubbles */
    .voice-message-player {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border-radius: 20px;
        min-width: 220px;
        max-width: 320px;
        border: none;
        background: var(--secondary);
        color: inherit;
    }

    .bubble-assistant .voice-message-player {
        background: color-mix(in srgb, var(--primary) 8%, var(--secondary) 92%);
    }

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

    .play-pause-btn:hover {
        transform: scale(1.08);
        opacity: 0.9;
    }

    .play-pause-btn:active {
        transform: scale(0.95);
    }

    /* User bubble voice player */
    .bubble-user .voice-message-player {
        background: rgba(0, 0, 0, 0.06);
        border: none;
    }

    .bubble-user .voice-message-player .waveform-bars .bar {
        background: rgba(0, 0, 0, 0.2);
    }

    .bubble-user .voice-message-player .waveform-bars .bar.played {
        background: rgba(0, 0, 0, 0.6);
    }

    .bubble-user .voice-message-player .audio-duration {
        color: rgba(0, 0, 0, 0.6);
    }

    .bubble-user .play-pause-btn {
        background: rgba(0, 0, 0, 0.1);
    }

    .player-content {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
    }

    /* Progress track — hidden visually, kept in DOM for JS compat */
    .player-progress-track {
        height: 0;
        width: 0;
        overflow: hidden;
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .player-progress-indicator {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0%;
        border-radius: inherit;
    }

    .audio-duration {
        font-size: 0.72rem;
        opacity: 0.7;
        min-width: 34px;
        text-align: right;
        font-variant-numeric: tabular-nums;
        font-weight: 500;
    }



    /* ===== Waveform Bars ===== */
    .waveform-bars {
        display: flex;
        align-items: center;
        gap: 2px;
        height: 24px;
        flex: 1;
        min-width: 0;
    }

    .waveform-bars .bar {
        width: 2.5px;
        border-radius: 2px;
        background: color-mix(in srgb, currentColor 25%, transparent);
        height: 30%;
        transition: height 0.15s ease, background 0.15s ease;
        flex-shrink: 0;
    }

    /* Resting state — varied heights for organic waveform contour */
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(1)  { height: 18%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(2)  { height: 28%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(3)  { height: 42%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(4)  { height: 55%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(5)  { height: 38%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(6)  { height: 65%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(7)  { height: 48%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(8)  { height: 72%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(9)  { height: 55%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(10) { height: 80%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(11) { height: 60%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(12) { height: 45%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(13) { height: 68%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(14) { height: 52%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(15) { height: 75%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(16) { height: 58%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(17) { height: 40%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(18) { height: 62%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(19) { height: 48%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(20) { height: 35%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(21) { height: 55%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(22) { height: 30%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(23) { height: 22%; }
    .voice-message-player:not(.is-loading):not(.playing) .waveform-bars .bar:nth-child(24) { height: 15%; }

    /* Played bars get primary color */
    .waveform-bars .bar.played {
        background: var(--primary);
    }

    /* --- Loading state: pulsing wave animation --- */
    .voice-message-player.is-loading .waveform-bars .bar {
        animation: waveform-pulse 1.2s ease-in-out infinite;
        background: color-mix(in srgb, var(--primary) 40%, transparent);
    }

    .voice-message-player.is-loading .waveform-bars .bar:nth-child(1)  { animation-delay: 0s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(2)  { animation-delay: 0.04s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(3)  { animation-delay: 0.08s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(4)  { animation-delay: 0.12s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(5)  { animation-delay: 0.16s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(6)  { animation-delay: 0.20s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(7)  { animation-delay: 0.24s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(8)  { animation-delay: 0.28s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(9)  { animation-delay: 0.32s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(10) { animation-delay: 0.36s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(11) { animation-delay: 0.40s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(12) { animation-delay: 0.44s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(13) { animation-delay: 0.48s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(14) { animation-delay: 0.52s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(15) { animation-delay: 0.56s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(16) { animation-delay: 0.60s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(17) { animation-delay: 0.64s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(18) { animation-delay: 0.68s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(19) { animation-delay: 0.72s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(20) { animation-delay: 0.76s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(21) { animation-delay: 0.80s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(22) { animation-delay: 0.84s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(23) { animation-delay: 0.88s; }
    .voice-message-player.is-loading .waveform-bars .bar:nth-child(24) { animation-delay: 0.92s; }

    @keyframes waveform-pulse {
        0%, 100% { height: 15%; }
        50%      { height: 85%; }
    }

    /* --- Playing state: bars animate reactively --- */
    .voice-message-player.playing .waveform-bars .bar {
        animation: waveform-play 0.6s ease-in-out infinite alternate;
    }

    .voice-message-player.playing .waveform-bars .bar:nth-child(1)  { animation-duration: 0.42s; animation-delay: 0s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(2)  { animation-duration: 0.54s; animation-delay: 0.03s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(3)  { animation-duration: 0.48s; animation-delay: 0.06s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(4)  { animation-duration: 0.62s; animation-delay: 0.02s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(5)  { animation-duration: 0.44s; animation-delay: 0.08s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(6)  { animation-duration: 0.56s; animation-delay: 0.01s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(7)  { animation-duration: 0.50s; animation-delay: 0.05s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(8)  { animation-duration: 0.64s; animation-delay: 0.04s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(9)  { animation-duration: 0.46s; animation-delay: 0.07s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(10) { animation-duration: 0.58s; animation-delay: 0.02s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(11) { animation-duration: 0.52s; animation-delay: 0.06s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(12) { animation-duration: 0.60s; animation-delay: 0.03s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(13) { animation-duration: 0.44s; animation-delay: 0.05s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(14) { animation-duration: 0.55s; animation-delay: 0.01s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(15) { animation-duration: 0.48s; animation-delay: 0.07s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(16) { animation-duration: 0.62s; animation-delay: 0.04s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(17) { animation-duration: 0.46s; animation-delay: 0.06s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(18) { animation-duration: 0.58s; animation-delay: 0.02s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(19) { animation-duration: 0.50s; animation-delay: 0.08s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(20) { animation-duration: 0.64s; animation-delay: 0.03s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(21) { animation-duration: 0.44s; animation-delay: 0.05s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(22) { animation-duration: 0.56s; animation-delay: 0.01s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(23) { animation-duration: 0.48s; animation-delay: 0.07s; }
    .voice-message-player.playing .waveform-bars .bar:nth-child(24) { animation-duration: 0.52s; animation-delay: 0.04s; }

    @keyframes waveform-play {
        0%   { height: 20%; }
        100% { height: 80%; }
    }

    /* Voice player loading state — hide play button entirely, waveform pulse is the only indicator */
    .voice-message-player.is-loading .play-pause-btn {
        display: none;
    }

    .voice-loading-text {
        font-size: 0.73rem;
        font-weight: 600;
        white-space: nowrap;
    }

    /* Assistant bubble voice player */
    .bubble-assistant .voice-message-player {
        background: color-mix(in srgb, var(--primary) 8%, var(--secondary) 92%);
        color: var(--foreground);
    }

    .bubble-assistant .voice-message-player.is-loading {
        background: color-mix(in srgb, var(--primary) 6%, var(--secondary) 94%);
    }

    .bubble-assistant .voice-message-player .waveform-bars .bar.played {
        background: var(--primary);
    }

    .bubble-assistant .audio-duration {
        color: var(--foreground-secondary);
        opacity: 1;
    }

    /* TTS Button for Assistant Messages */
    .tts-btn {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: none;
        background: var(--secondary);
        color: var(--foreground-secondary);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: all 0.2s;
        margin-left: 8px;
    }

    .bubble-assistant:hover .tts-btn { opacity: 1; }
    .tts-btn:hover { background: var(--primary); color: white; }
    .tts-btn.playing { background: var(--primary); color: white; opacity: 1; }

    /* ============ Slash Command Palette ============ */
    .chat-input-wrapper {
        position: relative;
    }

    .slash-palette {
        display: none;
        position: absolute;
        bottom: calc(100% + 8px);
        left: 0;
        right: 0;
        max-width: 420px;
        margin: 0 auto;
        max-height: 360px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 14px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 12px 40px rgba(0, 0, 0, 0.06);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        overflow: hidden;
        z-index: 50;
        animation: slash-palette-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .slash-palette.visible {
        display: flex;
        flex-direction: column;
    }

    @keyframes slash-palette-in {
        from {
            opacity: 0;
            transform: translateY(6px) scale(0.98);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* Divider between textarea and action buttons */
    .input-btn-divider {
        width: 1px;
        height: 24px;
        background: var(--border);
        opacity: 0.25;
        flex-shrink: 0;
        align-self: center;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .chat-input-wrapper.focused .input-btn-divider {
        opacity: 0.5;
        height: 28px;
        background: color-mix(in srgb, var(--primary) 30%, var(--border));
    }

    /* Slash command trigger button */
    .slash-trigger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: transparent;
        border: none;
        color: var(--muted-foreground);
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        flex-shrink: 0;
    }

    .slash-trigger-btn:hover {
        background: color-mix(in srgb, var(--primary) 8%, transparent);
        color: var(--primary);
        transform: scale(1.08);
    }

    .slash-palette-header {
        padding: 10px 14px;
        border-bottom: 1px solid var(--border);
        font-size: 0.72rem;
        color: var(--muted-foreground);
        font-weight: 500;
        letter-spacing: 0.02em;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .slash-palette-header kbd {
        background: var(--border);
        border-radius: 4px;
        padding: 1px 5px;
        font-size: 0.68rem;
        font-family: inherit;
    }

    .slash-palette-list {
        overflow-y: auto;
        flex: 1;
        padding: 6px;
        scrollbar-width: thin;
    }

    .slash-palette-list::-webkit-scrollbar { width: 4px; }
    .slash-palette-list::-webkit-scrollbar-track { background: transparent; }
    .slash-palette-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

    .slash-category-header {
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted-foreground);
        padding: 8px 10px 4px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .slash-category-icon {
        width: 14px;
        height: 14px;
        opacity: 0.6;
    }

    .slash-command-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .slash-command-item:hover,
    .slash-command-item.highlighted {
        background: rgba(99, 102, 241, 0.06);
    }

    .slash-command-item.highlighted {
        background: rgba(99, 102, 241, 0.1);
    }

    .slash-cmd-icon {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        flex-shrink: 0;
        background: rgba(99, 102, 241, 0.08);
    }

    .slash-cmd-text {
        flex: 1;
        min-width: 0;
    }

    .slash-cmd-label {
        font-size: 0.82rem;
        font-weight: 500;
        color: var(--foreground);
    }

    .slash-cmd-desc {
        font-size: 0.7rem;
        color: var(--muted-foreground);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .slash-cmd-shortcut {
        font-size: 0.68rem;
        color: var(--muted-foreground);
        opacity: 0.6;
        flex-shrink: 0;
    }

    .slash-empty {
        padding: 20px;
        text-align: center;
        font-size: 0.8rem;
        color: var(--muted-foreground);
    }

    /* ── Confirmation Action Controls ── */
    .confirmation-actions {
        display: flex;
        gap: 8px;
        margin-top: 12px;
        animation: tool-slide-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .confirmation-actions button {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 560;
        letter-spacing: 0.01em;
        cursor: pointer;
        border: 1px solid transparent;
        transition: all 0.2s ease;
    }

    .confirmation-actions button:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }

    .confirmation-actions .btn-confirm {
        background: color-mix(in srgb, var(--primary) 12%, transparent);
        color: var(--primary);
        border-color: color-mix(in srgb, var(--primary) 20%, transparent);
    }

    .confirmation-actions .btn-confirm:hover:not(:disabled) {
        background: color-mix(in srgb, var(--primary) 20%, transparent);
        border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    }

    .confirmation-actions .btn-cancel {
        background: color-mix(in srgb, var(--muted-foreground) 8%, transparent);
        color: var(--muted-foreground);
        border-color: color-mix(in srgb, var(--muted-foreground) 15%, transparent);
    }

    .confirmation-actions .btn-cancel:hover:not(:disabled) {
        background: color-mix(in srgb, var(--destructive, #ef4444) 10%, transparent);
        color: var(--destructive, #ef4444);
        border-color: color-mix(in srgb, var(--destructive, #ef4444) 20%, transparent);
    }

    .confirmation-actions button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .confirmation-actions .btn-loading {
        pointer-events: none;
    }

    .confirmation-actions .btn-spinner {
        width: 12px;
        height: 12px;
        border: 2px solid transparent;
        border-top-color: currentColor;
        border-right-color: color-mix(in srgb, currentColor 30%, transparent);
        border-radius: 50%;
        animation: spin 0.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    .confirmation-actions.fade-out {
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }