/* ChatGPT lesson. All rules scoped under .cg-* */

.cg-sc { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.cg-note { font-size: 12px; color: var(--faint); text-align: center; }

/* the old model's window */
.cg-head { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.cg-head b { font-size: 15px; color: var(--text); }
.cg-head span { font-size: 12.5px; color: var(--dim); }
.cg-input { padding: 12px 14px; border-radius: 22px; background: var(--surface); border: 1.5px solid var(--violet-bright); color: var(--text); font-size: 15px; line-height: 1.35; box-shadow: 0 0 14px rgba(169,155,255,.25); }
.cg-list { display: flex; flex-direction: column; gap: 4px; }
.cg-more { display: block; color: var(--dim); font-style: italic; }

/* a document being continued */
.cg-doc { padding: 12px 14px; border-radius: 14px; background: #F2EDE3; color: #1B1A18; font-family: var(--serif); font-size: 16px; line-height: 1.4; }
.cg-p { color: #1B1A18; font-weight: 600; }
.cg-ans { color: #5B45C8; font-weight: 600; }

/* example chats */
.cg-feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cg-card { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 12px; background: var(--raised); border: 1.5px solid var(--violet-bright); box-shadow: 0 3px 0 #2A2F55; transition: transform .35s, opacity .35s; }
.cg-cq { font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.25; }
.cg-ca { font-size: 12.5px; color: var(--gold); line-height: 1.25; }
.cg-card.fed { transform: translateY(46px) scale(.6); opacity: 0; }
.cg-feed.cg-hidden { visibility: hidden; }
.cg-model { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 14px; background: linear-gradient(135deg, #3A2A7A, #5B45C8); color: #fff; }
.cg-model b { font-size: 15px; }
.cg-count { font-family: var(--mono); font-size: 13px; color: #FFE2A0; }
.cg-gulp { animation: cgGulp .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes cgGulp { 50% { transform: scale(1.04); } }

/* rating two replies */
.cg-req { align-self: flex-end; max-width: 85%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--violet-deep); color: #fff; font-size: 15px; }
.cg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cg-opt { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 96px; padding: 12px 10px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line-strong); font: inherit; text-align: left; color: var(--text); cursor: pointer; transition: border-color .25s, opacity .25s, transform .25s; }
.cg-opt small { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.cg-opt span { font-size: 15px; line-height: 1.3; }
.cg-pick { position: absolute; top: -12px; right: 8px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .3s cubic-bezier(.34,1.56,.64,1); }
.cg-pick svg { width: 17px; height: 17px; fill: #2A1E00; }
.cg-opt.cg-win { border-color: var(--gold); transform: translateY(-2px); }
.cg-opt.cg-win .cg-pick { opacity: 1; transform: none; }
.cg-opt.cg-lose { opacity: .5; }
.cg-tally { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; color: var(--dim); }
.cg-tally b { font-family: var(--mono); font-size: 18px; color: var(--gold); }
.cg-tally .cg-th svg { width: 20px; height: 20px; fill: var(--gold); display: block; }

/* small and trained, big and not */
.cg-size { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 12px; }
.cg-mod { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.cg-mod i { display: block; border-radius: 10px; background: linear-gradient(135deg, #3A2A7A, #7B5CFD); box-shadow: 0 6px 18px rgba(123,92,253,.35); transition: box-shadow .4s; }
.cg-small i { width: 36px; height: 36px; }
.cg-big i { width: 140px; height: 140px; background: linear-gradient(135deg, #2A2F55, #4A4F7A); box-shadow: none; }
.cg-mod b { font-size: 16px; color: var(--text); margin-top: 6px; }
.cg-mod span { font-size: 13px; line-height: 1.3; color: var(--dim); max-width: 150px; }
.cg-small.cg-crown i { box-shadow: 0 0 0 3px var(--gold), 0 0 22px rgba(252,192,80,.6); }
.cg-small.cg-crown b { color: var(--gold); }

/* chat */
.cg-chat { display: flex; flex-direction: column; gap: 8px; }
.cg-msg { padding: 10px 12px; border-radius: 14px; font-size: 15px; line-height: 1.35; max-width: 88%; animation: cgIn .25s ease-out both; }
.cg-u { align-self: flex-end; background: var(--violet-deep); color: #fff; border-bottom-right-radius: 4px; }
.cg-b { align-self: flex-start; background: var(--raised); color: var(--text); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
@keyframes cgIn { from { opacity: 0; transform: translateY(6px); } }
.cg-rate { align-self: flex-end; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 20px; font-size: 14px; font-weight: 700; animation: cgPop .35s cubic-bezier(.34,1.56,.64,1) both; }
.cg-rate.up { background: rgba(63,214,154,.15); color: var(--mint); }
.cg-rate.down { background: rgba(216,85,85,.15); color: #FF8A8A; }
.cg-rate .cg-th svg { display: block; width: 20px; height: 20px; fill: currentColor; }
.cg-rate.down .cg-th svg { transform: rotate(180deg); }
@keyframes cgPop { from { opacity: 0; transform: scale(.6); } }
.cg-dots { display: flex; justify-content: center; gap: 8px; }
.cg-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--raised); border: 1.5px solid var(--line-strong); }
.cg-dots i.now { border-color: var(--gold); }
.cg-dots i.up { background: var(--mint); border-color: var(--mint); }
.cg-dots i.down { background: var(--red); border-color: var(--red); }
.cg-replies .choice span { font-size: 15px; line-height: 1.3; text-transform: none; }

/* April 2025 */
.cg-tl { display: flex; flex-direction: column; gap: 0; padding-left: 14px; border-left: 2px solid var(--line-strong); margin-left: 8px; }
.cg-ev { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px 0 12px 12px; }
.cg-ev::before { content: ''; position: absolute; left: -21px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--violet); border: 2px solid var(--bg); }
.cg-ev.bad::before { background: var(--gold); }
.cg-ev b { font-size: 13px; letter-spacing: .04em; color: var(--gold); text-transform: uppercase; }
.cg-ev span { font-size: 16px; color: var(--text); }

@media (max-height: 700px) {
  .cg-doc { font-size: 14.5px; padding: 10px 12px; }
  .cg-msg { font-size: 14px; padding: 8px 10px; }
  .cg-chat { gap: 6px; }
  .cg-opt { min-height: 84px; padding: 10px 8px; }
  .cg-opt span { font-size: 14px; }
  .cg-big i { width: 110px; height: 110px; }
}