/* =====================================================================
   LikedWin — Telegram sahnesi (lws--telegram, tgm-*)
   Kabuk: organik-hit ohs-* + sahne-motor lws-* (önce yüklenir). Burada
   yalnız Telegram'a özel görünümler: Telegram Web düzeni (sohbet listesi +
   kanal), gönderi balonları, tepki çipleri, alttaki KATIL çubuğu, kanal
   istatistikleri (genel bakış + SVG büyüme çizgisi). Telegram kendi
   renkleriyle (açık tema; koyu temada Telegram'ın gece teması).
   Gradyan YOK (sohbet zemini düz renk).
   ===================================================================== */

.lws--telegram {
    --lws-brand: #2aabee;
    --lws-brand-ink: #fff;
    --lws-brand-soft: rgba(42, 171, 238, .14);
    --tgm-bg: #fff;
    --tgm-wall: #c9dbb2;
    --tgm-bubble: #fff;
    --tgm-line: #dfe1e5;
    --tgm-text: #000;
    --tgm-muted: #707579;
    --tgm-blue: #3390ec;
    --tgm-soft: #f4f4f5;
    --tgm-chip: rgba(0, 0, 0, .08);
    --tgm-date: rgba(78, 102, 64, .55);
}
:root[data-theme="dark"] .lws--telegram {
    --tgm-bg: #17212b;
    --tgm-wall: #0e1621;
    --tgm-bubble: #182533;
    --tgm-line: #0f1923;
    --tgm-text: #f5f5f5;
    --tgm-muted: #7d8b99;
    --tgm-blue: #5eb5f7;
    --tgm-soft: #242f3d;
    --tgm-chip: rgba(255, 255, 255, .08);
    --tgm-date: rgba(255, 255, 255, .12);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .lws--telegram {
        --tgm-bg: #17212b;
        --tgm-wall: #0e1621;
        --tgm-bubble: #182533;
        --tgm-line: #0f1923;
        --tgm-text: #f5f5f5;
        --tgm-muted: #7d8b99;
        --tgm-blue: #5eb5f7;
        --tgm-soft: #242f3d;
        --tgm-chip: rgba(255, 255, 255, .08);
        --tgm-date: rgba(255, 255, 255, .12);
    }
}

