.chat-artifact { min-width: 0; max-width: 100%; border: 1px solid #d7e1ea; border-radius: 14px; background: #fff; margin-block: 14px; overflow: hidden; }
.chat-artifact-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; background: #eef5fb; }
.chat-artifact-heading button { margin-left: auto; padding: 6px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; flex-shrink: 0; }
.chat-artifact-heading button svg { width: 20px; height: 20px; }
.chat-generated-files { display: grid; grid-template-columns:minmax(0,1fr); justify-items:start; gap: 12px; margin-block: 14px; }
.chat-generated-file { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 12px; text-align: left; border: 1px solid #d7e1ea; border-radius: 14px; background: #fff; }
.chat-generated-file > span:last-child { display: grid; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.chat-generated-image { display: block; width: min(100%,560px); min-width: 0; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: transparent; text-align:left; }
.chat-generated-image img { display: block; width: 100%; height: auto; max-height: var(--chat-generated-image-max-height, 50vh); object-fit: contain; object-position:left top; border-radius: inherit; }
.chat-generated-document { width:min(100%,560px); min-width: 0; }
.chat-recovered-files { min-width:0; margin-block:16px; }
.chat-recovered-files>h3 { margin:0; }
.chat-recovered-files:empty { display:none; }
.chat-generated-file.has-thumbnail { display: grid; justify-items:start; }
.chat-generated-file.has-thumbnail .chat-generated-file-symbol { display: none; }
.chat-document-thumbnail { width: auto; max-width:100%; max-height: var(--chat-generated-image-max-height, 50vh); object-fit: contain; object-position:left top; background: #f3f6f9; border-radius: 8px; }
.chat-artifact-writing { padding: 16px; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.chat-artifact pre { margin: 0; padding: 16px; overflow-x: auto; max-width: 100%; background: #18283d; color: #eef5ff; }
.chat-answer-prose { min-width: 0; max-width: min(100%,76ch); overflow-wrap: anywhere; line-height:1.8; }
.chat-answer-prose p{margin-block:0 1em}
.chat-answer-prose :is(h2,h3,h4,h5,h6){margin-block:1.2em .5em;line-height:1.5}
.chat-answer-prose :is(ul,ol){margin-block:.5em 1em;padding-inline-start:1.6em}
.chat-answer-prose li+li{margin-top:.35em}
.chat-answer-prose li :is(ul,ol){margin-block:.35em}
.chat-answer-prose blockquote{margin:1em 0;padding:4px 14px;border-inline-start:3px solid var(--workspace-border,#d7e1ea);color:var(--workspace-muted,#52667a)}
.chat-answer-prose > :first-child { margin-top: 0; }
.chat-answer-prose > :last-child { margin-bottom: 0; }
.chat-progress-message { margin-block: 8px; color: #52667a; }
/* 待っている間：書きかけの文（開き直したとき・通信が切れたあと）と、点点点の横の「いましていること」 */
.chat-partial-answer { margin-bottom: 8px; }
.chat-wait-line { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.chat-wait-line .typing-wait { flex: none; }
.chat-wait-line .chat-wait-text { margin-block: 0; min-width: 0; overflow-wrap: anywhere; }
html[data-ui-design=dark] .chat-wait-line .chat-wait-text { color: #a9bac4; }
.chat-artifact .code-token-comment{color:#adc1b0}
.chat-artifact .code-token-keyword,.chat-artifact .code-token-tag{color:#cdb9ff}
.chat-artifact .code-token-string{color:#a7e3bb}
.chat-artifact .code-token-number{color:#ffcb94}
.chat-artifact .code-token-attribute{color:#8fd9ff}
.chat-artifact .code-token-punctuation{color:#eef5ff}
.chat-generated-document>[data-chat-file-download]{margin-top:8px}

/* HTML previews are inert and isolated; opening the card runs the full viewer. */
.chat-generated-document.is-html { width: min(100%, 360px); }
.chat-html-thumbnail { display: block; position: relative; width: 100%; height: 180px; overflow: hidden; border-radius: 8px; background: #fff; pointer-events: none; }
.chat-html-thumbnail[hidden] { display: none; }
.chat-html-thumbnail iframe { display: block; width: 200%; height: 200%; border: 0; transform: scale(.5); transform-origin: top left; }

/* AIの回答の中の [[ノートの題名]]：押すと個人noteのそのノートが開く */
.chat-note-link { display: inline; margin: 0; padding: 0 2px; border: 0; border-radius: 4px; background: #e8f3f6; color: #1f6f8b; cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.chat-note-link:hover { background: #d6ecf2; }
.chat-note-link:focus-visible { outline: 2px solid #278c77; outline-offset: 1px; }
html[data-ui-design=dark] .chat-note-link { background: #20363e; color: #7cc4dc; }
/* 2026-11-04：AIチャットのボタンは角を100%丸くするが、生成した画像は丸めすぎない */
.ai-chat-screen .chat-generated-image, .ai-chat-screen .chat-generated-image img { border-radius: 14px !important; }
/* 作ったファイル：画像以外は小さなカード。押すと右のパネルでプレビュー */
.chat-generated-files.is-compact{gap:8px}
.chat-file-card{display:flex;align-items:center;gap:4px;width:min(100%,460px);padding:6px 6px 6px 8px;border:1px solid #e3e5e8;border-radius:18px;background:#fff;box-shadow:0 1px 2px #0f172a0a;flex-wrap:wrap}
.chat-file-card:hover{border-color:#cfd4da}
.ai-chat-screen .chat-file-card .chat-file-card-open{display:flex;flex:1;align-items:center;gap:12px;min-width:0;min-height:0;padding:6px 8px;border:0;border-radius:12px!important;background:transparent;box-shadow:none;color:#172033;text-align:left;cursor:pointer}
.chat-file-card-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:#f2f4f6;color:#3b4148}
.chat-file-card-text{display:flex;flex-direction:column;min-width:0}
.chat-file-card-text b,.chat-file-card-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-file-card-text small{color:#7b838c}
.ai-chat-screen .chat-file-card .chat-file-card-download,.ai-chat-screen .chat-preview-head .chat-preview-action,.ai-chat-screen .chat-preview-head .chat-preview-back{display:grid;place-items:center;flex:none;width:36px;height:36px;min-height:0;padding:0;border:0;border-radius:50%!important;background:transparent;box-shadow:none;color:#3b4148;cursor:pointer}
.ai-chat-screen .chat-file-card .chat-file-card-download:hover,.ai-chat-screen .chat-preview-head .chat-preview-action:hover,.ai-chat-screen .chat-preview-head .chat-preview-back:hover{background:#eef1f4}
.chat-file-card-error{flex-basis:100%;margin:0 8px;color:#b4412c}
.chat-file-card-error:empty{display:none}
/* 2026-11-04（2回目）：AIチャットの中はモノクロ。ノートへのリンクとファイルのカードも灰色系にする（ダークモードは黒・濃い灰） */
.ai-chat-screen .chat-note-link { background: #ececec; color: #0d0d0d; text-decoration-color: #0d0d0d55; }
.ai-chat-screen .chat-note-link:hover { background: #e0e0e0; }
html[data-ui-design=dark] .ai-chat-screen .chat-note-link { background: #333; color: #ececec; text-decoration-color: #ececec55; }
html[data-ui-design=dark] .ai-chat-screen .chat-note-link:hover { background: #3d3d3d; }
.ai-chat-screen .chat-file-card { border-color: #e5e5e5; }
.ai-chat-screen .chat-file-card-icon { background: #f2f2f2; color: #0d0d0d; }
html[data-ui-design=dark] .ai-chat-screen .chat-file-card { background: #2a2a2a; border-color: #3a3a3a; }
html[data-ui-design=dark] .ai-chat-screen .chat-file-card .chat-file-card-open, html[data-ui-design=dark] .ai-chat-screen .chat-file-card .chat-file-card-download { color: #ececec; }
html[data-ui-design=dark] .ai-chat-screen .chat-file-card-icon { background: #333; color: #ececec; }
html[data-ui-design=dark] .ai-chat-screen .chat-file-card-text small { color: #a3a3a3; }
html[data-ui-design=dark] .ai-chat-screen .chat-file-card .chat-file-card-download:hover { background: #333; }
/* 2026-11-04 林の指定：回答の数式（chat-math.js・KaTeX）。1行の大きな数式は中央に置き、長いときは横にスクロールする。描く前と描けなかったときは元の文字のまま */
.chat-math[data-math-display=true]{display:block;margin:.7em 0;overflow-x:auto;overflow-y:hidden;text-align:center;padding:2px 0}
.chat-math:not([data-math-drawn=true]){white-space:pre-wrap}
.chat-math .katex-display{margin:0}