/* ============================================================
   DVchi Community: Stylesheet
   ============================================================ */

.dvchi-soc-wrap { font-family: 'Inter', -apple-system, sans-serif; max-width: 860px; margin: 0 auto; }
.dvchi-soc-wrap * { box-sizing: border-box; }

/* ── Shared components ────────────────────────────────── */
.dvchi-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dvchi-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; margin-bottom: 14px; }
.dvchi-loading { color: #9ca3af; font-size: 13px; padding: 20px; text-align: center; }
.dvchi-empty { color: #9ca3af; font-size: 13px; padding: 24px; text-align: center; }
.dvchi-login-prompt { background: #f8f8f4; border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px; text-align: center; font-size: 14px; }
.dvchi-login-prompt a { color: #00C2D4; font-weight: 600; }

/* ── Buttons (fallback if Core CSS not loaded) ───────────── */
.dvchi-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 6px; font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: all .2s; text-decoration: none; white-space: nowrap; }
.dvchi-btn-primary { background: #00C2D4; color: #fff; border-color: #00C2D4; }
.dvchi-btn-primary:hover { background: #0098A8; border-color: #0098A8; color: #fff; }
.dvchi-btn-outline { background: transparent; color: #00C2D4; border-color: #00C2D4; }
.dvchi-btn-outline:hover { background: #00C2D4; color: #fff; }
.dvchi-btn-sm { padding: 7px 14px; font-size: 0.82rem; }
.dvchi-btn-full { width: 100%; justify-content: center; }
.dvchi-btn:disabled { opacity: .6; cursor: not-allowed; }
.dvchi-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dvchi-form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.dvchi-form-field label { font-size: 0.78rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
.dvchi-form-field input, .dvchi-form-field select, .dvchi-form-field textarea {
  width: 100%; padding: 10px 14px; border: 1.5px solid #e5e7eb; border-radius: 6px;
  font-family: inherit; font-size: 0.92rem; color: #111; background: #fff; outline: none;
  transition: border-color .2s;
}
.dvchi-form-field input:focus, .dvchi-form-field select:focus, .dvchi-form-field textarea:focus { border-color: #00C2D4; }
.dvchi-form-field textarea { resize: vertical; min-height: 80px; }

/* ── Composer ─────────────────────────────────────────── */
.dvchi-composer { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.dvchi-composer-top { display: flex; gap: 12px; margin-bottom: 12px; }
.dvchi-composer-top textarea { flex: 1; border: 1.5px solid #e5e7eb; border-radius: 8px; padding: 10px 14px; font-size: 14px; font-family: inherit; resize: none; outline: none; transition: border-color .2s; }
.dvchi-composer-top textarea:focus { border-color: #00C2D4; }
.dvchi-composer-footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Privacy picker */
.dvchi-privacy-wrap { position: relative; }
.dvchi-privacy-btn { padding: 7px 12px; border: 1.5px solid #e5e7eb; border-radius: 8px; background: #fff; font-size: 12px; font-weight: 600; cursor: pointer; color: #374151; display: flex; align-items: center; gap: 5px; transition: border-color .2s; }
.dvchi-privacy-btn:hover { border-color: #00C2D4; color: #00C2D4; }
.dvchi-chevron { font-size: 9px; }
.dvchi-privacy-menu { position: absolute; top: calc(100% + 4px); left: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 240px; z-index: 100; overflow: hidden; }
.dvchi-privacy-option { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; cursor: pointer; transition: background .15s; }
.dvchi-privacy-option:hover { background: #f0f9fb; }
.dvchi-privacy-option.selected { background: #e0f9fc; }
.dpi-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.dvchi-privacy-option strong { font-size: 13px; display: block; color: #111; margin-bottom: 1px; }
.dvchi-privacy-option p { font-size: 11px; color: #9ca3af; margin: 0; }

/* Custom user picker */
.dvchi-custom-users { width: 100%; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px; background: #f8f8f4; margin-top: 8px; }
.dvchi-custom-users input { width: 100%; border: 1.5px solid #e5e7eb; border-radius: 6px; padding: 7px 12px; font-size: 13px; outline: none; }
.dvchi-user-results { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; }
.dvchi-user-result-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.dvchi-user-result-item:hover { background: #e0f9fc; }
.dvchi-user-result-item img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.dvchi-selected-users { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dvchi-selected-chip { background: #00C2D4; color: #fff; font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 999px; display: flex; align-items: center; gap: 5px; }
.dvchi-selected-chip button { background: none; border: none; color: #fff; cursor: pointer; font-size: 13px; padding: 0; line-height: 1; }

.dvchi-composer-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.dvchi-media-btn { font-size: 20px; cursor: pointer; padding: 4px; }

/* ── Feed posts ───────────────────────────────────────── */
.dvchi-post { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 18px; margin-bottom: 12px; transition: box-shadow .2s; }
.dvchi-post:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.07); }
.dvchi-post-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dvchi-post-header .info { flex: 1; }
.dvchi-post-header .name { font-size: 14px; font-weight: 600; color: #111; display: block; }
.dvchi-post-header .meta { font-size: 11px; color: #9ca3af; display: flex; align-items: center; gap: 6px; }
.dvchi-post-header .privacy-tag { background: #f3f4f6; padding: 1px 7px; border-radius: 999px; font-size: 10px; }
.dvchi-post-delete { margin-left: auto; background: none; border: none; font-size: 16px; cursor: pointer; color: #d1d5db; padding: 4px; border-radius: 4px; }
.dvchi-post-delete:hover { color: #ef4444; background: #fee2e2; }
.dvchi-post-content { font-size: 14px; color: #374151; line-height: 1.65; margin-bottom: 12px; }
.dvchi-post-media { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.dvchi-post-media img, .dvchi-post-media video { max-width: 100%; max-height: 320px; object-fit: cover; border-radius: 8px; cursor: pointer; }

/* Post actions */
.dvchi-post-actions { display: flex; gap: 6px; padding-top: 12px; border-top: 1px solid #f3f4f6; }
.dvchi-action-btn { background: none; border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 500; cursor: pointer; color: #6b7280; display: flex; align-items: center; gap: 5px; transition: all .15s; }
.dvchi-action-btn:hover { background: #f0f9fb; border-color: #00C2D4; color: #00C2D4; }
.dvchi-action-btn.liked { background: #fee2e2; border-color: #ef4444; color: #ef4444; }
.dvchi-action-btn span { font-weight: 600; }

/* Comments */
.dvchi-comments { margin-top: 12px; }
.dvchi-comment { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-top: 1px solid #f3f4f6; }
.dvchi-comment .avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dvchi-comment-bubble { background: #f8f8f4; border-radius: 0 10px 10px 10px; padding: 8px 12px; flex: 1; }
.dvchi-comment-bubble strong { font-size: 12px; display: block; color: #111; margin-bottom: 2px; }
.dvchi-comment-bubble p { font-size: 13px; color: #374151; margin: 0; }
.dvchi-add-comment { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.dvchi-add-comment input { flex: 1; border: 1.5px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; font-size: 13px; font-family: inherit; outline: none; }
.dvchi-add-comment input:focus { border-color: #00C2D4; }
.dvchi-add-comment button { background: #00C2D4; color: #fff; border: none; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }

/* ── Groups ───────────────────────────────────────────── */
.dvchi-groups-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dvchi-groups-header h3 { font-size: 18px; font-weight: 700; color: #111; margin: 0; }
.dvchi-groups-filter { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.dvchi-filter-pill { padding: 6px 14px; border-radius: 999px; border: 1.5px solid #e5e7eb; background: #fff; font-size: 12px; font-weight: 500; cursor: pointer; color: #6b7280; transition: all .15s; }
.dvchi-filter-pill.active { background: #00C2D4; border-color: #00C2D4; color: #fff; }
.dvchi-groups-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dvchi-group-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; transition: all .2s; }
.dvchi-group-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.1); transform: translateY(-2px); }
.dvchi-group-cover { height: 90px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; font-size: 36px; }
.dvchi-group-cover--default { background: linear-gradient(135deg, #00C2D4, #0098A8); color: #fff; }
.dvchi-group-body { padding: 14px; }
.dvchi-group-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.dvchi-priv-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #f3f4f6; color: #6b7280; }
.dvchi-priv-badge.pub { background: #e0f9fc; color: #0098A8; }
.dvchi-group-cat { font-size: 10px; color: #9ca3af; margin-left: auto; }
.dvchi-group-body h4 { font-size: 14px; font-weight: 600; color: #111; margin: 0 0 4px; }
.dvchi-group-body p { font-size: 12px; color: #6b7280; margin: 0 0 8px; line-height: 1.5; }
.dvchi-group-stats { display: flex; gap: 12px; font-size: 11px; color: #9ca3af; margin-bottom: 10px; }

/* ── Messages ─────────────────────────────────────────── */
.dvchi-messages-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 14px; max-width: 100%; height: 600px; }
.dvchi-conversations { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.dvchi-msg-search-bar { padding: 12px; border-bottom: 1px solid #f3f4f6; }
.dvchi-msg-search-bar input { width: 100%; border: 1.5px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; font-size: 13px; font-family: inherit; outline: none; }
#dvchi-conv-list { flex: 1; overflow-y: auto; }
.dvchi-conv-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; border-bottom: 1px solid #f3f4f6; transition: background .15s; }
.dvchi-conv-item:hover, .dvchi-conv-item.active { background: #f0f9fb; }
.dvchi-conv-item img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dvchi-conv-item .info { flex: 1; min-width: 0; }
.dvchi-conv-item .name { font-size: 13px; font-weight: 600; color: #111; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dvchi-conv-item .preview { font-size: 11px; color: #9ca3af; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dvchi-conv-item .unread { background: #00C2D4; color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

.dvchi-thread-area { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.dvchi-thread-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f3f4f6; flex-shrink: 0; }
.dvchi-thread-user { display: flex; align-items: center; gap: 10px; flex: 1; }
.dvchi-thread-user img { width: 36px; height: 36px; border-radius: 50%; }
.dvchi-thread-user strong { font-size: 14px; font-weight: 600; color: #111; display: block; }
.dvchi-thread-user span { font-size: 11px; color: #9ca3af; }

/* Encryption toggle: top of messaging window */
.dvchi-enc-toggle { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; border: 1.5px solid #e5e7eb; background: #fff; font-size: 12px; font-weight: 600; cursor: pointer; color: #6b7280; transition: all .2s; }
.dvchi-enc-toggle.encrypted { border-color: #22C55E; color: #22C55E; background: #F0FDF4; }
.dvchi-msg-search-btn { background: none; border: 1px solid #e5e7eb; border-radius: 8px; padding: 5px 10px; font-size: 16px; cursor: pointer; color: #6b7280; }
.dvchi-msg-search-btn:hover { border-color: #00C2D4; }

/* Search panel */
.dvchi-msg-search-panel { padding: 12px 16px; border-bottom: 1px solid #f3f4f6; background: #f8f8f4; }
.dvchi-msg-search-panel input[type="text"] { width: 100%; border: 1.5px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; font-size: 13px; font-family: inherit; outline: none; margin-bottom: 8px; }
.dvchi-search-filters { display: flex; gap: 5px; margin-bottom: 8px; flex-wrap: wrap; }
.dvchi-sf { padding: 4px 10px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; font-size: 11px; cursor: pointer; color: #6b7280; }
.dvchi-sf.on { background: #00C2D4; border-color: #00C2D4; color: #fff; }
.dvchi-date-filters { display: flex; gap: 8px; margin-bottom: 8px; }
.dvchi-date-filters input { flex: 1; border: 1px solid #e5e7eb; border-radius: 6px; padding: 5px 8px; font-size: 12px; font-family: inherit; outline: none; }
#dvchi-search-results { margin-top: 10px; max-height: 200px; overflow-y: auto; }

.dvchi-messages-area { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.dvchi-thread-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: #9ca3af; font-size: 14px; }
.dvchi-bubble { max-width: 70%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.55; }
.dvchi-bubble.mine { align-self: flex-end; background: #00C2D4; color: #fff; border-radius: 12px 12px 2px 12px; }
.dvchi-bubble.theirs { align-self: flex-start; background: #f3f4f6; color: #374151; border-radius: 12px 12px 12px 2px; }
.dvchi-bubble .time { font-size: 10px; opacity: .65; display: block; margin-top: 4px; }
.dvchi-bubble .enc-badge { font-size: 10px; opacity: .7; margin-left: 4px; }

.dvchi-compose-area { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #f3f4f6; flex-shrink: 0; }
.dvchi-attach-btn { background: none; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 10px; font-size: 16px; cursor: pointer; }
#dvchi-msg-input { flex: 1; border: 1.5px solid #e5e7eb; border-radius: 10px; padding: 10px 14px; font-size: 14px; font-family: inherit; outline: none; transition: border-color .2s; }
#dvchi-msg-input:focus { border-color: #00C2D4; }

/* ── Notifications ────────────────────────────────────── */
.dvchi-notif-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.dvchi-notif-header h3 { font-size: 18px; font-weight: 700; color: #111; margin: 0; }
.dvchi-notif-count { background: #00C2D4; color: #fff; font-size: 11px; font-weight: 700; min-width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.dvchi-notif-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid #f3f4f6; border-radius: 10px; margin-bottom: 8px; text-decoration: none; color: inherit; transition: background .15s; }
.dvchi-notif-item:hover { background: #f0f9fb; border-color: #e0f9fc; }
.dvchi-notif-unread { background: #f0f9fb; border-color: #c0f0f8; }
.dvchi-notif-avatar { position: relative; flex-shrink: 0; }
.dvchi-notif-avatar img { width: 40px; height: 40px; border-radius: 50%; }
.dvchi-notif-type-icon { position: absolute; bottom: -2px; right: -4px; font-size: 14px; }
.dvchi-notif-body p { font-size: 13px; color: #374151; margin: 0 0 3px; line-height: 1.5; }
.dvchi-notif-time { font-size: 11px; color: #9ca3af; }

/* ── Members ──────────────────────────────────────────── */
.dvchi-members-header { margin-bottom: 16px; }
.dvchi-members-header h3 { font-size: 18px; font-weight: 700; color: #111; margin: 0; }
.dvchi-members-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dvchi-member-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; text-align: center; transition: all .2s; }
.dvchi-member-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.1); transform: translateY(-2px); }
.dvchi-member-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; border: 3px solid #e0f9fc; display: block; }
.dvchi-member-card h4 { font-size: 14px; font-weight: 600; color: #111; margin: 0 0 4px; }
.dvchi-member-city, .dvchi-member-cuisines { font-size: 12px; color: #6b7280; margin: 2px 0; }
.dvchi-member-stats { font-size: 11px; color: #9ca3af; margin: 6px 0 10px; }

/* ── Profile ──────────────────────────────────────────── */
.dvchi-profile-header { display: flex; gap: 24px; align-items: flex-start; padding: 20px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 20px; }
.dvchi-profile-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid #e0f9fc; flex-shrink: 0; }
.dvchi-profile-info { flex: 1; }
.dvchi-profile-info h2 { font-size: 20px; font-weight: 700; color: #111; margin: 0 0 4px; }
.dvchi-profile-info p { font-size: 13px; color: #6b7280; margin: 4px 0; }
.dvchi-profile-bio { color: #374151 !important; }
.dvchi-profile-stats { display: flex; gap: 16px; margin: 10px 0; font-size: 13px; font-weight: 600; color: #111; }
.dvchi-profile-stats span { display: flex; flex-direction: column; align-items: center; }

/* ── Load more ────────────────────────────────────────── */
.dvchi-loader { text-align: center; color: #9ca3af; font-size: 13px; padding: 20px; }
#dvchi-load-more { margin-top: 16px; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
  .dvchi-messages-wrap { grid-template-columns: 1fr; height: auto; }
  .dvchi-conversations { height: 240px; }
  .dvchi-thread-area { height: 400px; }
  .dvchi-groups-grid { grid-template-columns: repeat(2, 1fr); }
  .dvchi-members-grid { grid-template-columns: repeat(2, 1fr); }
  .dvchi-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .dvchi-groups-grid, .dvchi-members-grid { grid-template-columns: 1fr; }
  .dvchi-profile-header { flex-direction: column; align-items: center; text-align: center; }
}

/* DVchi responsive: prevent iOS auto-zoom on input focus (>=16px on phones) */
@media (max-width: 782px) {
  .dvchi-form-field input, .dvchi-form-field select, .dvchi-form-field textarea, .dvchi-composer-top textarea, .dvchi-custom-users input { font-size: 16px; }
}


/* ==========================================================
   MODERATION CONTROLS (v1.16.0)
   ========================================================== */
.dvchi-soc-report{opacity:.75}
.dvchi-soc-report:hover{opacity:1;color:#b91c1c}

.dvchi-comment{position:relative}
.dvchi-comment-report{
    background:none;border:0;cursor:pointer;color:#9ca3af;
    font-size:15px;line-height:1;padding:6px;margin-left:2px;
    align-self:flex-start;border-radius:6px;
}
.dvchi-comment-report:hover{color:#b91c1c;background:#fef2f2}

.dvchi-md-report,.dvchi-md-block{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;padding:10px 16px;border-radius:8px;
    border:1px solid #d1d5db;background:#fff;color:#374151;
    font-size:15px;font-weight:600;cursor:pointer;line-height:1.2;
}
.dvchi-md-report:hover{border-color:#b91c1c;color:#b91c1c}
.dvchi-md-block:hover{border-color:#111;color:#111}
.dvchi-md-block.is-blocked{background:#111;border-color:#111;color:#fff}

@media (max-width:600px){
    /* Touch targets stay at 44px and controls stack rather than overflow */
    .dvchi-comment-report{padding:10px;font-size:17px}
    .dvchi-md-report,.dvchi-md-block{width:100%}
    .dvchi-md-actions{flex-wrap:wrap;gap:8px}
}


/* ==========================================================
   MODERATION COVERS (v1.17.0)
   ========================================================== */
.dvchi-mod-wrap{margin:0 0 6px}
.dvchi-mod-cover{
    background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;
    padding:20px 18px;text-align:center;
}
.dvchi-mod-ico{font-size:26px;line-height:1;display:block;margin-bottom:8px}
.dvchi-mod-cover h4{margin:0 0 6px;font-size:16px;color:#7c2d12}
.dvchi-mod-cover p{margin:0 0 14px;font-size:14px;color:#7c2d12;line-height:1.5}
.dvchi-mod-btn{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;padding:10px 20px;border:0;border-radius:8px;
    background:#07c5fb;color:#111;font-size:15px;font-weight:700;
    cursor:pointer;text-decoration:none;
}
.dvchi-mod-btn:hover{background:#03b4e8;color:#111}

.dvchi-mod-banner{
    background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;
    padding:10px 14px;margin:0 0 10px;font-size:13.5px;color:#1e3a8a;line-height:1.5;
}

@media (max-width:600px){
    .dvchi-mod-cover{padding:16px 14px}
    .dvchi-mod-btn{width:100%}
}


/* ==========================================================
   FEED FILTERS: username field (v1.18.0)
   ========================================================== */
.dvchi-filter-author{
    min-height:44px;padding:9px 12px;border:1px solid #d1d5db;border-radius:8px;
    font-size:16px;line-height:1.2;background:#fff;color:#111;min-width:190px;flex:1 1 190px;
}
.dvchi-filter-author:focus{border-color:#07c5fb;outline:none;box-shadow:0 0 0 3px rgba(7,197,251,.18)}
.dvchi-filter-author::placeholder{color:#9ca3af}

@media (max-width:600px){
    /* Stack filter controls so nothing overflows on a phone */
    .dvchi-post-filters{flex-wrap:wrap;gap:8px}
    .dvchi-filter-author{width:100%;flex:1 1 100%}
    .dvchi-post-filters select{width:100%}
}


/* ==========================================================
   GROUP PROFILE, MEMBERS, ABOUT (v1.19.0)
   ========================================================== */
.dvchi-groupview-cover{
    width:100%;max-height:260px;overflow:hidden;border-radius:12px 12px 0 0;background:#f3f4f6;
}
.dvchi-groupview-cover img{width:100%;height:100%;object-fit:cover;display:block;max-height:260px}
.dvchi-groupview-header.has-cover{margin-top:-38px;position:relative}

.dvchi-groupview-idrow{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.dvchi-group-avatar{
    width:88px;height:88px;border-radius:16px;overflow:hidden;flex:0 0 auto;
    background:#07c5fb;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.12);
    display:flex;align-items:center;justify-content:center;
}
.dvchi-group-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.dvchi-group-avatar-fallback{font-size:38px;font-weight:800;color:#111;line-height:1}
.dvchi-groupview-idtext{flex:1 1 220px;min-width:0}
.dvchi-groupview-idtext h2{margin:0 0 4px;word-break:break-word}
.dvchi-group-loc{white-space:nowrap}

/* Primary group actions: bigger text, brand blue */
.dvchi-group-cta,.dvchi-gv-cta,.dvchi-group-manage-btn{
    font-size:16px;font-weight:700;min-height:46px;padding:11px 22px;
    border-radius:8px;line-height:1.2;
}
.dvchi-group-cta,.dvchi-gv-cta{background:#07c5fb;border:1px solid #07c5fb;color:#111}
.dvchi-group-cta:hover,.dvchi-gv-cta:hover{background:#03b4e8;border-color:#03b4e8;color:#111}
.dvchi-leave-btn{background:#07c5fb;border:1px solid #07c5fb;color:#111}
.dvchi-leave-btn:hover{background:#03b4e8;border-color:#03b4e8;color:#111}
.dvchi-group-manage-btn{background:#fff;border:1px solid #d1d5db;color:#111}
.dvchi-group-manage-btn:hover{border-color:#07c5fb;color:#111}

/* Members tab */
.dvchi-gmembers-h{margin:0 0 14px;font-size:19px}
.dvchi-gmembers-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;
}
.dvchi-gmember-card{
    border:1px solid #e5e7eb;border-radius:12px;padding:16px 12px;text-align:center;background:#fff;
}
.dvchi-gmember-link{display:block;text-decoration:none;color:inherit}
.dvchi-gmember-link img{border-radius:50%;margin:0 auto 8px;display:block}
.dvchi-gmember-link strong{display:block;font-size:15px;word-break:break-word}
.dvchi-gmember-login{display:block;color:#6b7280;font-size:13px;margin-bottom:8px;word-break:break-all}
.dvchi-gmember-mod{display:flex;gap:6px;justify-content:center;margin-top:10px;flex-wrap:wrap}

.dvchi-mini-btn{
    min-height:36px;padding:7px 12px;border:1px solid #d1d5db;border-radius:7px;
    background:#fff;color:#374151;font-size:13px;font-weight:600;cursor:pointer;line-height:1.2;
}
.dvchi-mini-btn:hover{border-color:#111;color:#111}
.dvchi-mini-btn.is-blocked{background:#111;border-color:#111;color:#fff}
.dvchi-member-mod{display:flex;gap:6px;justify-content:center;margin-top:8px;flex-wrap:wrap}

/* About tab / group profile editor */
.dvchi-gabout-label{display:block;font-weight:700;margin:16px 0 6px;font-size:14px}
.dvchi-gabout-edit input[type="text"],.dvchi-gabout-edit textarea{
    width:100%;max-width:100%;padding:11px 12px;border:1px solid #d1d5db;border-radius:8px;
    font-size:16px;font-family:inherit;line-height:1.5;box-sizing:border-box;
}
.dvchi-gabout-edit textarea{resize:vertical;min-height:130px}
.dvchi-gabout-images{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.dvchi-gabout-imgblock{flex:1 1 220px;min-width:0}
.dvchi-gabout-imgblock label{display:block;font-weight:700;margin-bottom:6px;font-size:14px}
.dvchi-gabout-preview{
    width:100%;height:120px;border:1px dashed #d1d5db;border-radius:10px;overflow:hidden;
    background:#f9fafb;margin-bottom:8px;display:flex;align-items:center;justify-content:center;
}
.dvchi-gabout-preview img{width:100%;height:100%;object-fit:cover}
.dvchi-gabout-file{font-size:14px;max-width:100%}
.dvchi-gabout-save{margin-top:18px;font-size:16px;font-weight:700;min-height:46px;padding:11px 22px;background:#07c5fb;border:1px solid #07c5fb;color:#111;border-radius:8px}
.dvchi-gabout-save:hover{background:#03b4e8;border-color:#03b4e8}
.dvchi-gabout-msg{margin-left:12px;font-size:14px;color:#047857}
.dvchi-gabout-msg.error{color:#b91c1c}
.dvchi-gabout-text{line-height:1.65}
.dvchi-gabout-loc{color:#374151;font-weight:600}

/* Manage panel: visible pressed state */
.dvchi-gm-btn{transition:background .12s,border-color .12s,opacity .12s}
.dvchi-gm-btn:active{transform:translateY(1px)}
.dvchi-gm-btn:disabled{opacity:.55;cursor:not-allowed}
.dvchi-gm-btn.is-busy{background:#07c5fb;border-color:#07c5fb;color:#111;opacity:1;font-weight:700}

/* Delete-group re-authentication dialog */
.dvchi-gd-overlay{
    position:fixed;inset:0;background:rgba(17,17,17,.6);z-index:100050;
    display:flex;align-items:center;justify-content:center;padding:16px;
}
.dvchi-gd-box{
    background:#fff;border-radius:14px;padding:24px;width:100%;max-width:420px;
    box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.dvchi-gd-box h3{margin:0 0 8px;font-size:19px;color:#b91c1c}
.dvchi-gd-box p{margin:0 0 14px;font-size:14px;color:#374151;line-height:1.5}
.dvchi-gd-label{display:block;font-weight:700;font-size:14px;margin:12px 0 6px}
.dvchi-gd-box input{
    width:100%;padding:11px 12px;border:1px solid #d1d5db;border-radius:8px;
    font-size:16px;box-sizing:border-box;
}
.dvchi-gd-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.dvchi-gd-actions .dvchi-btn{min-height:44px;padding:11px 18px;font-size:15px;font-weight:700;flex:1 1 auto}
.dvchi-gd-confirm{background:#b91c1c;border:1px solid #b91c1c;color:#fff}
.dvchi-gd-confirm:hover{background:#991b1b}
.dvchi-gd-msg{margin-top:12px;font-size:14px}
.dvchi-gd-msg.error{color:#b91c1c}

/* Activity timeline delete */
.dvchi-act-toolbar{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    padding:10px 0 14px;border-bottom:1px solid #e5e7eb;margin-bottom:8px;
}
.dvchi-act-selectall{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;cursor:pointer}
.dvchi-act-selectall input{width:18px;height:18px}
.dvchi-activity-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid #f3f4f6}
.dvchi-activity-row .dvchi-activity-item{flex:1 1 auto;min-width:0;border-bottom:0}
.dvchi-act-check{width:18px;height:18px;flex:0 0 auto;cursor:pointer}
.dvchi-act-del{
    background:none;border:0;color:#9ca3af;font-size:20px;line-height:1;
    padding:10px;cursor:pointer;border-radius:6px;flex:0 0 auto;min-width:40px;min-height:40px;
}
.dvchi-act-del:hover{color:#b91c1c;background:#fef2f2}
.dvchi-act-note{margin-top:14px;font-size:12.5px;color:#6b7280;line-height:1.5}

@media (max-width:600px){
    .dvchi-groupview-cover,.dvchi-groupview-cover img{max-height:170px}
    .dvchi-group-avatar{width:72px;height:72px}
    .dvchi-group-cta,.dvchi-gv-cta,.dvchi-gabout-save{width:100%}
    .dvchi-gmembers-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
    .dvchi-gabout-images{gap:14px}
    .dvchi-gd-actions .dvchi-btn{flex:1 1 100%}
    .dvchi-activity-row{gap:8px}
}

/* ══════════════════════════════════════════════════════════════
   v1.36.0  Post media thumbnails

   1.35.0 made this a full width grid, which on a wide screen meant
   three tiles roughly 500px square: still a wall, just a tidier one.
   It now uses fixed size thumbnails that wrap, matching the strip
   under a review comment. A post with media takes about one line of
   vertical space instead of half a screen, and the viewer is how you
   see anything at size.
════════════════════════════════════════════════════════════════ */
.dvchi-post-media{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:10px 0 12px;
    max-width:100%;
}

.dvchi-mtile{
    position:relative;
    display:block;
    width:104px;
    height:104px;
    flex:0 0 104px;
    padding:0;
    margin:0;
    border:1px solid #e5e7eb;
    border-radius:10px;
    background:#eef1f4;
    cursor:pointer;
    overflow:hidden;
}
.dvchi-mtile img,
.dvchi-mtile video{
    width:100%;
    height:100%;
    /* cover, not contain. contain letterboxes a portrait clip inside a
       square tile and the grey bands read as a broken image. */
    object-fit:cover!important;
    display:block;
    pointer-events:none;
}
.dvchi-mtile:hover{border-color:#07c5fb;}
.dvchi-mtile:focus-visible{outline:3px solid #07c5fb;outline-offset:2px;}

.dvchi-mtile-play{
    position:absolute;
    left:50%;
    top:50%;
    width:34px;
    height:34px;
    margin:-17px 0 0 -17px;
    border-radius:50%;
    background:rgba(17,17,17,.62);
    pointer-events:none;
}
.dvchi-mtile-play::after{
    content:'';
    position:absolute;
    left:13px;
    top:10px;
    border-style:solid;
    border-width:7px 0 7px 11px;
    border-color:transparent transparent transparent #fff;
}

/* Past four, the extras stay in the document so the viewer can step
   through them, but are not laid out. The fourth carries a +N badge. */
.dvchi-mtile.is-overflow{display:none;}
.dvchi-mtile[data-more]::after{
    content:'+' attr(data-more);
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(17,17,17,.55);
    color:#fff;
    font-size:22px;
    font-weight:800;
}

/* Voice notes sit under the strip as a normal audio row. */
.dvchi-post-audio{display:flex;flex-direction:column;gap:8px;margin:0 0 12px;}
.dvchi-audio-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border:1px solid #e5e7eb;
    border-radius:999px;
    background:#f7f9fb;
    max-width:420px;
}
.dvchi-audio-ico{font-size:18px;flex:0 0 auto;}
.dvchi-audio-item audio{flex:1 1 auto;min-width:0;height:36px;}

@media (max-width:600px){
    .dvchi-mtile{width:88px;height:88px;flex:0 0 88px;}
    .dvchi-audio-item{max-width:100%;}
}

/* ══════════════════════════════════════════════════════════════
   v1.35.0  Media viewer
════════════════════════════════════════════════════════════════ */
.dvchi-mview{
    position:fixed;
    inset:0;
    z-index:100000;
    background:rgba(17,17,17,.9);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
            max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}
.dvchi-mview-stage{
    display:flex;
    align-items:center;
    justify-content:center;
    max-width:100%;
    max-height:100%;
}
.dvchi-mview-stage img,
.dvchi-mview-stage video{
    max-width:100%;
    max-height:100%;
    border-radius:10px;
    display:block;
    background:#000;
}
.dvchi-mview-close{
    position:absolute;
    top:12px;
    right:12px;
    min-width:44px;
    min-height:44px;
    border:0;
    border-radius:10px;
    background:rgba(255,255,255,.92);
    color:#111;
    font-size:22px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
}
.dvchi-mview-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:52px;
    height:52px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.9);
    color:#111;
    font-size:30px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}
.dvchi-mview-prev{left:12px;}
.dvchi-mview-next{right:12px;}
.dvchi-mview-count{
    position:absolute;
    bottom:14px;
    left:50%;
    transform:translateX(-50%);
    padding:5px 12px;
    border-radius:999px;
    background:rgba(17,17,17,.72);
    color:#fff;
    font-size:13px;
    font-weight:700;
}
@media (max-width:600px){
    /* Arrows to the bottom corners, within thumb reach and off the photo.
       Swipe works too. */
    .dvchi-mview-nav{top:auto;bottom:12px;transform:none;width:48px;height:48px;font-size:26px;}
    .dvchi-mview-prev{left:16px;}
    .dvchi-mview-next{right:16px;}
    .dvchi-mview-count{bottom:26px;}
}

/* Tiles past the fourth stay in the document so the viewer can step through
   them, but are not laid out. */
.dvchi-mtile.is-overflow{display:none;}

/* ══════════════════════════════════════════════════════════════
   v1.36.0  Collapsible comment composer

   Collapsed it is one line: avatar plus a placeholder button. Open
   it and it becomes a bordered box with a textarea and a tools row,
   matching the review comment composer, so the two read as the same
   control rather than two different products.
════════════════════════════════════════════════════════════════ */
.dvchi-add-comment{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:10px;
}
.dvchi-cc-av{
    width:32px;
    height:32px;
    flex:0 0 32px;
    border-radius:50%;
    object-fit:cover;
}

/* Collapsed state */
.dvchi-cc-open{
    display:none;
    flex:1 1 auto;
    min-width:0;
    text-align:left;
    min-height:40px;
    padding:10px 14px;
    border:1px solid #d1d5db;
    border-radius:999px;
    background:#f7f9fb;
    color:#6b7280;
    font-size:14.5px;
    font-family:inherit;
    cursor:pointer;
}
/* v1.37.0: the theme paints every button in the dashboard cyan, and it was
   winning here, so the collapsed comment bar rendered as a solid cyan block
   instead of a quiet grey pill. Forced, in line with how the rest of this
   stylesheet has to defend itself against the theme. */
.dvchi-cc-open{
    background:#f7f9fb!important;
    color:#6b7280!important;
    border:1px solid #d1d5db!important;
    font-weight:400!important;
    box-shadow:none!important;
}
.dvchi-cc-open:hover{border-color:#07c5fb!important;background:#fff!important;color:#111!important;}
.dvchi-add-comment.is-collapsed .dvchi-cc-open{display:block;}
.dvchi-add-comment.is-collapsed .dvchi-cc-wrap{display:none;}

/* Open state */
.dvchi-cc-wrap{
    flex:1 1 auto;
    min-width:0;
    border:1px solid #d1d5db;
    border-radius:12px;
    background:#fff;
    padding:10px;
    box-sizing:border-box;
    transition:border-color .12s ease, box-shadow .12s ease;
}
.dvchi-cc-wrap:focus-within{
    border-color:#07c5fb;
    box-shadow:0 0 0 3px rgba(7,197,251,.18);
}
.dvchi-add-comment .dvchi-comment-input{
    width:100%;
    display:block;
    border:0!important;
    outline:none!important;
    box-shadow:none!important;
    background:transparent;
    resize:vertical;
    min-height:60px;
    padding:2px 2px 6px;
    /* 16px stops iOS zooming the page when it is focused */
    font-size:16px;
    line-height:1.5;
    font-family:inherit;
    color:#111;
}

.dvchi-cc-tools{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px;
    padding-top:8px;
    border-top:1px solid #f1f3f5;
}
.dvchi-cc-attach{display:flex;flex-wrap:wrap;gap:8px;}
.dvchi-cc-send{display:flex;gap:8px;align-items:center;}

/* Attach and Voice are secondary, so outlined rather than filled cyan,
   which previously competed with Post for attention. */
.dvchi-add-comment .dvchi-cc-btn,
.dvchi-cmt-edit .dvchi-cc-btn,
.dvchi-post-edit .dvchi-cc-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:40px;
    padding:8px 14px;
    border:1px solid #d1d5db!important;
    border-radius:8px;
    background:#fff!important;
    color:#374151!important;
    font-size:13.5px;
    font-weight:700;
    cursor:pointer;
    width:auto;
}
.dvchi-add-comment .dvchi-cc-btn:hover,
.dvchi-cmt-edit .dvchi-cc-btn:hover,
.dvchi-post-edit .dvchi-cc-btn:hover{border-color:#07c5fb!important;color:#111!important;}



/* Post matches every other primary button on the site. */
.dvchi-add-comment .dvchi-comment-submit{
    min-height:44px;
    padding:10px 22px;
    border:0;
    border-radius:10px;
    background:#07c5fb;
    color:#062b36;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    width:auto;
}
.dvchi-add-comment .dvchi-comment-submit:hover{filter:brightness(1.06);}
.dvchi-add-comment .dvchi-comment-submit:disabled{opacity:.6;cursor:progress;}

@media (max-width:600px){
    .dvchi-cc-attach,
    .dvchi-cc-send{flex:1 1 100%;}
    .dvchi-cc-attach .dvchi-cc-btn{flex:1 1 calc(50% - 4px);justify-content:center;}
    .dvchi-cc-send{justify-content:flex-end;}
}

@media (prefers-reduced-motion:reduce){
    .dvchi-cc-wrap{transition:none;}
}

/* v1.36.0: the attach button is an SVG now, so it needs sizing rather than
   inheriting a font size. */
.dvchi-media-btn svg{width:20px;height:20px;display:block;color:#374151;}
.dvchi-media-btn:hover svg{color:#07c5fb;}


/* ══════════════════════════════════════════════════════════════
   v1.37.0  Composer voice button and menu overflow
════════════════════════════════════════════════════════════════ */
.dvchi-voice-btn{
    cursor:pointer;
    min-width:44px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #d1d5db!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#374151!important;
    padding:0 12px!important;
    flex:0 0 auto;
}
.dvchi-voice-btn:hover{border-color:#07c5fb!important;color:#07c5fb!important;}
.dvchi-voice-btn svg{display:block;}

/* The menu opens upward from a button near the bottom of the composer. With
   four items it overflowed the panel and the first was clipped. It is capped
   and scrolls rather than being cut off, and flips below when there is more
   room underneath. */
.dvchi-media-menu{
    max-height:min(60vh, 320px);
    overflow-y:auto!important;
}
@media (max-width:600px){
    .dvchi-media-menu{
        left:0;
        right:0;
        min-width:0;
        width:auto;
    }
    .dvchi-composer-actions{gap:8px;}
    .dvchi-composer-actions .dvchi-media-hint{flex:1 1 100%;order:3;}
}

/* ══════════════════════════════════════════════════════════════
   v1.38.0  Comment buttons match the main composer

   Icon only, square, same paperclip and microphone as the post
   composer above them, so attaching means the same thing wherever
   you are on the page. Labelled for screen readers, since an icon
   with no text is meaningless without one.
════════════════════════════════════════════════════════════════ */
.dvchi-add-comment .dvchi-cc-btn,
.dvchi-cmt-edit .dvchi-cc-btn,
.dvchi-post-edit .dvchi-cc-btn{
    width:44px;
    min-width:44px;
    height:40px;
    padding:0!important;
    justify-content:center;
    gap:0;
    border-radius:10px!important;
}
.dvchi-add-comment .dvchi-cc-btn svg,
.dvchi-cmt-edit .dvchi-cc-btn svg,
.dvchi-post-edit .dvchi-cc-btn svg{display:block;}
.dvchi-add-comment .dvchi-cc-btn:hover,
.dvchi-cmt-edit .dvchi-cc-btn:hover,
.dvchi-post-edit .dvchi-cc-btn:hover{border-color:#07c5fb!important;color:#07c5fb!important;}
.dvchi-add-comment .dvchi-cc-btn:focus-visible,
.dvchi-cmt-edit .dvchi-cc-btn:focus-visible,
.dvchi-post-edit .dvchi-cc-btn:focus-visible{
    outline:3px solid rgba(7,197,251,.45);
    outline-offset:2px;
}

@media (max-width:600px){
    /* Icon buttons stay their size on a phone rather than stretching to
       half the row, which is what the old text buttons did. */
    .dvchi-cc-attach .dvchi-cc-btn{flex:0 0 44px;}
    .dvchi-cc-tools{gap:8px;}
    .dvchi-cc-send{margin-left:auto;}
}

/* ══════════════════════════════════════════════════════════════
   v1.39.0  Attach menu, editing, and delete with undo

   The attach button now opens a menu, because it offers three routes to
   the same place: choose a file, take a photo, record a video. The
   microphone stays outside the menu, one tap away.
════════════════════════════════════════════════════════════════ */
.dvchi-cc-attach{position:relative;}
.dvchi-cc-menu{
    position:absolute;
    left:0;
    bottom:calc(100% + 6px);
    z-index:60;
    min-width:200px;
    padding:6px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.14);
}
.dvchi-cc-menu[hidden]{display:none;}
.dvchi-cc-opt{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    min-height:44px;
    padding:10px 12px;
    /* The theme paints every button in the dashboard, which turned these
       three menu rows into filled cyan blocks that looked nothing like the
       outlined paperclip and microphone they belong to. Anything in here
       that should not be cyan has to say so with !important. */
    border:0!important;
    border-radius:8px!important;
    background:none!important;
    background-image:none!important;
    background-color:transparent!important;
    box-shadow:none!important;
    color:#374151!important;
    font-size:14px;
    font-weight:700;
    text-align:left;
    text-transform:none!important;
    letter-spacing:normal;
    cursor:pointer;
}
.dvchi-cc-opt:hover{
    background:#f2fbff!important;
    background-color:#f2fbff!important;
    color:#111!important;
}

.dvchi-cc-msg{font-size:12.5px;color:#6b7280;}
.dvchi-cc-msg:not(:empty){margin:6px 0;}
.dvchi-cc-msg.is-error{color:#b91c1c;font-weight:700;}

/* ── Edit boxes ────────────────────────────────────────────── */
.dvchi-cc-field{
    padding:10px;
    border:1px solid #d1d5db;
    border-radius:12px;
    background:#fff;
}
.dvchi-cc-field:focus-within{
    border-color:#07c5fb;
    box-shadow:0 0 0 3px rgba(7,197,251,.16);
}
.dvchi-cc-field textarea{
    width:100%;
    margin:0;
    padding:0;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    background:transparent;
    resize:vertical;
    /* 16px stops iOS zooming the page when the field takes focus. */
    font-size:16px;
    line-height:1.45;
    color:#111;
}
.dvchi-post-edit[hidden],
.dvchi-cmt-edit[hidden]{display:none;}
.dvchi-post-edit,
.dvchi-cmt-edit{margin:8px 0;}

.dvchi-cmt-editnote{margin:6px 0;font-size:12px;color:#6b7280;}
.dvchi-cmt-editacts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;}
.dvchi-cmt-editacts button{min-height:44px;padding:10px 18px;border-radius:8px;font-weight:800;cursor:pointer;}
.dvchi-post-editcancel,
.dvchi-cmt-editcancel{border:1px solid #d1d5db;background:#fff;color:#374151;}
.dvchi-post-editcancel:hover,
.dvchi-cmt-editcancel:hover{border-color:#07c5fb;color:#111;}
.dvchi-post-editsave,
.dvchi-cmt-editsave{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid #07c5fb;
    background:#07c5fb;
    color:#fff;
}
.dvchi-post-editsave:hover,
.dvchi-cmt-editsave:hover{background:#06b2e3;border-color:#06b2e3;}
.dvchi-spin{
    display:none;
    width:14px;
    height:14px;
    border:2px solid rgba(255,255,255,.45);
    border-top-color:#fff;
    border-radius:50%;
    animation:dvchi-spin .7s linear infinite;
}
.dvchi-post-editsave.is-busy .dvchi-spin,
.dvchi-cmt-editsave.is-busy .dvchi-spin{display:inline-block;}
.dvchi-post-editsave.is-busy,
.dvchi-cmt-editsave.is-busy{opacity:.85;cursor:progress;}
@keyframes dvchi-spin{to{transform:rotate(360deg);}}

.dvchi-post-edit-btn{
    border:0;
    background:none;
    padding:4px 8px;
    font-size:16px;
    line-height:1;
    color:#6b7280;
    cursor:pointer;
}
.dvchi-post-edit-btn:hover{color:#07c5fb;}

.dvchi-cmt-own{display:flex;gap:10px;margin-top:6px;}
.dvchi-cmt-own[hidden]{display:none;}
.dvchi-cmt-own button{
    border:0;
    background:none;
    padding:4px 0;
    font-size:12.5px;
    font-weight:800;
    color:#6b7280;
    cursor:pointer;
}
.dvchi-cmt-edit-btn:hover{color:#07c5fb;}
.dvchi-cmt-del:hover{color:#b91c1c;}
.dvchi-cmt-own button:disabled{opacity:.5;cursor:default;}

/* ── Crosses on the attachments already on the row ─────────── */
.dvchi-ed-cell{position:relative;display:inline-block;line-height:0;}
.dvchi-ed-x{
    position:absolute;
    top:2px;
    right:2px;
    width:24px;
    height:24px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(17,17,17,.72);
    color:#fff;
    font-size:16px;
    line-height:1;
    cursor:pointer;
    z-index:3;
}
.dvchi-ed-x:hover{background:#b91c1c;}
.dvchi-ed-cell.is-gone .dvchi-mtile{opacity:.35;}
.dvchi-ed-cell.is-gone::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(to top left, transparent 47%, #b91c1c 47%, #b91c1c 53%, transparent 53%);
}
.dvchi-ed-cell.is-gone .dvchi-ed-x{background:#b91c1c;}
.dvchi-ed-audio{position:relative;}
.dvchi-ed-audio.is-gone{opacity:.35;}
.dvchi-ed-audio.is-gone .dvchi-ed-x{background:#b91c1c;}
/* While editing, every attachment has to be reachable. The overflow rule
   that hides everything past the fourth tile is lifted, or a post holding
   twelve photos would show four with no way to remove the rest. */
.is-editing .dvchi-mtile.dvchi-was-overflow{display:block!important;}
.is-editing.dvchi-post-view .dvchi-mgrid,
.is-editing .dvchi-mgrid{
    padding:6px;
    border:1px dashed #cbd5e1;
    border-radius:10px;
    background:#fafafa;
}

/* ── The edited marker ─────────────────────────────────────── */
.dvchi-edited{
    font-size:12px;
    font-style:italic;
    color:#6b7280;
    cursor:help;
}
/* The attachment marker reads differently from the text one so the two
   are distinguishable at a glance. */
.dvchi-medited{color:#7a6a45;}

/* ── Delete with a short undo ──────────────────────────────── */
.dvchi-undo-bar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin:8px 0;
    padding:10px 12px;
    border:1px solid #e5e7eb;
    border-radius:10px;
    background:#f9fafb;
    font-size:14px;
    color:#374151;
}
.dvchi-undo-bar[hidden]{display:none;}
.dvchi-undo-txt{flex:1 1 auto;}
.dvchi-undo-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:44px;
    padding:8px 16px;
    border:1px solid #07c5fb;
    border-radius:8px;
    background:#07c5fb;
    color:#fff;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
}
.dvchi-undo-btn:hover{background:#06b2e3;border-color:#06b2e3;}
.dvchi-undo-btn:disabled{opacity:.6;cursor:default;}
.dvchi-undo-count{
    display:inline-block;
    min-width:22px;
    padding:1px 5px;
    border-radius:999px;
    background:rgba(255,255,255,.28);
    font-variant-numeric:tabular-nums;
    text-align:center;
}
/* A row being held for undo shows the bar and nothing else, so the feed
   does not jump twice: once on delete and again when the window closes. */
.dvchi-post.is-deleted > *:not(.dvchi-undo-bar){display:none!important;}
.dvchi-comment.is-deleted > *:not(.dvchi-undo-bar){display:none!important;}
.dvchi-comment.is-deleted{display:block;}

@media (max-width:600px){
    .dvchi-cc-menu{left:0;right:0;min-width:0;}
    .dvchi-undo-btn{flex:1 1 100%;justify-content:center;}
    .dvchi-cmt-editacts button{flex:1 1 100%;}
    .dvchi-cc-field{padding:9px;}
}

@media (prefers-reduced-motion:reduce){
    .dvchi-spin{animation:none;}
}

/* ══════════════════════════════════════════════════════════════
   v1.39.0  Attachment chips and the upload progress bar

   These class names have been emitted since v1.35.0 and were never styled
   anywhere in the plugin. The chips rendered as bare inline spans and the
   progress bar as an empty div with no height, which is why an upload from
   a comment box showed nothing at all while it ran.

   That is the same trap as the post media tiles, the collapsible composer
   and the category chips: correct markup that nobody had styled, reading as
   a missing feature. Deliberately unscoped, so the add a comment box and
   both edit boxes are served by one rule set.
════════════════════════════════════════════════════════════════ */
.dvchi-cc-chips{display:flex;flex-wrap:wrap;gap:6px;}
.dvchi-cc-chips:not(:empty){margin:8px 0;}
.dvchi-cc-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    max-width:100%;
    padding:5px 10px;
    border:1px solid #e5e7eb;
    border-radius:999px;
    background:#f9fafb;
    font-size:12.5px;
    color:#374151;
    overflow-wrap:anywhere;
}
.dvchi-cc-chip button,
.dvchi-cc-chipx{
    flex:0 0 auto;
    padding:0 2px;
    border:0;
    background:none;
    color:#6b7280;
    font-size:15px;
    line-height:1;
    cursor:pointer;
}
.dvchi-cc-chip button:hover,
.dvchi-cc-chipx:hover{color:#b91c1c;}

.dvchi-cc-prog{margin:8px 0;}
.dvchi-cc-prog[hidden]{display:none;}
.dvchi-cc-bar{
    height:8px;
    border-radius:999px;
    background:#eef2f5;
    overflow:hidden;
}
.dvchi-cc-bar span{
    display:block;
    height:100%;
    width:0;
    border-radius:999px;
    background:#07c5fb;
    transition:width .18s ease;
}
.dvchi-cc-progtxt{margin:6px 0 0;font-size:12.5px;color:#6b7280;}

@media (prefers-reduced-motion:reduce){
    .dvchi-cc-bar span{transition:none;}
}