/* ==========================================================================
   Betasahm Asset Timeline - Compact & Highly Optimized Frontend Stylesheet
   Inspired heavily by iOS and Google Material Design approach.
   Optimized specifically for mobile devices (extremely compact and clean).
   No emojis used. Icons are SVGs. Zero external dependencies.
   ========================================================================== */

:root {
    --bti-telegram-color: #0088cc;
    --bti-codal-color: #f57c00;
    --bti-post-color: #46b450;
}

/* Timeline Wrapper & Container */
.betasahm-timeline-wrapper {
    position: relative;
    width: 100%;
    margin: 15px auto;
    font-family: 'iransansx', sans-serif;
    direction: rtl;
    text-align: right;
    box-sizing: border-box;
}

.betasahm-timeline-wrapper *,
.betasahm-timeline-wrapper *::before,
.betasahm-timeline-wrapper *::after {
    box-sizing: border-box;
}

.betasahm-timeline-content {
    position: relative;
    width: 100%;
    padding: 10px 0;
}

/* Axis Line (Vertical Center on Desktop) */
.betasahm-timeline-axis-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background-color: var(--border-light);
    transform: translateX(-50%);
    z-index: 1;
}

/* Individual Timeline Items */
.betasahm-timeline-item {
    position: relative;
    width: 100%;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    z-index: 2;
}

/* Alternating Sides for Cards (Desktop) */
.betasahm-timeline-item--left {
    justify-content: flex-start;
}

.betasahm-timeline-item--right {
    justify-content: flex-end;
}

/* Center Dot (Desktop) */
.betasahm-timeline-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2.5px solid var(--card-white);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1.5px var(--border-light);
    transition: transform 0.2s ease;
    z-index: 3;
}

/* Timeline Cards */
.betasahm-timeline-card {
    position: relative;
    width: 46%;
    background-color: var(--card-white);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.betasahm-timeline-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Header Info */
.betasahm-timeline-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.betasahm-timeline-badge {
    color: #ffffff;
    padding: 2px 7px;
    border-radius: 12px;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.2;
}

.betasahm-timeline-date {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
}

/* Card Body */
.betasahm-timeline-card-body {
    width: 100%;
}

.betasahm-timeline-title {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
}

.betasahm-timeline-title a {
    color: var(--headings);
    text-decoration: none;
    transition: color 0.15s ease;
}

.betasahm-timeline-title a:hover {
    color: var(--button-dark);
}

/* Empty State Styling */
.betasahm-timeline-empty {
    text-align: center;
    padding: 25px 15px;
    background-color: var(--card-white);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

/* Skeleton Loaders (Preloader) */
.bti-skeleton-container {
    position: relative;
    width: 100%;
    padding: 10px 0;
}

.bti-skeleton-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background-color: var(--border-light);
    transform: translateX(-50%);
}

.bti-skeleton-item {
    position: relative;
    width: 100%;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

.bti-skeleton-left {
    justify-content: flex-start;
}

.bti-skeleton-right {
    justify-content: flex-end;
}

.bti-skeleton-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.bti-skeleton-card-wrapper {
    width: 46%;
}

.bti-skeleton-card {
    height: 60px;
    width: 100%;
    border-radius: 8px;
}

.bti-skeleton {
    background: linear-gradient(90deg, var(--inner-box-light-gray) 25%, var(--inner-box-gray) 50%, var(--inner-box-light-gray) 75%);
    background-size: 200% 100%;
    animation: bti-shimmer 1.5s infinite;
}

@keyframes bti-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Load More Button Styling */
.betasahm-timeline-load-more-wrapper {
    text-align: center;
    margin-top: 15px;
}

.betasahm-timeline-load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--button-dark);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.betasahm-timeline-load-more-btn:hover {
    opacity: 0.95;
    transform: translateY(-0.5px);
}

.betasahm-timeline-load-more-btn:active {
    transform: translateY(0.5px);
}

.bti-btn-loader {
    width: 16px;
    height: 16px;
    animation: rotate 2s linear infinite;
}

.bti-btn-loader .path {
    stroke: #ffffff;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% { transform: rotate(360deg); }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* Telegram Modal Style Rules */
.bti-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    backdrop-filter: blur(2px);
    direction: rtl;
    text-align: right;
    font-family: 'iransansx', sans-serif;
}

.bti-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.bti-modal-content {
    background: var(--card-white);
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    transform: translateY(15px) scale(0.99);
    transition: all 0.25s ease;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.bti-modal-overlay.active .bti-modal-content {
    transform: translateY(0) scale(1);
}

.bti-modal-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--site-background);
}

