body {
    font-family: 'Nunito', sans-serif;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Enable pull-to-refresh on mobile */
@media (max-width: 1023px) {
    html {
        overflow: auto;
        overscroll-behavior-y: auto;
    }
    
    body {
        overflow: auto !important;
        overscroll-behavior-y: auto;
        min-height: 100vh;
        height: auto;
    }
}

.chat-container {
    height: calc(100vh - env(safe-area-inset-bottom));
}

#chatWindow {
    flex-grow: 1;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0);
    display: flex;
    flex-direction: column;
    /* Reserve scrollbar gutter space whether or not the scrollbar is
       actually rendered. Without this, short chats (no overflow) get
       the full container width, while long chats (overflow) lose
       6–15 px to the scrollbar — switching between them reads as
       "this one is wider." Reserving the gutter makes the content
       band's width identical across all chats. */
    scrollbar-gutter: stable;
}

/* The centering wrapper inside #chatWindow */
#chatWindow > div {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* Messages container — flows from the top.  ScrollController handles
   positioning new messages during live chat. */
#chatWindowMessages {
    display: flex;
    flex-direction: column;
}

/* Desktop: prevent rubber-band overscroll leaking out of the chat pane.
   Mobile: allow overscroll to propagate so pull-to-refresh works. */
@media (min-width: 1024px) {
    #chatWindow {
        overscroll-behavior-y: contain;
    }
}

/* Hide scrollbar by default, show on hover (Webkit / Blink) */
#chatWindow::-webkit-scrollbar {
    width: 6px;
}

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

#chatWindow::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
}

#chatWindow:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

#chatWindow:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

/* Firefox scrollbar styling */
#chatWindow {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

#chatWindow:hover {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Mobile: extra bottom padding for fixed input box */
@media (max-width: 1023px) {
    #chatWindow {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 16px));
    }
    
    #chatPageContent {
        padding-bottom: 0;
    }
}

/* Chat input container - fixed on mobile, sticky on desktop */
#chatInputContainer {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
}

/* Safe area padding utility */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Ensure input is always accessible on mobile */
@media (max-width: 1023px) {
    #chatInputContainer {
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }
}

/* ================================
   Welcome Centered State
   ================================ */
.welcome-message {
    min-height: 100%;
    transition: opacity 0.15s ease;
}

.welcome-message.fade-out {
    opacity: 0;
}

/* When welcome screen is visible, fill the viewport so the welcome
   content can center itself via its own padding-top. */
#chatWindowMessages:has(.welcome-message:not(.fade-out)) {
    height: 100%;
}

#chatWindow:has(.welcome-message:not(.fade-out)) {
    padding-bottom: 0;
}

#chatWindow:has(.welcome-message:not(.fade-out)) > div {
    height: 100%;
}

/* On mobile, lock scrolling when welcome screen is shown (no content to scroll) */
@media (max-width: 1023px) {
    body:has(.welcome-message:not(.fade-out)) {
        overflow: hidden !important;
        height: 100dvh;
    }
}

/* Spacer created by ScrollController to provide scroll room when
   anchoring user messages to the top of the viewport. */
.scroll-spacer {
    flex-shrink: 0;
    pointer-events: none;
}

/* Smooth slide-up entrance for the bottom input bar */
#chatInputContainer {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#chatInputContainer.slide-up-enter {
    transform: translateY(100%);
    opacity: 0;
}

/* ================================
   Sidebar Styling
   ================================ */
.sidebar-container {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 1.5rem;
}

.new-chat-button {
    background: transparent;
    border: none;
    color: white;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.new-chat-button:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.new-chat-button:hover i {
    color: #f97316;
    transform: scale(1.1);
}

.new-chat-button i {
    transition: all 0.2s ease;
}

.new-chat-button span {
    transition: color 0.2s ease;
}

.new-chat-button:hover span {
    color: #fbbf24;
}

/* Sidebar: allow conversation menus to overflow */
#appSidebar {
    overflow: visible;
}

/* Desktop sidebar: static flex child (ID selector overrides Tailwind classes) */
@media (min-width: 1024px) {
    #appSidebar {
        position: static;
        transform: none;
        width: 300px;
        min-width: 300px;
        height: auto;
        padding: 0;
        display: flex;
    }
}

/* Mobile sidebar overlay shadow (below lg breakpoint) */
@media (max-width: 1023px) {
    #appSidebar {
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
    }
}

/* Ensure conversation history allows menus to overflow */
#conversationHistory {
    overflow-x: visible;
}

#conversationList {
    overflow: visible;
}

/* ================================
   Message Styling
   ================================ */
