html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

input, select, textarea {
    width: 100%;
    box-sizing: border-box;
}

/* Light theme variables */
:root {
    --bg-color: #f8f9fa;
    --header-bg: linear-gradient(135deg, #2c3e50, #1a252f);
    --header-text: #ffffff;
    --messages-bg: white;
    --input-bg: white;
    --input-border: #ddd;
    --input-text: #333;
    --button-bg: #3498db;
    --button-hover: #2980b9;
    --footer-bg: #f8f9fa;
    --footer-text: #777;
    --shadow-color: rgba(0,0,0,0.1);
}

/* Dark theme variables */
.dark-mode {
    --bg-color: #121212;
    --header-bg: linear-gradient(135deg, #000000, #1a1a1a);
    --header-text: #e9edef;
    --messages-bg: #1c1c1c;
    --input-bg: #2a2a2a;
    --input-border: #3a3a3a;
    --input-text: #e0e0e0;
    --button-bg: #0f6cbd;
    --button-hover: #0a5da9;
    --footer-bg: #1a1a1a;
    --footer-text: #888;
    --shadow-color: rgba(0,0,0,0.3);
}

.chat-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom, 50px);
    background-color: var(--bg-color);
    transition: background-color 0.3s ease, width 0.3s ease, margin-left 0.3s ease;
    margin-left: 0;
    width: 100vw;
    box-sizing: border-box;
}

    .chat-container.sidebar-expanded {
        margin-left: 280px;
        width: calc(100vw - 280px);
    }

    .chat-container.sidebar-collapsed {
        margin-left: 60px;
        width: calc(100vw - 60px);
    }

/* Sidebar Styles */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    background: var(--header-bg);
    color: var(--header-text);
    transition: width 0.3s ease;
    z-index: 1000;
    overflow: hidden;
    box-shadow: 2px 0 10px var(--shadow-color);
}

.chat-container, .sidebar {
    height: 100dvh;
}

    .sidebar.collapsed {
        width: 60px;
    }

    .sidebar.expanded {
        width: 280px;
    }

.hamburger-menu {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 1001;
}

.sidebar.collapsed .hamburger-menu {
    left: 15px;
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: var(--header-text);
    margin: 5px 0;
    transition: 0.3s;
    border-radius: 2px;
}

.hamburger-menu.active .hamburger-line:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

.sidebar-content {
    padding-top: 60px;
    height: 100%;
    overflow-y: auto;
}

.sidebar-button {
    width: 100%;
    padding: 12px 15px;
    background: none;
    border: none;
    color: var(--header-text);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    box-sizing: border-box;
}

    .sidebar-button:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .sidebar-button .icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        min-width: 18px;
    }

    .sidebar-button .button-text {
        white-space: nowrap;
        opacity: 1;
        transition: opacity 0.3s ease;
        overflow: hidden;
    }

.sidebar.collapsed .button-text {
    opacity: 0;
    width: 0;
}

.sidebar.collapsed .sidebar-button {
    justify-content: center;
    padding: 12px 0;
    gap: 0;
}

    .sidebar.collapsed .sidebar-button .icon {
        margin: 0 auto;
    }

/* Base header styles */
.chat-header {
    display: flex;
    flex-direction: column;
    background: var(--header-bg);
    color: var(--header-text);
    font-weight: 500;
    box-shadow: 0 2px 10px var(--shadow-color);
    transition: background 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.header-main-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 6px 15px 1px 15px;
    height: auto;
    box-sizing: border-box;
}

.header-controls-container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.brand-container {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: clamp(0.8rem, 2vw, 1rem);
}

    .brand-container img {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }

.brand-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--header-text);
}

.conversation-link {
    padding: 6px 10px;
    color: var(--header-text);
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
}

    .conversation-link:hover {
        background-color: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
    }

.header-token-count {
    padding: 6px 10px;
    color: var(--header-text);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    white-space: nowrap;
    position: relative;
    top: -2px;
}

