/* Radicalization lesson. All rules scoped under .rad-* */
/* the hook */
.rad-hook { position: relative; width: 100%; max-width: 340px; height: 330px; margin: 0 auto; }
.rad-sam-big { position: absolute; left: 50%; bottom: 0; translate: -50% 0; height: 215px; filter: drop-shadow(0 10px 18px rgba(123,92,253,.28)); }
.rad-post { position: absolute; left: 50%; top: 0; width: 270px; translate: -50% 0; padding: 10px 14px; border-radius: 14px; background: var(--raised); border: 1px solid var(--line-strong); box-shadow: 0 12px 30px rgba(0,0,0,.45); text-align: left; animation: radRise .9s cubic-bezier(.2,.8,.2,1) .2s both; transition: translate .55s ease-out, opacity .55s, scale .55s, filter .55s; }
.rad-post span { display: block; font: 600 12px var(--sans); color: var(--dim); }
.rad-post b { font: 700 18px/1.25 var(--sans); }
.rad-hook.past .rad-post { translate: -50% -6px; scale: .94; opacity: .5; filter: grayscale(1); }
@keyframes radRise { from { opacity: 0; top: 120px; } }

/* the ladder */
.rad-lad { position: relative; width: 100%; max-width: 350px; margin: 0 auto; padding-left: 58px; display: flex; flex-direction: column; gap: 5px; }
.rad-rung { position: relative; min-height: 44px; padding: 5px 12px; border-radius: 10px; background: var(--surface); border: 1.5px solid var(--line); text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 8px; transition: background .35s, border-color .35s, opacity .35s, color .35s; }
.rad-t { font: 700 14px/1.2 var(--sans); }
.rad-like { flex: none; font: 800 12px var(--sans); color: var(--streak); white-space: nowrap; }
.rad-here { background: rgba(252,192,80,.12); border-color: var(--gold); }
.rad-near { border-color: var(--violet-bright); border-style: dashed; }
.rad-far { opacity: .45; }
.rad-past { opacity: .6; }
.rad-past .rad-t { color: var(--dim); }
.rad-no { border-color: var(--red); }
.rad-look .rad-rung:first-child, .rad-look .rad-rung:last-of-type { opacity: 1; }
.rad-look .rad-rung:last-of-type { border-color: var(--line-strong); }
.rad-sam { position: absolute; left: 0; top: 0; width: 52px; translate: 0 -50%; display: flex; flex-direction: column; align-items: center; transition: top .55s cubic-bezier(.3,.7,.2,1); pointer-events: none; }
.rad-sam img { height: 46px; width: auto; }
.rad-sam span { font: 800 12px var(--sans); color: var(--gold); line-height: 1; }

/* you've changed */
.rad-fr { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.rad-chat { width: 100%; max-width: 350px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
.rad-b { max-width: 78%; padding: 7px 12px; border-radius: 16px; font: 600 14px/1.3 var(--sans); }
.rad-b span { display: block; font: 800 12px var(--sans); color: var(--dim); }
.rad-them { align-self: flex-start; background: var(--raised); border-bottom-left-radius: 4px; }
.rad-me { align-self: flex-end; background: var(--violet-deep); border-bottom-right-radius: 4px; }
.rad-me span { color: var(--violet-bright); }
.rad-dim .rad-rung { min-height: 30px; padding: 3px 10px; }
.rad-dim .rad-t { font-size: 12.5px; }
.rad-dim .rad-sam img { height: 30px; }

/* the history */
.rad-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rad-hist { position: relative; width: 100%; max-width: 330px; border-radius: 22px; background: #0d1222; border: 2px solid var(--line-strong); padding: 8px; }
.rad-hhead { font: 800 12px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; padding: 2px 6px 6px; }
.rad-list { height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y; }
.rad-list::-webkit-scrollbar { display: none; }
.rad-row { flex: none; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px; border-radius: 10px; background: var(--surface); }
.rad-y { font: 800 12px var(--mono); color: var(--faint); }
.rad-v { display: flex; align-items: center; gap: 8px; font: 700 13.5px/1.2 var(--sans); }
.rad-v i { flex: none; width: 34px; height: 22px; border-radius: 5px; background: var(--h); }
.rad-h0 { --h: #3FD69A; } .rad-h1 { --h: #6EC6FF; } .rad-h2 { --h: #FCC050; } .rad-h3 { --h: #FB9679; } .rad-h4 { --h: #D85555; }
.rad-fade { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 30px; background: linear-gradient(transparent, #0d1222); pointer-events: none; border-radius: 0 0 14px 14px; }
.rad-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 330px; }

@media (max-height: 700px) {
  .rad-hook { height: 270px; }
  .rad-sam-big { height: 165px; }
  .rad-lad { gap: 4px; }
  .rad-rung { min-height: 44px; padding: 3px 10px; }
  .rad-t { font-size: 13px; }
  .rad-list { height: 190px; }
  .rad-dim .rad-rung { min-height: 26px; }
  .rad-dim .rad-t { font-size: 12px; }
}