/* ==========================================================================
   Base: reset, document defaults, typography and shared primitives.
   Direction-aware throughout by using logical properties, so one
   stylesheet serves both Persian and English.
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-background);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body[dir="rtl"],
[dir="rtl"] body {
    font-family: var(--font-persian);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
}

h1 { font-size: var(--text-xl); letter-spacing: -0.01em; }
h2 { font-size: var(--text-lg); letter-spacing: -0.005em; }
h3 { font-size: var(--text-md); }
h4 { font-size: var(--text-base); }

p {
    margin: 0;
}

a {
    color: var(--color-text-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* An underline belongs on a link in a sentence, never on something shaped
   like a button. Anchors are used for both here, so the control shapes opt
   out by name rather than each one remembering to. */
a.btn:hover,
a.menu-item:hover,
a.nav-item:hover,
a.tab:hover,
a.chip:hover,
a.card:hover,
a[class*="-brand"]:hover {
    text-decoration: none;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img, svg, video {
    max-width: 100%;
    display: block;
}

/* Icons carry a viewBox and no dimensions, so without a size they stretch
   to fill whatever box they land in. Every component that wants a
   different size sets one and wins on specificity; this is only the floor,
   so a newly placed icon can never swallow its row. The sprite is exempt:
   its inline display:none beats any stylesheet. */
svg[viewBox="0 0 20 20"] {
    width: 16px;
    height: 16px;
    flex: none;
}

button {
    font: inherit;
    color: inherit;
}

input, textarea, select {
    font: inherit;
    color: inherit;
}

code, pre, kbd {
    font-family: var(--font-mono);
    font-size: 0.92em;
}

hr {
    border: 0;
    border-block-start: 1px solid var(--color-border);
    margin: var(--space-4) 0;
}

/* --- Focus -----------------------------------------------------------------
   Visible for keyboard users, quiet for pointer users. Never removed. */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* --- Scrollbars -----------------------------------------------------------
   Applied to everything that scrolls, not only to the named regions. A
   table that overflows, a dialog body and a long textarea are all scroll
   areas as far as the reader is concerned, and a default system scrollbar
   sitting beside a styled one is the kind of detail that makes an
   interface look assembled from parts. Anything that wants no scrollbar
   at all opts out with scrollbar-width: none, which still wins. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary);
    background-clip: content-box;
}

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

.scroll-area {
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* --- Text helpers --------------------------------------------------------- */
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }

.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clamp-1,
.clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }

.numeric {
    font-variant-numeric: tabular-nums;
}

/* Mixed Persian and Latin text inside one message reads correctly when the
   paragraph resolves direction from its first strong character. */
.bidi-auto {
    unicode-bidi: plaintext;
    text-align: start;
}

/* --- Layout helpers ------------------------------------------------------- */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.flex-1 { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }

.hidden { display: none !important; }

/* Available to assistive technology, invisible on screen. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    inset-inline-start: var(--space-3);
    inset-block-start: -100px;
    z-index: var(--z-toast);
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    transition: inset-block-start var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
    inset-block-start: var(--space-3);
    text-decoration: none;
}

/* --- Motion preferences --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .app-sidebar,
    .app-topbar,
    .composer,
    .btn {
        display: none !important;
    }
}