/* Chat UI Design System - ISA Platform */
/* SPEC-007: Chat UI & Visual System - Updated for SPEC-026 Design System Overhaul */
/* Uses global design tokens from tokens.css for consistency */

/* ============================================================================
   CSS CUSTOM PROPERTIES (CHAT-SPECIFIC TOKENS)
   Mapped to global design system tokens from tokens.css
   ============================================================================ */

:root {
    /* === Color Palette - Mapped to Design System Tokens === */
    --chat-bg-primary: hsl(var(--c-surface));
    --chat-bg-secondary: hsl(var(--c-surface-2));
    --chat-bg-tertiary: hsl(var(--c-surface-3));
    --chat-text-primary: hsl(var(--c-text));
    --chat-text-secondary: hsl(var(--c-text-muted));
    --chat-text-muted: hsl(var(--c-text-subtle));
    --chat-border-primary: hsl(var(--c-border));
    --chat-border-secondary: hsl(var(--c-border-subtle));

    /* === Message Bubble Colors - Using Design System Accent === */
    --chat-message-user-bg: hsl(var(--c-primary));
    --chat-message-user-text: hsl(var(--c-primary-contrast));
    --chat-message-agent-bg: hsl(var(--c-surface-2));
    --chat-message-agent-text: hsl(var(--c-text));
    --chat-message-agent-border: hsl(var(--c-border));
    --chat-message-system-bg: transparent;
    --chat-message-system-text: hsl(var(--c-text-subtle));
    --chat-message-error-bg: hsl(var(--c-danger) / 0.1);
    --chat-message-error-text: hsl(var(--c-danger));
    --chat-message-error-border: hsl(var(--c-danger) / 0.3);

    /* === State Colors - Mapped to Design System === */
    --chat-state-connected: hsl(var(--c-success));
    --chat-state-connecting: hsl(var(--c-warning));
    --chat-state-disconnected: hsl(var(--c-danger));
    --chat-state-thinking: hsl(var(--c-text-muted));

    /* === Spacing - Use Design System Spacing === */
    --chat-spacing-xs: var(--space-1);
    --chat-spacing-sm: var(--space-2);
    --chat-spacing-md: var(--space-3);
    --chat-spacing-lg: var(--space-4);
    --chat-spacing-xl: var(--space-6);

    /* === Typography - Use Design System Tokens === */
    --chat-font-size-sm: var(--font-size-xs);
    --chat-font-size-md: var(--font-size-sm);
    --chat-font-size-lg: var(--font-size-base);
    --chat-line-height: var(--leading-normal);
    --chat-font-family: var(--font-body);

    /* === Border Radius - Use Design System Tokens === */
    --chat-radius-sm: var(--radius-sm);
    --chat-radius-md: var(--radius-md);
    --chat-radius-lg: var(--radius-lg);
    --chat-radius-bubble: var(--radius-xl);

    /* === Transitions === */
    --chat-transition-fast: 100ms ease-out;
    --chat-transition-normal: 150ms ease-out;
    --chat-transition-slow: 200ms ease-out;

    /* === Shadows - Use Design System Tokens === */
    --chat-shadow-sm: var(--shadow-sm);
    --chat-shadow-md: var(--shadow-md);
    --chat-shadow-lg: var(--shadow-lg);

    /* === Z-Index === */
    --chat-z-panel: 1050;
    --chat-z-popover: 1060;
    --chat-z-toast: 1070;

    /* === Message Bubble Widths === */
    --chat-message-user-max-width: 70%;
    --chat-message-agent-max-width: 75%;

    /* === Focus Ring - Use Design System Primary === */
    --chat-focus-ring: hsl(var(--c-primary));
    --chat-focus-ring-alpha: hsl(var(--c-primary) / 0.2);

    /* === Icon Sizes === */
    --chat-icon-size-sm: 14px;
    --chat-icon-size-md: 16px;
    --chat-icon-size-lg: 24px;
    --chat-icon-size-xl: 32px;
}

/* === Light Theme - Values automatically inherited from global tokens === */
/* No explicit overrides needed as chat tokens now reference global semantic tokens */

