/* ============================================================
   CapiTareas — style.css v2 (Calendar + Comments + Collabs)
   CapiByte © 2026
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green:       #2ecc71;
  --green-dark:  #27ae60;
  --green-dim:   #1a5c38;
  --green-glow:  rgba(46,204,113,.15);
  --bg:          #0f1117;
  --bg-2:        #161b27;
  --bg-3:        #1e2538;
  --bg-4:        #252d42;
  --border:      rgba(255,255,255,.07);
  --border-2:    rgba(255,255,255,.12);
  --text-1:      #f0f2f8;
  --text-2:      #9aa3b8;
  --text-3:      #606882;
  --urgent:      #e74c3c;
  --urgent-bg:   rgba(231,76,60,.15);
  --high:        #e67e22;
  --high-bg:     rgba(230,126,34,.15);
  --medium:      #f1c40f;
  --medium-bg:   rgba(241,196,15,.15);
  --low:         #2ecc71;
  --low-bg:      rgba(46,204,113,.15);
  --radius:      10px;
  --radius-lg:   16px;
  --shadow:      0 8px 32px rgba(0,0,0,.5);
  --transition:  .18s ease;
  --sidebar-w:   260px;
}

html, body { height:100%; font-family:'Inter',sans-serif; background:var(--bg); color:var(--text-1); font-size:14px; line-height:1.5; overflow:hidden; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--bg-4); border-radius:99px; }

body { display:flex; height:100vh; }

/* ── Sidebar ─────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w); min-width:var(--sidebar-w);
  background:var(--bg-2); border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  transition:width var(--transition), min-width var(--transition);
  z-index:100; overflow:hidden;
}
.sidebar.collapsed { width:0; min-width:0; }

.sidebar-header { padding:20px 16px 16px; border-bottom:1px solid var(--border); }
.logo-wrap { display:flex; align-items:center; gap:10px; }
.logo-img { width:38px; height:38px; object-fit:contain; border-radius:8px; }
.logo-fallback { display:none; width:38px; height:38px; background:var(--green-dim); border-radius:8px; align-items:center; justify-content:center; font-size:20px; }
.logo-name { font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:700; }
.logo-accent { color:var(--green); }
.logo-sub { font-size:10px; color:var(--text-3); letter-spacing:.5px; text-transform:uppercase; }
.logo-text { display:flex; flex-direction:column; }

.sidebar-section-label { padding:14px 16px 6px; font-size:10px; font-weight:600; color:var(--text-3); letter-spacing:1.2px; text-transform:uppercase; }

.project-list, .collab-list { padding:0 8px; overflow-y:auto; }
.collab-list { max-height:180px; }

.project-item {
  display:flex; align-items:center; gap:8px;
  padding:9px 10px; border-radius:var(--radius); cursor:pointer;
  transition:background var(--transition); margin-bottom:2px;
  border:1px solid transparent;
}
.project-item:hover { background:var(--bg-3); }
.project-item.active { background:var(--green-glow); border-color:rgba(46,204,113,.25); }
.project-item-icon { width:26px; height:26px; background:var(--bg-4); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.project-item.active .project-item-icon { background:var(--green-dim); }
.project-item-info { flex:1; min-width:0; }
.project-item-name { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-item.active .project-item-name { color:var(--green); }
.project-item-sub { font-size:10px; color:var(--text-3); }
.project-mini-bar { height:2px; background:var(--bg-4); border-radius:99px; margin-top:3px; overflow:hidden; }
.project-mini-fill { height:100%; background:var(--green); border-radius:99px; transition:width .4s ease; }

/* Collaborator items in sidebar */
.collab-item {
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:var(--radius); margin-bottom:2px;
  transition:background var(--transition);
}
.collab-item:hover { background:var(--bg-3); }
.collab-avatar {
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; flex-shrink:0;
  border:2px solid transparent;
}
.collab-name { font-size:12px; color:var(--text-2); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.collab-delete { background:none; border:none; color:var(--text-3); cursor:pointer; font-size:12px; padding:2px 4px; border-radius:4px; transition:color var(--transition); }
.collab-delete:hover { color:var(--urgent); }

.project-item-actions {
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: 0;
  transition: opacity var(--transition);
  flex-shrink: 0;
}
.project-item:hover .project-item-actions { opacity: 1; }

.project-action-btn {
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 24px;
  height: 24px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  color: var(--text-3);
  padding: 0;
}
.project-action-btn:hover { background: var(--bg-3); border-color: var(--green); }
.project-action-delete:hover { border-color: var(--urgent) !important; }

.project-finished-badge {
  font-size: 9px;
  font-weight: 600;
  background: var(--green-glow);
  color: var(--green);
  border-radius: 4px;
  padding: 1px 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
  margin-left: 4px;
}

.project-item.finished .project-item-name { color: var(--text-3); }
.project-item.finished .project-mini-fill { background: var(--green); opacity: 0.5; }

.btn-new-project {
  margin:8px 8px 0; padding:9px 14px;
  background:transparent; border:1px dashed var(--border-2);
  border-radius:var(--radius); color:var(--text-2);
  font-size:12px; font-family:inherit; cursor:pointer;
  display:flex; align-items:center; gap:6px;
  transition:all var(--transition); width:calc(100% - 16px);
}
.btn-new-project:hover { border-color:var(--green); color:var(--green); background:var(--green-glow); }

/* ── Main ───────────────────────────────────── */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; }

