:root {
        --fb-blue: #1877f2;
        --fb-hover: #166fe5;
        --fb-bg: #f0f2f5;
        --fb-card: #ffffff;
        --fb-border: #ced0d4;
        --fb-text-primary: #050505;
        --fb-text-secondary: #65676b;
        --fb-text-tertiary: #8a8d91;
    }

    .tiptap-editor-min{
        border: 1px solid #d4d4d4;
        border-top: 0px;
        overflow: hidden;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    

    .create-post-card {
        /* background: var(--fb-card);
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); */
        overflow: hidden;
        width: 100%;
    }

    .post-header {
        padding: 12px 16px;
        border-bottom: 1px solid var(--fb-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .post-title {
        font-size: 20px;
        font-weight: 700;
        color: var(--fb-text-primary);
    }

    .close-btn {
        background: none;
        border: none;
        font-size: 24px;
        color: var(--fb-text-secondary);
        cursor: pointer;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
    }

        .close-btn:hover {
            background: var(--fb-bg);
        }

    .user-info {
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--fb-blue), #667eea);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 18px;
    }

    .user-details {
        flex: 1;
    }

    .user-name {
        font-size: 15px;
        font-weight: 600;
        color: var(--fb-text-primary);
        margin-bottom: 2px;
    }

    .privacy-btn {
        background: var(--fb-bg);
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 13px;
        color: var(--fb-text-secondary);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-weight: 600;
    }

        .privacy-btn:hover {
            background: #e4e6eb;
        }

    .editor-wrapper {
        padding: 16px;
        min-height: 120px;
        max-height: 400px;
        overflow-y: auto;
    }

        .editor-wrapper::-webkit-scrollbar {
            width: 8px;
        }

        .editor-wrapper::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 4px;
        }

    #editorElement {
        min-height: 120px;
    }

    .ProseMirror {
        outline: none;
        padding: 16px 0;
    }

        .ProseMirror p.is-editor-empty:first-child::before {
            content: attr(data-placeholder);
            color: var(--fb-text-tertiary);
            pointer-events: none;
            height: 0;
            float: left;
        }

        .ProseMirror p, .ProseMirror li {
            margin: 0;
            font-size: 15px;
            line-height: 1.3333;
            color: var(--fb-text-primary);
        }

        .ProseMirror h1 {
            font-size: 24px;
            font-weight: 700;
            margin: 16px 0 8px 0;
        }

        .ProseMirror h2 {
            font-size: 20px;
            font-weight: 600;
            margin: 16px 0 8px 0;
        }

        .ProseMirror h3 {
            font-size: 18px;
            font-weight: 600;
            margin: 16px 0 8px 0;
        }

        .ProseMirror strong {
            font-weight: 700;
        }

        .ProseMirror em {
            font-style: italic;
        }

        .ProseMirror u {
            text-decoration: underline;
        }

        .ProseMirror s {
            text-decoration: line-through;
        }

        /* Text alignment */
        .ProseMirror [style*="text-align: center"] {
            text-align: center;
        }

        .ProseMirror [style*="text-align: right"] {
            text-align: right;
        }

        .ProseMirror [style*="text-align: justify"] {
            text-align: justify;
        }

        .ProseMirror img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 8px 0;
        }

        .ProseMirror div[data-youtube-video],
        .ProseMirror div[data-vimeo-video] {
            position: relative;
            margin: 8px 0;
            max-width: 480px;
        }

            .ProseMirror div[data-youtube-video] iframe,
            .ProseMirror div[data-vimeo-video] iframe {
                width: 100%;
                height: 270px;
                border-radius: 8px;
                border: none;
            }

        .ProseMirror div[data-vimeo-video] {
            padding-bottom: 56.25%;
            height: 0;
        }

            .ProseMirror div[data-vimeo-video] iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

    .video-remove-btn {
        position: absolute;
        top: 8px;
        right: 8px;
        background: rgba(0, 0, 0, 0.7);
        border: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 20px;
        z-index: 10;
        transition: background 0.2s;
    }

        .video-remove-btn:hover {
            background: rgba(0, 0, 0, 0.9);
        }

    .image-preview {
        position: relative;
        margin: 8px 0;
        display: inline-block;
    }

    .remove-image {
        position: absolute;
        top: 8px;
        right: 8px;
        background: rgba(255, 255, 255, 0.9);
        border: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #050505;
        z-index: 10;
    }

        .remove-image:hover {
            background: white;
        }

    .add-to-post {
        padding: 8px 16px;
        margin-top: 8px;
    }

    .post-length {
        font-size: 12px;
        color: var(--fb-text-secondary);
        text-align: right;
        margin-bottom: 4px;
    }

        .post-length.warning {
            color: #f5533d;
        }

    .add-label {
        font-size: 15px;
        font-weight: 600;
        color: var(--fb-text-primary);
        margin-bottom: 8px;
    }

    .media-options {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--fb-border);
        border-radius: 8px;
        padding: 8px 12px;
    }

    .media-options-left {
        display: flex;
        gap: 4px;
    }

    .media-btn {
        background: none;
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        font-size: 24px;
    }

        .media-btn:hover:not(.has-media) {
            background: var(--fb-bg);
        }

        .media-btn.photo {
            color: #45bd62;
        }

            .media-btn.photo.has-media {
                opacity: 0.7;
            }

                .media-btn.photo.has-media:hover {
                    opacity: 0.9;
                    background: rgba(69, 189, 98, 0.1);
                }

        .media-btn.tag {
            color: #1877f2;
        }

        .media-btn.emoji {
            color: #f7b928;
        }

        .media-btn.location {
            color: #f5533d;
        }

        .media-btn.gif {
            color: #54c7ec;
        }

    .more-btn {
        background: none;
        border: none;
        color: var(--fb-text-secondary);
        font-size: 24px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
    }

        .more-btn:hover {
            background: var(--fb-bg);
        }

    .post-footer {
        padding: 12px 16px;
    }

    .post-btn {
        width: 100%;
        background: var(--fb-blue);
        color: white;
        border: none;
        padding: 10px;
        border-radius: 6px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s;
    }

        .post-btn:hover:not(:disabled) {
            background: var(--fb-hover);
        }

        .post-btn:disabled {
            background: var(--fb-bg);
            color: var(--fb-text-tertiary);
            cursor: not-allowed;
        }

    .formatting-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
        padding: 8px 16px;
        border-top: 1px solid var(--fb-border);
        border-bottom: 1px solid var(--fb-border);
        background: #fafafa;
    }

    .format-group {
        display: flex;
        gap: 2px;
    }

    .format-btn {
        background: none;
        border: none;
        /*width: 32px;
        height: 32px;*/
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--fb-text-secondary);
        font-size: 16px;
        transition: all 0.2s;
    }

        .format-btn:hover {
            background: var(--fb-bg);
        }

        .format-btn.active {
            background: var(--fb-blue);
            color: white;
        }

    .emoji-picker {
        position: absolute;
        background: white;
        border: 1px solid var(--fb-border);
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
        width: 320px;
        max-height: 320px;
        padding: 12px;
        z-index: 1000;
    }

    .emoji-search {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid var(--fb-border);
        border-radius: 20px;
        font-size: 14px;
        margin-bottom: 8px;
        outline: none;
    }

        .emoji-search:focus {
            border-color: var(--fb-blue);
        }

    .emoji-list {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 4px;
        max-height: 240px;
        overflow-y: auto;
    }

    .emoji-item {
        font-size: 28px;
        cursor: pointer;
        padding: 6px;
        border-radius: 6px;
        text-align: center;
        transition: background 0.2s;
        user-select: none;
    }

        .emoji-item:hover {
            background: var(--fb-bg);
        }

    .hidden {
        display: none;
    }

    .post-length {
        font-size: 12px;
        color: var(--fb-text-secondary);
        text-align: right;
        margin-bottom: 4px;
    }

        .post-length.warning {
            color: #f5533d;
        }

    #postStatus {
        margin-top: 8px;
        font-size: 12px;
        text-align: center;
        transition: all 0.3s ease;
    }

        #postStatus.uploading {
            color: var(--fb-blue);
        }

.editor-placeholder {
  border: 1px solid #ddd;
  padding: 12px;
  border-radius: 6px;
  color: #666;
  cursor: text;
  min-height: 80px;
}

.hidden { display: none; }
.is-inactive { display: none; pointer-events: none; }

/* .editor-element {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.editor-element.hidden {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
}

.close-btn,
.formatting-bar,
.add-to-post,
.post-footer {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.close-btn.is-inactive,
.formatting-bar.is-inactive,
.add-to-post.is-inactive,
.post-footer.is-inactive {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
} */


.tagged-user {
  color: #1877f2;
  font-weight: 600;
}

.tag-popup {
  position: absolute;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  z-index: 9999;
}

.tag-item {
  padding: 6px 10px;
  cursor: pointer;
}

.tag-item:hover {
  background: #f0f2f5;
}

.create-post-card .tiptap-editor .editor-wrapper{padding:0px;}