/* Shared native/web sticker library and comments. Uses Broadser's existing tokens. */
.engagement-panel { position:absolute; z-index:var(--z-popover); right:var(--sp-4); bottom:64px; width:360px; height:min(600px,calc(100% - 128px)); display:flex; flex-direction:column; overflow:hidden; background:var(--surface-overlay); color:var(--text-primary); border:1px solid var(--overlay-border); border-radius:var(--r-panel); box-shadow:var(--shadow-panel); animation:engagement-in var(--dur-base) var(--ease-out); }
.engagement-panel[hidden] { display:none; }
.engagement-panel.is-library { right:auto; bottom:auto; max-height:none; transform-origin:bottom center; }
.is-library .sticker-head { padding:var(--sp-3); gap:var(--sp-2); }
.is-library .sticker-head h2 { font-size:var(--fs-xl); letter-spacing:var(--ls-16); white-space:nowrap; }
.is-library .sticker-head .e-close { margin-left:0; }
.is-library .sticker-search { margin:0; flex:1; min-width:0; padding:0 8px; border-radius:var(--r-field); gap:5px; }
.is-library .sticker-search input { height:var(--ctl-md); font-size:var(--fs-sm); letter-spacing:var(--ls-12); }
.is-library .sticker-search svg { width:14px; height:14px; }
.sticker-controls { display:flex; align-items:center; gap:8px; padding:0 12px 10px; flex-shrink:0; }
.is-library .sticker-categories { padding:0; gap:2px; flex:1; min-width:0; }
.is-library .sticker-categories button { padding:0 6px; }
.is-library .sticker-browse { padding:0; flex:0 1 118px; min-width:0; }
.is-library .sticker-browse select { width:100%; padding:6px; font-size:var(--fs-sm); letter-spacing:var(--ls-12); }
.is-library .sticker-results { padding:2px 12px 12px; }
.is-library .sticker-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.is-library .sticker-choice { padding:6px 2px; border-radius:var(--r-lg); }
.is-library .sticker-choice img { width:min(64px,100%); height:auto; aspect-ratio:1; }
.is-library .sticker-choice span { font-size:var(--fs-2xs); letter-spacing:var(--ls-10); margin-top:4px; }
.is-library .engagement-foot { padding:8px 12px; font-size:var(--fs-xs); letter-spacing:var(--ls-11); }
.engagement-head { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-4) var(--sp-5); flex-shrink:0; }
.engagement-head h2 { margin:0; font-size:var(--fs-xl); font-weight:var(--fw-semibold); letter-spacing:var(--ls-16); line-height:var(--lh-snug); }
.engagement-head p { margin:5px 0 0; font-size:var(--fs-sm); letter-spacing:var(--ls-12); color:var(--text-secondary); line-height:1.5; }
.e-close { margin-left:auto; }
.engagement-panel button,.engagement-panel input,.engagement-panel textarea { font:inherit; }
.engagement-panel button { cursor:pointer; }
.e-icon { width:var(--ctl-md); height:var(--ctl-md); display:grid; place-items:center; border:0; border-radius:var(--r-control); background:transparent; color:var(--text-secondary); flex-shrink:0; }
.e-icon svg { width:var(--icon-md); height:var(--icon-md); }
.e-icon:hover,.e-text:hover { background:var(--state-hover); color:var(--text-primary); }
.sticker-search { display:flex; align-items:center; gap:8px; margin:0 20px 14px; padding:0 12px; border:1px solid var(--border-default); border-radius:var(--r-field); background:var(--fill-subtle); }
.sticker-search span { display:flex; color:var(--text-tertiary); }
.sticker-search svg { width:var(--icon-md); height:var(--icon-md); }
.sticker-search input { min-width:0; width:100%; height:var(--ctl-lg); border:0; background:transparent; color:var(--text-primary); font-size:var(--fs-sm); letter-spacing:var(--ls-12); outline:none; }
.sticker-search:focus-within { border-color:var(--field-focus-border); box-shadow:var(--ring-focus); }
.sticker-categories { display:flex; gap:4px; padding:0 20px 12px; flex-shrink:0; }
.sticker-categories button { flex:1; }
.sticker-browse { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 20px 16px; font-size:var(--fs-xs); letter-spacing:var(--ls-11); color:var(--text-tertiary); flex-shrink:0; }
.sticker-browse select { font:inherit; color:var(--text-secondary); background:var(--surface-sunken); border:1px solid var(--border-default); border-radius:var(--r-field); padding:7px; min-width:0; }
/* Both filters are segmented controls, drawn as every .seg is: a track, items of
   --ctl-sm − 4px, and the choice that is on marked by the control thumb, not the accent. */
