/* AI Browser with Gemini - Enhanced Styles */

/* ============ Base Container ============ */
.ai-browser-container { position:fixed; top:0; left:0; width:100vw; height:100vh; background:#fff; z-index:5000; display:flex; flex-direction:column; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.ai-browser-container.hidden { display:none; }

/* ============ Tab Bar ============ */
.browser-tab-bar { display:flex; align-items:center; background:#E8EAED; padding:4px 8px 0; gap:4px; min-height:38px; }
.browser-tabs-list { display:flex; gap:2px; flex:1; overflow-x:auto; scrollbar-width:none; }
.browser-tabs-list::-webkit-scrollbar { display:none; }
.browser-tab { display:flex; align-items:center; gap:6px; padding:7px 14px; background:#D3D6DB; border-radius:8px 8px 0 0; cursor:pointer; font-size:12px; max-width:200px; min-width:80px; transition:all .2s; white-space:nowrap; overflow:hidden; }
.browser-tab.active { background:#fff; box-shadow:0 -1px 4px rgba(0,0,0,.08); }
.browser-tab:hover:not(.active) { background:#C8CBD0; }
.tab-title { flex:1; overflow:hidden; text-overflow:ellipsis; }
.tab-close { background:none; border:none; cursor:pointer; font-size:11px; padding:2px 4px; border-radius:4px; opacity:.6; }
.tab-close:hover { background:rgba(0,0,0,.15); opacity:1; }
.tab-add-btn { background:none; border:none; cursor:pointer; font-size:18px; padding:4px 10px; border-radius:6px; color:#5F6368; }
.tab-add-btn:hover { background:rgba(0,0,0,.08); }
.tab-bar-actions { display:flex; gap:4px; margin-left:auto; }
.tab-bar-btn { background:none; border:none; cursor:pointer; font-size:14px; padding:4px 8px; border-radius:6px; }
.tab-bar-btn:hover { background:rgba(0,0,0,.08); }
.tab-bar-btn.active { background:rgba(0,0,0,.15); }

/* ============ Header ============ */
.browser-header { display:flex; align-items:center; padding:6px 10px; background:#F8F9FA; border-bottom:1px solid #DEE2E6; gap:8px; flex-wrap:wrap; }
.browser-controls { display:flex; gap:4px; }
.browser-btn { padding:6px 10px; background:#fff; border:1px solid #DEE2E6; border-radius:6px; cursor:pointer; font-size:14px; transition:all .15s; line-height:1; }
.browser-btn:hover { background:#E9ECEF; transform:translateY(-1px); }
.browser-btn.ai-btn { background:linear-gradient(135deg,#667EEA,#764BA2); color:#fff; border:none; }
.browser-btn.ai-btn:hover { box-shadow:0 2px 10px rgba(102,126,234,.4); }
.close-browser-btn { background:#ff5f57!important; color:#fff!important; border:none!important; }
.close-browser-btn:hover { background:#e0443e!important; }
.browser-url-bar { flex:1; display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #DEE2E6; border-radius:20px; padding:0 14px; min-width:200px; }
.url-secure { font-size:13px; }
#browserUrlInput { flex:1; border:none; outline:none; padding:8px 0; font-size:13px; background:transparent; }
.url-go-btn { border-radius:16px!important; font-size:12px!important; padding:5px 12px!important; }
.browser-actions { display:flex; gap:3px; align-items:center; flex-wrap:wrap; }
.zoom-level { font-size:11px; font-weight:600; color:#5F6368; min-width:36px; text-align:center; }

/* ============ Find Bar ============ */
.browser-find-bar { display:flex; align-items:center; gap:8px; padding:6px 12px; background:#FFF9C4; border-bottom:1px solid #F9A825; }
.browser-find-bar.hidden { display:none; }
#findInput { flex:1; max-width:300px; border:1px solid #ddd; border-radius:4px; padding:5px 10px; font-size:13px; outline:none; }
#findInput:focus { border-color:#667EEA; }
#findCount { font-size:12px; color:#666; min-width:40px; }
.find-btn { background:none; border:1px solid #ddd; border-radius:4px; cursor:pointer; padding:4px 8px; font-size:12px; }
.find-btn:hover { background:#eee; }

/* ============ Incognito Banner ============ */
.incognito-banner { padding:6px 16px; background:#333; color:#fff; font-size:12px; text-align:center; }
.incognito-banner.hidden { display:none; }
.incognito-mode .browser-tab-bar { background:#2D2D2D; }
.incognito-mode .browser-tab { background:#444; color:#ccc; }
.incognito-mode .browser-tab.active { background:#555; color:#fff; }

/* ============ Main Content Area ============ */
.browser-main-area { flex:1; display:flex; position:relative; overflow:hidden; }

/* ============ Side Panels ============ */
.browser-side-panel { width:320px; min-width:320px; background:#fff; border-right:1px solid #DEE2E6; overflow-y:auto; z-index:50; display:flex; flex-direction:column; }
.browser-side-panel.hidden { display:none; }
.side-panel-header { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; background:linear-gradient(135deg,#667EEA,#764BA2); color:#fff; }
.side-panel-header h3 { margin:0; font-size:15px; }
.side-panel-btn { background:rgba(255,255,255,.2); border:none; color:#fff; padding:5px 10px; border-radius:5px; cursor:pointer; font-size:12px; }
.side-panel-btn:hover { background:rgba(255,255,255,.35); }
.side-panel-search { margin:10px; padding:8px 12px; border:1px solid #ddd; border-radius:6px; font-size:13px; outline:none; }
.side-panel-search:focus { border-color:#667EEA; }
.side-panel-list { flex:1; overflow-y:auto; padding:8px; }
.empty-msg { text-align:center; color:#999; font-size:13px; padding:20px; }

/* History Items */
.history-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; cursor:pointer; transition:background .15s; }
.history-item:hover { background:#f0f0f0; }
.history-info { flex:1; overflow:hidden; }
.history-title { display:block; font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.history-time { font-size:11px; color:#888; }
.item-delete { background:none; border:none; cursor:pointer; font-size:14px; opacity:.5; padding:2px; }
.item-delete:hover { opacity:1; }

/* Bookmarks Manager */
.bookmark-folders { padding:10px; }
.folder-list { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.folder-btn { padding:5px 12px; background:#E8EAED; border:none; border-radius:14px; cursor:pointer; font-size:12px; transition:all .15s; }
.folder-btn:hover { background:#D3D6DB; }
.add-folder-btn { background:#E3F2FD; color:#1976D2; }
.bookmark-add-btn { width:100%; padding:8px; background:linear-gradient(135deg,#667EEA,#764BA2); color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:13px; font-weight:500; }
.bookmark-add-btn:hover { opacity:.9; }
.bookmark-mgr-item { display:flex; align-items:center; padding:8px; border-radius:6px; cursor:pointer; transition:background .15s; }
.bookmark-mgr-item:hover { background:#f0f0f0; }
.bookmark-info { flex:1; overflow:hidden; }
.bookmark-title { display:block; font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bookmark-folder-tag { font-size:10px; padding:2px 6px; background:#E8EAED; border-radius:8px; color:#666; }
.bookmark-actions { display:flex; gap:4px; }
.bookmark-actions button { background:none; border:none; cursor:pointer; font-size:13px; opacity:.5; }
.bookmark-actions button:hover { opacity:1; }

/* Downloads */
.download-item { padding:10px; border-radius:6px; transition:background .15s; }
.download-item:hover { background:#f0f0f0; }
.download-name { display:block; font-size:13px; font-weight:500; }
.download-meta { font-size:11px; color:#888; }

/* Notes */
#pageNotesInput { margin:10px; padding:10px; border:1px solid #ddd; border-radius:6px; resize:vertical; min-height:100px; font-size:13px; font-family:inherit; outline:none; width:calc(100% - 20px); box-sizing:border-box; }
#pageNotesInput:focus { border-color:#667EEA; }
.notes-save-btn { margin:0 10px 10px; padding:8px; background:linear-gradient(135deg,#667EEA,#764BA2); color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:13px; width:calc(100% - 20px); }
.notes-save-btn:hover { opacity:.9; }
.note-item { padding:8px 10px; border-radius:6px; cursor:pointer; transition:background .15s; }
.note-item:hover { background:#f0f0f0; }
.note-url { font-size:11px; color:#667EEA; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.note-preview { font-size:12px; color:#666; margin-top:2px; }

/* ============ Menu Grid ============ */
.menu-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:10px; }
.menu-item { display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 6px; background:#F8F9FA; border:1px solid #eee; border-radius:8px; cursor:pointer; font-size:11px; font-weight:500; transition:all .15s; }
.menu-item:hover { background:#E9ECEF; transform:translateY(-1px); }
.menu-item span:first-child { font-size:18px; }

/* ============ AI Panel ============ */
.browser-ai-panel { position:absolute; top:0; right:-420px; width:420px; height:100%; background:#fff; box-shadow:-4px 0 20px rgba(0,0,0,.15); transition:right .3s ease; z-index:100; overflow-y:auto; display:flex; flex-direction:column; }
.browser-ai-panel.open { right:0; }
.ai-panel-header { padding:14px 16px; background:linear-gradient(135deg,#667EEA,#764BA2); color:#fff; display:flex; justify-content:space-between; align-items:center; }
.ai-panel-header h3 { margin:0; font-size:16px; }
.ai-panel-header .close-btn { background:rgba(255,255,255,.2); border:none; color:#fff; padding:6px 10px; border-radius:5px; cursor:pointer; font-size:14px; }
.ai-panel-content { padding:12px; flex:1; overflow-y:auto; }
.ai-lang-select { display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:13px; }
.ai-lang-select select { padding:4px 8px; border-radius:4px; border:1px solid #ddd; font-size:12px; }
.ai-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.ai-feature-btn { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 6px; background:#F8F9FA; border:1px solid #DEE2E6; border-radius:10px; cursor:pointer; transition:all .2s; font-size:11px; font-weight:500; }
.ai-feature-btn:hover { background:#E9ECEF; transform:translateY(-2px); box-shadow:0 3px 10px rgba(0,0,0,.1); }
.feature-icon { font-size:22px; }
.ai-chat-input { display:flex; gap:6px; margin-bottom:12px; }
.ai-chat-input input { flex:1; padding:8px 12px; border:1px solid #ddd; border-radius:18px; font-size:13px; outline:none; }
.ai-chat-input input:focus { border-color:#667EEA; }
.ai-chat-send-btn { padding:8px 16px; background:linear-gradient(135deg,#667EEA,#764BA2); color:#fff; border:none; border-radius:18px; cursor:pointer; font-size:13px; font-weight:500; }
.ai-chat-send-btn:hover { opacity:.9; }
.ai-output { background:#F8F9FA; border-radius:10px; padding:14px; max-height:350px; overflow-y:auto; }
.ai-output pre { white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:1.6; margin:0; }
.ai-output-placeholder { color:#6C757D; text-align:center; font-size:13px; }
.ai-loading { text-align:center; padding:20px; font-size:14px; color:#667EEA; }
.extracted-vocab-list { margin-top:14px; }
.extracted-vocab-list h4 { margin-bottom:10px; color:#495057; font-size:14px; }
.vocab-items { background:#F8F9FA; padding:10px; border-radius:8px; font-size:13px; line-height:1.8; }

/* ============ Browser Content ============ */
.browser-content-wrapper { flex:1; display:flex; overflow:hidden; }
.browser-content-wrapper.split-active { gap:2px; }
.browser-content-wrapper.split-active .browser-content,
.browser-content-wrapper.split-active .split-content { flex:1; }
.browser-content { flex:1; position:relative; overflow:hidden; display:flex; flex-direction:column; }
.split-content { position:relative; display:flex; flex-direction:column; border-left:2px solid #667EEA; }
.split-content.hidden { display:none; }
.split-url-bar { display:flex; gap:6px; padding:6px 10px; background:#F0F0F0; border-top:1px solid #ddd; }
.split-url-bar input { flex:1; padding:6px 12px; border:1px solid #ddd; border-radius:16px; font-size:12px; outline:none; }
#splitFrame { flex:1; width:100%; border:none; }
#browserFrame { flex:1; width:100%; border:none; }

/* Overlay */
.browser-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:#fff; display:flex; align-items:center; justify-content:center; z-index:10; overflow-y:auto; }
.start-browsing { text-align:center; padding:30px; max-width:700px; }
.start-browsing h2 { margin-bottom:6px; color:#212529; font-size:28px; }
.start-browsing p { color:#6C757D; margin-bottom:24px; font-size:14px; }
.quick-links h3 { margin-bottom:14px; color:#495057; font-size:16px; }
.quick-link-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:24px; }
.quick-link { padding:14px 12px; background:linear-gradient(135deg,#667EEA,#764BA2); color:#fff; border:none; border-radius:10px; cursor:pointer; font-size:13px; font-weight:500; transition:all .2s; }
.quick-link:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(102,126,234,.4); }
.bookmarks-section { margin-top:24px; }
.bookmarks-section h3 { margin-bottom:12px; color:#495057; font-size:16px; }
.bookmarks-list { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.bookmark-item { padding:10px; background:#F8F9FA; border:1px solid #DEE2E6; border-radius:8px; cursor:pointer; text-align:left; transition:all .2s; font-size:13px; }
.bookmark-item:hover { background:#E9ECEF; transform:translateX(3px); }

/* ============ Reading Mode ============ */
.reading-mode-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:#FFFDF7; z-index:20; display:flex; flex-direction:column; }
.reading-mode-overlay.hidden { display:none; }
.reading-mode-toolbar { display:flex; gap:8px; padding:10px 16px; background:#F5F0E8; border-bottom:1px solid #E0D8C8; align-items:center; }
.reading-mode-toolbar button,.reading-mode-toolbar select { padding:5px 12px; background:#fff; border:1px solid #D0C8B8; border-radius:5px; cursor:pointer; font-size:12px; }
.reading-mode-toolbar button:hover { background:#eee; }
.reading-mode-content { flex:1; overflow-y:auto; padding:40px 60px; max-width:700px; margin:0 auto; font-size:18px; line-height:1.8; font-family:Georgia,serif; color:#333; }
.reading-mode-content p { margin-bottom:16px; }

/* ============ Status Bar ============ */
.browser-status-bar { display:flex; justify-content:space-between; align-items:center; padding:5px 14px; background:#F8F9FA; border-top:1px solid #DEE2E6; font-size:11px; color:#6C757D; }
.status-info { display:flex; align-items:center; gap:6px; }
.mode-badge { padding:2px 10px; background:#4ECDC4; color:#fff; border-radius:10px; font-weight:500; font-size:11px; }

/* ============ Settings Modal ============ */
.browser-modal { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:200; display:flex; align-items:center; justify-content:center; }
.browser-modal.hidden { display:none; }
.modal-content { background:#fff; border-radius:12px; width:480px; max-height:80vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.modal-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid #eee; }
.modal-header h3 { margin:0; font-size:18px; }
.modal-close { background:none; border:none; cursor:pointer; font-size:18px; padding:4px; }
.modal-body { padding:20px; }
.settings-group { margin-bottom:20px; }
.settings-group h4 { margin:0 0 12px; font-size:14px; color:#667EEA; border-bottom:1px solid #eee; padding-bottom:6px; }
.settings-item { display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:13px; }
.settings-item select,.settings-item input[type="text"],.settings-item input[type="password"] { padding:6px 10px; border:1px solid #ddd; border-radius:5px; font-size:12px; width:180px; }
.settings-item input[type="range"] { width:120px; }
.settings-toggle { display:flex; align-items:center; gap:10px; padding:6px 0; font-size:13px; cursor:pointer; }
.settings-toggle input { width:16px; height:16px; }
.settings-save-btn { width:100%; padding:10px; background:linear-gradient(135deg,#667EEA,#764BA2); color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:14px; font-weight:500; margin-top:10px; }
.settings-save-btn:hover { opacity:.9; }

/* ============ Dark Browser Theme ============ */
.dark-browser { background:#1A1D23; color:#E0E0E0; }
.dark-browser .browser-tab-bar { background:#1E2028; }
.dark-browser .browser-tab { background:#2A2D35; color:#aaa; }
.dark-browser .browser-tab.active { background:#333740; color:#fff; }
.dark-browser .browser-header { background:#252830; border-color:#3A3F4B; }
.dark-browser .browser-btn { background:#333740; border-color:#3A3F4B; color:#ccc; }
.dark-browser .browser-btn:hover { background:#3E4250; }
.dark-browser .browser-url-bar { background:#333740; border-color:#3A3F4B; }
.dark-browser #browserUrlInput { color:#E0E0E0; }
.dark-browser .browser-find-bar { background:#3A3520; border-color:#665E20; }
.dark-browser #findInput { background:#333740; color:#E0E0E0; border-color:#4A4F5B; }
.dark-browser .browser-side-panel { background:#252830; border-color:#3A3F4B; }
.dark-browser .side-panel-search { background:#333740; color:#E0E0E0; border-color:#4A4F5B; }
.dark-browser .history-item:hover,.dark-browser .bookmark-mgr-item:hover,.dark-browser .download-item:hover,.dark-browser .note-item:hover { background:#333740; }
.dark-browser .history-title,.dark-browser .bookmark-title,.dark-browser .download-name { color:#E0E0E0; }
.dark-browser .folder-btn { background:#333740; color:#ccc; }
.dark-browser .menu-item { background:#333740; border-color:#3A3F4B; color:#ccc; }
.dark-browser .menu-item:hover { background:#3E4250; }
.dark-browser .browser-ai-panel { background:#252830; }
.dark-browser .ai-feature-btn { background:#333740; border-color:#3A3F4B; color:#ccc; }
.dark-browser .ai-feature-btn:hover { background:#3E4250; }
.dark-browser .ai-output { background:#333740; color:#E0E0E0; }
.dark-browser .ai-chat-input input { background:#333740; color:#E0E0E0; border-color:#4A4F5B; }
.dark-browser .ai-lang-select select { background:#333740; color:#E0E0E0; border-color:#4A4F5B; }
.dark-browser .browser-overlay { background:#1A1D23; }
.dark-browser .start-browsing h2,.dark-browser .start-browsing p,.dark-browser .quick-links h3 { color:#E0E0E0; }
.dark-browser .bookmark-item { background:#333740; border-color:#3A3F4B; color:#ccc; }
.dark-browser .browser-status-bar { background:#1E2028; border-color:#3A3F4B; color:#888; }
.dark-browser .reading-mode-overlay { background:#1A1D23; }
.dark-browser .reading-mode-toolbar { background:#252830; border-color:#3A3F4B; }
.dark-browser .reading-mode-toolbar button,.dark-browser .reading-mode-toolbar select { background:#333740; border-color:#4A4F5B; color:#ccc; }
.dark-browser .reading-mode-content { color:#D0D0D0; }
.dark-browser #pageNotesInput { background:#333740; color:#E0E0E0; border-color:#4A4F5B; }
.dark-browser .modal-content { background:#252830; color:#E0E0E0; }
.dark-browser .modal-header { border-color:#3A3F4B; }
.dark-browser .settings-group h4 { border-color:#3A3F4B; }
.dark-browser .settings-item select,.dark-browser .settings-item input { background:#333740; color:#E0E0E0; border-color:#4A4F5B; }
.dark-browser .split-url-bar { background:#252830; }
.dark-browser .split-url-bar input { background:#333740; color:#E0E0E0; border-color:#4A4F5B; }

/* ============ Responsive ============ */
@media (max-width:768px) {
    .browser-header { flex-wrap:wrap; }
    .browser-url-bar { order:3; width:100%; margin-top:6px; }
    .browser-actions { order:2; }
    .browser-ai-panel { width:100%; right:-100%; }
    .browser-side-panel { width:100%; min-width:100%; position:absolute; top:0; left:0; height:100%; z-index:60; }
    .quick-link-grid { grid-template-columns:repeat(2,1fr); }
    .ai-feature-grid { grid-template-columns:repeat(2,1fr); }
    .menu-grid { grid-template-columns:repeat(2,1fr); }
    .reading-mode-content { padding:20px; font-size:16px; }
}

/* ============ TTS Control Bar ============ */
.browser-tts-bar { display:flex; align-items:center; gap:8px; padding:6px 14px; background:#E3F2FD; border-bottom:1px solid #90CAF9; font-size:12px; }
.browser-tts-bar.hidden { display:none; }
.browser-tts-bar label { display:flex; align-items:center; gap:4px; font-size:12px; }
.browser-tts-bar select { padding:2px 6px; border-radius:4px; border:1px solid #90CAF9; font-size:11px; }
.tts-btn { padding:4px 10px; background:#fff; border:1px solid #90CAF9; border-radius:5px; cursor:pointer; font-size:11px; transition:background .15s; }
.tts-btn:hover { background:#BBDEFB; }
#ttsStatus { font-weight:600; min-width:80px; }

/* ============ Progress Bar ============ */
.browser-progress-bar { height:3px; background:#E0E0E0; position:relative; display:none; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,#667EEA,#764BA2); transition:width .2s ease; border-radius:0 2px 2px 0; }

/* ============ Pinned Tabs ============ */
.pinned-tab { border-left:3px solid #667EEA!important; min-width:60px!important; }
.pinned-tab .tab-title { font-weight:600; }

/* ============ Page Info ============ */
.page-info-section { border-bottom:1px solid #eee; padding-bottom:10px; }
.page-info-row { display:flex; justify-content:space-between; padding:5px 0; font-size:13px; }
.page-info-row span { color:#666; }
.page-info-row strong { color:#333; font-size:12px; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ============ Read Items ============ */
.read-item { opacity:.6; }
.read-item .history-title { text-decoration:line-through; }

/* ============ Fullscreen Mode ============ */
.fullscreen-mode .browser-tab-bar { display:none; }
.fullscreen-mode .browser-header { padding:3px 8px; }
.fullscreen-mode .browser-status-bar { display:none; }

/* ============ Dark Theme New Elements ============ */
.dark-browser .browser-tts-bar { background:#2A2D35; border-color:#3A3F4B; color:#ccc; }
.dark-browser .tts-btn { background:#333740; border-color:#4A4F5B; color:#ccc; }
.dark-browser .tts-btn:hover { background:#3E4250; }
.dark-browser .browser-tts-bar select { background:#333740; color:#ccc; border-color:#4A4F5B; }
.dark-browser .browser-progress-bar { background:#333740; }
.dark-browser .page-info-row span { color:#aaa; }
.dark-browser .page-info-row strong { color:#E0E0E0; }
.dark-browser .page-info-section { border-color:#3A3F4B; }

/* ============ Animations ============ */
@keyframes browserLoading { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
.browser-loading { display:inline-block; animation:browserLoading 1s linear infinite; }
.browser-content,.browser-ai-panel,.ai-output { transition:all .3s ease; }
.browser-side-panel { animation:slideIn .2s ease; }
@keyframes slideIn { from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:translateX(0)} }
@keyframes progressPulse { 0%{opacity:1} 50%{opacity:.7} 100%{opacity:1} }