/* Small, directly accessible tools for guiding a session. */
.session-timers { display: flex; align-items: center; }
.session-timers[data-timer-role=client] { display: contents; }
.timer-toolbar-reading { display: inline-flex; align-items: center; gap: 5px; }
.timer-toolbar-reading .icon { font-size: 9px; width: 10px; color: #829078; }
.timer-toolbar-reading time { font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; }
.timer-toolbar-reading[data-timer-state=complete] time { color: #786242; }
.timer-toggle:has(.timer-toolbar-reading) .timer-toggle-label { display: none; }
.timer-toolbar-reading + .timer-toolbar-reading { padding-left: 9px; border-left: 1px solid #dfe4d7; }
.timer-panel, .quick-note-panel {
    position: fixed; z-index: 38; width: min(360px, calc(100vw - 32px));
    padding: 24px; overflow: auto; overscroll-behavior: contain;
    border: 1px solid #dfe4d6; border-radius: 22px; background: var(--surface);
    color: var(--ink); box-shadow: 0 16px 48px #253b2424, 0 2px 8px #253b240a;
}
.call-tool-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.call-tool-eyebrow { color: #75846b; font: 500 10px/1.5 var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.call-tool-heading h2 { margin: 7px 0 0; font: 400 30px/1.1 var(--serif); letter-spacing: -.025em; }
.call-tool-heading h2:focus { outline: none; }
.call-tool-heading > .chat-icon-button { flex-shrink: 0; margin: -7px -9px 0 0; }
.timer-mode { margin-top: 22px; }
.timer-duration { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin-top: 20px; }
.timer-duration label { display: grid; gap: 7px; width: 100px; text-align: center; }
.timer-duration input { width: 100%; padding: 10px 4px; border: 1px solid #e0e5d8; border-radius: 13px; background: #fffef9; color: #3e563a; text-align: center; font: 400 36px/1.2 var(--sans); font-variant-numeric: tabular-nums; appearance: textfield; }
.timer-duration input::-webkit-inner-spin-button { appearance: none; }
.timer-duration label > span { color: #7a8672; font: 11px var(--sans); }
.timer-duration > span { padding-top: 15px; color: #a2ad97; font-size: 28px; }
.timer-presets { margin-top: 16px; }
.timer-name { display: block; margin-top: 23px; color: #566b4e; font: 500 12px var(--sans); }
.timer-name > span { margin-left: 5px; color: #8a9380; font-weight: 400; }
.timer-name input { display: block; width: 100%; margin-top: 9px; padding: 12px; border: 1px solid #dce3d2; border-radius: 11px; background: #fffef9; color: var(--ink); font: 13px var(--sans); }
.timer-name input::placeholder { color: #8a9382; }
.timer-start, .quick-note-save { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 44px; margin-top: 18px; border: 1px solid #47623e; border-radius: 12px; background: #47623e; color: #fffef9; font: 500 12px var(--sans); }
.timer-start:hover, .quick-note-save:hover { background: #3c5733; }
.timer-start:disabled, .quick-note-save:disabled, .timer-run-controls button:disabled { opacity: .5; cursor: default; }
.timer-stopwatch-hint { padding: 24px 5px 6px; color: #6b7b62; font: 13px/1.8 var(--sans); text-align: center; }
.timer-error:empty { display: none; }
.timer-error { margin-top: 13px; color: #96644e; font: 12px/1.6 var(--sans); }
.timer-footnote { display: flex; align-items: flex-start; gap: 8px; margin-top: 22px; padding-top: 15px; border-top: 1px solid #e2e6d9; color: #7b8671; font: 11px/1.7 var(--sans); }
.timer-footnote .icon { margin-top: 4px; font-size: 10px; }
.timer-active { padding-top: 26px; }
.session-timer-display { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 6px 12px; align-items: center; }
.timer-dial { position: relative; display: grid; place-items: center; grid-row: 1 / 3; width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(#8da17a calc(var(--timer-progress, 0) * 1turn), #e6ebde 0); }
.timer-dial::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--surface); }
.timer-dial .icon { position: relative; font-size: 14px; color: #7b9269; }
.timer-caption { min-width: 0; }
.timer-caption strong { display: block; overflow: hidden; color: #485f3f; font: 500 13px/1.5 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.timer-caption > span { display: block; margin-top: 2px; color: #7b8772; font: 11px/1.5 var(--sans); }
.session-timer-display > time { grid-column: 2; color: #3d5537; font: 400 40px/1.2 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.timer-run-controls { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.timer-run-controls button { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; min-height: 42px; padding: 10px; border: 1px solid #dbe3d1; border-radius: 11px; background: #f2f5eb; color: #566f47; font: 500 12px var(--sans); }
.timer-active[data-timer-state=complete] .timer-pause { display: none; }
.timer-clear { display: block; margin: 12px auto 0; min-height: 36px; padding: 8px 12px; border: 0; background: transparent; color: #7a816e; font: 12px var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.client-shared-timer { position: fixed; z-index: 9; top: calc(var(--conversation-top, 68px) + 16px); left: 24px; width: min(290px, calc(100vw - 48px)); padding: 13px 16px; border: 1px solid #e2e7d8; border-radius: 16px; background: var(--surface); box-shadow: 0 4px 18px #24392716; }
.session-timer-display.is-compact { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; }
.is-compact .timer-dial { grid-row: 1; width: 34px; height: 34px; }
.is-compact .timer-caption strong { font-size: 12px; }
.is-compact .timer-caption > span { font-size: 10px; }
.session-timer-display.is-compact > time { grid-column: 3; font-size: 20px; }
.room-app[data-privacy-covered=true] .client-shared-timer { display: none; }
@media (max-width: 1380px) {
    .call-view[data-role=therapist] .timer-toggle-label, .call-view[data-role=therapist] .quick-note-toggle > span { display: none; }
}
@media (max-width: 900px) {
    .timer-toolbar-reading + .timer-toolbar-reading { display: none; }
}
@media (min-width: 621px) and (max-width: 1180px) {
    .call-view[data-role=therapist] .conversation-controls .timer-toggle > .timer-toggle-label + .timer-toolbar-reading { display: inline-flex; }
}
@media (max-width: 620px) {
    .timer-panel, .quick-note-panel { padding: 20px; }
    .timer-name input, .quick-note-input { font-size: 16px; }
    .client-shared-timer { left: 20px; width: min(270px, calc(100vw - 40px)); }
}

.quick-note-toggle { position: relative; }
.quick-note-toggle[data-draft=true]::after { content: ''; position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: #aa9161; }
.quick-note-timestamp { display: flex; align-items: center; gap: 7px; margin-bottom: 15px; color: #647a55; font: 500 12px/1.5 var(--sans); }
.quick-note-timestamp > span:last-child { margin-left: auto; color: #8a947e; font: 10px var(--sans); }
.quick-note-timestamp .icon { font-size: 12px; }
.quick-note-input { display: block; width: 100%; min-height: 144px; padding: 15px; resize: vertical; border: 1px solid #dbe3d1; border-radius: 13px; background: #fffefa; color: var(--ink); font: 14px/1.7 var(--sans); }
.quick-note-input:focus { outline: 2px solid #b7c9a366; outline-offset: 1px; border-color: #91a77e; }
.quick-note-input::placeholder { color: #8a947c; }
.quick-note-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.quick-note-footer button { min-height: 36px; padding: 7px 0; border: 0; background: transparent; color: #748568; font: 11px var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.quick-note-footer > span { color: #8a947f; font: 10px var(--sans); }
.quick-note-privacy { display: flex; gap: 7px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid #e2e6d9; color: #7b8871; font: 11px/1.6 var(--sans); }
.quick-note-privacy .icon { font-size: 9px; }
.timestamped-notes-section { margin-top: 24px; padding-top: 22px; border-top: 1px solid #e1e6d7; }
.timestamped-note-add { display: flex; align-items: center; gap: 5px; min-height: 36px; border: 0; background: transparent; color: #607b50; font: 500 11px var(--sans); }
.timestamped-notes-list { display: grid; gap: 12px; margin-top: 16px; }
.timestamped-notes-empty { color: #849077; font: 12px/1.7 var(--sans); }
.timestamped-note { padding: 14px 15px; border: 1px solid #e0e5d7; border-radius: 13px; background: #fffefa; }
.timestamped-note > header { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.timestamped-note time { color: #738565; font: 500 11px/1.5 var(--sans); font-variant-numeric: tabular-nums; }
.timestamped-note > p { margin-top: 9px; color: #4d6544; font: 13px/1.75 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.timestamped-note-actions { display: flex; flex-shrink: 0; }
.timestamped-note-actions > button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #829473; }
.timestamped-note-actions > button:hover { background: #eff3e7; color: #526d42; }
.timestamped-note-actions .icon { font-size: 11px; }
.timestamped-note-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e5e6db; color: #7d6857; font: 11px/1.5 var(--sans); }
.timestamped-note-confirm > span { flex: 1 0 100%; }
.timestamped-note-confirm button { min-height: 34px; padding: 7px 12px; border: 1px solid #dfe4d6; border-radius: 9px; background: #f5f7ee; color: #627655; font: 11px var(--sans); }
.timestamped-note-confirm button:last-child { border-color: #e9d8cd; background: #f6ebe5; color: #946750; }
.review-moments-heading { margin-top: 28px; }
@media (max-width: 620px) {
    .quick-note-input { font-size: 16px; }
    .timestamped-note-actions > button { width: 40px; height: 40px; }
    .call-view[data-role=therapist] .call-toolbar { flex-wrap: wrap; justify-content: flex-end; }
}