/* Simos Camp — interactions UI (owner: interactions; class prefix `int-`).
 * The visual-novel talk (two portraits over a wooden dialogue card, typewriter text, hidden-tone choices that
 * reveal their colour after picking, feedback + tip cards), the "✏️ Write your own" composer, the people picker
 * (sleepovers / private time), the daily-goals modal of the self menu, wheel tweaks.
 * Mobile-first; builds on css/base.css tokens so dark mode follows automatically.
 */
.int-talk-host { z-index: 5; }
.int-talk {
  --pt: 124px;
  position: absolute; inset: 0; pointer-events: auto; display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--font); color: var(--ink); -webkit-user-select: none; user-select: none;
}
.int-talk-shade {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .45s ease;
  background: linear-gradient(180deg, rgba(22, 52, 70, .22) 0%, rgba(22, 52, 70, 0) 18%, rgba(22, 52, 70, 0) 42%, rgba(22, 52, 70, .42) 100%);
}
.int-talk.int-in .int-talk-shade { opacity: 1; }

/* ---------- top bar: who you're talking with + affinity heart meter ---------- */
.int-talk-top {
  position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: calc(var(--safe-top) + 10px) 10px 0; opacity: 0; transform: translateY(-16px); transition: opacity .3s ease, transform .4s var(--ease-spring);
}
.int-talk.int-in .int-talk-top { opacity: 1; transform: none; }
.int-rel {
  position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; max-width: calc(100% - 60px);
  padding: 4px 12px 4px 5px; border-radius: 99px; background: var(--paper); border: 3px solid var(--wood);
  box-shadow: 0 3px 0 var(--wood-dark), 0 8px 18px rgba(30, 50, 64, .2); font-weight: 600; font-size: 14px; line-height: 1.1;
}
.int-rel-faces { display: flex; flex: none; }
.int-rel-faces .sc-face { width: 28px; height: 28px; border-width: 2px; }
.int-rel-faces .sc-face + .sc-face { margin-left: -9px; }
.int-rel-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.int-aff { display: flex; align-items: center; gap: 4px; flex: none; }
.int-aff-heart { font-size: 13px; line-height: 1; }
.int-aff-meter { display: block; width: 54px; height: 9px; border-radius: 99px; background: rgba(0, 0, 0, .12); overflow: hidden; }
.int-aff-meter i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #ffd75e, #ff8fb1); transition: width .7s var(--ease-spring); }
.int-aff-pop {
  position: absolute; right: -8px; top: -12px; padding: 2px 8px; border-radius: 99px; font: 700 13px/1.3 var(--font); color: #fff;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); opacity: 0; pointer-events: none;
}
.int-aff-pop.int-up { background: var(--green); }
.int-aff-pop.int-down { background: var(--red); }
.int-aff-pop.int-show { animation: int-float-up 1.8s ease forwards; }
@keyframes int-float-up { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 15% { opacity: 1; transform: translateY(0) scale(1.1); } 25% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.int-talk-close.sc-btn.round { flex: none; width: 44px; height: 44px; font-size: 18px; }

/* ---------- bottom: portraits standing on the dialogue card ---------- */
.int-talk-bottom {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  padding: 0 10px calc(var(--safe-bottom) + 10px); opacity: 0; transform: translateY(46px);
  transition: opacity .3s ease, transform .5s var(--ease-spring);
}
.int-talk.int-in .int-talk-bottom { opacity: 1; transform: none; }
.int-talk.int-out .int-talk-bottom { opacity: 0; transform: translateY(40px); transition: opacity .22s ease, transform .3s ease; }
.int-talk.int-out .int-talk-top { opacity: 0; transform: translateY(-12px); }
.int-talk.int-out { pointer-events: none; }
.int-stage {
  position: relative; z-index: 2; width: 100%; max-width: 760px; display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 4px; margin-bottom: -22px; pointer-events: none;
}
.int-pt {
  display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%;
  transform: scale(.9); filter: saturate(.78) brightness(.94); transition: transform .35s var(--ease-spring), filter .3s ease;
}
.int-pt.int-speaking { transform: scale(1); filter: none; }
.int-pt.int-bounce.int-speaking .int-pt-card { animation: int-hop .42s var(--ease-spring); }
@keyframes int-hop { 0% { transform: translateY(0); } 40% { transform: translateY(-9px); } 100% { transform: translateY(0); } }
.int-pt-card {
  width: var(--pt); height: var(--pt); border-radius: 24px; overflow: hidden; position: relative;
  border: 5px solid #fff; box-shadow: 0 0 0 3px var(--wood), 0 8px 18px rgba(30, 50, 64, .32);
  background: radial-gradient(circle at 50% 30%, #ffffff 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #bff3ec 0%, #86e6dc 60%, #f6e7c6 100%);
}
.int-pt-a .int-pt-card { transform: rotate(-3deg); }
.int-pt-b .int-pt-card { transform: rotate(3deg); background: radial-gradient(circle at 50% 30%, #ffffff 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #ffe0ea 0%, #ffc2d6 58%, #f6e7c6 100%); }
.int-pt-card canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.int-pt-name {
  margin-top: -12px; position: relative; z-index: 1; padding: 3px 12px; border-radius: 99px; white-space: nowrap; max-width: calc(var(--pt) + 20px);
  overflow: hidden; text-overflow: ellipsis; font: 700 14px/1.2 var(--font); color: #fff; text-shadow: 0 1.5px 0 rgba(122, 81, 50, .7);
  background: var(--wood-grain), linear-gradient(180deg, var(--wood-light), var(--wood)); border: 2px solid var(--wood-dark); box-shadow: 0 2px 0 var(--wood-deep);
}
.int-pt-a .int-pt-name { background: linear-gradient(180deg, #5fdad8, var(--turq)); border-color: var(--turq-dark); box-shadow: 0 2px 0 #157186; text-shadow: 0 1.5px 0 rgba(21, 113, 134, .7); }

/* ---------- the dialogue card ---------- */
.int-box.sc-panel {
  position: relative; width: 100%; max-width: 760px; min-height: 142px; padding: 30px 16px 14px; cursor: pointer;
  border-radius: 26px; background: var(--ui-dots, none) 0 0 / 14px 14px, var(--panel-bg);
  box-shadow: 0 6px 0 rgba(122, 81, 50, .35), 0 16px 34px rgba(30, 50, 64, .32);
}
/* the speaker tag sits centred between the two portraits, with a little arrow toward whoever is talking */
.int-who {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 4px 14px; border-radius: 99px;
  font: 700 15px/1.2 var(--font); color: #fff; max-width: calc(100% - 2 * var(--pt) - 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(180deg, #ffa3c2, var(--pink)); border: 3px solid #d9487a; box-shadow: 0 3px 0 #b3335f; text-shadow: 0 1.5px 0 rgba(179, 51, 95, .6);
}
.int-who::after { content: ' ▸'; font-size: 11px; opacity: .9; }
.int-who.int-who-a { background: linear-gradient(180deg, #5fdad8, var(--turq)); border-color: var(--turq-dark); box-shadow: 0 3px 0 #157186; text-shadow: 0 1.5px 0 rgba(21, 113, 134, .6); }
.int-who.int-who-a::after { content: none; }
.int-who.int-who-a::before { content: '◂ '; font-size: 11px; opacity: .9; }
.int-who:empty { display: none; }
.int-line { position: relative; min-height: 50px; padding-right: 22px; }
.int-text { font-size: 17px; line-height: 1.42; font-weight: 500; white-space: pre-line; word-wrap: break-word; }
.int-box.int-from-a .int-text { color: var(--ink); font-weight: 500; }
.int-next {
  position: absolute; right: 0; bottom: 2px; font-size: 13px; color: var(--wood); opacity: 0; transition: opacity .2s ease;
}
.int-box.int-ready .int-next { opacity: 1; animation: int-nudge 1s ease-in-out infinite; }
@keyframes int-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.int-prompt { margin: 10px 2px 2px; font-weight: 700; font-size: 14px; color: var(--ink-soft); letter-spacing: .2px; }
.int-prompt::before { content: '💭 '; }

/* ---------- options (topics & choices) ---------- */
.int-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.int-opts:empty { display: none; margin: 0; }
.int-opt {
  --tk: var(--sand-dark); --tk-d: var(--sand-deep); --tk-s: var(--paper);
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 12px 8px 8px;
  border-radius: 16px; border: 3px solid var(--tk); background: var(--tk-s); box-shadow: 0 4px 0 var(--tk-d);
  font: 600 15.5px/1.3 var(--font); color: var(--ink); text-align: left; cursor: pointer; pointer-events: auto;
  transition: transform .12s var(--ease-spring), box-shadow .12s, opacity .3s ease, filter .3s ease, background .25s ease, border-color .25s ease;
  animation: int-opt-in .42s var(--ease-spring) backwards;
}
@keyframes int-opt-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.int-opt:hover { filter: brightness(1.03); }
.int-opt:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tk-d); }
.int-opt-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--font);
  background: var(--sand); color: var(--ink-soft); border: 2px solid var(--sand-dark);
}
.int-opt-ico { flex: none; font-size: 22px; line-height: 1; }
.int-opt-txt { flex: 1 1 auto; min-width: 0; }
.int-opt.int-topic { --tk: var(--turq); --tk-d: var(--turq-dark); --tk-s: var(--ui-turq-soft, #dcf6f3); }
.int-opt.int-bye { --tk: var(--sand-dark); --tk-d: var(--sand-deep); --tk-s: var(--paper); min-height: 42px; font-size: 14.5px; color: var(--ink-soft); }
.int-opt.int-bye .int-opt-n { opacity: .7; }
.int-opt.int-gone { opacity: .32; filter: grayscale(.5); pointer-events: none; transform: scale(.98); }
.int-opt.int-picked { pointer-events: none; animation: int-picked .5s var(--ease-spring); }
@keyframes int-picked { 0% { transform: scale(1); } 40% { transform: scale(1.035); } 100% { transform: scale(1); } }
.int-tchip {
  flex: none; padding: 3px 9px; border-radius: 99px; font: 700 12.5px/1.2 var(--font); color: #fff; background: var(--tk-d);
  white-space: nowrap; animation: ui-pop .45s var(--ease-spring) backwards;
}
/* tone colours — only ever applied AFTER choosing */
.int-t-kind { --tk: var(--green); --tk-d: var(--green-dark); --tk-s: var(--ui-green-soft, #e3f7e9); }
.int-t-neutral { --tk: var(--turq); --tk-d: var(--turq-dark); --tk-s: var(--ui-turq-soft, #dcf6f3); }
.int-t-mean, .int-t-pushy { --tk: var(--red); --tk-d: var(--red-dark); --tk-s: var(--ui-red-soft, #ffe6e6); }
.int-t-betray { --tk: #d9487a; --tk-d: #a83262; --tk-s: var(--ui-pink-soft, #ffe8f0); }

/* ---------- feedback card ---------- */
.int-fb {
  margin-top: 10px; padding: 10px 12px 12px; border-radius: 18px; border: 3px solid var(--tk); background: var(--tk-s);
  box-shadow: 0 4px 0 var(--tk-d); animation: int-fb-in .5s var(--ease-spring) backwards; cursor: default;
}
@keyframes int-fb-in { 0% { opacity: 0; transform: translateY(14px) scale(.94); } 60% { opacity: 1; transform: translateY(-2px) scale(1.01); } 100% { transform: none; } }
.int-fb-head { display: flex; align-items: center; gap: 8px; }
.int-fb-ico { font-size: 24px; line-height: 1; }
.int-fb-label { flex: 1 1 auto; font-weight: 700; font-size: 17px; }
.int-fb-pts { flex: none; padding: 3px 10px; border-radius: 99px; font: 700 14px/1.2 var(--font); color: #fff; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .18); animation: int-pts .7s .15s var(--ease-spring) backwards; }
.int-fb-pts.int-up { background: var(--green); }
.int-fb-pts.int-down { background: var(--red); }
.int-fb-pts.int-cap { background: var(--sand-deep); font-size: 12px; }
@keyframes int-pts { 0% { opacity: 0; transform: scale(.4) rotate(-12deg); } 60% { opacity: 1; transform: scale(1.18) rotate(4deg); } 100% { transform: none; } }
.int-fb-text { margin-top: 6px; font-size: 15px; line-height: 1.38; }
.int-fb-tip { margin-top: 6px; font-size: 13.5px; line-height: 1.35; color: var(--ink-soft); }
.int-fb-tip::before { content: '💡 '; }
.int-fb-go.sc-btn { display: flex; margin: 10px 0 0 auto; }

/* ---------- wide screens ---------- */
@media (min-width: 700px) {
  .int-talk { --pt: 168px; }
  .int-talk-bottom { padding-bottom: calc(var(--safe-bottom) + 22px); }
  .int-box.sc-panel { padding: 32px 22px 16px; min-height: 150px; }
  .int-text { font-size: 18px; }
  .int-stage { padding: 0 10px; margin-bottom: -26px; }
  .int-opts.int-grid { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .int-talk { --pt: 104px; }
  .int-who { font-size: 14px; padding: 4px 10px; }
  .int-text { font-size: 16px; }
  .int-opt { font-size: 15px; gap: 8px; }
}
@media (max-height: 640px) {
  .int-talk { --pt: 96px; }
  .int-box.sc-panel { min-height: 120px; padding-top: 26px; }
  .int-text { font-size: 15.5px; }
  .int-opt { min-height: 42px; padding-top: 6px; padding-bottom: 6px; font-size: 14.5px; }
}

/* ---------- self menu: today's goals ---------- */
.int-goals { display: flex; flex-direction: column; gap: 8px; }
.int-goal { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--paper); border: 2px solid var(--sand-dark); }
.int-goal.int-done { border-color: var(--green); background: var(--ui-green-soft, #e3f7e9); }
.int-goal-ico { font-size: 22px; line-height: 1; flex: none; }
.int-goal-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.int-goal-text { font-weight: 600; font-size: 15px; line-height: 1.25; }
.int-goal-state { flex: none; font-weight: 700; font-size: 14px; color: var(--ink-soft); }

/* ---------- "reduce motion" setting ---------- */
.sc-reduce-motion .int-talk *, .sc-reduce-motion .int-talk { animation-duration: .01ms !important; transition-duration: .01ms !important; }
.sc-reduce-motion .int-box.int-ready .int-next { animation: none; }

/* ---------- iteration 2: "✏️ Write your own" ---------- */
.int-opt.int-write { --tk: var(--pink); --tk-d: #b3335f; --tk-s: var(--ui-pink-soft, #ffe8f0); }
.int-text.int-own { font-style: italic; }
.int-text.int-own::before { content: '“'; opacity: .55; }
.int-text.int-own::after { content: '”'; opacity: .55; }
.int-box.int-note .int-text { color: var(--ink-soft); font-size: 15.5px; font-style: italic; text-align: center; }
.int-box.int-note .int-line { padding-right: 0; }
.int-box.int-writing { cursor: default; }
.int-box.int-writing .int-line { min-height: 0; }
.int-box.int-writing .int-text:empty { display: none; }
.int-box.int-writing .int-text { font-size: 15px; color: var(--ink-soft); }
.int-compose {
  display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 18px; cursor: auto;
  background: var(--paper); border: 3px solid var(--pink); box-shadow: 0 4px 0 #b3335f; animation: int-fb-in .45s var(--ease-spring) backwards;
}
.int-compose-input.sc-input {
  width: 100%; min-height: 64px; max-height: 30vh; resize: none; font: 500 16px/1.4 var(--font); color: var(--ink);
  -webkit-user-select: text; user-select: text; box-sizing: border-box;
}
.int-compose-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.int-compose-row .sc-btn { min-height: 44px; }
.int-compose-count { font: 700 12.5px/1 var(--font); color: var(--ink-soft); }
.int-compose-count.int-near { color: var(--red); }
.int-compose-err { padding: 6px 10px; border-radius: 12px; background: var(--ui-red-soft, #ffe6e6); color: var(--red-dark, #b3333a); font-weight: 600; font-size: 14px; line-height: 1.3; }
.int-compose-hint { font-size: 12.5px; line-height: 1.3; color: var(--ink-soft); }
.int-compose.int-shake { animation: int-shake .4s ease; }
@keyframes int-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
@media (max-height: 640px) {
  .int-compose-input.sc-input { min-height: 48px; }
  .int-compose-hint { display: none; }
}

/* ---------- iteration 2: choosing people (sleepovers, private time) ---------- */
.int-picker { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.int-pick-note { font-weight: 600; font-size: 14px; color: var(--ink-soft); }
.int-pick-list { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; max-height: 46vh; overflow-y: auto; padding: 2px 2px 6px; box-sizing: border-box; }
.int-pick {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 30px 6px 6px; border-radius: 16px;
  border: 3px solid var(--sand-dark); background: var(--paper); box-shadow: 0 3px 0 var(--sand-deep); cursor: pointer; pointer-events: auto;
  font: 600 14.5px/1.2 var(--font); color: var(--ink); text-align: left; transition: transform .12s var(--ease-spring), background .2s ease, border-color .2s ease;
}
.int-pick:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sand-deep); }
.int-pick .sc-face { flex: none; width: 38px; height: 38px; }
.int-pick-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.int-pick-tag { flex: none; padding: 1px 7px; border-radius: 99px; font: 700 11.5px/1.4 var(--font); background: var(--ui-green-soft, #e3f7e9); color: var(--green-dark, #2f8a55); }
.int-pick-tick {
  position: absolute; right: 7px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; line-height: 1; color: #fff; background: var(--sand-dark); opacity: .35; transition: opacity .2s ease, background .2s ease;
}
.int-pick.int-on { border-color: var(--turq); background: var(--ui-turq-soft, #dcf6f3); box-shadow: 0 3px 0 var(--turq-dark); }
.int-pick.int-on .int-pick-tick { opacity: 1; background: var(--turq-dark); }
.int-pick.int-fixed { cursor: default; border-color: var(--pink); background: var(--ui-pink-soft, #ffe8f0); box-shadow: 0 3px 0 #b3335f; }
.int-pick.int-fixed .int-pick-tick { background: transparent; }
.int-pick-count { font: 700 13px/1.2 var(--font); color: var(--ink-soft); text-align: right; }

/* ---------- wheel accents ---------- */
.int-wheel-more .ui-wheel-disc { background: radial-gradient(circle, rgba(255, 240, 245, .6) 0 42%, rgba(255, 240, 245, .3) 60%, rgba(255, 240, 245, 0) 71%); }