/* RTRN web: preserve the approved mobile finder, add a desktop workspace. */
/* 8 October: approved admin visual language on the desktop finder only.
   The dedicated mobile host retains its independently published stylesheet. */
@media(min-width:900px) and (hover:hover) and (pointer:fine){
 body{background:linear-gradient(135deg,#a8f6f8,#e4cffd)!important;background-attachment:fixed!important}
 .shell>.hero{background:linear-gradient(142deg,#6031d9,#156deb 54%,#00b9c4);border-radius:30px;box-shadow:none}
 .shell input,.shell textarea{background:#fff;border-color:#c5c3df;color:#151831}
 .shell input:focus-visible,.shell textarea:focus-visible{border-color:#6038ff;box-shadow:0 0 0 3px #6038ff20}
}
body{background:linear-gradient(135deg,#d2f7fa 0%,#e6e9ff 55%,#eee0ff 100%);background-attachment:fixed}
.shell>*{min-width:0}
.hero,.card,.choice,.notice{overflow-wrap:anywhere}
button:focus-visible,a:focus-visible,.photo-button:focus-within{outline:3px solid #00a6b6;outline-offset:3px}
button:disabled{cursor:wait;opacity:.7}
.primary{background:#6038ff}
.secondary,.photo-button{background:#e2d9ff;color:#4223b5}
.chat{max-height:46vh;max-height:46dvh;overflow-y:auto;overscroll-behavior:contain;padding:8px}
.bubble{overflow-wrap:anywhere}
.photo-preview button{width:auto;flex:0 0 auto;margin:0}
@media(min-width:900px){
 .shell{width:min(1120px,calc(100% - 64px));padding:32px 0;display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px 28px;align-content:start;align-items:start}
 .shell>.hero{grid-column:1;grid-row:1 / span 6;position:sticky;top:32px;padding:28px;min-height:420px;display:flex;flex-direction:column;justify-content:center}
 .hero .brand{font-size:28px;margin-bottom:34px}
 .hero .brand img{width:66px;height:66px;border-radius:18px;padding:8px}
 .hero h1{font-size:40px;line-height:1.08}
 .hero p{font-size:16px;line-height:1.6}
 .hero .tag-label{color:#fff}
 .shell>:not(.hero){grid-column:2;margin-top:0}
 .shell>.footer{grid-column:1 / -1;padding-top:14px}
 .card{padding:26px;background:linear-gradient(125deg,#fcffff,#f4edff);border-color:#c8b9ef}
 .choice{min-height:112px;padding:22px;grid-template-columns:48px 1fr 24px;border-color:#c8c6ea}
 .choice .icon{width:48px;height:48px}
 .choice strong{font-size:22px}
 .choice .copy{font-size:15px}
 .notice{font-size:13px;padding:18px}
 .chat{max-height:38vh;max-height:38dvh}
 #report{padding:20px}
 #report label{margin:10px 0 5px}
 #report textarea{min-height:96px}
 #report .notice{margin-top:10px;padding:12px}
 #report .photo-field{margin-top:10px}
}
@media(min-width:600px) and (max-width:899px){.shell{width:min(700px,calc(100% - 40px));padding-inline:0}.choices{grid-template-columns:1fr}.hero h1{font-size:34px}}
@media(max-width:380px){.shell{padding:16px 12px}.hero,.card{padding:18px}.choice{padding:14px;gap:10px}.choice strong{font-size:18px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}
/* Desktop conversation review: scoped to the still-unapproved chat state.
   Approved choices/report forms and compact-device layouts are unchanged. */
@media(min-width:1100px) and (hover:hover) and (pointer:fine){
 .shell>.card:has(#chat){display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;padding:4px 0 0;background:transparent;border:0;box-shadow:none;border-radius:0}
 .card:has(#chat)>h2,.card:has(#chat)>p,.card:has(#chat)>#chat,.card:has(#chat)>#reply{grid-column:1/-1;margin:0}
 .card:has(#chat)>h2{font-size:30px}
 .card:has(#chat)>#chat{min-height:180px;max-height:38vh;padding:16px;border:1px solid #cbd6e7;background:#ffffff66;border-radius:16px}
 .card:has(#chat)>#reply{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:10px 16px;align-items:end}
 .card:has(#chat) #reply label{grid-column:1/-1;margin:0}
 .card:has(#chat) #replyText{min-height:90px;height:90px;resize:vertical}
 .card:has(#chat) #send-reply,.card:has(#chat)>#refresh,.card:has(#chat)>#close{height:46px;min-height:46px;margin:0;padding:10px 18px;font-size:14px;border-radius:11px}
 .card:has(#chat)>#refresh{width:220px;justify-self:start;background:linear-gradient(138deg,#e3f8ff,#f5eaff 43%,#fff 51%,#e4d9f8);border:1px solid #cfd6ea;color:#40516e;box-shadow:none}
 .card:has(#chat)>#close{width:180px;justify-self:end;background:linear-gradient(138deg,#fceff4,#eee5f2);border:1px solid #ddcddd;color:#744357}
}

/* Confirmation and unavailable-tag states: match the adjacent brand height,
   without adding a giant empty white card or touching the approved forms. */
@media(min-width:1100px) and (hover:hover) and (pointer:fine){
 .shell>section.card:not(:has(#chat,form,.spinner)){min-height:420px;padding:32px;display:flex;flex-direction:column;justify-content:center;background:transparent;border:0;border-radius:0;box-shadow:none}
 .shell>section.card:not(:has(#chat,form,.spinner)) h2{font-size:30px;line-height:1.15}
 .shell>section.card:not(:has(#chat,form,.spinner)) p{max-width:52ch}
}