/* ============================================================================
   CHAT PANEL LAYOUT
   ============================================================================ */

.chat-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 400px;
    max-height: 600px;
    background: hsl(var(--c-surface-glass) / 0.95);
    border: 1px solid hsl(var(--c-border) / 0.5);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    z-index: var(--chat-z-panel);
    transition: all var(--chat-transition-normal);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--chat-text-primary);
    font-family: var(--font-body);
}

/* Glassmorphism for chat panel */
@supports (backdrop-filter: blur(1px)) {
    .chat-panel {
        backdrop-filter: blur(var(--blur-lg));
    }
}

.chat-panel.collapsed {
    max-height: 60px;
}

.chat-panel.expanded {
    max-height: 600px;
}

/* === Chat Header === */
.chat-panel-header {
    padding: var(--space-4);
    background: hsl(var(--c-surface-2) / 0.5);
    border-bottom: 1px solid hsl(var(--c-border) / 0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    transition: background var(--chat-transition-fast);
}

.chat-panel-header:hover {
    background: hsl(var(--c-surface-2) / 0.8);
}

.chat-title {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: hsl(var(--c-text));
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.chat-controls {
    display: flex;
    align-items: center;
    gap: var(--chat-spacing-sm);
}

/* === Chat Panel Content === */
.chat-panel-content {
    display: flex;
    flex-direction: column;
    height: 520px;
    overflow: hidden;
}

/* === Chat Body (Three-Section Layout) === */
.chat-body {
    display: flex;
    flex-direction: column;
    height: 520px;
    overflow: hidden;
}

/* === Messages Area (Scrollable) === */
.chat-messages,
.messages-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--chat-spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--chat-spacing-lg);
    scroll-behavior: smooth;
}

.chat-messages::-webkit-scrollbar,
.messages-container::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track,
.messages-container::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb,
.messages-container::-webkit-scrollbar-thumb {
    background: hsl(var(--c-border));
    border-radius: var(--radius-full);
}

.chat-messages::-webkit-scrollbar-thumb:hover,
.messages-container::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--c-border-strong));
}

/* ============================================================================
   MESSAGE BUBBLES
   ============================================================================ */

.message-container,
.message {
    display: flex;
    flex-direction: column;
    gap: var(--chat-spacing-xs);
    animation: messageSlideIn var(--chat-transition-normal);
}

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

/* T037/T038: Fade-in animation and layout shift prevention */
.fade-in {
    animation: messageSlideIn var(--chat-transition-normal);
    will-change: opacity, transform;
}

/* === User Messages (Right-aligned, 70% max width, filled bubble) === */
.message-container.user-message,
.message.user-message {
    align-items: flex-end;
}

