/* ========================================================================
   OYNFRM Çeviri Merkezi — Bootstrap 5.3 theme override
   Palette: Crowdin blue (primary) + warm orange (secondary) + emerald accent
   Notes:
     - This file is loaded AFTER Bootstrap and AFTER legacy style.css.
     - It only acts on Bootstrap CSS variables + a small set of new
       gaming-themed component utilities (.kpi-card, .glow, .gradient-text).
     - Legacy panels keep working untouched.
   ====================================================================== */

:root,
:root[data-bs-theme="light"] {
    --bs-primary: #5865F2;
    --bs-primary-rgb: 88, 101, 242;
    --bs-secondary: #EB459E;
    --bs-secondary-rgb: 235, 69, 158;
    --bs-success: #23A55A;
    --bs-success-rgb: 35, 165, 90;
    --bs-info: #00D9FF;
    --bs-info-rgb: 0, 217, 255;
    --bs-warning: #F0B232;
    --bs-warning-rgb: 240, 178, 50;
    --bs-danger: #F23F42;
    --bs-danger-rgb: 242, 63, 66;

    --oynfrm-accent: #00D9FF;
    --oynfrm-accent-soft: rgba(88, 101, 242, 0.10);
    --oynfrm-gradient: linear-gradient(135deg, #5865F2 0%, #EB459E 100%);
    --oynfrm-gradient-warm: linear-gradient(135deg, #EB459E 0%, #F0B232 100%);
    --oynfrm-surface-elev: 0 10px 30px -12px rgba(88, 101, 242, 0.28);
    --oynfrm-glow-primary: 0 0 0 1px rgba(88, 101, 242, 0.40), 0 0 24px -4px rgba(88, 101, 242, 0.50);
}

:root[data-bs-theme="dark"] {
    --bs-primary: #7983F5;
    --bs-primary-rgb: 121, 131, 245;
    --bs-secondary: #F062B0;
    --bs-secondary-rgb: 240, 98, 176;
    --bs-success: #2FCF6F;
    --bs-success-rgb: 47, 207, 111;
    --bs-warning: #FFC857;
    --bs-warning-rgb: 255, 200, 87;
    --bs-danger: #FF5C5F;
    --bs-danger-rgb: 255, 92, 95;
    --bs-body-bg: #1E1F22;
    --bs-body-bg-rgb: 30, 31, 34;
    --bs-body-color: #DBDEE1;
    --bs-body-color-rgb: 219, 222, 225;
    --bs-border-color: rgba(255, 255, 255, 0.06);
    --bs-tertiary-bg: #2B2D31;
    --bs-secondary-bg: #313338;

    --oynfrm-accent: #00D9FF;
    --oynfrm-accent-soft: rgba(121, 131, 245, 0.16);
    --oynfrm-gradient: linear-gradient(135deg, #7983F5 0%, #F062B0 100%);
    --oynfrm-gradient-warm: linear-gradient(135deg, #F062B0 0%, #FFC857 100%);
    --oynfrm-surface-elev: 0 14px 40px -16px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(121, 131, 245, 0.10);
    --oynfrm-glow-primary: 0 0 0 1px rgba(121, 131, 245, 0.50), 0 0 28px -2px rgba(121, 131, 245, 0.50);
}

/* Bootstrap primary button glow */
.btn-primary {
    background-image: var(--oynfrm-gradient);
    border: none;
    box-shadow: 0 4px 14px -6px rgba(var(--bs-primary-rgb), 0.55);
    transition: transform 120ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.btn-primary:hover,
.btn-primary:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--oynfrm-glow-primary);
    filter: brightness(1.05);
}
.btn-primary:active {
    transform: translateY(0);
    filter: brightness(0.95);
}

/* Cards with subtle elevation + colored border-top accent */
.card.oynfrm-card {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg, var(--bs-body-bg));
    box-shadow: var(--oynfrm-surface-elev);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    transition: transform 160ms ease, box-shadow 200ms ease;
}
.card.oynfrm-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--oynfrm-gradient);
    opacity: 0.9;
}
.card.oynfrm-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--oynfrm-glow-primary), var(--oynfrm-surface-elev);
}
.card.oynfrm-card--warm::before { background: var(--oynfrm-gradient-warm); }
.card.oynfrm-card--flat { box-shadow: none; transform: none !important; }
.card.oynfrm-card--flat:hover { box-shadow: none; }

/* KPI display card */
.kpi-card {
    composes: card;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.1rem 1.15rem 1rem;
    border-radius: 14px;
    background: var(--bs-tertiary-bg, var(--bs-body-bg));
    border: 1px solid var(--bs-border-color);
    position: relative;
    overflow: hidden;
    box-shadow: var(--oynfrm-surface-elev);
}
.kpi-card::after {
    content: "";
    position: absolute;
    inset: -40% -20% auto auto;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle at center, var(--oynfrm-accent-soft), transparent 70%);
    pointer-events: none;
}
.kpi-card__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--bs-body-color-rgb), 0.6);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.kpi-card__value {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.1;
    background: var(--oynfrm-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.kpi-card__sub {
    font-size: 0.85rem;
    color: rgba(var(--bs-body-color-rgb), 0.72);
}
.kpi-card__icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--oynfrm-accent-soft);
    color: var(--oynfrm-accent);
    font-size: 1.1rem;
}
.kpi-card--warm .kpi-card__value { background: var(--oynfrm-gradient-warm); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi-card--warm .kpi-card__icon { background: rgba(var(--bs-secondary-rgb), 0.12); color: var(--bs-secondary); }

/* Gradient text utility */
.gradient-text {
    background: var(--oynfrm-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}
.gradient-text--warm {
    background: var(--oynfrm-gradient-warm);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Glow utility for emphasis */
.glow-primary { box-shadow: var(--oynfrm-glow-primary); }
.glow-soft { box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.18), 0 8px 22px -10px rgba(var(--bs-primary-rgb), 0.35); }

/* Progress bars with gradient fill */
.progress.oynfrm-progress {
    background: rgba(var(--bs-body-color-rgb), 0.08);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}
.progress.oynfrm-progress .progress-bar {
    background: var(--oynfrm-gradient);
    border-radius: 999px;
}
.progress.oynfrm-progress--warm .progress-bar { background: var(--oynfrm-gradient-warm); }

/* Hero banner */
.oynfrm-hero {
    background: var(--oynfrm-gradient);
    color: #fff;
    border-radius: 18px;
    padding: 1.6rem 1.8rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--oynfrm-surface-elev);
}
.oynfrm-hero::before {
    content: "";
    position: absolute;
    inset: -50% -30% auto auto;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 60%);
    pointer-events: none;
}
.oynfrm-hero h1, .oynfrm-hero h2 { color: #fff; margin: 0 0 0.4rem; }
.oynfrm-hero p { color: rgba(255, 255, 255, 0.85); margin: 0; }
.oynfrm-hero .btn { backdrop-filter: blur(8px); }

/* Activity / timeline list items */
.activity-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.activity-list__item {
    display: flex;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    background: var(--bs-tertiary-bg, transparent);
    border: 1px solid transparent;
    transition: background 150ms ease, border-color 150ms ease;
}
.activity-list__item:hover {
    background: var(--bs-secondary-bg, var(--bs-tertiary-bg));
    border-color: var(--bs-border-color);
}
.activity-list__icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--oynfrm-accent-soft);
    color: var(--oynfrm-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.activity-list__body { flex: 1; min-width: 0; }
.activity-list__title { font-weight: 600; }
.activity-list__meta { font-size: 0.8rem; color: rgba(var(--bs-body-color-rgb), 0.62); }

/* Quick links grid */
.quick-link-grid { display: grid; gap: 0.65rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.quick-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    text-decoration: none;
    transition: transform 140ms ease, border-color 160ms ease, box-shadow 200ms ease;
}
.quick-link:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--bs-primary-rgb), 0.55);
    box-shadow: 0 10px 22px -14px rgba(var(--bs-primary-rgb), 0.55);
    color: var(--bs-body-color);
}
.quick-link__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--oynfrm-accent-soft);
    color: var(--oynfrm-accent);
    font-size: 1.1rem;
}
.quick-link__title { font-weight: 600; }
.quick-link__sub { font-size: 0.78rem; color: rgba(var(--bs-body-color-rgb), 0.6); }

/* Section heading helper */
.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.85rem;
}
.section-heading h2,
.section-heading h3 { margin: 0; font-size: 1.05rem; }
.section-heading .muted { font-size: 0.82rem; }

