.thread { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 4px 16px 28px; overflow: auto; }
.col { width: 100%; max-width: 780px; margin: 0 auto; }

.msg { display: flex; gap: 14px; margin: 26px 0; }
.msg.enter { animation: msg-in 0.45s var(--ease); }
@keyframes msg-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Kullanıcı mesajı */
.msg.user { justify-content: flex-end; }
.user-col { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: min(84%, 620px); }
.bubble { padding: 10px 16px; border-radius: 20px 20px 6px 20px; background: var(--bubble); overflow-wrap: anywhere; white-space: pre-wrap; }
.user-media { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.u-media { position: relative; width: 156px; height: 118px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--hover); }
.u-media img { width: 100%; height: 100%; object-fit: cover; }
.u-media.playable { cursor: pointer; }
.u-player { width: 100%; height: 100%; background: #000; object-fit: contain; }
.u-badge { position: absolute; bottom: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(14, 13, 24, 0.74); color: #fff; font-size: 12px; }
/* Video kartı (yazma alanında ve sohbette) */
.vcard { position: relative; display: flex; gap: 12px; width: min(100%, 360px); padding: 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-align: left; }
.vcard.is-compact { width: 320px; max-width: 100%; padding-right: 52px; background: var(--hover); }
.vcard-media { position: relative; display: grid; flex: none; place-items: center; width: 112px; height: 72px; padding: 0; overflow: hidden; border: 0; border-radius: calc(var(--r-md) - 4px); background: var(--hover); color: inherit; }
button.vcard-media { cursor: pointer; }
button.vcard-media:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vcard-media img { width: 100%; height: 100%; object-fit: cover; }
.vcard .u-player { width: 112px; height: 72px; border-radius: calc(var(--r-md) - 4px); }
.vcard-media .u-badge { bottom: 4px; left: 4px; }
.vcard-info { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.vcard-name { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.vcard-status, .vcard-note { color: var(--ink-2); font-size: 13px; }
.vcard-transcript summary { display: flex; align-items: center; min-height: 44px; color: var(--accent-ink); font-size: 14px; cursor: pointer; }
.vcard-transcript summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vcard-transcript ol { max-height: 220px; margin: 0; padding: 0 4px 0 0; overflow: auto; font-size: 13px; line-height: 1.5; list-style: none; white-space: pre-wrap; overflow-wrap: anywhere; }
.vcard-x { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.vcard-x:hover { background: var(--line); color: var(--ink); }
.vcard-x:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.user-skill { padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 600; }
.u-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: 14px; }
.u-file span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Asistan mesajı */
.avatar { display: grid; flex: none; place-items: center; width: 32px; height: 32px; }
.msg-main { flex: 1; min-width: 0; }
.body { overflow-wrap: anywhere; }
.body > :first-child { margin-top: 0; }
.body p { margin: 0 0 12px; }
.body h3, .body h4, .body h5, .body h6 { margin: 22px 0 8px; line-height: 1.3; letter-spacing: -0.01em; }
.body h3 { font-size: 1.3rem; }
.body h4 { font-size: 1.15rem; }
.body h5, .body h6 { font-size: 1.04rem; }
.body ul, .body ol { margin: 0 0 12px; padding-left: 24px; }
.body li { margin: 4px 0; }
.body li::marker { color: var(--accent); }
.body a { color: var(--accent-ink); text-underline-offset: 3px; }
.body blockquote { margin: 0 0 12px; padding: 2px 0 2px 16px; border-left: 3px solid var(--accent); color: var(--ink-2); }
.body hr { margin: 18px 0; border: 0; border-top: 1px solid var(--line); }
.body code { font-family: var(--mono); font-size: 0.9em; }
.body :not(pre) > code { padding: 2px 6px; border-radius: 6px; background: var(--code); }
.code { margin: 0 0 14px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--code); }
.code-head { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 0 6px 0 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 12.5px; }
.code-copy { min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font-size: 12.5px; }
.code-copy:hover { background: var(--hover); color: var(--ink); }
.code pre { margin: 0; padding: 14px; overflow: auto; font-size: 13.5px; line-height: 1.55; }
.table-wrap { margin: 0 0 14px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.body table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.body th, .body td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.body th { background: var(--hover); font-weight: 600; }
.body tr:last-child td { border-bottom: 0; }

.body.streaming > p:last-child::after,
.body.streaming > ul:last-child > li:last-child::after,
.body.streaming > ol:last-child > li:last-child::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1s ease-in-out infinite;
}

/* Düşünme bloğu */
.think { margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.think-head { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: var(--r-md); color: var(--ink-2); font-size: 14px; list-style: none; cursor: pointer; }
.think-head::-webkit-details-marker { display: none; }
.think-head:hover { color: var(--ink); }
.think-ico { display: inline-grid; color: var(--accent); }
.think.is-live .think-ico { animation: spin 2.2s linear infinite; }
.think.is-live .think-label {
  background: linear-gradient(90deg, var(--ink-2) 25%, var(--accent) 50%, var(--ink-2) 75%) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 1.6s linear infinite;
}
.think-chevron { display: inline-grid; margin-left: auto; transition: transform 0.25s var(--ease); }
.think[open] .think-chevron { transform: rotate(180deg); }
.think-body { max-height: 260px; padding: 10px 14px 12px; overflow: auto; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14.5px; white-space: pre-wrap; }

.status { display: flex; align-items: center; gap: 10px; min-height: 32px; color: var(--ink-2); font-size: 15px; }
.pulse { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--danger); }
.route-badge { margin: 2px 0 0; font-size: 12px; color: var(--ink-3, var(--ink-2)); }
.actions { display: flex; gap: 2px; margin: 4px 0 0 -8px; opacity: 0.8; transition: opacity 0.2s; }
.msg:hover .actions, .actions:focus-within { opacity: 1; }

/* Karşılama */
.welcome { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(700px, 100%); margin: auto; padding: 24px 0 40px; text-align: center; }
.welcome h1 { margin: 14px 0 0; font-family: var(--font-display); font-size: clamp(36px, 6vw, 56px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.welcome p { margin: 0; color: var(--ink-2); font-size: 18px; }
.suggest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 28px; }
.suggest-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
  transition: border-color 0.18s, transform 0.25s var(--ease), box-shadow 0.25s;
}
.suggest-card svg { flex: none; color: var(--accent); }
.suggest-card span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* uzun öğrenilmiş sorular iki satırda kesilir */
.suggest-card:hover { border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-2px); }
/* "backwards": içerik varsayılan olarak görünür kalır, animasyon çalışmazsa bile kaybolmaz. */
.reveal { animation: reveal 0.75s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 80ms + 60ms); }

@media (max-width: 720px) {
  .suggest { grid-template-columns: minmax(0, 1fr); }
  .msg { gap: 10px; }
  .u-media { width: 128px; height: 96px; }
}

/* Modelin seçenekli sorusu (ask_user): tıklanabilir seçenekler. */
.ask-block { display: grid; gap: 8px; max-width: 620px; margin: 4px 0 12px; }
.ask-options { display: grid; gap: 8px; }
.ask-option {
  display: grid; gap: 2px; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  color: var(--ink); font-size: 15px; line-height: 1.4; text-align: left; cursor: pointer;
  transition: border-color 0.18s, background-color 0.18s;
}
.ask-option:hover:not(:disabled), .ask-option[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.ask-option:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
.ask-option:disabled { cursor: default; opacity: 0.6; }
.ask-label { font-weight: 600; }
.ask-desc { color: var(--ink-2); font-size: 14px; }
.ask-send { justify-self: end; min-height: 44px; }
.ask-hint { margin: 0; color: var(--ink-2); font-size: 14px; }

/* Salt okunur görev raporu */
.report-view { display: grid; gap: var(--space-5); padding: var(--space-6) 0 var(--space-10); }
.report-head { display: grid; gap: var(--space-1); }
.report-eyebrow { color: var(--accent-ink); font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
.report-head h1 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.2; }
.report-meta { color: var(--ink-2); font-size: var(--text-sm); }
.report-sources { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--sunken); }
.report-sources h2 { margin-bottom: var(--space-2); font-size: var(--text-md); }
.report-sources ol { display: grid; gap: var(--space-1); padding-left: 20px; font-size: var(--text-sm); }
.report-sources a { color: var(--accent-ink); text-underline-offset: 3px; }
.report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.report-continue { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-weight: 600; }
.report-continue:hover { background: var(--accent-ink); }
.report-continue:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.report-hint { color: var(--ink-2); font-size: var(--text-sm); }