/* Incoming speech and internal thought are separate, labelled surfaces. */
.lo-message,.lo-notice{pointer-events:auto;position:relative;border:1px solid #c2d6e750;background:linear-gradient(135deg,#263c4ce8,#1d303eef);border-radius:19px 19px 19px 5px;padding:15px 18px;box-shadow:0 8px 30px #10182030;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#f4f8fc}
.lo-message-header{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.lo-contact-avatar{display:grid;place-items:center;flex:none;width:29px;height:29px;border-radius:50%;background:#d3e6f21a;border:1px solid #d3e6f246;font-size:14px;color:#e8f3fc}
.lo-contact-name{display:inline;font-size:14px;font-weight:600;color:#f0f7ff}
.lo-contact-role{display:inline;color:#c1d0dc;font-size:11px;margin-left:7px}
.lo-message-text{font-size:17px;line-height:1.36;margin:0;color:#f4f8fc;outline:none}
.lo-notice{display:flex;align-items:center;gap:12px;border-radius:20px;padding:18px}
.lo-notice-icon{display:grid;place-items:center;flex:none;background:#d7e9f31c;border-radius:11px;width:40px;height:40px;font-size:25px}
.lo-notice-label{display:block;font-size:9px;letter-spacing:.12em;color:#c5d8e6;margin-bottom:7px}
.lo-notice strong{font-size:16px;font-weight:500;line-height:1.4}
.lo-notice strong .lo-notice-role{font-size:12px;color:#cedce5;white-space:nowrap}
.lo-notice-dot{width:6px;height:6px;border-radius:50%;background:#dfc190;flex:none;margin-left:auto}
.lo-arrived .lo-message,.lo-arrived .lo-notice{animation:lo-thought-in .5s .3s both}
.living-opening[data-kind=contact] .lo-thought{margin:12px 0 0 18px;background:linear-gradient(135deg,#3e352ddc,#302b25ec);border-color:#efd7b54a;padding:13px 17px;border-radius:23px 23px 7px 23px}
.living-opening[data-kind=contact] .lo-thought::before,.living-opening[data-kind=contact] .lo-thought::after{display:none}
.living-opening[data-kind=contact] .lo-line{font-size:17px;line-height:1.35;margin-top:6px}
.living-opening[data-kind=contact] .lo-speaker{font-size:9px;letter-spacing:.08em;overflow-wrap:anywhere}
.living-opening[data-stage=rest] .lo-choices{pointer-events:auto;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.living-opening[data-stage=rest] .lo-choice{min-height:48px!important;text-align:center;font-size:14px!important;padding:10px 9px;background:#26302de8;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.living-opening[data-stage=rest] .lo-boundary span{display:block}
.living-opening[data-stage=rest] .lo-dock{max-height:none;bottom:calc(76px + var(--safe-bottom))}
.living-opening[data-kind=notification] .lo-dock{top:56%;bottom:auto}
.living-opening[data-kind=resting] .lo-line{font-size:clamp(17px,4.5vw,21px);line-height:1.4}
@media(max-height:670px) and (orientation:portrait){
 .living-opening[data-stage=rest] .lo-dock{bottom:calc(65px + var(--safe-bottom))}
 .living-opening[data-kind=contact] .lo-message{padding:10px 13px}
 .living-opening[data-kind=contact] .lo-message-header{margin-bottom:5px;gap:7px}
 .living-opening[data-kind=contact] .lo-contact-avatar{width:24px;height:24px;font-size:12px}
 .living-opening[data-kind=contact] .lo-message-text{font-size:15px;line-height:1.3}
 .living-opening[data-kind=contact] .lo-thought{padding:10px 13px;margin-top:9px}
 .living-opening[data-kind=contact] .lo-line{font-size:15px;line-height:1.3;margin-top:4px}
 .living-opening[data-stage=rest] .lo-choices{margin-top:9px;gap:6px}
 .living-opening[data-stage=rest] .lo-choice{min-height:44px!important}
}
@media(max-height:540px) and (orientation:portrait){
 .living-opening[data-stage=rest] .lo-heading{max-width:115px}
 .living-opening[data-stage=rest] .lo-heading h2{font-size:16px}
 .living-opening[data-kind=contact] .lo-message-text,.living-opening[data-kind=contact] .lo-line{font-size:14px;line-height:1.25}
 .living-opening[data-kind=contact] .lo-message,.living-opening[data-kind=contact] .lo-thought{padding:8px 12px}
 .living-opening[data-kind=contact] .lo-contact-avatar{display:none}
 .living-opening[data-kind=contact] .lo-contact-name{font-size:13px}
 .living-opening[data-kind=contact] .lo-contact-role{font-size:10px}
 .living-opening[data-kind=contact] .lo-speaker{font-size:8px}
 .living-opening[data-stage=rest] .lo-choice{font-size:13px!important;padding:7px 8px}
}
@media(orientation:landscape) and (max-height:600px){
 .living-opening[data-stage=rest] .lo-dock{bottom:calc(62px + var(--safe-bottom))}
 .living-opening[data-kind=notification] .lo-dock{top:auto}
 .living-opening[data-kind=contact] .lo-message,.living-opening[data-kind=contact] .lo-thought{padding:9px 12px}
 .living-opening[data-kind=contact] .lo-thought{margin-top:8px;margin-left:12px}
 .living-opening[data-kind=contact] .lo-message-header{margin-bottom:5px;gap:8px}
 .living-opening[data-kind=contact] .lo-contact-avatar{display:none}
 .living-opening[data-kind=contact] .lo-contact-name{font-size:13px}
 .living-opening[data-kind=contact] .lo-contact-role{font-size:10px}
 .living-opening[data-kind=contact] .lo-message-text,.living-opening[data-kind=contact] .lo-line{font-size:14px;line-height:1.25}
 .living-opening[data-kind=contact] .lo-speaker{font-size:8px}
 .living-opening[data-stage=rest] .lo-choices{margin-top:8px;gap:6px}
 .living-opening[data-stage=rest] .lo-choice{min-height:44px!important;font-size:13px!important;padding:7px 8px}
}
@media(prefers-reduced-motion:reduce){.lo-arrived .lo-message,.lo-arrived .lo-notice{animation:none;opacity:1;transform:none}}
.lo-paused .lo-message,.lo-paused .lo-notice{animation:none;opacity:1;transform:none}

/* Sent messages use a cool green panel; thoughts remain warm and separately labelled. */
.lo-message[data-direction=outgoing]{background:linear-gradient(135deg,#30463fe8,#253a33ef);border-color:#c9e5cd59;border-radius:19px 19px 5px 19px}
.lo-message[data-direction=outgoing] .lo-contact-role{color:#cee2d4}
.lo-contact-name{overflow-wrap:anywhere}
.living-opening[data-segment=rest-reply][data-kind=contact] .lo-thought{margin-left:0}
@media(max-height:670px) and (orientation:portrait){
 .living-opening[data-kind=message] .lo-message{padding:11px 14px}
 .living-opening[data-kind=message] .lo-message-text{font-size:16px;line-height:1.3}
}
@media(max-height:540px) and (orientation:portrait),(max-height:600px) and (orientation:landscape){
 .living-opening[data-kind=message] .lo-message{padding:10px 13px}
 .living-opening[data-kind=message] .lo-message-text{font-size:15px;line-height:1.3}
}

/* Exact story text sits inside the phone glass; the whole illustrated character stays intact. */
.lo-phone-chat{position:absolute;left:0;top:0;width:220px;height:220px;box-sizing:border-box;transform-origin:0 0;z-index:1;pointer-events:none;user-select:none;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:8px 9px;background:var(--phone-paper);box-shadow:0 0 4px 2px var(--phone-paper);color:#25322d;font:16px/1.24 Arial,sans-serif;letter-spacing:0;text-shadow:none;overflow:hidden}
.lo-phone-chat[hidden]{display:none}
.lo-phone-chat p{margin:0;padding:8px 10px;border-radius:14px 14px 14px 3px;background:#b3c9e9;max-width:190px;box-sizing:border-box;align-self:flex-start;font:inherit;color:inherit}
.lo-phone-chat p[data-direction=outgoing]{align-self:flex-end;background:#a9d7b0;border-radius:14px 14px 3px 14px}

/* Four private reasons fit a single touch screen, separate from sent messages. */
.living-opening[data-kind=reason] .lo-thought{padding:13px 17px;margin:0}
.living-opening[data-kind=reason] .lo-line{font-size:19px;line-height:1.3;margin-top:6px}
.living-opening[data-kind=reason] .lo-choices{grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.living-opening[data-kind=reason] .lo-choice{min-height:64px!important;padding:11px 12px;font-size:15px!important;line-height:1.28;background:linear-gradient(135deg,#3d3932f2,#242e2bf5);border-color:#ecd5ab66}
@media(max-height:670px) and (orientation:portrait),(max-height:600px) and (orientation:landscape){
 .living-opening[data-kind=reason] .lo-thought{padding:10px 13px}
 .living-opening[data-kind=reason] .lo-line{font-size:15px;line-height:1.25}
 .living-opening[data-kind=reason] .lo-speaker{font-size:9px}
 .living-opening[data-kind=reason] .lo-choice{min-height:54px!important;font-size:13px!important;padding:8px;line-height:1.25}
 .living-opening[data-kind=reason] .lo-choices{gap:6px;margin-top:8px}
}
@media(orientation:landscape) and (max-height:400px){
 .living-opening:is([data-segment=rest-home],[data-segment=rest-later]) .lo-heading{max-width:90px}
 .living-opening:is([data-segment=rest-home],[data-segment=rest-later]) .lo-heading h2{font-size:14px;line-height:1.2}
 .living-opening:is([data-segment=rest-home],[data-segment=rest-later]) .lo-heading p{font-size:6px;letter-spacing:.04em}
}

/* Shared narrator palette: plum, distinct from olive thoughts and blue incoming dialogue. */
.living-opening{--narrator-panel:linear-gradient(145deg,#543d61f5,#382a46f5);--narrator-border:#d9bce480;--narrator-label:#f2daf6}
.living-opening[data-kind=passage] .lo-thought{border-radius:20px;background:var(--narrator-panel);border-color:var(--narrator-border)}
.living-opening[data-kind=passage] .lo-thought::before,.living-opening[data-kind=passage] .lo-thought::after{display:none}
.living-opening[data-kind=passage] .lo-speaker{color:var(--narrator-label)}
.living-opening[data-kind=passage] .lo-line{font-size:clamp(17px,4.4vw,20px);line-height:1.4}
@media(max-height:600px){.living-opening[data-kind=passage] .lo-line{font-size:16px;line-height:1.35}}