/* sourc-e AI — Custom Styles (Chainlit 2.9.6) */

/* =============================================================================
   Self-hosted Inter Font — no dependency on fonts.googleapis.com
   Chainlit loads Inter from Google CDN by default, which may be blocked
   by firewalls. These local @font-face rules take priority.
   ============================================================================= */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/public/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/public/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Color System — WCAG AA contrast fixes (T-050) */
.dark {
    --primary: 0 84% 65%;
}
:root:not(.dark), .light {
    --primary: 0 84% 45%;
}

/* =============================================================================
   Watermark — Hide Chainlit's default disclaimer
   ============================================================================= */

.watermark {
    display: none !important;
}

/* =============================================================================
   Sidebar — Logo at bottom
   ============================================================================= */

/* Sidebar container — flex column to push logo to bottom */
.bg-sidebar {
    display: flex !important;
    flex-direction: column !important;
}

/* Logo at the bottom of the sidebar — scrolls with content, extra spacing */
.bg-sidebar::after {
    content: '';
    display: block;
    width: 100px;
    height: 35px;
    margin: 24px auto 14px;
    background: url('/public/logo_dark.png') no-repeat center center;
    background-size: contain;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
    padding-top: 12px;
}

.bg-sidebar:hover::after {
    opacity: 0.75;
}

/* Sidebar text — compact for info panels */
.cl-sidebar .cl-text {
    font-size: 13px;
    line-height: 1.5;
}

/* =============================================================================
   Chat Messages — Clean typography
   ============================================================================= */

/* Chat font — slightly larger than 13px default, modern spacing */
.cl-message-content {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
}

/* Reduce vertical spacing between messages */
.cl-message {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Links — visible without hover */
.cl-message-content a {
    color: hsl(var(--primary));
    text-decoration-line: underline;
    text-decoration-color: hsl(var(--primary) / 0.3);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.15s;
}
.cl-message-content a:hover {
    text-decoration-color: hsl(var(--primary));
}

/* =============================================================================
   Markdown Tables — Clean header style
   ============================================================================= */

.cl-message-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.75em 0;
    font-size: 13px;
}

.cl-message-content table th,
.cl-message-content table td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid hsl(var(--border));
}

.cl-message-content table th {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: hsl(var(--muted-foreground));
    background: transparent;
}

/* Subtle row hover */
.cl-message-content table tr:hover td {
    background: hsl(var(--muted) / 0.15);
    transition: background 0.15s ease;
}

/* Right-align numeric columns in price tables */
.cl-message-content table td:not(:first-child),
.cl-message-content table th:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* =============================================================================
   Code Blocks — Accent border
   ============================================================================= */

.cl-message-content pre {
    border-radius: 6px;
    padding: 10px;
    font-size: 12px;
    border-left: 3px solid hsl(0 84% 60% / 0.3);
}

/* =============================================================================
   Step Indicators + Input Area
   ============================================================================= */

.step {
    font-size: 12px;
}

.cl-chat-input textarea {
    font-size: 13.5px !important;
}

/* =============================================================================
   Scrollbar — Thin (WebKit only, safe)
   ============================================================================= */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: hsl(var(--muted-foreground) / 0.2);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.35);
}

/* =============================================================================
   Thread History (Left Sidebar) — Spacing & readability
   ============================================================================= */

/* More breathing room between thread items */
nav a[href^="/thread"],
nav [data-testid="thread-item"],
.cl-thread-list a {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-bottom: 2px;
}

/* Date group headers (Heute, Gestern, etc.) — more top margin */
nav p,
.cl-thread-list p {
    margin-top: 16px !important;
    margin-bottom: 4px !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* =============================================================================
   Feedback Buttons — Larger touch targets
   ============================================================================= */

.cl-message-actions button {
    min-width: 32px;
    min-height: 32px;
    padding: 6px;
}

/* =============================================================================
   Thread Names — Ellipsis instead of clip
   ============================================================================= */

nav a[href^="/thread"] span,
.cl-thread-list a span {
    text-overflow: ellipsis !important;
    overflow: hidden;
    white-space: nowrap;
}

/* =============================================================================
   Profile Dropdown — More visible text
   ============================================================================= */

[data-testid="chat-profile-selector"] button,
.cl-chat-profile-selector button {
    border: 1px solid hsl(var(--border));
    font-weight: 500;
}

/* =============================================================================
   Typography — Headings, Lists, Blockquotes
   ============================================================================= */

/* Headings — reduced size for chat context */
.cl-message-content h3 {
    font-size: 15px;
    margin-top: 1em;
    margin-bottom: 0.4em;
}
.cl-message-content h2 {
    font-size: 17px;
    margin-top: 1.2em;
    margin-bottom: 0.5em;
}

/* Lists — breathing room */
.cl-message-content ul li,
.cl-message-content ol li {
    margin-bottom: 0.3em;
    line-height: 1.6;
    font-size: inherit !important;
}

/* Blockquotes — left border accent */
.cl-message-content blockquote {
    border-left: 3px solid hsl(var(--primary) / 0.4);
    padding-left: 12px;
    margin: 0.75em 0;
    color: hsl(var(--muted-foreground));
    font-style: italic;
}

/* =============================================================================
   Input Field — Visible border
   ============================================================================= */

.cl-chat-input,
[class*="composer"] {
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 8px;
}

/* =============================================================================
   Theme Switch Transition
   ============================================================================= */

html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* =============================================================================
   Sidebar Section Headers — visual separators
   ============================================================================= */

nav p,
[class*="thread-list"] p,
.cl-sidebar h3 {
    border-bottom: 1px solid hsl(var(--border) / 0.3);
    padding-bottom: 4px;
    margin-bottom: 6px;
}

/* =============================================================================
   Action Buttons — larger, consistent
   ============================================================================= */

.cl-action-button,
[class*="command-button"] {
    min-height: 40px !important;
    padding: 8px 16px !important;
}

/* =============================================================================
   Code blocks — accent border
   ============================================================================= */

.cl-message-content pre {
    border-left: 3px solid hsl(var(--primary) / 0.3);
    padding: 12px 16px;
    border-radius: 6px;
    background: hsl(var(--muted) / 0.3);
}

.cl-message-content code:not(pre code) {
    font-size: 0.9em;
    padding: 2px 6px;
    border-radius: 4px;
    background: hsl(var(--muted) / 0.4);
}

/* =============================================================================
   Firefox Scrollbar
   ============================================================================= */

* {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--muted-foreground) / 0.2) transparent;
}

/* =============================================================================
   Responsive — Tablet (640-1024px)
   ============================================================================= */

@media (min-width: 640px) and (max-width: 1023px) {
    .cl-message-content { font-size: 14px !important; }
    .cl-message-content table { display: block; overflow-x: auto; }
}

/* =============================================================================
   Responsive — Mobile (< 640px)
   ============================================================================= */

@media (max-width: 639px) {
  .cl-message-content { font-size: 14px !important; line-height: 1.7 !important; }
  .cl-message-content table { display: block; overflow-x: auto; }
  .cl-chat-input textarea { font-size: 16px !important; }
  .bg-sidebar::after { width: 70px; height: 25px; }
}