.empty-app { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:40px; }
.empty-icon { font-size:56px; opacity:.4; margin-bottom:8px; }
.empty-app h2 { font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:700; }
.empty-app p { color:var(--text-2); line-height:1.7; }

.project-view { flex:1; display:flex; flex-direction:column; overflow:hidden; }

/* ── Topbar ─────────────────────────────────── */
.topbar {
  padding:14px 24px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--bg-2); flex-shrink:0;
}
.topbar-left { display:flex; align-items:center; gap:12px; min-width:0; }
.sidebar-toggle { background:var(--bg-3); border:1px solid var(--border); color:var(--text-2); border-radius:8px; width:32px; height:32px; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all var(--transition); }
.sidebar-toggle:hover { background:var(--bg-4); color:var(--text-1); }
.project-title { font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-desc { font-size:11px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:300px; }
.topbar-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.progress-wrap { display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.progress-label { font-size:10px; color:var(--text-3); }
.progress-bar-bg { width:120px; height:4px; background:var(--bg-4); border-radius:99px; overflow:hidden; }
.progress-bar-fill { height:100%; background:linear-gradient(90deg,var(--green-dark),var(--green)); border-radius:99px; transition:width .5s ease; width:0; }

.topbar-avatars { display:flex; gap:4px; }
.topbar-avatar {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; cursor:pointer;
  border:2px solid transparent;
  transition:all var(--transition); opacity:.5;
}
.topbar-avatar.active { opacity:1; transform:scale(1.1); }
.topbar-avatar-all {
  width:28px; height:28px; border-radius:50%;
  background:var(--bg-4); border:1px solid var(--border-2);
  display:flex; align-items:center; justify-content:center;
  font-size:9px; color:var(--text-2); cursor:pointer;
  transition:all var(--transition); opacity:.6;
  font-weight:600;
}
.topbar-avatar-all.active { opacity:1; border-color:var(--green); color:var(--green); }

.filter-select { background:var(--bg-3); border:1px solid var(--border); border-radius:8px; color:var(--text-2); font-family:inherit; font-size:12px; padding:6px 10px; cursor:pointer; outline:none; }
.filter-select:focus { border-color:var(--green); }
.btn-add-task { padding:7px 14px; background:var(--green); border:none; border-radius:8px; color:#0f1117; font-size:12px; font-weight:600; font-family:inherit; cursor:pointer; transition:all var(--transition); white-space:nowrap; }
.btn-add-task:hover { background:var(--green-dark); transform:translateY(-1px); }
.btn-icon-only { background:var(--bg-3); border:1px solid var(--border); border-radius:8px; width:32px; height:32px; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--transition); color:var(--text-2); }
.btn-icon-only:hover { background:var(--bg-4); }
.btn-danger-soft:hover { border-color:var(--urgent); color:var(--urgent); }

/* ── Calendar Nav ───────────────────────────── */
.cal-nav {
  display:flex; align-items:center; gap:12px;
  padding:12px 24px; border-bottom:1px solid var(--border);
  background:var(--bg-2); flex-shrink:0;
}
.cal-nav-btn { background:var(--bg-3); border:1px solid var(--border); border-radius:8px; width:32px; height:32px; font-size:20px; color:var(--text-2); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--transition); }
.cal-nav-btn:hover { background:var(--bg-4); color:var(--text-1); }
.cal-month-title { font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:700; color:var(--text-1); flex:1; }
.cal-today-btn { padding:6px 14px; background:transparent; border:1px solid var(--border-2); border-radius:8px; color:var(--text-2); font-size:12px; font-family:inherit; cursor:pointer; transition:all var(--transition); }
.cal-today-btn:hover { border-color:var(--green); color:var(--green); }

/* ── Calendar Grid ──────────────────────────── */
.calendar-wrap { flex:1; overflow-y:auto; padding:0 16px 16px; }

.calendar-header-row {
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:4px; padding:8px 0 4px;
  position:sticky; top:0; background:var(--bg); z-index:10;
}
.cal-dow { text-align:center; font-size:11px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:.8px; padding:4px 0; }

.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }

