/* Closing section: a laptop opens as you scroll, its screen runs a scripted OpusAI chat */
.chat { padding-bottom: clamp(60px, 8vw, 120px); overflow: hidden; }
.chat__ctas { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.chat .sec-head { margin-bottom: clamp(48px, 6vw, 88px); }
.laptop { --open: 1; width: min(980px, 100%); margin: 0 auto; perspective: 2400px; }
.laptop__lid { position: relative; width: 86%; margin: 0 auto; aspect-ratio: 16 / 10.2; background: linear-gradient(180deg, #3a3a3c, #1c1c1e); border-radius: 18px 18px 6px 6px; padding: 1.6% 1.6% 2.2%; transform-origin: 50% 100%; transform: rotateX(calc((1 - var(--open)) * -88deg)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 40px 120px rgba(0, 0, 0, 0.6); will-change: transform; }
.laptop__screen { width: 100%; height: 100%; background: #f6f6f4; border-radius: 8px; overflow: hidden; position: relative; }
.laptop__base { position: relative; height: clamp(12px, 1.6vw, 18px); background: linear-gradient(180deg, #d8d8da 0%, #a9a9ad 55%, #6d6d72 100%); border-radius: 2px 2px 14px 14px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55); }
.laptop__notch { position: absolute; left: 50%; top: 0; width: 14%; height: 40%; transform: translateX(-50%); background: #8d8d92; border-radius: 0 0 8px 8px; }
.app { display: grid; grid-template-columns: 52px 1fr; height: 100%; color: #1b1b1b; font-size: clamp(10px, 1.25vw, 14px); }
.app__rail { border-right: 1px solid #e7e6e1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 16px; background: #fbfbf9; }
.app__rail i { width: 18px; height: 18px; border-radius: 5px; background: #e4e3de; }
.app__rail .app__dot { background: #121212; border-radius: 6px; }
.app__main { display: flex; flex-direction: column; min-height: 0; padding: 0 6% 4%; }
.app__top { display: flex; justify-content: space-between; align-items: center; height: 44px; font-weight: 600; font-size: 0.92em; border-bottom: 1px solid #efeeea; margin: 0 -6% 0; padding: 0 6%; }
.app__badge { font-weight: 500; font-size: 0.82em; color: #6b6a65; background: #efeee9; padding: 3px 8px; border-radius: 99px; }
.app__thread { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 14px 0; }
.app__hello { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: auto 0; transition: opacity 0.4s, transform 0.4s; }
.app__hello p { font-family: var(--serif); font-size: 1.9em; letter-spacing: -0.01em; }
.app__thread.has-msgs .app__hello { display: none; }
.app__orb { width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(from 0deg, #465BFF, #A0B6FF, #F4F1EB, #c9b8ff, #465BFF); -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%); mask: radial-gradient(circle, transparent 52%, #000 54%); animation: orb 6s linear infinite; }
@keyframes orb { to { transform: rotate(360deg); } }
.msg { max-width: 84%; line-height: 1.5; animation: fadein 0.4s var(--ease-out) both; }
.msg--user { align-self: flex-end; background: #121212; color: #fff; padding: 8px 12px; border-radius: 12px 12px 3px 12px; }
.msg--ai { align-self: flex-start; display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.msg--ai .app__orb { width: 22px; height: 22px; }
.msg--ai p { color: #262522; }
.msg--ai .caret { display: inline-block; width: 2px; height: 1em; background: #465BFF; vertical-align: -2px; margin-left: 2px; animation: caret 0.9s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.app__chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 10px; }
.app__chips button { font-size: 0.9em; padding: 6px 11px; border-radius: 99px; border: 1px solid #e2e1dc; background: #fff; color: #2a2926; transition: background-color 0.2s, border-color 0.2s; }
.app__chips button:hover { background: #f1f3ff; border-color: #c1d0ff; }
.app__chips button.is-on { background: #e6eaff; border-color: #A0B6FF; color: #2534b3; }
.app__input { display: flex; align-items: center; justify-content: space-between; height: 42px; border: 1px solid #e2e1dc; border-radius: 12px; padding: 0 8px 0 14px; color: #9a9893; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05); }
.app__send { width: 26px; height: 26px; border-radius: 8px; background: #121212; position: relative; }
.app__send::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-top: 1.6px solid #fff; border-left: 1.6px solid #fff; transform: translate(-50%, -25%) rotate(45deg); }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .laptop__lid { width: 100%; border-radius: 12px 12px 4px 4px; aspect-ratio: 10 / 11; } .app { grid-template-columns: 1fr; } .app__rail { display: none; } .app__hello p { font-size: 1.6em; } .app { font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) { .app__orb { animation: none; } .laptop__lid { transform: none; } }