/* Modern Reset & Base with Refined Typography */
:root {
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Menlo", "Monaco", "Courier New", monospace;

    --c-bg: #ffffff;
    --c-text: #24292f;
    --c-text-light: #57606a;
    --c-link: #0969da;
    --c-sidebar-bg: #f6f8fa;
    --c-sidebar-border: #d0d7de;
    --c-border: #d0d7de;
    --sidebar-width: 280px;
    --c-active-bg: #e6edf3;
    --c-active-border: #fd8c73;
    /* LangChain brand colorish */
}

body {
    font-family: var(--font-sans);
    line-height: 1.6;
    color: var(--c-text);
    background: var(--c-bg);
    margin: 0;
    display: flex;
    min-height: 100vh;
}

/* Sidebar Styling */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--c-sidebar-bg);
    border-right: 1px solid var(--c-sidebar-border);
    height: 100vh;
    overflow-y: auto;
    position: fixed;
    left: 0;
    top: 0;
    padding: 24px 16px;
    box-sizing: border-box;
    z-index: 10;
}

.sidebar h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 1rem 0.5rem;
    color: #24292f;
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar li {
    margin-bottom: 2px;
}

.sidebar a {
    text-decoration: none;
    color: var(--c-text);
    padding: 6px 12px;
    border-radius: 6px;
    display: block;
    font-size: 0.9rem;
    transition: background 0.15s ease;
    border-left: 3px solid transparent;
}

.sidebar a:hover {
    background-color: rgba(208, 215, 222, 0.32);
    text-decoration: none;
}

.sidebar a.active {
    background-color: #fff;
    color: var(--c-link);
    font-weight: 600;
    border-left-color: #eacd76;
    /* Approximate Highlight */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sidebar .category {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #57606a;
    margin: 24px 0 8px 12px;
    letter-spacing: 0.05em;
}

/* Main Content Area */
.main-content {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    padding: 2rem 4rem;
    box-sizing: border-box;
}

.main-content>div {
    max-width: 900px;
    margin: 0 auto;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 1.5em;
    margin-bottom: 16px;
    font-weight: 600;
    color: #24292f;
    position: relative;
}

h1 {
    font-size: 2.25em;
    border-bottom: 1px solid var(--c-border);
    padding-bottom: 0.3em;
    margin-top: 0;
}

h2 {
    font-size: 1.75em;
    border-bottom: 1px solid var(--c-border);
    padding-bottom: 0.3em;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.25em;
}

p {
    margin-bottom: 16px;
}

a {
    color: var(--c-link);
    text-decoration: none;
    font-weight: 500;
}

a:hover {
    text-decoration: underline;
}

a.link {
    /* Styles for documentation internal links */
    color: var(--c-link);
}

/* Code Blocks - The Dark Magic */
/* We reset the shiki container to use the dark theme variables embedded in the HTML */
pre.shiki {
    background-color: #0d1117 !important;
    /* Force dark bg */
    color: #c9d1d9 !important;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 16px;
    line-height: 1.5;
    font-family: var(--font-mono);
    font-size: 85%;
    border: 1px solid #30363d;
}

/* Important: This forces the syntax highlighting to use the dark mode colors */
pre.shiki span {
    color: var(--shiki-dark) !important;
    background-color: transparent !important;
}

/* Inline Code */
:not(pre)>code {
    background-color: rgba(175, 184, 193, 0.2);
    padding: 0.2em 0.4em;
    border-radius: 6px;
    font-size: 85%;
    font-family: var(--font-mono);
}

/* Icons & Images */
img {
    max-width: 100%;
    border-radius: 6px;
    border: 1px solid var(--c-border);
    margin: 1rem 0;
}

/* Constrain giant SVG icons in headers */
h1 svg,
h2 svg,
h3 svg,
h4 svg {
    width: 1em !important;
    height: 1em !important;
    display: inline-block;
    vertical-align: text-bottom;
    margin-right: 0.3em;
}

/* Copy IDs and Anchor Links */
.absolute {
    position: absolute;
}

.opacity-0 {
    opacity: 0;
}

h2:hover .opacity-0,
h3:hover .opacity-0 {
    opacity: 1;
}

/* Buttons & UI Elements */
button {
    appearance: none;
    background-color: #f6f8fa;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    color: #24292f;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 16px;
    transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
}

button:hover {
    background-color: #f3f4f6;
}

/* Copy button specific */
[data-testid="copy-code-button"] {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px;
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 0.5;
}

[data-testid="copy-code-button"]:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Admonitions */
.callout {
    padding: 16px;
    margin: 20px 0;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.callout[data-callout-type="tip"] {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
}

.callout[data-callout-type="info"] {
    background-color: #eff6ff;
    border-color: #bfdbfe;
}

.callout[data-callout-type="warning"] {
    background-color: #fffbeb;
    border-color: #fde68a;
}

/* Accordion */
details.accordion {
    border: 1px solid var(--c-border);
    border-radius: 6px;
    margin-bottom: 1rem;
}

details.accordion summary {
    padding: 12px 16px;
    cursor: pointer;
    background-color: #f6f8fa;
    font-weight: 600;
    list-style: none;
    /* Hide default triangle */
}

details.accordion[open] summary {
    border-bottom: 1px solid var(--c-border);
}

details.accordion div[data-component-part="accordion-content"] {
    padding: 16px;
}

/* Hide navigation elements from inside the content if they leaked */
header,
footer,
.nav-tabs {
    display: none !important;
}

/* Tab Interactivity */
[role="tab"] {
    position: relative;
    cursor: pointer;
}

[role="tab"][data-state="active"] {
    color: var(--c-link) !important;
}

[role="tab"] .absolute {
    /* The underline bar */
    background-color: var(--c-link) !important;
    display: none;
}

[role="tab"][data-state="active"] .absolute {
    display: block;
}

/* Ensure hidden panels are hidden */
[role="tabpanel"][hidden] {
    display: none !important;
}

/* Adjust tab styling from raw defaults */
[role="tablist"] {
    border-bottom: 1px solid var(--c-border);
    background-color: #f6f8fa;
    padding-bottom: 0 !important;
}

.code-group {
    border: 1px solid var(--c-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
}

/* Mobile Responsiveness */
.mobile-nav-toggle {
    display: none;
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000;
    padding: 8px 12px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font-weight: 600;
    font-size: 14px;
    color: var(--c-text);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 90;
    backdrop-filter: blur(2px);
}

@media (max-width: 768px) {
    .mobile-nav-toggle {
        display: block;
    }

    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1);
        z-index: 100;
        height: 100%;
        width: 80%;
        max-width: 300px;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-overlay.open {
        display: block;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
        padding: 1.5rem;
        /* Ensure content doesn't get hidden under fixed elements if any */
        padding-top: 4rem;
    }

    .main-content>div {
        max-width: 100%;
    }

    /* Make grids stack on mobile */
    .main-content div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
    }

    h1 {
        font-size: 1.75em;
    }

    h2 {
        font-size: 1.5em;
    }

    /* Adjust code blocks */
    pre.shiki {
        font-size: 0.8em;
    }
}