body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: #ffffff; /* Changed from #f5f5f5 to white */
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased; /* Improve text rendering */
    -moz-osx-font-smoothing: grayscale; /* Improve text rendering */
}

.message {
    margin: 12px 0;
    padding: 12px 18px;
    border-radius: 16px;
    will-change: opacity, transform; /* Optimize for animations */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.message:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.user-message {
    background: linear-gradient(135deg, #0D47A1 0%, #5472D3 100%);
    margin-left: auto;
    margin-right: 5%;
    max-width: 75%;
    color: #ffffff;
    display: flex;
    align-items: center;
    white-space: pre-wrap;
    font-weight: 400;
    border-top-right-radius: 4px; /* Unique shape for user messages */
    animation: slideInFromRight 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.user-message > div {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.agent-message {
    background: linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 100%);
    margin-right: auto;
    margin-left: 5%;
    max-width: 75%;
    color: #424242;
    line-height: 1.6;
    font-weight: 300;
    position: relative;
    cursor: pointer;
    transition: margin-left 0.3s ease, box-shadow 0.2s ease, transform 0.2s ease;
    border-top-left-radius: 4px; /* Unique shape for agent messages */
    animation: slideInFromLeft 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dark mode styles for messages */
.dark-mode .user-message {
    background: linear-gradient(135deg, #84A0FF 0%, #5472D3 100%);
}

.dark-mode .agent-message {
    background: linear-gradient(135deg, #2c2c2c 0%, #1e1e1e 100%);
    color: #e0e0e0;
}

/* Message interaction controls */
.message-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.message:hover .message-controls {
    opacity: 1;
}

/* Code block styling */
pre {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 12px 0;
    position: relative;
    overflow: auto;
    border-left: 4px solid #26A69A; /* Accent color */
    transition: all 0.2s ease;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.dark-mode pre {
    background: rgba(255, 255, 255, 0.05);
    border-left: 4px solid #26A69A;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

pre:hover {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 3px 8px rgba(0, 0, 0, 0.05);
}

.dark-mode pre:hover {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 3px 8px rgba(0, 0, 0, 0.2);
}

code {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9em;
    line-height: 1.6;
}

/* Code block copy button */
.code-block-header {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background: rgba(38, 166, 154, 0.1); /* Accent color with transparency */
    border-bottom-left-radius: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

pre:hover .code-block-header {
    opacity: 1;
}

.copy-code-button {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #26A69A; /* Accent color */
    font-size: 0.8em;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.copy-code-button:hover {
    background: rgba(38, 166, 154, 0.2);
}

.dark-mode .copy-code-button {
    color: #4DB6AC; /* Lighter accent color for dark mode */
}

/* Syntax highlighting colors - base16 theme */
.hljs-comment, .hljs-quote { color: #8e908c; }
.hljs-variable, .hljs-template-variable, .hljs-attribute, .hljs-tag, .hljs-name, .hljs-regexp, .hljs-link, .hljs-selector-id, .hljs-selector-class { color: #c82829; }
.hljs-number, .hljs-meta, .hljs-built_in, .hljs-builtin-name, .hljs-literal, .hljs-type, .hljs-params { color: #f5871f; }
.hljs-string, .hljs-symbol, .hljs-bullet { color: #718c00; }
.hljs-title, .hljs-section { color: #4271ae; }
.hljs-keyword, .hljs-selector-tag { color: #8959a8; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }

/* Dark mode syntax highlighting */
.dark-mode .hljs-comment, .dark-mode .hljs-quote { color: #969896; }
.dark-mode .hljs-variable, .dark-mode .hljs-template-variable, .dark-mode .hljs-attribute, .dark-mode .hljs-tag, .dark-mode .hljs-name, .dark-mode .hljs-regexp, .dark-mode .hljs-link, .dark-mode .hljs-selector-id, .dark-mode .hljs-selector-class { color: #cc6666; }
.dark-mode .hljs-number, .dark-mode .hljs-meta, .dark-mode .hljs-built_in, .dark-mode .hljs-builtin-name, .dark-mode .hljs-literal, .dark-mode .hljs-type, .dark-mode .hljs-params { color: #de935f; }
.dark-mode .hljs-string, .dark-mode .hljs-symbol, .dark-mode .hljs-bullet { color: #b5bd68; }
.dark-mode .hljs-title, .dark-mode .hljs-section { color: #81a2be; }
.dark-mode .hljs-keyword, .dark-mode .hljs-selector-tag { color: #b294bb; }

/* Agent message content styles */
.agent-message p {
    margin: 0.7em 0;
}

.agent-message > div > * {
    margin-top: 1em;
    margin-bottom: 1em;
}

.agent-message pre {
    background-color: #f0f0f0;
    padding: 1em;
    border-radius: 4px;
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.agent-message code {
    background-color: #f0f0f0;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
}

.agent-message img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em auto;
    border-radius: 4px;
}

.agent-message table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
    border-collapse: collapse;
    margin: 1em 0;
}

.agent-message table th,
.agent-message table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.agent-message iframe,
.agent-message video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em auto;
}

.agent-message blockquote {
    border-left: 4px solid #ddd;
    margin: 0;
    padding-left: 1em;
    color: #666;
}

.agent-message ul, .agent-message ol {
    padding-left: 2em;
}

.agent-message h1 {
    font-weight: 500;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.agent-message h2 {
    font-weight: 400;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.agent-message h3, .agent-message h4 {
    font-weight: 300;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.chat-messages {
    height: calc(100vh - 300px);
    max-height: 70vh;
    overflow-y: auto;
    padding: 20px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.chat-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 15px;
    background-color: #ffffff; /* Ensure it matches the body background */
    box-sizing: border-box;
    contain: layout; /* Improve rendering performance */
}

/* Enhanced Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Staggered animation for multiple messages */
.message:nth-child(1) { animation-delay: 0.05s; }
.message:nth-child(2) { animation-delay: 0.1s; }
.message:nth-child(3) { animation-delay: 0.15s; }
.message:nth-child(4) { animation-delay: 0.2s; }
.message:nth-child(5) { animation-delay: 0.25s; }

/* Enhanced loading dots animation */
.loading-dots {
    display: inline-flex;
    gap: 8px;
    padding: 10px;
    margin: 10px 0;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: #0D47A1;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
    will-change: transform; /* Optimize for animations */
}

.dark-mode .dot {
    background-color: #5472D3;
}

.dot:nth-child(1) {
    animation-delay: -0.32s;
}

.dot:nth-child(2) {
    animation-delay: -0.16s;
}

/* Needs a 3rd dot definition if there are 3 dots */
/* .dot:nth-child(3) { animation-delay: 0s; } */

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

/* Typing indicator animation */
.typing-indicator {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 100%);
    padding: 10px 15px;
    border-radius: 16px;
    margin-left: 5%;
    margin-top: 8px;
    margin-bottom: 8px;
    max-width: 100px;
    border-top-left-radius: 4px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.dark-mode .typing-indicator {
    background: linear-gradient(135deg, #2c2c2c 0%, #1e1e1e 100%);
}

.typing-dot {
    width: 6px;
    height: 6px;
    margin: 0 2px;
    background-color: #0D47A1;
    border-radius: 50%;
    animation: typingBounce 1.5s infinite ease-in-out;
    opacity: 0.7;
}

.dark-mode .typing-dot {
    background-color: #5472D3;
}

.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-4px);
    }
}

.chat-history-drawer {
    width: 250px;
    background-color: #f5f5f5; /* Light gray */
    height: calc(100vh - 64px);
    margin-top: 64px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: width 0.3s ease;
    overflow-x: hidden;
    will-change: width;
}

.chat-history-list {
    padding: 8px;
    contain: content;
}

.chat-history-item {
    border-radius: 8px;
    margin: 8px 0;
    padding: 10px 12px;
    transition: all 0.2s ease;
    cursor: pointer;
    font-weight: 400;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.chat-history-item:hover {
    background-color: #f0f0f0;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

.chat-history-item.selected {
    background-color: #e3f2fd;
    color: #1976d2;
    box-shadow: 0 2px 5px rgba(25, 118, 210, 0.15);
}

.chat-history-toggle {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 1200;
    background-color: #1976d2 !important;
    color: white !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2) !important;
}

.chat-history-toggle:hover {
    background-color: #1565c0 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

.main-content {
    transition: margin-left 0.3s ease;
    will-change: margin-left;
}

.main-content-shifted {
    margin-left: 250px;
}

/* Chat history expansion styles */
.history-expanded {
  position: fixed;
  z-index: 1200;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-paper); /* Use CSS variables if defined elsewhere */
}

.history-expanded .history-header {
  position: sticky;
  top: 0;
  z-index: 1201;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: var(--background-paper); /* Use CSS variables if defined elsewhere */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.history-expanded .hamburger-button {
  display: block !important; /* Ensure hamburger button is always visible */
}

/* Fix header and text area positioning */
.app-container.history-expanded .app-header,
.app-container.history-expanded .message-container {
  margin-left: 0;
  width: 100%;
}


@media (max-width: 768px) {
    .chat-messages {
        height: calc(100vh - 250px);
        padding: 15px;
    }

    .message {
        margin: 10px 0;
        padding: 10px 12px;
    }

    .user-message, .agent-message {
        max-width: 85%;
    }

    /* Enhance message controls for touch */
    .message-controls {
        opacity: 1;
        top: 4px;
        right: 4px;
    }

    .message-controls button {
        min-width: 40px;
        min-height: 40px;
    }

    .message-content { /* Assuming this class exists for content within message */
        padding-right: 50px;
    }

    .agent-message h1 {
        font-size: 1.6rem;
    }

    .agent-message h2 {
        font-size: 1.4rem;
    }

    .agent-message h3 {
        font-size: 1.2rem;
    }

    .agent-message pre {
        padding: 0.8em;
        font-size: 0.9em;
    }

    .agent-message code {
        padding: 0.15em 0.3em;
    }

    .agent-message table th,
    .agent-message table td {
        padding: 6px;
        font-size: 0.9em;
    }

    /* Responsive drawer */
    .chat-history-drawer {
        width: 200px;
    }

    .main-content-shifted {
        margin-left: 200px;
    }
}

/* Mobile-specific optimizations */
@media (max-width: 480px) {
    /* Reduce animation complexity on mobile */
    .chat-history-item {
        transition: background-color 0.2s ease;
        transform: none !important; /* Remove transform animations */
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important; /* Simpler shadow */
    }

    .chat-history-item:hover {
        transform: none !important; /* Disable hover transform effect */
    }

    /* Optimize layout and sizing */
    .chat-messages {
        height: calc(100vh - 200px);
        padding: 12px;
    }

    .message {
        margin: 8px 0;
        padding: 8px 10px;
        animation-duration: 0.2s; /* Faster animation */
    }

    .user-message, .agent-message {
        max-width: 90%;
        font-size: 0.95em;
        contain: content; /* Improve rendering performance */
    }

    .agent-message p {
        margin: 0.5em 0;
    }

    .agent-message > div > * {
        margin-top: 0.8em;
        margin-bottom: 0.8em;
    }

    .agent-message h1 {
        font-size: 1.4rem;
        margin-top: 0.8em;
        margin-bottom: 0.4em;
    }

    .agent-message h2 {
        font-size: 1.3rem;
        margin-top: 0.8em;
        margin-bottom: 0.4em;
    }

    .agent-message h3, .agent-message h4 {
        font-size: 1.1rem;
        margin-top: 0.8em;
        margin-bottom: 0.4em;
    }

    .agent-message pre {
        padding: 0.6em;
        font-size: 0.85em;
    }

    .agent-message code {
        padding: 0.1em 0.25em;
        font-size: 0.85em;
    }

    .agent-message ul, .agent-message ol {
        padding-left: 1.5em;
    }

    .agent-message blockquote {
        padding-left: 0.8em;
    }

    /* Optimize loading dots animation */
    .loading-dots {
        gap: 6px;
        padding: 8px;
    }

    .dot {
        width: 6px;
        height: 6px;
        animation-duration: 1s; /* Slightly faster animation */
    }

    /* Responsive drawer */
    .chat-history-drawer {
        width: 100%;
        max-width: 100%;
        z-index: 1300; /* Ensure drawer appears above other content */
    }

    .main-content-shifted {
        margin-left: 0; /* Don't shift content on mobile, drawer overlays instead */
    }

    .chat-history-toggle {
        bottom: 24px; /* Move toggle button up slightly on mobile */
        left: 24px;
        padding: 12px !important; /* Larger touch target */
    }
}

/* Optimize animations for low-powered devices / user preference */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .message, .dot, .typing-dot {
        animation: none !important;
    }
}

/* Add support for reduced data usage */
@media (prefers-reduced-data: reduce) {
    img, video, iframe {
        max-width: 80%;
        max-height: 300px;
    }
}

/* Add print styles to save ink/toner when printing */
@media print {
    .chat-history-drawer, .chat-history-toggle, .message-controls, .code-block-header {
        display: none !important;
    }

    body, .chat-container {
        background-color: white !important;
        color: black !important;
        box-shadow: none !important;
    }

    .message {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ccc;
    }

    .user-message, .agent-message {
        background: none !important;
        color: black !important;
    }

    pre {
        background: #f8f8f8 !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
}