/* === Task chip (merged: structure from existing + flat enamel style) === */
.task-chip{
  /* structure (from existing) */
  user-select:none;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  position:relative;
  cursor:grab;
color: var(--chip-ink, #1f1830);

  /* geometry */
  border-radius:16px;

  /* visual (from enamel/flat) */
  background: var(--chip-fill, var(--task-gradient, #F4F6F8));
  /*border: 1.5px solid var(--chip-stroke, rgba(0,0,0,.08));*/
  /*box-shadow:
    0 1px 2px rgba(0,0,0,.06),
    0 0 18px rgba(var(--task-glow, 0,0,0), .08);*/

  /* typography (choose the darker “ink” for mid-light fills) */
  color:#1f1830;
  font-weight:500;
  line-height:1.3;

  /* behavior */
  transition:
    transform 120ms ease,
    background 200ms ease,
    box-shadow .2s ease;
  backdrop-filter:none; /* ensure truly flat */
}

/* “Enamel” thin inner highlight (still flat, not glossy)
.task-chip::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
  opacity:.85;
}*/

/* Subtle stardust speckle (kept very low) */
.task-chip::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.5px),
    radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.5px);
  background-size:22px 22px, 28px 28px;
  background-position:0 0, 6px 8px;
  mix-blend-mode:soft-light; /* safe, subtle */
  opacity:.14;
}

/* Hover: tiny lift + slightly stronger halo */
.task-chip:hover{
  transform: translateY(-1px);
  box-shadow:
    0 2px 6px rgba(0,0,0,.10),
    0 0 22px rgba(var(--task-glow, 0,0,0), .10);
}

/* Drag states keep your feel, just avoid massive shadows */
.task-chip.dragging{
  transform:scale(1.05);
  opacity:.95;
  cursor:grabbing;
  box-shadow:
    0 4px 10px rgba(0,0,0,.12),
    0 0 26px rgba(var(--task-glow, 0,0,0), .12);
}

/* Existing internals retained */
.task-chip .task-name{ font-weight:700; font-size:.95rem; color:var(--chip-text);}
.task-chip .task-meta{ opacity:.8; font-size:.8rem; color:var(--chip-text);}
.task-chip .check-wrap{ position:absolute; top:8px; right:8px; }
.task-chip .chip-actions{
  display:flex; gap:6px; margin-top:6px; align-self:flex-end;
}

/* Icon buttons unchanged (use your vars) */
.icon-btn{
  width:28px; height:28px;
  display:grid; place-items:center;
  border-radius:9px;
  border:1px solid var(--border);
  background:none;
  cursor:pointer;
  transition: transform .15s ease;
Align-content:center;
Justify-content:center;
}
.icon-btn:hover{ transform:scale(1.06); }