/* ── base wrap ── */
.vstory-wrap{
    max-width:720px;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1a1a1a}

.vstory-heading{font-size:20px;font-weight:600;margin:0 0 24px}
.vstory-divider{border:none;border-top:1px solid #e5e5e5;margin:0}
     
        /* ── compose block: pure block layout, no flex ── */
.vstory-compose{padding:0 0 24px}
     
        /* row 1: avatar + name */
.vstory-compose .vc-user-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.vstory-compose .vc-user-header .vc-avatar{flex-shrink:0}
.vstory-compose .vc-user-header .vc-user-name{font-size:15px;font-weight:600;color:#1a1a1a}
     
        /* row 2: editor box — full width */
.vstory-compose .vce-wrap{width:100%;box-sizing:border-box}
     
        /* error notice */
.vc-compose-notice{font-size:13px;color:#c0392b;margin-top:6px}
     
        /* ── unified editor box ── */
.vce-wrap{border:1px solid #d4d4d4;border-radius:10px;background:#fff;overflow:hidden;transition:border-color .15s;box-sizing:border-box}
.vce-wrap:focus-within{border-color:#aaa}
     
        /* text area */
.vce-body{padding:14px 16px;min-height:90px;font-size:16px;line-height:1.65;color:#1a1a1a;outline:none;word-break:break-word;white-space:pre-wrap}
.vce-body:empty::before{content:attr(data-placeholder);color:#b0b0b0;pointer-events:none}
.vce-body b,.vce-body strong{font-weight:700}
        .vce-body i,.vce-body em{font-style:italic}

        /* bottom action bar — inside the box */
        .vce-bottom-bar{display:flex;align-items:center;gap:4px;padding:8px 12px;background:#fff}
        .vce-bottom-bar 
.vce-fmt-btn{background:none;border:none;cursor:pointer;padding:4px 7px;border-radius:5px;font-size:20px;font-weight:700;color:#555;line-height:1;transition:background .1s;font-family:inherit}
        .vce-bottom-bar .vce-fmt-btn:hover{background:none;
color:#0057FF!important;}
        .vce-bottom-bar .vce-fmt-btn.active{background:none;color:#0057FF}
        .vce-bottom-bar .vce-emoji-btn{background:none;border:none;cursor:pointer;padding:3px 6px;border-radius:5px;font-size:18px;line-height:1;transition:background .1s}
        .vce-bottom-bar .vce-emoji-btn:hover{background:white; color: #0057FF;}
        .vce-bottom-bar .vce-emoji-btn:focus{background:white; color: #0057FF;}
        
        .vce-bottom-bar .vce-sep{width:1px;height:16px;background:#ddd;margin:0 6px;flex-shrink:0}
        .vce-bottom-bar .vce-spacer{flex:1}
        .vce-bottom-bar .vce-post-btn{background-color:none;border:none;padding:0 2px;font-size:14px;font-weight:600;color:#1a1a1a;cursor:pointer;font-family:inherit;letter-spacing:.01em;transition:color .12s}
        .vce-bottom-bar .vce-post-btn:hover{background-color: white; color:#0057FF;}

.vce-bottom-bar .vce-post-btn:focus{background-color: white; color:#0057FF;}

        .vce-bottom-bar .vce-post-btn:disabled{opacity:.4;cursor:not-allowed}
     
        /* emoji full panel */
        .vce-emoji-panel{display:none;flex-wrap:wrap;gap:2px;padding:8px;max-height:160px;overflow-y:auto;border:1px solid #ddd;border-top:none;background:#fff}
        .vce-emoji-panel.open{display:flex}
        .vce-emoji-panel span{cursor:pointer;font-size:20px;padding:3px;border-radius:4px;line-height:1;transition:background .1s}
        .vce-emoji-panel span:hover{background:#f0f0f0}
     
        /* ── avatar base ── */
        .vc-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;background:#e0e0e0;flex-shrink:0}
        .vc-avatar img{width:100%;height:100%;object-fit:cover;display:block}
        .vc-avatar.small{width:34px;height:34px}
     
        /* ── small editor (replies) ── */
        .vce-wrap.small .vce-body{min-height:56px;font-size:16px;padding:10px 12px}
        .vce-wrap.small .vce-bottom-bar{padding:6px 10px}
        .vce-wrap.small .vce-bottom-bar .vce-fmt-btn{font-size:12px;padding:3px 5px}
        .vce-wrap.small .vce-bottom-bar .vce-emoji-btn{font-size:15px}
        .vce-wrap.small .vce-bottom-bar .vce-post-btn{font-size:13px}
     
        /* ── comment list (unchanged) ── */
        .vstory-comment-item{padding:20px 0}
        .vstory-comment-item .vc-row{display:flex;gap:14px;align-items:flex-start}
        .vstory-comment-item .vc-body{flex:1;min-width:0}
        .vstory-comment-item .vc-meta{margin-bottom:6px}
        .vstory-comment-item .vc-name{font-size:15px;font-weight:600;color:#1a1a1a}
        .vstory-comment-item .vc-date{font-size:13px;color:#999;margin-top:1px}
        .vstory-comment-item .vc-text{font-size:14px;line-height:1.65;color:#333;margin:0}
        .vstory-comment-item .vc-actions{display:flex;gap:20px;margin-top:10px;align-items:center}
        .vstory-comment-item .vc-actions button{background:none;border:none;padding:0;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;color:#555;transition:color .12s}
        .vstory-comment-item .vc-actions button:hover{color:#1a1a1a}
        .vstory-comment-item .vc-actions .vc-delete-btn{color:#c0392b}
        .vstory-comment-item .vc-actions .vc-delete-btn:hover{color:#96281b}
     
        .vstory-replies-block{display:none;margin-top:14px;padding-left:54px}
        .vstory-replies-block.open{display:block}
        .vstory-reply-item{padding:14px 0;border-top:1px solid #f0f0f0}
        .vstory-reply-item:first-child{border-top:none;padding-top:0}
        .vstory-reply-item .vc-row{display:flex;gap:12px;align-items:flex-start}
        .vstory-reply-item .vc-body{flex:1;min-width:0}
        .vstory-reply-item .vc-name{font-size:14px;font-weight:600;color:#1a1a1a}
        .vstory-reply-item .vc-date{font-size:12px;color:#999;margin-top:1px}
        .vstory-reply-item .vc-text{font-size:13px;line-height:1.65;color:#333;margin:0}
        .vstory-reply-item .vc-actions{display:flex;gap:16px;margin-top:8px}
        .vstory-reply-item .vc-actions button{background:none;border:none;padding:0;font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;color:#555}
        .vstory-reply-item .vc-actions button:hover{color:#1a1a1a}
        .vstory-reply-item .vc-actions .vc-delete-btn{color:#c0392b}
     
        .vstory-reply-form{display:none;margin-top:14px}
        .vstory-reply-form.open{display:flex;gap:12px;align-items:flex-start}
        .vstory-comment-item > .vstory-reply-form{padding-left:54px}
        .vstory-replies-block .vstory-reply-form{padding-left:0;margin-top:10px}
        .vstory-reply-form .vc-fields{flex:1}
        .vstory-reply-form .vrf-notice{font-size:12px;color:#c0392b;margin-top:4px}
        
        .vce-bottom-bar .vce-emoji-btn{color:#555;display:flex;align-items:center;justify-content:center;}
        .vce-bottom-bar .vce-emoji-btn:hover{background:#f0f0f0;color:#1a1a1a;}
        
        .vstory-reply-form .vrf-cancel{background-color: white;border:none;color:#888;font-size:13px;cursor:pointer;font-family:inherit;padding:0;margin-top:6px;display:inline-block;}
        .vstory-reply-form .vrf-cancel:hover{background-color: white; color:#0057FF;}
        .vstory-reply-form .vrf-cancel:focus{background-color: white; color:#0057FF;}
     
        .vstory-login-prompt{padding:16px;border:1px dashed #ddd;border-radius:8px;text-align:center;font-size:14px;color:#666;margin:20px 0}
        .vstory-login-prompt a{color:#1a1a1a;font-weight:500}