/* Phase 4: comments and attachments. Activity (the task popup's side panel): comments and
   changes in one timeline with a composer at the bottom; Attachments under Notes; the card's
   comment count. Same quiet look as the rest: text until hovered, the accent only where it matters. */

/* the card: "3" with a speech bubble, by the due date */
.pm-card-top .pm-cmt { display: inline-flex; align-items: center; gap: 3px; margin-right: auto; color: var(--muted); font-size: 11px; line-height: 16px; }
.pm-card-top .pm-cmt svg { width: 13px; height: 13px; }

/* ---- Activity */
#pm-history { display: flex; flex-direction: column; }
#pm-history[hidden] { display: none; }
.pm-history-list li.pm-act-comment { align-items: flex-start; gap: 10px; }
.pm-history-list li.pm-act-comment .face { margin-top: 2px; }
.pm-cmt-body { flex: 1; min-width: 0; }
.pm-cmt-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pm-cmt-head b { color: var(--text); font-weight: 600; }
.pm-cmt-head time { font-size: 12px; opacity: .8; white-space: nowrap; }
.pm-cmt-edited { font-size: 11px; opacity: .7; }
.pm-cmt-text { margin: 2px 0 0; color: var(--text); font-size: 14px; line-height: 21px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pm-cmt-text .pm-mention { color: var(--accent); font-weight: 600; }
.pm-cmt-acts { display: flex; gap: 12px; margin-top: 4px; }
.pm-cmt-act { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; line-height: 20px; cursor: pointer; }
.pm-cmt-act:hover, .pm-cmt-act:focus-visible { color: var(--accent); outline: none; }
.pm-cmt-act:focus-visible { text-decoration: underline; }
@media (hover: hover) and (min-width: 761px) {
  .pm-act-comment .pm-cmt-acts { opacity: 0; transition: opacity .12s; }
  .pm-act-comment:hover .pm-cmt-acts, .pm-act-comment:focus-within .pm-cmt-acts { opacity: 1; }
}
.pm-cmt-edit { width: 100%; min-height: 40px; margin-top: 2px; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 10px; background: var(--raised); color: var(--text); font: inherit; font-size: 14px; line-height: 21px; resize: none; outline: none; }

/* the composer: one row that grows with the words, a round Send for a thumb */
.pm-cbox { position: relative; flex: none; margin: 0; padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.pm-cbox[hidden] { display: none; }
.pm-cbox-row { display: flex; align-items: flex-end; gap: 8px; }
.pm-cbox textarea { flex: 1; min-width: 0; min-height: 40px; max-height: 170px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); color: var(--text); font: inherit; font-size: 14px; line-height: 20px; resize: none; }
.pm-cbox textarea:focus { border-color: var(--accent); outline: none; }
.pm-cbox textarea::placeholder { color: var(--muted); }
.pm-cbox-send { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer; }
.pm-cbox-send svg { width: 20px; height: 20px; }
.pm-cbox-send:hover { background: var(--accent-hover); }
.pm-cbox-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pm-cbox-send:disabled { opacity: .5; cursor: default; }
/* who to mention: a small list above the box */
.pm-mention-pop { position: absolute; left: 14px; right: 14px; bottom: calc(100% - 2px); z-index: 2; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--glass-strong); box-shadow: var(--elevation); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.pm-mention-pop[hidden] { display: none; }
.pm-mention-opt { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: 8px; color: var(--text); font-size: 14px; cursor: pointer; }
.pm-mention-opt b { font-weight: 600; }
.pm-mention-opt small { overflow: hidden; color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.pm-mention-opt.on, .pm-mention-opt:hover { background: rgba(255, 255, 255, .08); }

/* ---- Attachments, under Notes */
.pm-attach .pm-flabel label { color: var(--muted); font-size: 13px; font-weight: 500; line-height: 16px; }
.pm-attach-acts { display: flex; gap: 14px; }
.pm-attach-add { height: 24px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.pm-attach-add[hidden] { display: none; }
.pm-attach-add:hover, .pm-attach-add:focus-visible { color: var(--accent); outline: none; }
.pm-attach-add:focus-visible { text-decoration: underline; }
.pm-attach-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pm-attach.empty .pm-attach-list { display: none; }
.pm-attach[hidden] { display: none; }
.pm-att { display: flex; align-items: center; gap: 4px; min-width: 0; margin-left: -8px; }
.pm-att-main { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 40px; padding: 4px 8px; border-radius: 8px; color: var(--text); text-decoration: none; }
.pm-att-main:hover, .pm-att-main:focus-visible { background: rgba(255, 255, 255, .06); outline: none; }
.pm-att-main:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }
.pm-att-main.pending { cursor: progress; }
.pm-att-main.broken { opacity: .6; }
.pm-att-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--muted); }
.pm-att-icon svg { width: 18px; height: 18px; }
.pm-att-thumb { width: 44px; height: 32px; overflow: hidden; }
.pm-att-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pm-att-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pm-att-text b { overflow: hidden; font-size: 14px; font-weight: 500; line-height: 18px; white-space: nowrap; text-overflow: ellipsis; }
.pm-att-text small { overflow: hidden; color: var(--muted); font-size: 12px; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; }
.pm-att.uploading .pm-att-text { color: var(--muted); font-size: 13px; }
.pm-att-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.pm-att-x svg { width: 14px; height: 14px; }
.pm-att-x:hover, .pm-att-x:focus-visible { color: var(--danger); outline: none; }
.pm-att-x:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
@media (hover: hover) and (min-width: 761px) {
  .pm-att .pm-att-x { opacity: 0; transition: opacity .12s; }
  .pm-att:hover .pm-att-x, .pm-att:focus-within .pm-att-x { opacity: 1; }
}
/* Add link: the link and a title, side by side */
.pm-attach-form { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto auto; gap: 8px; align-items: center; }
.pm-attach-form[hidden] { display: none; }
.pm-attach-form input { height: 40px; min-width: 0; }
.pm-attach-form .btn.small { height: 40px; padding: 0 14px; font-size: 13px; }
@media (max-width: 760px) {
  .pm-attach-form { grid-template-columns: 1fr 1fr; }
  .pm-attach-form input { grid-column: 1 / -1; }
  .pm-att .pm-att-x { width: 40px; height: 40px; }
}

