/* ── Plain link-preview card ──────────────────────────────────────── */

.container {
  position: relative;
}

.card {
  display: flex;
  flex-direction: column;
  width: 320px;
  border-radius: 6px;
  border: 2px solid var(--color-border, #d1d9e0);
  background: var(--color-background, #ffffff);
  box-sizing: border-box;
  overflow: hidden;
  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
}

:global([data-sb-canvas-theme^='dark']) .card {
  border-color: var(--color-border, #3d444d);
}

/* Hide own border when parent widget slot is selected (avoid double focus ring) */
:global([data-widget-selected]) .card {
  border-color: transparent;
}

.ogImage {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  display: block;
}

.body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
}

.title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-foreground, #1f2328);
  cursor: text;
  word-break: break-word;
}

.titleInput {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-foreground, #1f2328);
  width: 100%;
}

.description {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-foreground-muted, #656d76);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.url {
  margin: 0;
  font-size: 12px;
  color: var(--color-foreground-muted, #656d76);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  display: block;
}

.url:hover {
  text-decoration: underline;
  color: var(--color-foreground-accent, #0969da);
}

/* ── GitHub issue / discussion card ──────────────────────────────── */

.issueCard {
  display: flex;
  flex-direction: column;
  width: 580px;
  min-height: 300px;
  border-radius: var(--radius, 12px);
  background: var(--color-background, #ffffff);
  box-sizing: border-box;
  overflow: hidden;
  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
}

.issueCardCollapsed {
  max-height: 800px;
}

.typeBar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-foreground-muted, #656d76);
  background: var(--color-background-muted, #f6f8fa);
  border-bottom: 1px solid var(--color-border-muted, #d8dee4);
  white-space: nowrap;
  user-select: none;
}

.issueBodyScrollable {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: auto;
}

.issueHeader {
  padding: 24px 24px 0;
}

.issueTitle {
  margin: 0 0 4px;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-foreground, #1f2328);
}

.issueTitleLink {
  color: var(--color-foreground, #1f2328) !important;
  text-decoration: none !important;
}

.issueTitleLink:hover {
  text-decoration: underline !important;
  color: var(--color-foreground, #1f2328) !important;
}

.issueNumber {
  font-size: 32px;
  font-weight: 400;
  color: var(--color-foreground-muted, #656d76);
}

.issueContext {
  margin: 0;
  font-size: 12px;
  color: var(--color-foreground-muted, #656d76);
}

.issueByline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--color-border-muted, #d8dee4);
}

.issueBylineLeft {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
}

.authorLink {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  color: var(--color-foreground, #1f2328) !important;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.authorLink:hover {
  text-decoration: underline !important;
  color: var(--color-foreground, #1f2328) !important;
}

.bylineText {
  font-size: 13px;
  color: var(--color-foreground-muted, #656d76);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bylineText strong {
  font-weight: 600;
  color: var(--color-foreground, #1f2328);
}

/* ── Issue body (rendered markdown) ──────────────────────────────── */

.issueBody {
  padding: 16px 24px 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-foreground, #1f2328);
}

.issueBody :global(*) {
  pointer-events: none;
}

.issueBody a {
  color: var(--color-foreground-accent, #0969da);
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
}

.issueBody a:hover {
  text-decoration: underline;
}

/* @mention pills — blue background + text like GitHub */
.issueBody a[data-mention] {
  background: var(--color-background-accent-muted, #ddf4ff);
  color: var(--color-foreground-accent, #0969da);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
}

.issueBody a[data-mention]:hover {
  background: var(--color-background-accent-emphasis, #0969da);
  color: var(--color-foreground-on-emphasis, #ffffff);
  text-decoration: none;
}

.issueBody img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--color-border-muted, #d8dee4);
  margin: 8px 0;
  display: block;
  pointer-events: auto;
}

.issueBody video {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--color-border-muted, #d8dee4);
  margin: 8px 0;
  display: block;
  pointer-events: auto;
  background: var(--color-background-muted, #f6f8fa);
}
.issueBody h1 {
  font-size: 20px;
  font-weight: 700;
  margin: 16px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border-muted, #d8dee4);
  line-height: 1.3;
}

.issueBody h1:first-child {
  margin-top: 0;
}

.issueBody h2 {
  font-size: 17px;
  font-weight: 600;
  margin: 14px 0 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--color-border-muted, #d8dee4);
  line-height: 1.3;
}

.issueBody h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 12px 0 4px;
  line-height: 1.3;
}

.issueBody p {
  margin: 0 0 12px;
}

.issueBody code {
  background: var(--color-background-neutral-muted, #afb8c133);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.issueBody ul {
  margin: 0 0 12px;
  padding-left: 24px;
  list-style-type: disc;
}

.issueBody ol {
  margin: 0 0 12px;
  padding-left: 24px;
  list-style-type: decimal;
}

.issueBody li {
  margin: 0 0 4px;
  display: list-item;
}

.issueBody li > ul,
.issueBody li > ol {
  margin-top: 4px;
  margin-bottom: 4px;
}

/* Accent-color checkboxes */
.issueBody input[type="checkbox"] {
  margin-right: 6px;
  pointer-events: none;
  accent-color: var(--color-foreground-accent, #0969da);
}

.issueBody li:has(input[type="checkbox"]) {
  list-style: none;
  margin-left: -24px;
}

/* GFM: Strikethrough */
.issueBody del {
  text-decoration: line-through;
  color: var(--color-foreground-muted, #656d76);
}

/* GFM: Tables */
.issueBody table {
  border-collapse: collapse;
  margin: 12px 0;
  width: 100%;
  font-size: 13px;
}

.issueBody th,
.issueBody td {
  border: 1px solid var(--color-border, #d0d7de);
  padding: 6px 12px;
  text-align: left;
}

.issueBody th {
  background: var(--color-background-muted, #f6f8fa);
  font-weight: 600;
}

/* Code blocks */
.issueBody pre {
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid var(--color-border-muted, #d8dee4);
  overflow-x: auto;
  margin: 12px 0;
  background: var(--color-background-neutral-muted, #afb8c133);
  line-height: 1.4;
}

.issueBody pre code {
  background: none;
  padding: 0;
  font-size: 12px;
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
  display: block;
}

/* Blockquotes */
.issueBody blockquote {
  border-left: 4px solid var(--color-border, #d0d7de);
  margin: 12px 0;
  padding: 4px 16px;
  color: var(--color-foreground-muted, #656d76);
}

/* Horizontal rules */
.issueBody hr {
  border: none;
  border-top: 1px solid var(--color-border, #d0d7de);
  margin: 16px 0;
}

/* Details/summary — interactive collapsible sections */
.issueBody details {
  border: 1px solid var(--color-border-muted, #d8dee4);
  border-radius: 6px;
  margin: 12px 0;
  padding: 0;
}

.issueBody summary {
  display: list-item;
  cursor: pointer;
  pointer-events: auto;
  font-weight: 600;
  padding: 8px 12px;
  list-style: disclosure-closed inside;
  user-select: none;
}

.issueBody details[open] > summary {
  list-style-type: disclosure-open;
  border-bottom: 1px solid var(--color-border-muted, #d8dee4);
  margin-bottom: 0;
}

.issueBody details > :not(summary) {
  padding: 0 12px;
}

.error {
  margin: 0;
  padding: 0 24px 12px;
  font-size: 12px;
  color: var(--color-foreground-danger, #cf222e);
}

/* ── Expanded issue view in modal ─────────────────────────────────── */

.expandedIssue {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-background, #ffffff);
  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
}

.expandedIssueHeader {
  padding: 24px 40px 16px;
  border-bottom: 1px solid var(--color-border-muted, #d8dee4);
}

.expandedIssueTitle {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-foreground, #1f2328);
}

.expandedIssueTitle a {
  color: inherit;
  text-decoration: none;
}

.expandedIssueTitle a:hover {
  text-decoration: underline;
}

.expandedIssueNumber {
  color: var(--color-foreground-muted, #656d76);
}

.expandedByline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.expandedAuthor {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--color-foreground, #1f2328);
  font-weight: 600;
}

.expandedAuthor:hover {
  text-decoration: underline;
}

.expandedBylineText {
  color: var(--color-foreground-muted, #656d76);
}

.expandedIssueBody {
  flex: 1;
  overflow: auto;
  padding: 24px 40px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-foreground, #1f2328);
  max-width: 800px;
}

.expandedIssueBody * { pointer-events: auto; }
.expandedIssueBody a { color: var(--color-foreground-accent, #0969da); text-decoration: none; }
.expandedIssueBody a:hover { text-decoration: underline; }
.expandedIssueBody a[data-mention] { background: var(--color-background-accent-muted, #ddf4ff); color: var(--color-foreground-accent, #0969da); padding: 1px 6px; border-radius: 4px; font-weight: 600; text-decoration: none; }
.expandedIssueBody a[data-mention]:hover { background: var(--color-background-accent-emphasis, #0969da); color: var(--color-foreground-on-emphasis, #ffffff); text-decoration: none; }
.expandedIssueBody img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; display: block; }
.expandedIssueBody video { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; display: block; }
.expandedIssueBody h1 { font-size: 20px; font-weight: 700; margin: 16px 0 8px; border-bottom: 1px solid var(--color-border-muted, #d8dee4); padding-bottom: 4px; }
.expandedIssueBody h2 { font-size: 17px; font-weight: 600; margin: 14px 0 6px; }
.expandedIssueBody h3 { font-size: 15px; font-weight: 600; margin: 12px 0 4px; }
.expandedIssueBody p { margin: 0 0 12px; }
.expandedIssueBody code { background: var(--color-background-neutral-muted, #afb8c133); padding: 2px 5px; border-radius: 4px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, monospace; }
.expandedIssueBody pre { padding: 12px 16px; border-radius: 6px; border: 1px solid var(--color-border-muted, #d8dee4); overflow-x: auto; margin: 12px 0; background: var(--color-background-neutral-muted, #afb8c133); }
.expandedIssueBody pre code { background: none; padding: 0; }
.expandedIssueBody ul { margin: 0 0 12px; padding-left: 24px; list-style: disc; }
.expandedIssueBody ol { margin: 0 0 12px; padding-left: 24px; list-style: decimal; }
.expandedIssueBody li { margin: 0 0 4px; display: list-item; }
.expandedIssueBody blockquote { border-left: 4px solid var(--color-border, #d0d7de); margin: 12px 0; padding: 4px 16px; color: var(--color-foreground-muted, #656d76); }
.expandedIssueBody details { border: 1px solid var(--color-border-muted, #d8dee4); border-radius: 6px; margin: 12px 0; padding: 0; }
.expandedIssueBody summary { display: list-item; cursor: pointer; font-weight: 600; padding: 8px 12px; list-style: disclosure-closed inside; user-select: none; }
.expandedIssueBody details[open] > summary { list-style-type: disclosure-open; border-bottom: 1px solid var(--color-border-muted, #d8dee4); margin-bottom: 0; }
.expandedIssueBody details > :not(summary) { padding: 0 12px; }

/* ── Expanded plain link view ─────────────────────────────────────── */

.expandedLink {
  padding: 32px 40px;
  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
}

.expandedOgImage {
  max-width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 16px;
  display: block;
}

.expandedTitle {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
  color: var(--color-foreground, #1f2328);
}

.expandedDescription {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-foreground-muted, #656d76);
}

.expandedUrl {
  font-size: 14px;
  color: var(--color-foreground-accent, #0969da);
  text-decoration: none;
}

.expandedUrl:hover {
  text-decoration: underline;
}

/* ── PR metadata (state badge + branch refs + diff stats) ──────────── */

.prMeta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--color-foreground-muted, #656d76);
  min-width: 0;
}

.prStateBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 9px;
  border-radius: 2em;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-foreground-on-emphasis, #ffffff);
  white-space: nowrap;
}

.prStateOpen { background: var(--color-background-open-emphasis, #1f883d); }
.prStateMerged { background: var(--color-background-done-emphasis, #8250df); }
.prStateClosed { background: var(--color-background-closed-emphasis, #cf222e); }
.prStateDraft {
  background: var(--color-background-neutral-emphasis, #59636e);
}

.prBranchRef {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-background-muted, #f6f8fa);
  color: var(--color-foreground, #1f2328);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  max-width: 240px;
  overflow: hidden;
}

.prBranchName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 96px;
}

.prBranchArrow {
  color: var(--color-foreground-muted, #656d76);
  font-family: -apple-system, system-ui, sans-serif;
  flex-shrink: 0;
}

.prDiffStat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
}

.prDiffAdd { color: var(--color-foreground-success, #1a7f37); }
.prDiffDel { color: var(--color-foreground-danger, #cf222e); }
