/* GPT lesson. All rules scoped under .gp-* */

.gp-sc { width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.gp-note { font-size: 12px; color: var(--faint); text-align: center; }
.gp-gap { height: 6px; }

/* the text being written */
.gp-field { position: relative; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--text); font-size: 18px; line-height: 1.4; min-height: 52px; transition: border-color .3s, box-shadow .3s; }
.gp-field.gp-msg { border-radius: 22px; padding: 12px 16px; }
.gp-start { color: var(--text); }
.gp-start b { color: var(--gold); }
.gp-word { display: inline; animation: gpLand .3s cubic-bezier(.34,1.56,.64,1) both; }
.gp-word.new { color: var(--violet-bright); font-weight: 700; }
.gp-word.odd { color: var(--gold); font-weight: 800; }
@keyframes gpLand { from { opacity: 0; } }
.gp-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: text-bottom; background: var(--violet-bright); animation: gpBlink 1s steps(2) infinite; }
@keyframes gpBlink { 50% { opacity: 0; } }
/* before each guess the whole text lights: it reads all of it again */
.gp-field.gp-read { animation: gpRead .45s ease-out; }
@keyframes gpRead { 0% { box-shadow: 0 0 0 0 rgba(169,155,255,0); border-color: var(--line-strong); } 35% { box-shadow: 0 0 16px rgba(169,155,255,.45); border-color: var(--violet-bright); } }
.gp-field.gp-big { font-size: 19px; }
.gp-field.gp-empty { min-height: 80px; }

/* the strip of three guesses */
.gp-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-radius: 14px; background: var(--raised); border: 1px solid var(--line); overflow: hidden; transition: opacity .3s; }
.gp-sug { position: relative; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px 4px; font: inherit; color: var(--text); background: none; border: 0; border-left: 1px solid var(--line); transition: background .2s, color .2s; }
.gp-sug:first-child { border-left: 0; }
.gp-sug b { font-size: 17px; font-weight: 700; }
.gp-sug small { font-family: var(--mono); font-size: 12.5px; color: var(--dim); }
button.gp-sug { cursor: pointer; }
button.gp-sug:active { background: rgba(169,155,255,.18); }
button.gp-sug:disabled { cursor: default; color: var(--faint); }
.gp-sug.on { background: rgba(252,192,80,.16); color: var(--gold); }
.gp-sug.on small { color: var(--gold); }
.gp-strip.gp-off { opacity: .45; }

/* the guess it took that wasn't its top one */
.gp-alt { position: absolute; left: 50%; top: -22px; translate: -50% 0; white-space: nowrap; padding: 1px 7px; border-radius: 8px; background: var(--gold); color: #2A1E00; font: 800 12px var(--sans); font-style: normal; animation: gpLand .3s ease-out both; }
.gp-strip:has(.gp-alt) { overflow: visible; }

/* a phone keyboard: the suggestion bar over keys that are only scenery */
.gp-phone .gp-field.gp-msg { background: #1C1C1E; border-color: #3A3A3C; }
.gp-kb { display: flex; flex-direction: column; gap: 8px; padding: 6px 4px 10px; border-radius: 16px; background: #2C2C2E; }
.gp-kb .gp-strip { background: none; border: 0; border-radius: 10px; }
.gp-kb .gp-sug { border-left: 1px solid rgba(255,255,255,.14); color: #F2F2F7; }
.gp-kb .gp-sug:first-child { border-left: 0; }
.gp-kb .gp-sug b { font-weight: 500; font-size: 17px; }
.gp-keys { display: flex; flex-direction: column; gap: 6px; opacity: .4; pointer-events: none; }
.gp-keys div { display: flex; justify-content: center; gap: 4px; }
.gp-keys i { width: calc((100% - 36px) / 10); max-width: 30px; height: 30px; display: grid; place-items: center; border-radius: 5px; background: #48484A; color: #F2F2F7; font: 400 14px var(--sans); font-style: normal; }

/* a word it took that wasn't its top guess, marked in the text */
.gp-word.gp-notop { color: var(--gold); text-decoration: underline 2px; text-underline-offset: 3px; }

/* two runs, one above the other */
.gp-sc.gp-again { gap: 6px; }
.gp-again .gp-field { font-size: 15px; padding: 8px 12px; min-height: 0; line-height: 1.35; }
.gp-field.gp-done { opacity: .8; }
.gp-field.gp-two .gp-word.new { color: var(--gold); }

/* a chatbot answer streaming in */
.gp-chat { display: flex; flex-direction: column; gap: 8px; }
.gp-me { align-self: flex-end; max-width: 85%; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: var(--violet-deep); color: #fff; font-size: 15px; }
.gp-bot { align-self: flex-start; max-width: 92%; min-height: 64px; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--raised); border: 1px solid var(--line); color: var(--text); font-size: 16px; line-height: 1.4; }
.gp-dot { display: inline-block; width: 9px; height: 9px; margin-left: 4px; border-radius: 50%; background: var(--text); vertical-align: middle; animation: gpBlink 1s steps(2) infinite; }

@media (max-height: 700px) {
  .gp-field { font-size: 16px; padding: 10px 12px; }
  .gp-sug { min-height: 46px; }
  .gp-keys i { height: 24px; font-size: 12px; }
  .gp-sug b { font-size: 16px; }
  .gp-again .gp-field { font-size: 14px; padding: 6px 10px; }
}