.message-container.user-message .message-text,
.message.user-message .message-text,
.message.user-message .message-content .message-text {
    max-width: var(--chat-message-user-max-width);
    background: var(--chat-message-user-bg);
    color: var(--chat-message-user-text);
    padding: var(--chat-spacing-md) var(--chat-spacing-lg);
    border-radius: var(--chat-radius-bubble);
    font-size: var(--chat-font-size-md);
    line-height: var(--chat-line-height);
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* === Agent Messages (Left-aligned, 75% max width, border + neutral background) === */
.message-container.agent-message,
.message.agent-message,
.message.assistant-message {
    align-items: flex-start;
}

.message-container.agent-message .message-text,
.message.agent-message .message-text,
.message.assistant-message .message-text,
.message.assistant-message .message-content .message-text {
    max-width: var(--chat-message-agent-max-width);
    background: var(--chat-message-agent-bg);
    color: var(--chat-message-agent-text);
    border: 1px solid var(--chat-message-agent-border);
    padding: var(--chat-spacing-md) var(--chat-spacing-lg);
    border-radius: var(--chat-radius-bubble);
    font-size: var(--chat-font-size-md);
    line-height: var(--chat-line-height);
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* === System Messages (Centered, no bubble) === */
.message-container.system-message,
.message.system-message {
    align-items: center;
}

.message-container.system-message .message-text,
.message.system-message .message-text,
.message.system-message .message-content .message-text {
    background: var(--chat-message-system-bg);
    color: var(--chat-message-system-text);
    padding: var(--chat-spacing-xs) var(--chat-spacing-sm);
    font-size: var(--chat-font-size-sm);
    line-height: var(--chat-line-height);
    text-align: center;
    font-style: italic;
}

/* === Error Messages (Agent-style with error icon and color) === */
.message-container.error-message,
.message.error-message {
    align-items: flex-start;
}

.message-container.error-message .message-text,
.message.error-message .message-text,
.message.error-message .message-content .message-text {
    max-width: var(--chat-message-agent-max-width);
    background: var(--chat-message-error-bg);
    color: var(--chat-message-error-text);
    border: 1px solid var(--chat-message-error-border);
    padding: var(--chat-spacing-sm) var(--chat-spacing-md);
    border-radius: var(--chat-radius-md);
    font-size: var(--chat-font-size-md);
    line-height: var(--chat-line-height);
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: flex;
    align-items: flex-start;
    gap: var(--chat-spacing-sm);
}

.message-container.error-message .message-text::before,
.message.error-message .message-text::before,
.message.error-message .message-content .message-text::before {
    content: "⚠";
    font-size: var(--chat-font-size-lg);
    flex-shrink: 0;
}


/* === Message Content Wrapper === */
.message-content {
    display: flex;
    flex-direction: column;
    gap: var(--chat-spacing-xs);
}

/* === No Messages State === */
.no-messages {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--chat-spacing-xl);
    color: var(--chat-text-muted);
    text-align: center;
}

.no-messages i {
    font-size: var(--chat-icon-size-xl);
    margin-bottom: var(--chat-spacing-md);
    opacity: 0.5;
}

/* === Message Metadata === */
.message-timestamp {
    font-size: 11px;
    color: var(--chat-text-muted);
    margin-top: var(--chat-spacing-xs);
    opacity: 0.7;
    font-weight: 400;
}

/* === Attached Files === */
.attached-files {
    display: flex;
    flex-direction: column;
    gap: var(--chat-spacing-xs);
}

.attached-file {
    display: flex;
    align-items: center;
    gap: var(--chat-spacing-sm);
    padding: var(--chat-spacing-xs) var(--chat-spacing-sm);
    background: var(--chat-bg-tertiary);
    border: 1px solid var(--chat-border-primary);
    border-radius: var(--chat-radius-sm);
    font-size: var(--chat-font-size-sm);
}

.file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-size {
    font-size: var(--chat-font-size-sm);
    color: var(--chat-text-muted);
}

.file-actions {
    display: flex;
    gap: var(--chat-spacing-xs);
}

/* === Upload Progress === */
.upload-progress {
    padding: var(--chat-spacing-sm);
    background: var(--chat-bg-tertiary);
    border: 1px solid var(--chat-border-primary);
    border-radius: var(--chat-radius-sm);
}

/* === Markdown Support (Agent Messages) === */
.message-text code {
    background: var(--chat-bg-tertiary);
    padding: 2px 4px;
    border-radius: var(--chat-radius-sm);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
}

.message-text pre {
    background: var(--chat-bg-tertiary);
    padding: var(--chat-spacing-sm);
    border-radius: var(--chat-radius-sm);
    overflow-x: auto;
    margin: var(--chat-spacing-xs) 0;
}

.message-text pre code {
    background: none;
    padding: 0;
}

.message-text table {
    border-collapse: collapse;
    width: 100%;
    margin: var(--chat-spacing-xs) 0;
}

.message-text table th,
.message-text table td {
    border: 1px solid var(--chat-border-primary);
    padding: var(--chat-spacing-xs) var(--chat-spacing-sm);
    text-align: left;
}

.message-text table th {
    background: var(--chat-bg-tertiary);
    font-weight: 600;
}

/* ============================================================================
   COMMAND SURFACE (Fixed at Bottom)
   ============================================================================ */

.chat-input-container {
    padding: var(--space-4);
    background: hsl(var(--c-surface) / 0.5);
    border-top: 1px solid hsl(var(--c-border) / 0.5);
}

.chat-input,
.input-group {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

/* === Action Buttons (Clear, Settings, File Upload) === */
.chat-action-button {
    min-width: 32px;
    min-height: 44px;
    padding: var(--chat-spacing-sm);
    background: transparent;
    color: var(--chat-text-secondary);
    border: 1px solid var(--chat-border-primary);
    border-radius: var(--chat-radius-md);
    cursor: pointer;
    transition: all var(--chat-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-action-button:hover:not(:disabled) {
    background: var(--chat-bg-tertiary);
    color: var(--chat-text-primary);
    border-color: var(--chat-border-secondary);
}

.chat-action-button:focus-visible {
    outline: 2px solid var(--chat-message-user-bg);
    outline-offset: 2px;
}

.chat-action-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Smaller icons for action buttons */
.chat-action-button .chat-icon-button {
    font-size: 14px;
}

.chat-input textarea,
.input-group textarea {
    flex: 1;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    padding: var(--input-padding-y) var(--input-padding-x);
    background: hsl(var(--input-bg));
    color: hsl(var(--c-text));
    border: 1px solid hsl(var(--input-border));
    border-radius: var(--input-border-radius);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    line-height: var(--leading-normal);
    resize: none;
    overflow-y: auto;
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.chat-input textarea:focus,
.input-group textarea:focus {
    outline: none;
    border-color: hsl(var(--input-border-focus));
    box-shadow: 0 0 0 3px hsl(var(--input-glow) / 0.4);
}

.chat-input textarea:disabled,
.input-group textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.chat-input textarea::-webkit-scrollbar,
.input-group textarea::-webkit-scrollbar {
    width: 4px;
}

.chat-input textarea::-webkit-scrollbar-track,
.input-group textarea::-webkit-scrollbar-track {
    background: transparent;
}

.chat-input textarea::-webkit-scrollbar-thumb,
.input-group textarea::-webkit-scrollbar-thumb {
    background: var(--chat-border-primary);
    border-radius: var(--chat-radius-sm);
}

/* === Send Button (Primary Action) === */
.input-group .btn-primary,
.chat-input .btn-primary {
    min-width: 32px;
    min-height: 44px;
    padding: var(--space-3);
    background: hsl(var(--btn-bg));
    color: hsl(var(--btn-text));
    border: none;
    border-radius: var(--btn-border-radius);
    cursor: pointer;
    transition: all 150ms ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.input-group .btn-primary:hover:not(:disabled),
.chat-input .btn-primary:hover:not(:disabled) {
    background: hsl(var(--btn-bg-hover));
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.input-group .btn-primary:disabled,
.chat-input .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.input-group .btn-primary:focus-visible,
.chat-input .btn-primary:focus-visible {
    outline: 2px solid var(--chat-message-user-bg);
    outline-offset: 2px;
}

/* === Secondary Buttons (File Upload) === */
.input-group .btn-outline-secondary:not(.chat-action-button) {
    min-width: 32px;
    min-height: 44px;
    padding: var(--chat-spacing-sm);
    background: transparent;
    color: var(--chat-text-secondary);
    border: 1px solid var(--chat-border-primary);
    border-radius: var(--chat-radius-md);
    cursor: pointer;
    transition: all var(--chat-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-group .btn-outline-secondary:not(.chat-action-button):hover:not(:disabled) {
    background: var(--chat-bg-tertiary);
    color: var(--chat-text-primary);
    border-color: var(--chat-border-secondary);
}

.input-group .btn-outline-secondary:not(.chat-action-button):focus-visible {
    outline: 2px solid var(--chat-message-user-bg);
    outline-offset: 2px;
}

/* Smaller icon for file upload button */
.input-group .btn-outline-secondary:not(.chat-action-button) .chat-icon-button {
    font-size: 14px;
}

/* === File Chips === */
.file-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--chat-spacing-sm);
    margin-bottom: var(--chat-spacing-sm);
}

.file-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--chat-spacing-xs);
    padding: var(--chat-spacing-xs) var(--chat-spacing-sm);
    background: var(--chat-bg-tertiary);
    border: 1px solid var(--chat-border-primary);
    border-radius: var(--chat-radius-md);
    font-size: var(--chat-font-size-sm);
    color: var(--chat-text-primary);
}

.file-chip-remove {
    background: none;
    border: none;
    color: var(--chat-text-muted);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transition: background var(--chat-transition-fast);
}

.file-chip-remove:hover {
    background: var(--chat-border-primary);
    color: var(--chat-text-primary);
}

/* === File Upload Help Text === */
.file-upload-help-text {
    display: flex;
    align-items: center;
    padding: var(--chat-spacing-sm) var(--chat-spacing-md);
    background: rgba(0, 120, 212, 0.1);
    border-left: 3px solid var(--chat-message-user-bg);
    border-radius: var(--chat-radius-sm);
    font-size: var(--chat-font-size-sm);
    color: var(--chat-text-secondary);
    line-height: var(--chat-line-height);
}

.file-upload-help-text i {
    color: var(--chat-message-user-bg);
    font-size: 14px;
}

/* ============================================================================
   STATUS INDICATORS
   ============================================================================ */

/* === Connection Status === */
.connection-status {
    display: inline-flex;
    align-items: center;
    gap: var(--chat-spacing-xs);
    font-size: var(--chat-font-size-sm);
    color: var(--chat-text-secondary);
}

.connection-status-text {
    font-size: var(--chat-font-size-sm);
    color: var(--chat-text-secondary);
}

.connection-status-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--chat-state-disconnected);
}

.connection-status.connected .connection-status-icon {
    background: var(--chat-state-connected);
}

.connection-status.connecting .connection-status-icon,
.connection-status.reconnecting .connection-status-icon {
    background: var(--chat-state-connecting);
    animation: pulse 1.5s ease-in-out infinite;
}

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

/* === Typing Indicator === */
.typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--chat-spacing-xs);
    padding: var(--chat-spacing-sm) var(--chat-spacing-md);
    background: var(--chat-bg-tertiary);
    border-radius: var(--chat-radius-md);
    font-size: var(--chat-font-size-sm);
    color: var(--chat-text-secondary);
}

.typing-indicator-dots {
    display: flex;
    gap: 4px;
}

.typing-indicator-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--chat-text-muted);
    animation: typingDot 1.4s ease-in-out infinite;
}

