* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --bg-primary: #212121;
            --bg-secondary: #1a1a1a;
            --bg-sidebar: #171717;
            --bg-input: #2f2f2f;
            --bg-user-msg: #2f2f2f;
            --text-primary: #ececec;
            --text-secondary: #b8b8b8;
            --text-muted: #9a9a9a;
            --border-color: #2f2f2f;
            --border-input: #424242;
            --hover-bg: #2f2f2f;
            --shadow: rgba(0, 0, 0, 0.2);
            --accent: #b01a33;
            --accent-light: #d42d47;
        }

        html {
            height: 100%;
            overflow: hidden;
            background-color: var(--bg-primary);
        }

        html.scroll-unlocked {
            height: auto;
            overflow: auto;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            height: 100vh;
            overflow: hidden;
            transition: background-color 0.3s, color 0.3s;
            scrollbar-width: none;
            -ms-overflow-style: none;
            position: relative;
        }

        body::-webkit-scrollbar {
            display: none;
        }

        /* Quando destrava scroll */
        body.scroll-unlocked {
            height: auto;
            overflow: auto;
        }

        /* Overlay saiba mais */
        .saiba-mais-overlay {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0;
            background: none;
            cursor: pointer;
            transition: opacity 0.4s ease;
        }

        .saiba-mais-overlay > * {
            pointer-events: auto;
        }

        .saiba-mais-overlay.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .saiba-mais-overlay p {
            font-size: 10px;
            color: var(--text-muted);
            margin: 0 0 1px;
            letter-spacing: 0.5px;
            opacity: 0.6;
            text-transform: lowercase;
        }

        .saiba-mais-overlay svg {
            width: 14px;
            height: 14px;
            color: var(--text-muted);
            opacity: 0.4;
            animation: bounceDown 2s infinite;
        }

        @keyframes bounceDown {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(4px); }
        }

        /* Seção abaixo do chat - Timeline full width */
        .below-chat-section {
            background: #fff;
            padding: 40px 0 0;
            width: 100%;
            visibility: hidden;
            height: 0;
            overflow: hidden;
        }

        body.scroll-unlocked .below-chat-section {
            visibility: visible;
            height: auto;
            overflow: visible;
        }

        .below-chat-section h1 {
            font-size: 28px;
            font-weight: 700;
            color: #1a1a1a;
            text-align: center;
            max-width: 900px;
            margin: 0 auto 30px;
            padding: 0 20px;
            line-height: 1.3;
        }

        /* KNIGHTLAB DARK MODE - below chat */
        [data-theme="dark"] .tl-timeline { background-color: #212121 !important; }
        [data-theme="dark"] .tl-slide { background-color: #212121 !important; }
        [data-theme="dark"] .tl-slide-content { background-color: #212121 !important; }
        [data-theme="dark"] .tl-text-content-container { background-color: #212121 !important; }
        [data-theme="dark"] .tl-headline-date,
        [data-theme="dark"] .tl-headline { color: #ececec !important; }
        [data-theme="dark"] .tl-text p { color: #b8b8b8 !important; }
        [data-theme="dark"] .tl-timenav,
        [data-theme="dark"] .tl-timenav-slider,
        [data-theme="dark"] .tl-timeaxis,
        [data-theme="dark"] .tl-timeaxis-background { background-color: #1a1a1a !important; }
        [data-theme="dark"] .tl-timeaxis-tick-text { color: #9a9a9a !important; }
        [data-theme="dark"] .tl-timemarker .tl-timemarker-content-container {
            background-color: #2f2f2f !important; border-color: #424242 !important;
        }
        [data-theme="dark"] .tl-timemarker .tl-timemarker-text h2.tl-headline { color: #ececec !important; }
        [data-theme="dark"] .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container {
            background-color: #c41e3a !important; border-color: #c41e3a !important;
        }
        [data-theme="dark"] .tl-timemarker.tl-timemarker-active .tl-timemarker-text h2.tl-headline { color: #fff !important; }
        [data-theme="dark"] .tl-menubar { background-color: #1a1a1a !important; }
        [data-theme="dark"] .tl-menubar-button { background-color: #2f2f2f !important; color: #ececec !important; }
        [data-theme="dark"] .tl-slidenav-next,
        [data-theme="dark"] .tl-slidenav-previous { color: #ececec !important; }
        [data-theme="dark"] .tl-slidenav-next .tl-slidenav-title,
        [data-theme="dark"] .tl-slidenav-previous .tl-slidenav-title { color: #b8b8b8 !important; }
        [data-theme="dark"] .tl-media-content-container { background: #212121 !important; }
        .tl-media-image img { border-radius: 10% !important; }
        [data-theme="dark"] .tl-credit,
        [data-theme="dark"] .tl-caption { color: #9a9a9a !important; }
        [data-theme="dark"] .tl-timemarker-line-left,
        [data-theme="dark"] .tl-timemarker-line-right { border-color: #424242 !important; }
        [data-theme="dark"] .below-chat-section { background: #212121; }
        [data-theme="dark"] .below-chat-section h1 { color: #ececec; }

        .below-chat-section iframe,
        #timeline-embed-index {
            width: 100% !important;
        }

        /* Rodapé */
        .site-footer {
            background: #1a1a1a;
            color: #999;
            padding: 40px 20px 24px;
            font-size: 12px;
            visibility: hidden;
            height: 0;
            overflow: hidden;
        }

        body.scroll-unlocked .site-footer {
            visibility: visible;
            height: auto;
            overflow: visible;
        }

        .footer-content {
            max-width: 1100px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 30px;
        }

        .footer-col {
            min-width: 140px;
        }

        .footer-col .footer-heading {
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .footer-col a {
            display: block;
            color: #999;
            text-decoration: none;
            padding: 3px 0;
            font-size: 12px;
            transition: color 0.2s;
        }

        .footer-col a:hover {
            color: #fff;
        }

        .footer-bottom {
            max-width: 1100px;
            margin: 24px auto 0;
            padding-top: 16px;
            border-top: 1px solid #333;
            text-align: center;
            color: #666;
            font-size: 11px;
        }

        @media (max-width: 768px) {
            .below-chat-section h1 {
                font-size: 20px;
            }
            .below-chat-section {
                padding: 30px 0 0;
            }
            .footer-content {
                flex-direction: column;
                gap: 24px;
            }
        }

        /* Layout Principal */
        .app-container {
            display: flex;
            height: 100vh;
            overflow: hidden;
        }

        /* Sidebar */
        .sidebar {
            width: 260px;
            background-color: var(--bg-sidebar);
            border-right: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            transition: width 0.3s ease, transform 0.3s ease;
            position: relative;
            z-index: 100;
            overflow: hidden;
        }

        /* Sidebar Collapsed - apenas ícones */
        .sidebar.collapsed {
            width: 68px;
        }

        .sidebar.collapsed .logo-text,
        .sidebar.collapsed .menu-text,
        .sidebar.collapsed .section-text,
        .sidebar.collapsed .chat-title,
        .sidebar.collapsed .sidebar-chats {
            opacity: 0;
            width: 0;
            overflow: hidden;
            visibility: hidden;
        }

        .sidebar.collapsed .sidebar-logo {
            width: 100%;
            justify-content: center;
        }

        .sidebar.collapsed .sidebar-top {
            justify-content: center;
            padding: 12px 8px;
            flex-direction: column;
            gap: 8px;
        }

        .sidebar.collapsed .sidebar-menu {
            padding: 8px;
        }

        .sidebar.collapsed .menu-item {
            justify-content: center;
            padding: 12px;
        }

        .sidebar.collapsed .sidebar-bottom {
            padding: 8px;
        }

        .sidebar.collapsed .settings-btn {
            justify-content: center;
            padding: 12px;
        }

        .sidebar .menu-text,
        .sidebar .section-text,
        .sidebar .chat-title,
        .sidebar .logo-text {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: opacity 0.2s ease, width 0.2s ease;
        }

        .logo-text {
            font-weight: 600;
            font-size: 16px;
            color: var(--text-primary);
            margin-left: 8px;
        }

        /* Sidebar Top - Logo + Collapse */
        .sidebar-top {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: padding 0.3s ease, flex-direction 0.3s ease;
        }

        .sidebar-close-btn,
        .sidebar-collapse-btn {
            width: 32px;
            height: 32px;
            border: none;
            background: transparent;
            cursor: pointer;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            transition: background-color 0.2s, color 0.2s;
            flex-shrink: 0;
        }

        .sidebar-close-btn:hover,
        .sidebar-collapse-btn:hover {
            background-color: var(--hover-bg);
            color: var(--text-primary);
        }

        .sidebar-logo {
            display: flex;
            align-items: center;
            width: auto;
            height: 28px;
        }

        .sidebar-logo img {
            width: 28px;
            height: 28px;
            object-fit: contain;
            flex-shrink: 0;
        }

        /* Menu Items */
        .sidebar-menu {
            padding: 8px 12px;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .menu-item {
            width: 100%;
            padding: 10px 12px;
            border: none;
            background: transparent;
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: background-color 0.2s;
            text-align: left;
        }

        .menu-item:hover {
            background-color: var(--hover-bg);
        }

        .menu-item.active {
            background-color: var(--hover-bg);
        }

        .menu-item svg {
            flex-shrink: 0;
        }

        /* Section Title */
        .sidebar-section-title {
            padding: 16px 16px 8px;
            font-size: 12px;
            font-weight: 500;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .sidebar-content {
            flex: 1;
            overflow-y: auto;
            padding: 0 8px;
        }

        .chat-history-item {
            width: 100%;
            padding: 10px 12px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: background-color 0.2s;
            background: none;
            border: none;
            text-align: left;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .chat-history-icon {
            flex-shrink: 0;
            color: var(--text-secondary);
        }

        .chat-title {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sidebar.collapsed .chat-history-item {
            justify-content: center;
            padding: 10px;
        }

        .sidebar.collapsed .chat-title {
            display: none;
        }

        .chat-history-item:hover {
            background-color: var(--hover-bg);
        }

        .chat-history-item.active {
            background-color: var(--hover-bg);
        }

        .sidebar-footer {
            padding: 8px 12px;
            border-top: 1px solid var(--border-color);
        }

        /* Main Content */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
            overflow: hidden;
            position: relative;
        }

        /* Header */
        .header {
            height: 56px;
            display: flex;
            align-items: center;
            padding: 0 16px;
            border-bottom: 1px solid var(--border-color);
            background-color: var(--bg-primary);
            gap: 12px;
        }

        /* Menu Button (hamburger) */
        .menu-btn {
            display: none;
            width: 40px;
            height: 40px;
            border: none;
            background: transparent;
            cursor: pointer;
            border-radius: 8px;
            align-items: center;
            justify-content: center;
            color: var(--text-primary);
            transition: background-color 0.2s;
        }

        /* Mobile header - esconder por padrão no desktop */
        .mobile-header {
            display: none !important;
        }

        .menu-btn:hover {
            background-color: var(--hover-bg);
        }

        .header-title {
            display: flex;
            align-items: baseline;
            gap: 8px;
        }

        .logo-text {
            font-size: 20px;
            font-weight: 700;
        }

        .header-subtitle {
            font-size: 14px;
            color: var(--text-secondary);
        }

        .home-header-right {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .home-social-icons {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .home-social-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 6px;
            color: var(--text-muted);
            transition: color 0.2s, background 0.2s, transform 0.15s;
            text-decoration: none;
        }
        .home-social-icon:hover {
            color: #c41e3a;
            background: rgba(196, 30, 58, 0.1);
            transform: translateY(-1px);
        }
        .home-social-icon svg {
            width: 15px;
            height: 15px;
        }
        .home-login-btn {
            display: inline-flex;
            align-items: center;
            padding: 6px 18px;
            border-radius: 8px;
            background: #c41e3a;
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
            transition: background 0.2s, transform 0.1s;
            white-space: nowrap;
        }

        .home-login-btn:hover {
            background: #a0162d;
            transform: translateY(-1px);
        }

        /* Chat Area */
        .chat-area {
            flex: 1;
            overflow-y: auto;
            padding: 24px 0;
            position: relative;
        }

        .chat-container {
            max-width: 768px;
            margin: 0 auto;
            padding: 0 24px;
            padding-right: 180px;
        }

        /* Bot fixo à direita — alinhado com lado direito do input (768px centrado) */
        .bot-avatar-fixed {
            position: absolute;
            top: 62%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 768px;
            max-width: calc(100% - 48px);
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            z-index: 100;
            pointer-events: none;
        }

        .message {
            margin-bottom: 16px;
            display: flex;
            line-height: 1.6;
        }

        .message.assistant {
            justify-content: flex-start;
        }

        .message.user {
            justify-content: flex-end;
        }

        .message-content {
            max-width: 80%;
            min-width: 0;
        }

        /* TTS Button */
        .tts-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border: none;
            background: transparent;
            color: #999;
            cursor: pointer;
            border-radius: 50%;
            transition: all 0.2s ease;
            margin-top: 4px;
            padding: 0;
            flex-shrink: 0;
        }

        .tts-btn:hover:not(:disabled) {
            background: rgba(0, 0, 0, 0.06);
            color: #d32f2f;
        }

        .tts-btn.playing {
            color: #d32f2f;
            animation: ttsPulse 1.5s ease-in-out infinite;
        }

        .tts-btn.loading {
            color: #d32f2f;
        }

        .tts-btn:disabled {
            opacity: 0.3;
            cursor: default;
        }

        [data-theme="dark"] .tts-btn {
            color: #777;
        }

        [data-theme="dark"] .tts-btn:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.08);
            color: #ff6659;
        }

        [data-theme="dark"] .tts-btn.playing {
            color: #ff6659;
        }

        @keyframes ttsPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.15); }
        }

        .message-text {
            font-size: 15px;
            word-wrap: break-word;
            padding: 12px 16px;
            border-radius: 18px;
        }

        .message.assistant .message-text {
            background-color: var(--bg-secondary);
            color: #000000;
            border-bottom-left-radius: 4px;
        }

        .message.user .message-text {
            background-color: rgba(0, 0, 0, 0.7);
            color: rgba(255, 255, 255, 0.95);
            border-bottom-right-radius: 4px;
        }

        [data-theme="dark"] .message.assistant .message-text {
            color: #ffffff;
        }

        [data-theme="dark"] .message.user .message-text {
            color: rgba(255, 255, 255, 0.95);
        }

        .message-text p {
            margin-bottom: 12px;
        }

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

        /* Welcome Screen */
        .welcome-screen {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
            padding: 24px;
            position: relative;
        }

        .welcome-top {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 620px;
        }

        .welcome-header-row {
            display: flex;
            align-items: center;
            gap: 20px;
            width: 100%;
            text-align: left;
        }

        .welcome-logo {
            flex-shrink: 0;
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .welcome-logo img {
            width: 80px;
            height: auto;
            object-fit: contain;
        }

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

        .welcome-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 6px;
            color: #000000;
            line-height: 1.3;
        }

        [data-theme="dark"] .welcome-title {
            color: #ffffff;
        }

        .welcome-categories {
            font-size: 12px;
            font-weight: 400;
            color: var(--text-secondary);
            margin-bottom: 0;
            line-height: 1.5;
            letter-spacing: 0.2px;
        }

        /* ======================== BOT AVATAR ======================== */
        .bot-avatar-area {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            width: 100%;
            max-width: 768px;
            margin: 0 auto;
            padding: 0 24px;
            box-sizing: border-box;
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .bot-avatar-area.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .bot-avatar-area.hidden {
            opacity: 0;
            transform: translateY(30px);
            pointer-events: none;
        }

        /* Speech Bubble do Bot — acima da cabeça */
        .bot-speech-bubble {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 16px;
            padding: 14px 18px;
            max-width: 240px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
            position: relative;
            margin-right: 10px;
            margin-bottom: 8px;
            animation: bubbleAppear 0.6s ease-out;
        }

        [data-theme="dark"] .bot-speech-bubble {
            background: #2a2a2e;
            border-color: rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        }

        .bot-speech-bubble p {
            margin: 0;
            font-size: 14px;
            line-height: 1.5;
            color: #333;
        }

        .bot-speech-bubble p:first-child {
            font-weight: 600;
            margin-bottom: 2px;
        }

        [data-theme="dark"] .bot-speech-bubble p {
            color: #e0e0e0;
        }

        /* Seta da speech bubble apontando para baixo (para o bot) */
        .bot-speech-bubble::after {
            content: "";
            position: absolute;
            bottom: -18px;
            right: 40px;
            width: 0;
            height: 0;
            border-width: 20px 10px 0 10px;
            border-style: solid;
            border-color: #ffffff transparent transparent transparent;
        }

        [data-theme="dark"] .bot-speech-bubble::after {
            border-color: #2a2a2e transparent transparent transparent;
        }

        /* Avatar flutuante */
        .bot-avatar-float {
            animation: botFloat 3s ease-in-out infinite;
        }

        .bot-avatar-img {
            width: 130px;
            height: auto;
            filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.15));
            transition: transform 0.3s ease;
        }

        .bot-avatar-img:hover {
            transform: scale(1.05);
        }

        @keyframes botFloat {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-18px); }
        }

        @keyframes bubbleAppear {
            0% { opacity: 0; transform: scale(0.8) translateX(20px); }
            100% { opacity: 1; transform: scale(1) translateX(0); }
        }

        /* Seta customizada */
        .seta-img {
            width: 28px;
            height: auto;
            animation: setaBounce 2s ease-in-out infinite;
        }

        @keyframes setaBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(6px); }
        }

        .saiba-mais-overlay p {
            color: #c41e3a;
            font-weight: 600;
            font-size: 13px;
            margin: 0 0 4px;
        }

        /* ======================== FIM BOT AVATAR ======================== */

        .welcome-subtitle {
            font-size: 15px;
            color: var(--text-secondary);
            max-width: 400px;
        }

        /* Input Area */
        .input-area {
            padding: 6px 24px 30px;
            background-color: var(--bg-primary);
        }

        .input-container {
            max-width: 768px;
            margin: 0 auto;
        }

        .input-wrapper {
            display: flex;
            align-items: flex-end;
            gap: 12px;
            background-color: var(--bg-input);
            border: 1px solid var(--border-input);
            border-radius: 16px;
            padding: 12px 16px;
            box-shadow: 0 2px 8px var(--shadow);
            transition: border-color 0.2s;
        }

        .input-wrapper:focus-within {
            border-color: var(--border-input);
            outline: none;
        }

        .chat-input {
            flex: 1;
            border: none;
            background: transparent;
            font-size: 15px;
            color: var(--text-primary);
            resize: none;
            outline: none;
            min-height: 72px;
            max-height: 200px;
            line-height: 24px;
            font-family: inherit;
            padding: 8px 0;
            display: flex;
            align-items: flex-start;
            overflow-y: auto;
        }

        .chat-input:focus {
            outline: none;
            border: none;
            box-shadow: none;
        }

        .chat-input::placeholder {
            color: var(--text-muted);
        }

        /* Mic Button */
        .mic-btn {
            width: 36px;
            height: 36px;
            border: none;
            background: transparent;
            cursor: pointer;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            transition: all 0.2s ease;
            margin-right: 4px;
        }

        .mic-btn:hover {
            background: rgba(0, 0, 0, 0.06);
            color: #d32f2f;
        }

        .mic-btn.listening {
            color: #d32f2f;
            animation: micPulse 1s ease-in-out infinite;
        }

        [data-theme="dark"] .mic-btn {
            color: #777;
        }

        [data-theme="dark"] .mic-btn:hover {
            background: rgba(255, 255, 255, 0.08);
            color: #ff6659;
        }

        [data-theme="dark"] .mic-btn.listening {
            color: #ff6659;
        }

        @keyframes micPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }

        .send-btn {
            width: 36px;
            height: 36px;
            border: none;
            background-color: #8b1528;
            cursor: pointer;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: opacity 0.2s, background-color 0.2s;
        }

        .send-btn:hover:not(:disabled) {
            background-color: #a01c30;
        }

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

        .input-footer {
            margin-top: 4px;
            font-size: 12px;
            color: var(--text-muted);
            position: relative;
        }

        .disclaimer-text {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }



        /* Speech Bubble - dica de navegação */
        .speech-bubble {
            position: fixed;
            top: 16px;
            left: 272px;
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            color: #f5f5f5;
            padding: 14px 20px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0.2px;
            cursor: pointer;
            z-index: 1000;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.1);
            animation: bubbleFadeIn 0.5s ease-out;
            display: none;
            align-items: center;
            gap: 8px;
        }

        [data-theme="dark"] .speech-bubble {
            background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
            color: #1a1a1a;
            box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        }

        .speech-bubble-icon {
            font-size: 15px;
            line-height: 1;
        }

        /* Seta apontando para a esquerda */
        .speech-bubble::before {
            content: "";
            position: absolute;
            top: 50%;
            left: -7px;
            transform: translateY(-50%);
            border-width: 7px 7px 7px 0;
            border-style: solid;
            border-color: transparent #1a1a1a transparent transparent;
        }

        [data-theme="dark"] .speech-bubble::before {
            border-color: transparent #f5f5f5 transparent transparent;
        }

        .speech-bubble:hover {
            transform: scale(1.02);
            box-shadow: 0 10px 28px rgba(0,0,0,0.2), 0 3px 8px rgba(0,0,0,0.12);
        }

        @keyframes bubbleFadeIn {
            0% { opacity: 0; transform: translateX(-10px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        @media (max-width: 768px) {
            .speech-bubble {
                display: flex;
                left: 212px;
                font-size: 15px;
                padding: 12px 16px;
            }
        }

        /* Typing Indicator */
        .typing-indicator {
            display: flex;
            gap: 4px;
            padding: 4px 0;
        }

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

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

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

        /* Overlay para mobile */
        .sidebar-overlay {
            display: none !important;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 99;
        }

        .sidebar-overlay.active {
            display: none !important;
        }

        @media (max-width: 768px) {
            .sidebar-overlay.active {
                display: block !important;
            }
        }

        /* ======================== PÁGINA: IMAGENS ======================== */
        .page-imagens {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow-y: auto;
            background: linear-gradient(180deg, rgba(196, 30, 58, 0.08) 0%, var(--bg-primary) 50%);
        }

        .page-header {
            padding: 40px 40px 20px;
            text-align: center;
        }

        .page-title {
            font-size: 32px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .page-subtitle {
            font-size: 16px;
            color: var(--text-secondary);
        }

        .page-content {
            padding: 0 40px 40px;
            flex: 1;
        }

        /* Search Bar */
        .search-bar-container {
            max-width: 700px;
            margin: 0 auto 40px;
        }

        .search-bar {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 20px;
            background-color: var(--bg-input);
            border: 2px solid var(--accent);
            border-radius: 28px;
            box-shadow: 0 4px 20px rgba(196, 30, 58, 0.15);
        }

        .search-bar svg {
            color: var(--text-muted);
            flex-shrink: 0;
        }

        .search-bar-input {
            flex: 1;
            border: none;
            background: transparent;
            font-size: 16px;
            color: var(--text-primary);
            outline: none;
        }

        .search-bar-input::placeholder {
            color: var(--text-muted);
        }

        .search-bar-btn {
            width: 40px;
            height: 40px;
            border: none;
            background-color: var(--accent);
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s;
        }

        .search-bar-btn:hover {
            background-color: var(--accent-light);
        }

        /* Carousel */
        .carousel-section {
            margin-bottom: 32px;
        }

        .carousel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }

        .carousel-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .carousel-nav {
            display: flex;
            gap: 8px;
        }

        .carousel-nav-btn {
            width: 36px;
            height: 36px;
            border: 1px solid var(--border-color);
            background-color: var(--bg-primary);
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            transition: all 0.2s;
        }

        .carousel-nav-btn:hover {
            background-color: var(--hover-bg);
            color: var(--text-primary);
        }

        .carousel-track {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            padding-bottom: 8px;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
        }

        .carousel-track::-webkit-scrollbar {
            height: 6px;
        }

        .carousel-track::-webkit-scrollbar-track {
            background: transparent;
        }

        .carousel-track::-webkit-scrollbar-thumb {
            background-color: var(--border-color);
            border-radius: 3px;
        }

        .carousel-item {
            flex: 0 0 auto;
            width: 160px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .carousel-item:hover {
            transform: scale(1.02);
        }

        .carousel-item-image {
            width: 160px;
            height: 200px;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 8px;
            background-color: var(--bg-secondary);
        }

        .carousel-item-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .placeholder-image {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
        }

        .carousel-item-title {
            font-size: 13px;
            color: var(--text-secondary);
            text-align: center;
            display: block;
        }

        /* Page Placeholder */
        .page-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: var(--text-muted);
        }

        .page-placeholder h1 {
            font-size: 24px;
            margin-bottom: 8px;
            color: var(--text-primary);
        }

        /* ======================== PÁGINA: PROJETOS ======================== */
        .page-projetos-wrapper {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow-y: auto;
        }

        .page-projetos {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
            padding: 0;
            background: var(--bg-primary);
        }

        .projetos-header {
            background: linear-gradient(135deg, #c41e3a 0%, #8b1528 100%);
            padding: 20px 40px;
            color: white;
            flex-shrink: 0;
        }

        .projetos-header-content {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 24px;
        }

        /* DROPDOWN NAVIGATION */
        .produto-nav {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .btn-voltar {
            background: rgba(255,255,255,0.15);
            border: none;
            border-radius: 8px;
            padding: 8px;
            cursor: pointer;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }

        .btn-voltar:hover {
            background: rgba(255,255,255,0.25);
        }

        .dropdown-container {
            display: flex;
            gap: 8px;
        }

        .dropdown {
            position: relative;
        }

        .dropdown-trigger {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            background: rgba(255,255,255,0.15);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 8px;
            color: white;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .dropdown-trigger:hover,
        .dropdown-trigger.active {
            background: rgba(255,255,255,0.25);
        }

        .dropdown-trigger .chevron {
            transition: transform 0.2s;
        }

        .dropdown-trigger.active .chevron {
            transform: rotate(180deg);
        }

        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            margin-top: 4px;
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.15);
            min-width: 200px;
            z-index: 100;
            overflow: hidden;
        }

        .dropdown-submenu {
            border-bottom: 1px solid var(--border-color);
        }

        .dropdown-submenu:last-child {
            border-bottom: none;
        }

        .dropdown-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 12px 16px;
            background: none;
            border: none;
            color: var(--text-primary);
            font-size: 14px;
            cursor: pointer;
            transition: background 0.15s;
            text-align: left;
        }

        .dropdown-item:hover {
            background: var(--bg-hover);
        }

        .dropdown-item.has-submenu {
            font-weight: 500;
            background: var(--bg-secondary);
        }

        .dropdown-submenu-items {
            background: var(--bg-primary);
            border-top: 1px solid var(--border-color);
        }

        .dropdown-submenu-items .dropdown-item {
            padding-left: 28px;
            font-size: 13px;
        }

        .projetos-title {
            font-size: 20px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 0;
        }

        .projetos-subtitle {
            font-size: 14px;
            opacity: 0.85;
            margin-left: 40px;
        }

        /* MAIN CONTENT */
        .projetos-main {
            flex: 1;
            overflow-y: auto;
            padding: 32px;
        }

        /* WELCOME SCREEN */
        .projetos-welcome {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
            color: var(--text-secondary);
        }

        .welcome-icon {
            color: #c41e3a;
            opacity: 0.5;
            margin-bottom: 24px;
        }

        .projetos-welcome h2 {
            font-size: 24px;
            color: var(--text-primary);
            margin-bottom: 12px;
        }

        .projetos-welcome p {
            max-width: 400px;
            line-height: 1.6;
        }

        /* VARIEDADES GRID */
        .variedades-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 24px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .variedade-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s;
        }

        .variedade-card:hover {
            border-color: #c41e3a;
            box-shadow: 0 8px 24px rgba(196, 30, 58, 0.15);
            transform: translateY(-2px);
        }

        .variedade-img {
            aspect-ratio: 4/3;
            overflow: hidden;
            background: var(--bg-primary);
        }

        .variedade-img img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .variedade-info {
            padding: 16px 20px;
        }

        .variedade-info h3 {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .variedade-action {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: #c41e3a;
            font-weight: 500;
        }

        .no-variedades {
            grid-column: 1 / -1;
            text-align: center;
            padding: 60px 20px;
            color: var(--text-secondary);
        }

        /* PROJETO CONTAINER */
        .projeto-container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .projeto-info {
            margin-bottom: 20px;
        }

        .projeto-subtitle {
            font-size: 14px;
            color: var(--text-secondary);
        }

        .em-construcao {
            padding: 20px;
            background: rgba(234, 179, 8, 0.1);
            border: 1px solid rgba(234, 179, 8, 0.3);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 13px;
            line-height: 1.6;
        }

        .projeto-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding: 40px;
        }

        .projeto-placeholder img {
            max-width: 400px;
            max-height: 300px;
            object-fit: contain;
            border-radius: 8px;
        }

        .projeto-placeholder p {
            color: var(--text-secondary);
            font-size: 14px;
        }

        .projetos-content {
            display: grid;
            grid-template-columns: 360px 1fr;
            gap: 0;
            flex: 1;
            max-width: 1600px;
            margin: 0 auto;
            width: 100%;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
        }

        .projetos-panel {
            background: var(--bg-secondary);
            border-right: 1px solid var(--border-color);
            padding: 24px;
            overflow-y: auto;
        }

        .panel-section {
            margin-bottom: 24px;
        }

        .panel-section:last-child {
            margin-bottom: 0;
        }

        .panel-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-color);
        }

        .panel-title svg {
            color: #c41e3a;
        }

        .input-grid {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .input-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .input-group label {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-secondary);
        }

        .input-with-unit {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .input-with-unit input {
            flex: 1;
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: var(--bg-primary);
            color: var(--text-primary);
            font-size: 15px;
            font-weight: 500;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .input-with-unit input:focus {
            outline: none;
            border-color: #c41e3a;
            box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);
        }

        .input-with-unit .unit {
            font-size: 13px;
            color: var(--text-muted);
            font-weight: 500;
            min-width: 30px;
        }

        .calc-section {
            background: var(--bg-primary);
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 12px;
        }

        .calc-section:last-child {
            margin-bottom: 0;
        }

        .calc-section h3 {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .calc-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 4px 0;
        }

        .calc-row.calc-formula {
            opacity: 0.6;
            font-style: italic;
        }

        .calc-label {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .calc-value {
            font-size: 13px;
            font-weight: 600;
            color: #c41e3a;
            font-family: 'SF Mono', Monaco, monospace;
        }

        .input-group.full-width {
            grid-column: 1 / -1;
        }

        .toggle-buttons {
            display: flex;
            gap: 8px;
        }

        .toggle-btn {
            flex: 1;
            padding: 10px 16px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: var(--bg-primary);
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .toggle-btn:hover {
            border-color: #c41e3a;
        }

        .toggle-btn.active {
            background: rgba(196, 30, 58, 0.1);
            border-color: #c41e3a;
            color: #c41e3a;
        }

        .projetos-drawing {
            padding: 24px 32px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .drawing-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 20px;
        }

        .drawing-title svg {
            color: #c41e3a;
        }

        .svg-container {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-secondary);
            border-radius: 12px;
            border: 1px solid var(--border-color);
            padding: 20px;
            overflow: auto;
            min-height: 400px;
        }

        .projeto-svg {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
        }

        .projeto-svg .cota-text {
            font-size: 11px;
            fill: #444;
            font-family: 'SF Mono', Monaco, monospace;
            font-weight: 500;
        }

        .projeto-svg .cota-text-large {
            font-size: 14px;
            fill: #222;
            font-weight: 700;
            font-family: 'SF Mono', Monaco, monospace;
        }

        .projeto-svg .cota-text-calc {
            font-size: 12px;
            fill: #c41e3a;
            font-weight: 700;
            font-family: 'SF Mono', Monaco, monospace;
        }

        .projeto-svg .cota-text-small {
            font-size: 10px;
            fill: #555;
            font-family: 'SF Mono', Monaco, monospace;
            font-weight: 500;
        }

        .projeto-svg .piece-label {
            font-size: 14px;
            fill: #222;
            font-weight: 600;
        }

        .projeto-svg .piece-label-small {
            font-size: 12px;
            fill: #222;
            font-weight: 600;
        }

        .projeto-svg .label-text {
            font-size: 7px;
            fill: #666;
        }

        [data-theme="dark"] .projeto-svg .cota-text {
            fill: #999;
        }

        [data-theme="dark"] .projeto-svg .cota-text-large {
            fill: #ccc;
        }

        [data-theme="dark"] .projeto-svg .piece-label,
        [data-theme="dark"] .projeto-svg .piece-label-small {
            fill: #ccc;
        }

        [data-theme="dark"] .projeto-svg rect[stroke="#333"] {
            stroke: #888;
        }

        .legenda {
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 16px 0;
            flex-wrap: wrap;
        }

        .legenda-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--text-secondary);
        }

        .legenda-color {
            width: 16px;
            height: 16px;
            border-radius: 4px;
        }

        .legenda-color.bandeira {
            background: rgba(59, 130, 246, 0.3);
            border: 2px solid #3b82f6;
        }

        .legenda-color.fixos {
            background: rgba(234, 179, 8, 0.3);
            border: 2px solid #eab308;
        }

        .legenda-color.portas {
            background: rgba(34, 197, 94, 0.3);
            border: 2px solid #22c55e;
        }

        .legenda-divider {
            width: 1px;
            height: 20px;
            background: var(--border-color);
        }

        .legenda-marker {
            width: 12px;
            height: 3px;
            border-radius: 2px;
        }

        .legenda-marker.calc {
            background: #c41e3a;
        }

        .legenda-marker.fixa {
            background: #666;
        }

        .projetos-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 16px;
            border-top: 1px solid var(--border-color);
            margin-top: auto;
        }

        .logo-footer {
            font-size: 18px;
            font-weight: 700;
        }

        .copyright {
            font-size: 12px;
            color: var(--text-muted);
        }

        /* DROPDOWN DE PRODUTOS */
        .dropdown-container {
            position: relative;
        }

        .dropdown-trigger {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            color: var(--text-primary);
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            min-width: 280px;
        }

        .dropdown-trigger:hover {
            border-color: #c41e3a;
        }

        .dropdown-trigger .chevron {
            margin-left: auto;
            transition: transform 0.2s;
        }

        .dropdown-trigger .chevron.open {
            transform: rotate(180deg);
        }

        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            margin-top: 8px;
            min-width: 300px;
            max-height: 500px;
            overflow-y: auto;
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.15);
            z-index: 100;
        }

        .dropdown-category {
            padding: 8px 0;
            border-bottom: 1px solid var(--border-color);
        }

        .dropdown-category:last-child {
            border-bottom: none;
        }

        .dropdown-category-label {
            padding: 8px 16px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #c41e3a;
        }

        .dropdown-subcategory {
            padding: 4px 0;
        }

        .dropdown-subcategory-label {
            padding: 6px 16px 6px 24px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-muted);
        }

        .dropdown-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 10px 16px 10px 36px;
            background: none;
            border: none;
            color: var(--text-primary);
            font-size: 14px;
            cursor: pointer;
            transition: all 0.15s;
            text-align: left;
        }

        .dropdown-item:hover:not(.disabled) {
            background: rgba(196, 30, 58, 0.08);
            color: #c41e3a;
        }

        .dropdown-item.active {
            background: rgba(196, 30, 58, 0.12);
            color: #c41e3a;
            font-weight: 500;
        }

        .dropdown-item.disabled {
            color: var(--text-muted);
            cursor: not-allowed;
        }

        .badge-soon {
            font-size: 10px;
            padding: 2px 8px;
            background: var(--bg-secondary);
            border-radius: 10px;
            color: var(--text-muted);
        }

        /* BREADCRUMB */
        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-left: 20px;
            font-size: 14px;
        }

        .breadcrumb button {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 0;
            transition: color 0.15s;
        }

        .breadcrumb button:hover {
            color: #c41e3a;
        }

        .breadcrumb .active {
            color: var(--text-primary);
            font-weight: 500;
        }

        .breadcrumb-sep {
            color: var(--text-muted);
        }

        /* VARIEDADES GRID */
        .variedades-container {
            padding: 40px;
            text-align: center;
        }

        .variedades-title {
            font-size: 28px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .variedades-subtitle {
            font-size: 15px;
            color: var(--text-muted);
            margin-bottom: 40px;
        }

        .variedades-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .variedade-card {
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s;
            text-align: left;
        }

        .variedade-card:hover {
            border-color: #c41e3a;
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(196, 30, 58, 0.15);
        }

        .variedade-img {
            aspect-ratio: 4/3;
            background: var(--bg-secondary);
            overflow: hidden;
        }

        .variedade-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }

        .variedade-card:hover .variedade-img img {
            transform: scale(1.05);
        }

        .variedade-info {
            padding: 16px 20px;
        }

        .variedade-nome {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
        }

        /* EMPTY STATE */
        .projetos-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 80px 40px;
            text-align: center;
            color: var(--text-muted);
        }

        .projetos-empty svg {
            margin-bottom: 24px;
            opacity: 0.4;
        }

        .projetos-empty h2 {
            font-size: 24px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .projetos-empty p {
            font-size: 15px;
            max-width: 400px;
        }

        /* SECTION HEADER */
        .section-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;
        }

        .back-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-secondary);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.15s;
        }

        .back-btn:hover {
            border-color: #c41e3a;
            color: #c41e3a;
        }

        @media (max-width: 1024px) {
            .projetos-content {
                grid-template-columns: 1fr;
            }

            .projetos-panel {
                border-right: none;
                border-bottom: 1px solid var(--border-color);
            }
        }

        @media (max-width: 768px) {
            .projetos-header {
                padding: 24px 20px;
            }

            .projetos-title {
                font-size: 22px;
            }

            .projetos-drawing {
                padding: 20px;
            }

            .legenda {
                gap: 12px;
            }
        }

        /* ======================== PÁGINA: APLICATIVOS ======================== */
        .page-aplicativos {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow-y: auto;
            padding: 0 40px 40px;
        }

        .apps-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            padding: 40px 0 24px;
        }

        .apps-header-left {
            flex: 1;
        }

        .apps-title {
            font-size: 28px;
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 4px;
        }

        .badge-beta {
            font-size: 11px;
            font-weight: 500;
            padding: 4px 8px;
            background-color: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-muted);
        }

        .apps-subtitle {
            font-size: 15px;
            color: var(--text-secondary);
        }

        .apps-search {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            background-color: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 24px;
            min-width: 200px;
        }

        .apps-search svg {
            color: var(--text-muted);
        }

        .apps-search-input {
            border: none;
            background: transparent;
            font-size: 14px;
            color: var(--text-primary);
            outline: none;
            width: 100%;
        }

        .apps-search-input::placeholder {
            color: var(--text-muted);
        }

        /* Banner */
        .apps-banner {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #43e97b 100%);
            border-radius: 16px;
            padding: 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            min-height: 200px;
            position: relative;
            overflow: hidden;
        }

        .apps-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
        }

        .apps-banner-content {
            position: relative;
            z-index: 1;
        }

        .apps-banner-text {
            font-size: 20px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 8px;
        }

        .apps-banner-desc {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
        }

        .apps-banner-preview {
            position: relative;
            z-index: 1;
        }

        .apps-banner-icon {
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            backdrop-filter: blur(10px);
        }

        /* Tabs */
        .apps-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 24px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 12px;
        }

        .apps-tab {
            padding: 8px 16px;
            border: none;
            background: transparent;
            font-size: 14px;
            color: var(--text-secondary);
            cursor: pointer;
            border-radius: 20px;
            transition: all 0.2s;
        }

        .apps-tab:hover {
            background-color: var(--hover-bg);
            color: var(--text-primary);
        }

        .apps-tab.active {
            background-color: var(--bg-secondary);
            color: var(--text-primary);
            font-weight: 500;
        }

        /* Apps Grid */
        .apps-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .app-card {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px;
            background-color: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .app-card:hover {
            background-color: var(--hover-bg);
            border-color: var(--text-muted);
        }

        .app-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .app-info {
            flex: 1;
            min-width: 0;
        }

        .app-name {
            font-size: 15px;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 2px;
        }

        .app-desc {
            font-size: 13px;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .app-arrow {
            color: var(--text-muted);
            flex-shrink: 0;
        }

        @media (max-width: 900px) {
            .apps-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .page-aplicativos {
                padding: 0 20px 20px;
            }

            .apps-header {
                flex-direction: column;
                gap: 16px;
            }

            .apps-search {
                width: 100%;
            }

            .apps-banner {
                flex-direction: column;
                text-align: center;
                padding: 24px;
            }

            .apps-banner-preview {
                margin-top: 20px;
            }
        }

        /* Modal de Busca */
        .search-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding-top: 80px;
        }

        .search-modal {
            width: 100%;
            max-width: 600px;
            max-height: 70vh;
            background-color: var(--bg-primary);
            border-radius: 16px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid var(--border-color);
        }

        .search-modal-header {
            display: flex;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid var(--border-color);
            gap: 12px;
        }

        .search-input-wrapper {
            flex: 1;
        }

        .search-input {
            width: 100%;
            padding: 8px 0;
            border: none;
            background: transparent;
            font-size: 16px;
            color: var(--text-primary);
            outline: none;
        }

        .search-input::placeholder {
            color: var(--text-muted);
        }

        .search-close-btn {
            width: 32px;
            height: 32px;
            border: none;
            background: transparent;
            cursor: pointer;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            transition: background-color 0.2s, color 0.2s;
        }

        .search-close-btn:hover {
            background-color: var(--hover-bg);
            color: var(--text-primary);
        }

        .search-modal-content {
            flex: 1;
            overflow-y: auto;
            padding: 8px;
        }

        .search-item {
            width: 100%;
            padding: 12px 16px;
            border: none;
            background: transparent;
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: background-color 0.2s;
            text-align: left;
        }

        .search-item:hover {
            background-color: var(--hover-bg);
        }

        .search-item-new {
            background-color: var(--bg-secondary);
            margin-bottom: 8px;
        }

        .search-item svg {
            flex-shrink: 0;
            color: var(--text-secondary);
        }

        .search-group {
            margin-top: 8px;
        }

        .search-group-title {
            padding: 8px 16px 4px;
            font-size: 12px;
            font-weight: 500;
            color: var(--text-muted);
        }

        /* Responsivo */
        @media (max-width: 768px) {
            /* Sidebar no mobile */
            .sidebar {
                width: 200px;
                flex-shrink: 0;
            }
            
            .sidebar.collapsed {
                width: 60px;
            }

            .menu-btn {
                display: none;
            }

            /* Mobile header - esconder no mobile (sidebar sempre visível) */
            .mobile-header {
                display: none !important;
            }

            /* Desktop header - manter visível */
            .desktop-header {
                display: flex !important;
            }
            
            /* Sidebar overlay não necessário */
            .sidebar-overlay {
                display: none !important;
            }

            .search-modal-overlay {
                padding-top: 20px;
                padding-left: 16px;
                padding-right: 16px;
            }

            .search-modal {
                max-height: 80vh;
            }

            .chat-container {
                padding: 0 16px;
            }

            .input-area {
                padding: 12px 16px 16px;
                bottom: 7vh;
            }

            .sidebar-footer {
                transform: translateY(-61px);
            }

            .chat-area {
                max-height: 600px;
            }
        }

        /* Mobile pequeno */
        @media (max-height: 800px) and (max-width: 768px) {
            .input-area {
                bottom: 5vh;
            }
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background-color: var(--border-color);
            border-radius: 3px;
        }

        .text-center { text-align: center; }
        .text-muted { color: var(--text-muted); }
        .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
        .text-sm { font-size: 0.875rem; }
        .mb-2 { margin-bottom: 0.5rem; }
        .mb-3 { margin-bottom: 0.75rem; }
        .last\:mb-0:last-child { margin-bottom: 0; }
        
        /* Acessibilidade - esconde visualmente mas mantém para leitores de tela */
        .visually-hidden,
        .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;
        }
        
        /* Focus visible para navegação por teclado */
        button:focus-visible,
        .chat-history-item:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        /* Remove outline do input de chat */
        .chat-input:focus-visible,
        textarea.chat-input:focus-visible {
            outline: none;
        }