.message {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    max-width: 90%;
    color: #1f2937;
}

.prose a {
    color: #1d4ed8;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose a:hover {
    color: #1e40af;
}

/* Table styling inside chat messages */
.message-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0;
    font-size: 0.875rem;
}

.message-content table thead {
    background-color: #f1f5f9;
}

.message-content table th {
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: #334155;
    border-bottom: 2px solid #cbd5e1;
}

.message-content table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    color: #475569;
}

.message-content table tbody tr:last-child td {
    border-bottom: none;
}

.message-content table tbody tr:hover {
    background-color: #f8fafc;
}

/* ================================
   HTMX loading indicators
   ================================ */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Loading spinner */
.inline-loader {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ================================
   Agent Mode Styles - Gemini-style Thinking Dropdown
   ================================ */

/* Thinking dropdown container */
.thinking-dropdown {
    animation: fadeIn 0.2s ease-out;
}

/* Toggle button */
.thinking-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #64748b;
    transition: all 0.2s ease;
    width: fit-content;
}

.thinking-toggle:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #475569;
}

/* Pre-stream placeholder pill (templates/partials/chat/loading.html).
   Visually identical to the toggle but not clickable — there's no
   dropdown to expand yet. The label gets animated trailing dots so the
   text reads as "Thinking…" with motion that mirrors the pulsing dot. */
.thinking-toggle-placeholder {
    cursor: default;
}

.thinking-toggle-placeholder:hover {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    color: #64748b;
}

.thinking-toggle-placeholder .thinking-label::after {
    content: '...';
    display: inline-block;
    width: 1.6ch;
    text-align: left;
    overflow: hidden;
    vertical-align: bottom;
    animation: thinkingEllipsis 1.4s steps(4, end) infinite;
}

@keyframes thinkingEllipsis {
    0%   { width: 0; }
    33%  { width: 0.55ch; }
    66%  { width: 1.1ch; }
    100% { width: 1.6ch; }
}

.thinking-toggle-icon {
    display: flex;
    align-items: center;
    color: #94a3b8;
}

.thinking-toggle-icon svg {
    transition: transform 0.2s ease;
}

.thinking-toggle-icon svg.rotate-180 {
    transform: rotate(180deg);
}

.thinking-toggle-text {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.thinking-sparkle {
    font-size: 0.875rem;
}

.thinking-label {
    font-weight: 500;
}

/* Thinking status indicator */
.thinking-status {
    display: flex;
    align-items: center;
    margin-left: 0.25rem;
}

.thinking-status-active .thinking-dot {
    width: 6px;
    height: 6px;
    background-color: #6366f1;
    border-radius: 50%;
    animation: thinkingPulse 1.5s ease-in-out infinite;
}

.thinking-status-complete {
    color: #64748b;
}

/* Thinking content area */
.thinking-content {
    margin-top: 0.75rem;
    padding: 1rem 1.25rem;
    background-color: #fafbfc;
    border: 1px solid #e8ecf0;
    border-radius: 0.75rem;
    max-height: 400px;
    overflow-y: auto;
    transition: all 0.3s ease;
}

.thinking-content.collapsed {
    display: none;
}

/* Thought entries */
.thinking-entries {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.thought-entry {
    animation: thoughtFadeIn 0.3s ease-out;
}

.thought-header {
    font-weight: 600;
    font-size: 0.8125rem;
    color: #374151;
    margin-bottom: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.thought-header::before {
    content: '';
    width: 4px;
    height: 4px;
    background-color: #6366f1;
    border-radius: 50%;
}

.thought-body {
    font-size: 0.8125rem;
    color: #6b7280;
    line-height: 1.6;
}

.thought-body p {
    margin: 0;
    margin-bottom: 0.25rem;
}

.thought-body p:last-child {
    margin-bottom: 0;
}

/* Actions (tool calls) in the thinking flow */
.thought-action {
    display: block;
    padding: 0.375rem 0;
    color: #4f46e5;
    font-style: italic;
}

.thought-action .action-indicator {
    color: #818cf8;
    margin-right: 0.25rem;
}

/* Results in the thinking flow */
.thought-result {
    display: block;
    padding: 0.25rem 0.5rem;
    margin: 0.25rem 0;
    background-color: #f0fdf4;
    border-radius: 0.375rem;
    color: #15803d;
    font-size: 0.75rem;
}

/* ================================
   Animations
   ================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes thoughtFadeIn {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Scrollbar styling for thinking content */
.thinking-content::-webkit-scrollbar {
    width: 4px;
}

.thinking-content::-webkit-scrollbar-track {
    background: transparent;
}

.thinking-content::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

.thinking-content::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}