/* stickynote.css */

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


/* Overlay container: fixed, top-right, high z-index */

.sn-container {
  position: fixed;
  top: 1rem;               /* margin from top */
  right: 1rem;             /* margin from right */
  z-index: 10000;          /* above page content */
  max-width: min(320px, 80vw);
  max-height: min(420px, 90vh);
  pointer-events: none;    /* don't block page unless over the card */
}


/* The modal card itself */
.sn--modal {
  background: #FF6500;     /* orange background (6-digit hex) */
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  pointer-events: auto;    /* allow interaction with its buttons */
}


.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;
}


.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);
}