/* light theme */
html[data-theme="light"] .pm-mention-opt.on, html[data-theme="light"] .pm-mention-opt:hover, html[data-theme="light"] .pm-att-main:hover, html[data-theme="light"] .pm-att-main:focus-visible { background: rgba(15, 23, 42, .06); }
html[data-theme="light"] .pm-att-icon { background: rgba(15, 23, 42, .06); }
html[data-theme="light"] .pm-cbox textarea, html[data-theme="light"] .pm-cmt-edit { background: #fff; }

/* the popup's Comments button: a speech bubble with how many comments the task has */
.pm-comments-btn { position: relative; }
.pm-cbadge { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--on-accent, #022c22); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; pointer-events: none; }
.pm-history-head .pm-panel-switch { margin-left: auto; margin-right: 8px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.pm-history-head .pm-panel-switch:hover, .pm-history-head .pm-panel-switch:focus-visible { color: var(--text); border-color: var(--accent); outline: none; }
/* drag files onto Attachments */
.pm-attach { position: relative; }
.pm-attach-drop { display: none; position: absolute; inset: -6px; z-index: 2; align-items: center; justify-content: center; border: 2px dashed var(--accent); border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, var(--bg, #0E0F12)); color: var(--accent); font-size: 13px; font-weight: 600; pointer-events: none; }
.pm-attach.dropping .pm-attach-drop { display: flex; }
.pm-attach.dropping.empty { min-height: 64px; }