.typing-indicator-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingDot {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

/* === New Messages Button === */
.new-messages-button {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--chat-spacing-sm) var(--chat-spacing-md);
    background: var(--chat-message-user-bg);
    color: var(--chat-message-user-text);
    border: none;
    border-radius: var(--chat-radius-lg);
    box-shadow: var(--chat-shadow-md);
    cursor: pointer;
    font-size: var(--chat-font-size-sm);
    font-weight: 600;
    transition: all var(--chat-transition-fast);
    z-index: 10;
}

.new-messages-button:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: var(--chat-shadow-lg);
}

.new-messages-button:focus-visible {
    outline: 2px solid var(--chat-message-user-bg);
    outline-offset: 2px;
}

/* === Upload Progress Bar === */
.file-chip-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--chat-border-primary);
    border-radius: 0 0 var(--chat-radius-md) var(--chat-radius-md);
    overflow: hidden;
}

.file-chip-progress-bar {
    height: 100%;
    background: var(--chat-message-user-bg);
    transition: width var(--chat-transition-normal);
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* === Focus Indicators === */
*:focus-visible {
    outline: 2px solid var(--chat-message-user-bg);
    outline-offset: 2px;
}

/* === Screen Reader Only === */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* === Skip Link === */
.skip-to-input {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--chat-message-user-bg);
    color: var(--chat-message-user-text);
    padding: var(--chat-spacing-sm) var(--chat-spacing-md);
    border-radius: var(--chat-radius-md);
    text-decoration: none;
    z-index: 100;
}