.theme-toggle {
    position: relative;
    width: 44px;
    height: 22px;
}

    .theme-toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.theme-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

    .theme-toggle-slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

input:checked + .theme-toggle-slider {
    background-color: #0f6cbd;
}

    input:checked + .theme-toggle-slider:before {
        transform: translateX(22px);
    }

.theme-toggle-label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--header-text);
    font-size: 0.9rem;
}

/* Read-only toggle styles */
.readonly-toggle {
    position: relative;
    width: 44px;
    height: 22px;
}

    .readonly-toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.readonly-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

    .readonly-toggle-slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

input:checked + .readonly-toggle-slider {
    background-color: #e74c3c;
}

    input:checked + .readonly-toggle-slider:before {
        transform: translateX(22px);
    }

.readonly-toggle-label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--header-text);
    font-size: 0.9rem;
    position: relative;
}

.readonly-mode-text {
    position: absolute;
    white-space: nowrap;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.8rem;
    padding: 3px 8px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.readonly-toggle-label:hover .readonly-mode-text {
    opacity: 1;
}

/* Auto Speech toggle styles */
.autospeech-toggle {
    position: relative;
    width: 44px;
    height: 22px;
}

    .autospeech-toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.autospeech-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

    .autospeech-toggle-slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

input:checked + .autospeech-toggle-slider {
    background-color: #28a745;
}

    input:checked + .autospeech-toggle-slider:before {
        transform: translateX(22px);
    }

.autospeech-toggle-label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--header-text);
    font-size: 0.9rem;
    position: relative;
}

