/* ============================================================
   FUN·da·Mental Conversation Card Template
   The canonical layout for all Brain Buddy conversation cards.

   Any page importing this template gets the full card system:
   tape label headers, foam sticker emojis, audio players,
   spark captions, text colorization, textareas, copy buttons.

   Last updated: 2026-07-29
   ============================================================ */

/* ===== CONVERSATION CARD ===== */
.conv-card {
  background: #FAFAF5;
  border-radius: 6px;
  padding: 1.1rem;
  box-shadow: 0 2px 8px rgba(58,58,58,.07);
  margin-bottom: .8rem;
  position: relative;
}
.conv-card:nth-child(odd) { transform: rotate(-.25deg); }
.conv-card:nth-child(even) { transform: rotate(.15deg); }

/* ===== CARD HEADER (embossed tape label) ===== */
.cc-header {
  display: inline-block;
  padding: 4px 14px;
  font-family: 'EmbossT1', 'SF Mono', monospace;
  font-size: .92rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(58,58,58,.25);
  text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 -1px 0 rgba(0,0,0,.2);
  clip-path: polygon(0% 2%, 1% 0%, 99% 1%, 100% 3%, 100% 97%, 99% 100%, 1% 98%, 0% 96%);
  margin-bottom: .5rem;
}
.cc-header.teal { background: linear-gradient(180deg, #3A8888, #307878); }
.cc-header.gold { background: linear-gradient(180deg, #D4A548, #C49538); }
.cc-header.red { background: linear-gradient(180deg, #C54545, #B53535); }
.cc-header.green { background: linear-gradient(180deg, #6A8A5A, #5A7A4A); }
.cc-header.dark { background: linear-gradient(180deg, #4A4A4A, #3A3A3A); }
.cc-header.blue { background: linear-gradient(180deg, #5A8AB0, #406592); }

/* ===== FOAM STICKER EMOJI (on headers) ===== */
.cc-stk {
  font-size: 1.2em;
  display: inline-block;
  vertical-align: middle;
  filter:
    drop-shadow(2.8px 0 0 #fff)
    drop-shadow(-2.8px 0 0 #fff)
    drop-shadow(0 2.8px 0 #fff)
    drop-shadow(0 -2.8px 0 #fff)
    drop-shadow(0 0 2px rgba(255,255,255,.85))
    drop-shadow(0 0 .8px rgba(100,100,100,.25))
    drop-shadow(0 3px 4px rgba(0,0,0,.25));
}

/* ===== SHADOW EMOJI (inline text) ===== */
.cc-shd {
  font-size: 1em;
  display: inline;
  filter: drop-shadow(0 2px 3px rgba(58,58,58,.18));
}

/* ===== STATUS BADGE ===== */
.cc-badge {
  position: absolute;
  top: .7rem;
  right: .8rem;
  font-size: .6rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
}
.cc-badge-green { background: rgba(85,156,64,.08); color: #3A6A28; }
.cc-badge-gold { background: rgba(196,149,56,.08); color: #8A7030; }
.cc-badge-red { background: rgba(181,53,53,.08); color: #8A2020; }

/* ===== AUDIO PLAYER ===== */
.cc-player {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: .4rem 0;
}
.cc-play {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: #307878;
  color: #fff;
  font-size: .65rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cc-play:hover { filter: brightness(1.08); }
.cc-prog-wrap {
  flex: 1;
  height: 3px;
  background: rgba(58,58,58,.05);
  border-radius: 2px;
  overflow: hidden;
}
.cc-prog-fill {
  height: 100%;
  width: 100%;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s linear;
  background: #307878;
}
.cc-time {
  font-size: .58rem;
  color: #7A7775;
  min-width: 24px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ===== SPARK CAPTIONS ===== */
.cc-sparks {
  display: flex;
  gap: 4px;
  margin: 1px 0 .3rem 32px;
  min-height: 14px;
}
.cc-spark-tag {
  font-size: .6rem;
  color: #5A5855;
  font-weight: 500;
}

/* ===== CARD BODY TEXT ===== */
.cc-body {
  margin: .4rem 0;
}
.cc-body p {
  margin: .35rem 0;
  font-size: .9rem;
  line-height: 1.65;
  color: #3A3A3A;
}

/* Text emphasis classes */
.cc-dk { color: #2D2F32; font-weight: 600; }
.cc-md { color: #5A5855; }
.cc-lt { color: #7A7775; }

/* Semantic text colors */
.cc-teal { color: #307878; font-weight: 600; }
.cc-red { color: #B53535; font-weight: 600; }
.cc-gold { color: #C49538; font-weight: 600; }
.cc-green { color: #5A7A4A; font-weight: 600; }
.cc-blue { color: #406592; font-weight: 600; }
.cc-purple { color: #7A4380; font-weight: 600; }
.cc-pink { color: #D0899A; font-weight: 600; }
.cc-brown { color: #6D5042; font-weight: 600; }

/* ===== BRAIN BUDDY NOTE ===== */
.cc-note {
  background: rgba(196,149,56,.08);
  border-left: 3px solid #C49538;
  padding: 6px 10px;
  font-style: italic;
  font-size: .82rem;
  border-radius: 0 4px 4px 0;
  margin: .5rem 0;
  line-height: 1.4;
}

/* ===== WASHI SUB-HEADER ===== */
.cc-washi {
  display: inline-block;
  padding: 2px 12px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 2px;
  margin: .4rem 0 .15rem;
}
.cc-washi-teal { background: rgba(48,120,120,.08); color: #205858; }
.cc-washi-gold { background: rgba(196,149,56,.08); color: #7A6020; }
.cc-washi-red { background: rgba(181,53,53,.08); color: #7A2020; }

/* ===== RESPONSE TEXTAREA ===== */
.cc-response {
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  margin: .4rem 0;
  border: 1.5px solid rgba(58,58,58,.06);
  border-radius: 4px;
  background: rgba(58,58,58,.015);
  font-family: 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  font-size: .82rem;
  color: #3A3A3A;
  resize: vertical;
  line-height: 1.4;
}
.cc-response::placeholder { color: #7A7775; font-style: italic; }
.cc-response:focus { outline: none; border-color: #307878; }

/* ===== COPY BUTTON (PixelGamer) ===== */
.cc-copy {
  font-family: 'PixelGamer', monospace;
  font-size: .65rem;
  padding: 3px 10px;
  border: 1.5px solid rgba(58,58,58,.1);
  border-radius: 3px;
  background: #FAFAF5;
  color: #5A5855;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
  transition: transform .1s;
}
.cc-copy:hover { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.06); }

/* ===== SEPARATOR ===== */
.cc-sep {
  height: 1px;
  background: rgba(58,58,58,.05);
  margin: .4rem 0;
}

/* ===== COPY ALL BUTTON ===== */
.cc-copy-all {
  font-family: 'PixelGamer', monospace;
  font-size: .8rem;
  padding: 8px 20px;
  border: 2.5px solid #5A5855;
  border-radius: 3px;
  background: #FAFAF5;
  color: #5A5855;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,.1);
  transition: transform .1s, box-shadow .1s;
}
.cc-copy-all:hover { transform: translateY(1px); box-shadow: 0 2px 0 rgba(0,0,0,.1); }
.cc-copy-all:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.1); }

/* ===== ACCURACY DIAL ===== */
.cc-dial {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .7rem;
  margin: .3rem 0;
}
.cc-dial input[type="range"] {
  width: 100px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(90deg, #B53535, #C49538, #559C40);
  border-radius: 2px;
  outline: none;
}
.cc-dial input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #307878;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.cc-dial-val {
  font-weight: 700;
  color: #307878;
  min-width: 65px;
}