/* Empty state */
.oynfrm-empty {
    border: 1px dashed var(--bs-border-color);
    border-radius: 12px;
    padding: 1.2rem;
    text-align: center;
    color: rgba(var(--bs-body-color-rgb), 0.65);
    background: rgba(var(--bs-body-color-rgb), 0.02);
}

/* Subtle nav badge counter */
.badge.oynfrm-badge { background: var(--oynfrm-accent-soft); color: var(--oynfrm-accent); font-weight: 600; }

/* ========================================================================
   LEGACY BRIDGE — re-skin the old style.css class system with Discord
   blurple palette, gradient accents and elevated cards, without rewriting
   any of the 40+ view files. Variables below feed both the old `--blue` /
   `--panel` / `--ink` semantic vars and the newer `--color-*` tokens.
   ====================================================================== */

:root,
:root[data-theme="light"] {
    --color-bg: #F7F8FB;
    --color-surface: #FFFFFF;
    --color-surface-strong: #FFFFFF;
    --color-surface-soft: #F2F3F5;
    --color-text: #2E3338;
    --color-muted: #5C6773;
    --color-border: #E3E5E8;
    --color-border-strong: #C7CCD1;
    --color-primary: #5865F2;
    --color-primary-hover: #4752C4;
    --color-accent: #00D9FF;
    --color-accent-soft: #E6F0FF;
    --color-success: #23A55A;
    --color-success-soft: #E6F7EE;
    --color-warning: #F0B232;
    --color-warning-soft: #FFF6E0;
    --color-danger: #F23F42;
    --color-blue-soft: #ECEEFE;
    --color-amber-soft: #FFF6E0;
    --color-purple-soft: #F5EAFA;
    --metric-success-bg: #E6F7EE;
    --metric-warning-bg: #FFF6E0;
    --metric-danger-bg: #FDECEC;
    --shadow-soft: 0 12px 32px -16px rgba(88, 101, 242, 0.22);
    --shadow-tiny: 0 1px 2px rgba(46, 51, 56, 0.06);
    --shadow-lift: 0 16px 36px -12px rgba(88, 101, 242, 0.30);
    --navy: #4752C4;
    --blue: #5865F2;
    --green: #23A55A;
    --red: #F23F42;
    --amber: #F0B232;
    --orange: #EB459E;
    --soft-blue: #ECEEFE;
    --soft-amber: #FFF6E0;
    --panel: #FFFFFF;
    --ink: #2E3338;
    --muted: #5C6773;
    --line: #E3E5E8;
    --line-strong: #C7CCD1;
    --bg: #F7F8FB;
}

:root[data-theme="dark"] {
    --color-bg: #1E1F22;
    --color-surface: #2B2D31;
    --color-surface-strong: #313338;
    --color-surface-soft: #232428;
    --color-text: #DBDEE1;
    --color-muted: #949BA4;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.16);
    --color-primary: #7983F5;
    --color-primary-hover: #5865F2;
    --color-accent: #00D9FF;
    --color-accent-soft: rgba(121, 131, 245, 0.16);
    --color-success: #2FCF6F;
    --color-success-soft: rgba(47, 207, 111, 0.14);
    --color-warning: #FFC857;
    --color-warning-soft: rgba(255, 200, 87, 0.12);
    --color-danger: #FF5C5F;
    --color-blue-soft: rgba(121, 131, 245, 0.12);
    --color-amber-soft: rgba(255, 200, 87, 0.10);
    --color-purple-soft: rgba(240, 98, 176, 0.12);
    --metric-success-bg: rgba(47, 207, 111, 0.10);
    --metric-warning-bg: rgba(255, 200, 87, 0.10);
    --metric-danger-bg: rgba(255, 92, 95, 0.10);
    --shadow-soft: 0 18px 44px -18px rgba(0, 0, 0, 0.60);
    --shadow-tiny: 0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow-lift: 0 22px 46px -16px rgba(0, 0, 0, 0.55);
    --navy: #5865F2;
    --blue: #7983F5;
    --green: #2FCF6F;
    --red: #FF5C5F;
    --amber: #FFC857;
    --orange: #F062B0;
    --soft-blue: rgba(121, 131, 245, 0.12);
    --soft-amber: rgba(255, 200, 87, 0.10);
    --panel: #2B2D31;
    --ink: #DBDEE1;
    --muted: #949BA4;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);
    --bg: #1E1F22;
}

/* Body background tracks legacy --bg + adds subtle ambient gradient on dark */
body {
    background: var(--bg);
    color: var(--ink);
}
:root[data-theme="dark"] body {
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(88, 101, 242, 0.10), transparent 60%),
        radial-gradient(900px 500px at 0% 100%, rgba(235, 69, 158, 0.06), transparent 60%),
        var(--bg);
    background-attachment: fixed;
}

/* Panels — gradient accent strip, elevated shadow, hover lift */
.panel {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
    padding: 1.1rem 1.15rem;
    overflow: hidden;
    transition: box-shadow 200ms ease, transform 160ms ease;
}
.panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--oynfrm-gradient);
    opacity: 0.85;
    pointer-events: none;
}
.panel:hover { box-shadow: var(--shadow-lift); }