.bti-modal-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bti-source-logo {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bti-source-logo svg {
    width: 100%;
    height: 100%;
}

.bti-modal-header-meta {
    display: flex;
    flex-direction: column;
}

.bti-modal-header-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--headings);
}

.bti-modal-header-time {
    font-size: 10px;
    color: var(--text-muted);
}

.bti-modal-close {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
    color: var(--text-muted);
}

.bti-modal-close svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.bti-modal-close:hover {
    color: var(--text-danger);
}

.bti-modal-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

.bti-modal-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--headings);
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.bti-modal-content-text {
    font-size: 13px;
    color: var(--texts);
    line-height: 1.7;
    white-space: pre-wrap;
    padding-top: 5px;
}

/* ==========================================================================
   Mobile Responsiveness & Breakpoints (Extremely compact overview style)
   ========================================================================== */

@media (max-width: 768px) {
    /* For RTL timeline style on mobile, vertical axis line is shifted to the right */
    .betasahm-timeline-axis-line {
        right: 14px;
        left: auto;
        width: 1.5px;
        transform: none;
    }
    
    .betasahm-timeline-item {
        margin-bottom: 12px;
        justify-content: flex-start;
        padding-left: 0;
        padding-right: 28px; /* Compact space on the right for dot & line */
        direction: rtl; 
    }

    .betasahm-timeline-item--left,
    .betasahm-timeline-item--right {
        justify-content: flex-start;
    }
    
    .betasahm-timeline-dot {
        left: auto;
        right: 10px; /* Position dot on the right side concentric with the 14px line */
        width: 10px;
        height: 10px;
        border-width: 2px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Compact card styling for mobile devices */
    .betasahm-timeline-card {
        width: 100%;
        border-radius: 6px;
        padding: 8px 10px;
        box-shadow: none; /* Flatten shadow on mobile for elegant material flat feel */
    }

    .betasahm-timeline-card:hover {
        transform: none; /* No scaling animations on touch screens */
        box-shadow: none;
    }

    .betasahm-timeline-card-header {
        margin-bottom: 4px;
    }

    .betasahm-timeline-title {
        font-size: 12px;
        line-height: 1.45;
    }

    /* Skeleton screen mobile rules matching the right-side layout */
    .bti-skeleton-line {
        right: 14px;
        left: auto;
        width: 1.5px;
        transform: none;
    }

    .bti-skeleton-item {
        margin-bottom: 12px;
        justify-content: flex-start;
        padding-right: 28px;
        padding-left: 0;
        direction: rtl;
    }

    .bti-skeleton-dot {
        left: auto;
        right: 10px;
        width: 10px;
        height: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .bti-skeleton-card-wrapper {
        width: 100%;
        direction: rtl;
    }

    .bti-skeleton-card {
        height: 48px;
        border-radius: 6px;
    }

    /* Elegant compact modal for mobile phones */
    .bti-modal-content {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        transform: translateY(100%);
    }

    .bti-modal-overlay.active .bti-modal-content {
        transform: translateY(0);
    }

    .bti-modal-body {
        padding: 14px;
        padding-bottom: 35px;
    }

    .bti-modal-title {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .bti-modal-content-text {
        font-size: 12.5px;
        line-height: 1.6;
    }
}