:root {
     --bg-main: #0c0d0e;
     --bg-surface: #131517;
     --bg-bubble-user: #191c1f;
     --bg-bubble-ai: transparent;
     --text-primary: #e6edf3;
     --text-secondary: #8b949e;
     --accent: #58a6ff;
     --border-color: #21262d;
     --code-bg: #161b22;
     --font-farsi: 'Vazirmatn', sans-serif;
     --sidebar-width: 240px;
     --sidebar-collapsed-width: 0px;
 }

 * {
     scrollbar-width: thin;
     scrollbar-color: var(--border-color) transparent;
 }

 *::-webkit-scrollbar {
     width: 8px;
     height: 8px;
 }

 *::-webkit-scrollbar-thumb {
     background-color: var(--border-color);
     border-radius: 4px;
     border: 2px solid var(--bg-main);
 }

 *::-webkit-scrollbar-thumb:hover {
     background-color: var(--accent);
 }

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

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     -webkit-tap-highlight-color: transparent;
 }

 body {
     background-color: var(--bg-main);
     color: var(--text-primary);
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     height: 100dvh;
     display: flex;
     flex-direction: column;
     overflow: hidden;
 }

 hr {
     margin-block: 0.6rem;
 }

 /* ===========================
         SIDEBAR – minimal, modern, same bg
         =========================== */
 .app-layout {
     display: flex;
     height: 100dvh;
     width: 100%;
     overflow: hidden;
 }

 .sidebar {
     width: var(--sidebar-width);
     flex-shrink: 0;
     background-color: var(--bg-main);
     display: flex;
     flex-direction: column;
     height: 100dvh;
     overflow-y: auto;
     padding: 16px 12px;
     transition: transform 0.25s ease;
     z-index: 20;
     /* no borders, no outlines – minimal */
 }



 .sidebar-nav {
     display: flex;
     flex-direction: column;
     gap: 2px;
     flex: 1;
 }

 .sidebar-nav a,
 .sidebar-nav button {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px 12px;
     border-radius: 8px;
     color: var(--text-secondary);
     background: transparent;
     border: none;
     font-family: 'Inter', sans-serif;
     font-size: 14px;
     font-weight: 400;
     text-decoration: none;
     cursor: pointer;
     transition: color 0.15s, background 0.15s;
     text-align: left;
     width: 100%;
     line-height: 1;
 }

 .sidebar-nav a:hover,
 .sidebar-nav button:hover {
     color: var(--text-primary);
     background: var(--bg-surface);
 }

 .sidebar-nav a span,
 .sidebar-nav button span {
     font-size: 20px;

 }

 .sidebar-nav .new-chat {
     margin-top: -8px;
     font-weight: 500;
     color: var(--text-primary);
 }

 .sidebar-nav .new-chat span {}

 .sidebar-footer {
     margin-top: auto;
     padding-top: 16px;
     display: flex;
     flex-direction: column;
     gap: 2px;
 }

 .sidebar-footer a {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px 12px;
     border-radius: 8px;
     color: var(--text-secondary);
     text-decoration: none;
     font-size: 14px;
     font-weight: 400;
     transition: color 0.15s, background 0.15s;
 }

 .sidebar-footer a:hover {
     color: var(--text-primary);
     background: var(--bg-surface);
 }

 .sidebar-footer a span {
     font-size: 18px;
 }

 /* sidebar overlay for mobile */
 .sidebar-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.4);
     z-index: 19;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.25s ease;
 }

 .sidebar-overlay.active {
     opacity: 1;
     pointer-events: auto;
 }

 /* main content area */
 .main-content {
     flex: 1;
     display: flex;
     flex-direction: column;
     min-width: 0;
     /* prevent overflow */
     height: 100dvh;
     overflow: hidden;
 }

 /* Header */
 header {
     height: 52px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 16px;
     background: var(--bg-main);
     z-index: 10;
 }



 .hamburger {
     background: transparent;
     border: none;
     color: var(--text-secondary);
     cursor: pointer;
     padding: 6px;
     border-radius: 4px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: color 0.15s, background 0.15s;
 }

 .hamburger:hover {
     color: var(--text-primary);
     background: var(--bg-surface);
 }

 .brand {
     font-family: 'JetBrains Mono', monospace;
     font-size: 14px;
     font-weight: 500;
     color: var(--text-primary);
     display: flex;
     align-items: center;
     gap: 8px;
     text-decoration: none;
 }

 .brand img {
     width: 24px;
     height: 24px;
     object-fit: contain;
     display: block;
 }

 .header-actions {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .btn-icon {
     background: transparent;
     border: none;
     color: var(--text-secondary);
     cursor: pointer;
     padding: 6px;
     border-radius: 4px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: color 0.15s, background 0.15s;
 }

 .btn-icon:hover {
     color: var(--text-primary);
     background: var(--bg-surface);
 }

 #shareBtn {
     display: none;
 }

 /* Chat Container */
 #chatFlow {
     flex: 1;
     overflow-y: auto;
     padding: 24px 16px;
     display: flex;
     flex-direction: column;
     gap: 24px;
     width: 100%;
     margin: 0 auto;
     scroll-behavior: smooth;
 }

 #chatFlow>* {
     max-width: 800px;
     margin-inline: auto;
 }

 .hljs {
     background-color: transparent;
 }

 /* Scroll Down Button */
 #scrollDownBtn {
     position: fixed;
     bottom: 100px;
     /* Desktop: center relative to .main-content */
     left: calc(240px + (100vw - 240px) / 2);
     transform: translateX(-50%);
     background: var(--code-bg);
     color: var(--text-primary);
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     z-index: 99;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
     transition: opacity 0.2s ease;
     opacity: 0;
     pointer-events: none;
 }

 #scrollDownBtn.visible {
     opacity: 1;
     pointer-events: auto;
 }

 @media (max-width: 768px) {
     #scrollDownBtn {
         left: auto;
         right: 20px;
         transform: translateX(0);
     }
 }


 .msg-wrapper {
     display: flex;
     flex-direction: column;
     gap: 6px;
     width: 100%;
 }

 .msg-wrapper.user {
     align-items: flex-end;
 }

 .msg-wrapper.assistant {
     align-items: flex-start;
 }

 .msg-role-tag {
     font-family: 'JetBrains Mono', monospace;
     font-size: 11px;
     color: var(--text-secondary);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .msg-box {
     padding: 12px 16px;
     border-radius: 24px;
     max-width: 90%;
     font-size: 14.5px;
     line-height: 1.6;
     word-break: break-word;
     /* RTL auto-detection */
     text-align: start;
 }

 /* Farsi/Arabic text in message boxes */
 .msg-box[dir="rtl"] {
     font-family: var(--font-farsi);
     direction: rtl;
     unicode-bidi: plaintext;
 }

 /* Farsi/Arabic in blockquotes, lists, paragraphs inside msg-box */
 .msg-box[dir="rtl"] p,
 .msg-box[dir="rtl"] li,
 .msg-box[dir="rtl"] blockquote,
 .msg-box[dir="rtl"] h1,
 .msg-box[dir="rtl"] h2,
 .msg-box[dir="rtl"] h3,
 .msg-box[dir="rtl"] h4,
 .msg-box[dir="rtl"] h5,
 .msg-box[dir="rtl"] h6,
 .msg-box[dir="rtl"] td,
 .msg-box[dir="rtl"] th,
 .msg-box[dir="rtl"] summary,
 .msg-box[dir="rtl"] footer {
     font-family: var(--font-farsi);
 }

 /* Force code blocks and inline code to always be LTR */
 .msg-box pre,
 .msg-box code:not(pre code),
 .msg-box pre code {
     direction: ltr !important;
     text-align: left !important;
     unicode-bidi: embed !important;
 }

 .msg-wrapper.user .msg-box {
     background-color: var(--bg-bubble-user);
     color: #f0f6fc;
     border: 1px solid var(--border-color);
     border-top-right-radius: 2px;
     white-space: pre-wrap;
 }

 .msg-wrapper.assistant .msg-box {
     background-color: var(--bg-bubble-ai);
     color: var(--text-primary);
     max-width: 100%;
     padding-left: 0;
     padding-right: 0;
 }

 .msg-actions {
     display: flex;
     gap: 6px;
     margin-top: 2px;
 }

 .action-chip {
     background: transparent;
     border: none;
     color: var(--text-secondary);
     cursor: pointer;
     padding: 2px 6px;
     font-size: 12px;
     display: flex;
     align-items: center;
     gap: 4px;
     border-radius: 4px;
     font-family: 'JetBrains Mono', monospace;
 }

 .action-chip:hover {
     color: var(--text-primary);
     background: var(--bg-surface);
 }

 .action-chip span {
     font-size: 14px;
 }

 /* Markdown & Code Styles */
 .msg-box p {
     margin-bottom: 0.8em;
 }

 .msg-box p:last-child {
     margin-bottom: 0;
 }

 .msg-box pre {
     position: relative;
     background-color: var(--code-bg) !important;
     padding: 0;
     /* Reset padding, we'll add it to pre and code */
     border-radius: 8px;
     overflow-x: auto;
     margin: 10px 0;
     font-family: 'JetBrains Mono', monospace;
     font-size: 13px;
     border: 1px solid var(--border-color);
     direction: ltr !important;
     unicode-bidi: embed !important;
 }

 /* Apply padding to pre code for consistent spacing */
 .msg-box pre code {
     display: block;
     padding: 16px !important;
     background-color: var(--code-bg) !important;
     direction: ltr !important;
     text-align: left !important;
     unicode-bidi: embed !important;
     max-height: 600px;
 }

 /* Code Header (Badge + Copy) */
 .code-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 8px 12px;
     background: var(--bg-surface);
     border-bottom: 1px solid var(--border-color);
     font-family: 'Inter', sans-serif;
     font-size: 11px;
     color: var(--text-secondary);
     text-transform: uppercase;
     direction: ltr !important;
     unicode-bidi: embed !important;
 }

 .code-copy-btn {
     background: transparent;
     border: none;
     color: var(--text-secondary);
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 4px;
     font-size: 11px;
     transition: color 0.2s;
 }

 .code-copy-btn:hover {
     color: var(--text-primary);
 }

 .msg-box code:not(pre code) {
     background: var(--code-bg);
     padding: 2px 5px;
     border-radius: 4px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 13px;
 }

 .msg-box table {
     border-collapse: collapse;
     width: 100%;
     margin: 12px 0;
     font-size: 13.5px;
 }

 .msg-box th,
 .msg-box td {
     border: 1px solid var(--border-color);
     padding: 8px 12px;
     text-align: left;
 }

 .msg-box th {
     background: var(--bg-surface);
 }

 .msg-box blockquote {
     border-left: 3px solid var(--border-color);
     padding-left: 12px;
     color: var(--text-secondary);
     margin: 8px 0;
 }

 /* Loader indicator */
 .loader {
     width: 18px;
     height: 18px;
     border: 3px solid var(--border-color);
     border-top-color: var(--text-secondary);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
     margin: 4px 0;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 /* Input Area */
 footer {
     background: var(--bg-main);
     padding: 12px 16px 20px;
     z-index: 10;
 }

 .input-wrapper {
     max-width: 800px;
     margin: 0 auto;
     background: var(--bg-surface);
     border: 1px solid var(--border-color);
     border-radius: 24px;
     display: flex;
     flex-direction: column;
     padding: 1rem;
     gap: 1rem;
     transition: border-color 0.2s ease;
 }

 ul li,
 ol li {
     margin-inline: 1rem;
 }

 /* ── refined textarea: no focus border, just a beautiful cursor ── */
 textarea {
     /*   flex: 1; */
     background: transparent;
     border: none;
     color: var(--text-primary);
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     font-size: 15px;
     font-weight: 400;
     resize: none;
     height: 24px;
     max-height: 160px;
     line-height: 24px;
     outline: none;
     caret-color: var(--text-secondery);
     caret-shape: block;
     /* future standard — already supported in many browsers */
     letter-spacing: 0.01em;
     /* RTL support for input */
     text-align: start;
 }

 /* Farsi input support */
 textarea:lang(fa),
 textarea[dir="rtl"] {
     font-family: var(--font-farsi);
 }

 /* subtle text-shadow to optically fatten the caret (cross-browser trick) */
 textarea:focus {
     text-shadow: 0 0 0.5px var(--accent);
 }

 /* placeholder – crisp, subtle, professional */
 textarea::placeholder {
     color: var(--text-primary);
     font-weight: 400;
     font-size: 15px;
     letter-spacing: 0.01em;
     opacity: 0.7;
     transition: opacity 0.2s ease;
 }

 textarea:focus::placeholder {
     opacity: 0.4;
 }

 /* remove any possible leftover focus ring on the wrapper */
 .input-wrapper:focus-within {
     outline: none;
     box-shadow: none;
     border-color: var(--border-color);
     /* stays the same – no visible change on focus */
 }

 #sendBtn {
     background: var(--text-primary);
     color: var(--bg-main);
     border: none;
     border-radius: 50px;
     width: 36px;
     height: 36px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: opacity 0.15s;
     flex-shrink: 0;
 }

 .sendbtncont {
     display: flex;
     justify-content: right;
 }

 #sendBtn:disabled {
     opacity: 0.3;
     cursor: not-allowed;
 }

 #toast {
     position: fixed;
     bottom: 80px;
     left: 50%;
     transform: translateX(-50%);
     background: #21262d;
     border: 1px solid #30363d;
     color: #fff;
     padding: 8px 16px;
     font-size: 13px;
     font-family: 'JetBrains Mono', monospace;
     border-radius: 4px;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s ease;
     z-index: 100;
 }

 #toast.show {
     opacity: 1;
 }

 /* Responsive: always show sidebar on desktop, overlay on mobile */
 @media (max-width: 768px) {
     .sidebar {
         position: fixed;
         left: 0;
         top: 0;
         transform: translateX(-100%);
         width: var(--sidebar-width);
         box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4);
         background: var(--bg-main);
     }

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


 }

 @media (min-width: 769px) {
     .sidebar-overlay {
         display: none !important;
     }

     .hamburger {
         display: none !important;
     }

     .sidebar {
         transform: translateX(0) !important;
         position: relative !important;
         box-shadow: none !important;
     }
 }

 @media (max-width: 600px) {
     #chatFlow {
         padding: 16px 12px;
         gap: 18px;
     }

     .msg-box {
         font-size: 14px;
     }

     #scrollDownBtn {
         transform: translateX(0);
         right: 20px;
     }

     /* Mobile fix */
 }


 @media (max-width: 768px) {
     header>* {
         flex: 1;
     }

     .hamburger {
         justify-content: left;
         padding: 0;
     }

     .brand {
         justify-content: center;
     }

     .header-actions {
         justify-content: right;
     }

     .btn-icon {
         padding: 0;
     }
 }