[hidden] { display:none !important; }
.main { padding-bottom:94px; }
.fx-dashboard { display:grid; gap:14px; padding-bottom:20px; }
.fx-periods,.fx-rank-tabs,.fx-task-actions,.fx-section-head,.fx-date-meta,.fx-custom-dates,.fx-report-options { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.fx-periods button,.fx-rank-tabs button,.fx-task-actions button,.fx-date-meta button,.fx-section-head button,.fx-custom-dates button,.fx-dialog button,.fx-sales-button,#exportRank,#openNotifications { border:1px solid #dbe5e8; border-radius:9px; background:white; color:#24675f; padding:9px 12px; font:inherit; font-size:13px; cursor:pointer; }
.fx-periods button.active,.fx-rank-tabs button.active { background:#e2f1ed; border-color:#238579; color:#126e60; font-weight:700; }
.fx-periods button { flex:1; min-width:65px; }
.fx-muted { color:#667682; font-size:12px; line-height:1.7; margin:6px 0; }
.fx-customer-dates { margin:10px 0 0; }
body:not([data-view="customer"]) .fx-customer-dates { display:none; }
body:not([data-view="customer"]) .fx-customer-filter,
body:not([data-view="todo"]) .fx-todo-dates { display:none; }
.topline { margin-top:0; }
.module-tabs { position:relative; margin:12px 0 0; }
body[data-view="todo"] .module-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
.module-tabs > .fx-todo-dates { position:static; min-width:0; }
.module-tabs > .fx-todo-dates > summary { width:100%; min-width:0; height:40px; min-height:40px; padding:0 8px; justify-content:center; gap:6px; font-size:13px; font-weight:800; color:var(--muted); }
body[data-view="todo"][data-module="marketing"] #todoDatePicker > summary { background:var(--primary-soft); border-color:var(--primary); color:var(--primary); }
.module-tabs > .fx-todo-dates .fx-time-menu { width:100%; }
.module-tabs > .fx-todo-dates #todoPeriodLabel { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fx-time-picker { position:relative; }
.fx-time-picker summary { display:flex; align-items:center; justify-content:space-between; gap:12px; width:max-content; max-width:100%; min-width:100px; min-height:36px; padding:7px 12px; border:1px solid #dbe5e8; border-radius:8px; background:white; color:#176b5d; font-size:13px; cursor:pointer; list-style:none; }
.fx-time-picker summary::-webkit-details-marker { display:none; }
.fx-time-picker summary:focus-visible { outline:2px solid #238579; outline-offset:2px; }
.fx-time-picker[open] summary { border-color:#238579; background:#e2f1ed; }
.fx-time-menu { position:absolute; top:calc(100% + 6px); left:0; width:min(420px,100%); padding:12px; border:1px solid #dbe5e8; border-radius:10px; background:white; box-shadow:0 8px 24px #16372b20; z-index:20; }
.fx-time-menu .fx-periods { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.fx-time-menu .fx-periods button { min-width:0; }
.fx-load-more { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; padding:14px; color:#667682; font-size:12px; }
.fx-load-more button { padding:9px 16px; border:1px solid #dbe5e8; border-radius:8px; background:white; color:#176b5d; font:inherit; font-size:13px; cursor:pointer; }
.fx-date-meta { justify-content:flex-end; margin-top:8px; font-size:12px; color:#657784; }
.fx-date-meta>span { margin-right:auto; }
.fx-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.fx-kpi { background:white; border:1px solid #dce6eb; border-radius:12px; padding:15px; text-align:left; color:#1c323a; }
button.fx-kpi { cursor:pointer; border-color:#50a294; background:#eaf5f1; }
.fx-kpi span { font-size:12px; color:#637482; display:block; }
.fx-kpi strong { font-size:25px; display:block; margin-top:7px; overflow-wrap:anywhere; }
.fx-box { border:1px solid #dce6eb; background:white; border-radius:12px; padding:16px; min-width:0; }
.fx-box h3,.fx-product-section h3 { font-size:16px; margin:0 0 10px; }
.fx-section-head { justify-content:space-between; margin-bottom:10px; }
.fx-section-head h3 { margin:0; }
.fx-section-head label { color:#60717d; font-size:12px; }
.fx-dashboard select,.fx-dialog select,.fx-dialog input:not([type="checkbox"]),.fx-dialog textarea,.fx-custom-dates input,.fx-report-options input[type="date"],.fx-product input { border:1px solid #dce5e9; border-radius:8px; background:white; color:#20333d; padding:9px; font:inherit; max-width:100%; min-width:0; }
.fx-average { font-size:13px; color:#526876; background:#eff7f4; border-radius:8px; padding:10px; }
.fx-chart { padding-top:8px; overflow:auto; }
.fx-bars { display:flex; gap:18px; padding:25px 10px 0; min-height:245px; align-items:flex-end; width:max-content; min-width:100%; border-bottom:1px solid #ccdcd7; }
.fx-bar-column { width:95px; display:flex; flex-direction:column; align-items:center; font-size:12px; text-align:center; flex-shrink:0; gap:8px; }
.fx-bar-value { color:#327c6e; white-space:nowrap; font-size:11px; }
.fx-bar-track { height:165px; display:flex; align-items:flex-end; width:42px; }
.fx-bar { background:linear-gradient(#39a495,#166f61); width:100%; border-radius:6px 6px 0 0; min-height:2px; }
.fx-chart-axis { text-align:center; color:#708088; font-size:12px; margin:8px; }
.fx-table-scroll { overflow-x:auto; margin-top:12px; }
.fx-dashboard table { width:100%; border-collapse:collapse; font-size:13px; white-space:nowrap; }
.fx-dashboard th,.fx-dashboard td { padding:12px 10px; text-align:left; border-bottom:1px solid #ecf0f2; }
.fx-dashboard th { background:#f0f6f4; color:#496958; }
.fx-dashboard th button { color:inherit; border:0; padding:0; background:transparent; cursor:pointer; font:inherit; font-weight:600; }
.fx-dashboard tbody tr:hover { background:#f6faf8; }
.fx-report-options { margin-top:14px; font-size:12px; color:#617481; }
.fx-report-options label { display:flex; gap:6px; align-items:center; }
.fx-task-actions { margin-top:12px; }
.fx-comparisons { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fx-positive { color:#147a64; }.fx-negative,.fx-error { color:#bd3434; }
.fx-risk { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; border:0; border-bottom:1px solid #edf1f2; padding:12px 0; background:white; cursor:pointer; text-align:left; color:#283943; }
.fx-risk small { display:block; margin-top:6px; color:#73808a; }
.due-badge { display:inline-block; flex-shrink:0; max-width:100%; border-radius:6px; padding:4px 6px; font-size:11px; font-weight:500; white-space:nowrap; }
.todo-action > .due-badge,.compact-todo > .due-badge { flex:0 0 auto; }
.due-badge.warning { background:#fff8d5; color:#916b12; }.due-badge.today { background:#fff0dc; color:#b35d0b; }.due-badge.overdue { background:#fdeced; color:#b63038; }
.customer-card.due-warning { border-color:#dfbb42; }
.customer-card.compact { aspect-ratio:auto; min-height:104px; padding-right:10px; grid-template-rows:auto auto; }
.customer-card.compact .card-first-row { padding-right:42px; }
.customer-card.compact .owner-chip { position:static; transform:none; height:24px; grid-row:2; justify-self:end; margin-top:6px; max-width:100%; }
body[data-role="manager"] .owner-chip { pointer-events:auto; }
.compact-todo,.todo-action { display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-width:0; line-height:1.5; }
.todo-action > .todo-date,.compact-todo > .todo-date { flex:0 0 auto; overflow:visible; text-overflow:clip; white-space:nowrap; }
.todo-action > b,.compact-todo > b { flex:0 1 auto; min-width:0; overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; }
.fx-product-section { margin:14px 0; padding:12px; background:#f3f8f6; border-radius:10px; }
.fx-product { display:grid; grid-template-columns:2fr 1fr 1fr 28px; gap:8px; align-items:end; margin-top:8px; }
.fx-product label { display:grid; gap:5px; font-size:12px; color:#677982; }
.fx-product input { width:100%; background:white; }
.fx-product button { border:0; background:none; color:#9d4c4c; font-size:24px; cursor:pointer; padding:6px 0; }
.fx-sales-button { width:100%; margin:12px 0; background:#edf7f3; }
.fx-customer-money { display:block; color:#297968; font-size:12px; line-height:1.8; margin-top:6px; }
#customerEditor { max-height:90vh; overflow-y:auto; }
#customerEditor .editor-head { position:sticky; top:-16px; z-index:2; background:white; padding:8px 0; }
#customerEditor .editor-actions { position:sticky; bottom:-18px; background:white; padding:10px 0; z-index:2; }
.fx-global #openNotifications { position:fixed; right:14px; bottom:80px; z-index:40; box-shadow:0 3px 15px #16372b1c; }
#notificationCount { color:#c33434; }
#featureToast { position:fixed; bottom:140px; left:50%; transform:translateX(-50%); z-index:2000; padding:12px 18px; border-radius:10px; background:#176d5f; color:white; box-shadow:0 5px 24px #23393238; font-size:14px; width:max-content; max-width:90vw; }
#featureToast.error { background:#9f3939; }
.fx-dialog { width:min(760px,94vw); max-height:88vh; border:0; padding:20px; border-radius:16px; background:#f7faf9; box-shadow:0 18px 80px #152d3659; color:#273b43; }
.fx-dialog::backdrop { background:#12252c70; }
.fx-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:12px; }.fx-dialog-head h2 { font-size:20px; margin:0; }.fx-dialog-head button { font-size:24px; padding:0 10px; }
.fx-dialog-body { display:grid; gap:12px; }
.fx-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fx-form label,.fx-block { display:grid; gap:6px; font-size:13px; }
.fx-dialog button.fx-primary { background:#176f60; color:white; border-color:#176f60; min-height:38px; }
.fx-dialog button:disabled { opacity:.5; cursor:wait; }
.fx-payments { color:#637782; font-size:13px; line-height:1.8; padding-left:18px; }
.fx-trash-row { display:flex; align-items:center; gap:16px; justify-content:space-between; padding:14px 0; border-bottom:1px solid #dae5e0; font-size:13px; }.fx-trash-row p { color:#637681; margin:7px 0; }.fx-trash-row small { color:#84908c; }
.fx-notification-scroll { min-width:0; overflow-x:auto; border:1px solid #dce6e1; border-radius:10px; background:white; -webkit-overflow-scrolling:touch; }
.fx-dialog:has(.fx-notifications) { width:min(960px,94vw); }
.fx-notifications { width:100%; min-width:680px; border-collapse:collapse; table-layout:fixed; font-size:13px; text-align:left; }
.fx-notifications th,.fx-notifications td { padding:12px 10px; border-bottom:1px solid #e8eeeb; white-space:nowrap; }
.fx-notifications th { color:#60766c; background:#edf5f1; font-weight:600; }
.fx-notifications th:nth-child(1) { width:150px; }.fx-notifications th:nth-child(2) { width:142px; }.fx-notifications th:nth-child(3) { width:112px; }.fx-notifications th:nth-child(5) { width:91px; }
.fx-notifications tr:last-child td { border-bottom:0; }
.fx-notification-unread { background:#f5faf8; }
.fx-notification-unread .fx-notification-brand { font-weight:700; }
.fx-notification-dot { margin-right:5px; color:#c33434; font-size:10px; }
.fx-notification-brand,.fx-notification-content,.fx-notification-type { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fx-notifications time { color:#6a7b84; font-size:12px; }
.fx-notification-time-short { display:none; }
.fx-notifications td button { padding:7px 9px; font-size:12px; min-height:36px; }
.fx-notifications td .fx-notification-content { width:100%; max-width:100%; border:0; border-radius:0; padding:0; text-align:left; font:inherit; color:inherit; background:transparent; }
.fx-notification-content:focus-visible { outline:2px solid #238579; outline-offset:2px; }
.fx-notification-detail { margin:0; display:grid; gap:14px; padding:16px; border:1px solid #dce6e1; border-radius:10px; background:white; font-size:14px; }
.fx-notification-detail > div { display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; }
.fx-notification-detail dt { color:#687d72; }.fx-notification-detail dd { margin:0; overflow-wrap:anywhere; }
.fx-notification-detail small { color:#84908c; }.fx-notification-body { white-space:pre-wrap; line-height:1.7; }
.fx-notification-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fx-notification-scroll:focus-visible { outline:2px solid #238579; outline-offset:2px; }
@media(max-width:600px) {
  .fx-notification-scroll { overflow-x:hidden; }
  .fx-notifications { min-width:0; font-size:12px; }
  .fx-notifications th,.fx-notifications td { padding:10px 4px; }
  .fx-notifications th:nth-child(1) { width:20%; }.fx-notifications th:nth-child(2) { width:80px; }.fx-notifications th:nth-child(3) { width:22%; }
  .fx-notifications th:nth-child(5),.fx-notifications td:nth-child(5),.fx-notification-time-full { display:none; }
  .fx-notification-time-short { display:inline; }
  .fx-notifications time { font-size:11px; }
  .fx-notification-dot { margin-right:3px; font-size:8px; }
}
.fx-assignees { border:1px solid #d3e2dc; border-radius:10px; display:flex; flex-wrap:wrap; gap:12px; margin:0 0 16px; padding:12px; font-size:13px; }
.fx-empty { text-align:center; padding:24px; color:#788a92; font-size:13px; }
@media(max-width:600px) { .fx-kpis { grid-template-columns:1fr 1fr; }.fx-kpi { padding:12px; }.fx-kpi strong { font-size:21px; }.fx-comparisons { grid-template-columns:1fr; }.fx-product { grid-template-columns:1fr 1fr 28px; }.fx-product label:first-child { grid-column:1 / -1; }.fx-product button { grid-column:3; }.fx-dialog { padding:16px; }.fx-section-head { align-items:flex-start; }.fx-form { grid-template-columns:1fr 1fr; }.fx-periods button { min-width:55px; padding:8px; }.fx-date-meta { gap:5px; }.fx-date-meta>span { width:100%; }.fx-date-meta button { font-size:11px; padding:6px; }.fx-custom-dates { margin-top:8px; }.fx-custom-dates label { flex:1; font-size:11px; }.fx-custom-dates input { width:100%; } }
@media(max-width:600px) { .fx-periods { gap:6px; }.fx-customer-dates .fx-periods button { min-width:0; font-size:12px; padding:9px 4px; } }

.follow-account-shell { position:relative; min-width:0; flex-shrink:0; }
.follow-account-shell > .user-switch { max-width:100%; }
.follow-account-menu { position:absolute; top:calc(100% + 8px); right:0; width:min(290px,calc(100vw - 28px)); max-height:min(60vh,420px); overflow-y:auto; padding:6px; border:1px solid #dbe5e8; border-radius:12px; background:white; box-shadow:0 8px 24px #16372b20; z-index:60; }
.follow-account-caption { margin:4px 8px 8px; color:#667682; font-size:11px; }
.follow-account-profile { width:100%; border:0; border-top:1px solid #e7edef; background:white; color:#176b5d; padding:12px; text-align:left; font:inherit; font-size:12px; cursor:pointer; }

/* Shared follow-up plans keep the owner and invited helpers visible together. */
.follow-collaboration-label { display:flex; flex-wrap:wrap; gap:4px 12px; padding:8px 10px; margin:6px 0; border-radius:8px; background:#edf6f3; color:#24675f; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.follow-collaboration-label span:last-child { flex-basis:100%; }
.follow-collaboration-history { color:#657784; font-size:12px; line-height:1.6; margin-top:5px; overflow-wrap:anywhere; }
.follow-collaboration-fields { display:grid; gap:8px; margin-top:12px; }
.follow-collaborator-picker { border:1px solid #dbe5e8; border-radius:8px; background:white; }
.follow-collaborator-picker summary { cursor:pointer; padding:10px 12px; color:#176b5d; font-weight:700; font-size:13px; }
.follow-collaborator-picker input[type="search"] { width:calc(100% - 20px); margin:0 10px 8px; border:1px solid #dbe5e8; border-radius:6px; padding:8px; font:inherit; font-size:13px; }
.follow-collaborator-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-height:160px; overflow:auto; padding:0 10px 10px; }
.next-follow-box .follow-collaborator-option { position:static; width:auto; height:auto; overflow:visible; clip:auto; clip-path:none; white-space:normal; display:flex; align-items:center; gap:8px; border:1px solid #e3ebe8; border-radius:7px; padding:8px; font-size:13px; min-width:0; cursor:pointer; }
.next-follow-box label[for="followCollaborationContent"] { position:static; width:auto; height:auto; overflow:visible; clip:auto; clip-path:none; white-space:normal; }
.follow-collaborator-option input { flex:none; width:16px; height:16px; accent-color:#176b5d; }
.follow-collaborator-option span { min-width:0; overflow-wrap:anywhere; }
.follow-collaborator-option small { display:block; color:#657784; font-size:11px; }
.next-follow-box .follow-collaborator-owner { background:#edf6f3; border-color:#b9d8d1; cursor:default; }
.follow-collaborator-owner input:disabled { opacity:1; }
.follow-collaborator-selected { display:flex; flex-wrap:wrap; gap:6px; }
.follow-collaborator-selected:empty { display:none; }
.follow-collaborator-selected button,.follow-owner-selected { border:0; border-radius:16px; padding:6px 10px; color:#176b5d; background:#e2f1ed; font:inherit; font-size:12px; }
.follow-collaborator-selected button { cursor:pointer; }
#followCollaborationContent { min-height:56px; resize:vertical; }
#followSaveMessage { padding:0 4px; white-space:normal; }
.todo-sync-status { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px 14px 0; padding:10px 12px; border-radius:8px; background:#fff3df; color:#805215; font-size:13px; }
.todo-sync-status[hidden] { display:none; }
.todo-sync-status button { flex-shrink:0; padding:7px 10px; border:1px solid #d4a76a; border-radius:6px; color:inherit; background:white; font:inherit; cursor:pointer; }

/* Writing a follow-up is an action; keep the history tabs' selected colors separate. */
.record-tab.record-create-follow,.record-tab.record-create-follow.active { color:var(--muted); background:#f0f3f5; }
.record-tab.record-create-follow:focus-visible { outline:2px solid var(--muted); outline-offset:2px; }

.follow-plan-card { display:grid; gap:9px; width:100%; margin:14px 0 18px; padding:14px; border:1px solid #dce5e8; border-radius:10px; background:#f7f9fa; color:#283943; text-align:left; font:inherit; cursor:pointer; }
.follow-plan-card:focus-visible { outline:2px solid #657784; outline-offset:2px; }
.follow-plan-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; }
.follow-plan-heading > span { flex:none; color:#657784; font-size:12px; }
.follow-plan-schedule { display:flex; align-items:center; flex-wrap:wrap; gap:6px 9px; font-size:13px; line-height:1.6; }
.follow-plan-schedule b { white-space:nowrap; }
.follow-plan-content { font-size:13px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
.follow-plan-content.empty,.follow-plan-people { color:#657784; }
.follow-plan-people { font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.plan-editor { width:min(640px,94vw); background:white; }
.plan-editor-customer { margin:0 0 5px; color:#657784; font-size:13px; overflow-wrap:anywhere; }
.plan-editor fieldset { border:0; margin:0; padding:0; min-width:0; }
.plan-editor-schedule { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap:10px; }
.plan-editor label { display:grid; min-width:0; gap:7px; font-size:13px; color:#657784; }
.plan-editor input,.plan-editor select,.plan-editor textarea { box-sizing:border-box; width:100%; min-width:0; border:1px solid #dbe5e8; border-radius:8px; padding:10px; background:white; color:#283943; font:inherit; font-size:16px; }
.plan-editor input,.plan-editor select { min-height:44px; }
.plan-editor input[type="date"],.plan-editor input[type="time"] { -webkit-appearance:none; appearance:none; }
.plan-content-label { margin-top:16px; }
.plan-editor textarea { min-height:108px; resize:vertical; }
.plan-editor-people,.plan-editor-note { font-size:12px; color:#657784; line-height:1.6; overflow-wrap:anywhere; }
.plan-editor-people { margin:12px 0 0; }
.plan-editor-note { margin:12px 0; }
.plan-editor .fx-error { font-size:13px; line-height:1.6; }
.plan-editor .plan-reload { border:1px solid #dbe5e8; border-radius:8px; background:#f7f9fa; color:#283943; padding:9px 12px; font:inherit; font-size:13px; }
.plan-editor .editor-actions { margin-top:16px; }
.plan-collaboration-fields { display:grid; gap:10px; margin-bottom:14px; }
.plan-collaboration-fields[hidden],.plan-editor-schedule[hidden] { display:none; }
.plan-collaborator-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-height:240px; overflow:auto; padding:2px; }
.plan-editor .plan-collaborator-options label { display:flex; align-items:center; gap:8px; padding:10px; border:1px solid #dbe5e8; border-radius:8px; color:#283943; cursor:pointer; overflow-wrap:anywhere; }
.plan-editor .plan-collaborator-options input[type="checkbox"] { flex:none; width:18px; height:18px; min-height:0; padding:0; accent-color:#176b5d; }
.plan-collaborator-options small { display:block; margin-top:3px; color:#657784; font-size:11px; }
.plan-editor .plan-collaborator-owner { background:#edf6f3; cursor:default; }
.plan-editor .plan-collaborator-owner input:disabled { opacity:1; }
.detail-collaboration-summary { padding:0 18px 12px; }
.detail-collaboration-summary[hidden] { display:none; }
.follow-collaboration-edit { display:flex; flex-wrap:wrap; align-items:center; gap:5px 10px; width:100%; border:1px solid #d8e9e1; border-radius:8px; padding:10px 12px; background:#edf6f3; color:#24675f; font:inherit; font-size:13px; line-height:1.6; text-align:left; cursor:pointer; overflow-wrap:anywhere; }
.follow-collaboration-edit small { margin-left:auto; white-space:nowrap; }
.follow-collaboration-edit:focus-visible { outline:2px solid #176b5d; outline-offset:2px; }
@media(max-width:440px) {
  .plan-editor-schedule { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .plan-editor-schedule label:first-child { grid-column:1 / -1; }
}

/* A readable control font avoids mobile focus zoom while preserving pinch zoom. */
@media (max-width:859px), (pointer:coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([hidden]),
  textarea:not([hidden]),
  select:not([hidden]),
  [contenteditable]:not([contenteditable="false"]):not([hidden]) {
    font-size:16px !important;
  }
  .next-follow-box .next-follow-grid select {
    padding:0 18px 0 4px;
    background-position:calc(100% - 12px) 20px,calc(100% - 7px) 20px;
  }
}


/* Long follow-up forms remain entirely reachable after adding nine attachments. */
#followEditor { box-sizing:border-box; max-height:92vh; max-height:92dvh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }

/* Images belong to one follow-up record; the chooser stays below its date. */
.follow-date-images { display:grid; gap:10px; min-width:0; }
.follow-date-images .task-item-time { width:100%; min-width:0; }
.follow-image-add { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:76px; width:100%; border:1px dashed #a9c9c2; border-radius:8px; color:#176b5d; background:#f5faf8; font:inherit; font-size:24px; cursor:pointer; }
.follow-image-add span { font-size:12px; }
.follow-image-add small { font-size:11px; color:#657784; }
.follow-image-add:disabled { opacity:.6; cursor:default; }
.follow-image-drafts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0 4px; }
.follow-image-drafts:empty { display:none; }
.follow-image-draft { position:relative; min-width:0; border:1px solid #dbe5e8; border-radius:8px; overflow:hidden; background:#f4f6f7; }
.follow-image-draft-preview { position:relative; display:block; width:100%; padding:0; border:0; aspect-ratio:1; background:#f4f6f7; cursor:pointer; }
.follow-image-draft-preview img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.follow-image-remove { position:absolute; top:4px; right:4px; display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:50%; background:#ffffffed; color:#283943; font-size:20px; cursor:pointer; }
.follow-image-draft-status { display:block; font-size:11px; line-height:1.5; padding:5px 7px; color:#657784; overflow-wrap:anywhere; }
.follow-image-retry { border:0; border-top:1px solid #dbe5e8; padding:7px; width:100%; color:#a52a25; background:#fff4f3; font:inherit; font-size:12px; cursor:pointer; }
.follow-image-message { margin:7px 0; color:#657784; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.follow-image-message.error { color:#b4231d; }
.follow-image-thumbnails { display:grid; grid-template-columns:repeat(3,minmax(0,86px)); gap:7px; margin-top:6px; min-width:0; }
.follow-image-thumbnail { position:relative; display:grid; place-items:center; min-width:0; width:100%; aspect-ratio:1; padding:0; border:1px solid #dbe5e8; border-radius:7px; background:#f4f6f7; overflow:hidden; cursor:pointer; }
.follow-image-thumbnail img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.follow-image-thumbnail img:not([src]) { visibility:hidden; }
.follow-image-thumbnail::after { content:'图片'; position:absolute; color:#657784; font-size:11px; pointer-events:none; }
.follow-image-thumbnail.loaded::after { display:none; }
.follow-image-thumbnail.failed::after { content:'点击重试'; }
.follow-image-viewer { box-sizing:border-box; width:min(860px,96vw); max-width:96vw; height:min(900px,94dvh); max-height:94dvh; margin:auto; padding:0; border:0; border-radius:14px; background:#10171b; color:white; overflow:hidden; }
.follow-image-viewer[open] { display:flex; flex-direction:column; }
.follow-image-viewer::backdrop { background:#000b; }
.follow-image-viewer-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; flex:none; }
.follow-image-viewer-head strong { min-width:0; font-size:14px; overflow-wrap:anywhere; }
.follow-image-viewer button { min-height:44px; border:0; border-radius:8px; padding:8px 12px; background:#ffffff18; color:white; font:inherit; font-size:14px; cursor:pointer; }
.follow-image-viewer-head button { width:44px; font-size:28px; padding:0; flex:none; }
.follow-image-viewer-stage { flex:1; min-height:0; overflow:auto; display:block; text-align:center; padding:0 8px; overscroll-behavior:contain; }
.follow-image-viewer-stage img { display:block; width:100%; height:auto; margin:0 auto; }
.follow-image-viewer-stage img[hidden],.follow-image-viewer-stage p[hidden] { display:none; }
.follow-image-viewer-stage p { font-size:14px; margin:24px 12px; }
.follow-image-viewer-controls { flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; font-size:13px; }
.follow-image-viewer button:disabled { opacity:.35; cursor:default; }
.follow-image-add:focus-visible,.follow-image-thumbnail:focus-visible,.follow-image-remove:focus-visible,.follow-image-viewer button:focus-visible { outline:2px solid #4ca99a; outline-offset:2px; }
@media(max-width:440px) { .follow-image-drafts { gap:7px; } .follow-image-thumbnails { gap:5px; } }
/* Keep the source reminder visible while the customer is handled. */
.fx-notification-context{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin:0 0 14px;padding:12px 14px;border:1px solid #b7d6ca;border-radius:8px;background:#edf6f0;color:#294e42;font-size:13px;line-height:1.6}
.fx-notification-context p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.fx-notification-context button{padding:5px 10px;border:1px solid #c7dbd3;border-radius:6px;background:#fff;color:#166f60;cursor:pointer}
#panelFollow .notification-target{outline:2px solid #247b67;outline-offset:-2px;border-radius:8px;background:#eff8f1;scroll-margin:24px}