/* PM Copilot — Message gallery (/dev/messages, staging/dev only). Neutral chat and issue-comment styling:
   not Rocket.Chat or GitLab branding. Semantic tokens only (styles.css). */
.page-gallery { max-width: 1400px; }
.mg-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; margin-bottom: 20px; }
.mg-title { display: flex; align-items: center; gap: 8px; }
.mg-sub { margin: 4px 0 0; max-width: 64ch; }
.mg-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-sm); }

.mg { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 16px; align-items: start; }
.mg-list { padding: 4px 0 8px; }
.mg-lh { margin: 0; padding: 10px 14px 4px; font-size: var(--fs-xs); font-weight: 600; }
.mg-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 44px; padding: 8px 14px; border: 0; background: none; text-align: start; color: var(--text); transition: background var(--fast) var(--ease); }
.mg-item:hover { background: var(--surface-2); }
.mg-item[aria-current="true"] { background: var(--accent-tint); }
.mg-item[aria-current="true"] .mg-it { color: var(--accent-text); }
.mg-n { flex: none; min-width: 22px; color: var(--text-muted); font-size: var(--fs-sm); line-height: 20px; display: inline-flex; flex-direction: column; }
.mg-var { font-size: 11px; color: var(--text-muted); }
.mg-it { display: block; font-weight: 500; line-height: 20px; }
.mg-im { display: block; font-size: var(--fs-sm); }
.mg-off { color: var(--text-muted); }
.mg-none { margin: 0; padding: 16px; }

.mg-detail { min-width: 0; }
.mg-dt { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.mg-mob { display: none; }
.mg-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.mg-pane { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; min-width: 0; }
.mg-ov { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.mg-gll { font-weight: 400; }
.mg-to { margin: 0; padding: 10px 16px 0; font-size: var(--fs-sm); }
.mg-ph { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.mg-hash { font-weight: 600; }
.mg-budget { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border: 1px solid var(--border); border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }
.mg-log { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--border); font-size: var(--fs-xs); }
.mg-deliv { list-style: none; margin: 0; padding: 10px 16px; display: grid; gap: 4px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.mg-deliv li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mg-deliv li.off { color: var(--text-muted); }

.mg-feed { display: grid; gap: 14px; padding: 12px 16px 16px; }
.mg-day { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-xs); }
.mg-day::before, .mg-day::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.mg-msg { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.mg-msg > .avatar { margin-top: 1px; }
.mg-mb { display: grid; gap: 6px; min-width: 0; }
.mg-mh { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-sm); }
.mg-mh b { font-weight: 600; }
.mg-p { margin: 0; overflow-wrap: anywhere; }
.mg-h { font-weight: 600; }
.mg-gp { white-space: nowrap; } /* a goal and its status pill never split across lines */
.mg-note { font-size: var(--fs-sm); }
.mg-ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 2px; }
.mg-ul li:has(> svg) { list-style: none; margin-inline-start: -18px; display: flex; gap: 6px; align-items: baseline; }
.mg-ul li > svg { transform: translateY(3px); }
.mg-ul li.mg-li-plain { list-style: none; margin-inline-start: -18px; padding-inline-start: 22px; } /* aligns with icon rows, no icon */
.mg-ref { font-size: 12px; padding: 0 4px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); direction: ltr; unicode-bidi: isolate; }
.mg-code { font-size: 12px; padding: 0 4px; border-radius: var(--r-sm); background: var(--surface-2); direction: ltr; unicode-bidi: isolate; }
.mg-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.mg-btns .btn { white-space: normal; min-height: 28px; height: auto; padding-block: 3px; }
.mg-ans { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: 0; padding: 4px 10px; border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-sm); color: var(--text); }
.mg-ans.muted { color: var(--text-muted); }
.mg-links { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.mg-free { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mg-in { flex: 1; min-width: 160px; height: 32px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); }
textarea.mg-in { width: 100%; height: auto; padding: 8px 10px; resize: vertical; line-height: var(--lh); }
.mg-in::placeholder { color: var(--text-muted); }
.mg-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mg-items li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); }
.mg-items .mg-btns { margin: 0; }
.mg-fold { display: grid; gap: 6px; }