.autospeech-mode-text {
    position: absolute;
    white-space: nowrap;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.8rem;
    padding: 3px 8px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.autospeech-toggle-label:hover .autospeech-mode-text {
    opacity: 1;
}

.chat-messages {
    flex: 1 1 auto;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch; /* For better scrolling on iOS */
    background-color: var(--messages-bg);
    box-shadow: inset 0 0 10px var(--shadow-color);
    transition: background-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.tool-log-host {
    flex: 0 0 auto;
    height: 45vh;
    max-height: 50vh;
    min-height: 220px;
    padding: 10px 16px 12px 16px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--messages-bg);
}

.tool-log-toggle {
    border: none;
    cursor: pointer;
    font: inherit;
}

    .tool-log-toggle.active {
        background-color: rgba(255, 255, 255, 0.2);
    }

.chat-input-container {
    flex: 0 auto auto;
    display: flex;
    padding: 15px 20px;
    background-color: var(--input-bg);
    border-top: 1px solid var(--input-border);
    box-shadow: 0 -2px 10px var(--shadow-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.chat-input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    min-height: 40px;
    resize: none;
    font-family: inherit;
    background-color: var(--input-bg);
    color: var(--input-text);
    box-shadow: 0 1px 3px var(--shadow-color);
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s, color 0.3s, height 0.3s ease;
    box-sizing: border-box;
}

    /* New styles for expanded input */
    .chat-input.expanded {
        height: 150px; /* Set a taller height when expanded */
    }

    .chat-input:focus {
        border-color: var(--button-bg);
        box-shadow: 0 1px 5px rgba(52, 152, 219, 0.2);
        outline: none;
    }

.chat-send-button, .chat-expand-button, .mic-button {
    margin-left: 10px;
    padding: 10px 5px;
    background-color: var(--button-bg);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    height: 46px;
    align-self: flex-end;
    font-weight: 500;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.chat-expand-button, .mic-button {
    padding: 10px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .chat-send-button:hover, .chat-expand-button:hover, .mic-button:hover {
        background-color: var(--button-hover);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px var(--shadow-color);
    }

    .mic-button.recording {
        background-color: #e74c3c;
        animation: pulse 1.5s infinite;
    }

    .mic-button.error {
        background-color: #e74c3c;
    }

.mic-permission-tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1000;
    width: max-content;
    max-width: 90%;
    text-align: center;
}

.mic-button:hover .mic-permission-tooltip {
    opacity: 1;
}

/* For the AI: the at symbol needs to be escaped so its @@keyframes */
@@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

.chat-footer {
    flex: 0 0 auto;
    max-height: 5em;
    background-color: green;
    padding: 10px 0px;
    font-size: 0.8em;
    color: var(--footer-text);
    text-align: right;
    background-color: var(--footer-bg);
    border-top: 1px solid var(--input-border);
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* Extra padding at the bottom to ensure visibility on mobile */
.extra-footer-space {
    flex: 0 0 auto;
    height: 2px;
}

    .extra-footer-space.phone {
        /*height: 70px;*/
    }

/* Add margin bottom to last message to ensure space at the end of the chat */
.message-item:last-child {
    margin-bottom: 10px;
}

.icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-files {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-8l-2-2H4C2.9 4 2 4.9 2 6v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V6h5.17l2 2H20v10z'/%3E%3C/svg%3E");
}

.icon-new-chat {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z'/%3E%3Cpath d='M8 9h2v2h2v-2h2V7h-2V5h-2v2H8z'/%3E%3C/svg%3E");
}

.icon-new-project {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z'/%3E%3Cpath d='M12 13h2v2h2v-2h-2v-2h-2v2z'/%3E%3C/svg%3E");
}

.icon-download {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E");
}

.icon-profile {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

.icon-target {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zM12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
}

.icon-broom {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M19.36 2.72l1.42 1.42-5.72 5.72c1.07 1.54 1.22 3.39.32 4.3l-3.34 3.34c-.71.71-1.9.77-3.07.22l3.08-3.08c.45-.45.45-1.19 0-1.64-.45-.45-1.19-.45-1.64 0l-3.08 3.08c-.55-1.18-.49-2.36.22-3.07l3.34-3.34c.9-.9 2.76-.75 4.3.32l5.72-5.72 1.45 1.45zm-8.78 14.08l-7.2 7.2-3.38-3.38 7.2-7.2 3.38 3.38z'/%3E%3C/svg%3E");
}

.icon-computer {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z'/%3E%3C/svg%3E");
}

.icon-settings-gear {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 8 1.65 1.65 0 0 0 4.27 6.18l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 3.6a1.65 1.65 0 0 0 1-1.51V2a2 2 0 0 1 4 0v.09A1.65 1.65 0 0 0 15 3.6a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c.19.54.19 1.13 0 1.67A1.65 1.65 0 0 0 20.91 12H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></g></svg>");
}

.icon-link {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M17 7h-4v2h4c1.65 0 3 1.35 3 3s-1.35 3-3 3h-4v2h4c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-6 8H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-2zm-3-4h8v2H8z'/%3E%3C/svg%3E");
}

.icon-conversations {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z'/%3E%3C/svg%3E");
}

.icon-import {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z'/%3E%3Cpath d='M5 20h14'/%3E%3Cpath d='M19 14l-3-3-3 3'/%3E%3Cpath d='M5 14l3-3 3 3'/%3E%3C/svg%3E");
}

.icon-expand {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%224%205%208%209%2012%205%2016%209%2020%205%22%3E%3C%2Fpolyline%3E%3Cpolyline%20points%3D%224%2010%208%2014%2012%2010%2016%2014%2020%2010%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
}

.icon-collapse {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%224%2014%208%2010%2012%2014%2016%2010%2020%2014%22%3E%3C%2Fpolyline%3E%3Cpolyline%20points%3D%224%2019%208%2015%2012%2019%2016%2015%2020%2019%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
}

.icon-lock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
}

.icon-unlock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z'/%3E%3C/svg%3E");
}

.icon-microphone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.91-3c-.49 0-.9.36-.98.85C16.52 14.2 14.47 16 12 16s-4.52-1.8-4.93-4.15c-.08-.49-.49-.85-.98-.85-.61 0-1.09.54-1 1.14.49 3 2.89 5.35 5.91 5.78V20c0 .55.45 1 1 1s1-.45 1-1v-2.08c3.02-.43 5.42-2.78 5.91-5.78.1-.6-.39-1.14-1-1.14z'/%3E%3C/svg%3E");
}

.icon-ux-designer {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.04 10 9c0 3.31-2.69 6-6 6h-1.77c-.28 0-.5.22-.5.5 0 .12.05.23.13.33.41.47.64 1.06.64 1.67 0 1.38-1.12 2.5-2.5 2.5zm0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8c.28 0 .5-.22.5-.5 0-.16-.08-.28-.14-.35-.41-.46-.63-1.05-.63-1.65 0-1.38 1.12-2.5 2.5-2.5H16c2.21 0 4-1.79 4-4 0-3.86-3.59-7-8-7z'/%3E%3Ccircle cx='6.5' cy='11.5' r='1.5'/%3E%3Ccircle cx='9.5' cy='7.5' r='1.5'/%3E%3Ccircle cx='14.5' cy='7.5' r='1.5'/%3E%3Ccircle cx='17.5' cy='11.5' r='1.5'/%3E%3C/svg%3E");
}

.icon-play {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7L8 5z'/%3E%3C/svg%3E");
}

.icon-stop {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M6 6h12v12H6V6z'/%3E%3C/svg%3E");
}

/* Image thumbnails container */
.image-thumbnails-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px 10px;
    background-color: var(--input-bg);
    border-top: 1px solid var(--input-border);
    width: 100%;
    box-sizing: border-box;
}

/* Individual thumbnail styles */
.image-thumbnail {
    width: 26px;
    height: 26px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--input-border);
    transition: transform 0.2s ease;
}

    .image-thumbnail:hover {
        transform: scale(1.1);
    }

