/* ========================================
   PCARD MOBILE - Responsive Adjustments
   ======================================== */
@media (max-width: 640px) {

    /* Full width on mobile - Break out of container padding */
    .pcard {
        margin-left: -16px;
        margin-right: -16px;
        width: calc(100% + 32px);
        margin-bottom: 0;
        /* Remove gap */
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom: 8px solid var(--color-surface-hover);
        /* Thicker lighter color padding/divider */
        -webkit-tap-highlight-color: transparent;
    }

    /* Prevent hover/active glitches on mobile touch */
    .pcard:hover,
    .pcard:active,
    .pcard:focus {
        border-top-color: var(--color-surface-hover);
        border-bottom-color: var(--color-surface-hover);
        background: var(--color-pcard-bg);
    }

    /* Footer Row Layout */
    .pcard__footer {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        /* Reduced from 12px */
        padding: 8px 12px;
        /* reduced padding */
        border-radius: 0;
        height: 50px;
        /* Reduced height */
    }

    .pcard__footer-left {
        gap: 4px;
        /* Reduced from 6px */
        justify-content: flex-start;
        padding-bottom: 0;
        border-bottom: none;
        width: auto;
        /* Allow flexible width */
        flex: 1;
        /* Take available space */
        max-width: 65%;
        /* Cap at 65% */
        min-width: 0;
        display: flex;
        align-items: center;
    }

    .pcard__footer-right {
        gap: 8px;
        /* Reduced from 12px */
        justify-content: flex-end;
        width: auto;
        flex: 0 0 auto;
        /* Auto width */
        max-width: 35%;
        display: flex;
        align-items: center;
    }

    /* Hide Whisper on Mobile to save space */
    .pcard__stat--whisper {
        display: none !important;
    }

    .pcard__text {
        padding: 10px 12px 12px;
    }

    .pcard__stat span {
        font-size: 11px;
        /* Smaller text */
    }

    .pcard__stat i,
    .pcard__stat svg {
        width: 17px;
        /* Smaller icons from 20px */
        height: 17px;
    }

    /* User Pill: Border Box for Avatar + Name */
    /* User Pill: Reset to clean style */
    .pcard__user-pill {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
        gap: 6px !important;
        /* Reduced gap */
    }

    .pcard__user-pill .pcard__footer-avatar {
        width: auto !important;
        height: auto !important;
        border-radius: 0;
        overflow: visible;
        display: inline-flex;
    }

    .pcard__user-pill .pcard__footer-avatar .avatar,
    .pcard__user-pill .pcard__footer-avatar .avatar-page {
        width: 18px !important;
        /* Smaller avatar */
        height: 18px !important;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .pcard__user-pill .pcard__footer-avatar .avatar img,
    .pcard__user-pill .pcard__footer-avatar .avatar-page img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    .pcard__user-pill .pcard__footer-name {
        font-size: 12px;
        /* Smaller font */
        line-height: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 70px;
        /* Stricter limit */
    }

    /* Metadata sizing and color */
    .pcard__footer-time,
    .pcard__vis i,
    .pcard__vis svg {
        font-size: 10px;
        /* Smaller */
        color: var(--color-text-muted);
    }

    /* Vertical Divider between User Pill and Time */
    .pcard__footer-time {
        border-inline-start: 1px solid var(--color-border);
        padding-inline-start: 6px;
        /* Reduced */
        margin-inline-start: 6px;
        /* Reduced */
        line-height: 1;
        height: 10px;
        display: flex;
        align-items: center;
    }

    .pcard__vis {
        margin-inline-start: 2px;
    }

    /* Hide "You" badge on mobile to save space, or just show minimal dot */
    .badge-own {
        display: none !important;
    }

    /* Post menu: Bottom sheet style on mobile */
    .pcard__options-backdrop {
        position: fixed;
        inset: 0;
        background: var(--color-nav-bg);
        z-index: 999;
    }

    .pcard__options-menu {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        inset-inline-end: auto !important;
        width: 100% !important;
        max-width: none !important;
        margin-bottom: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        border: 1px solid var(--color-border) !important;
        border-bottom: none !important;
        background: var(--color-surface) !important;
        padding: 8px 16px env(safe-area-inset-bottom, 24px) !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1) !important;
        z-index: 1000 !important;
        display: flex;
        flex-direction: column;
    }

    .pcard__options-handle {
        width: 36px;
        height: 4px;
        background: var(--color-border);
        border-radius: 2px;
        margin: 4px auto 16px;
        flex-shrink: 0;
    }

    .pcard__options-item {
        padding: 14px 16px !important;
        font-size: 15px !important;
        border-radius: 12px !important;
        gap: 16px !important;
        margin-bottom: 4px;
    }

    .pcard__options-item i,
    .pcard__options-item svg {
        width: 20px !important;
        height: 20px !important;
        opacity: 0.9 !important;
    }

    .pcard__options-divider {
        margin: 8px 0 !important;
        background: var(--color-border) !important;
    }

    .pcard__options-confirm-view {
        padding: 8px 0 16px !important;
        border-top: none !important;
    }

    .pcard__options-confirm-text {
        font-size: 15px !important;
        text-align: center;
        margin-bottom: 20px !important;
    }

    .pcard__options-confirm-btns {
        gap: 12px !important;
    }

    .pcard__options-btn {
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px !important;
        border-radius: 12px;
        background: var(--color-surface-hover);
        text-align: center !important;
    }

    .pcard__options-btn--delete {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444 !important;
    }
}