/* Action card inside a DM (UIKit-style block) and its thread. */
.mg-card { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.mg-card-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.mg-card .tag-self { margin: 0; }
.mg-quote { margin: 0; }
.mg-sum { font-weight: 500; }
.mg-card .acard-imp, .mg-thread .acard-imp { margin: 0; }
/* Impact in a DM card or thread: one goal per line, each phrase whole (never "▼ ۹ روز" split from its goal). con-15-ok */
.mg-card .acard-imp > span, .mg-thread .acard-imp > span { display: grid; gap: 2px; }
.mg-card .acard-imp > span > [aria-hidden="true"], .mg-thread .acard-imp > span > [aria-hidden="true"] { display: none; }
.mg-reply { margin-inline-start: 30px; }
.mg-thread { display: grid; gap: 10px; margin-inline-start: 30px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.mg-thread .mg-ans { background: var(--surface); }
.mg-th { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-xs); }
.mg-sys { display: flex; align-items: center; gap: 8px; margin: 12px 16px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-sm); }
.mg-feed .mg-sys { margin: 0; }

/* GitLab: issue / epic header, labels, comments. */
.gl-rec + .gl-rec { border-top: 1px solid var(--border); }
.gl-h { display: grid; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.gl-ht { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.gl-ht b { font-size: 15px; font-weight: 600; }
.gl-labels { display: flex; flex-wrap: wrap; gap: 4px; }
.gl-state { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border-strong); font-size: var(--fs-xs); font-weight: 600; color: var(--text); }
.gl-desc { display: grid; gap: 4px; padding-top: 6px; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.gl-hist { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); }
.gl-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.gl-tbl th, .gl-tbl td { padding: 4px 8px; border-bottom: 1px solid var(--border); text-align: start; vertical-align: top; }
.gl-tbl th:nth-child(n+3), .gl-tbl td:nth-child(n+3) { width: 1%; white-space: nowrap; } /* weight, assignee: narrow */
.gl-tbl th { background: var(--surface-2); font-weight: 600; font-size: var(--fs-xs); color: var(--text-muted); }
.gl-label { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); font-size: 11px; color: var(--text-muted); direction: ltr; }
.gl-thread { display: grid; gap: 10px; padding: 12px 16px; }
.gl-c { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.gl-ch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.gl-cb { display: grid; gap: 6px; padding: 10px 12px; }
.gl-sys { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-sm); }
.gl-reply { display: grid; gap: 8px; justify-items: start; padding: 0 16px 16px; }
.mg-diff { padding: 0; list-style: none; text-align: left; }
.mg-diff li { font-size: 11px; overflow-wrap: anywhere; }
/* GitLab comments follow the org comment language, not the UI language. */
.gl-h[lang="fa"], .gl-thread[lang="fa"] { font-family: Vazirmatn, Tahoma, system-ui, -apple-system, "Segoe UI", sans-serif; }
.gl-h[lang="en"], .gl-thread[lang="en"] { font-family: Inter, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }

@media (max-width: 1279px) { .mg-panes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1023px) { .mg { grid-template-columns: 232px minmax(0, 1fr); } }
@media (max-width: 767px) {
  .mg { grid-template-columns: minmax(0, 1fr); }
  .mg.is-open .mg-list, .mg:not(.is-open) .mg-detail { display: none; }
  .mg-mob { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
  .mg-mob .seg { height: 36px; } .mg-mob .seg button { min-width: 96px; }
  .mg.tab-rc .mg-gl, .mg.tab-gl .mg-rc { display: none; }
  .mg-thread, .mg-reply { margin-inline-start: 0; }
  .mg-head { align-items: flex-start; }
  .mg-btns .btn, .mg-mob .btn { min-height: 44px; }
}