/* Fullsize image modal */
.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.image-modal-content {
    max-width: 90%;
    max-height: 90%;
    position: relative;
}

    .image-modal-content img {
        max-width: 100%;
        max-height: 90vh;
        border-radius: 8px;
    }

.image-modal-close {
    position: absolute;
    top: -30px;
    right: 0;
    color: white;
    font-size: 24px;
    cursor: pointer;
    background: none;
    border: none;
}

a.download-button {
    text-decoration: none;
    color: inherit;
}

    a.download-button:hover {
        text-decoration: none;
    }

    a.download-button:visited {
        color: inherit;
    }

/* Media query for smaller screens */
@@media (max-width: 768px) {
    .sidebar.expanded {
        width: 250px;
    }

    .chat-container.sidebar-expanded {
        margin-left: 250px;
        width: calc(100vw - 250px);
    }

    .header-controls-container {
        gap: 8px;
    }

    .theme-toggle, .readonly-toggle, .autospeech-toggle {
        width: 36px;
        height: 18px;
    }

    .theme-toggle-slider:before, .readonly-toggle-slider:before, .autospeech-toggle-slider:before {
        height: 12px;
        width: 12px;
        left: 3px;
        bottom: 3px;
    }

    input:checked + .theme-toggle-slider:before,
    input:checked + .readonly-toggle-slider:before,
    input:checked + .autospeech-toggle-slider:before {
        transform: translateX(18px);
    }

    .icon {
        width: 18px;
        height: 18px;
    }
}

/* Media query for very small screens */
@@media (max-width: 480px) {
    .chat-header {
        padding: 0;
    }

    .header-main-row {
        padding: 6px 10px;
        height: 36px;
    }

    .brand-text {
        font-size: 0.9rem;
        white-space: nowrap;
        font-size: clamp(0.8rem, 2vw, 1rem);
    }

    .header-token-count {
        font-size: 0.75rem;
        padding: 4px 8px;
        top: -3px;
    }

    .conversation-link {
        font-size: 0.75rem;
        padding: 4px 8px;
    }

    .sidebar.expanded {
        width: 220px;
    }

    .chat-container.sidebar-expanded {
        margin-left: 220px;
        width: calc(100vw - 220px);
    }

    .hamburger-menu {
        width: 25px;
        height: 25px;
    }

    .hamburger-line {
        height: 2px;
        margin: 4px 0;
    }
}