/* Buttons — primary = gradient pill, others = themed outline */
.button,
button {
    border-radius: 10px;
    border: 1px solid var(--line-strong);
    background: var(--panel);
    color: var(--ink);
    transition: transform 120ms ease, box-shadow 200ms ease, filter 200ms ease, background 160ms ease, border-color 160ms ease;
    font-weight: 600;
}
.button:hover,
button:hover {
    border-color: rgba(var(--bs-primary-rgb), 0.55);
    box-shadow: 0 6px 16px -10px rgba(var(--bs-primary-rgb), 0.55);
    color: var(--ink);
}
.button.primary,
button.primary,
.nav a.active {
    background: var(--oynfrm-gradient);
    border: none;
    color: #fff;
    box-shadow: 0 6px 18px -8px rgba(var(--bs-primary-rgb), 0.55);
}
.button.primary:hover,
button.primary:hover,
.nav a.active:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: var(--oynfrm-glow-primary);
    color: #fff;
}
.button.success,
button.success { background: var(--green); border-color: var(--green); color: #fff; }
.button.danger,
button.danger { background: var(--red); border-color: var(--red); color: #fff; }
.button.warning-action,
button.warning-action {
    background: var(--soft-amber);
    border-color: var(--amber);
    color: var(--amber);
}

/* Metric cards — KPI gradient look */
.metric-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 160ms ease, box-shadow 200ms ease;
}
.metric-card::after {
    content: "";
    position: absolute;
    inset: -40% -20% auto auto;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, var(--oynfrm-accent-soft), transparent 70%);
    pointer-events: none;
}
.metric-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.metric-card span {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.78rem;
}
.metric-card strong {
    font-size: 1.7rem;
    font-weight: 700;
    background: var(--oynfrm-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.metric-card.warning::after,
.metric-card.danger::after {
    background: radial-gradient(circle, rgba(var(--bs-secondary-rgb), 0.20), transparent 70%);
}
.metric-card.warning strong,
.metric-card.danger strong {
    background: var(--oynfrm-gradient-warm);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.metric-card.success strong {
    background: linear-gradient(135deg, var(--bs-success) 0%, var(--oynfrm-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Empty state — dashed Discord card */
.empty-state {
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    padding: 1.15rem;
    text-align: center;
    color: var(--muted);
    background: rgba(var(--bs-body-color-rgb), 0.02);
}

/* Section heading (.split-head reused) */
.split-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.85rem;
}
.split-head h2 { margin: 0 0 0.2rem; font-size: 1.05rem; }

/* Topbar — Discord channel-bar feel */
.topbar {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}
.topbar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--oynfrm-gradient);
}
.topbar .brand {
    background: var(--oynfrm-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    font-size: 1.1rem;
}

/* Nav links — pill style */
.nav { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.nav a {
    border-radius: 8px;
    padding: 0.45rem 0.85rem;
    font-weight: 600;
    color: var(--muted);
    transition: background 140ms ease, color 140ms ease;
}
.nav a:hover {
    background: var(--oynfrm-accent-soft);
    color: var(--blue);
    box-shadow: none;
    border: none;
}

/* Badges — Discord-style colored pills */
.badge {
    border-radius: 999px;
    padding: 0.18em 0.65em;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.badge.translated,
.badge.approved { background: var(--color-success-soft); color: var(--green); }
.badge.empty,
.badge.needs_review { background: var(--color-warning-soft); color: var(--amber); }
.badge.rejected,
.badge.error { background: var(--metric-danger-bg); color: var(--red); }
.badge.quiet-badge { background: var(--soft-blue); color: var(--blue); }

/* Form fields — clean Discord input */
.field input[type=text],
.field input[type=password],
.field input[type=email],
.field input[type=number],
.field input[type=search],
.field input[type=url],
.field input[type=tel],
.field textarea,
.field select,
input[type=text]:not([class*="form-control"]),
input[type=password]:not([class*="form-control"]),
input[type=email]:not([class*="form-control"]),
input[type=search]:not([class*="form-control"]),
textarea:not([class*="form-control"]),
select:not([class*="form-select"]) {
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    transition: border-color 140ms ease, box-shadow 200ms ease;
}
.field input:focus,
.field textarea:focus,
.field select:focus,
input:focus:not([class*="form-control"]),
textarea:focus:not([class*="form-control"]),
select:focus:not([class*="form-select"]) {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.18);
}

/* Tables — bordered Discord look */
.responsive-table table,
table:not(.table) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
}
.responsive-table th,
table:not(.table) th {
    background: var(--color-surface-soft);
    color: var(--muted);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--line);
}
.responsive-table td,
table:not(.table) td {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--line);
}
.responsive-table tr:hover td,
table:not(.table) tr:hover td {
    background: var(--color-surface-soft);
}

/* Toast — vivid borders */
.toast {
    border-radius: 12px;
    border: 1px solid var(--blue);
    background: var(--panel);
    box-shadow: var(--shadow-lift);
}
.toast.error { border-color: var(--red); }
.toast.success { border-color: var(--green); }

/* OYNFRM custom toast — override Bootstrap 5 .toast hidden defaults.
   Bootstrap applies `.toast:not(.show) { display: none }` + opacity:0, but our
   stack uses .toast without the `.show` class. Force visibility for toasts that
   live inside .toast-stack (server-rendered flash messages). */
.toast-stack .toast,
.toast-stack .toast:not(.show) {
    display: flex !important;
    opacity: 1 !important;
}

/* Hero panel — convert legacy .hero-panel to Discord gradient banner */
.hero-panel {
    background: var(--oynfrm-gradient);
    color: #fff;
    border-radius: 18px;
    padding: 1.6rem 1.8rem;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--oynfrm-surface-elev);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.hero-panel::before {
    content: "";
    position: absolute;
    inset: -50% -30% auto auto;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 60%);
    pointer-events: none;
}
.hero-panel h1, .hero-panel h2 { color: #fff; margin: 0 0 0.4rem; }
.hero-panel p { color: rgba(255, 255, 255, 0.88); margin: 0; }
.hero-panel .muted { color: rgba(255, 255, 255, 0.75); }
.hero-panel .button,
.hero-panel button,
.hero-panel a.button {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
}
.hero-panel .button:hover,
.hero-panel a.button:hover { background: rgba(255, 255, 255, 0.25); color: #fff; }
.hero-panel--compact { padding: 1.2rem 1.4rem; }
.hero-panel .eyebrow {
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
    display: block;
}

/* Eyebrow label used outside hero */
.eyebrow {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
}

/* Notice / inline alerts */
.notice {
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    background: var(--soft-blue);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
    color: var(--ink);
    margin: 0.5rem 0;
}
.notice.warning,
.notice-warning {
    background: var(--soft-amber);
    border-color: rgba(var(--bs-warning-rgb), 0.45);
    color: var(--amber);
}
.notice.text-danger,
.notice-danger,
.notice.danger {
    background: var(--metric-danger-bg);
    border-color: rgba(var(--bs-danger-rgb), 0.45);
    color: var(--red);
}

/* Status pills (legacy) → Discord badge look */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18em 0.7em;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    background: var(--color-blue-soft);
    color: var(--blue);
    line-height: 1.4;
}
.status-pill.is-success { background: var(--color-success-soft); color: var(--green); }
.status-pill.is-warning { background: var(--color-warning-soft); color: var(--amber); }
.status-pill.is-danger { background: var(--metric-danger-bg); color: var(--red); }
.status-pill.is-info { background: var(--color-blue-soft); color: var(--blue); }
.status-pill.is-good { background: var(--color-success-soft); color: var(--green); }
.status-pill.is-muted { background: rgba(var(--bs-body-color-rgb), 0.08); color: var(--muted); }

/* Empty state rich variant */
.empty-state--rich {
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
}

/* Progress bar (legacy) → gradient fill */
.progress {
    background: rgba(var(--bs-body-color-rgb), 0.08);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    position: relative;
}
.progress > span {
    display: block;
    height: 100%;
    background: var(--oynfrm-gradient);
    border-radius: 999px;
    transition: width 200ms ease;
}
.progress-large { height: 14px; }

/* Project card compact (used on dashboard/lists) */
.project-card-compact,
.public-project-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow-soft);
    transition: transform 160ms ease, box-shadow 200ms ease;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.project-card-compact:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.project-card-compact h3,
.public-project-card h3 { margin: 0 0 0.2rem; font-size: 1rem; }
.project-card-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 0.5rem;
}

/* Settings card heads */
.settings-card__head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
    margin-bottom: 0.8rem;
}
.settings-card__head h2 { margin: 0 0 0.2rem; font-size: 1.05rem; }

/* Filter bar / inline form */
.filter-bar,
.line-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem;
    align-items: end;
}

/* Compact small text */
.small-text { font-size: 0.78rem; color: var(--muted); }

/* Avatar chip */
.avatar-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--oynfrm-accent-soft);
    color: var(--blue);
    font-weight: 700;
    font-size: 0.7rem;
    border: 2px solid var(--panel);
    margin-right: -8px;
    overflow: hidden;
}
.avatar-chip img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }
.avatar-stack { display: inline-flex; align-items: center; padding-right: 8px; }

/* Mono helper */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.font-monospace { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ========================================================================
   SIDEBAR LAYOUT — Discord-style fixed left sidebar + main area
   Overrides legacy .shell centered container.
   ====================================================================== */

main.shell {
    max-width: none !important;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
    gap: 0;
}

main.shell:has(.oynfrm-main:only-child),
main.shell:not(:has(.oynfrm-sidebar)) {
    grid-template-columns: 1fr;
}

.oynfrm-sidebar {
    background: var(--color-surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1040;
    overflow: hidden;
}
:root[data-theme="dark"] .oynfrm-sidebar {
    background: linear-gradient(180deg, #1A1B1F 0%, #1E1F22 100%);
    border-right-color: rgba(255, 255, 255, 0.04);
}

.oynfrm-sidebar__head {
    padding: 1rem 1rem 0.85rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.oynfrm-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}
.oynfrm-sidebar__brand-mark {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--oynfrm-gradient);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 6px 14px -6px rgba(var(--bs-primary-rgb), 0.55);
}
.oynfrm-sidebar__brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.oynfrm-sidebar__brand-text .gradient-text { font-size: 0.95rem; font-weight: 800; letter-spacing: 0.02em; }
.oynfrm-sidebar__brand-text small { color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; }
.oynfrm-sidebar__close {
    display: none;
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 1.2rem;
    padding: 0.25rem 0.4rem;
    border-radius: 8px;
}
.oynfrm-sidebar__close:hover { background: var(--bs-secondary-bg); color: var(--ink); }

.oynfrm-sidebar__search {
    position: relative;
    padding: 0.65rem 0.85rem 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.oynfrm-sidebar__search-icon {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
    font-size: 0.85rem;
}
.oynfrm-sidebar__search input {
    width: 100%;
    padding-left: 2rem;
    padding-right: 2.5rem;
    background: var(--color-surface-soft, var(--bg));
    border-color: var(--line);
}
.oynfrm-sidebar__search-kbd {
    position: absolute;
    right: 1.3rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--line);
    color: var(--muted);
    font-size: 0.65rem;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    border: none;
    font-family: ui-monospace, monospace;
}

.oynfrm-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.45rem 0.55rem 1rem;
    scrollbar-width: thin;
}
.oynfrm-sidebar__nav::-webkit-scrollbar { width: 6px; }
.oynfrm-sidebar__nav::-webkit-scrollbar-thumb { background: rgba(var(--bs-body-color-rgb), 0.12); border-radius: 3px; }

.oynfrm-sidebar__group { margin-bottom: 0.85rem; }
.oynfrm-sidebar__group-label {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.35rem 0.7rem 0.25rem;
    opacity: 0.8;
}

.oynfrm-sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.88rem;
    transition: background 140ms ease, color 140ms ease, transform 120ms ease;
    margin-bottom: 1px;
}
.oynfrm-sidebar__link:hover {
    background: var(--oynfrm-accent-soft);
    color: var(--blue);
}
.oynfrm-sidebar__link.is-active {
    background: var(--oynfrm-gradient);
    color: #fff !important;
    box-shadow: 0 6px 14px -8px rgba(var(--bs-primary-rgb), 0.65);
}
.oynfrm-sidebar__link.is-active .oynfrm-sidebar__icon { color: #fff; }

.oynfrm-sidebar__icon {
    flex: 0 0 22px;
    width: 22px;
    text-align: center;
    color: var(--muted);
    font-size: 1rem;
}
.oynfrm-sidebar__link:hover .oynfrm-sidebar__icon { color: var(--blue); }

.oynfrm-sidebar__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Parent (collapsible) item — looks like a regular link but is a button */
.oynfrm-sidebar__parent {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}
.oynfrm-sidebar__parent.is-open {
    color: var(--blue);
}
.oynfrm-sidebar__chevron {
    flex: 0 0 auto;
    margin-left: 0.25rem;
    font-size: 0.8rem;
    color: var(--muted);
    transition: transform 180ms ease;
}
.oynfrm-sidebar__parent[aria-expanded="true"] .oynfrm-sidebar__chevron {
    transform: rotate(180deg);
}
.oynfrm-sidebar__subnav {
    padding-left: 0.65rem;
    margin-left: 0.55rem;
    border-left: 1px solid var(--line);
    margin-top: 2px;
}
.oynfrm-sidebar__sublink {
    font-size: 0.84rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}
.oynfrm-sidebar__sublink .oynfrm-sidebar__icon {
    font-size: 0.9rem;
}

/* ====== Proje Sohbeti (FAB + Offcanvas) ====== */
.oynfrm-chat-fab {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 3.5rem;
    height: 3.5rem;
    z-index: 1030;
    box-shadow: 0 10px 28px -10px rgba(var(--bs-primary-rgb), 0.65);
    background: var(--oynfrm-gradient);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.oynfrm-chat-fab:hover,
.oynfrm-chat-fab:focus-visible {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 16px 36px -12px rgba(var(--bs-primary-rgb), 0.8);
}
.oynfrm-chat-fab.has-new-message {
    animation: oynfrm-chat-pulse 1.4s ease-out;
}
@keyframes oynfrm-chat-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.55); }
    70%  { box-shadow: 0 0 0 18px rgba(var(--bs-primary-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0); }
}

