:root{
  --navy:#17304a;
  --navy-deep:#102438;
  --terracotta:#a94f3f;
  --terracotta-soft:#f0d8d0;
  --cream:#f7f0e5;
  --paper:#fffdf8;
  --gold:#d7a85b;
  --ink:#22313f;
  --muted:#71808b;
  --line:#e4ddd1;
  --danger:#b53e39;
  --sans:"Aptos","Segoe UI",system-ui,sans-serif;
  --serif:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --shadow:0 30px 80px rgba(23,48,74,.18);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family:var(--sans);
  background:
    linear-gradient(135deg,rgba(169,79,63,.08),transparent 42%),
    repeating-linear-gradient(90deg,rgba(23,48,74,.025) 0 1px,transparent 1px 44px),
    var(--cream);
}
button,input{font:inherit}
a{color:inherit}
.app-frame{
  width:min(1120px,calc(100% - 34px));
  min-height:calc(100vh - 40px);
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  margin:20px auto;
  overflow:hidden;
  border:1px solid rgba(23,48,74,.12);
  border-radius:10px 34px 10px 34px;
  background:var(--paper);
  box-shadow:var(--shadow);
}
.conversation{min-width:0;display:flex;flex-direction:column;order:1;background:var(--paper)}
.conversation__header{
  min-height:84px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:13px 24px;
  border-bottom:1px solid var(--line);
}
.brand-mark{
  width:42px;height:42px;display:grid;place-items:center;flex:none;
  border-radius:50% 50% 50% 12px;background:var(--terracotta);color:#fff;
  font:700 24px/1 var(--serif);
}
.brand-copy{display:flex;flex:1;flex-direction:column;gap:2px}
.brand-copy strong{font:700 16px/1.1 var(--serif);color:var(--navy)}
.brand-copy span{font-size:10px;color:var(--muted)}
.conversation__expert{display:flex;align-items:center;gap:9px}
.conversation__expert img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:center 28%}
.conversation__expert>div{display:flex;flex-direction:column;gap:3px}
.conversation__expert strong{font-size:11px;color:var(--navy)}
.conversation__expert span{font-size:9px;color:var(--muted)}
.conversation__expert i,.profile__status i{
  width:7px;height:7px;display:inline-block;margin-right:5px;border-radius:50%;
  background:#61b77c;box-shadow:0 0 0 4px rgba(97,183,124,.13);
}
.consultation-progress{height:4px;background:#f1ece3}
.consultation-progress span{display:block;width:3%;height:100%;background:linear-gradient(90deg,var(--terracotta),var(--gold));transition:width .45s ease}
.conversation__body{
  min-height:0;
  height:calc(100vh - 172px);
  flex:1;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:26px clamp(15px,4vw,42px);
  scrollbar-color:#d6c9b9 transparent;
  scrollbar-width:thin;
  background:
    radial-gradient(circle at 100% 0,rgba(215,168,91,.09),transparent 25%),
    var(--paper);
}
.session-label{
  width:max-content;margin:0 auto 25px;padding:5px 13px;
  border:1px solid var(--line);border-radius:4px;color:var(--muted);
  font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.chat-line{max-width:84%;display:flex;align-items:flex-end;gap:9px;margin-bottom:13px;opacity:0;transform:translateY(8px)}
.chat-line.is-in{animation:lineIn .3s ease forwards}
.chat-line--user{margin-left:auto;justify-content:flex-end}
.chat-line__avatar{width:30px;height:30px;flex:none;border-radius:50%;object-fit:cover;object-position:center 28%}
.chat-line__wrap{min-width:0}
.chat-line__name{margin:0 0 4px 2px;color:var(--terracotta);font-size:9px;font-weight:700}
.chat-line__bubble{
  padding:11px 15px;border:1px solid var(--line);
  border-radius:4px 17px 17px 17px;background:#fffaf2;
  box-shadow:0 6px 18px rgba(23,48,74,.055);
  font-size:14px;line-height:1.55;color:#33404b;
}
.chat-line--user .chat-line__bubble{border-color:var(--navy);border-radius:17px 4px 17px 17px;background:var(--navy);color:#fff}
.chat-line__time{display:block;margin:4px 2px 0;color:#a0a9af;font-size:9px}
.chat-line--user .chat-line__time{text-align:right}
.chat-line__bubble strong{color:var(--terracotta)}
.chat-line__media{display:block;max-width:100%;max-height:420px;margin-top:9px;border-radius:8px;object-fit:contain;background:#f5eee4}
.chat-line__media--pack{width:min(230px,100%);margin-inline:auto}
.writing{display:flex;align-items:flex-end;gap:9px;margin-bottom:13px}
.writing img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:center 28%}
.writing__bubble{display:flex;gap:4px;padding:13px 15px;border:1px solid var(--line);border-radius:4px 17px 17px 17px;background:#fffaf2}
.writing__bubble i{width:6px;height:6px;border-radius:50%;background:#ad9f91;animation:write 1s infinite}
.writing__bubble i:nth-child(2){animation-delay:.14s}.writing__bubble i:nth-child(3){animation-delay:.28s}
.choices{
  max-width:92%;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;
  margin:4px 0 19px auto;padding:11px;border:1px dashed #ccb8a3;
  border-radius:18px 4px 18px 18px;background:#fbf3e8;animation:panelIn .28s ease both;
}
.choices button{
  min-height:42px;flex:1 1 180px;padding:9px 13px;border:1px solid #d8c8b7;
  border-radius:8px;background:#fff;color:var(--navy);font-size:12px;font-weight:700;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform .15s;
}
.choices button:hover,.choices button:focus-visible{outline:0;border-color:var(--terracotta);background:var(--terracotta);color:#fff;transform:translateY(-1px)}
.checkout{
  margin:22px 0 5px;overflow:hidden;border:1px solid var(--line);border-radius:6px 22px 6px 22px;
  background:#fff;box-shadow:0 18px 40px rgba(23,48,74,.1);animation:panelIn .35s ease both;
}
.checkout__head{padding:18px 21px;background:var(--navy);color:#fff}
.checkout__head small{display:block;margin-bottom:5px;color:#d7c29d;font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.checkout__head h2{margin:0;font:700 23px/1.2 var(--serif)}
.checkout__body{display:grid;grid-template-columns:180px minmax(0,1fr);gap:22px;align-items:center;padding:22px}
.checkout__body>img{width:100%;max-height:265px;object-fit:contain}
.checkout__price{display:flex;align-items:baseline;gap:10px;margin:0 0 14px}
.checkout__price del{color:#9a9fa4;font-size:17px}.checkout__price strong{font:700 35px/1 var(--serif);color:var(--terracotta)}
.checkout form{display:grid;gap:9px}
.checkout input{width:100%;min-height:46px;padding:10px 13px;border:1px solid #d6cabe;border-radius:7px;outline:0;color:var(--ink);background:#fff}
.checkout input:focus{border-color:var(--terracotta);box-shadow:0 0 0 3px rgba(169,79,63,.1)}
.checkout input.invalid{border-color:var(--danger)}
.checkout button{min-height:50px;border:0;border-radius:7px;background:var(--terracotta);color:#fff;font-weight:700;cursor:pointer;box-shadow:0 8px 18px rgba(169,79,63,.2)}
.checkout button:hover{filter:brightness(.95)}.checkout button:disabled{cursor:wait;opacity:.7}
.checkout__timer{margin:10px 0 0;color:var(--muted);font-size:10px}.checkout__timer b{color:var(--navy);font-variant-numeric:tabular-nums}
.checkout__note{margin:8px 0 0;color:#89949b;font-size:9px;line-height:1.45}
.conversation__footer{
  min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 24px;border-top:1px solid var(--line);color:#89949b;font-size:9px;
}
.conversation__footer nav{display:flex;gap:12px}.conversation__footer a{text-decoration:none}.conversation__footer a:hover{color:var(--terracotta);text-decoration:underline}
.profile{
  position:relative;display:flex;flex-direction:column;align-items:center;order:2;
  padding:28px 28px 23px;overflow:hidden;text-align:center;color:#fff;background:var(--navy);
}
.profile::before{content:"";position:absolute;width:260px;height:260px;right:-150px;top:-120px;border:1px solid rgba(215,168,91,.28);border-radius:50%}
.profile::after{content:"";position:absolute;width:180px;height:180px;left:-110px;bottom:40px;background:rgba(169,79,63,.15);border-radius:50%}
.profile__status{position:relative;z-index:1;align-self:flex-end;padding:7px 10px;border:1px solid rgba(255,255,255,.15);border-radius:999px;font-size:10px}
.profile__image{position:relative;z-index:1;width:148px;height:148px;margin-top:25px;border:5px solid #f5e9d8;border-radius:50% 50% 50% 18px;object-fit:cover;object-position:center 28%;box-shadow:0 18px 40px rgba(0,0,0,.3)}
.profile__kicker{margin:22px 0 8px;color:#d7c29d;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.profile h1{margin:0;font:700 34px/1.03 var(--serif);letter-spacing:-.02em}
.profile__role{margin:10px 0 0;color:#c9d2db;font-size:12px}
.profile blockquote{margin:27px 0 21px;padding:18px 0;border-block:1px solid rgba(255,255,255,.12);color:#d9e0e6;font:italic 14px/1.65 var(--serif)}
.profile__facts{width:100%;display:grid;grid-template-columns:1fr 1fr}
.profile__facts div{display:flex;flex-direction:column;gap:4px}.profile__facts div+div{border-left:1px solid rgba(255,255,255,.13)}
.profile__facts strong{font-size:16px}.profile__facts span{color:#9eafbd;font-size:8px;letter-spacing:.08em;text-transform:uppercase}
.profile__meta{position:relative;z-index:1;width:100%;display:flex;justify-content:space-between;margin-top:auto;padding-top:28px;color:#9eafbd;font-size:9px}
.profile__meta time{color:#fff}
@keyframes lineIn{to{opacity:1;transform:none}}@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes write{0%,70%,100%{opacity:.3;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
@media(max-width:820px){
  body{background:var(--paper)}.app-frame{width:100%;min-height:100vh;margin:0;display:block;border:0;border-radius:0;box-shadow:none}
  .profile{display:none}.conversation{height:100vh}.conversation__body{height:auto}
}
@media(max-width:540px){
  .conversation__header{min-height:70px;padding:10px 13px}.brand-mark{width:37px;height:37px}.brand-copy span{display:none}
  .conversation__expert>div>strong{display:none}.conversation__body{padding:18px 10px}.chat-line{max-width:93%}.chat-line__bubble{font-size:13px}
  .choices{max-width:100%}.choices button{flex-basis:100%}.checkout__body{grid-template-columns:1fr;padding:18px}.checkout__body>img{height:185px}
  .conversation__footer{justify-content:center}.conversation__footer>span{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}