/* stickynote.css */

#stickynote { 
    color: white; 
    font-family: "Avenir", Helvetica, sans-serif;
    font-size: 1.1rem; /* 0.95rem; */
}

.sn-card {
  background: #FF6500; /*rgba(14, 0, 107, 0.3); */
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  max-width: 520px;
}

.sn-empty { opacity: 0.85; }

.sn-title {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.sn-subtle {
  opacity: 0.85;
  font-size: 1.1rem; /* 0.95rem; */
}

.sn-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sn-id {
  font-weight: 600;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  padding: 0.1rem 0.4rem;
}

.sn-badge {
  font-size: 0.8rem;
  background: #5FAEE6;
  color: #001; /* contrast with light badge */
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
}

.sn-name {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0.25rem 0 0.25rem 0;
}

/* OLD: question cutting after 1 line 
.sn-question {
  opacity: 0.95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.5rem;
} */

.sn-question {
  opacity: 0.95;
  white-space: normal;   /* allow wrapping */
  overflow: visible;     /* let text expand */
  text-overflow: unset;  /* no ellipsis */
  margin-bottom: 0.5rem;
}



.sn-desc {
  opacity: 0.95;
  margin: 0.25rem 0 0.25rem 0;
}

.sn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.25rem 0 0.5rem 0;
}

.sn-chip {
  /* font-size: 0.8rem; */
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 0.3rem 1.0rem;  /*. 0.3rem 0.6rem;*/
}





.sn-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-start;
  font-weight: normal;
  font-size: 1rem !important;
}

.sn-btn {
  background: #5FAEE6;
  color: white;
  border: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
}

.sn-btn:hover { filter: brightness(1.05); }

.sn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.5);
}