/* Font Face Declarations for Persian - IRANSansX */
@font-face {
    font-family: "IRANSansX";
    src: local("IRANSansX Medium"),
        url("../fonts/iransansx/IRANSansXMedium.woff2") format("woff2"),
        url("../fonts/iransansx/IRANSansXMedium.ttf") format("truetype");
    font-weight: normal;
    /* Medium weight */
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

@font-face {
    font-family: "IRANSansX";
    src: local("IRANSansX Regular"),
        url("../fonts/iransansx/IRANSansXRegular.woff2") format("woff2"),
        url("../fonts/iransansx/IRANSansXRegular.ttf") format("truetype");
    font-weight: 500;
    /* Regular weight */
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

.features,
.resources {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.feature,
.resource {
    flex: 1 1 45%;
    padding: 15px;
    margin: 10px;
    background-color: #f8f8f8;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.feature:hover,
.resource:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 48em) {

    .feature,
    .resource {
        flex: 1 1 100%;
    }
}

/* Modern highlight effect for anchor text when selecting and scrolling */
.highlight-anchor {
    animation: highlight-fade 2s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 3px;
    position: relative;
    z-index: 1;
}

/* Dark mode variant */
[data-theme="dark"] .highlight-anchor {
    animation: highlight-fade-dark 2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light mode animation */
@keyframes highlight-fade {
    0% {
        background-color: rgba(255, 152, 0, 0.15);
        box-shadow: 0 1px 0 rgba(66, 133, 244, 0.3);
    }

    40% {
        background-color: rgba(255, 152, 0, 0.08);
        box-shadow: 0 1px 0 rgba(66, 133, 244, 0.15);
    }

    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

/* Dark mode animation */
@keyframes highlight-fade-dark {
    0% {
        background-color: rgba(255, 177, 0, 0.25);
        box-shadow: 0 1px 0 rgba(100, 150, 255, 0.4);
    }

    40% {
        background-color: rgba(255, 177, 0, 0.15);
        box-shadow: 0 1px 0 rgba(100, 150, 255, 0.2);
    }

    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

/* Respecting reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .highlight-anchor {
        animation: none;
        background-color: rgba(255, 152, 0, 0.1);
        box-shadow: 0 1px 0 rgba(66, 133, 244, 0.2);
        transition: all 0.5s ease;
    }

    [data-theme="dark"] .highlight-anchor {
        animation: none;
        background-color: rgba(255, 177, 0, 0.15);
        box-shadow: 0 1px 0 rgba(100, 150, 255, 0.25);
        transition: all 0.5s ease;
    }
}

/**
* docsify-avalai-theme.css
*
* Enhanced theme for AvalAI documentation with improved
* code block styling, typography, and overall layout.
*
* @author AvalAI Documentation Team
* @version 1.0.0
*/

/* ===== Language Selector Plugin Styles ===== */
/* Container for the entire language selector block */
.language-selector-container {
    position: relative;
    border-radius: 8px !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid var(--code-border-color, rgba(0, 0, 0, 0.08));
    overflow: hidden;
    background-color: var(--code-theme-background, #f8f8f8);
}

/* Header containing the dropdown and potentially other controls */
.language-selector-header {
    display: flex;
    justify-content: flex-start;
    /* Align items to the left */
    align-items: center;
    background: unset;
    background-image: unset;
    border-bottom: unset;
    min-height: 2em;
    /* Ensure minimum height */
}

/* The language select dropdown itself */
.language-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 5px 28px 5px 10px;
    /* Adjusted padding */
    /* Add space between copy button and select */
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    /* Ensure consistent height */
    min-width: 7rem;
    /* Slightly wider */
    /* border: 1px solid var(--code-border-color, rgba(0, 0, 0, 0.1)); */
    border: unset;
    border-radius: 5px;
    /* Slightly more rounded */
    /* background-color: var(--code-select-background, #fff); */
    background-color: unset;
    color: var(--text-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23555'%3E%3Cpath d='M6 9l-4-4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    /* Adjusted arrow position */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    /* Added box-shadow transition */
}

.language-select:hover {
    border-color: unset;
    box-shadow: unset;
}

.language-select:focus {
    outline: none;
    border-color: unset;
    box-shadow: unset;
    /* Slightly larger focus ring */
}

.search .input-wrap {
    margin-top: 0.25em !important;
    margin-bottom: 0.5em !important;
}

/* --- Positioning for Docsify Copy Code Button --- */
/* Ensure copy button is positioned correctly within the flex container */
.docsify-copy-code-button {
    order: -1;
    margin-left: 0;
    margin-right: 10px;
    padding: 5px 10px !important;
    font-size: 12px;
    background-color: transparent !important;
    border: 1px solid var(--code-border-color, rgba(0, 0, 0, 0.1));
    color: var(--text-color) !important;
    border-radius: 5px !important;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    color: black;
}

.docsify-copy-code-button:hover {
    background-color: var(--theme-color-light,
            rgba(66, 185, 131, 0.9)) !important;
}

/* Styling for the <pre> tag within the language selector */
.language-selector-container .code-block-content pre {
    margin: 0 !important;
    /* Reset margin */
    /* Increased padding */
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 0 8px 8px !important;
    /* Keep bottom radius */
    background-color: transparent !important;
    /* Fully transparent */
    overflow: auto !important;
    /* Ensure scrolling */
    font-size: 0.9em;
    /* Slightly smaller font size for code */
    line-height: 1.6;
    /* Improved line height */
}

/* --- Dark Theme Adjustments for Language Selector --- */
[data-theme="dark"] .language-selector-container {
    background-color: var(--code-theme-background-dark, #161b22);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid var(--code-border-color-dark, #30363d);
    border-radius: 8px;
}

[data-theme="dark"] .language-selector-header {
    background: inherit;
    /* Use same as code background */
    background-image: var(--code-header-background-image-dark, none);
    border-bottom: unset;
}

[data-theme="dark"] .language-select {
    background-color: inherit;
    color: var(--text-color-dark, #dc4f4f);
    border: unset;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23aaa'%3E%3Cpath d='M6 9l-4-4h8z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .language-select:hover {
    border-color: unset;
    box-shadow: unset;
}

/* Apply dark theme styles to copy button */
[data-theme="dark"] .docsify-copy-code-button {
    border: 1px solid var(--code-border-color-dark, #30363d);
    color: var(--text-color-dark, #c9d1d9) !important;
    background-color: rgba(88, 166, 255, 0.1);
    border-radius: 4px;
    transition: all 0.2s ease;
}

[data-theme="dark"] .docsify-copy-code-button:hover {
    background-color: rgba(88, 166, 255, 0.2);
    border-color: #58a6ff;
    color: #ffffff !important;
}

[data-theme="dark"] .language-selector-container .code-block-content pre {
    background-color: transparent !important;
}

/* Hide the template tags used by the plugin */
.language-selector-container template {
    display: none;
}

/* Prevent Docsify's default language name display within selector content */
.language-selector-container .code-block-content pre[data-lang]::before {
    display: none !important;
}

/* ===== Base Code Block Styling (Non-Language Selector) ===== */

/* Dark theme code blocks */
[data-theme="dark"] .markdown-section pre {
    background-color: #161b22;
    border: 1px solid #30363d;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .markdown-section pre>code {
    color: #c9d1d9;
}

/* Base styles for all <pre> tags in markdown */
.markdown-section pre {
    border-radius: 8px !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
    margin: unset;
    padding: 0 !important;
    transition: all 0.3s ease;
    overflow: auto;
    direction: ltr;
    text-align: left;
    max-width: 100%;
    word-wrap: break-word;
}

.markdown-section pre>code {
    padding: 0.5em;
    direction: ltr;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Remove the complex ::before header styling for standard code blocks */
/* Docsify/Prism usually adds a language class, rely on that or simpler indicators if needed */
.markdown-section pre::before {
    display: none !important;
    /* Completely remove the old header */
}

/* Remove the ::after dot as well */
.markdown-section pre::after {
    display: none !important;
}

/* ===== Inline Code Styling ===== */
.markdown-section code:not([class*="lang-"]):not([class*="language-"]) {
    border-radius: 4px;
    font-family: "Roboto Mono", Monaco, courier, monospace;
    font-size: 0.85em;
    padding: 0.2em 0.4em;
    white-space: normal;
    overflow-wrap: break-word;
    background-color: rgba(66, 185, 131, 0.1);
    color: #42b983;
    border: 1px solid rgba(66, 185, 131, 0.2);
    transition: all 0.2s ease;
}

[data-theme="dark"] .markdown-section code:not([class*="lang-"]):not([class*="language-"]) {
    background-color: rgba(88, 166, 255, 0.1);
    color: #79c0ff;
    border: 1px solid rgba(88, 166, 255, 0.2);
}

[data-theme="dark"] .markdown-section code:not([class*="lang-"]):not([class*="language-"]):hover {
    background-color: rgba(88, 166, 255, 0.15);
    border-color: rgba(88, 166, 255, 0.3);
}

.markdown-section code:not([class*="lang-"]):not([class*="language-"]):hover {
    background-color: rgba(66, 185, 131, 0.15);
    border-color: rgba(66, 185, 131, 0.3);
}

/* ===== Code Syntax Highlighting (Light Theme - Base) ===== */
/* Using colors similar to GitHub's light theme */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #6a737d;
    /* Gray */
}

.token.punctuation {
    color: #586069;
    /* Darker Gray */
}

.token.namespace {
    opacity: 0.7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
    color: #e36209;
    /* Orange */
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: #22863a;
    /* Green */
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    color: #005cc5;
    /* Blue */
    background: hsla(0, 0%, 100%, 0.5);
    /* Slight background for operators */
}

.token.atrule,
.token.attr-value,
.token.keyword {
    color: #d73a49;
    /* Red */
}

.token.function,
.token.class-name {
    color: #6f42c1;
    /* Purple */
}

.token.regex,
.token.important,
.token.variable {
    color: #e36209;
    /* Orange - same as numbers/constants */
}

.token.important,
.token.bold {
    font-weight: bold;
}

.token.italic {
    font-style: italic;
}

.token.entity {
    cursor: help;
}

/* ===== Typography Improvements ===== */

body {
    font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
        sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #34495e;
}

/* Apply IRANSansX font for RTL (Persian) content */
html[dir="rtl"] body {
    font-family: "IRANSansX", "PT Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
        "Helvetica Neue", sans-serif;
}

/* Headings */
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section h6 {
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.3;
}

.markdown-section h1 {
    font-size: 2.2em;
    margin-top: 0;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #eaecef;
}

[data-theme="dark"] .markdown-section h1,
[data-theme="dark"] .markdown-section h2 {
    border-bottom: 1px solid #30363d;
    color: #f0f6fc;
    /* Brighter color for major headings */
}

.markdown-section h2 {
    font-size: 1.8em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #eaecef;
}

.markdown-section h3 {
    font-size: 1.4em;
}

.markdown-section h4 {
    font-size: 1.2em;
}

.markdown-section h5 {
    font-size: 1em;
}

.markdown-section h6 {
    font-size: 0.9em;
    color: #6a737d;
}

/* Links */
.markdown-section a {
    color: #42b983;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.markdown-section a:hover {
    color: #3aa776;
    text-decoration: underline;
}

/* Paragraphs and lists */
.markdown-section p,
.markdown-section ul,
.markdown-section ol {
    margin: 1em 0;
    line-height: 1.7;
}

.markdown-section ul,
.markdown-section ol {
    padding-left: 1.5em;
}

.markdown-section ul li,
.markdown-section ol li {
    margin: 0.4em 0;
    /* Increased vertical margin */
}

/* Blockquotes */
.markdown-section blockquote {
    border-left: 4px solid #42b983;
    margin: 1.5em 0;
    padding: 0.8em 1em;
    background-color: rgba(66, 185, 131, 0.05);
    border-radius: 0 4px 4px 0;
}

[data-theme="dark"] .markdown-section blockquote {
    border-left: 4px solid #58a6ff;
    background-color: rgba(88, 166, 255, 0.08);
    color: #8b949e;
}

.markdown-section blockquote p {
    margin: 0.5em 0;
}

/* Tables */
.markdown-section table {
    border-collapse: collapse;
    border-spacing: 0;
    display: block;
    margin: 1em 0;
    overflow: auto;
    width: 100%;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .markdown-section table {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.markdown-section table thead {
    background-color: #f8f8f8;
}

.markdown-section table th,
.markdown-section table td {
    border: 1px solid #dfe2e5;
    padding: 0.6em 1em;
}

.markdown-section table tr {
    border-top: 1px solid #dfe2e5;
}

.markdown-section table tr:nth-child(2n) {
    background-color: #f6f8fa;
}

/* ===== Layout and Spacing ===== */

.sidebar-nav {
    padding-left: 5px;
}

html[dir="rtl"] .sidebar-nav {
    padding-left: unset;
    padding-right: 5px;
    font-family: var(--font-family-persian);
}

.content {
    padding-top: unset;
}

#docsify-darklight-theme {
    position: absolute;
    right: 6em;
    left: unset;
    top: 0.25em;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: var(--toogleImage);
    background-size: cover;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background-image 0.15s ease-in-out 0.15s;
}

html[dir="rtl"] #docsify-darklight-theme {
    right: unset;
    /* Unset the right property */
    left: 6em;
    /* Position from the left in RTL mode */
}

html[dir="rtl"] .content {
    position: absolute;
    top: 0;
    left: 0;
    right: var(--sidebar-width);
    bottom: 0;
    transition: none;
}

html[dir="rtl"] body.close .content {
    left: 0;
    right: 0;
}

/* This rule is moved to mobile section with proper value */

html[dir="rtl"] body {
    text-align: right;
}

html[dir="rtl"] .sidebar {
    right: 0;
    left: auto;
    /* border-left: 1px solid var(--sidebar-border-color, rgba(0, 0, 0, 0.07));
  border-right: none; */
}

html[dir="rtl"] .sidebar ul {
    margin: 0 0 15px 0;
}

html[dir="rtl"] .app-sub-sidebar li:before {
    padding-right: unset;
    padding-left: 4px;
    float: right !important;
}

.sidebar-toggle {
    width: var(--sidebar-width);
}

html[dir="rtl"] .sidebar-toggle {
    right: 0;
    left: auto;
}

body.close .sidebar-toggle {
    width: unset;
    background-color: transparent;
}

/* RTL: When sidebar is closed on desktop, hide it to the right */
html[dir="rtl"] body.close .sidebar {
    transform: translateX(var(--sidebar-width));
}

html[dir="rtl"] .markdown-section {
    direction: rtl;
    font-family: "IRANSansX", "PT Sans", sans-serif;
}

html[dir="rtl"] .search input {
    padding-right: 10px;
    padding-left: 10px;
    font-family: "IRANSansX", "PT Sans", sans-serif;
}

html[dir="rtl"] .search .clear-button {
    right: auto;
    left: 15px;
}

html[dir="rtl"] .github-corner {
    transform: scaleX(-1);
}

html[dir="rtl"] .docsify-pagination-container {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

/* Fix pagination */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
    padding-left: 0;
    padding-right: 1.5em;
}

/* Adjust list padding */
html[dir="rtl"] blockquote {
    border-left: none;
    border-right: 4px solid var(--theme-color, #42b983);
}

/* Adjust blockquote border */

/* RTL specific styles */

/* Apply Persian font to RTL features and resources */
html[dir="rtl"] .features .feature h3,
html[dir="rtl"] .resources .resource h3,
html[dir="rtl"] .features .feature p,
html[dir="rtl"] .resources .resource p,
html[dir="rtl"] .features .feature a,
html[dir="rtl"] .resources .resource a {
    font-family: var(--font-family-persian);
}

/* Apply Persian font to RTL features and resources */
html[dir="rtl"] .features .feature h3,
html[dir="rtl"] .resources .resource h3,
html[dir="rtl"] .features .feature p,
html[dir="rtl"] .resources .resource p,
html[dir="rtl"] .features .feature a,
html[dir="rtl"] .resources .resource a {
    font-family: var(--font-family-persian);
}

.app-nav {
    margin: 0;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    position: absolute;
    margin-left: unset;
    margin-right: unset;
    pointer-events: auto;
    /* Ensure clicks are captured */
}

html[dir="rtl"] .app-nav {
    margin: 0;
    right: unset;
    left: 0;
    text-align: left;
    margin-right: unset;
    margin-left: unset;
}

/* Ensure app-nav and its children don't trigger sidebar close */
.app-nav,
.app-nav * {
    pointer-events: auto !important;
    /* Ensure clicks are captured */
}

.app-nav li {
    margin: 0;
    padding: 0;
}

.markdown-section {
    width: 100%;
    max-width: 100%;
    /* do not try height: 100% it cause the progress bar to stop functioning! */
}

.footer {
    margin: 0 auto;
    text-align: center;
}

html[dir="rtl"] .footer {
    direction: rtl;
}

/* Sidebar improvements */
.sidebar {
    width: var(--sidebar-width);
    /* border-right: 1px solid rgba(0, 0, 0, 0.07); */
    border: unset;
    /* scroll-behavior: smooth; */
    /* Removed to prevent interference */
    padding: 0.5rem 0;
    transition: all 0.3s ease;
}

.sidebar>h1 {
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    text-align: center;
    width: 96px;
    height: 70px;
}

.sidebar>h1 img {
    width: 96px;
    height: 70px;
    /* Adjust this value based on your image's actual content */
    object-fit: cover;
    object-position: center;
    /* Adjust to position the important part */
}

.sidebar>h1 a {
    display: inline-block;
}

.sidebar ul li {
    margin: 0;
    position: relative;
    /* Enable positioning for child elements */
}

/* Make the entire li clickable by making the <a> fill the entire space */
.sidebar ul li p {
    margin: 0;
    padding: 0;
}

.sidebar ul li a {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    color: #505d6b;
    transition: color 0.3s, background-color 0.3s;
    display: block;
    /* Make the entire area clickable */
    width: 100%;
    /* Ensure the link fills the entire width */
    height: 100%;
    border-radius: 3px;
    /* Ensure the link fills the entire height */
}

html[dir="rtl"] .sidebar ul li a {
    font-family: var(--font-family-persian);
}


.sidebar ul li a:hover {
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .sidebar ul li a:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Make section headers in sidebar clickable */
.sidebar li>p {
    cursor: pointer;
    margin: 0;
    padding: 0;
    color: #505d6b;
    font-weight: 600;
    font-size: 0.8rem;
}

/* Make sure the <p> doesn't interfere with clicking */
.sidebar li>p>a {
    display: block;
    width: 100%;
    height: 100%;
}

[data-theme="dark"] .sidebar li>p {
    color: rgba(255, 255, 255, 0.8);
}

/* Add subtle shadow to sidebar in dark mode */
[data-theme="dark"] .sidebar {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) inset;
}

/* Remove custom indicators that might interfere with clicking */

/* Styling for links with submenus */
.sidebar li>a+ul {
    position: relative;
}

/* Nested menu styling - ensure proper display */
.sidebar ul ul {
    padding-left: 0;
    display: block;
    /* Always show nested menus */
}

/* Indent nested items */
.sidebar ul ul li a {
    padding-left: 1.5rem;
    font-size: 0.75rem;
    opacity: 0.85;
    font-weight: normal;
}

/* RTL nested menu indentation */
html[dir="rtl"] .sidebar ul ul li a {
    padding-left: 0.6rem;
    padding-right: 1.5rem;
}


/* Improve spacing between sections */
.sidebar>ul>li {
    margin: 0.2rem 0;
}

/* Add subtle dividers between main sections */
.sidebar>ul>li:not(:last-child) {
    margin-bottom: 0.4rem;
    position: relative;
}

/* Add subtle divider line between sections */
.sidebar>ul>li:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -0.2rem;
    left: 0.6rem;
    right: 0.6rem;
    height: 1px;
    background: linear-gradient(to right,
            transparent,
            rgba(0, 0, 0, 0.05),
            transparent);
}

[data-theme="dark"] .sidebar>ul>li:not(:last-child)::after {
    background: linear-gradient(to right,
            transparent,
            rgba(255, 255, 255, 0.05),
            transparent);
}

/* Section dividers */
.markdown-section hr {
    border: none;
    border-bottom: 1px solid #eaecef;
    margin: 2em 0;
}

/* Buttons and interactive elements */
button,
.btn {
    border-radius: 6px;
    border: 1px solid #42b983;
    color: #42b983;
    background-color: transparent;
    padding: 0.5em 1.2em;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s ease;
}

[data-theme="dark"] button,
[data-theme="dark"] .btn {
    border: 1px solid #58a6ff;
    color: #58a6ff;
    background-color: transparent;
}

button:hover,
.btn:hover {
    background-color: #e5e7eb;
    color: white;
}

[data-theme="dark"] button:hover,
[data-theme="dark"] .btn:hover {
    background-color: #58a6ff;
    color: #0d1117;
}

/* ===== Mobile Responsiveness ===== */
@media screen and (max-device-width: 48em) {
    .app-nav {
        position: absolute;
        top: 0.5em !important;
        right: 0 !important;
        padding: 5px 0 !important;
        /* Add some padding */
        display: block !important;
        /* Always display */
    }

    html[dir="rtl"] .app-nav {
        right: unset !important;
        left: 0 !important;
    }

    /* Ensure app-nav items are properly spaced on mobile */
    .app-nav li {
        margin: 0;
    }

    .content {
        padding-top: 2rem;
        position: relative !important;
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        z-index: 10;
        pointer-events: auto;
    }

    #docsify-darklight-theme {
        top: -0.75em;
    }

    /* Content positioning for both LTR and RTL */
    body .content {
        transform: unset !important;
        left: unset !important;
        right: unset !important;
        width: 100% !important;
        transition: none !important;
    }

    /* Ensure RTL content is properly positioned */
    html[dir="rtl"] .content {
        right: 0;
        left: 0;
    }

    /* Make sure the toggle button and its children are always clickable */
    .sidebar-toggle,
    .sidebar-toggle-button,
    .sidebar-toggle span {
        pointer-events: auto !important;
    }

    .markdown-section {
        padding: 3rem 15px;
    }

    /* --- Mobile Sidebar --- */
    /* CSS-ONLY DEFAULT: Sidebar is CLOSED by default on mobile
       This ensures sidebar is hidden even if JavaScript fails or events don't fire */

    .sidebar {
        position: fixed;
        /* Changed to fixed */
        top: 0;
        bottom: 0;
        left: 0;
        /* Set base position for LTR */
        width: var(--sidebar-width);
        height: 100vh;
        transition: transform 0.25s ease-out;
        z-index: 20;
        /* Ensure sidebar is above content */
        overflow-y: auto;
        /* Allow scrolling if content overflows */
        background-color: var(--sidebar-background, white);
        /* Added background */
        pointer-events: auto;
        /* Ensure clicks on sidebar are captured */
        
        /* CSS-ONLY: Default closed state - sidebar hidden to the left */
        transform: translateX(calc(-1 * var(--sidebar-width)));
        -webkit-transform: translateX(calc(-1 * var(--sidebar-width)));
    }

    /* LTR: When OPEN - sidebar is visible when body has sidebar-open class (and NOT close) */
    body.sidebar-open:not(.close) .sidebar {
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    }

    /* LTR: When closed - sidebar is hidden to the left (body has close class or no sidebar-open) */
    body.close .sidebar,
    body:not(.sidebar-open) .sidebar {
        transform: translateX(calc(-1 * var(--sidebar-width))) !important;
        -webkit-transform: translateX(calc(-1 * var(--sidebar-width))) !important;
        box-shadow: none !important;
    }

    /* Dark theme sidebar background */
    [data-theme="dark"] .sidebar {
        background-color: var(--sidebar-background-dark, #0d1117);
    }

    /* RTL: Base sidebar position on right side */
    html[dir="rtl"] .sidebar {
        left: unset;
        right: 0;
        /* CSS-ONLY: Default closed state for RTL - sidebar hidden to the right */
        transform: translateX(var(--sidebar-width));
        -webkit-transform: translateX(var(--sidebar-width));
    }

    /* RTL: When OPEN - sidebar is visible when body has sidebar-open class (and NOT close) */
    html[dir="rtl"] body.sidebar-open:not(.close) .sidebar {
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    }

    /* RTL: When closed - sidebar is hidden to the right */
    html[dir="rtl"] body.close .sidebar,
    html[dir="rtl"] body:not(.sidebar-open) .sidebar {
        transform: translateX(var(--sidebar-width)) !important;
        -webkit-transform: translateX(var(--sidebar-width)) !important;
        box-shadow: none !important;
    }

    /* CRITICAL FALLBACK: Override inline styles from docsify-sidebar-collapse plugin
       These rules use attribute selectors to specifically target elements with inline style
       This ensures our transforms take precedence even when JS fails or plugin sets inline styles */
    body.close .sidebar[style],
    body.close .sidebar[style*="transform"] {
        transform: translateX(calc(-1 * var(--sidebar-width))) !important;
        -webkit-transform: translateX(calc(-1 * var(--sidebar-width))) !important;
        box-shadow: none !important;
    }
    
    html[dir="rtl"] body.close .sidebar[style],
    html[dir="rtl"] body.close .sidebar[style*="transform"] {
        transform: translateX(var(--sidebar-width)) !important;
        -webkit-transform: translateX(var(--sidebar-width)) !important;
        box-shadow: none !important;
    }
    
    /* Also override content transforms */
    body.close .content[style],
    body.close .content[style*="transform"] {
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    html[dir="rtl"] body.close .content[style],
    html[dir="rtl"] body.close .content[style*="transform"] {
        transform: none !important;
        -webkit-transform: none !important;
    }

    /* Removed duplicate rules that were causing conflicts */

    /* .sidebar-toggle {
    display: block;
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 100;
    width: 2rem;
    height: 2rem;
    border: none;
    cursor: pointer;
    padding: 0;
  } */

    html[dir="rtl"] .sidebar-toggle {
        left: unset;
    }

    .search .input-wrap {
        margin-top: 0.25em !important;
    }

    .markdown-section h1 {
        font-size: 1.8em;
    }

    .markdown-section h2 {
        font-size: 1.5em;
    }

    .markdown-section h3 {
        font-size: 1.3em;
    }

    .markdown-section pre {
        padding: 1em !important;
    }

    .markdown-section pre::before {
        padding: 0.4em 0.8em;
        margin: -1em -1em 0.8em -1em;
    }
}

/* End of media query */

/* ===== Dark Theme Enhancements ===== */

/* General dark theme improvements */
[data-theme="dark"] body {
    background-color: #0d1117;
    color: #c9d1d9;
    font-weight: 400;
    /* Explicitly set base weight for dark mode */
    transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] .markdown-section {
    color: #e0e6f1;
    /* Increased base paragraph text contrast */
}

/* --- Syntax Highlighting for Dark Theme --- */
/* Using colors similar to GitHub's dark theme */
[data-theme="dark"] .token.comment,
[data-theme="dark"] .token.prolog,
[data-theme="dark"] .token.doctype,
[data-theme="dark"] .token.cdata {
    color: #8b949e;
    /* Gray */
}

[data-theme="dark"] .token.punctuation {
    color: #c9d1d9;
    /* Light Gray */
}

[data-theme="dark"] .token.namespace {
    color: #c9d1d9;
    opacity: 0.7;
}

[data-theme="dark"] .token.property,
[data-theme="dark"] .token.tag,
[data-theme="dark"] .token.boolean,
[data-theme="dark"] .token.number,
[data-theme="dark"] .token.constant,
[data-theme="dark"] .token.symbol,
[data-theme="dark"] .token.deleted {
    color: #ff7b72;
    /* Coral */
}

[data-theme="dark"] .token.selector,
[data-theme="dark"] .token.attr-name,
[data-theme="dark"] .token.string,
[data-theme="dark"] .token.char,
[data-theme="dark"] .token.builtin,
[data-theme="dark"] .token.inserted {
    color: #a5d6ff;
    /* Light Blue */
}

[data-theme="dark"] .token.operator,
[data-theme="dark"] .token.entity,
[data-theme="dark"] .token.url,
[data-theme="dark"] .language-css .token.string,
[data-theme="dark"] .style .token.string {
    color: #79c0ff;
    /* Blue */
    background: rgba(56, 139, 253, 0.1);
    /* Slight background */
}

[data-theme="dark"] .token.atrule,
[data-theme="dark"] .token.attr-value,
[data-theme="dark"] .token.keyword {
    color: #ff7b72;
    /* Coral - same as numbers/constants */
}

[data-theme="dark"] .token.function,
[data-theme="dark"] .token.class-name {
    color: #d2a8ff;
    /* Purple */
}

[data-theme="dark"] .token.regex,
[data-theme="dark"] .token.important,
[data-theme="dark"] .token.variable {
    color: #ffa657;
    /* Orange */
}

[data-theme="dark"] .token.important,
[data-theme="dark"] .token.bold {
    font-weight: bold;
}

[data-theme="dark"] .token.italic {
    font-style: italic;
}

[data-theme="dark"] .token.entity {
    cursor: help;
}

/* --- Other Elements in Dark Theme --- */
[data-theme="dark"] .markdown-section blockquote {
    background-color: rgba(88, 166, 255, 0.08);
    border-left: 4px solid #58a6ff;
    color: #b4bbc4;
    /* Significantly increased blockquote text contrast */
}

[data-theme="dark"] .markdown-section table thead {
    background-color: #161b22;
}

[data-theme="dark"] .markdown-section table th,
[data-theme="dark"] .markdown-section table td {
    border: 1px solid var(--code-border-color-dark, #30363d);
    padding: 0.6em 1em;
}

[data-theme="dark"] .markdown-section table th {
    font-weight: 600;
    color: #e6edf3;
}

[data-theme="dark"] .markdown-section table tr:nth-child(2n) {
    background-color: rgba(177, 186, 196, 0.04);
}

[data-theme="dark"] .markdown-section table tr:hover {
    background-color: rgba(177, 186, 196, 0.08);
}

[data-theme="dark"] .sidebar {
    background-color: var(--sidebar-background-dark, #161b22);
    border-right: 1px solid var(--code-border-color-dark, #30363d);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .sidebar ul li a {
    color: var(--sidebar-text-color-dark, #c9d1d9);
    transition: background-color 0.2s ease, color 0.2s ease;
}

[data-theme="dark"] .sidebar ul li a:hover {
    background-color: rgba(177, 186, 196, 0.08);
    color: #ffffff;
}

[data-theme="dark"] .markdown-section hr {
    border: none;
    /* Remove default border */
    border-bottom: 1px solid #21262d;
    /* Softer divider color */
    margin: 2.5em 0;
    /* Slightly more margin */
}

[data-theme="dark"] .search input {
    background-color: var(--search-background-dark, #0d1117);
    color: var(--search-text-color-dark, #c9d1d9);
    border: 1px solid var(--code-border-color-dark, #30363d);
    border-radius: 6px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="dark"] .search input:focus {
    border-color: #58a6ff;
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.3);
    outline: none;
}

[data-theme="dark"] .search .results-panel {
    border-radius: 6px;
}

[data-theme="dark"] .search .matching-post {
    border-bottom: 1px solid #30363d;
}

[data-theme="dark"] .search .matching-post:last-child {
    border-bottom: none;
}

[data-theme="dark"] a {
    color: var(--link-color-dark, #79c0ff);
    /* Brighter link color for contrast */
    transition: color 0.2s ease;
}

[data-theme="dark"] a:hover {
    color: var(--link-hover-color-dark, #9cd0ff);
    /* Brighter hover link color */
    text-decoration: underline;
}

/* RTL support in dark theme */
html[dir="rtl"] .sidebar {
    border-right: none;
    border-right: 1px solid var(--code-border-color-dark, #30363d);
}

.sidebar ul li.active>a {
    background-color: rgba(88, 166, 255, 0.1);
}

[data-theme="dark"] .sidebar ul li.active>a {
    border-left: 2px solid var(--theme-color, #58a6ff);
    border-right: none;
    background-color: rgba(88, 166, 255, 0.1);
}

html[dir="rtl"] .sidebar ul li.active>a {
    border-left: 2px solid var(--theme-color, #58a6ff);
    border-right: none;
    background-color: rgba(88, 166, 255, 0.1);
}

/* RTL support in dark theme */
html[dir="rtl"][data-theme="dark"] .sidebar {
    border-right: none;
    border-right: 1px solid var(--code-border-color-dark, #30363d);
}

html[dir="rtl"][data-theme="dark"] .sidebar ul li.active>a {
    border-left: 2px solid var(--theme-color, #58a6ff);
    border-right: none;
    background-color: rgba(88, 166, 255, 0.1);
}

/* Apply IRANSansX font for RTL content in dark theme */
html[dir="rtl"][data-theme="dark"] .markdown-section {
    font-family: "IRANSansX", "PT Sans", sans-serif;
}

/* --- CSS Variable Definitions & Consistency Check --- */

:root {
    /* Define base theme variables if not already defined by darklight plugin */
    --sidebar-width: 280px;
    --text-color: #34495e;
    --theme-color: #42b983;
    --code-border-color: rgba(0, 0, 0, 0.08);
    --code-theme-background: #f8f8f8;
    --code-header-background: #f8f8f8;
    --code-header-background-image: linear-gradient(to bottom, #ffffff, #f8f8f8);
    --code-select-background: #fff;
    --theme-color-light: rgba(66, 185, 131, 0.1);
    --font-family-persian: "IRANSansX", "PT Sans", sans-serif;
    --font-family-base: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
        "Helvetica Neue", sans-serif;
}

[data-theme="dark"] {
    /* Define dark theme variables */
    --text-color-dark: #c9d1d9;
    --code-border-color-dark: #30363d;
    --code-theme-background-dark: #0d1117;
    --code-header-background-dark: #161b22;
    --code-header-background-image-dark: none;
    --code-select-background-dark: #161b22;
    --sidebar-background-dark: #161b22;
    --sidebar-text-color-dark: #c9d1d9;
    --search-background-dark: #0d1117;
    --search-text-color-dark: #c9d1d9;
    --link-color-dark: #58a6ff;
    --link-hover-color-dark: #79c0ff;
    --theme-color-dark-light: rgba(88, 166, 255, 0.15);

    /* Override variables from darklightTheme config if needed, or use its vars */
    --docsify-darklight-accent: var(--theme-color);
    --docsify-darklight-background: #ffffff;
    --docsify-darklight-color: var(--text-color);
    --docsify-darklight-code-background: var(--code-theme-background);
    --docsify-darklight-code-color: #525252;
    --docsify-darklight-borderColor: var(--code-border-color);

    --docsify-darklight-dark-accent: var(--link-color-dark);
    --docsify-darklight-dark-background: var(--code-theme-background-dark);
    --docsify-darklight-dark-color: var(--text-color-dark);
    --docsify-darklight-dark-code-background: var(--code-theme-background-dark);
    --docsify-darklight-dark-code-color: var(--text-color-dark);
    --docsify-darklight-dark-borderColor: var(--code-border-color-dark);
}

/* ===== Persian Content Enhancements ===== */

/* Apply IRANSansX font to all Persian content elements */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] a,
html[dir="rtl"] button,
html[dir="rtl"] .btn,
html[dir="rtl"] .feature,
html[dir="rtl"] .resource,
html[dir="rtl"] .sidebar-nav,
html[dir="rtl"] .app-nav {
    font-family: var(--font-family-persian);
}

/* Ensure proper font weight for Persian headings */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 {
    font-weight: 500;
    /* Use Regular weight for headings */
}

/* Enhance Persian feature and resource boxes */
html[dir="rtl"] .feature,
html[dir="rtl"] .resource {
    font-family: var(--font-family-persian);
}

/* Apply Persian font to language switcher when in RTL mode */
html[dir="rtl"] .language-switcher-select {
    font-family: var(--font-family-persian);
}

/* ===== Additional Dark Theme Enhancements ===== */

/* Footer styling in dark mode */
[data-theme="dark"] footer {
    color: #8b949e;
    border-top: 1px solid #30363d;
    padding-top: 1em;
    margin-top: 2em;
}

/* Improve heading styles in dark mode */
[data-theme="dark"] .markdown-section h3,
[data-theme="dark"] .markdown-section h4 {
    color: #ecf2f8;
    /* Increased h3/h4 contrast */
}

[data-theme="dark"] .markdown-section h5,
[data-theme="dark"] .markdown-section h6 {
    color: #d1d9e0;
    /* Increased h5/h6 contrast */
}

/* Add subtle hover effect to headings in dark mode */
[data-theme="dark"] .markdown-section h2:hover,
[data-theme="dark"] .markdown-section h3:hover,
[data-theme="dark"] .markdown-section h4:hover {
    color: #ffffff;
}

/* Enhance code block headers in dark mode */
[data-theme="dark"] .markdown-section pre::before {
    background: #161b22;
    color: #c9d1d9;
    border-bottom: 1px solid #30363d;
}

/* Mobile view in dark mode */
@media screen and (max-device-width: 48em) {
    [data-theme="dark"] .sidebar-toggle {
        background-color: rgba(22, 27, 34, 0.8);
        border-radius: 4px;
    }

    [data-theme="dark"] .sidebar-toggle span {
        background-color: #c9d1d9;
    }

    [data-theme="dark"] .content {
        background-color: #0d1117;
    }
}

/* GitHub corner button in dark mode */
[data-theme="dark"] .github-corner svg {
    fill: #58a6ff;
    color: #0d1117;
}

[data-theme="dark"] .github-corner:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
}

/* Search results highlights in dark mode */
[data-theme="dark"] .search .matching-post h2 {
    color: #e6edf3;
    border-bottom: none;
}

[data-theme="dark"] .search .matching-post p {
    color: #8b949e;
}

[data-theme="dark"] .search .matching-post em {
    color: #58a6ff;
    font-style: normal;
    font-weight: bold;
}

/* Improve sidebar toggle in dark mode */
[data-theme="dark"] .sidebar-toggle {
    border: unset;
    background-color: transparent;
}

[data-theme="dark"] .sidebar-toggle:hover {
    border: unset;
    background-color: #1f2937;
}

/* Add subtle box shadows to elements in dark mode for depth */
[data-theme="dark"] .markdown-section blockquote,
[data-theme="dark"] .markdown-section .warn {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.content {
    left: var(--sidebar-width);
}

/* Add smooth transitions for theme switching */
.markdown-section,
.sidebar,
.markdown-section pre,
.markdown-section code,
.markdown-section a,
.sidebar ul li a,
.markdown-section blockquote,
.markdown-section table,
button,
.btn,
.docsify-copy-code-button {
    transition: all 0.3s ease;
}

/* ===== Model Card Styling ===== */

.model-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
    /* Responsive grid */
    gap: 0.5rem;
    /* Spacing between cards */
    padding: 0.25rem 0;
    /* Padding around the container */
}

.model-card {
    width: auto;
    overflow-y: auto;
    min-width: 20rem;
    background-color: #ffffff;
    /* Light background */
    border: 1px solid #e1e4e8;
    /* Subtle border */
    border-radius: 8px;
    /* Rounded corners */
    padding: 0.5rem;
    /* Internal padding */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    /* Soft shadow */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    /* Hover effect */
    display: flex;
    /* Use flexbox for internal layout */
    flex-direction: column;
    /* Stack elements vertically */
    height: 100%;
    /* Make cards in a row equal height (helped by grid) */
}

.model-card:hover {
    transform: translateY(-1px);
    /* Slight lift on hover */
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12);
    /* Enhanced shadow on hover */
}

.model-card h3 {
    font-size: 1.15em;
    /* Slightly larger heading */
    margin-top: 0;
    margin-bottom: 0.8em;
    color: #24292e;
    /* Darker heading color */
    border-bottom: 1px solid #eaecef;
    /* Separator line */
    padding-bottom: 0.4em;
    word-break: break-all;
    /* Prevent long model IDs from overflowing */
}

/* Styles for the new div-based details list */
.model-details-list {
    font-size: 0.88em;
    line-height: 1.6;
    flex-grow: 1;
    display: grid;
    /* Use grid for the list itself */
    grid-template-columns: auto 1fr;
    /* Key column auto, Value column takes rest */
    gap: 0.25em 0;
    /* Row gap, Column gap */
    align-items: baseline;
    /* Align baselines of key and value */
}

.detail-item {
    display: contents;
    /* Make the item's children part of the parent grid */
}

.detail-key {
    font-weight: 500;
    color: #4a5568;
    grid-column: 1;
    text-align: start;
    width: 12rem;
    white-space: nowrap;
}

.detail-value {
    grid-column: 2;
    color: #2d3748;
    word-wrap: break-word;
    /* Allow long values to wrap */
    text-align: end;
}

/* Remove the now-unused dl/dt/dd styles if they exist elsewhere */
/* (Keeping the dark mode overrides below for now, will adjust them) */

/* --- Dark Theme Model Card --- */
[data-theme="dark"] .model-card {
    background-color: #161b22;
    /* Dark background */
    border-color: #30363d;
    /* Darker border */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    /* Darker shadow */
    color: #c9d1d9;
    /* Lighter base text */
}

[data-theme="dark"] .model-card:hover {
    border-color: #58a6ff;
    /* Highlight border on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    /* Enhanced dark shadow */
}

[data-theme="dark"] .model-card h3 {
    color: #e6edf3;
    /* Lighter heading */
    border-bottom-color: #30363d;
}

/* Dark mode adjustments for new structure */
[data-theme="dark"] .detail-key {
    color: #a0aec0;
}

[data-theme="dark"] .detail-value {
    color: #e2e8f0;
}

/* --- Feature Icons (Using Mask for Color Control) --- */
.detail-value.feature-supported,
.detail-value.feature-not-supported {
    display: inline-flex;
    /* Align icon and text */
    align-items: center;
    gap: 0.4em;
    /* Space between icon and text */
}

.detail-value.feature-supported::before,
.detail-value.feature-not-supported::before {
    content: "";
    display: inline-block;
    width: 1em;
    /* Adjust size as needed */
    height: 1em;
    /* Adjust size as needed */
    background-color: currentColor;
    /* Use text color for the icon */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: text-bottom;
    /* Align icon better with text */
}

/* Checkmark Icon */
.detail-value.feature-supported::before {
    background-color: #34d399;
    /* Green for supported */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Cross Icon */
.detail-value.feature-not-supported::before {
    background-color: #f87171;
    /* Red for not supported */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Dark mode icon colors (optional, if you want different shades) */
[data-theme="dark"] .feature {
    background-color: #0e2233;
}

/* Dark mode icon colors (optional, if you want different shades) */
[data-theme="dark"] .resource {
    background-color: #0e2233;
}

/* Dark mode icon colors (optional, if you want different shades) */
[data-theme="dark"] .detail-value.feature-supported::before {
    background-color: #4ade80;
    /* Brighter green */
}

[data-theme="dark"] .detail-value.feature-not-supported::before {
    background-color: #fca5a5;
    /* Lighter red */
}

/* Model search container */
.model-search {
    margin-bottom: 2rem;
    display: flex;
    gap: 1rem;
}

/* Form elements in search */
.model-search input,
.model-search select {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.model-search input {
    flex-grow: 1;
}

/* Card headings */
.model-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
}

/* Detail items */
.detail-item {
    display: contents;
}

/* Feature support indicators */
.detail-value.feature-supported,
.detail-value.feature-not-supported {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    justify-content: end;
}

/* Common styles for indicator icons */
.detail-value.feature-supported::before,
.detail-value.feature-not-supported::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: text-bottom;
}

/* Supported feature icon */
.detail-value.feature-supported::before {
    background-color: #34d399;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Not supported feature icon */
.detail-value.feature-not-supported::before {
    background-color: #f87171;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Dark theme styles */
[data-theme="dark"] .model-card {
    border-color: #30363d;
    background-color: #161b22;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .model-card h3 {
    border-bottom-color: #30363d;
    color: #e6edf3;
}

[data-theme="dark"] .detail-value.feature-supported::before {
    background-color: #4ade80;
}

[data-theme="dark"] .detail-value.feature-not-supported::before {
    background-color: #fca5a5;
}

[data-theme="dark"] .model-search input,
[data-theme="dark"] .model-search select {
    background-color: #161b22;
    border-color: #30363d;
    color: #c9d1d9;
}

/* Link with ellipsis */
.link-ellipsis {
    display: inline-block;
    max-width: 6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    direction: ltr;
    text-align: right;
    color: var(--link-color, #0366d6);
}

[data-theme="dark"] .link-ellipsis {
    color: var(--link-color, #58a6ff);
}

/* --- Dark Mode Heading Anchor Styling --- */
/* Make anchor link inherit heading color */
[data-theme="dark"] h1 .anchor,
[data-theme="dark"] h2 .anchor,
[data-theme="dark"] h3 .anchor,
[data-theme="dark"] h4 .anchor,
[data-theme="dark"] h5 .anchor,
[data-theme="dark"] h6 .anchor {
    color: inherit;
    text-decoration: none;
    /* Remove default underline */
}

/* Add subtle hover effect to the text span within the anchor */
[data-theme="dark"] h1 .anchor:hover span,
[data-theme="dark"] h2 .anchor:hover span,
[data-theme="dark"] h3 .anchor:hover span,
[data-theme="dark"] h4 .anchor:hover span,
[data-theme="dark"] h5 .anchor:hover span,
[data-theme="dark"] h6 .anchor:hover span {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/* Prevent underline on the anchor link itself during hover */
[data-theme="dark"] h1 .anchor:hover,
[data-theme="dark"] h2 .anchor:hover,
[data-theme="dark"] h3 .anchor:hover,
[data-theme="dark"] h4 .anchor:hover,
[data-theme="dark"] h5 .anchor:hover,
[data-theme="dark"] h6 .anchor:hover {
    text-decoration: none;
}

html[dir="rtl"] .markdown-section p.tip {
    border-bottom-right-radius: unset;
    border-bottom-left-radius: 2px;
    border-left: unset;
    border-right: 4px solid #f66;
    border-top-right-radius: 2px;
    border-top-left-radius: unset;
    margin: 2em 0;
    padding: 12px 24px 12px 30px;
    position: relative;
}

html[dir="rtl"] .markdown-section p.tip:before {
    left: unset;
    right: -12px;
    top: 14px;
}

.datetime-ltr {
    direction: ltr !important;
}

.model-search input,
.model-search select {
    font-family: inherit;
}

/* ===== Sidebar Pin Button Styles for Mobile ===== */
/*
 * The sidebar-pin button is created by docsify-sidebar-collapse.min.js
 * It provides a way to toggle the sidebar visibility on mobile devices
 * The original plugin styles are minimal and cause visibility issues
 */

/* Base sidebar-pin styles (mobile only - hidden on desktop) */
.sidebar-pin {
    display: none;
    /* Hidden by default on desktop */

}

/* Mobile-specific sidebar-pin styles */
@media screen and (max-width: 768px) {
    .sidebar-pin {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        outline: none;
        position: fixed;
        z-index: 9990;
        /* High z-index to ensure visibility above content but below page-options overlay (9998) */
        border: none !important;
        cursor: pointer;
        
        /* Positioning - bottom left corner for LTR */
        bottom: 20px;
        left: 20px;
        right: auto;

        /* Size - larger touch target for mobile (minimum 44x44 for iOS accessibility) */
        width: 52px;
        height: 52px;
        min-width: 52px;
        min-height: 52px;
        
        /* CRITICAL: Ensure button is clickable on all devices */
        pointer-events: auto !important;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        /* Light theme: Clean white button */
        background-color: #ffffff;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);

        /* Display the button - use block as fallback for older browsers */
        display: block !important;
        /* Flexbox centering with fallback */
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;

        /* Transition for smooth interactions */
        -webkit-transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;

        /* Ensure proper touch handling on modern browsers */
        touch-action: manipulation;
        /* Keep some tap highlight for visual feedback on older devices */
        -webkit-tap-highlight-color: rgba(66, 185, 131, 0.3);
    }

    /* Light theme: Icon with green color */
    .sidebar-pin::before {
        content: "";
        display: block;
        width: 22px;
        height: 18px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2342b983' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        /* CRITICAL: Pseudo-element should not intercept clicks */
        pointer-events: none;
    }

    /* Light theme: Close icon when sidebar open (body has sidebar-open AND not close) */
    body.sidebar-open:not(.close) .sidebar-pin::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2342b983' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    }

    /* Light theme: Hover */
    .sidebar-pin:hover {
        transform: scale(1.05);
        background-color: #f8faf9;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 6px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(66, 185, 131, 0.2);
    }

    /* Light theme: Active */
    .sidebar-pin:active {
        transform: scale(0.95);
        background-color: #f0f4f2;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    /* Light theme: Focus */
    .sidebar-pin:focus {
        outline: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(66, 185, 131, 0.4);
    }

    /* RTL positioning */
    html[dir="rtl"] .sidebar-pin {
        left: auto;
        right: 20px;
        background-color: #ffffff;
    }

    html[dir="ltr"] .sidebar-pin {

        background-color: #ffffff;
    }


    /* Dark theme: Base */
    [data-theme="dark"] .sidebar-pin {
        background-color: #21262d;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08);
    }

    /* Dark theme: Icon with blue color */
    [data-theme="dark"] .sidebar-pin::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358a6ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E");
    }

    /* Dark theme: Close icon when sidebar open (body has sidebar-open AND not close) */
    [data-theme="dark"] body.sidebar-open:not(.close) .sidebar-pin::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358a6ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    }

    /* Dark theme: Hover */
    [data-theme="dark"] .sidebar-pin:hover {
        background-color: #30363d;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(88, 166, 255, 0.3);
    }

    /* Dark theme: Active */
    [data-theme="dark"] .sidebar-pin:active {
        background-color: #161b22;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    /* Dark theme: Focus */
    [data-theme="dark"] .sidebar-pin:focus {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(88, 166, 255, 0.5);
    }

    /* IMPORTANT: Hide default Docsify sidebar-toggle on mobile since we use sidebar-pin */
    .sidebar-toggle {
        display: none !important;
    }
}

/* Very small screens - adjust positioning to avoid edge overlap */
@media screen and (max-width: 375px) {
    .sidebar-pin {
        bottom: 15px;
        left: 15px;
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }

    .sidebar-pin::before {
        width: 20px;
        height: 16px;
    }

    html[dir="rtl"] .sidebar-pin {
        left: auto;
        right: 15px;
    }
}

/* Landscape orientation on mobile - position higher to avoid gesture conflicts */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .sidebar-pin {
        bottom: 15px;
    }
}

/* iOS safe area support for devices with notch/home indicator */
@supports (padding: env(safe-area-inset-bottom)) {
    @media screen and (max-width: 768px) {
        .sidebar-pin {
            bottom: calc(20px + env(safe-area-inset-bottom, 0px));
            left: calc(20px + env(safe-area-inset-left, 0px));
        }

        html[dir="rtl"] .sidebar-pin {
            left: auto;
            right: calc(20px + env(safe-area-inset-right, 0px));
        }
    }

    @media screen and (max-width: 375px) {
        .sidebar-pin {
            bottom: calc(15px + env(safe-area-inset-bottom, 0px));
            left: calc(15px + env(safe-area-inset-left, 0px));
        }

        html[dir="rtl"] .sidebar-pin {
            left: auto;
            right: calc(15px + env(safe-area-inset-right, 0px));
        }
    }
}

/* Ensure sidebar-pin doesn't overlap with footer or other fixed elements */
@media screen and (max-width: 768px) {

    /* When scrolled to bottom, move button up a bit to not overlap footer */
    .footer~.sidebar-pin,
    footer~.sidebar-pin {
        bottom: 80px;
    }
}

/* Accessibility: Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .sidebar-pin {
        transition: none;
    }
}



/* ===== Sidebar Pin Button Optimized Styles for Mobile ===== */
/* Replaces the minimal plugin styles with comprehensive light/dark theme support */

.sidebar-pin {
    display: none;
}

@media screen and (max-width: 768px) {

    /* Light Theme Base */
    .sidebar-pin {
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        position: fixed;
        z-index: 100;
        border: none;
        cursor: pointer;
        bottom: 20px !important;
        left: 20px;
        width: 52px;
        height: 52px;
        min-width: 52px;
        min-height: 52px;
        background-color: #ffffff;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
        display: flex !important;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Light Theme Icon */
    .sidebar-pin::before {
        content: "";
        display: block;
        width: 22px;
        height: 18px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2342b983' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    /* Light theme: Close icon when sidebar open (body has sidebar-open AND not close) */
    body.sidebar-open:not(.close) .sidebar-pin::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2342b983' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    }

    .sidebar-pin:hover {
        transform: scale(1.05);
        background-color: #f8faf9;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 6px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(66, 185, 131, 0.2);
    }

    .sidebar-pin:active {
        transform: scale(0.95);
        background-color: #f0f4f2;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .sidebar-pin:focus {
        outline: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(66, 185, 131, 0.4);
    }

    /* RTL Support */
    html[dir="rtl"] .sidebar-pin {
        left: auto;
        right: 20px;
    }

    /* Dark Theme */
    [data-theme="dark"] .sidebar-pin {
        background-color: #21262d;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08);
    }
    html[dir="rtl"][data-theme="dark"] .sidebar-pin {
        background-color: #21262d;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08);
    }
    html[dir="ltr"][data-theme="dark"] .sidebar-pin {
        background-color: #21262d;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08);
    }
    [data-theme="dark"] .sidebar-pin::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358a6ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E");
    }

    /* Dark theme: Close icon when sidebar open (body has sidebar-open AND not close) */
    [data-theme="dark"] body.sidebar-open:not(.close) .sidebar-pin::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358a6ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    }

    [data-theme="dark"] .sidebar-pin:hover {
        background-color: #30363d;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(88, 166, 255, 0.3);
    }

    [data-theme="dark"] .sidebar-pin:active {
        background-color: #161b22;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    [data-theme="dark"] .sidebar-pin:focus {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(88, 166, 255, 0.5);
    }
}

/* Small Screens */
@media screen and (max-width: 375px) {
    .sidebar-pin {
        bottom: 15px;
        left: 15px;
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }

    .sidebar-pin::before {
        width: 20px;
        height: 16px;
    }

    html[dir="rtl"] .sidebar-pin {
        left: auto;
        right: 15px;
    }
}

/* Landscape */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .sidebar-pin {
        bottom: 12px;
    }
}

/* iOS Safe Area */
@supports (padding: env(safe-area-inset-bottom)) {
    @media screen and (max-width: 768px) {
        .sidebar-pin {
            bottom: calc(20px + env(safe-area-inset-bottom, 0px));
            left: calc(20px + env(safe-area-inset-left, 0px));
        }

        html[dir="rtl"] .sidebar-pin {
            left: auto;
            right: calc(20px + env(safe-area-inset-right, 0px));
        }
    }

    @media screen and (max-width: 375px) {
        .sidebar-pin {
            bottom: calc(15px + env(safe-area-inset-bottom, 0px));
            left: calc(15px + env(safe-area-inset-left, 0px));
        }

        html[dir="rtl"] .sidebar-pin {
            left: auto;
            right: calc(15px + env(safe-area-inset-right, 0px));
        }
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .sidebar-pin {
        transition: none !important;
    }
}