/* "Chat with Nicolas" on the Life Atelier dashboard (therapist interface, increment 2). */
.atelier-chat-door{display:flex;align-items:center;gap:16px;margin-top:22px;padding:14px 18px;border:1px solid #d4c5b3;border-radius:10px 20px 9px 18px;background:linear-gradient(145deg,#fffaf2,#f1e9f2);box-shadow:0 9px 25px #6247330c}
.atelier-chat-door .chat-door-mark{position:relative;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#765f71;color:#fff8ee;font:20px Baskerville,"Palatino Linotype",Georgia,serif;flex:none}
.atelier-chat-door .chat-door-text{flex:1;min-width:0}
.atelier-chat-door strong{display:block;font:normal 20px Baskerville,"Palatino Linotype",Georgia,serif;color:#443d3a}
.atelier-chat-door .chat-door-status{font-size:12px;color:#716a63}
.atelier-chat-door .chat-door-status.new{color:#a14f37;font-weight:600}
.atelier-chat-door .chat-door-open{flex:none;border-radius:22px 8px 20px 9px;background:#765f71;border-color:#765f71;color:#fff8ee;font-weight:600;font-size:12px;padding:10px 16px}
.atelier-chat-door .chat-door-open:hover{background:#5f4b5b}
.chat-badge{position:absolute;top:-5px;right:-7px;min-width:18px;height:18px;border-radius:999px;background:#b8553d;color:#fff;font:600 11px/18px Arial,sans-serif;text-align:center;padding:0 5px}

.atelier-chat-panel{width:min(100%,760px);margin:0 auto;padding:clamp(20px,4vw,48px) 16px;position:relative;z-index:1}
.atelier-chat-panel .chat-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.atelier-chat-panel h2{font:normal 34px Georgia,serif;margin:0 0 4px}
.atelier-chat-panel .chat-intro{margin:0 0 14px;color:#655e57;font-size:13px;line-height:1.5}
.chat-box{display:flex;flex-direction:column;border:1px solid #dfd3c6;border-radius:18px;background:#fffdf9;overflow:hidden;height:min(64vh,620px);min-height:360px}
.chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.chat-sys{align-self:center;background:#f4efe6;border-radius:999px;padding:4px 14px;font-size:12px;color:#777773;text-align:center;max-width:95%}
.chat-bub{max-width:86%;border-radius:16px;padding:10px 14px;border:1px solid #e7e2d9;background:#fff;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.45}
.chat-bub .chat-time{font-size:11px;color:#8b867e;margin-top:4px;white-space:normal}
.chat-bub.mine{align-self:flex-end;background:#f0e3db;border-color:#f0e3db}
.chat-go{display:block;margin:8px 0 2px;padding:6px 12px;border-radius:999px;border:1px solid #bc664a;background:#fffaf6;color:#9b4c33;font-family:inherit;font-size:13px;font-weight:600;line-height:1.2;cursor:pointer;white-space:nowrap}
.chat-go:hover,.chat-go:focus-visible{background:#bc664a;color:#fff}
body.atelier-dashboard-open #story-chat-bell{display:none!important}
.header-identity #trash{order:1}
.header-identity #atelier-account{order:2}
.header-identity>.story-chat-bell{order:3;position:relative;display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;min-width:0;padding:4px;border:0;background:transparent;color:#6d6056}
.header-identity>.story-chat-bell:hover{background:transparent}
header .header-identity #trash,header .header-identity #atelier-account,header .header-identity #story-chat-bell,
header .header-identity #trash:hover,header .header-identity #atelier-account:hover,header .header-identity #story-chat-bell:hover{background:transparent;border-color:transparent;box-shadow:none}
.story-chat-bell:disabled{opacity:1}
.story-chat-bell svg{width:18px;height:18px;display:block}
.story-chat-bell .chat-bell-dot{position:absolute;right:1px;top:1px;width:9px;height:9px;border-radius:50%;background:#a9322d;box-shadow:0 0 0 2px #fbfbf8}
.chat-go-target{outline:3px solid rgba(188,102,74,.55);outline-offset:4px;border-radius:10px;transition:outline-color .6s}
.chat-compose{position:relative;border-top:1px solid #e7e2d9;padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;background:#fff}
.chat-compose .chat-row{display:flex;gap:8px;align-items:flex-end}
.chat-compose .chat-row.between{justify-content:space-between;align-items:center}
.chat-compose textarea{flex:1;resize:none;border:1px solid #deded9;border-radius:20px;padding:9px 14px;min-height:40px;max-height:160px;line-height:1.4;background:#fff}
.chat-compose .chat-send{min-height:40px}
.chat-turn{font-size:12px;color:#777773}
.chat-count{font-size:12px;color:#777773;white-space:nowrap}
.chat-count.over{color:#b8553d;font-weight:600}
.chat-error{color:#b8553d;font-size:12px}
.chat-error:empty{display:none}
/* Emoji and Enter-to-send */
.chat-compose .chat-round{width:40px;height:40px;border-radius:50%;padding:0;font-size:18px;line-height:1;flex:none}
.chat-enter{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#777773;cursor:pointer}
.chat-enter{white-space:nowrap}
.chat-enter input[type=checkbox]{width:auto;height:auto;min-height:0;padding:0;margin:0;flex:none}
.chat-compose .emoji-panel{position:absolute;left:10px;bottom:calc(100% - 4px);z-index:5;display:grid;grid-template-columns:repeat(8,34px);gap:2px;padding:8px;background:#fff;border:1px solid #e7e2d9;border-radius:14px;box-shadow:0 10px 30px #0002}
.chat-compose .emoji-panel[hidden]{display:none}
.chat-compose .emoji-pick{width:34px;height:34px;border:0;background:none;border-radius:8px;font-size:19px;padding:0}
.chat-compose .emoji-pick:hover{background:#f4efe6}
@media(max-width:620px){.atelier-chat-door{flex-wrap:wrap}.atelier-chat-door .chat-door-buttons{width:100%;flex-direction:column}.atelier-chat-door .chat-door-open{width:100%}.atelier-chat-panel h2{font-size:28px}}

html[data-theme="dark"] .atelier-chat-door{background:linear-gradient(145deg,#272c2e,#2d2a31);border-color:#5b5553;box-shadow:0 9px 25px #0003}
html[data-theme="dark"] .atelier-chat-door strong{color:var(--ink)}
html[data-theme="dark"] .atelier-chat-door .chat-door-status{color:#cfcbc3}
html[data-theme="dark"] .atelier-chat-door .chat-door-status.new{color:#f0a88f}
html[data-theme="dark"] .atelier-chat-door .chat-door-open{background:#8a7385;border-color:#8a7385;color:#fff}
html[data-theme="dark"] .atelier-chat-panel .chat-intro{color:var(--muted)}
html[data-theme="dark"] .chat-box{background:#1d2224;border-color:var(--line)}
html[data-theme="dark"] .chat-sys{background:#2b3234;color:var(--muted)}
html[data-theme="dark"] .chat-bub{background:#252c2e;border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .chat-bub.mine{background:#4a3c40;border-color:#4a3c40}
html[data-theme="dark"] .chat-go{background:transparent;color:#e7a58d;border-color:#e7a58d}
html[data-theme="dark"] .chat-bub .chat-time{color:#aaa9a3}
html[data-theme="dark"] .chat-compose{background:#1d2224;border-color:var(--line)}
html[data-theme="dark"] .chat-turn,html[data-theme="dark"] .chat-count{color:var(--muted)}
html[data-theme="dark"] .chat-compose .emoji-panel{background:#252c2e;border-color:var(--line)}
html[data-theme="dark"] .chat-enter{color:var(--muted)}

/* Sharing with Nicolas (increment 3): the editor row, the dashboard link, the list and chat cards. */
.share-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:10px 0 14px;padding:10px 12px;border:1px solid #dfd3c6;border-radius:12px;background:#fbf6f0}
.share-row .share-state{font-size:13px;color:#5f4b5b;font-weight:600}
.share-row .share-explain{margin:0;font-size:13px;line-height:1.45;color:#655e57;flex-basis:100%}
.share-row .share-actions{display:flex;gap:8px;margin-left:auto}
.share-button{border-radius:20px;padding:8px 14px;font-size:12px;font-weight:600;min-height:36px}
.share-button.primary{background:#765f71;border-color:#765f71;color:#fff8ee}
.share-error{flex-basis:100%;color:#b8553d;font-size:12px}
.share-error:empty{display:none}
.atelier-chat-door .chat-door-buttons{display:flex;gap:8px;flex:none}
.atelier-chat-door .chat-door-manage{background:#fffaf2;color:#5f4b5b}
.atelier-chat-door .chat-door-manage:hover{background:#f1e9f2}
.atelier-chat-door .chat-door-manage.hidden{display:none}
.atelier-chat-panel.with-sharing{width:min(100%,1180px)}
.chat-body{display:flex;gap:16px;align-items:stretch}
.chat-body > .chat-box{flex:1 1 auto;min-width:0}
.atelier-sharing-side{flex:0 0 360px;box-sizing:border-box;padding:14px;border:1px solid #dfd3c6;border-radius:18px;background:#fffdf9;overflow-y:auto;font-size:13px}
.atelier-sharing-side .step{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#8b867e;margin:0 0 2px}
.atelier-sharing-side h3{font:normal 20px/1.2 Georgia,serif;margin:0 0 6px}
.atelier-sharing-side .share-intro{margin:0 0 12px;color:#655e57;font-size:12px;line-height:1.45}
.atelier-sharing-side .share-list{gap:8px}
.atelier-sharing-side .share-list li{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px}
.atelier-sharing-side .share-list li > div{min-width:0}
.atelier-sharing-side .share-list .share-button{flex:0 0 auto;white-space:nowrap}
.atelier-sharing-side .share-list strong{font:normal 15px/1.25 Georgia,serif}
.atelier-sharing-side .share-since{font-size:11px}
.atelier-sharing-side .share-button{padding:4px 12px;font-size:12px;border-radius:999px}
.atelier-sharing-side .share-empty{padding:12px;font-size:12px}
@media(max-width:820px){.chat-body{flex-direction:column}.atelier-sharing-side{flex:none}}
html[data-theme="dark"] .atelier-sharing-side{background:#1d2224;border-color:var(--line)}
html[data-theme="dark"] .atelier-sharing-side .share-intro,html[data-theme="dark"] .atelier-sharing-side .step{color:var(--muted)}
.share-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.share-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border:1px solid #dfd3c6;border-radius:14px;background:#fffdf9}
.share-list strong{font:normal 18px Georgia,serif}
.share-since{font-size:12px;color:#777773}
.share-empty{padding:18px;border:1px dashed #d4c5b3;border-radius:14px;color:#655e57;font-size:14px;line-height:1.5}
.chat-card{max-width:86%;border:1px solid #d4c5b3;border-radius:14px;padding:9px 14px;background:#fbf6f0;font-size:14px}
.chat-card.mine{align-self:flex-end}
.chat-card-kind{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#765f71}
.chat-card .chat-time{font-size:11px;color:#8b867e;margin-top:4px}
html[data-theme="dark"] .share-row,html[data-theme="dark"] .chat-card{background:#272c2e;border-color:#5b5553}
html[data-theme="dark"] .share-row .share-state,html[data-theme="dark"] .chat-card-kind{color:#d7bdd0}
html[data-theme="dark"] .atelier-chat-door .chat-door-manage{background:transparent;color:#f1e4ee}
html[data-theme="dark"] .share-row .share-explain,html[data-theme="dark"] .share-empty{color:var(--muted)}
html[data-theme="dark"] .share-list li{background:#1d2224;border-color:var(--line)}

/* Read-only Story of Your Life inside Nicolas's app (shared/atelier-story-viewer.js):
   Story's own feelings view filling the frame, without its header, editor or editing controls. */
html.soyl-viewer #add-event,html.soyl-viewer #manage-timelines,html.soyl-viewer #guide,html.soyl-viewer #atelier-home-button,
html.soyl-viewer #trash,html.soyl-viewer #story-chat-bell,html.soyl-viewer #atelier-account,html.soyl-viewer #account-signout,html.soyl-viewer #share-row,html.soyl-viewer #share-note{display:none!important}
html.soyl-viewer [data-lane-action="add"],html.soyl-viewer [data-lane-action="delete"],html.soyl-viewer [data-lane-action="rename"]{display:none}
html.soyl-viewer body>header,html.soyl-viewer header,html.soyl-viewer .canvas-heading,html.soyl-viewer #panel,html.soyl-viewer #timeline-density-controls{display:none!important}
html.soyl-viewer,html.soyl-viewer body{height:100%;overflow:hidden;background:transparent}
html.soyl-viewer #main{display:block!important;height:100%!important;min-height:0}
html.soyl-viewer .canvas-area{display:flex!important;flex-direction:column;height:100%!important;padding:8px 12px 10px!important;overflow:hidden}
html.soyl-viewer .canvas-workspace{flex:1 1 0!important;height:auto!important;min-height:0!important;margin-top:0!important}
html.soyl-viewer #feeling-graphs .graph-help,html.soyl-viewer #feeling-graphs .feeling-graph-help{display:none}
/* Under the moment's feeling graph: when and where, then one row of boxes for the recording, words, photos and links. */
.viewer-moment-box .viewer-when{font-size:12px;color:#777773;margin-bottom:8px}
.viewer-moment-box .viewer-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;flex:1 1 auto;min-height:96px}
.viewer-moment-box .viewer-slot{overflow:auto}
.viewer-moment-box .viewer-slot{min-width:0;padding:10px 12px;border:1px solid var(--line,#e2ddd3);border-radius:10px}
.viewer-moment-box .viewer-slot.empty{border-style:dashed;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;color:#777773}
.viewer-moment-box .viewer-section{font-weight:600;font-size:13px;margin:0 0 4px}
.viewer-moment-box .viewer-slot.empty .viewer-section{font-weight:500;color:#777773}
.viewer-moment-box .viewer-words{border:0;border-left:3px solid #c6866a;border-radius:0;background:rgba(0,0,0,.03);display:flex;align-items:center}
.viewer-moment-box .viewer-text{white-space:pre-wrap;line-height:1.5;font-size:14px;max-height:100%;overflow:auto}
.viewer-moment-box .viewer-slot.viewer-links{padding:0;border:0;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.viewer-moment-box .viewer-more{display:none}
.viewer-moment-box .viewer-video{margin:0;height:100%;display:flex;flex-direction:column}
.viewer-moment-box .viewer-video iframe{display:block;width:100%;flex:1;min-height:0;border:0;border-radius:10px;background:#000}
.viewer-moment-box .viewer-video figcaption{font-size:11px;color:#777773;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-moment-box .viewer-link{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border:1px solid var(--line,#e2ddd3);border-radius:10px;text-decoration:none;color:inherit}
.viewer-moment-box .viewer-link span{font-size:12px;color:#777773}
.viewer-moment-box ul.viewer-files{list-style:none;padding:0;margin:2px 0;display:flex;flex-direction:column;gap:3px;font-size:13px}
.viewer-moment-box .viewer-hint{color:#777773;font-size:12px;margin:2px 0 0}
.viewer-ask{font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid var(--line,#e2ddd3);background:transparent;color:inherit;cursor:pointer}
.viewer-ask:hover{border-color:#c6866a}
@media (max-width:700px){.viewer-moment-box .viewer-slots{grid-template-columns:repeat(2,minmax(0,1fr))}}
html[data-theme="dark"] .viewer-moment-box .viewer-slot,html[data-theme="dark"] .viewer-moment-box .viewer-link{border-color:#3d4446}
html[data-theme="dark"] .viewer-moment-box .viewer-words{background:rgba(255,255,255,.04)}
html[data-theme="dark"] .viewer-ask{border-color:#4a5254}
/* Sharing sits on the editor's top line, between "Delete this moment" and the close button, with buttons the same height as Delete. */
.share-row.inline{flex:1 1 auto;flex-wrap:nowrap;justify-content:flex-end;margin:0 8px;padding:0;border:0;background:none;min-width:0}
html[data-theme="dark"] .share-row.inline{background:none}
.share-row.inline .share-state{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.share-row.inline .share-button{padding:10px 14px;font-size:14px;min-height:0;white-space:nowrap}
.share-note{margin:8px 0 4px}
.share-note .share-explain{margin:0;font-size:13px;line-height:1.45;color:#655e57}
html[data-theme="dark"] .share-note .share-explain{color:var(--muted)}
.share-note:not(:has(.share-explain)):has(.share-error:empty){display:none}
/* A moment without Then/Now: Story centres an invitation over its box; here it is a plain line above the media row. */
html.soyl-viewer #feeling-graphs .feeling-empty.event-feeling-prompt{position:static;padding:0;text-align:left;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
html.soyl-viewer #feeling-graphs .event-feeling-prompt>*{position:static;transform:none;width:auto;margin:0}
html.soyl-viewer #feeling-graphs .event-feeling-prompt .feeling-empty-title{font:normal 18px/1.3 Georgia,serif}
html.soyl-viewer #feeling-graphs .event-feeling-prompt .feeling-empty-subheading{font-size:13px}
/* Zoom buttons in one horizontal row in the top right corner, inside the frame. */
html.soyl-viewer .canvas-workspace{position:relative}
html.soyl-viewer .timeline-zoom-stack{top:6px!important;right:10px!important;flex-direction:row;width:auto;gap:4px}
html.soyl-viewer .timeline-zoom-stack button{width:30px;min-height:28px;height:28px}
html.soyl-viewer .timeline-zoom-stack #fit{width:auto;height:28px;min-height:28px;padding:2px 10px;writing-mode:horizontal-tb;transform:none;letter-spacing:0;white-space:nowrap}
/* The moment in Story's box: title, the media row taking the free height, the feeling bar across the bottom. */
#feeling-graphs.viewer-moment-box{display:flex;flex-direction:column;gap:10px;overflow:hidden}
#feeling-graphs.viewer-moment-box.hidden{display:none}
.viewer-moment-box .viewer-title{margin:0;font:normal 20px/1.2 Georgia,serif}
.viewer-moment-box .viewer-title-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-height:34px}
/* Reply line. State colours use !important: the dark theme's general button colours (atelier-dark.css)
   are more specific and had hidden them. */
.viewer-reply{display:flex;align-items:center;gap:10px;flex:1 1 auto;flex-wrap:wrap}
.viewer-reply-kinds{display:flex;gap:6px}
.viewer-reply-kind{position:relative;width:72px;padding:5px 0;border:1px solid #d9d2c6;border-radius:999px;background:#fff;font-family:inherit;font-size:13px;line-height:1.2;color:#2b2a27;cursor:pointer}
.viewer-reply-kind.chosen,.viewer-reply-kind.done{border-color:#3f9a5b!important;background-color:#3f9a5b!important;color:#fff!important;font-weight:600}
.viewer-reply-kind.recording{border-color:#d23c2a!important;background-color:#d23c2a!important;color:#fff!important;font-weight:600}
.viewer-pref-dot{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:#3f7fc4;box-shadow:0 0 0 2px #fffefb}
.viewer-record{display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:50%;border:2px solid #d23c2a!important;background-color:#d23c2a!important;color:#fff!important;cursor:pointer}
.viewer-record svg{width:14px;height:14px;fill:currentColor}
.viewer-record:disabled{opacity:.45;cursor:default}
.viewer-record.recording{box-shadow:0 0 0 calc(2px + var(--level) * 7px) rgb(210 60 42 / .3);transform:scale(calc(1 + var(--level) * .12));transition:box-shadow .1s,transform .1s}
.viewer-wave{flex:1 1 40px;display:flex;justify-content:center;align-items:center;min-width:40px;height:24px}
.viewer-wave svg{width:64px;height:24px;display:block}
.viewer-wave rect{fill:#cfc8bc;transition:height .1s,y .1s}
.viewer-wave.on rect{fill:#d23c2a}
.viewer-send{width:72px;padding:5px 0;border:1px solid #d23c2a!important;border-radius:999px;background-color:#d23c2a!important;color:#fff!important;font-family:inherit;font-size:13px;line-height:1.2;font-weight:600;cursor:pointer}
.viewer-send:disabled{cursor:default}
.viewer-send.ready{border-color:#3f9a5b!important;background-color:#3f9a5b!important}
.viewer-time{display:flex;align-items:center;gap:8px;font-size:12px;color:#6d6056;white-space:nowrap;font-variant-numeric:tabular-nums}
.viewer-time-bar{width:150px;height:8px;border-radius:5px;background:#ece7de;overflow:hidden}
.viewer-time-bar i{display:block;height:100%;background:#3f9a5b;transition:width .25s linear}
.viewer-time.warn{color:#b7791f}.viewer-time.warn i{background:#e0a33a}
.viewer-time.danger{color:#c0392b;font-weight:600}.viewer-time.danger i{background:#d23c2a}
.viewer-moment-box .viewer-feeling-bar .feeling-graph-head,.viewer-moment-box .viewer-feeling-bar .emotion-bar-title{display:none}
.viewer-moment-box .viewer-feeling-bar,.viewer-moment-box .viewer-feeling-ask{flex:none}
.viewer-moment-box .viewer-feeling-ask{flex-direction:row!important;align-items:center!important;min-height:0}
.viewer-moment-box .emotion-bar,.viewer-moment-box .emotion-stop{cursor:default}
/* Nicolas's app: red ring while a shared moment waits for his reply, green once he has replied */
html.soyl-viewer #timeline .viewer-attention-ring{fill:none;stroke-width:2.5;pointer-events:none}
html.soyl-viewer #timeline .viewer-attention-ring.red{stroke:#d23c2a;animation:viewer-attention 1.6s ease-in-out infinite}
html.soyl-viewer #timeline .viewer-attention-ring.green{stroke:#3f9a5b;animation:viewer-attention 2.4s ease-in-out infinite}
@keyframes viewer-attention{0%,100%{stroke-opacity:1}50%{stroke-opacity:.35}}
@media (prefers-reduced-motion:reduce){html.soyl-viewer #timeline .viewer-attention-ring{animation:none}}