.is-library .sticker-categories,.comment-filters { padding:2px; background:var(--fill-subtle); border-radius:var(--r-control); }
.sticker-categories button,.comment-filters button { border:0; border-radius:var(--r-xs); height:calc(var(--ctl-sm) - 4px); padding:0 9px; background:transparent; color:var(--text-secondary); font-size:var(--fs-sm); letter-spacing:var(--ls-12); white-space:nowrap; }
.sticker-categories button:hover:not([aria-pressed="true"]),.comment-filters button:hover:not([aria-pressed="true"]) { background:var(--state-hover); color:var(--text-primary); }
.sticker-categories button[aria-pressed="true"],.comment-filters button[aria-pressed="true"] { background:var(--control-thumb); box-shadow:var(--control-thumb-shadow); color:var(--text-primary); }
.sticker-results { flex:1; min-height:0; overflow:auto; padding:4px 16px 16px; overscroll-behavior:contain; }
.e-section-label { padding:0 4px 10px; font-size:var(--fs-xs); letter-spacing:var(--ls-11); color:var(--text-tertiary); }
.sticker-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px 5px; }
.sticker-tile { position:relative; border-radius:var(--r-lg); }
.sticker-choice { display:flex; flex-direction:column; align-items:center; width:100%; padding:8px 3px; border:0; border-radius:var(--r-lg); background:transparent; color:var(--text-secondary); }
.sticker-choice img { width:84px; height:84px; object-fit:contain; transition:transform var(--dur-base) var(--ease-out); pointer-events:none; filter:drop-shadow(0 3px 2px #2b244211); }
.sticker-choice span { display:block; width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center; font-size:var(--fs-2xs); letter-spacing:var(--ls-10); margin-top:5px; }
.sticker-choice:hover { background:var(--state-hover); }
.sticker-choice { touch-action:pan-y; }
.sticker-choice:hover img { transform:translateY(-3px) rotate(-4deg); }
.sticker-favorite { position:absolute; top:0; right:0; width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:50%; background:var(--surface-overlay); color:var(--text-tertiary); opacity:0; transition:opacity var(--dur-fast) var(--ease-out); }
.sticker-favorite svg { width:var(--icon-md); height:var(--icon-md); }
.sticker-tile:hover .sticker-favorite,.sticker-tile:focus-within .sticker-favorite,.sticker-favorite[aria-pressed="true"] { opacity:1; }
.sticker-favorite[aria-pressed="true"] { color:var(--accent-text); }
.sticker-favorite[aria-pressed="true"] svg { fill:currentColor; }
.engagement-foot { padding:13px 20px; border-top:1px solid var(--border-default); color:var(--text-tertiary); font-size:var(--fs-xs); letter-spacing:var(--ls-11); flex-shrink:0; }
.e-empty { text-align:center; padding:44px 18px; color:var(--text-secondary); font-size:var(--fs-md); letter-spacing:var(--ls-13); line-height:1.6; }
.e-empty p { color:var(--text-tertiary); font-size:var(--fs-sm); letter-spacing:var(--ls-12); margin:8px 0 0; }
.card.sticker { background:transparent; border:0; box-shadow:none; border-radius:20px; overflow:visible; min-width:48px; min-height:48px; }
.card.sticker::before { border-radius:20px; }
.sticker-art { width:100%; height:100%; object-fit:contain; user-select:none; pointer-events:none; transform-origin:center; filter:drop-shadow(0 4px 3px #30233b16); }
.card.comment { background:transparent; border:0; box-shadow:none; border-radius:50%; overflow:visible; min-width:0; min-height:0; }
.card.comment.selected { outline:0; box-shadow:none; }
.card.comment.selected .comment-pin-face { border-color:var(--accent); box-shadow:0 0 0 2px var(--state-selected),var(--shadow-comment-active); }
.card.comment.is-resolved { display:none; }
.show-resolved-comments .card.comment.is-resolved { display:block; }
.comment-pin { position:absolute; inset:0; width:40px; height:40px; padding:4px; display:grid; place-items:center; border:0; background:transparent; color:var(--accent-text); border-radius:var(--r-panel); cursor:pointer; transform:scale(var(--comment-ui,1)); transform-origin:top left; }
.comment-pin-face { position:relative; display:grid; place-items:center; width:32px; height:32px; box-sizing:border-box; border:1px solid var(--border-strong,var(--border-default)); border-radius:50% 50% 50% 7px; background:var(--surface-raised); color:var(--accent-text); box-shadow:var(--shadow-comment); transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out); }
.comment-pin-face svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.comment-pin-avatar { display:grid; place-items:center; width:100%; height:100%; overflow:hidden; border-radius:inherit; background:var(--state-selected); color:var(--accent-text); }
.comment-pin-avatar img { display:block; width:100%; height:100%; object-fit:contain; }
.comment-pin-status { position:absolute; top:-4px; right:-4px; display:grid; place-items:center; width:14px; height:14px; border:1px solid var(--surface-raised); border-radius:50%; background:var(--accent); color:var(--text-on-accent); }
.comment-pin-status svg { width:10px; height:10px; stroke-width:2.2; }
.comment-count { position:absolute; top:-5px; right:-6px; box-sizing:border-box; display:grid; place-items:center; border-radius:var(--r-full); min-width:16px; height:16px; padding:0 3px; font-size:var(--fs-2xs); letter-spacing:var(--ls-10); font-weight:var(--fw-semibold); background:var(--surface-raised); color:var(--text-secondary); border:1px solid var(--border-default); box-shadow:var(--shadow-comment); }
.comment-count:empty { display:none; }
.is-resolved .comment-pin-face { color:var(--text-secondary); box-shadow:var(--shadow-comment); }
.placing-comment #viewport,.placing-comment #viewport * { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 3h18a6 6 0 016 6v10a6 6 0 01-6 6H11l-8 5V3z' fill='white' stroke='%232d493b' stroke-width='2'/%3E%3Cpath d='M10 14h10m-5-5v10' stroke='%232d493b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 3 3,crosshair!important; }
.placing-comment #viewport .comment-pin,.placing-comment #viewport .comment-pin * { cursor:pointer!important; }
.placing-comment #viewport.space,.placing-comment #viewport.space * { cursor:grab!important; }
.placing-comment #viewport.panning,.placing-comment #viewport.panning * { cursor:grabbing!important; }
.comment-region,.comment-region-preview { position:absolute; box-sizing:border-box; pointer-events:none; border:calc(var(--comment-ui,1) * 1.5px) dashed var(--accent); border-radius:calc(var(--comment-ui,1) * 3px); background:color-mix(in srgb,var(--accent) 5%,transparent); }
.comment-region { opacity:.55; }
.card.comment:has(.comment-pin[aria-expanded="true"]) .comment-region,.card.comment:has(.comment-pin:hover,.comment-pin:focus-visible) .comment-region { opacity:1; background:color-mix(in srgb,var(--accent) 10%,transparent); }
.comment-region-preview { z-index:calc(var(--z-popover) - 3); }
.comment-region[hidden],.comment-region-preview[hidden] { display:none; }
.placing-sticker #viewport,.placing-sticker #viewport * { cursor:crosshair!important; }
.engagement-preview { position:absolute; z-index:calc(var(--z-popover) - 2); pointer-events:none; opacity:.72; }
.engagement-preview img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 4px #0002); }
.engagement-preview[hidden],.comment-draft-pin[hidden],.engagement-coach[hidden] { display:none; }
.card.engagement-anchor-target { outline:1.5px solid var(--accent); outline-offset:3px; }
.app:is(.placing-comment,.placing-sticker) #anchors { visibility:hidden; }
.engagement-preview[data-attachment]::after { content:attr(data-attachment); position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); padding:5px 8px; border-radius:var(--r-control); background:var(--surface-overlay); color:var(--text-secondary); border:1px solid var(--border-default); white-space:nowrap; font-size:var(--fs-xs); letter-spacing:var(--ls-11); }
.engagement-preview.label-left::after { left:auto; right:0; transform:none; }
.engagement-preview.label-right::after { left:0; right:auto; transform:none; }
.engagement-preview.label-above::after { top:auto; bottom:calc(100% + 8px); }
.engagement-preview.is-comment:not([hidden]) { display:grid; place-items:center; opacity:1; }
.engagement-preview.is-comment .comment-pin-face,.comment-draft-pin .comment-pin-face { border:1.5px dashed var(--accent); background:var(--surface-raised); box-shadow:0 0 0 3px var(--state-selected); }
.card.comment.comment-cluster-hidden { display:none!important; }
.card.is-reading-annotation { display:none; }
.comment-pin.is-cluster .comment-pin-face>svg,.comment-pin.is-cluster :is(.comment-count,.comment-pin-avatar,.comment-pin-status) { visibility:hidden; }
.comment-pin.is-cluster .comment-pin-face::before { content:''; position:absolute; inset:-4px 3px 4px -4px; z-index:-1; border:1px solid var(--border-strong,var(--border-default)); border-radius:inherit; background:var(--surface-raised); }
.comment-cluster-count { position:absolute; inset:0; display:grid; place-items:center; font-size:var(--fs-sm); letter-spacing:var(--ls-12); font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; }
.engagement-coach { position:absolute; z-index:var(--z-popover); left:50%; transform:translateX(-50%); bottom:64px; display:flex; align-items:center; gap:12px; max-width:calc(100% - 32px); box-sizing:border-box; padding:10px 12px; border:1px solid var(--border-default); border-radius:var(--r-popover); background:var(--surface-overlay); color:var(--text-primary); box-shadow:var(--shadow-popover); font:inherit; }
.engagement-coach>img { width:40px; height:40px; object-fit:contain; }
.engagement-coach>div { min-width:0; }
.engagement-coach strong,.engagement-coach span { display:block; }
.engagement-coach strong { font-size:var(--fs-sm); letter-spacing:var(--ls-12); font-weight:var(--fw-semibold); }
.engagement-coach span { font-size:var(--fs-xs); letter-spacing:var(--ls-11); color:var(--text-secondary); margin-top:4px; line-height:1.4; }
.engagement-coach button { cursor:pointer; white-space:nowrap; }
.coach-icon svg { width:24px; height:24px; fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.comment-draft-pin { position:absolute; z-index:calc(var(--z-popover) - 1); pointer-events:none; width:40px; height:40px; display:grid; place-items:center; }
.comment-pin[aria-expanded="true"] .comment-pin-face { background:var(--accent); border-color:var(--accent); color:var(--text-on-accent); box-shadow:0 0 0 3px var(--state-selected),var(--shadow-comment-active); }
.comment-pin[aria-expanded="true"] .comment-count { color:var(--accent-text); }
.comment-pin { font-family:inherit; font-size:var(--fs-md); letter-spacing:var(--ls-13); font-weight:var(--fw-semibold); line-height:1; touch-action:none; }
.tip.comment-pin-preview { width:240px; max-width:calc(100vw - 32px); box-sizing:border-box; display:block; padding:11px 12px; border:1px solid var(--border-default); border-radius:var(--r-popover); background:var(--surface-overlay); color:var(--text-primary); white-space:normal; animation:none; box-shadow:var(--shadow-popover); }
.comment-pin-preview[hidden] { display:none; }
.comment-pin-preview strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:var(--fs-xs); letter-spacing:var(--ls-11); font-weight:var(--fw-semibold); }
.pin-preview-author,.pin-preview-row { display:flex; align-items:center; gap:8px; min-width:0; }
.pin-preview-row { align-items:flex-start; margin-top:10px; }
.pin-preview-row>div { min-width:0; }
.pin-preview-body .pin-preview-row p { margin-top:2px; -webkit-line-clamp:2; }
.pin-preview-row .comment-avatar { width:24px; height:24px; }
.pin-preview-body p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; overflow-wrap:anywhere; white-space:pre-wrap; margin:6px 0 0; font-size:var(--fs-sm); letter-spacing:var(--ls-12); line-height:1.5; }
.comment-pin-preview>span { display:block; margin-top:8px; color:var(--text-secondary); font-size:var(--fs-xs); letter-spacing:var(--ls-11); }
.engagement-panel.is-thread { right:auto; bottom:auto; height:auto; width:340px; max-height:calc(100% - 120px); }
.is-thread .engagement-head { padding:12px 14px; gap:6px; }
.is-comments .engagement-head>div { min-width:0; flex:1; }
.is-comments .engagement-head h2 { font-size:var(--fs-xl); letter-spacing:var(--ls-16); }
.is-comments .engagement-head .e-close { margin-left:0; }
.is-comments:not(.is-thread) { height:min(520px,calc(100% - 128px)); }
.is-comments.is-empty:not(.is-thread) { height:min(280px,calc(100% - 128px)); }
.is-comments:not(.is-thread) .engagement-head { padding:14px 16px; gap:8px; }
.is-thread .engagement-head h2 { font-size:var(--fs-xl); letter-spacing:var(--ls-16); }
.is-thread .engagement-head p { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.is-thread .thread-content { padding:0 16px; flex:0 1 auto; min-height:0; }
.is-thread .comment-composer { flex-shrink:0; margin:0; padding:12px 16px; border-top:1px solid var(--border-default); }
.is-thread .comment-composer textarea { min-height:48px; max-height:120px; resize:none; }
.is-thread .e-readonly { padding:12px 16px; }
.engagement-panel.is-quick { right:auto; bottom:auto; height:auto; width:312px; max-height:calc(100% - 120px); }
.is-quick .engagement-head { padding:14px 16px 8px; }
.is-quick .engagement-head h2 { font-size:var(--fs-xl); letter-spacing:var(--ls-16); }
.is-quick .engagement-head p { max-width:220px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.quick-stickers { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding:8px 10px; min-height:0; overflow:auto; overscroll-behavior:contain; }
.quick-stickers button { background:transparent; color:var(--text-secondary); border:0; border-radius:var(--r-lg); padding:6px 2px; display:flex; align-items:center; flex-direction:column; gap:5px; min-width:0; }
.quick-stickers button:hover { background:var(--state-hover); }
.quick-stickers img { width:48px; height:48px; object-fit:contain; pointer-events:none; }
.quick-stickers span { font-size:var(--fs-2xs); letter-spacing:var(--ls-10); line-height:1.4; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quick-sticker-foot { border-top:1px solid var(--border-default); padding:10px 14px; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-shrink:0; }
.quick-sticker-foot>span { font-size:var(--fs-xs); letter-spacing:var(--ls-11); color:var(--text-tertiary); }
.message-note { display:flex; align-items:center; gap:5px; }
.message-note svg { width:var(--icon-sm); height:var(--icon-sm); }
.comment-all { margin:0 20px 8px; align-self:flex-start; }
.is-thread .comment-message:last-child { border-bottom:0; }
.comment-search { margin-bottom:12px; flex-shrink:0; }
.comment-tools { margin:0 16px 10px; flex-shrink:0; }
.comment-filters { display:flex; gap:2px; }
.comment-filters button { display:flex; align-items:center; justify-content:center; gap:6px; flex:1; padding:0 8px; }
.comment-filters button>span { font-size:var(--fs-2xs); letter-spacing:var(--ls-10); opacity:.7; font-variant-numeric:tabular-nums; }
.comment-search { margin:0 var(--sp-4) var(--sp-3); border-radius:var(--r-field); }
.comment-search input { height:34px; }
.e-primary { background:var(--accent); color:var(--text-on-accent); border:0; border-radius:var(--r-control); min-height:var(--ctl-lg); padding:var(--sp-2) var(--sp-3); font-size:var(--fs-sm)!important; letter-spacing:var(--ls-12); font-weight:var(--fw-medium)!important; white-space:nowrap; }
.e-primary:not(:disabled):hover { background:var(--accent-hover); }
.e-primary:not(:disabled):active { background:var(--accent-active); }
.e-primary:disabled { opacity:.4; cursor:default; }
.comment-placement,.resume-draft { margin:0 16px 12px; padding:10px 12px; background:var(--state-selected); border:0; border-radius:var(--r-popover); font-size:var(--fs-sm)!important; letter-spacing:var(--ls-12); line-height:1.5; color:var(--text-primary); }
.comment-placement { display:flex; align-items:center; gap:8px; }
.resume-draft { text-align:left; flex-shrink:0; }
.resume-draft strong { display:block; font-weight:var(--fw-medium); font-size:var(--fs-xs); letter-spacing:var(--ls-11); color:var(--accent-text); }
.resume-draft>span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-top:3px; }
.comment-list { overflow:auto; flex:1; min-height:0; padding:0 8px 8px; overscroll-behavior:contain; }
.comment-summary { display:flex; gap:10px; width:100%; padding:14px 8px; border:0; border-bottom:1px solid var(--border-default); border-radius:var(--r-control); text-align:left; background:transparent; color:var(--text-primary); }
.comment-summary:hover { background:var(--state-hover); }
.comment-summary>span:last-child { min-width:0; flex:1; }
.comment-summary strong { font-size:var(--fs-sm); letter-spacing:var(--ls-12); font-weight:var(--fw-semibold); }
.comment-avatar { width:28px; height:28px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; background:var(--state-selected); color:var(--accent-text); font-size:var(--fs-xs); letter-spacing:var(--ls-11); font-weight:var(--fw-semibold); }
.comment-you { display:inline-block; margin-left:5px; padding:1px 4px; border-radius:var(--r-xs); background:var(--fill-subtle); color:var(--text-secondary); font-size:var(--fs-2xs); letter-spacing:var(--ls-10); font-weight:var(--fw-medium); vertical-align:middle; }
.summary-by { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.summary-by time { font-size:var(--fs-xs); letter-spacing:var(--ls-11); color:var(--text-tertiary); flex-shrink:0; }
.summary-body { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:var(--fs-md); letter-spacing:var(--ls-13); margin:4px 0 6px; line-height:1.55; overflow-wrap:anywhere; }
.summary-meta { display:block; color:var(--text-tertiary); font-size:var(--fs-xs); letter-spacing:var(--ls-11); line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.summary-source { color:var(--text-secondary); }
.thread-content { overflow:auto; flex:1; padding:0 20px 20px; overscroll-behavior:contain; }
.e-text { border:0; background:transparent; color:var(--text-secondary); font-size:var(--fs-xs)!important; letter-spacing:var(--ls-11); border-radius:var(--r-control); padding:4px 6px; }
.comment-context { display:flex; align-items:center; gap:4px; max-width:100%; padding:0; font-size:var(--fs-xs)!important; letter-spacing:var(--ls-11); line-height:1.5; border:0; background:transparent; color:var(--text-secondary); text-align:left; }
.comment-context:hover { color:var(--accent-text); }
.comment-context svg { width:12px; height:12px; flex-shrink:0; }
.comment-context span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.is-thread .engagement-head p { margin-top:3px; max-width:none; }
.comment-resolve { display:flex; align-items:center; justify-content:center; gap:4px; padding:6px; white-space:nowrap; flex-shrink:0; }
.comment-resolve svg { width:14px; height:14px; }
.comment-message { display:flex; gap:10px; padding:12px 0; border-bottom:1px solid var(--border-default); }
.comment-message:first-child { padding-top:4px; }
.message-main { min-width:0; flex:1; }
.message-by { display:flex; gap:6px; align-items:center; min-height:24px; }
.message-by strong { font-size:var(--fs-sm); letter-spacing:var(--ls-12); font-weight:var(--fw-semibold); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.message-by time { font-size:var(--fs-xs); letter-spacing:var(--ls-11); color:var(--text-tertiary); white-space:nowrap; }
.message-more { margin-left:auto; width:26px; height:26px; border-radius:var(--r-control); }
.message-more svg { width:16px; height:16px; }
.message-more[aria-expanded="true"] { background:var(--state-selected); color:var(--accent-text); }
.comment-message p { white-space:pre-wrap; overflow-wrap:anywhere; font-size:var(--fs-md); letter-spacing:var(--ls-13); line-height:1.6; margin:4px 0 0; }
.message-actions { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.message-actions[hidden] { display:none; }
.message-delete { color:var(--danger-text); }
.message-edited { display:inline-block; color:var(--text-tertiary); font-size:var(--fs-xs); letter-spacing:var(--ls-11); margin-top:4px; }
.comment-composer { margin-top:20px; }
.composer-identity { display:flex; align-items:center; gap:7px; min-width:0; max-width:100%; margin:0 0 8px; padding:3px 5px 3px 0; border:0; border-radius:var(--r-control); background:transparent; color:var(--text-secondary); font:inherit; font-size:var(--fs-xs); letter-spacing:var(--ls-11); cursor:pointer; text-align:left; }
.composer-identity:hover { color:var(--text-primary); background:var(--state-hover); }
.composer-identity>.comment-avatar { width:22px; height:22px; }
.composer-identity>span:last-of-type { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.composer-identity strong { font-weight:var(--fw-semibold); }
.composer-identity>svg { width:12px; height:12px; flex-shrink:0; }
.comment-composer label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.comment-composer textarea { resize:none; min-height:48px; max-height:120px; width:100%; box-sizing:border-box; border:1px solid var(--border-default); border-radius:var(--r-field); padding:var(--sp-3); font-size:var(--fs-md); letter-spacing:var(--ls-13); line-height:var(--lh-relaxed); background:var(--fill-subtle); color:var(--text-primary); transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out); }
.comment-composer textarea:focus { border-color:var(--field-focus-border); box-shadow:var(--ring-focus); }
.composer-bottom { display:flex; align-items:center; gap:6px; margin-top:8px; min-height:32px; }
.composer-bottom .e-primary { margin-left:auto; }
.composer-shortcut { color:var(--text-tertiary); font-size:var(--fs-xs); letter-spacing:var(--ls-11); }
.draft-state:empty { display:none; }
.draft-state { color:var(--text-tertiary); font-size:var(--fs-xs); letter-spacing:var(--ls-11); }
.draft-state:not(:empty)+.composer-shortcut { display:none; }
.comment-location,.e-readonly { font-size:var(--fs-sm); letter-spacing:var(--ls-12); color:var(--text-secondary); line-height:1.6; padding:12px 0; }
.comment-foot { padding:10px 16px; flex-shrink:0; font-size:var(--fs-xs); letter-spacing:var(--ls-11); color:var(--text-tertiary); border-top:1px solid var(--border-default); }
.comment-empty { padding:32px 20px; }
.comment-empty>strong { display:block; color:var(--text-primary); font-size:var(--fs-md); letter-spacing:var(--ls-13); font-weight:var(--fw-medium); }
.comment-empty .e-text { margin-top:14px; color:var(--accent-text); }
.empty-comment-icon { display:block; margin:0 auto 14px; color:var(--text-tertiary); }
.empty-comment-icon svg { display:block; width:28px; height:28px; margin:auto; }
.comment-pin:hover:not([aria-expanded="true"]) .comment-pin-face { border-color:var(--accent); box-shadow:0 0 0 2px var(--state-selected),var(--shadow-comment-active); }
.engagement-panel button:focus-visible,.engagement-panel input:is([type=checkbox],[type=radio]):focus-visible,.engagement-coach button:focus-visible { outline:2px solid var(--accent-line); outline-offset:2px; }
.engagement-panel :is(input:not([type=checkbox],[type=radio]),textarea,select):focus-visible { outline:0; border-color:var(--field-focus-border); box-shadow:var(--ring-focus); }
.comment-pin:focus-visible { outline:0; }
.comment-pin:focus-visible .comment-pin-face { outline:2px solid var(--accent-line); outline-offset:2px; box-shadow:var(--shadow-comment-active); }
@keyframes engagement-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@media (pointer:coarse) { .sticker-favorite { opacity:1; width:32px; height:32px; } .e-icon { width:40px; height:40px; } .e-text,.comment-filters button,.sticker-categories button { min-height:36px; } }
@media (max-width:720px) { .engagement-panel { width:340px; max-width:calc(100% - 16px); right:8px; bottom:64px; height:min(560px,calc(100% - 128px)); border-radius:var(--r-xl); } .engagement-head { padding:var(--sp-4) var(--sp-5); } .sticker-choice img { width:76px; height:76px; } .engagement-coach { width:max-content; gap:8px; padding:8px; bottom:64px; } .engagement-coach>img,.engagement-coach>.coach-icon { display:none; } .engagement-coach>div { flex:1; } .engagement-coach strong { font-size:var(--fs-xs); letter-spacing:var(--ls-11); } .engagement-coach span { font-size:var(--fs-xs); letter-spacing:var(--ls-11); } .is-thread .thread-content { flex-shrink:1; } }
@media (prefers-reduced-motion:reduce) { .engagement-panel,.sticker-choice img,.comment-pin-face,.comment-composer textarea { animation:none; transition:none; } }

.view-comments-button { position:absolute; z-index:var(--z-toolbar); top:16px; right:18px; padding:9px 14px; border:1px solid var(--border-default); border-radius:var(--r-control); background:var(--surface-raised); color:var(--text-primary); font:inherit; cursor:pointer; }
/* In a shared page's presentation bar (styles.css .present-exit): one of its quiet text items. */
.view-comments-button.in-bar { position:static; height:26px; padding:0 var(--sp-2); border:0; border-radius:var(--r-control); background:none; color:var(--text-secondary); font-weight:var(--fw-medium); white-space:nowrap; }
.view-comments-button.in-bar:hover { background:var(--fill-subtle); color:var(--text-primary); }

#engagement-panel .sticker-search input:focus-visible { outline:none; box-shadow:none; }
/* Keep the tools usable beside the outline and on touch screens. Redundant frame,
   table and page entries remain available in Add when the row has less room. */
@media (max-width:720px) { .app .bottombar { padding-left:8px; padding-right:8px; } }
@media (max-width:360px) { .tool-dock #btn-stickers { display:none; } }
@media (pointer:coarse) {
  .comment-pin { width:44px; height:44px; padding:4px; }
  .comment-pin-face { width:36px; height:36px; }
  .comment-draft-pin { width:44px; height:44px; }
  .is-library .sticker-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .is-library .sticker-favorite { background:transparent; align-items:start; justify-items:end; padding:2px; }
  .sticker-favorite,.engagement-panel .e-icon { width:44px; height:44px; }
  .engagement-panel :is(.e-text,.e-primary,.comment-filters button,.sticker-categories button,select),.engagement-coach :is(.e-text,.e-icon) { min-height:44px; }
  .engagement-panel .sticker-search input { height:44px; }
  .engagement-panel .sticker-search input,.engagement-panel .sticker-browse select,
  .engagement-panel .comment-composer textarea { font-size:var(--fs-xl); letter-spacing:var(--ls-16); }
  .is-comments .message-by { flex-wrap:wrap; }
  .is-comments .message-more { width:44px; height:44px; }
  .is-comments .comment-context { min-height:28px; }
}
@media (max-width:720px) and (max-height:650px) { .sticker-categories { flex-wrap:nowrap; overflow-x:auto; flex-shrink:0; } }

@media (max-height:500px) {
  .is-library .sticker-head { padding-top:6px; padding-bottom:6px; }
  .sticker-controls { padding-bottom:6px; }
  .is-library .sticker-choice { padding:4px 2px; }
  .is-library .sticker-choice img { width:min(48px,100%); }
  .is-thread .engagement-head { padding:8px 12px; }
  .is-thread .engagement-head p { margin-top:2px; }
  .is-comments:not(.is-thread) .engagement-head { padding:8px 12px; }
  .is-comments .comment-foot { display:none; }
  .is-comments .comment-tools { margin-bottom:6px; }
  .is-comments .comment-search { margin-bottom:6px; }
  .is-thread .comment-composer { padding:8px 12px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; }
  .is-thread .composer-identity { grid-column:1/-1; margin:0; }

  .is-thread .comment-composer textarea { height:48px; min-height:48px; max-height:80px; padding:8px; }
  .is-thread .composer-bottom { margin:0; }
  .is-thread .composer-bottom>span { display:none; }
  .is-thread .composer-bottom .draft-state { display:none; }
}
.engagement-add-stickers { display:none!important; }
@media (max-width:640px) {
  .engagement-add-stickers { display:flex!important; }
}
@media (max-width:360px) {
  .comment-tools { margin-left:12px; margin-right:12px; gap:4px; }
  .comment-filters button { padding-left:6px; padding-right:6px; }
  .engagement-coach .e-icon { width:32px; flex-shrink:0; }
}
.comment-quote { margin:4px 20px 16px;padding:10px 12px;border-left:2px solid var(--accent);background:var(--fill-subtle);font-size:var(--fs-sm);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere; }
.comment-quote > span { display:block;margin-bottom:6px;font-size:var(--fs-2xs);color:var(--text-secondary); }