/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .ce-v6-container {
        margin: 0;
        padding: 0;
        border-radius: 0;
        border: none;
        box-shadow: none;
        background: var(--ce-mobile-bg, #fff);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        height: 100%;
        overflow-y: auto;
    }

    #comment-engine-v6 { 
        margin: 0; 
        padding: var(--ce-space-md) var(--ce-space-sm);
    }

    .ce-v6-header { 
        padding: var(--ce-space-sm) 0; 
        margin-bottom: var(--ce-space-md); 
        border-bottom-color: var(--ce-glass-border);
    }
    .ce-v6-auth-tabs { flex-direction: row; }
    .ce-v6-tab-btn { padding: var(--ce-space-sm); font-size: 0.9rem; }
    .ce-v6-avatar-selection { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }

    .ce-toast {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
        border-radius: var(--ce-radius-md);
    }

    /* --- Start Gemini Chat Input Redesign --- */

    .ce-v6-comment-form {
        /* Make form a container for the chat bar, sticky at the bottom */
        position: sticky;
        bottom: 0;
        padding: 8px;
        margin: 0 -8px -8px; /* Extend to screen edges */
        background: var(--ce-mobile-bg, #fff);
        border-top: 1px solid var(--ce-glass-border);
        gap: var(--ce-space-sm);
        z-index: 100; /* Ensure it's on top */
    }

    /* Hide avatar on mobile for a cleaner chat-like UI */
    .ce-v6-comment-form .ce-v6-avatar {
        display: none;
    }

    /* The new chat bar */
    .ce-v6-comment-input-wrapper {
        background: var(--ce-mobile-bg-elevated, #f0f0f0);
        border-radius: 24px; /* Pill shape */
        padding: 4px;
        align-items: flex-end; /* Align buttons to bottom */
        gap: 4px;
        border: 1px solid transparent;
    }
    .ce-v6-comment-input-wrapper:focus-within {
        border-color: var(--ce-primary);
        box-shadow: none;
        background: var(--ce-mobile-bg-elevated, #f0f0f0);
    }

    .ce-v6-comment-textarea {
        background: transparent;
        padding: 10px;
        min-height: 28px;
        height: 28px;
        line-height: 1.4;
        border-radius: 0;
        border: none;
        resize: none;
    }
    .ce-v6-comment-textarea:focus {
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .ce-v6-comment-actions {
        margin-left: 0;
        padding-right: 0;
        gap: 4px;
    }

    .ce-v6-media-btn {
        width: 36px;
        height: 36px;
        background: transparent;
        color: var(--ce-text-secondary);
    }
    .ce-v6-media-btn:hover {
        background: rgba(0,0,0,0.05);
        color: var(--ce-text-primary);
    }

    .ce-v6-btn-primary-glass {
        width: 36px;
        height: 36px;
        padding: 0;
        font-size: 1.2rem;
        border-radius: 50%;
    }
    .ce-v6-btn-primary-glass span {
        display: none; /* Hide text on mobile */
    }
    .ce-v6-btn-primary-glass i {
        margin: 0;
    }

    /* --- End Gemini Chat Input Redesign --- */

    .ce-v6-comment-card {
        gap: var(--ce-space-sm) var(--ce-space-md);
        grid-template-columns: 36px 1fr;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        width: 100%;
        max-width: 100%;
    }
    .ce-v6-comment-header {
        gap: 0 var(--ce-space-sm);
        flex-wrap: wrap;
        min-width: 0;
        align-items: flex-start;
    }
    .ce-v6-comment-avatar { 
        width: 36px; 
        height: 36px; 
    }
    .ce-v6-comment-username { font-size: 0.9rem; min-width: 0; }
    .ce-v6-comment-meta { font-size: 0.8rem; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }

    /* Place username (flex) and timestamp (fixed) in one row and keep layout stable */
    .ce-v6-comment-user-info{ 
        display: grid; 
        grid-template-columns: 1fr auto; 
        gap: 4px 8px; 
        align-items: center; 
        min-width: 0;
    }
    .ce-v6-comment-user-info .ce-v6-comment-username{ 
        grid-column:1; 
        min-width: 0; 
        overflow: hidden; 
        text-overflow: ellipsis; 
        white-space: nowrap; 
    }
    /* Let meta's children participate directly in the grid */
    .ce-v6-comment-user-info .ce-v6-comment-meta{ display: contents; }
    .ce-v6-comment-user-info .ce-v6-live-clock{ grid-column:2; justify-self: end; margin:0; }
    /* Hide other meta items on phones to keep the row clean */
    .ce-v6-comment-user-info .ce-v6-comment-meta > :not(.ce-v6-live-clock){ display: none !important; }

    /* hide HOT badge to save space on phones */
    .ce-v6-hot-badge{ display:none !important; }
    .ce-v6-comment-content { 
        font-size: 0.95rem; 
        line-height: 1.55;
    }

    .ce-v6-comment-actions {
        gap: var(--ce-space-md);
        margin-top: var(--ce-space-sm);
    }
    .ce-v6-comment-votes { background: var(--ce-mobile-bg-elevated); }
    .ce-v6-reaction-btn { flex: 0 1 auto; justify-content: center; padding: 0.5rem 0.7rem; }
    .ce-v6-btn-primary-glass { width: auto; font-size: 1rem; }

    .ce-v6-comment-form .ce-v6-media-buttons { gap: 0.5rem; }
    .ce-v6-media-preview { max-width: 100%; }

    .ce-v6-comment-media { 
        max-width: 100%; 
        border-radius: var(--ce-radius-lg); 
        margin-top: var(--ce-space-sm);
    }
    .ce-v6-comment-media img,
    .ce-v6-comment-media video { 
        max-height: clamp(200px, 65vw, 320px); 
        border-radius: inherit; 
        object-fit: cover;
        width: 100%;
    }
    .ce-v6-xpbar, .ce-v6-level-badge { display: none; }

    .ce-v6-comment-body.ce-v6-body-has-image {
        display: flex;
        flex-direction: column;
        gap: var(--ce-space-sm);
    }
    .ce-v6-comment-body.ce-v6-body-has-image .ce-v6-comment-media {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .ce-v6-comments-list { gap: var(--ce-space-lg); padding: 0; }
    #comment-engine-v6, .ce-v6-container, .ce-v6-comments-list { overflow-x: hidden; }

    /* Freshness/Hot badges shrink & wrap */
    .ce-v6-freshness-badge, .ce-v6-hot-badge {
        transform: scale(0.92);
        transform-origin: left center;
        max-width: 100%;
        white-space: nowrap;
    }

    :root {
        /* Clean, unified indentation for mobile replies */
        --ce-reply-indent: 16px;
        --ce-reply-indent-nested: 0px; /* No extra indent for nested replies to stack them */
        --ce-thread-line-color: rgba(28, 37, 54, 0.12);
    }

    .ce-v6-comment-replies {
        grid-column: 1 / -1; /* Span full width to ignore parent avatar indent */
        gap: var(--ce-space-lg);
        padding-left: var(--ce-reply-indent);
    }

    .ce-v6-comment-replies::before {
        left: 0; /* Position thread line at the start of the padding area */
        transform: translateX(8px); /* Center the line within the padding */
        width: 2px;
    }

    .ce-v6-comment-replies .ce-v6-comment-avatar {
        width: 28px;
        height: 28px;
    }

    #ce-v6-sortbar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #ce-v6-sortbar .ce-v6-sort-tabs {
        min-width: max-content;
        display: inline-flex;
        gap: 8px;
        scroll-snap-type: x mandatory;
        padding-bottom: 4px;
    }
    #ce-v6-sortbar .ce-v6-sort-btn {
        white-space: nowrap;
        padding: 8px 14px;
        border-radius: 999px;
        scroll-snap-align: start;
        font-size: 0.9rem;
        background: var(--ce-mobile-bg-elevated);
        color: var(--ce-text-secondary);
    }
    #ce-v6-sortbar .ce-v6-sort-btn.active {
        background: var(--ce-primary);
        color: #fff;
    }

    .ce-v6-hot-section, #comment-engine-v6 .ce-v6-smart-topbar { display: none; }

    .ce-v6-lightbox-content { flex-direction: column; width: 100%; max-height: none; height: 100%; padding: 0; }
    .ce-v6-lightbox { padding: 0; background: rgba(0,0,0,0.9); }
    .ce-v6-lightbox-media { flex: 1 0 auto; padding: 10px; }
    .ce-v6-thread-panel { 
        max-height: 45vh; 
        flex: 1; 
        border-radius: 16px 16px 0 0; 
        background: var(--ce-mobile-bg);
    }
}