.oynfrm-chat-offcanvas {
    --oynfrm-chat-panel-bg: #f7f8fb;
    --oynfrm-chat-panel-surface: rgba(255, 255, 255, 0.86);
    --oynfrm-chat-panel-surface-strong: #fff;
    --oynfrm-chat-panel-border: rgba(20, 24, 36, 0.10);
    --oynfrm-chat-panel-muted: #667085;
    --oynfrm-chat-message-bg: #eef2f8;
    --oynfrm-chat-message-grid: rgba(88, 101, 242, 0.035);
    --oynfrm-chat-bubble-bg: rgba(255, 255, 255, 0.96);
    --oynfrm-chat-bubble-border: rgba(20, 24, 36, 0.08);
    --oynfrm-chat-own-bg: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.98), rgba(var(--bs-secondary-rgb), 0.86));
    --oynfrm-chat-own-shadow: 0 10px 24px -16px rgba(var(--bs-primary-rgb), 0.75);
    --oynfrm-chat-control-bg: rgba(255, 255, 255, 0.78);
    --oynfrm-chat-control-hover: rgba(var(--bs-primary-rgb), 0.10);
    width: 410px;
    max-width: 92vw;
    background: var(--oynfrm-chat-panel-bg);
    border-left: 1px solid var(--oynfrm-chat-panel-border);
    box-shadow: -18px 0 46px -30px rgba(20, 24, 36, 0.55);
    overflow: hidden;
}
:root[data-bs-theme="dark"] .oynfrm-chat-offcanvas {
    --oynfrm-chat-panel-bg: #202227;
    --oynfrm-chat-panel-surface: rgba(43, 45, 49, 0.88);
    --oynfrm-chat-panel-surface-strong: #2b2d31;
    --oynfrm-chat-panel-border: rgba(255, 255, 255, 0.08);
    --oynfrm-chat-panel-muted: #a6adbb;
    --oynfrm-chat-message-bg: #1c1e23;
    --oynfrm-chat-message-grid: rgba(255, 255, 255, 0.025);
    --oynfrm-chat-bubble-bg: rgba(43, 45, 49, 0.96);
    --oynfrm-chat-bubble-border: rgba(255, 255, 255, 0.075);
    --oynfrm-chat-own-bg: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.92), rgba(var(--bs-secondary-rgb), 0.80));
    --oynfrm-chat-own-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.85);
    --oynfrm-chat-control-bg: rgba(255, 255, 255, 0.055);
    --oynfrm-chat-control-hover: rgba(var(--bs-primary-rgb), 0.16);
}
.oynfrm-chat-header {
    min-height: 62px;
    background:
        linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.13), rgba(var(--bs-secondary-rgb), 0.07)),
        var(--oynfrm-chat-panel-surface-strong);
    border-color: var(--oynfrm-chat-panel-border) !important;
    position: relative;
}
.oynfrm-chat-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-success), var(--bs-secondary));
}
.oynfrm-chat-header__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), 0.16);
    flex: 0 0 auto;
}
.oynfrm-chat-header__title {
    color: var(--bs-body-color);
    line-height: 1.1;
}
.oynfrm-chat-header [data-chat-status] {
    color: var(--oynfrm-chat-panel-muted) !important;
}
.oynfrm-chat-header__button {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--oynfrm-chat-control-bg);
    border-color: var(--oynfrm-chat-panel-border);
    color: var(--bs-body-color);
}
.oynfrm-chat-header__button:hover,
.oynfrm-chat-header__button:focus-visible,
.oynfrm-chat-header__button[aria-pressed="false"] {
    background: var(--oynfrm-chat-control-hover);
    border-color: rgba(var(--bs-primary-rgb), 0.32);
    color: var(--bs-primary);
}
.oynfrm-chat-offcanvas .btn-close {
    border-radius: 9px;
    opacity: 0.75;
}
.oynfrm-chat-offcanvas .btn-close:hover {
    background-color: var(--oynfrm-chat-control-hover);
    opacity: 1;
}
.oynfrm-chat-projectbar,
.oynfrm-chat-search-panel,
.oynfrm-chat-composer {
    background: var(--oynfrm-chat-panel-surface) !important;
    border-color: var(--oynfrm-chat-panel-border) !important;
    backdrop-filter: blur(10px);
}
.oynfrm-chat-projectbar {
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
}
.oynfrm-chat-projectbar .form-select,
.oynfrm-chat-search-panel .form-control,
.oynfrm-chat-search-panel .input-group-text,
.oynfrm-chat-composer .form-control {
    background-color: var(--oynfrm-chat-control-bg);
    border-color: var(--oynfrm-chat-panel-border);
    color: var(--bs-body-color);
    box-shadow: none;
}
.oynfrm-chat-projectbar .form-select,
.oynfrm-chat-search-panel .input-group,
.oynfrm-chat-composer .input-group {
    border-radius: 10px;
    overflow: hidden;
    background: var(--oynfrm-chat-control-bg);
    border: 1px solid var(--oynfrm-chat-panel-border);
    box-shadow: 0 10px 22px -20px rgba(0, 0, 0, 0.5);
}
.oynfrm-chat-projectbar .form-select:focus,
.oynfrm-chat-search-panel .form-control:focus,
.oynfrm-chat-composer .form-control:focus {
    border-color: rgba(var(--bs-primary-rgb), 0.55);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12);
}
.oynfrm-chat-composer .input-group:focus-within {
    border-color: rgba(var(--bs-primary-rgb), 0.58);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.11);
}
.oynfrm-chat-search-panel .input-group-text {
    color: var(--bs-primary);
}
.oynfrm-chat-search-panel .btn,
.oynfrm-chat-composer .btn {
    border-color: var(--oynfrm-chat-panel-border);
}
.oynfrm-chat-composer {
    padding: 0.7rem !important;
}
.oynfrm-chat-composer textarea {
    min-height: 42px;
    max-height: 120px;
    resize: none;
}
.oynfrm-chat-composer .input-group > .form-control {
    border: 0;
    background: transparent;
}
.oynfrm-chat-composer .input-group > .form-control:focus {
    box-shadow: none;
}
.oynfrm-chat-composer .input-group > .btn {
    min-width: 38px;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--oynfrm-chat-panel-border);
    border-radius: 0;
    color: var(--bs-body-color);
}
.oynfrm-chat-composer .input-group > .btn:hover,
.oynfrm-chat-composer .input-group > .btn:focus-visible {
    background: var(--oynfrm-chat-control-hover);
    color: var(--bs-primary);
}
.oynfrm-chat-composer .input-group > .btn-primary {
    background: var(--oynfrm-gradient);
    color: #fff;
    border-color: transparent;
    min-width: 48px;
    box-shadow: none;
}
.oynfrm-chat-composer .input-group > .btn-primary:hover,
.oynfrm-chat-composer .input-group > .btn-primary:focus-visible {
    background: var(--oynfrm-gradient);
    color: #fff;
    filter: brightness(1.05);
}
.oynfrm-chat-composer .form-text {
    color: var(--oynfrm-chat-panel-muted);
    line-height: 1.25;
}
.oynfrm-chat-reply-bar {
    background: rgba(var(--bs-primary-rgb), 0.09);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.16);
    border-radius: 8px;
    padding: 0.4rem 0.5rem !important;
    color: var(--bs-body-color) !important;
}
[data-chat-load-more-wrap] {
    background: var(--oynfrm-chat-panel-surface) !important;
    border-color: var(--oynfrm-chat-panel-border) !important;
}
[data-chat-load-more] {
    text-decoration: none;
    border: 1px solid var(--oynfrm-chat-panel-border);
    border-radius: 999px;
    background: var(--oynfrm-chat-control-bg);
    padding: 0.18rem 0.65rem;
    color: var(--oynfrm-chat-panel-muted) !important;
}
[data-chat-load-more]:hover,
[data-chat-load-more]:focus-visible {
    background: var(--oynfrm-chat-control-hover);
    color: var(--bs-primary) !important;
}