/* ---------- Çerçeve: sohbet listesi | kanal ---------- */
.tgm-view { display: flex; flex-direction: column; gap: 10px; }
.tgm-view .ohs-search__top { justify-content: space-between; }
.tgm-app {
    position: relative;
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 12px;
    background: var(--tgm-bg);
    color: var(--tgm-text);
    font-family: Roboto, -apple-system, system-ui, 'Segoe UI', 'Helvetica Neue', sans-serif;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--tgm-line);
}
.tgm-av { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-size: 13.5px; font-weight: 700; }
.tgm-list { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--tgm-line); }
.tgm-list__top { display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-size: 15px; color: var(--tgm-muted); }
.tgm-list__q { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; height: 34px; padding: 0 12px; border-radius: 17px; background: var(--tgm-soft); font-size: 13px; }
.tgm-list__q i { font-size: 12px; }
.tgm-list ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0 6px; list-style: none; }
.tgm-chat { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; }
.tgm-chat__b { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.tgm-chat__b b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgm-chat__b b i { font-size: 11px; }
.tgm-chat__b small { font-size: 12.5px; color: var(--tgm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgm-chat__m { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 0 0 auto; align-self: flex-start; padding-top: 2px; }
.tgm-chat__m small { font-size: 11px; color: var(--tgm-muted); }
.tgm-chat__m em { min-width: 20px; padding: 1px 6px; border-radius: 10px; background: #c4c9cc; color: #fff; font-style: normal; font-size: 11px; font-weight: 700; text-align: center; }
.tgm-chat.is-on { background: var(--tgm-blue); color: #fff; }
.tgm-chat.is-on .tgm-chat__b small, .tgm-chat.is-on .tgm-chat__m small { color: rgba(255, 255, 255, .85); }
.tgm-chat.is-on .tgm-av { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }

.tgm-pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--tgm-wall); }
.tgm-head { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; height: 54px; padding: 0 16px; background: var(--tgm-bg); border-bottom: 1px solid var(--tgm-line); color: var(--tgm-muted); font-size: 15px; }
.tgm-head .tgm-av { width: 38px; height: 38px; font-size: 12.5px; }
.tgm-head__back { display: none; }
.tgm-head__b { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.tgm-head__b b { font-size: 15px; font-weight: 600; color: var(--tgm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgm-head__b small { font-size: 12.5px; color: var(--tgm-muted); font-variant-numeric: tabular-nums; transition: color .3s ease; }
.tgm-head__b small.is-bump { color: var(--tgm-blue); }

/* Akış: alta yaslı balonlar */
.tgm-feed { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 6px; flex: 1 1 auto; min-height: 0; padding: 10px 16px 8px; overflow: hidden; }
.tgm-date { align-self: center; padding: 2px 10px; border-radius: 12px; background: var(--tgm-date); color: #fff; font-size: 12px; font-weight: 600; }
.tgm-msg {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 380px;
    border-radius: 12px 12px 12px 4px;
    background: var(--tgm-bubble);
    box-shadow: 0 1px 2px rgba(16, 35, 47, .15);
    overflow: hidden;
}
.tgm-msg p { margin: 0; padding: 7px 10px 0; font-size: 13.5px; line-height: 1.4; }
.tgm-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 2px 10px 6px; font-size: 11px; color: var(--tgm-muted); }
.tgm-meta i { font-size: 10.5px; }
.tgm-meta span { margin-left: 6px; }
.tgm-pic { position: relative; display: block; height: 96px; background: #f2c48d; overflow: hidden; }
.tgm-pic i { position: absolute; display: block; }
.tgm-pic__sun { width: 36px; height: 36px; right: 22%; top: 14px; border-radius: 50%; background: #fde2b5; }
.tgm-pic__b { width: 18px; height: 22px; border-radius: 50% 50% 45% 45%; }
.tgm-pic__b::after { content: ''; position: absolute; left: 6px; bottom: -6px; width: 6px; height: 5px; background: #6b4b35; }
.tgm-pic__b--1 { left: 18%; top: 16px; background: #e0574f; }
.tgm-pic__b--2 { left: 36%; top: 30px; width: 14px; height: 17px; background: #f0b429; }
.tgm-pic__b--3 { left: 58%; top: 10px; width: 12px; height: 15px; background: #3a86c8; }
.tgm-pic__b--2::after { left: 4px; width: 5px; }
.tgm-pic__b--3::after { left: 3.5px; width: 5px; }
.tgm-pic__hill { left: -10%; right: 40%; bottom: -40px; height: 70px; border-radius: 50%; background: #c98a5a; }
.tgm-pic__hill--2 { left: 35%; right: -15%; bottom: -46px; height: 72px; background: #b27348; }
.tgm-rx { display: flex; gap: 5px; margin-top: -2px; }
.tgm-rx span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 13px; background: var(--tgm-bubble); box-shadow: 0 1px 2px rgba(16, 35, 47, .12); font-size: 12px; font-weight: 600; color: var(--tgm-blue); }
.tgm-rx .fa-heart { color: #e5484d; }
.tgm-rx .fa-fire { color: #f08c00; }
.tgm-rx .fa-thumbs-up { color: #f0b429; }

/* Alt çubuk: KATIL → SESSİZE AL */
.tgm-bar { position: relative; display: grid; place-items: center; flex: 0 0 auto; height: 48px; background: var(--tgm-bg); border-top: 1px solid var(--tgm-line); font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.tgm-bar > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; padding: 8px 26px; border-radius: 10px; transition: opacity .25s ease, transform .2s ease, background .2s ease; }
.tgm-bar__join { color: var(--tgm-blue); }
.tgm-bar__join.is-hover { background: var(--tgm-soft); }
.tgm-bar__join.is-press { transform: scale(.94); }
.tgm-bar__mute { color: var(--tgm-muted); opacity: 0; }
.tgm-bar.is-joined .tgm-bar__join { opacity: 0; }
.tgm-bar.is-joined .tgm-bar__mute { opacity: 1; }
.tgm-plus { left: 72px; top: 30px; color: var(--tgm-blue); }
.tgm-toast {
    position: absolute;
    left: 50%;
    top: 64px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 16px;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -6px);
    transition: opacity .25s ease, transform .3s ease;
    pointer-events: none;
}
.tgm-toast i { color: #7ee08a; }
.tgm-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.tgm-opt2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Kanal istatistikleri ---------- */
.tgm-end { padding-bottom: 20px; }
.lws--telegram .ohs-win i { color: #5eb5f7; }
.tgm-pane--stats { background: var(--tgm-soft); }
.tgm-head--stats { gap: 16px; }
.tgm-stats { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; padding: 10px 0 0; }
.tgm-sec { display: flex; flex-direction: column; gap: 10px; padding: 12px 18px; background: var(--tgm-bg); }
.tgm-sec__h { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 600; color: var(--tgm-blue); }
.tgm-sec__h small { font-size: 12px; font-weight: 400; color: var(--tgm-muted); }
.tgm-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.tgm-kpi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 7px; min-width: 0; }
.tgm-kpi b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tgm-kpi em { font-style: normal; font-size: 12px; font-weight: 600; color: #31a24c; white-space: nowrap; }
.tgm-kpi small { flex: 1 0 100%; font-size: 12px; color: var(--tgm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgm-sec--chart { flex: 1 1 auto; min-height: 0; }
.tgm-chart { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 70px; }
.tgm-chart__plot { position: relative; flex: 1 1 auto; min-height: 0; }
.tgm-chart__plot > i { position: absolute; left: 0; right: 0; height: 1px; background: var(--tgm-line); }
.tgm-chart__plot > i:nth-child(1) { top: 25%; }
.tgm-chart__plot > i:nth-child(2) { top: 50%; }
.tgm-chart__plot > i:nth-child(3) { top: 75%; }
.tgm-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; clip-path: inset(-4px 100% -4px -4px); transition: clip-path 1.4s cubic-bezier(.4, 0, .2, 1); }
.tgm-chart.is-grow svg, .ohs.is-final .tgm-chart svg { clip-path: inset(-4px -4px -4px -4px); }
.tgm-chart__line { fill: none; stroke: var(--tgm-blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tgm-chart__x { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--tgm-muted); }
.tgm-chart__x small { font-size: inherit; }

/* ---------- Mobil: yalnız kanal ---------- */
@media (max-width: 620px) {
    .tgm-view { gap: 8px; }
    .tgm-app { grid-template-columns: minmax(0, 1fr); }
    .tgm-list { display: none; }
    .tgm-head { gap: 10px; height: 50px; padding: 0 12px; }
    .tgm-head__back { display: inline-block; }
    .tgm-feed { padding: 8px 10px 6px; }
    .tgm-msg { max-width: 92%; }
    .tgm-msg p { font-size: 13px; }
    .tgm-pic { height: 84px; }
    .tgm-plus { left: auto; right: 70px; top: 26px; }
    .tgm-end { padding-bottom: 14px; }
    .tgm-sec { padding: 10px 14px; }
    .tgm-kpis { gap: 8px 12px; }
    .tgm-kpi b { font-size: 16px; }
    .tgm-kpi small { white-space: normal; line-height: 1.25; }
}