/* /plus surfaces (dashboard, profile, cards) and the header overlays. Prototype-feedback override: these now use the SITE's design language (the dc-theme.css tokens, light by default, and they follow the site's dark toggle) instead of a separate dark identity. Everything is prefixed .dcp-. RTL. */ body.dcp-page { margin: 0; background: var(--bg, #f0f2f5); color: var(--txt, #0a1a33); min-height: 100vh; line-height: 1.85; } body.dcp-page a { color: var(--ac, #0b5fff); text-decoration: none; } /* The rule above wins over .dcp-btn-primary/.dcp-btn-danger's own `color: #fff` on any (element+class beats a single class), so a link styled as a filled accent button rendered with accent-blue text on an accent-blue background — invisible (2026-07-30, /plus/'s "کارت برای مرور" button). These need the extra specificity to actually win. */ body.dcp-page a.dcp-btn { color: var(--txt, #0a1a33); } body.dcp-page a.dcp-btn-primary, body.dcp-page a.dcp-btn-danger { color: #fff; } .dcp-page-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border, rgba(2,35,96,.1)); position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--surface, #fff) 88%, transparent); backdrop-filter: blur(8px); } .dcp-page-brand { font-weight: 800; font-size: 1.1rem; color: var(--txt) !important; } .dcp-page-back { color: var(--txt2, #4a5f85) !important; font-size: .9rem; } .dcp-page-main { max-width: 900px; margin: 0 auto; padding: 18px 16px 60px; } .dcp-loading, .dcp-empty, .dcp-gate { padding: 30px 6px; color: var(--txt2, #4a5f85); text-align: center; } .dcp-gate { display: flex; flex-direction: column; gap: 14px; align-items: center; } .dcp-muted { color: var(--txt2, #4a5f85); } /* ---- section cards ------------------------------------------------------- */ .dcp-dash-hello { font-size: 1.5rem; font-weight: 800; margin: 4px 2px 16px; } .dcp-dash-sec { background: var(--card-bg, #fff); border: 1px solid var(--card-border, rgba(2,35,96,.09)); border-radius: var(--r-lg, 18px); padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--card-sh, 0 1px 3px rgba(2,35,96,.07)); } .dcp-dash-h2 { font-size: 1rem; font-weight: 800; margin: 0 0 4px; } /* ---- "won a week of premium" banner (dashboard.js premiumGrantBanner) ---- */ .dcp-prize-banner { background: var(--card-bg, #fff); border: 1px solid var(--ac, #0b5fff); border-radius: var(--r-lg, 18px); padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--card-sh, 0 1px 3px rgba(2,35,96,.07)); } .dcp-prize-h { font-size: 1.1rem; font-weight: 800; margin: 0 0 4px; } .dcp-prize-list { margin: 10px 0 14px; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; } .dcp-prize-list li { color: var(--txt2, #4a5f85); font-size: .9rem; line-height: 1.7; } .dcp-prize-list li b { color: var(--txt, #0a1a33); } .dcp-sec-hint { color: var(--txt2, #4a5f85); font-size: .9rem; margin: 0 0 12px; } /* A hint with a «؟» beside it (the reveal caption itself is dc-plus-scorecap, already styled - see home-card.js's own score/شیلد caption). */ .dcp-sec-hint-row { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; } .dcp-sec-hint-row .dcp-sec-hint { margin: 0; flex: 1 1 auto; } .dcp-sec-hint-row .dc-plus-info { flex: none; margin-top: 1px; } /* ---- streak (with explanation) ------------------------------------------- */ .dcp-streak-detail { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .dcp-streak-flamebig { font-size: 2.4rem; filter: grayscale(1); opacity: .5; } .dcp-streak-flamebig.is-active { filter: none; opacity: 1; } .dcp-streak-nums { display: flex; flex-direction: column; } .dcp-streak-num { font-size: 2rem; font-weight: 900; line-height: 1.1; } .dcp-streak-unit { color: var(--txt2, #4a5f85); } .dcp-streak-record { margin-inline-start: auto; text-align: center; background: var(--surface2, #f4f6fb); border-radius: var(--r-md, 14px); padding: 8px 16px; } .dcp-streak-record b { font-size: 1.3rem; display: block; } .dcp-streak-record span { color: var(--txt2, #4a5f85); font-size: .85rem; } /* ---- continue reading ---------------------------------------------------- */ .dcp-continue { color: var(--ac, #0b5fff) !important; font-weight: 700; } .dcp-continue-lead { color: var(--txt2, #4a5f85); font-weight: 400; } /* ---- folder tree --------------------------------------------------------- */ .dcp-folders { display: flex; flex-direction: column; } .dcp-folder { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 6px; border-bottom: 1px solid var(--border, rgba(2,35,96,.08)); color: var(--txt) !important; font-weight: 600; } .dcp-folder:last-child { border-bottom: none; } .dcp-folder:hover { color: var(--ac) !important; } .dcp-folder-name::before { content: "📁"; margin-inline-end: 8px; opacity: .7; } .dcp-folder-count { font-size: .85rem; font-weight: 700; color: var(--ac, #0b5fff); background: var(--chip-bg, rgba(11,95,255,.08)); border-radius: var(--r-f, 999px); padding: 2px 12px; white-space: nowrap; } .dcp-folder-count.is-zero { color: var(--txt3, #62779a); background: transparent; font-weight: 400; } /* ---- per-folder / per-pathway progress bars ------------------------------- Two-line layout: name + percent share the first line, the track is forced onto its own full-width line via flex-basis:100%. This is deliberate - a single-row grid (name | track | percent) let a long label (pathway titles run a full sentence) claim the whole row and squeeze the track to nothing or push the percent outside the card. Wrapping keeps every row the same width no matter how long the label is. `order` re-sequences the existing DOM (name, track, percent) without any markup change. */ .dcp-progress-list { display: flex; flex-direction: column; gap: 14px; } .dcp-progress-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 6px; } .dcp-progress-name { order: 1; flex: 1 1 auto; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a.dcp-progress-name { color: inherit; text-decoration: none; } /* Two shapes share this class: a linked name inside a plain, non-clickable row (dashboard's folder list - only the name itself is a link) and a plain-span name inside a row that's a whole-row link (قطب‌نمای مطالعه's pathway rows) - cover both without implying the coverage rows (plain
, never a link) are clickable. */ a.dcp-progress-name:hover, a.dcp-progress-row:hover .dcp-progress-name { color: var(--ac, #0b5fff); } /* Marks the single highest-coverage row (قطب‌نمای مطالعه's «پوشش هر پیلار») - a sibling of .dcp-progress-name, own flex item, so it can never get clipped by the name's ellipsis overflow the way an ::after on the name itself would. */ .dcp-progress-badge { order: 2; flex: none; font-size: .68rem; font-weight: 700; white-space: nowrap; color: var(--ac, #0b5fff); background: var(--chip-bg, rgba(11,95,255,.08)); border: 1px solid var(--chip-bd, rgba(11,95,255,.2)); border-radius: 999px; padding: 2px 9px; } .dcp-progress-val { order: 3; flex: none; font-weight: 800; color: var(--ac, #0b5fff); font-size: .85rem; font-variant-numeric: tabular-nums; } .dcp-progress-track { order: 4; flex: 0 0 100%; height: 7px; background: var(--surface3, #eaecf5); border-radius: 999px; overflow: hidden; } /* A soft accent gradient (not the flat brand blue) - the bar is the primary data in this list, so it earns the accent instead of staying a quiet gray line; a min-width keeps the rounded cap visible even at 1-2%. */ .dcp-progress-fill { height: 100%; min-width: 6px; border-radius: 999px; transition: width .4s; background: linear-gradient(90deg, color-mix(in srgb, var(--ac, #0b5fff) 55%, var(--surface, #fff)), var(--ac, #0b5fff)); } a.dcp-progress-row:hover { text-decoration: none; } /* ---- section variants (قطب‌نمای مطالعه) ----------------------------------- "ادامه در «X»" is the page's one recommendation - a soft accent wash marks it as the actionable card. "حوزه‌های دورمانده" gets a dashed border instead of a solid card - unread/uncharted territory, matching the compass theme. */ .dcp-dash-sec.is-spotlight { background: color-mix(in srgb, var(--ac, #0b5fff) 6%, transparent); border-color: color-mix(in srgb, var(--ac, #0b5fff) 22%, transparent); } .dcp-dash-sec.is-spotlight .dcp-dash-h2 { color: var(--pr, #022360); } .dcp-dash-sec.is-unexplored { background: transparent; box-shadow: none; border-style: dashed; border-color: color-mix(in srgb, var(--txt3, #62779a) 45%, transparent); } .dcp-pw-heading-row { display: flex; align-items: center; gap: 10px; } .dcp-pw-heading-row .dcp-pw-heading { margin: 0; } .dcp-compass-ico { flex: none; width: 28px; height: 28px; color: var(--ac, #0b5fff); } /* ---- score --------------------------------------------------------------- */ .dcp-score-wrap { display: flex; flex-direction: column; gap: 8px; } .dcp-score { display: flex; align-items: baseline; gap: 8px; } .dcp-score-n { font-size: 1.8rem; font-weight: 900; color: var(--ac, #0b5fff); } /* streak shields (سپر استریک) */ .dcp-freeze { display: flex; align-items: center; gap: 8px; } .dcp-freeze-icons { display: inline-flex; gap: 2px; } .dcp-freeze-ico { font-size: 1.15rem; line-height: 1; } .dcp-freeze-ico.is-empty { filter: grayscale(1); opacity: .3; } /* Same ink and weight as the rest of the card's text — the shield state lives in the icons, never in a lighter label. */ .dcp-freeze-label { color: var(--txt, #0a1a33); font-weight: 600; opacity: 1; } .dcp-freeze-hint { margin: 0; color: var(--txt2, #4a5f85); font-size: .8rem; line-height: 1.7; } /* Score breakdown: same muted voice as the shield hint, sits under the number. */ .dcp-score-parts { margin: 0; color: var(--txt2, #4a5f85); font-size: .8rem; line-height: 1.7; } /* ---- recent highlights (each removable) ---------------------------------- */ .dcp-recent-list { display: flex; flex-direction: column; } .dcp-recent-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--border, rgba(2,35,96,.08)); } .dcp-recent-row:last-child { border-bottom: none; } .dcp-recent-link { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--txt) !important; } .dcp-recent-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dcp-recent-del { flex: none; width: 26px; height: 26px; line-height: 22px; text-align: center; font-size: 1.2rem; border-radius: 50%; border: 1px solid var(--border, rgba(2,35,96,.12)); background: var(--surface, #fff); color: var(--txt2, #4a5f85); cursor: pointer; } .dcp-recent-del:hover { color: #c0392b; border-color: #c0392b; } .dcp-recent-collect { flex: none; width: 26px; height: 26px; line-height: 24px; text-align: center; font-size: 1rem; border-radius: 50%; border: 1px solid var(--border, rgba(2,35,96,.12)); background: var(--surface, #fff); cursor: pointer; } .dcp-recent-collect:hover { border-color: var(--ac, #0b5fff); } /* ---- collections (dashboard "کالکشن‌ها" block) ----------------------------- */ /* A horizontal strip of Pinterest-style board covers (own overflow-x, never the page body) - same .dcp-cl-cover boardCover() builds for the catalog. */ .dcp-cl-dash-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; } .dcp-cl-dash-board { flex: 0 0 96px; display: flex; flex-direction: column; gap: 4px; color: var(--txt, #0a1a33) !important; text-decoration: none; } .dcp-cl-dash-board .dcp-cl-cover { width: 96px; height: 96px; border-radius: var(--r-md, 14px); } .dcp-cl-dash-name { font-size: .8rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dcp-cl-dash-count { font-size: .74rem; color: var(--txt2, #4a5f85); } .dcp-recent-confirm { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; color: var(--txt2, #4a5f85); } /* ---- pathway (dashboard "مسیر یادگیری" block) ----------------------------- */ .dcp-pw-dash { display: flex; flex-direction: column; gap: 10px; } .dcp-pw-dash-title { font-weight: 700; color: var(--txt) !important; } .dcp-pw-dash-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .85rem; color: var(--txt2, #4a5f85); } .dcp-pw-alllink { color: var(--ac, #0b5fff) !important; font-weight: 600; white-space: nowrap; } /* A free user's teaser for a LIVE premium feature (Leitner review, pathways, collections) - same section slot the real block occupies for premium; the section's own hint already explains it, so this is just a lock chip. The whole card links to the feature's own page, which does the actual "این ویژگی ویژه‌ی پریمیوم است" gating. */ .dcp-locked-card { display: inline-block; text-decoration: none; } /* ---- «دستیار هوشمند» wizard (case-assistant.js) -------------------------- Still a narrowing multiple-choice wizard, not free-form chat - but now reads like an actual AI product: a spark mark on every assistant turn, a typing indicator while /assistant/next is in flight, and the case text + past answers kept visible as a recap trail above the live turn (previously each step wiped the screen, so the exchange looked amnesiac). */ .dcp-assist-intro { display: flex; flex-direction: column; gap: 12px; } .dcp-assist-avatar { flex: none; width: 38px; height: 38px; border-radius: var(--r-md, 14px); background: linear-gradient(135deg, color-mix(in srgb, var(--ac, #0b5fff) 80%, white), var(--pr, #022360)); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px color-mix(in srgb, var(--ac, #0b5fff) 35%, transparent); } .dcp-assist-avatar svg { width: 19px; height: 19px; fill: #fff; } .dcp-assist-avatar.is-sm { width: 28px; height: 28px; border-radius: var(--r-sm, 10px); } .dcp-assist-avatar.is-sm svg { width: 14px; height: 14px; } .dcp-assist-thread { display: flex; flex-direction: column; gap: 14px; } /* the clinician's own free-text case + past answers - quiet, no bubble of its own (this stays a wizard, not a two-party chat), indented to sit under the turn cards' avatar column. */ .dcp-assist-recap { display: flex; flex-direction: column; gap: 3px; padding-inline-end: 48px; } .dcp-assist-recap-label { font-size: .74rem; font-weight: 700; color: var(--txt3, #62779a); } .dcp-assist-recap-case { color: var(--txt); font-size: .92rem; background: var(--surface2, #f4f6fb); border-radius: var(--r-md, 14px); padding: 10px 14px; } .dcp-assist-recap-text { color: var(--txt2, #4a5f85); font-size: .87rem; line-height: 1.75; } .dcp-assist-recap-answer { display: inline-flex; align-self: flex-start; align-items: center; gap: 5px; font-size: .84rem; font-weight: 700; color: var(--ac, #0b5fff); background: var(--chip-bg, rgba(11,95,255,.08)); border: 1px solid var(--chip-bd, rgba(11,95,255,.2)); border-radius: var(--r-f, 999px); padding: 4px 12px; } /* the assistant's live turn - the one piece of chrome that actually reads "AI": avatar + a card with its corner nearest the avatar flattened, like a speech-bubble tail. Logical corner (not top-right) so it stays correct if the page is ever mirrored. */ .dcp-assist-turn { display: flex; gap: 12px; align-items: flex-start; } .dcp-assist-card { flex: 1 1 auto; min-width: 0; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-lg, 18px); border-start-start-radius: 6px; padding: 14px 16px; box-shadow: var(--card-sh); } .dcp-assist-q { font-weight: 700; font-size: .98rem; margin: 0; color: var(--txt); } .dcp-assist-thinking { display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; } .dcp-assist-thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--txt3, #62779a); animation: dcpAssistDot 1.1s ease-in-out infinite; } .dcp-assist-thinking span:nth-child(2) { animation-delay: .15s; } .dcp-assist-thinking span:nth-child(3) { animation-delay: .3s; } @keyframes dcpAssistDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } } /* quick-reply chips, directly under the AI card they answer */ .dcp-assist-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-inline-start: 50px; } .dcp-assist-opt { font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; padding: 8px 16px; border-radius: var(--r-f, 999px); border: 1.5px solid var(--chip-bd, rgba(11,95,255,.2)); background: var(--chip-bg, rgba(11,95,255,.08)); color: var(--ac, #0b5fff); transition: background var(--tr, .17s), color var(--tr, .17s), transform var(--tr, .17s); } .dcp-assist-opt:hover { background: var(--ac, #0b5fff); color: #fff; border-color: var(--ac, #0b5fff); } .dcp-assist-opt:active { transform: scale(.96); } .dcp-assist-more { font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; padding: 8px 14px; border-radius: var(--r-f, 999px); border: 1.5px dashed var(--border, rgba(2,35,96,.12)); background: transparent; color: var(--txt2, #4a5f85); } .dcp-assist-more:hover { border-color: var(--txt3, #62779a); color: var(--txt); } .dcp-assist-custom { display: flex; gap: 8px; margin-top: 10px; padding-inline-start: 50px; } .dcp-assist-custom input { flex: 1 1 auto; font: inherit; font-size: .88rem; border: 1px solid var(--border, rgba(2,35,96,.12)); background: var(--surface, #fff); color: var(--txt); border-radius: var(--r-f, 999px); padding: 9px 16px; } .dcp-assist-send { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--ac, #0b5fff); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; } .dcp-assist-send svg { width: 16px; height: 16px; fill: currentColor; transform: scaleX(-1); } /* composer - the case textarea, styled as a real chat input card */ .dcp-assist-composer { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-lg, 18px); box-shadow: var(--card-sh); padding: 6px 6px 6px 14px; display: flex; align-items: flex-end; gap: 10px; } .dcp-assist-composer textarea { flex: 1 1 auto; resize: vertical; min-height: 84px; font: inherit; font-size: .92rem; line-height: 1.8; border: 0; background: transparent; color: var(--txt); padding: 12px 8px; outline: none; } .dcp-assist-composer textarea::placeholder { color: var(--txt3, #62779a); } .dcp-assist-composer-send { flex: none; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 50%; border: 0; background: var(--ac, #0b5fff); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform var(--tr, .17s); } .dcp-assist-composer-send:hover { transform: scale(1.06); } .dcp-assist-composer-send svg { width: 17px; height: 17px; fill: currentColor; transform: scaleX(-1); } .dcp-assist-disclaimer { display: flex; align-items: center; gap: 6px; color: var(--txt3, #62779a); font-size: .78rem; margin-top: 4px; } .dcp-assist-result-lead { font-weight: 700; color: var(--txt); margin: 0 0 10px; } .dcp-assist-restart { font: inherit; font-weight: 700; font-size: .86rem; cursor: pointer; margin-top: 16px; padding: 8px 16px; border-radius: var(--r-f, 999px); border: 1px solid var(--border, rgba(2,35,96,.12)); background: transparent; color: var(--txt2, #4a5f85); } .dcp-assist-restart:hover { color: var(--ac, #0b5fff); border-color: var(--ac, #0b5fff); } /* ---- profile ------------------------------------------------------------- */ .dcp-field-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .dcp-field-row .dcp-input { flex: 1 1 180px; background: var(--surface, #fff); color: var(--txt); border: 1px solid var(--border, rgba(2,35,96,.12)); border-radius: 10px; padding: 10px 12px; font: inherit; } .dcp-inline-msg { color: var(--txt2, #4a5f85); font-size: .85rem; } .dcp-plan { display: inline-block; font: inherit; font-weight: 800; background: var(--chip-bg, rgba(11,95,255,.08)); color: var(--ac, #0b5fff); padding: 4px 14px; border-radius: 999px; border: 0; } .dcp-plan-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .dcp-plan.is-soon { cursor: pointer; background: var(--chip-bg-muted, rgba(2,35,96,.06)); color: var(--txt2, #4a5f85); opacity: .65; } .dcp-toggle-list { display: flex; flex-direction: column; gap: 12px; } /* Sub-label spelling out what a switch covers — sits tight under its own switch, not a list item in its own right. */ .dcp-toggle-note { margin-top: -7px; font-size: .85rem; line-height: 1.8; } .dcp-lock-ico { font-size: 1rem; line-height: 1; opacity: .7; } /* messenger connection (coming soon: options visible but disabled) */ .dcp-messenger { display: flex; flex-direction: column; gap: 10px; } .dcp-provider-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .dcp-provider-opt { font: inherit; font-weight: 700; background: var(--surface2, #f4f6fb); color: var(--txt); border: 1px solid var(--border, rgba(2,35,96,.12)); padding: 8px 20px; border-radius: 12px; cursor: not-allowed; opacity: .55; } .dcp-soon-badge { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: .8rem; background: var(--chip-bg-muted, rgba(2,35,96,.06)); color: var(--txt2, #4a5f85); padding: 4px 12px; border-radius: 999px; } .dcp-records { display: flex; gap: 20px; flex-wrap: wrap; } .dcp-records b { font-size: 1.4rem; display: block; } .dcp-records span { color: var(--txt2, #4a5f85); font-size: .85rem; } .dcp-cmp { display: flex; flex-direction: column; gap: 8px; } .dcp-cmp-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; } .dcp-cmp-arrow.up { color: #1a9d5a; } .dcp-cmp-arrow.down { color: #c0392b; } .dcp-phone { font-weight: 700; } .dcp-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } /* week strip: clear day cells with weekday letters + a filled dot on active days */ /* Force RTL so the week always reads شنبه (first) on the right, جمعه on the left, independent of any ambient direction. */ .dcp-week-strip { display: flex; gap: 8px; direction: rtl; } .dcp-week-cell { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; border: 1px solid var(--border, rgba(2,35,96,.1)); border-radius: var(--r-md, 14px); background: var(--surface, #fff); } .dcp-week-cell.is-today { outline: 2px solid var(--ac, #0b5fff); outline-offset: 1px; } .dcp-week-cell.is-future { opacity: .45; } .dcp-week-day { font-size: .95rem; font-weight: 800; } .dcp-week-date { font-size: .72rem; opacity: .8; } /* Completed day is marked by the streak flame, not a colour change. */ .dcp-week-flame { height: 1.15em; line-height: 1.15em; font-size: 1rem; } .dcp-btn { font: inherit; font-weight: 600; padding: 10px 16px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border, rgba(2,35,96,.12)); background: transparent; color: var(--txt); } .dcp-btn-primary { background: var(--ac, #0b5fff); color: #fff; border-color: transparent; } .dcp-btn-ghost { background: transparent; } /* ---- header overlay (dashboard / profile open from the person menu) ------- */ .dcp-overlay { position: fixed; inset: 0; z-index: 10050; display: flex; flex-direction: column; background: var(--bg, #f0f2f5); color: var(--txt); overflow: auto; } .dcp-overlay-bar { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border, rgba(2,35,96,.1)); background: color-mix(in srgb, var(--surface, #fff) 90%, transparent); backdrop-filter: blur(8px); z-index: 1; } .dcp-overlay-title { font-weight: 800; font-size: 1.05rem; } .dcp-overlay-close { background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--txt); padding: 4px 8px; } .dcp-overlay-body { max-width: 900px; width: 100%; margin: 0 auto; padding: 16px; box-sizing: border-box; } /* Assistant result verdict — the two-button "was this useful?" asked at the moment the answer lands. Deliberately quiet: a thin separator and muted buttons, so it reads as an aside to the result and never competes with the article links above it. */ .dcp-assist-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border, rgba(2,35,96,.12)); } .dcp-assist-verdict-q { font-size: .85rem; color: var(--txt2, #4a5f85); margin-inline-end: 2px; } .dcp-assist-verdict-btn { font: inherit; font-weight: 600; font-size: .82rem; cursor: pointer; padding: 6px 12px; border-radius: var(--r-f, 999px); border: 1.5px solid var(--border, rgba(2,35,96,.12)); background: transparent; color: var(--txt2, #4a5f85); } .dcp-assist-verdict-btn:hover { border-color: var(--txt3, #62779a); color: var(--txt); } .dcp-assist-verdict-done { font-size: .85rem; color: var(--txt2, #4a5f85); } /* Assistant "thinking" view — real site hashtags drifting past while the model works. The round can take 20-40s on the current gateway, and three dots for that long reads as stuck; these are the site's own tags, so the wait shows the actual work instead of a fake progress bar. Deliberately quiet: dimmed, fixed height so nothing jumps when a line swaps. */ .dcp-assist-scan-lbl { font-size: .8rem; color: var(--txt2, #4a5f85); margin-bottom: 6px; } .dcp-assist-scan { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; margin-bottom: 10px; } .dcp-assist-scan-t { font-size: .78rem; color: var(--txt3, #62779a); opacity: .55; border: 1px dashed var(--border, rgba(2,35,96,.12)); border-radius: var(--r-f, 999px); padding: 2px 9px; animation: dcp-scan-in .42s ease both; } @keyframes dcp-scan-in { from { opacity: 0; transform: translateY(3px); } to { opacity: .55; transform: none; } } @media (prefers-reduced-motion: reduce) { .dcp-assist-scan-t { animation: none; } } /* ---- shared highlight surfaces (hl-view.js) -------------------------------- The دفترچه (/plus/highlights.html) and a کالکشن board draw the SAME object — a saved highlight — so they share one card, one action pill, one editor and one skeleton. Anything prefixed .dcp-hlib- is that shared vocabulary, not the library page's private styling. */ /* Skeletons: a spinner says "wait", a skeleton says "this is what is coming". */ .dcp-skel-wrap { display: flex; flex-direction: column; gap: 12px; } .dcp-skel-card { background: var(--card-bg, #fff); border: 1px solid var(--card-border, rgba(2,35,96,.09)); border-radius: var(--r-lg, 18px); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .dcp-skel-line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--txt2, #4a5f85) 12%, transparent), color-mix(in srgb, var(--txt2, #4a5f85) 22%, transparent), color-mix(in srgb, var(--txt2, #4a5f85) 12%, transparent)); background-size: 200% 100%; animation: dcp-skel 1.4s ease-in-out infinite; } .dcp-skel-w70 { width: 70%; } .dcp-skel-w40 { width: 40%; } @keyframes dcp-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .dcp-skel-line { animation: none; } } /* The filter bar sticks: on a library of hundreds you must be able to change the filter without scrolling back to the top to find it. */ .dcp-hlib-controls { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 16px; position: sticky; top: 56px; z-index: 5; padding: 10px 0 8px; background: color-mix(in srgb, var(--bg, #f0f2f5) 92%, transparent); backdrop-filter: blur(8px); } .dcp-hlib-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dcp-hlib-row-tools { gap: 8px; } .dcp-hlib-controls .dcp-input, .dcp-cl-pickfilter { background: var(--surface, #fff); color: var(--txt); border: 1px solid var(--border, rgba(2,35,96,.12)); border-radius: 10px; padding: 10px 12px; font: inherit; } .dcp-hlib-search { flex: 1 1 220px; min-width: 0; } .dcp-hlib-select { flex: 0 1 160px; } .dcp-hlib-count { margin: 0; margin-inline-end: auto; color: var(--txt2, #4a5f85); font-size: .85rem; } .dcp-hlib-count b { color: var(--txt, #0a1a33); } .dcp-hlib-chips { display: flex; gap: 6px; flex-wrap: wrap; } .dcp-hlib-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border, rgba(2,35,96,.12)); background: var(--surface, #fff); color: var(--txt2, #4a5f85); border-radius: var(--r-f, 999px); padding: 4px 12px; font: inherit; font-size: .82rem; cursor: pointer; } .dcp-hlib-chip.is-on { border-color: var(--ac, #0b5fff); color: var(--ac, #0b5fff); font-weight: 700; } .dcp-hlib-chip[disabled] { opacity: .45; cursor: default; } .dcp-hlib-chipn { font-size: .74rem; opacity: .75; } /* Colour is how a reader files things while reading, so it filters as the swatches themselves — the same five the workbench toolbar offers. */ .dcp-hlib-sw { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border, rgba(2,35,96,.18)) inset; } .dcp-hlib-sw.is-on { border-color: var(--ac, #0b5fff); transform: scale(1.08); } /* Jump list: with dozens of articles, "which article was that in" needs an index, not scrolling. */ .dcp-hlib-jump { display: flex; flex-direction: column; max-height: 46vh; overflow-y: auto; background: var(--card-bg, #fff); border: 1px solid var(--card-border, rgba(2,35,96,.09)); border-radius: var(--r-lg, 18px); padding: 8px; margin-bottom: 14px; box-shadow: var(--card-sh, 0 1px 3px rgba(2,35,96,.07)); } .dcp-hlib-jumpitem { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: transparent; border: none; border-radius: 10px; cursor: pointer; padding: 8px 10px; font: inherit; font-size: .88rem; color: var(--txt, #0a1a33); text-align: start; } .dcp-hlib-jumpitem:hover { background: var(--dcp-chip-bg, rgba(11,95,255,.07)); } .dcp-hlib-jumpname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dcp-hlib-jumpn { flex: none; color: var(--txt2, #4a5f85); font-size: .78rem; } .dcp-hlib-list { display: flex; flex-direction: column; gap: 14px; } .dcp-hlib-sentinel { height: 1px; } .dcp-hlib-group { background: var(--card-bg, #fff); border: 1px solid var(--card-border, rgba(2,35,96,.09)); border-radius: var(--r-lg, 18px); padding: 14px 16px; box-shadow: var(--card-sh, 0 1px 3px rgba(2,35,96,.07)); scroll-margin-top: 140px; /* the sticky filter bar must not cover a jump target */ } .dcp-hlib-ghead { display: flex; align-items: flex-start; gap: 10px; } .dcp-hlib-gmeta { flex: 1 1 auto; min-width: 0; } .dcp-hlib-gtitle { font-weight: 800; color: var(--txt) !important; } .dcp-hlib-gsub { display: flex; gap: 10px; flex-wrap: wrap; font-size: .78rem; color: var(--txt2, #4a5f85); margin-top: 2px; } .dcp-hlib-folder { text-transform: uppercase; letter-spacing: .04em; } .dcp-hlib-toggle { flex: none; width: 26px; height: 26px; line-height: 22px; text-align: center; border-radius: 50%; border: 1px solid var(--border, rgba(2,35,96,.12)); background: var(--surface, #fff); color: var(--txt2, #4a5f85); cursor: pointer; } .dcp-hlib-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } /* In the flat (timeline) view the cards ARE the list, so they carry the card chrome themselves. */ .dcp-hlib-list > .dcp-hlib-card { background: var(--card-bg, #fff); border-color: var(--card-border, rgba(2,35,96,.09)); box-shadow: var(--card-sh, 0 1px 3px rgba(2,35,96,.07)); padding: 14px 16px; } .dcp-hlib-card { border: 1px solid var(--border, rgba(2,35,96,.08)); border-radius: var(--r-md, 14px); padding: 10px 12px; background: color-mix(in srgb, var(--surface, #fff) 60%, transparent); } .dcp-hlib-src { display: flex; gap: 8px; align-items: baseline; font-size: .78rem; color: var(--txt2, #4a5f85) !important; margin-bottom: 8px; } /* The mark keeps the user's own colour (mark.dcp-hl in plus.css); here it must wrap over as many lines as the text needs instead of behaving like a chip. */ .dcp-hlib-body mark.dcp-hl { cursor: default; line-height: 2; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .dcp-hlib-note { margin-top: 8px; padding-inline-start: 10px; border-inline-start: 3px solid var(--ac, #0b5fff); color: var(--txt2, #4a5f85); font-size: .88rem; line-height: 1.9; } .dcp-hlib-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .dcp-hlib-act { border: 1px solid var(--border, rgba(2,35,96,.12)); background: var(--surface, #fff); color: var(--txt2, #4a5f85) !important; border-radius: var(--r-f, 999px); padding: 3px 11px; font: inherit; font-size: .78rem; cursor: pointer; text-decoration: none; white-space: nowrap; } .dcp-hlib-act:hover { border-color: var(--ac, #0b5fff); color: var(--ac, #0b5fff) !important; } .dcp-hlib-del:hover { border-color: #c0392b; color: #c0392b !important; } .dcp-hlib-card .dcp-recent-confirm, .dcp-cl-pin .dcp-recent-confirm { margin-top: 10px; font-size: .85rem; } /* Inline editor: note + label + colour, one save. Editing a note where you are reading it is the whole point — never a trip back to the article. */ .dcp-hlib-editor { margin-top: 10px; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--border, rgba(2,35,96,.18)); } .dcp-hlib-ta { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; line-height: 1.9; background: var(--surface, #fff); color: var(--txt); border: 1px solid var(--border, rgba(2,35,96,.14)); border-radius: 10px; padding: 8px 10px; } .dcp-hlib-erow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .dcp-hlib-esave { margin-top: 2px; } .dcp-hlib-msg { font-size: .8rem; color: #c0392b; } .dcp-hlib-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; } .dcp-hlib-empty-ico { font-size: 2.2rem; opacity: .5; } /* Board pins carry the same card content as a library card (note, label, actions), so the two only differ in layout, never in what they show. */ .dcp-cl-pin-src { display: flex; gap: 8px; align-items: baseline; color: var(--txt2, #4a5f85) !important; min-width: 0; } .dcp-cl-pin-src span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dcp-cl-pin-actions { padding: 0 12px 12px; margin-top: 8px; } .dcp-cl-pin .dcp-hlib-note { margin: 0 12px; } .dcp-cl-pickfilter { width: 100%; box-sizing: border-box; margin-bottom: 8px; } /* Dashboard entry point into the library (dashboard.js recentBlock). */ .dcp-recent-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 10px; font-size: .85rem; color: var(--txt2, #4a5f85); } /* `hidden` must win over the display values set above. The UA sheet's `[hidden] { display: none }` loses to any author rule that sets `display`, so every one of these toggles (the jump panel, a collapsed article group, a toolbar that only appears once there is something to filter) silently did nothing until this rule existed. */ .dcp-hlib-jump[hidden], .dcp-hlib-cards[hidden], .dcp-hlib-controls[hidden], .dcp-hlib-row[hidden], .dcp-hlib-chips[hidden], .dcp-hlib-act[hidden], .dcp-hlib-actions[hidden], .dcp-skel-wrap[hidden] { display: none !important; } /* ---- a board's own identity (emoji / colour / description) ----------------- A shelf of identical generated covers is a shelf you cannot scan. All three are optional: a board with none of them renders exactly as it did before. */ .dcp-cl-cover-emoji { display: flex; align-items: center; justify-content: center; background: var(--dcp-chip-bg, rgba(11,95,255,.07)); } .dcp-cl-cover-emo { font-size: 2.4rem; line-height: 1; } .dcp-cl-board-desc { margin: 0 0 2px; font-size: .78rem; color: var(--txt2, #4a5f85); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dcp-cl-title-emo { margin-inline-end: 8px; } .dcp-cl-detail-desc { margin: 4px 0 0; color: var(--txt2, #4a5f85); font-size: .9rem; line-height: 1.8; } .dcp-cl-editbox { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px; border-radius: var(--r-md, 14px); border: 1px solid var(--border, rgba(2,35,96,.14)); background: color-mix(in srgb, var(--surface, #fff) 70%, transparent); } .dcp-cl-editbox .dcp-input, .dcp-cl-editbox .dcp-hlib-ta { background: var(--surface, #fff); color: var(--txt); border: 1px solid var(--border, rgba(2,35,96,.14)); border-radius: 10px; padding: 9px 12px; font: inherit; } .dcp-cl-editbox .dcp-hlib-erow > .dcp-input:not(.dcp-cl-emoji-input) { flex: 1 1 180px; } .dcp-cl-emoji-input { flex: 0 0 68px; text-align: center; font-size: 1.2rem; } /* Arrange mode: the board becomes one column (in a masonry, "up" and "down" mean nothing) and every pin trades its actions for ↑/↓ + its position. */ .dcp-cl-pin-grid.is-arranging { column-count: 1 !important; } .dcp-cl-arrange { justify-content: flex-start; } .dcp-cl-arrange-pos { font-size: .78rem; color: var(--txt2, #4a5f85); } .dcp-hlib-act.is-on { border-color: var(--ac, #0b5fff); color: var(--ac, #0b5fff) !important; font-weight: 700; } .dcp-hlib-act[disabled] { opacity: .4; cursor: default; } /* Page heading + its sibling-surface link on one line (the دفترچه ↔ کالکشن‌ها pair; neither is in the site nav, so each is the other's way in). */ .dcp-hlib-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* --------------------------------------------------------------------------- Pricing (/plus/pricing.html) A plan is a