.oynfrm-chat-messages {
    background:
        radial-gradient(circle at top right, rgba(var(--bs-primary-rgb), 0.10), transparent 44%),
        radial-gradient(circle at bottom left, rgba(var(--bs-success-rgb), 0.065), transparent 36%),
        linear-gradient(90deg, var(--oynfrm-chat-message-grid) 1px, transparent 1px),
        linear-gradient(0deg, var(--oynfrm-chat-message-grid) 1px, transparent 1px),
        var(--oynfrm-chat-message-bg);
    background-size: auto, auto, 28px 28px, 28px 28px, auto;
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--bs-primary-rgb), 0.35) transparent;
}
.oynfrm-chat-messages::-webkit-scrollbar { width: 8px; }
.oynfrm-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(var(--bs-primary-rgb), 0.28);
    border-radius: 999px;
}

.oynfrm-chat-row {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    width: 100%;
    animation: oynfrmChatRowIn 120ms ease-out;
    margin-bottom: 0.35rem;
}
.oynfrm-chat-row--mine {
    justify-content: flex-end;
}
.oynfrm-chat-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--bs-tertiary-bg);
    box-shadow: 0 2px 6px -3px rgba(0,0,0,0.35);
}
.oynfrm-chat-avatar--initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--bs-body-color);
    background: rgba(var(--bs-primary-rgb), 0.18);
    text-transform: uppercase;
    user-select: none;
}
@keyframes oynfrmChatRowIn {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}

