/* ChatGPT-likt utseende (ljust tema). Färger/radier/typsnitt hämtade från
   ChatGPT:s egna design-tokens i referens-DOM:en. Avsiktligt vår egen, rena
   stilmall (inte ChatGPT:s hashade CSS) så den är lätt att underhålla. */

:root {
  --text-primary: #0d0d0d;
  --text-secondary: #5d5d5d;
  --text-tertiary: #8f8f8f;
  --user-msg-bg: #f4f4f4;
  --surface-page: #ffffff;
  --border-light: #0000000d;
  --border-default: #0000001a;
  --border-medium: #00000026;
  --link: #0b57d0;
  --code-bg: #0d0d0d;
  --code-header-bg: #2f2f2f;
  --code-text: #f3f3f3;
  --inline-code-bg: #0000000d;
  --radius-lg: .5rem;
  --radius-xl: .75rem;
  --radius-2xl: 1rem;
  --radius-bubble: 1.5rem;
  --font-sans: "Söhne", ui-sans-serif, -apple-system, "system-ui", "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }   /* ingen global bakgrund här — sidlayouten (styles.css) äger body */

.thread {
  font-family: var(--font-sans);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  width: 100%;
  padding: 28px 24px 40px;
  margin: 0 auto;
  overflow-wrap: break-word;   /* bryt långa obrutna tokens/URL:er istället för att svämma */
}

/* ---- turns ---- */
.turn { display: flex; flex-direction: column; margin-bottom: 46px; }
.turn:last-child { margin-bottom: 0; }
.turn.user { align-items: flex-end; }
.turn.assistant { align-items: stretch; }

/* ---- user message ---- */
.user .bubble {
  background: var(--user-msg-bg);
  color: var(--text-primary);
  border-radius: var(--radius-bubble);
  padding: 10px 20px;
  max-width: 75%;
  word-wrap: break-word;
}
.user .bubble > *:first-child { margin-top: 0; }
.user .bubble > *:last-child { margin-bottom: 0; }
.user .bubble p { margin: 0; }
.user .bubble p + p { margin-top: .6em; }
/* platshållarbubblor (bara i byggarens preview, aldrig i export) */
.bubble.bubble-ph { color: #9b958a; font-style: italic; }
.assistant .md .md-ph { color: #9b958a; font-style: italic; margin: 0; }

/* user attachments sit above the bubble, right-aligned */
.user .attachments { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-bottom: 8px; width: 75%; }

/* ---- assistant message ---- */
.assistant .md { max-width: 100%; }
.assistant .md > *:first-child { margin-top: 0; }
.assistant .md > *:last-child { margin-bottom: 0; }

/* typography */
.md p { margin: 1em 0; }
.md h1, .md h2, .md h3, .md h4 { font-weight: 600; line-height: 1.3; margin: 1.4em 0 .6em; }
.md h1 { font-size: 1.625em; }
.md h2 { font-size: 1.375em; }
.md h3 { font-size: 1.125em; }
.md h4 { font-size: 1em; }
.md strong { font-weight: 600; }
.md em { font-style: italic; }
.md a { color: var(--link); text-decoration: none; }
.md a:hover { text-decoration: underline; }

/* inline källcitat-piller (ChatGPT-stil) */
.md a.cite {
  display: inline-flex; align-items: center; gap: 5px;
  height: 21px; padding: 0 10px 0 6px; margin: 0 2px;
  background: var(--user-msg-bg); border-radius: var(--radius-xl);
  font-size: 10px; font-weight: 500; color: var(--text-secondary);
  text-decoration: none; vertical-align: middle; max-width: 210px;
}
.md a.cite:hover { text-decoration: none; }
.md a.cite .cite-fav { width: 13px; height: 13px; border-radius: 999px; flex: none; }
.md a.cite .cite-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* dokument-citat (hänvisning till bifogad fil) */
.md a.cite.cite-file { padding: 0 11px 0 5px; }
.md a.cite .cite-doc { width: 16px; height: 16px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; }
.md a.cite .cite-doc svg { width: 100%; height: 100%; display: block; }
/* hr (markdown "---"): ChatGPT strösslar avdelare i svaren och de blev störiga linjer i sliderna —
   göms helt (gäller både previewen och exporten eftersom chat.css inlinas i export-renderingen) */
.md hr { display: none; }

/* lists */
.md ul, .md ol { margin: 1em 0; padding-left: 1.6em; }
.md li { margin: .4em 0; padding-left: .2em; }
.md li::marker { color: var(--text-primary); }
.md ul { list-style: disc; }
.md ul ul { list-style: circle; }
.md ol { list-style: decimal; }
.md li > ul, .md li > ol { margin: .4em 0; }

/* inline code */
.md :not(pre) > code {
  font-family: var(--font-mono);
  font-size: .875em;
  background: var(--inline-code-bg);
  padding: .2em .4em;
  border-radius: var(--radius-lg);
}

/* blockquote */
.md blockquote {
  margin: 1em 0;
  padding: .2em 0 .2em 1em;
  border-left: 3px solid var(--border-medium);
  color: var(--text-secondary);
}
.md blockquote p { margin: .4em 0; }

/* tables */
.md .table-wrap { margin: 1.2em 0; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-2xl); }
.md table { border-collapse: collapse; width: 100%; font-size: .95em; }
.md th, .md td { text-align: left; padding: 8px 14px; border: 1px solid var(--border-default);
  max-width: 14rem; overflow-wrap: break-word; }   /* cappa kolumnbredd så ingen kolumn tar för mycket; bryt långa filnamn */
.md td code, .md th code { overflow-wrap: anywhere; }
.md th:first-child, .md td:first-child { border-left: none; }
.md th:last-child, .md td:last-child { border-right: none; }
.md thead th { background: #f9f9f9; font-weight: 600; border-top: none; }
.md tbody tr:last-child td { border-bottom: none; }

/* code blocks */
.md pre { margin: 1.2em 0; }
.code-block { border-radius: var(--radius-2xl); overflow: hidden; background: var(--code-bg); }
.code-block .code-head {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--code-header-bg);
  color: #c9c9c9; font-size: 12px; padding: 8px 16px;
  font-family: var(--font-sans);
}
.code-block .code-head .copy { display: flex; align-items: center; gap: 5px; opacity: .9; }
.code-block pre { margin: 0; }
.code-block code {
  display: block; padding: 16px; overflow-x: auto;
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.55;
  color: var(--code-text); white-space: pre;
}

/* ---- file chips (attachments) ---- */
.file-chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  padding: 8px 12px 8px 8px;
  min-width: 0; max-width: 240px;
}
.file-chip .ficon {
  width: 34px; height: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.file-chip .ficon svg { width: 100%; height: 100%; display: block; }
.file-chip .fmeta { display: flex; flex-direction: column; min-width: 0; }
.file-chip .fname { font-size: 13px; font-weight: 500; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-chip .ftype { font-size: 12px; color: var(--text-secondary); }
.files-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; width: 100%; }

/* ---- image attachments (prompt) — klipps till fasta fyrkanter (object-cover) som i ChatGPT,
   så avlånga bilder inte tar full höjd; oavsett antal bilder ---- */
.img-grid { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 75%; }
.img-grid img { width: 150px; height: 150px; flex: none; object-fit: cover; object-position: center;
  border-radius: var(--radius-2xl); border: 1px solid var(--border-light); display: block; }

/* assistant images (generated / inline) */
.assistant .gen-images { display: flex; flex-wrap: wrap; gap: 8px; margin: 1em 0; }
.assistant .gen-images img { max-width: 100%; border-radius: var(--radius-2xl); border: 1px solid var(--border-light); }