/* Picture reflections: warm paper, uncropped imagery, and unhurried choices. */
.session-pictures { font-family:var(--sans);color:var(--ink) }
.session-pictures[data-picture-role=client],.session-pictures[data-picture-notification=true] { position:absolute;inset:0;pointer-events:none }
.session-pictures[data-picture-role=client] > *, .session-pictures[data-picture-notification=true] > * { pointer-events:auto }
.picture-workspace-invitation { font:12px/1.7 var(--sans);white-space:pre-wrap;color:var(--room-secondary);margin:0 0 20px }
.picture-workspace-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:20px }
.picture-workspace-grid figure { min-width:0;margin:0;padding:6px;border-radius:12px;background:var(--paper);border:1px solid var(--room-line) }
.picture-workspace-grid img { display:block;width:100%;height:96px;object-fit:contain;border-radius:7px }
.picture-workspace-grid figcaption { padding:8px 4px 3px;font:400 11px/1.5 var(--sans);color:var(--room-secondary);overflow-wrap:anywhere }
.picture-workspace-response { margin:0 0 20px;padding:16px;border:1px solid var(--room-line);border-radius:14px;background:var(--paper) }
.picture-workspace-response img { width:100%;max-height:200px;object-fit:contain;margin:13px 0;border-radius:8px }
.picture-workspace-response strong { display:block;font:12px/1.6 var(--sans);overflow-wrap:anywhere }
.picture-workspace-response p { margin:10px 0 0;font:12px/1.7 var(--sans);color:var(--muted) }
/* The client gallery gives the images the space; selection stays local until shared. */
.call-view[data-role=client] { --pictures-width:clamp(380px,39vw,540px) }
.client-picture-invitation { position:fixed;z-index:12;top:var(--pictures-top,68px);bottom:var(--pictures-bottom,72px);right:var(--room-gutter);display:flex;flex-direction:column;width:var(--pictures-width);border:1px solid #dfe4d7;border-radius:var(--room-radius);background:#fafbf5;overflow:hidden;box-shadow:0 2px 8px #34483d05;animation:picture-arrive .25s ease-out }
.call-view[data-role=client]:has(.client-picture-invitation:not([hidden])) .call-body { padding-right:calc(var(--pictures-width) + var(--room-gutter)) }
.client-picture-invitation > header { display:flex;align-items:center;justify-content:space-between;padding:10px 14px 2px 24px;flex-shrink:0 }
.client-picture-invitation .exercise-eyebrow { color:#687d59 }
.client-picture-invitation > header .chat-icon-button { --chat-icon-size:40px }
.picture-invitation-content { min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c7d1b8 transparent;padding:6px 20px 24px }
.picture-invitation-content h2 { margin:0 4px;font:400 35px/1.12 var(--serif);letter-spacing:-.025em;text-wrap:balance }
.picture-invitation-copy { margin:12px 4px 22px;font:12px/1.8 var(--sans);color:#6b7a60;white-space:pre-wrap;overflow-wrap:anywhere }
.picture-choices { min-inline-size:0;margin:0;padding:0;border:0 }
.picture-gallery-heading { display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;padding:0 4px;margin-bottom:12px;font:10px/1.6 var(--sans);color:#67785c }
.picture-gallery-heading > span:last-child { white-space:nowrap;color:#77836b }
.picture-choice-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px 8px }
.picture-tile { position:relative;min-width:0 }
.picture-choice { position:relative;display:block;min-width:0;padding:4px;border:2px solid transparent;border-radius:17px;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s }
.picture-choice-image { position:relative;display:block;aspect-ratio:4/3;border-radius:11px;background:#eceee5;overflow:hidden }
.picture-choice img { display:block;width:100%;height:100%;object-fit:contain }
.picture-choice:hover { background:#eef1e7 }
.picture-choice:has(input:checked) { border-color:#778e65;background:#fffef9;box-shadow:0 3px 10px #4256340a }
.picture-choice-check { position:absolute;top:8px;right:8px;display:grid;place-items:center;width:26px;height:26px;border:1px solid #faffee80;border-radius:50%;background:#526c43;color:#fff;box-shadow:0 2px 6px #263b2030;font-size:11px;opacity:0;transform:scale(.8);transition:opacity .18s,transform .18s }
.picture-choice:has(input:checked) .picture-choice-check { opacity:1;transform:none }
.picture-choice:has(input:focus-visible) { outline:2px solid #526c43;outline-offset:2px }
.picture-choice-caption { display:block;padding:10px 4px 5px;font:12px/1.6 var(--sans);color:#617355;overflow-wrap:anywhere }
.picture-enlarge { position:absolute;top:12px;left:12px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid #fffef780;border-radius:10px;background:#fffef3ed;color:#3d5136;box-shadow:0 2px 8px #27352012;cursor:zoom-in;backdrop-filter:blur(8px);transition:opacity .15s,background .15s }
.picture-enlarge:hover { background:#fffef8 }
.picture-enlarge .icon { font-size:13px }
@media(hover:hover) and (pointer:fine) {
    .picture-tile:not(:hover):not(:focus-within) .picture-enlarge { opacity:0 }
}
@media(pointer:coarse) { .picture-enlarge { width:44px;height:44px } }
.client-picture-invitation > footer { flex-shrink:0;padding:14px 24px 9px;border-top:1px solid #e0e5d7;background:#f5f7ef }
.picture-choice-summary { display:flex;align-items:center;gap:12px;min-height:40px;margin-bottom:12px }
.picture-choice-summary img { width:44px;height:40px;flex-shrink:0;object-fit:contain;border:2px solid #fffef8;border-radius:7px;background:#e9edde }
.picture-choice-summary strong { display:block;font:500 12px/1.5 var(--sans);color:#526b43 }
.picture-choice-summary small { display:block;margin-top:2px;font:10px/1.5 var(--sans);color:#6d7e61 }
.picture-sharing-footnote { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0 10px;margin-top:6px;font:10px/1.6 var(--sans);color:#6b7c5f }
.picture-sharing-footnote > span .icon { font-size:9px;margin-right:4px }
.picture-sharing-footnote button { flex-shrink:0;min-height:40px;padding:5px 0 5px 8px;border:0;background:transparent;color:#586e49;font:11px var(--sans);text-decoration:underline;text-underline-offset:4px }
.picture-shared-state { padding:2px 4px 0 }
.picture-shared-receipt { display:flex;align-items:center;gap:9px;margin:0 0 20px;font:500 11px var(--sans);color:#587247 }
.picture-shared-receipt > span { display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e6edda;font-size:11px }
.picture-shared-state h2 { margin-inline:0 }
.picture-shared-state > p { margin:12px 0 22px;font:12px/1.8 var(--sans);color:#6b7a60 }
.picture-shared-image { position:relative;margin:0 0 16px;padding:5px;border:1px solid #dce3d0;border-radius:16px;background:#fffef9 }
.picture-shared-image > img { display:block;width:100%;height:min(42dvh,380px);object-fit:contain;border-radius:10px;background:#eceee5 }
.picture-shared-image figcaption { padding:12px 8px 6px;font:12px/1.6 var(--sans);color:#617355;overflow-wrap:anywhere }
.picture-shared-state > .exercise-text-button { display:block;margin-inline:auto;min-height:40px }
.picture-preview-dialog { width:min(900px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:14px 20px 16px;overflow:auto;border:1px solid #e0e4d5;border-radius:24px;background:#fafbf5;color:var(--ink);box-shadow:0 25px 90px #15231330 }
.picture-preview-dialog::backdrop { background:#22312794;backdrop-filter:blur(10px) }
.picture-preview-dialog header { display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px }
.picture-preview-dialog h2 { margin:0;font:400 27px var(--serif);letter-spacing:-.02em }
.picture-preview-dialog h2 span { margin-left:5px;font:12px var(--sans);letter-spacing:0;color:#708164 }
.picture-preview-dialog .chat-icon-button { --chat-icon-size:44px }
.picture-preview-stage { margin:0 }
.picture-preview-stage img { display:block;width:100%;height:min(58dvh,600px);object-fit:contain;border-radius:13px;background:#eceee5 }
.picture-preview-stage figcaption { padding:16px 12px 0;text-align:center;font:12px/1.7 var(--sans);color:#617355;overflow-wrap:anywhere }
.picture-preview-dialog footer { display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px }
.picture-preview-navigation { display:flex;gap:6px }
.picture-preview-navigation button { border:1px solid #dbe2ce;border-radius:50%;background:#f3f6eb;color:#526c43 }
.picture-preview-navigation button:disabled { opacity:.35 }
.picture-preview-dialog .exercise-primary { width:auto;min-width:200px;min-height:44px }
.picture-preview-dialog > small { display:block;margin-top:12px;text-align:right;font:10px var(--sans);color:#6b7c5f }
.picture-response-notice { position:fixed;z-index:32;left:18px;bottom:calc(var(--pictures-bottom,64px) + 12px);width:300px;max-width:calc(100vw - 36px);max-height:calc(100dvh - var(--pictures-top,68px) - var(--pictures-bottom,64px) - 24px);overflow:auto;padding:17px 19px 18px;border:1px solid #dce3d0;border-radius:20px;background:#fcfdf5;box-shadow:0 12px 45px #26382524;animation:picture-arrive .25s ease-out }
.picture-response-heading { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px }
.picture-response-heading .exercise-eyebrow { letter-spacing:.06em;font-size:8px }
.picture-response-heading .icon { margin-right:4px }
.picture-response-notice > img { display:block;width:100%;max-height:210px;object-fit:contain;border-radius:10px;background:#efefe4 }
.picture-response-notice h3 { margin:18px 0 7px;font:32px/1.1 var(--serif);letter-spacing:-.02em }
.picture-response-notice > p { margin:0;font:12px/1.7 var(--sans);color:#7d8a70 }
.picture-response-notice blockquote { margin:17px 0;padding:0 0 0 13px;border-left:2px solid #ced9be;color:#7a8c67;font:italic 20px/1.5 var(--serif) }
.picture-response-notice > small { display:block;margin-top:10px;text-align:center;font:9px/1.7 var(--sans);color:#8e9b80 }
.picture-response-symbol { display:grid;place-items:center;height:70px;background:#edf2e4;border-radius:12px;color:#8c9d77;font-size:24px }
.picture-response-notice > .exercise-secondary { margin-top:17px }
.picture-response-notice > .exercise-text-button { display:flex;justify-content:center;width:100%;margin-top:10px }
.session-pictures button:focus-visible,.session-pictures [tabindex="-1"]:focus-visible { outline:2px solid #83996f;outline-offset:3px }
html[data-conversation-connection=reconnecting] .session-pictures .exercise-primary,html[data-conversation-connection=unavailable] .session-pictures .exercise-primary { pointer-events:none;opacity:.55 }
@keyframes picture-arrive { from { opacity:0;transform:translateY(7px) } to { opacity:1;transform:none } }
@media(max-width:1000px) { .call-view[data-role=client] { --pictures-width:370px } }
@media(max-width:820px) { .call-view[data-role=client]:has(.client-picture-invitation:not([hidden])) .call-body { padding-right:0 } .client-picture-invitation { width:min(460px,calc(100% - var(--room-gutter)*2));box-shadow:0 8px 35px #263b2028 } }
@media(max-width:620px) {
    .client-picture-invitation { top:auto;max-height:calc(100dvh - var(--pictures-top,96px) - var(--pictures-bottom,76px) - 8px);height:min(760px,80dvh) }
    .picture-invitation-content { padding:4px 12px 18px }
    .client-picture-invitation > header { padding:6px 10px 0 16px }
    .picture-invitation-content h2 { font-size:31px }
    .picture-invitation-copy { margin:10px 4px 18px }
    .picture-gallery-heading { font-size:10px }
    .picture-choice-grid { gap:8px 4px }
    .client-picture-invitation > footer { padding:12px 16px 6px }
    .picture-preview-dialog { padding:12px;border-radius:18px }
    .picture-preview-dialog footer { gap:12px }
    .picture-preview-dialog .exercise-primary { min-width:0;flex:1 }
    .picture-preview-dialog > small { text-align:center }
    .picture-response-notice { width:270px }
}
@media(max-height:550px) {
    .picture-choice-summary { display:none }
    .picture-preview-stage img { height:43dvh }
    .picture-preview-dialog > small { display:none }
}
@media(prefers-reduced-motion:reduce) { .picture-response-notice,.client-picture-invitation { animation:none } .picture-choice,.picture-choice-check,.picture-enlarge { transition:none } }