.oynfrm-chat-bubble {
    max-width: 85%;
    background: var(--oynfrm-chat-bubble-bg);
    border: 1px solid var(--oynfrm-chat-bubble-border);
    border-radius: 11px 11px 11px 5px;
    padding: 0.58rem 0.72rem;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    position: relative;
    box-shadow: 0 10px 24px -20px rgba(20, 24, 36, 0.55);
}
.oynfrm-chat-bubble--mine {
    background: var(--oynfrm-chat-own-bg);
    border-color: transparent;
    color: #fff;
    border-radius: 11px 11px 5px 11px;
    box-shadow: var(--oynfrm-chat-own-shadow);
}
.oynfrm-chat-bubble--system {
    max-width: 100%;
    background: var(--oynfrm-chat-panel-surface);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.18) !important;
    border-left: 3px solid var(--bs-primary) !important;
    border-radius: 10px;
    box-shadow: none;
}
.oynfrm-chat-bubble--mine .text-muted,
.oynfrm-chat-bubble--mine strong,
.oynfrm-chat-bubble--mine .btn-link {
    color: rgba(255, 255, 255, 0.92) !important;
}
.oynfrm-chat-bubble--mine .text-body,
.oynfrm-chat-bubble--mine .text-success,
.oynfrm-chat-bubble--mine .fw-semibold {
    color: #fff !important;
}
/* Kendi baloncukta gömülü öğeler: yarı saydam beyaz zemin + beyaz metin (okunabilirlik) */
.oynfrm-chat-bubble--mine .oynfrm-chat-line-ref { color: #fff !important; text-decoration: underline; }
.oynfrm-chat-bubble--mine .oynfrm-chat-code {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.oynfrm-chat-bubble--mine .oynfrm-chat-line-card,
.oynfrm-chat-bubble--mine .oynfrm-chat-og,
.oynfrm-chat-bubble--mine .oynfrm-chat-doc {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}
.oynfrm-chat-bubble--mine .oynfrm-chat-doc__preview {
    background: rgba(0, 0, 0, 0.22);
    color: #fff;
}
.oynfrm-chat-reply-ctx {
    background: transparent;
    border: 0;
    border-left: 2px solid rgba(var(--bs-primary-rgb), 0.45) !important;
    border-radius: 4px;
    cursor: pointer;
    transition: background 120ms ease;
    padding-top: 0.18rem !important;
    padding-bottom: 0.18rem !important;
}
.oynfrm-chat-reply-ctx:hover,
.oynfrm-chat-reply-ctx:focus-visible {
    background: rgba(var(--bs-primary-rgb), 0.10);
    outline: none;
}
.oynfrm-chat-bubble--mine .oynfrm-chat-reply-ctx {
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}
/* Sabitlenmiş etiketi — kendi (gradient) baloncukta da okunur */
.oynfrm-chat-pinned-tag { color: var(--bs-primary); }
.oynfrm-chat-bubble--mine .oynfrm-chat-pinned-tag { color: #fff !important; }
.oynfrm-chat-bubble__head {
    font-size: 0.78rem;
    margin-bottom: 0.2rem;
    padding-right: 1.75rem;
    color: var(--oynfrm-chat-panel-muted);
}
/* Kullanıcı adı taşmasın, butonlar adı ezmesin */
.oynfrm-chat-username {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    flex: 0 1 auto;
}
.oynfrm-chat-edited { white-space: nowrap; }
/* Üç-nokta menü butonu: baloncuğun sağ-üst köşesinde, hover'da belirir (WhatsApp tarzı) */
/* Hover üzerinde mesaj bubble'ının sağ üstünde beliren aksiyonlar grubu */
.oynfrm-chat-hover-actions {
    position: absolute;
    top: -14px;
    right: 8px;
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--oynfrm-chat-bubble-bg, #fff);
    border: 1px solid var(--oynfrm-chat-bubble-border, rgba(0,0,0,0.08));
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease;
    transform: translateY(2px);
    box-shadow: 0 6px 16px -8px rgba(0,0,0,0.25);
    z-index: 5;
}
.oynfrm-chat-bubble:hover .oynfrm-chat-hover-actions,
.oynfrm-chat-bubble:focus-within .oynfrm-chat-hover-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.oynfrm-chat-hover-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.oynfrm-chat-hover-btn:hover,
.oynfrm-chat-hover-btn:focus-visible {
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    outline: none;
}
.oynfrm-chat-hover-btn--emoji {
    font-size: 0.95rem;
    line-height: 1;
}
.oynfrm-chat-mute-btn {
    flex: 0 0 auto;
    width: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* AI Sohbet Özeti — sticky panel sohbet üzerinde */
.oynfrm-chat-summary-panel {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    max-height: 70%;
    z-index: 1095;
    background: var(--oynfrm-chat-bubble-bg, #fff);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.30);
    border-radius: 12px;
    box-shadow: 0 24px 56px -16px rgba(0,0,0,0.40);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: oynfrmChatTypingIn 180ms ease-out;
}
:root[data-bs-theme="dark"] .oynfrm-chat-summary-panel { background: #2b2d31; }
.oynfrm-chat-summary-panel__body { overflow-y: auto; line-height: 1.5; }
.oynfrm-chat-summary-panel ul { margin-bottom: 0; padding-left: 1.1rem; }
.oynfrm-chat-summary-panel li { margin-bottom: 0.25rem; }

/* :term: sözlük referansı — inline pill */
.oynfrm-chat-glossary-ref {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    padding: 0.04em 0.42em;
    border: 1px dashed rgba(var(--bs-info-rgb), 0.55);
    border-radius: 999px;
    background: rgba(var(--bs-info-rgb), 0.10);
    color: var(--bs-info);
    font-weight: 600;
    font-size: 0.86em;
    line-height: 1.2;
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease;
}
.oynfrm-chat-glossary-ref:hover {
    background: rgba(var(--bs-info-rgb), 0.18);
    transform: translateY(-1px);
}
.oynfrm-chat-glossary-ref > i { font-size: 0.78em; }
.oynfrm-chat-bubble--mine .oynfrm-chat-glossary-ref {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}
.oynfrm-chat-glossary-pop {
    position: fixed;
    z-index: 1100;
    min-width: 280px;
    max-width: 340px;
    background: var(--oynfrm-chat-bubble-bg, #fff);
    border: 1px solid var(--oynfrm-chat-bubble-border, rgba(0,0,0,0.08));
    border-radius: 10px;
    box-shadow: 0 16px 38px -14px rgba(0,0,0,0.45);
    overflow: hidden;
}
:root[data-bs-theme="dark"] .oynfrm-chat-glossary-pop { background: #2b2d31; }

/* Read receipts — küçük "okundu" ikonu */
.oynfrm-chat-read-receipt {
    font-size: 0.85rem;
    line-height: 1;
    vertical-align: middle;
    color: var(--bs-info);
}
.oynfrm-chat-read-receipt:hover { filter: brightness(1.15); }
.oynfrm-chat-readers-pop {
    position: fixed;
    z-index: 1100;
    min-width: 220px;
    max-width: 280px;
    background: var(--oynfrm-chat-bubble-bg, #fff);
    border: 1px solid var(--oynfrm-chat-bubble-border, rgba(0,0,0,0.08));
    border-radius: 10px;
    box-shadow: 0 14px 32px -12px rgba(0,0,0,0.40);
    overflow: hidden;
}
:root[data-bs-theme="dark"] .oynfrm-chat-readers-pop {
    background: #2b2d31;
}

/* Drag-drop dropzone — sohbet alanı üzerinde tam-kaplama overlay */
.oynfrm-chat-dropzone {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-primary-rgb), 0.12);
    backdrop-filter: blur(4px);
    border: 2px dashed rgba(var(--bs-primary-rgb), 0.55);
    border-radius: 10px;
    margin: 0.4rem;
    z-index: 20;
    pointer-events: none;
    animation: oynfrmChatDropIn 140ms ease-out;
}
.oynfrm-chat-dropzone[hidden] { display: none; }
.oynfrm-chat-dropzone__inner {
    text-align: center;
    color: var(--bs-primary);
}
@keyframes oynfrmChatDropIn { from { opacity: 0; } to { opacity: 1; } }

/* Typing band — composer üstünde animasyonlu "X yazıyor…" */
.oynfrm-chat-typing-band {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(var(--bs-primary-rgb), 0.05);
    border-top: 1px solid var(--oynfrm-chat-panel-border);
    flex: 0 0 auto;
    animation: oynfrmChatTypingIn 160ms ease-out;
}
.oynfrm-chat-typing-band[hidden] { display: none; }
@keyframes oynfrmChatTypingIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
.oynfrm-chat-typing-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}
.oynfrm-chat-typing-dots > span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bs-primary);
    opacity: 0.35;
    animation: oynfrmChatTypingDot 1.2s ease-in-out infinite;
}
.oynfrm-chat-typing-dots > span:nth-child(2) { animation-delay: 0.18s; }
.oynfrm-chat-typing-dots > span:nth-child(3) { animation-delay: 0.36s; }
@keyframes oynfrmChatTypingDot {
    0%, 60%, 100% { opacity: 0.30; transform: translateY(0); }
    30%           { opacity: 1.00; transform: translateY(-2px); }
}
.oynfrm-chat-hover-divider {
    align-self: stretch;
    width: 1px;
    background: var(--bs-border-color);
    margin: 2px 1px;
}
/* Geriye dönük: tetikleyici hâlâ menu-btn class'ını da taşıyor */
.oynfrm-chat-menu-btn { position: static; opacity: 1; }
/* Açılır menü (root'a fixed) */
.oynfrm-chat-menu-pop {
    min-width: 180px;
    max-width: 220px;
    background: var(--oynfrm-chat-panel-surface-strong) !important;
    border-color: var(--oynfrm-chat-panel-border) !important;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.62) !important;
}
.oynfrm-chat-menu-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.9rem;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 0.85rem;
    color: var(--bs-body-color);
}
.oynfrm-chat-menu-item:hover {
    background: rgba(var(--bs-primary-rgb), 0.10);
    color: var(--bs-primary);
}
.oynfrm-chat-menu-item i { width: 1rem; text-align: center; }
.oynfrm-chat-bubble__body {
    font-size: 0.92rem;
    line-height: 1.4;
}
.oynfrm-chat-mention {
    background: rgba(var(--bs-primary-rgb), 0.16);
    color: var(--bs-primary);
    padding: 0.04em 0.4em;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.94em;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.32);
    box-shadow: 0 1px 0 rgba(var(--bs-primary-rgb), 0.08);
    text-decoration: none;
}
.oynfrm-chat-mention:hover { background: rgba(var(--bs-primary-rgb), 0.24); }
:root[data-bs-theme="dark"] .oynfrm-chat-mention {
    background: rgba(var(--bs-primary-rgb), 0.22);
    color: #fff;
    border-color: rgba(var(--bs-primary-rgb), 0.50);
}
.oynfrm-chat-bubble--mine .oynfrm-chat-mention {
    background: rgba(255, 255, 255, 0.30);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
}
/* @here / @channel — broadcast mention: sıcak gradient + megafon ikonu + parlama */
.oynfrm-chat-mention--broadcast {
    background: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.30), 0 4px 14px -6px rgba(236, 72, 153, 0.55) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.10);
    display: inline-flex;
    align-items: center;
    gap: 0.28em;
    animation: oynfrmChatBroadcastIn 360ms ease-out;
}
.oynfrm-chat-mention--broadcast > i {
    font-size: 0.82em;
    opacity: 0.95;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
}
.oynfrm-chat-mention--broadcast:hover {
    filter: brightness(1.08);
}
/* Mine bubble içinde de kontrast korunur (zaten beyaz üzerine renkli zemin) */
.oynfrm-chat-bubble--mine .oynfrm-chat-mention--broadcast {
    background: linear-gradient(135deg, #fbbf24 0%, #f472b6 100%) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
}
:root[data-bs-theme="dark"] .oynfrm-chat-mention--broadcast {
    background: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%) !important;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.40), 0 6px 18px -6px rgba(236, 72, 153, 0.75) !important;
}
@keyframes oynfrmChatBroadcastIn {
    0%   { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.55); }
    50%  { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(236, 72, 153, 0.00); }
    100% { transform: scale(1.00); }
}
/* Çok satırlı kod bloğu (```...```) */
.oynfrm-chat-codeblock {
    margin: 0.4rem 0;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(20, 24, 36, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.oynfrm-chat-codeblock__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.18rem 0.5rem;
    background: rgba(0, 0, 0, 0.25);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.72rem;
}
.oynfrm-chat-codeblock__lang {
    text-transform: lowercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.oynfrm-chat-codeblock__copy {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.65);
    padding: 0.05rem 0.32rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.78rem;
    transition: background 120ms ease, color 120ms ease;
}
.oynfrm-chat-codeblock__copy:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.oynfrm-chat-codeblock__pre {
    margin: 0;
    padding: 0.55rem 0.7rem;
    color: #f1f5f9;
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.82rem;
    line-height: 1.45;
    overflow-x: auto;
    white-space: pre;
    background: transparent;
}
.oynfrm-chat-bubble--mine .oynfrm-chat-codeblock {
    background: rgba(0, 0, 0, 0.42);
    border-color: rgba(255, 255, 255, 0.15);
}

.oynfrm-chat-code {
    background: rgba(var(--bs-secondary-rgb), 0.18);
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.85em;
}
.oynfrm-chat-line-ref {
    font-weight: 600;
    color: var(--bs-primary);
    text-decoration: none;
}
.oynfrm-chat-line-card {
    background: rgba(var(--bs-primary-rgb), 0.06);
    border-color: rgba(var(--bs-primary-rgb), 0.2) !important;
    border-radius: 8px !important;
}
.oynfrm-chat-og {
    background: rgba(var(--bs-secondary-rgb), 0.06);
    border-color: rgba(var(--bs-secondary-rgb), 0.25) !important;
    max-width: 420px;
    border-radius: 8px !important;
}
.oynfrm-chat-og:hover { background: rgba(var(--bs-secondary-rgb), 0.12); }
.oynfrm-chat-og__img {
    width: 84px;
    min-width: 84px;
    height: 84px;
    object-fit: cover;
    flex: 0 0 auto;
}
.oynfrm-chat-og__body { min-width: 0; }
.oynfrm-chat-search-results { max-height: 260px; overflow-y: auto; }
.oynfrm-chat-search-item { border-radius: 8px !important; }
.oynfrm-chat-search-item:hover { background: rgba(var(--bs-primary-rgb), 0.08) !important; }
[data-chat-date-sep] {
    align-self: center;
    padding: 0.16rem 0.55rem !important;
    border: 1px solid var(--oynfrm-chat-panel-border);
    border-radius: 999px;
    background: var(--oynfrm-chat-panel-surface);
    color: var(--oynfrm-chat-panel-muted) !important;
    box-shadow: 0 8px 18px -18px rgba(0, 0, 0, 0.5);
}
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.oynfrm-chat-search-item mark, .oynfrm-chat-search-results mark {
    padding: 0 .1rem;
    background: rgba(var(--bs-warning-rgb), 0.5);
}
.oynfrm-chat-row--flash > .oynfrm-chat-bubble {
    animation: oynfrmChatFlash 1.6s ease-out;
}
@keyframes oynfrmChatFlash {
    0%, 30% { box-shadow: 0 0 0 3px rgba(var(--bs-warning-rgb), 0.7); }
    100% { box-shadow: 0 0 0 0 rgba(var(--bs-warning-rgb), 0); }
}
.oynfrm-chat-doc {
    background: rgba(var(--bs-secondary-rgb), 0.05);
    max-width: 420px;
    border-radius: 8px !important;
}
.oynfrm-chat-doc .min-w-0 { min-width: 0; }
.oynfrm-chat-react-palette {
    max-width: 280px;
    flex-wrap: wrap;
    background: var(--oynfrm-chat-panel-surface-strong) !important;
    border-color: var(--oynfrm-chat-panel-border) !important;
    border-radius: 10px !important;
}
.oynfrm-chat-reactions .btn {
    background: var(--oynfrm-chat-control-bg);
    border-color: var(--oynfrm-chat-panel-border);
}
.oynfrm-chat-reactions .btn-primary {
    background: rgba(var(--bs-success-rgb), 0.18);
    color: var(--bs-success);
    border-color: rgba(var(--bs-success-rgb), 0.42);
}
.oynfrm-chat-poll {
    --oynfrm-chat-poll-bg: rgba(255, 255, 255, 0.72);
    --oynfrm-chat-poll-border: rgba(var(--bs-primary-rgb), 0.20);
    --oynfrm-chat-poll-title: #15171d;
    --oynfrm-chat-poll-option-bg: rgba(var(--bs-body-bg-rgb), 0.82);
    --oynfrm-chat-poll-option-border: rgba(var(--bs-primary-rgb), 0.28);
    --oynfrm-chat-poll-option-hover-bg: rgba(var(--bs-primary-rgb), 0.08);
    --oynfrm-chat-poll-option-hover-border: rgba(var(--bs-primary-rgb), 0.52);
    --oynfrm-chat-poll-selected-bg: rgba(var(--bs-success-rgb), 0.14);
    --oynfrm-chat-poll-selected-border: rgba(var(--bs-success-rgb), 0.62);
    --oynfrm-chat-poll-count-bg: rgba(var(--bs-primary-rgb), 0.12);
    --oynfrm-chat-poll-count-color: var(--bs-primary);
    --oynfrm-chat-poll-count-selected-bg: rgb(var(--bs-success-rgb));
    --oynfrm-chat-poll-count-selected-color: #fff;
    background: var(--oynfrm-chat-poll-bg);
    border: 1px solid var(--oynfrm-chat-poll-border);
    border-radius: 10px;
    padding: 0.65rem;
    min-width: min(260px, 100%);
    box-shadow: 0 8px 22px -18px rgba(0, 0, 0, 0.35);
}
:root[data-bs-theme="dark"] .oynfrm-chat-poll {
    --oynfrm-chat-poll-bg: rgba(43, 45, 49, 0.92);
    --oynfrm-chat-poll-border: rgba(255, 255, 255, 0.10);
    --oynfrm-chat-poll-title: var(--bs-body-color);
    --oynfrm-chat-poll-option-bg: rgba(255, 255, 255, 0.035);
    --oynfrm-chat-poll-option-border: rgba(255, 255, 255, 0.12);
    --oynfrm-chat-poll-option-hover-bg: rgba(var(--bs-primary-rgb), 0.14);
    --oynfrm-chat-poll-option-hover-border: rgba(var(--bs-primary-rgb), 0.52);
    --oynfrm-chat-poll-selected-bg: rgba(var(--bs-success-rgb), 0.18);
    --oynfrm-chat-poll-selected-border: rgba(var(--bs-success-rgb), 0.58);
    --oynfrm-chat-poll-count-bg: rgba(255, 255, 255, 0.08);
    --oynfrm-chat-poll-count-color: var(--bs-body-color);
}
.oynfrm-chat-poll__title {
    display: block;
    color: var(--oynfrm-chat-poll-title);
    font-size: 0.92rem;
    margin-bottom: 0.45rem;
}
.oynfrm-chat-poll-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
    min-height: 36px;
    margin-bottom: 0.4rem;
    padding: 0.42rem 0.55rem;
    border: 1px solid var(--oynfrm-chat-poll-option-border);
    border-radius: 7px;
    background: var(--oynfrm-chat-poll-option-bg);
    color: var(--bs-body-color);
    text-align: left;
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.oynfrm-chat-poll-option:last-child { margin-bottom: 0; }
.oynfrm-chat-poll-option:hover,
.oynfrm-chat-poll-option:focus-visible {
    background: var(--oynfrm-chat-poll-option-hover-bg);
    border-color: var(--oynfrm-chat-poll-option-hover-border);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.10);
    outline: 0;
}
.oynfrm-chat-poll-option.is-selected {
    background: var(--oynfrm-chat-poll-selected-bg);
    border-color: var(--oynfrm-chat-poll-selected-border);
    box-shadow: 0 0 0 3px rgba(var(--bs-success-rgb), 0.10);
}
.oynfrm-chat-poll-option.is-selected:hover,
.oynfrm-chat-poll-option.is-selected:focus-visible {
    background: var(--oynfrm-chat-poll-selected-bg);
    border-color: var(--oynfrm-chat-poll-selected-border);
    box-shadow: 0 0 0 3px rgba(var(--bs-success-rgb), 0.14);
}
.oynfrm-chat-poll-option__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.oynfrm-chat-poll-option__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.45rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--oynfrm-chat-poll-count-bg);
    color: var(--oynfrm-chat-poll-count-color);
    font-size: 0.76rem;
    font-weight: 700;
    flex: 0 0 auto;
}
.oynfrm-chat-poll-option.is-selected .oynfrm-chat-poll-option__count {
    background: var(--oynfrm-chat-poll-count-selected-bg);
    color: var(--oynfrm-chat-poll-count-selected-color);
}
.oynfrm-chat-toast {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: rgba(33, 37, 41, 0.95);
    color: #fff;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    font-size: 0.82rem;
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.oynfrm-chat-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.oynfrm-chat-toast.is-error { background: rgba(var(--bs-danger-rgb), 0.95); }
.oynfrm-chat-doc__preview {
    background: rgba(var(--bs-secondary-rgb), 0.1);
    max-height: 180px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.72rem;
}
.oynfrm-chat-emojis { position: absolute; bottom: 100%; right: 0; z-index: 1090; display: block; }
.oynfrm-chat-emojis[hidden] { display: none; }

/* Sabitlenmiş mesajlar banner'ı (sohbet üstünde sticky) */
.oynfrm-chat-pinned-banner {
    background: rgba(var(--bs-primary-rgb), 0.05);
    border-bottom: 1px solid var(--oynfrm-chat-panel-border) !important;
    flex: 0 0 auto;
}
.oynfrm-chat-pinned-toggle {
    background: transparent;
    border: 0;
    color: var(--bs-body-color);
    cursor: pointer;
    transition: background-color 120ms ease;
}
.oynfrm-chat-pinned-toggle:hover,
.oynfrm-chat-pinned-toggle:focus-visible {
    background: rgba(var(--bs-primary-rgb), 0.08);
    outline: none;
}
.oynfrm-chat-pinned-chevron { transition: transform 180ms ease; }
.oynfrm-chat-pinned-banner--open .oynfrm-chat-pinned-chevron { transform: rotate(180deg); }
.oynfrm-chat-pinned-list {
    max-height: 220px;
    overflow-y: auto;
}
.oynfrm-chat-pinned-item {
    cursor: pointer;
    transition: background-color 120ms ease;
    border-left: 2px solid rgba(var(--bs-primary-rgb), 0.35) !important;
}
.oynfrm-chat-pinned-item:hover,
.oynfrm-chat-pinned-item:focus-visible {
    background: rgba(var(--bs-primary-rgb), 0.10) !important;
    outline: none;
}
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Çevrimiçi durum noktası: online (yeşil), away (sarı), offline (gri) */
.oynfrm-presence-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #9ca3af;
    flex: 0 0 auto;
}
.oynfrm-presence-dot--online { background: #22c55e; }
.oynfrm-presence-dot--away   { background: #f59e0b; }
.oynfrm-presence-dot--offline { background: #9ca3af; }

/* @mention autocomplete açılır listesi */
.oynfrm-chat-mentions {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    right: auto;
    min-width: 220px;
    max-width: 320px;
    max-height: 220px;
    overflow-y: auto;
    display: block;
    z-index: 1080;
    background: rgba(var(--bs-body-bg-rgb), 0.96);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 16px 38px -24px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
}
:root[data-bs-theme="dark"] .oynfrm-chat-mentions {
    background: rgba(43, 45, 49, 0.98);
    border-color: rgba(255, 255, 255, 0.08);
}
.oynfrm-chat-mentions[hidden] { display: none; }
.oynfrm-chat-mention-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--bs-body-color);
    transition: background-color 120ms ease, color 120ms ease;
}
.oynfrm-chat-mention-item:hover,
.oynfrm-chat-mention-item.is-active {
    background: rgba(var(--bs-primary-rgb), 0.11);
}
.oynfrm-chat-mention-item__avatar {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--bs-tertiary-bg);
}
.oynfrm-chat-mention-item__name { flex: 1 1 auto; }
.oynfrm-chat-mention-item__desc { flex: 0 0 auto; margin-left: 0.4rem; }
.oynfrm-chat-mention-item--special {
    border-bottom: 1px dashed rgba(245, 158, 11, 0.32);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(236, 72, 153, 0.06));
}
.oynfrm-chat-mention-item--special:hover,
.oynfrm-chat-mention-item--special.is-active {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(236, 72, 153, 0.16)) !important;
}
.oynfrm-chat-mention-item__avatar--special {
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(236, 72, 153, 0.55);
}
.oynfrm-chat-mentions[data-slash-mode] {
    min-width: 310px;
    max-width: min(380px, calc(100vw - 2rem));
    padding: 0.25rem !important;
}
.oynfrm-chat-mentions[data-slash-mode] .oynfrm-chat-mention-item {
    min-height: 42px;
    padding: 0.48rem 0.6rem;
}
.oynfrm-chat-slash-command {
    color: var(--bs-primary);
    font-weight: 700;
    white-space: nowrap;
}
.oynfrm-chat-slash-hint {
    border-radius: 5px;
    background: rgba(var(--bs-secondary-rgb), 0.10);
    color: var(--bs-secondary);
    padding: 0.08rem 0.28rem;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}
