/* R37: light theme token override — this file loads last in index.html (after app.css, titi-premium.css, titi-theme-kernel.css, titi-icons.css, titi-workbench.css — all of which define their own hardcoded-dark copies of what is effectively the same design-token set: --bg/--panel/--line (app.css), --bg-main/--bg-sidebar/--bg-surface/--text-main/--border-soft (titi-premium.css, titi-icons.css, titi-workbench.css each redeclare these), and --titi-bg/--titi-surface/--titi-text (titi-theme-kernel.css, which already had a *partial* [data-theme="light"] block — only 5 of its own tokens, none of the other two systems). Confirmed live (R36 audit + this round): forcing [data-theme="light"] only lightened the main chat pane because titi-premium.css's unconditional :root block (loading after titi-theme-kernel.css) always re-locked the sidebar/composer/ ToolHub tokens back to dark, regardless of theme. Since CSS custom properties resolve at var()-use time against the current cascaded value on the element, redefining every token here (last file, wins regardless of specificity ties) makes every consumer — sidebar, composer, ToolHub, cards, project tabs — follow the same light palette without touching any of those other files' own rules. */ /* R37 fix (found live-testing the block above): titi-theme-kernel.css's very first rule is `:root, [data-theme="dark"], .page-research { --titi-* dark values }` — and `.page-research` is a class that's always present on regardless of theme. Since data-theme is set on , that unconditional .page-research match on itself (not inherited — declared directly on the element) wins over the value would otherwise inherit from . Confirmed live: ToolHub menu text rendered near-white-on-white (unreadable) because --titi-text stayed at its dark value on even with [data-theme="light"] set on . Adding the explicit "[data-theme=light] body" descendant-combinator selector below (higher specificity than plain .page-research) closes that gap for every token this file and titi-theme-kernel.css define. */ [data-theme="light"], [data-theme="light"] body { /* app.css legacy tokens */ --bg: #f8fafc; --panel: #ffffff; --panel2: #f1f5f9; --text: #0f1720; --muted: #64748b; --line: #e2e8f0; /* titi-premium.css / titi-icons.css / titi-workbench.css tokens */ --bg-main: #f8fafc; --bg-sidebar: #ffffff; --bg-surface: #ffffff; --bg-surface-hover: #f1f5f9; --bg-active: #e2e8f0; --border-soft: #e2e8f0; --text-main: #0f1720; --text-muted: #64748b; --icon-muted: #64748b; --icon-active: #0f1720; /* titi-theme-kernel.css tokens — redeclared here (not just relying on that file's own partial light block) since .page-research on was overriding them anyway; matches this same higher-specificity selector so it wins for real now. */ --titi-bg: #f8fafc; --titi-surface: #ffffff; --titi-surface-2: #f8fafc; --titi-surface-hover: #f1f5f9; --titi-text: #0f1720; --titi-text-secondary: #334155; --titi-text-muted: #64748b; --titi-border: #e2e8f0; } [data-theme="light"] body { background: var(--bg-main) !important; color: var(--text-main) !important; } /* Sidebar keeps a hairline border instead of the dark-mode's near-invisible one, so it stays visually separated from the (now also light) main pane. */ [data-theme="light"] .sidebar, [data-theme="light"] #workspaceSidebar { border-right-color: #e2e8f0 !important; } /* R37: .titi-focus-header (titi-core-chat-ui.css) reads a `--surface-elevated` token that is never defined anywhere in the codebase, so its hardcoded fallback (#0f1419, dark) always won regardless of theme — the one remaining hardcoded-dark bar found live in light mode (topbar/breadcrumb pill). Overriding directly here rather than touching titi-core-chat-ui.css (left alone per this round's "no changes there" instruction, since Cursor Hostinger owns and just fixed a P0 bug in that file). */ [data-theme="light"] .titi-focus-header { background: #ffffff !important; border-bottom-color: #e2e8f0 !important; } /* R35 Phase 2: mobile drawer X close button — hidden by default (desktop/ tablet use the collapse toggle instead), shown only below the 900px mobile breakpoint, matching uxApplyResponsiveShell/TitiSidebarState.isDrawer. */ .sidebar-mobile-close-btn { display: none; } @media (max-width: 899px) { .brand { display: flex; align-items: center; justify-content: space-between; } .sidebar-mobile-close-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; } } /* R31 IA UI Gateway — sidebar groups, topbar, 4 home cards, dark scrollbars */ .r31-chat-group { margin-bottom: 10px; } .r31-chat-group-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(148, 163, 184, 0.85); padding: 6px 10px 4px; } .r31-chat-row .session-history-snippet { display: block; font-size: 11px; line-height: 1.3; margin-top: 2px; opacity: 0.75; } .r31-project-chat-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; padding: 8px 12px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .r31-project-chat-title { font-weight: 600; font-size: 14px; } .r31-project-chat-meta { font-size: 12px; } .r31-four-cards .ux-chat-shell-shortcuts, #uxChatShellShortcuts.r31-four-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 520px; margin: 12px auto 0; } @media (min-width: 640px) { .r31-four-cards .ux-chat-shell-shortcuts, #uxChatShellShortcuts.r31-four-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 720px; } } .r31-context-card { min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 12px 8px; } .r31-card-icon { opacity: 0.9; } .titi-r31-topbar { display: flex; align-items: center; gap: 4px; margin-right: auto; } .titi-r31-topbar-btn { min-width: 32px; padding: 4px 8px; opacity: 0.9; } @media (min-width: 1200px) { .workspace-topbar-minimal .mobile-pane-toggle#toggleSidebar { display: none; } .titi-r31-topbar .titi-r31-topbar-btn[data-r31-action="ui.toggle_sidebar"] { display: inline-flex; } } @media (max-width: 1199px) { .titi-r31-topbar .titi-r31-topbar-btn[data-r31-action="ui.toggle_sidebar"] { display: none; } } /* No white scrollbar on sidebar */ .ux-sidebar-v22f, #workspaceSidebar, .page-workspace .workspace-sidebar { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.12) transparent; } .ux-sidebar-v22f::-webkit-scrollbar, #workspaceSidebar::-webkit-scrollbar { width: 6px; background: transparent; } .ux-sidebar-v22f::-webkit-scrollbar-thumb, #workspaceSidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 6px; } .ux-sidebar-v22f::-webkit-scrollbar-track, #workspaceSidebar::-webkit-scrollbar-track { background: transparent; } /* Desktop/tablet: no scrim overlay. R35 Phase 2: bumped from 768px to 900px to match the mobile/drawer breakpoint used everywhere else (uxApplyResponsiveShell, TitiSidebarState.isDrawer) — otherwise the 700-899px range could open the mobile drawer with no dimming backdrop. */ @media (min-width: 900px) { #uxSidebarScrim.ux-sidebar-scrim { display: none !important; pointer-events: none !important; } } /* R33: inline chat-search input, replacing the previous prompt()-based search */ .r31-chat-search-wrap { padding: 4px 8px 8px; } .r31-chat-search-wrap.hidden { display: none; } .r31-chat-search-input { width: 100%; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: inherit; font-size: 13px; padding: 7px 10px; } .r31-chat-search-input:focus { outline: none; border-color: rgba(82, 132, 255, 0.5); background: rgba(255, 255, 255, 0.09); } /* R34 merge: compact Gemini-style sidebar — single nav owner, deduped blocks */ #workspaceSidebar #sidebarSearchBtn.hidden, #workspaceSidebar #titiSidebarWorkspaces.hidden, #workspaceSidebar #titiSidebarLibraryApps.hidden { display: none !important; } #workspaceSidebar .nav-new-chat { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 4px 0 8px; padding: 9px 12px; border-radius: 999px; font-weight: 600; text-align: left; } #workspaceSidebar .projects-section .section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .titi-nav-see-all, .sidebar-manage-link { display: block; width: 100%; margin: 2px 0 4px; padding: 6px 10px; border: 0; background: transparent; color: rgba(148, 163, 184, 0.95); font-size: 12px; text-align: left; cursor: pointer; } .titi-nav-see-all:hover, .sidebar-manage-link:hover { color: inherit; background: rgba(255, 255, 255, 0.05); border-radius: 8px; } .titi-enterprise-nav .titi-nav-group { margin-bottom: 10px; } .workspace-sidebar.sidebar-collapsed .titi-nav-see-all, .workspace-sidebar.sidebar-collapsed .sidebar-manage-link, .workspace-sidebar.sidebar-collapsed .sidebar-projects-footer { display: none; } /* R34 merge2: Gemini-style empty chat + inline dialogs + compact new-chat */ .chat-gemini-ready { display: flex; align-items: flex-start; gap: 10px; max-width: 520px; margin: 24px auto 0; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 15px; line-height: 1.5; } .chat-ready-icon-wrap { opacity: 0.85; flex: 0 0 auto; } .nav-new-chat-hint { font-size: 11px; font-weight: 500; opacity: 0.65; } .brand .nav-collapse-in-brand { margin-left: auto; width: 28px; height: 28px; min-width: 28px; padding: 0; border-radius: 8px; } /* R77 (superseded by R79 below): earlier fix stacked logo + button vertically to stop the button overflowing the 64px rail (was landing fully outside #workspaceSidebar's overflow:hidden, invisible and unreachable — the "nút mở menu ra mất luôn" bug). Correct, but visually "two stacked boxes" rather than the single Gemini-style swap the next round asked for. R79: same-slot swap — logo and toggle occupy the exact same 28x28 spot, crossfading into each other on hover, instead of one appearing below the other. .brand becomes a fixed-size relative box in the collapsed state; both children are absolutely positioned to inset:0 within it. */ .workspace-sidebar.sidebar-collapsed .brand { position: relative; width: 28px; height: 28px; padding: 0; } .workspace-sidebar.sidebar-collapsed .brand .logo, .workspace-sidebar.sidebar-collapsed .brand .nav-collapse-in-brand { position: absolute; inset: 0; margin: 0; transition: opacity .15s ease; } @media (hover: hover) and (pointer: fine) { .workspace-sidebar.sidebar-collapsed .brand .nav-collapse-in-brand { opacity: 0; } .workspace-sidebar.sidebar-collapsed .brand:hover .logo, .workspace-sidebar.sidebar-collapsed .brand:focus-within .logo { opacity: 0; } .workspace-sidebar.sidebar-collapsed .brand:hover .nav-collapse-in-brand, .workspace-sidebar.sidebar-collapsed .brand .nav-collapse-in-brand:focus-visible { opacity: 1; } } /* Touch devices (no hover): keep both stacked so the toggle is always reachable — an always-visible fallback rather than repeating R77's dead-end for input types that can't trigger :hover at all. */ @media not (hover: hover) or not (pointer: fine) { .workspace-sidebar.sidebar-collapsed .brand { height: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; } .workspace-sidebar.sidebar-collapsed .brand .logo, .workspace-sidebar.sidebar-collapsed .brand .nav-collapse-in-brand { position: static; } } .brand { display: flex; align-items: center; gap: 8px; } .titi-ui-dialog { border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 14px; padding: 0; background: var(--panel, #151c24); color: inherit; max-width: min(420px, 92vw); } .titi-ui-dialog::backdrop { background: rgba(0,0,0,.45); } .titi-ui-dialog-form { margin: 0; padding: 14px 16px; } .titi-ui-dialog-head h3 { margin: 0 0 8px; font-size: 15px; } .titi-ui-dialog-msg { margin: 0 0 10px; font-size: 13px; } .titi-ui-dialog-input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: inherit; } .titi-ui-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } #uxChatShellWelcome:empty, #uxChatShellShortcutsWrap.hidden { display: none !important; } /* R38C: Gemini chat shell must follow theme tokens. Previous hardcoded #f8f9fa / #1a1a1a remained even in dark mode because this file loads last and overrode the theme contract. */ .titi-gemini-chat-shell .workspace-main, .titi-gemini-chat-shell .workspace-center-pane, .titi-gemini-chat-shell #chat, .titi-gemini-chat-shell #uxChatShellWelcome, .titi-gemini-chat-shell .workspace-topbar-minimal { background: var(--titi-bg-main, var(--bg-main, #121820)) !important; color: var(--titi-text-main, var(--text-main, #e6edf5)) !important; } .titi-gemini-chat-shell .chat-gemini-ready { background: transparent; border: 0; color: var(--titi-text-main, var(--text-main, #e6edf5)); box-shadow: none; justify-content: flex-start; margin: 20px auto 0; max-width: 760px; padding: 0 16px; } .titi-gemini-chat-shell .composer.composer-r22e, .titi-gemini-chat-shell .composer-v42 { background: transparent; border: 0; box-shadow: none; padding: 0 16px 18px; } .titi-gemini-chat-shell .composer:not(.composer-v26) .composer-row { display: flex; align-items: flex-end; gap: 8px; max-width: 760px; margin: 0 auto; padding: 10px 14px; border-radius: 28px; background: var(--titi-bg-composer, var(--bg-surface, #1f2933)); border: 1px solid var(--titi-border, var(--border-soft, rgba(255,255,255,.12))); } .titi-gemini-chat-shell #prompt { background: transparent; border: 0; color: var(--titi-text-main, var(--text-main, #e6edf5)); min-height: 24px; } .titi-gemini-chat-shell .composer-actions-right { display: flex; align-items: center; gap: 6px; } .gemini-model-chip-wrap { display: inline-flex; align-items: center; gap: 2px; padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--titi-text-main, #e6edf5) 8%, transparent); font-size: 12px; font-weight: 600; color: var(--titi-text-main, var(--text-main, #e6edf5)); } .gemini-model-chip-wrap .gemini-model-select { border: 0; background: transparent; color: inherit; font-size: 12px; font-weight: 600; max-width: 88px; padding: 0; cursor: pointer; } .gemini-model-chip-label { display: none; } .titi-gemini-chat-shell .composer-mic-btn { display: inline-flex !important; border: 0; background: transparent; opacity: 0.75; } .titi-gemini-chat-shell.inspector-collapsed .research-inspector, .titi-gemini-chat-shell #researchInspector { display: none !important; } .titi-gemini-chat-shell .project-meta, .titi-gemini-chat-shell .project-actions { display: none !important; } .titi-gemini-chat-shell .project-main { display: flex; align-items: center; gap: 8px; width: 100%; } .titi-gemini-chat-shell .project-pin-badge { margin-left: auto; font-size: 11px; opacity: 0.85; } .r31-recent-icon, .r31-recent-chat-icon { flex: 0 0 16px; opacity: 0.8; } .r31-chat-row .session-history-main { display: flex; flex-direction: row; align-items: center; gap: 8px; /* R96-CLAUDE-POLISH: this more-specific selector overrides the generic .session-history-main rules (app.css, flex:1) for every property it redeclares, but never redeclared `flex` itself — confirmed live via getBoundingClientRect that this element's own clientWidth (311px) exceeded its parent .r31-chat-row's clientWidth (179px), i.e. it wasn't actually shrinking as a flex item at all, which is what put the horizontal scrollbar back under the row after a new leading icon (.r31-recent-icon, added since the min-width:0 fix on the title alone was last verified) took up extra space in the same row. */ flex: 1 1 auto; min-width: 0; } .r31-chat-row .session-history-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; /* R97G-FIX: flex items default to min-width:auto (their content's intrinsic width), so overflow:hidden alone never let this actually shrink below a long chat title's full width — confirmed live via getBoundingClientRect (scrollWidth 317px vs a 179px sidebar), which pushed the whole row wider than the sidebar and put a horizontal scrollbar on the outer .sidebar-scroll-body instead of truncating the title with "…" as intended. */ min-width: 0; height: auto; } .r31-show-more, .session-history-toggle.r31-show-more { display: block; width: 100%; margin: 4px 0 8px; padding: 4px 10px; border: 0; background: transparent; color: rgba(148, 163, 184, 0.95); font-size: 12px; text-align: left; cursor: pointer; } .r31-show-more:hover { color: inherit; } /* R38C: final theme sync override (file loads last in index.html) */ html[data-theme="dark"] { --titi-bg-app: #0b0f14; --titi-bg-sidebar: #0f141b; --titi-bg-main: #121820; --titi-bg-surface: #18202a; --titi-bg-composer: #1f2933; --titi-bg-popover: #1a2330; --titi-text-main: #e6edf5; --titi-text-muted: #94a3b8; --titi-border: rgba(255, 255, 255, 0.12); --titi-accent: #4f9cff; --titi-icon: #a7b4c8; --bg-main: #0b0f14; --bg-sidebar: #0f141b; --bg-surface: #18202a; --text-main: #e6edf5; --text-muted: #94a3b8; --border-soft: rgba(255, 255, 255, 0.12); } html[data-theme="light"] { --titi-bg-app: #f3f6fb; --titi-bg-sidebar: #f8fafc; --titi-bg-main: #ffffff; --titi-bg-surface: #ffffff; --titi-bg-composer: #f8fafc; --titi-bg-popover: #ffffff; --titi-text-main: #0f172a; --titi-text-muted: #64748b; --titi-border: #dbe3ee; --titi-accent: #2563eb; --titi-icon: #475569; --bg-main: #f3f6fb; --bg-sidebar: #f8fafc; --bg-surface: #ffffff; --text-main: #0f172a; --text-muted: #64748b; --border-soft: #dbe3ee; } html[data-theme="dark"] body, html[data-theme="dark"] #appShell, html[data-theme="dark"] .workspace-main, html[data-theme="dark"] .workspace-center-pane, html[data-theme="dark"] #chat, html[data-theme="dark"] #uxChatShellWelcome, html[data-theme="dark"] #uxProjectDetailHost, html[data-theme="dark"] .workspace-topbar-minimal, html[data-theme="dark"].titi-gemini-chat-shell .workspace-main, html[data-theme="dark"].titi-gemini-chat-shell .workspace-center-pane, html[data-theme="dark"] body.titi-gemini-chat-shell .workspace-main, html[data-theme="dark"] body.titi-gemini-chat-shell .workspace-center-pane, html[data-theme="dark"] #appShell.titi-gemini-chat-shell .workspace-main, html[data-theme="dark"] #appShell.titi-gemini-chat-shell .workspace-center-pane { background: var(--titi-bg-main) !important; color: var(--titi-text-main) !important; } html[data-theme="light"] body, html[data-theme="light"] #appShell, html[data-theme="light"] .workspace-main, html[data-theme="light"] .workspace-center-pane, html[data-theme="light"] #chat, html[data-theme="light"] #uxChatShellWelcome, html[data-theme="light"] #uxProjectDetailHost, html[data-theme="light"] .workspace-topbar-minimal { background: var(--titi-bg-main) !important; color: var(--titi-text-main) !important; } html[data-theme] #workspaceSidebar, html[data-theme] .workspace-sidebar { background: var(--titi-bg-sidebar) !important; color: var(--titi-text-main) !important; border-right-color: var(--titi-border) !important; } html[data-theme="dark"] .titi-gemini-chat-shell .composer-row, html[data-theme="dark"].titi-gemini-chat-shell .composer-row, html[data-theme="dark"] #appShell.titi-gemini-chat-shell .composer-row { background: var(--titi-bg-composer) !important; border-color: var(--titi-border) !important; } html[data-theme="light"] .titi-gemini-chat-shell .composer-row, html[data-theme="light"] #appShell.titi-gemini-chat-shell .composer-row { background: var(--titi-bg-composer) !important; border-color: var(--titi-border) !important; } html[data-theme] #newChatBtn.nav-new-chat { min-height: 40px; justify-content: flex-start; gap: 8px; color: #fff !important; background: var(--titi-accent) !important; border: 1px solid color-mix(in srgb, var(--titi-accent) 70%, #000 30%) !important; } html[data-theme] #navCollapseBtn, html[data-theme] .nav-collapse-btn { color: var(--titi-icon); border: 1px solid var(--titi-border); } /* === R43_SIDEBAR_HOVER: project/chat ... on hover/focus only === */ .project-item { display: flex; align-items: center; gap: 4px; min-width: 0; position: relative; } .project-item .project-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; } .project-item .project-text { min-width: 0; flex: 1 1 auto; overflow: hidden; } .project-item .project-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; } .project-item .project-meta { display: none; /* R43: one-line project rows */ } .project-item .project-actions { flex: 0 0 auto; opacity: 0; pointer-events: none; transition: opacity .12s ease; } .project-item:hover .project-actions, .project-item:focus-within .project-actions, .project-item .js-project-menu:focus { opacity: 1; pointer-events: auto; } .project-item .js-project-menu:focus, .project-item .project-actions:focus-within { opacity: 1; pointer-events: auto; } /* Override R38 gemini rule that hid all project-actions */ .titi-gemini-chat-shell .project-item .project-actions { display: flex !important; opacity: 0; pointer-events: none; } .titi-gemini-chat-shell .project-item:hover .project-actions, .titi-gemini-chat-shell .project-item:focus-within .project-actions { opacity: 1; pointer-events: auto; } .sidebar.workspace-sidebar.ux-sidebar-collapsed .project-name, .sidebar.workspace-sidebar.ux-sidebar-collapsed .project-text, .sidebar.workspace-sidebar.ux-sidebar-collapsed .project-actions { display: none !important; } .r31-chat-row, .session-history-item { position: relative; display: flex; align-items: center; min-width: 0; /* R96-CLAUDE-POLISH: .session-history-main inside this row reports correct flex-shrink/min-width:0 in computed style (verified live) but its final layout width still exceeded this row's own width — a flex quirk that wasn't worth chasing further up the ancestor chain. Clip at the row level so long chat titles can never force a horizontal scrollbar onto the sidebar's single vertical scroll list, regardless of the exact upstream cause. */ overflow-x: hidden; } .session-more-btn.session-hover-action { opacity: 0; pointer-events: none; flex: 0 0 auto; transition: opacity .12s ease; } .r31-chat-row:hover .session-more-btn, .r31-chat-row:focus-within .session-more-btn, .session-history-item:hover .session-more-btn, .session-history-item:focus-within .session-more-btn, .session-more-btn:focus { opacity: 1; pointer-events: auto; } .project-actions-menu .is-disabled, .session-ctx-menu .is-disabled, #sessionContextMenu .is-disabled { opacity: 0.55; cursor: not-allowed; } .ux-project-detail-title-row { display: flex; align-items: center; gap: 8px; } .ux-project-detail-title-row h1 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(70vw, 520px); } .ux-project-overview-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; } .ux-project-overview-note { margin-top: 8px; font-size: 13px; } /* R45_COMPOSER_GRID_GUARD: composer-row is now the outer flex strip (pill + model-picker + mic/send); the pill itself is .composer-input-pill. R51-v2: nowrap by default (single inline row); .composer-row-multiline (toggled by r22eAutoGrowPrompt in app.js past ~2-3 lines) switches to wrap so the textarea sits on its own line with buttons pinned below. */ .titi-gemini-chat-shell .composer.composer-v26 .composer-row { display: flex !important; flex-wrap: nowrap !important; } .titi-gemini-chat-shell .composer.composer-v26 .composer-row.composer-row-multiline { flex-wrap: wrap !important; }