/* Application styles */ /* NOTE: Fix for a slightly higher form when produced by button_to */ form.button_to { line-height: 1; } /* ── Collapsible Sidebar ── */ :root { --sidebar-width: 18rem; --sidebar-collapsed-width: 4.5rem; } html[data-sidebar-collapsed] { --sidebar-width: 4.5rem; } /* Sidebar utility classes (only apply on lg+ screens) */ @media (min-width: 1024px) { .lg\:pl-sidebar { padding-left: var(--sidebar-width); transition: padding-left 200ms ease; } .lg\:left-sidebar { left: var(--sidebar-width); transition: left 200ms ease; } .lg\:w-sidebar { width: var(--sidebar-width); transition: width 200ms ease; } /* Sidebar content padding */ .sidebar-content { padding-left: 1.5rem; padding-right: 1.5rem; transition: padding 200ms ease; } html[data-sidebar-collapsed] .sidebar-content { padding-left: 0.75rem; padding-right: 0.75rem; } /* Hide text labels when collapsed */ .sidebar-label { opacity: 1; width: auto; overflow: hidden; white-space: nowrap; transition: opacity 200ms ease, width 200ms ease; } html[data-sidebar-collapsed] .sidebar-label { display: none; } /* Hide fold-section headers (e.g. "Work", "Admin") when collapsed — the header becomes non-interactive too, since folding is disabled in the icon rail (sections always show full content there). */ .sidebar-section-title { opacity: 1; height: auto; overflow: hidden; transition: opacity 200ms ease, height 200ms ease; } html[data-sidebar-collapsed] .sidebar-section-title { opacity: 0; height: 0; pointer-events: none; } /* A thin divider replaces the header in the collapsed rail, so groups stay legible once their micro-labels disappear (DS SidebarSection). */ .sidebar-section-divider { display: none; } html[data-sidebar-collapsed] .sidebar-section-divider { display: block; height: 1px; margin: 14px 10px 10px; background: var(--side-line); } /* Foldable nav sections — CSS grid accordion (1fr <-> 0fr) animates smoothly regardless of content height. Requires the child (see _sidebar_section.html.erb) to carry min-h-0 + overflow-hidden. */ .sidebar-fold-content { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 200ms ease; } .sidebar-section-chevron { transition: transform 200ms ease; transform: rotate(90deg); } /* Fold state is driven by data-nav-folded on (space-separated section keys), set synchronously in _head.html.erb before first paint so the page already matches the saved preference — no expand-then-collapse flash. The controller only flips this attribute (+ localStorage) on click. */ html[data-nav-folded~="work"] [data-sidebar-sections-key-value="work"] .sidebar-fold-content, html[data-nav-folded~="communication"] [data-sidebar-sections-key-value="communication"] .sidebar-fold-content, html[data-nav-folded~="organisation"] [data-sidebar-sections-key-value="organisation"] .sidebar-fold-content, html[data-nav-folded~="admin"] [data-sidebar-sections-key-value="admin"] .sidebar-fold-content { grid-template-rows: 0fr; } html[data-nav-folded~="work"] [data-sidebar-sections-key-value="work"] .sidebar-section-chevron, html[data-nav-folded~="communication"] [data-sidebar-sections-key-value="communication"] .sidebar-section-chevron, html[data-nav-folded~="organisation"] [data-sidebar-sections-key-value="organisation"] .sidebar-section-chevron, html[data-nav-folded~="admin"] [data-sidebar-sections-key-value="admin"] .sidebar-section-chevron { transform: rotate(0deg); } /* Folding is disabled in the collapsed icon rail — always show full content there, regardless of the saved fold preference. */ html[data-sidebar-collapsed] .sidebar-fold-content { grid-template-rows: 1fr !important; } /* Hide user profile name when collapsed */ html[data-sidebar-collapsed] .sidebar-user-profile .flex.flex-col { display: none; } html[data-sidebar-collapsed] .sidebar-user-profile { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; gap: 0 !important; } html[data-sidebar-collapsed] .sidebar-user-profile .space-x-2 > * { margin-left: 0 !important; margin-right: 0 !important; } /* Center nav item links when collapsed */ html[data-sidebar-collapsed] .sidebar-tooltip-parent a, html[data-sidebar-collapsed] .sidebar-tooltip-parent button { justify-content: center; gap: 0; } /* Neutralize all negative margins inside sidebar when collapsed */ html[data-sidebar-collapsed] .sidebar-content [class*="-mx-"] { margin-left: 0; margin-right: 0; } /* Reduce spacing between nav items when collapsed, keep group gaps */ html[data-sidebar-collapsed] .sidebar-content nav .space-y-1 > * { margin-top: 0; } html[data-sidebar-collapsed] .sidebar-content .gap-y-5 { gap: 0.25rem; } /* Tooltip on hover when collapsed */ .sidebar-tooltip { display: none; } html[data-sidebar-collapsed] .sidebar-tooltip-parent { position: relative; } html[data-sidebar-collapsed] .sidebar-tooltip-parent:hover .sidebar-tooltip { display: flex; position: fixed; left: calc(var(--sidebar-width) + 0.5rem); padding: 0.375rem 0.75rem; background-color: var(--side); color: var(--side-ink); font-size: 0.75rem; font-weight: 600; border-radius: 0.5rem; white-space: nowrap; z-index: 100; pointer-events: none; box-shadow: var(--shadow-pop); } /* Badge: show full in expanded, small overlay in collapsed */ .sidebar-badge-collapsed { display: none; } html[data-sidebar-collapsed] .sidebar-badge-full { display: none; } html[data-sidebar-collapsed] .sidebar-badge-collapsed { display: block; position: absolute; top: -0.125rem; right: 0.25rem; z-index: 1; } /* Toggle button rotation */ .sidebar-toggle-icon { transition: transform 200ms ease; } html[data-sidebar-collapsed] .sidebar-toggle-icon { transform: rotate(180deg); } /* Logo area collapsed state */ html[data-sidebar-collapsed] .sidebar-logo-full { display: none !important; } .sidebar-logo-collapsed { display: none !important; } html[data-sidebar-collapsed] .sidebar-logo-collapsed { display: flex !important; } } /* ── Uniform prose color (all typography elements inherit parent text color) ── */ .prose-uniform { --tw-prose-body: currentColor; --tw-prose-headings: currentColor; --tw-prose-bold: currentColor; --tw-prose-counters: currentColor; --tw-prose-bullets: currentColor; --tw-prose-quotes: currentColor; --tw-prose-code: currentColor; --tw-prose-th-borders: currentColor; } /* ── Chat Message Actions (copy/feedback buttons) ── */ /* Always visible on the last message; hover-revealed on earlier messages */ #chat_messages > :last-child .message-actions { opacity: 1; } /* ── Bouncing Dots (chat loading ellipsis) ── */ @keyframes bounce-dot { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } } .dot-bounce span:nth-child(1) { animation: bounce-dot 1.4s ease-in-out infinite; } .dot-bounce span:nth-child(2) { animation: bounce-dot 1.4s ease-in-out 0.2s infinite; } .dot-bounce span:nth-child(3) { animation: bounce-dot 1.4s ease-in-out 0.4s infinite; } /* ── Code Block Styling ── */ /* Override highlight.js theme background so it doesn't create a nested box */ .prose pre code.hljs { background: transparent; padding: 0; } /* Code block container */ .prose pre { background: #1e293b; /* slate-800 */ color: #e2e8f0; /* slate-200 */ border-radius: 0.5rem; padding: 1rem 1.25rem; overflow-x: auto; margin-bottom: 1rem; font-size: 0.8125rem; line-height: 1.625; scrollbar-width: thin; scrollbar-color: #475569 transparent; /* slate-600 thumb, transparent track */ } /* Webkit scrollbar for code blocks */ .prose pre::-webkit-scrollbar { height: 6px; } .prose pre::-webkit-scrollbar-track { background: transparent; } .prose pre::-webkit-scrollbar-thumb { background: #475569; /* slate-600 */ border-radius: 3px; } .prose pre::-webkit-scrollbar-thumb:hover { background: #64748b; /* slate-500 */ } /* Code inside pre blocks — reset to inherit from pre */ .prose pre code { background: transparent; color: inherit; padding: 0; border-radius: 0; font-size: inherit; } /* The first section sits directly under the logo block — a divider there reads as redundant chrome, so only show dividers between sections. */ html[data-sidebar-collapsed] .sidebar-nav > li:first-of-type .sidebar-section-divider { display: none; }