:root[data-bs-theme="dark"] .oynfrm-chat-slash-hint {
    background: rgba(var(--bs-warning-rgb), 0.12);
    color: var(--bs-warning);
}
.oynfrm-chat-slash-desc {
    color: var(--bs-secondary-color);
    font-size: 0.82rem;
    margin-left: 0.15rem;
}
.oynfrm-chat-mention-item.is-active .oynfrm-chat-slash-desc,
.oynfrm-chat-mention-item:hover .oynfrm-chat-slash-desc {
    color: var(--bs-body-color);
}

.oynfrm-sidebar__footer {
    padding: 0.65rem 0.85rem;
    border-top: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.02);
}
:root[data-theme="dark"] .oynfrm-sidebar__footer { background: rgba(0, 0, 0, 0.25); }

.oynfrm-sidebar__user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.oynfrm-sidebar__avatar {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--oynfrm-gradient);
    color: #fff;
    font-weight: 700;
    overflow: hidden;
}
.oynfrm-sidebar__avatar--initial { font-size: 1rem; }
.oynfrm-sidebar__user-meta { flex: 1; min-width: 0; line-height: 1.2; }
.oynfrm-sidebar__user-meta strong { display: block; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oynfrm-sidebar__user-meta small { color: var(--muted); font-size: 0.7rem; }
.oynfrm-sidebar__logout {
    color: var(--muted);
    text-decoration: none;
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
    transition: background 140ms ease, color 140ms ease;
}
.oynfrm-sidebar__logout:hover { background: var(--metric-danger-bg); color: var(--red); }

/* Main area */
.oynfrm-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg);
}