.skip-to-input:focus {
    top: var(--chat-spacing-sm);
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 768px) {
    .chat-panel {
        width: calc(100vw - 40px);
        right: 20px;
        left: 20px;
        max-width: 380px;
        margin: 0 auto;
    }

    .message-container.user-message .message-text {
        max-width: 80%;
    }

    .message-container.agent-message .message-text,
    .message-container.error-message .message-text {
        max-width: 85%;
    }
}

@media (max-width: 480px) {
    .chat-panel {
        width: calc(100vw - 20px);
        right: 10px;
        left: 10px;
        bottom: 10px;
    }

    .chat-body {
        height: 400px;
    }

    .message-container.user-message .message-text {
        max-width: 90%;
    }

    .message-container.agent-message .message-text,
    .message-container.error-message .message-text {
        max-width: 90%;
    }
}

/* ============================================================================
   ACCESSIBILITY MEDIA QUERIES
   ============================================================================ */

/* === High Contrast Mode === */
@media (prefers-contrast: high) {
    :root {
        --chat-border-primary: #000000;
        --chat-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
    }

    [data-theme="light"] {
        --chat-border-primary: #000000;
    }

    .message-text {
        border-width: 2px;
    }
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .chat-panel {
        transition: none;
    }

    @keyframes messageSlideIn {
        from, to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes typingDot {
        from, to {
            transform: translateY(0);
            opacity: 0.7;
        }
    }

    @keyframes pulse {
        from, to {
            opacity: 1;
        }
    }
}

/* === Print Styles === */
@media print {
    .chat-panel {
        display: none !important;
    }
}

/* ============================================================================
   ACCESSIBILITY - FOCUS INDICATORS (T077 - SPEC-007)
   ============================================================================ */

/* Focus indicators for all interactive elements using :focus-visible */
/* Ensures 3:1 contrast ratio for WCAG 2.1 Level AA compliance */

.chat-panel button:focus-visible,
.chat-panel a:focus-visible,
.chat-panel textarea:focus-visible,
.chat-panel input:focus-visible,
.chat-panel [role="button"]:focus-visible,
.chat-panel [tabindex]:focus-visible {
    outline: 2px solid var(--chat-focus-ring, #0078d4);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.2);
}

/* Panel header focus indicator */
.chat-panel-header:focus-visible {
    outline: 2px solid var(--chat-focus-ring, #0078d4);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 4px rgba(0, 120, 212, 0.2);
}

/* Message input focus indicator */
.message-textarea:focus-visible {
    outline: 2px solid var(--chat-focus-ring, #0078d4);
    outline-offset: 0;
    border-color: var(--chat-focus-ring, #0078d4);
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.2);
}

/* Button focus indicators with enhanced visibility */
.btn:focus-visible {
    outline: 2px solid var(--chat-focus-ring, #0078d4);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.2);
}

/* Icon button focus indicators */
.chat-header-icon-button:focus-visible {
    outline: 2px solid var(--chat-focus-ring, #0078d4);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.2);
    background-color: rgba(0, 120, 212, 0.1);
}

/* New messages button focus indicator */
.new-messages-button:focus-visible {
    outline: 2px solid var(--chat-focus-ring, #0078d4);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(0, 120, 212, 0.3);
}

/* Remove default focus outline (only when :focus-visible is supported) */
.chat-panel *:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================================================
   ACCESSIBILITY - SKIP LINK (T078 - SPEC-007)
   ============================================================================ */

/* Skip link for keyboard users to jump to message input */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--chat-bg-primary, #1e1e1e);
    color: var(--chat-text-primary, #ffffff);
    padding: 8px 16px;
    text-decoration: none;
    border: 2px solid var(--chat-focus-ring, #0078d4);
    border-radius: 4px;
    z-index: 1000;
    font-weight: 600;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 8px;
    outline: 2px solid var(--chat-focus-ring, #0078d4);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.2);
}


/* ============================================================================
   ICON STYLES (T084a - SPEC-007)
   Semantic CSS classes for icon styling to enable future TelerikSvgIcon migration
   ============================================================================ */

/* Header icons */
.chat-icon-header {
    font-size: var(--chat-icon-size-md);
    margin-right: var(--chat-spacing-sm);
}

/* Badge icons (e.g., queued messages count) */
.chat-icon-badge {
    font-size: var(--chat-icon-size-sm);
    margin-right: var(--chat-spacing-xs);
}

/* Button icons (settings, file actions, etc.) */
.chat-icon-button {
    font-size: var(--chat-icon-size-md);
}

/* Toggle icons (chevron up/down) */
.chat-icon-toggle {
    font-size: var(--chat-icon-size-md);
    margin-left: var(--chat-spacing-sm);
    transition: transform var(--chat-transition-normal);
}

/* Alert icons (warnings, errors, info) */
.chat-icon-alert {
    font-size: var(--chat-icon-size-md);
    margin-right: var(--chat-spacing-sm);
}

/* Empty state icons (no messages) */
.chat-icon-empty {
    font-size: var(--chat-icon-size-xl);
    margin-bottom: var(--chat-spacing-sm);
    opacity: 0.5;
}

/* Status icons (uploading, connecting, etc.) */
.chat-icon-status {
    font-size: var(--chat-icon-size-md);
    margin-right: var(--chat-spacing-sm);
}

/* File type icons */
.chat-icon-file {
    font-size: var(--chat-icon-size-md);
    margin-right: var(--chat-spacing-sm);
}

/* Connection status icons */
.chat-icon-connection {
    font-size: var(--chat-icon-size-sm);
}

/* Spinning animation for loading icons */
.chat-icon-spin {
    animation: chat-icon-spin 1s linear infinite;
}

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

/* File type icon colors (semantic CSS classes) */
.chat-icon-file-pdf {
    color: hsl(var(--c-danger)); /* danger - red for PDFs */
}

.chat-icon-file-word {
    color: hsl(var(--c-info)); /* primary - blue for Word documents */
}

.chat-icon-file-excel {
    color: hsl(var(--c-success)); /* success - green for Excel */
}

.chat-icon-file-powerpoint {
    color: hsl(var(--c-danger)); /* danger - red for PowerPoint */
}

.chat-icon-file-image {
    color: hsl(var(--c-success)); /* success - green for images */
}

.chat-icon-file-archive {
    color: hsl(var(--c-warning)); /* warning - yellow for archives */
}

.chat-icon-file-text {
    color: hsl(var(--c-text-muted)); /* secondary - gray for text files */
}

.chat-icon-file-generic {
    color: hsl(var(--c-text-muted)); /* muted - gray for unknown files */
}

/* Connection status icon colors (semantic CSS classes) */
.chat-icon-connection-success {
    color: var(--chat-state-connected);
}

.chat-icon-connection-warning {
    color: var(--chat-state-connecting);
}

.chat-icon-connection-danger {
    color: var(--chat-state-disconnected);
}

.chat-icon-connection-muted {
    color: var(--chat-text-muted);
}

/* ============================================================================
   SPEC-010: Document Processing Status Indicators
   ============================================================================ */

/* Attached file container with processing status */
.attached-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--chat-spacing-sm);
    background: var(--chat-bg-secondary);
    border: 1px solid var(--chat-border-primary);
    border-radius: 6px;
    margin-bottom: var(--chat-spacing-xs);
}

.attached-file .file-info {
    display: flex;
    align-items: center;
    gap: var(--chat-spacing-xs);
    flex: 1;
}

.attached-file .file-name {
    font-weight: 500;
    color: var(--chat-text-primary);
}

.attached-file .file-size {
    font-size: var(--chat-font-size-sm);
    color: var(--chat-text-muted);
}

/* Processing status indicators */
.processing-status {
    display: inline-flex;
    align-items: center;
    margin-left: var(--chat-spacing-xs);
}

.processing-status.processing i {
    animation: spin 2s linear infinite;
}

.processing-status.completed i {
    color: var(--chat-state-connected);
}

.processing-status.failed i {
    color: var(--chat-state-disconnected);
}

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

/* File actions buttons */
.file-actions {
    display: flex;
    gap: var(--chat-spacing-xs);
}

.file-actions .btn {
    padding: 4px 8px;
    font-size: var(--chat-font-size-sm);
}

/* Confidence badge */
.badge.bg-warning {
    font-size: var(--chat-font-size-sm);
    padding: 2px 6px;
}