.cal-cell {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius); min-height:110px;
  padding:6px 0 6px 6px;       /* no right padding — bars bleed to edge */
  display:flex; flex-direction:column; gap:0;
  transition:border-color var(--transition);
  overflow:visible;             /* allow bars to extend beyond cell */
  position:relative;
}
.cal-cell:hover { border-color:var(--border-2); }
.cal-cell.today { border-color:var(--green); background:var(--green-glow); }
.cal-cell.other-month { opacity:.4; }

.cal-day-num {
  font-size:13px; font-weight:600; color:var(--text-2);
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; margin-bottom:4px; flex-shrink:0;
}
.cal-cell.today .cal-day-num { background:var(--green); color:#0f1117; }

/* Slots container: stacks bar rows vertically */
.cal-slots {
  display:flex; flex-direction:column; gap:3px;
  width:100%;
}

/*
  A spanning bar segment.
  --bar-span  = how many cells wide this segment is
  We use a CSS trick: the bar is sized as (span * 100%) + (span-1) gaps
  The grid gap is 4px, so extra width = (span-1)*4px
*/
.cal-bar-segment {
  display:flex;
  align-items:center;
  gap:4px;
  height:22px;
  padding:0 6px;
  font-size:11px; font-weight:500; color:#fff;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  /* Stretch across N cells: N*100% of parent width + (N-1)*4px gap compensation */
  width: calc(var(--bar-span, 1) * 100% + (var(--bar-span, 1) - 1) * 4px);
  /* Lift above adjacent cells */
  position:relative;
  z-index:2;
  transition:opacity .15s ease, filter .15s ease;
  flex-shrink:0;
}
.cal-bar-segment:hover { opacity:.85; filter:brightness(1.1); }

.bar-emoji { font-size:11px; flex-shrink:0; }
.bar-title { overflow:hidden; text-overflow:ellipsis; flex:1; }

/* +X más button */
.cal-more {
  font-size:10px; color:var(--text-3); cursor:pointer;
  padding:2px 6px; border-radius:4px; border:1px solid var(--border-2);
  background:var(--bg-4); transition:all var(--transition);
  text-align:center; margin-top:3px; display:inline-block;
  width:fit-content;
}
.cal-more:hover { color:var(--green); border-color:var(--green); background:var(--green-glow); }
.cal-cell.expanded { min-height:unset; }

/* ── Modals ────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); z-index:1000; display:none; align-items:center; justify-content:center; padding:20px; animation:fadeIn .15s ease; }
.modal-overlay.open { display:flex; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.modal { background:var(--bg-2); border:1px solid var(--border-2); border-radius:var(--radius-lg); width:100%; max-width:480px; box-shadow:var(--shadow); animation:slideUp .2s ease; overflow:hidden; }
.modal-large { max-width:560px; }
.modal-small { max-width:400px; }
@keyframes slideUp { from{transform:translateY(12px);opacity:0} to{transform:translateY(0);opacity:1} }

.modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); }
.modal-title { font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:700; }
.modal-close { background:var(--bg-4); border:1px solid var(--border); border-radius:7px; width:30px; height:30px; font-size:13px; color:var(--text-3); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--transition); }
.modal-close:hover { background:rgba(231,76,60,.2); color:var(--urgent); border-color:var(--urgent); }
.modal-body { padding:20px; display:flex; flex-direction:column; gap:14px; max-height:65vh; overflow-y:auto; }
.modal-footer { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--border); background:var(--bg-3); }

/* ── Forms ─────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-label { font-size:12px; font-weight:500; color:var(--text-2); }
.req { color:var(--urgent); }
.form-input { background:var(--bg-3); border:1px solid var(--border-2); border-radius:8px; color:var(--text-1); font-family:inherit; font-size:13px; padding:9px 12px; outline:none; transition:border-color var(--transition); width:100%; }
.form-input:focus { border-color:var(--green); box-shadow:0 0 0 3px var(--green-glow); }
.form-input::placeholder { color:var(--text-3); }
.form-textarea { resize:vertical; min-height:68px; }
.form-select { cursor:pointer; }

/* ── Color palette ─────────────────────────── */
.color-palette { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.color-swatch {
  width:28px; height:28px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; transition:all var(--transition);
  display:flex; align-items:center; justify-content:center;
}
.color-swatch:hover { transform:scale(1.15); }
.color-swatch.selected { border-color:white; box-shadow:0 0 0 2px rgba(255,255,255,.4); }
.color-picker-input { width:100%; height:36px; border:1px solid var(--border-2); border-radius:8px; background:var(--bg-3); cursor:pointer; padding:3px; margin-top:4px; }

.collab-preview { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--bg-3); border-radius:var(--radius); margin-top:4px; }
.avatar-preview { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; flex-shrink:0; }

/* ── Buttons ───────────────────────────────── */
.btn-primary { padding:9px 20px; background:var(--green); border:none; border-radius:8px; color:#0f1117; font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; transition:all var(--transition); }
.btn-primary:hover { background:var(--green-dark); transform:translateY(-1px); }
.btn-secondary { padding:9px 20px; background:var(--bg-4); border:1px solid var(--border-2); border-radius:8px; color:var(--text-2); font-size:13px; font-weight:500; font-family:inherit; cursor:pointer; transition:all var(--transition); }
.btn-secondary:hover { background:var(--bg-3); color:var(--text-1); }
.btn-danger { padding:9px 20px; background:var(--urgent); border:none; border-radius:8px; color:white; font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; transition:all var(--transition); }
.btn-danger:hover { background:#c0392b; }
.btn-warning { padding:9px 20px; background:var(--high); border:none; border-radius:8px; color:white; font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; transition:all var(--transition); }
.btn-warning:hover { background:#d35400; }

/* ── Task detail ───────────────────────────── */
.detail-badges { display:flex; gap:6px; align-items:center; flex-wrap:wrap; flex:1; }
.detail-badge { font-size:11px; font-weight:600; border-radius:6px; padding:3px 10px; text-transform:uppercase; letter-spacing:.4px; }
.detail-title { font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:700; line-height:1.3; word-break:break-word; }
.detail-desc { font-size:13px; color:var(--text-2); line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.detail-meta { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px; }
.detail-meta-item { background:var(--bg-3); border:1px solid var(--border); border-radius:8px; padding:10px 12px; }
.detail-meta-label { font-size:10px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:.8px; margin-bottom:2px; }
.detail-meta-value { font-size:13px; font-weight:500; }

/* ── Comments ──────────────────────────────── */
.comments-section { border-top:1px solid var(--border); padding-top:16px; display:flex; flex-direction:column; gap:12px; }
.comments-title { font-size:14px; font-weight:600; color:var(--text-2); }
.comments-list { display:flex; flex-direction:column; gap:10px; }

.comment-item {
  display:flex; gap:10px; align-items:flex-start;
  background:var(--bg-3); border:1px solid var(--border);
  border-radius:var(--radius); padding:10px 12px;
  animation:cardIn .2s ease;
}
@keyframes cardIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

.comment-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.comment-body { flex:1; min-width:0; }
.comment-author { font-size:12px; font-weight:600; margin-bottom:2px; }
.comment-text { font-size:13px; color:var(--text-2); line-height:1.5; word-break:break-word; }
.comment-time { font-size:10px; color:var(--text-3); margin-top:3px; }

.comment-empty { font-size:12px; color:var(--text-3); text-align:center; padding:12px; }

.comment-form { background:var(--bg-3); border:1px solid var(--border); border-radius:var(--radius); padding:12px; display:flex; flex-direction:column; gap:10px; }
.comment-form-top { display:flex; align-items:center; gap:10px; }
.comment-form-top .form-label { white-space:nowrap; }
.comment-who { flex:1; }
.comment-input { resize:none; }
.comment-form-actions { display:flex; justify-content:flex-end; }

/* ── Confirm ───────────────────────────────── */
.confirm-msg { font-size:13px; color:var(--text-2); line-height:1.6; }

/* ── Toast ─────────────────────────────────── */
.toast-container { position:fixed; bottom:24px; right:24px; z-index:2000; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--bg-3); border:1px solid var(--border-2); border-radius:var(--radius); box-shadow:var(--shadow); font-size:13px; color:var(--text-1); min-width:220px; animation:toastIn .25s ease; pointer-events:auto; }
@keyframes toastIn { from{transform:translateX(20px);opacity:0} to{transform:translateX(0);opacity:1} }
.toast.toast-out { animation:toastOut .25s ease forwards; }
@keyframes toastOut { to{transform:translateX(20px);opacity:0} }
.toast-success { border-left:3px solid var(--green); }
.toast-error   { border-left:3px solid var(--urgent); }
.toast-info    { border-left:3px solid #9b59b6; }
.toast-icon { font-size:15px; }

/* Priority badge helpers */
.priority-Urgente { background:var(--urgent-bg); color:var(--urgent); }
.priority-Alta    { background:var(--high-bg);   color:var(--high); }
.priority-Media   { background:var(--medium-bg); color:var(--medium); }
.priority-Baja    { background:var(--low-bg);    color:var(--low); }

/* ============================================================
   CapiTareas v3 — Estilos adicionales (Cliente-Servidor)
   ============================================================ */

/* ── Loading overlay ───────────────────────────────────────── */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(6px);
  color: var(--text-2, #bbb);
  font-size: 14px;
}
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: var(--accent, #2ecc71);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Comment file upload ───────────────────────────────────── */
.comment-file-wrap {
  margin-top: 8px;
}
.comment-file-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px dashed var(--border, #333);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-2, #bbb);
  transition: border-color 0.2s, color 0.2s;
}
.comment-file-label:hover {
  border-color: var(--accent, #2ecc71);
  color: var(--accent, #2ecc71);
}
.comment-file-hint {
  font-size: 11px;
  color: var(--text-3, #777);
}
.comment-file-input {
  display: none;
}
.comment-file-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--bg-3, #1a1a2e);
  border-radius: 8px;
  font-size: 13px;
}
.comment-file-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border, #333);
}
.comment-file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2, #bbb);
}
.comment-file-remove {
  background: none;
  border: none;
  color: var(--text-3, #777);
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}
.comment-file-remove:hover {
  background: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
}

/* ── Comment attachments (in rendered comments) ────────────── */
.comment-attachment {
  margin-top: 6px;
}
.comment-attachment-img {
  max-width: 280px;
  max-height: 200px;
  border-radius: 8px;
  border: 1px solid var(--border, #333);
  cursor: pointer;
  transition: opacity 0.2s;
}
.comment-attachment-img:hover {
  opacity: 0.85;
}
.comment-attachment-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-4, #222);
  border-radius: 6px;
  color: var(--accent, #2ecc71);
  text-decoration: none;
  font-size: 13px;
  transition: background 0.2s;
}
.comment-attachment-link:hover {
  background: var(--bg-3, #1a1a2e);
}