.oynfrm-topbar {
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    padding: 0.65rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 1020;
    backdrop-filter: blur(8px);
}
.oynfrm-menu-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    font-size: 1.2rem;
    padding: 0.3rem 0.55rem;
    cursor: pointer;
}
.oynfrm-menu-toggle:hover { background: var(--bs-secondary-bg); }

.oynfrm-topbar__title { flex: 1; min-width: 0; }
.oynfrm-topbar__controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.oynfrm-theme-select { width: auto; }

.oynfrm-content {
    flex: 1;
    padding: 1.2rem 1.4rem;
    min-width: 0;
}

/* Hide the OLD nav/topbar element if it somehow renders */
main.shell > .topbar,
main.shell > .nav {
    display: none !important;
}

/* Mobile backdrop */
.oynfrm-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1030;
}
.oynfrm-sidebar-backdrop.is-visible { display: block; }

/* Mobile responsive */
@media (max-width: 991.98px) {
    main.shell { grid-template-columns: 1fr; }
    .oynfrm-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        max-width: 85vw;
        transform: translateX(-100%);
        transition: transform 220ms ease;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    }
    .oynfrm-sidebar.is-open { transform: translateX(0); }
    .oynfrm-sidebar__close { display: inline-flex; }
    .oynfrm-menu-toggle { display: inline-flex; }
    .oynfrm-content { padding: 1rem; }
}

/* General mobile fixes for legacy components */
@media (max-width: 767.98px) {
    .hero-panel,
    .oynfrm-hero {
        padding: 1.1rem 1.15rem;
        flex-direction: column;
        align-items: flex-start;
    }
    .hero-panel h1, .oynfrm-hero h1 { font-size: 1.4rem; }
    .hero-panel h2, .oynfrm-hero h2 { font-size: 1.2rem; }

    /* Stack panels and reduce padding */
    .panel { padding: 0.85rem 1rem; }
    .panel h2 { font-size: 1rem; }

    /* KPI cards take full width on mobile */
    .kpi-card { padding: 0.85rem 0.9rem; }
    .kpi-card__value { font-size: 1.5rem; }

    /* Tables — make them tighter */
    .table { font-size: 0.82rem; }
    .table th, .table td { padding: 0.4rem 0.5rem; }

    /* Topbar — wrap controls below title */
    .oynfrm-topbar { flex-wrap: wrap; gap: 0.6rem; padding: 0.55rem 1rem; }
    .oynfrm-topbar__controls { width: 100%; justify-content: flex-end; }

    /* Workspace 3-column → stacked */
    .workspace-shell { grid-template-columns: 1fr !important; }
    .workspace-left, .workspace-right { max-height: 320px; overflow-y: auto; }
}

@media (max-width: 575.98px) {
    .oynfrm-content { padding: 0.7rem; }
    .oynfrm-hero, .hero-panel { padding: 0.9rem 1rem; border-radius: 12px; }
    .kpi-card__value { font-size: 1.3rem; }
    .btn-group { flex-wrap: wrap; }
}
.card.oynfrm-card.steam-admin-card {
    overflow: visible;
}

.card.oynfrm-card.steam-admin-card .card-body,
.card.oynfrm-card.steam-admin-card .steam-admin-table-wrap {
    overflow: visible !important;
}

.card.oynfrm-card.steam-admin-card .dropdown-menu {
    z-index: 9999 !important;
}