/* QX Epic のLiquid Glass。Creativeの既定デザイン（liquid_glass_ios）と同じ配色・質感で、Epicの全画面の面・操作・ダイアログをそろえる。
   各画面のCSS（epic.css など）の後に読み込み、色と形だけを上書きする。配置の変更は各画面のCSSに置く。 */
.epic-workspace {
  --epic-ink: #0f172a;
  --epic-muted: #475569;
  --epic-faint: #64748b;
  --epic-blue: #007aff;
  --epic-pink: #ff2d55;
  --epic-line: rgba(15, 23, 42, .08);
  --epic-glass: rgba(255, 255, 255, .62);
  --epic-glass-strong: rgba(255, 255, 255, .86);
  --epic-glass-border: rgba(255, 255, 255, .78);
  --epic-glass-blur: blur(22px) saturate(160%);
  --epic-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .84), 0 18px 46px rgba(0, 122, 255, .10);
  --epic-control-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 18px rgba(0, 122, 255, .10);
  --epic-radius: 22px;
  --epic-radius-sm: 14px;
  min-height: 100dvh;
  background:
    linear-gradient(140deg, rgba(0, 122, 255, .16), transparent 38%),
    linear-gradient(235deg, rgba(255, 45, 85, .14), transparent 44%),
    linear-gradient(180deg, #f8fbff 0%, #edf6ff 100%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

/* ガラスの面。本文・カード・フォームの台紙をすべて同じ質感にする。
   中に共通通知（position: fixed）が入りうるので、これらの面にはbackdrop-filterを付けない（付けると通知が面の中に閉じ込められる）。 */
.epic-workspace :is(.epic-transcript, .epic-reader, .epic-empty, .epic-notice, .epic-product-card, .epic-document-card, .epic-timeline-post,
  .epic-import-zone, .epic-create-workspace .epic-paste, .epic-term-add, .epic-term-list, .epic-resolution-answer, .epic-menu-used-row, .epic-player),
.epic-workspace .epic-output-cards .epic-product-card,
.epic-workspace .epic-resolution-entry:not(.epic-resolution-answer .epic-resolution-entry, .epic-resolution-sidebar .epic-resolution-entry) {
  background: var(--epic-glass);
  border: 1px solid var(--epic-glass-border);
  border-radius: var(--epic-radius);
  box-shadow: var(--epic-glass-shadow);
}
.epic-workspace .epic-product-card.has-results { border-color: rgba(0, 122, 255, .28); }
.epic-workspace .epic-product-card.has-results > .epic-product-create { background: rgba(0, 122, 255, .05); }
.epic-workspace .epic-product-results { border-top-color: var(--epic-line); }
.epic-workspace .epic-transcript { overflow: hidden; }
.epic-workspace .epic-resolution-dismiss { z-index: 1; border-radius: 999px; }
.epic-workspace .epic-error { border-radius: var(--epic-radius-sm); border-color: rgba(255, 45, 85, .28); background: rgba(255, 241, 244, .86); color: #b4123a; }

/* 見出し */
.epic-workspace h1 { letter-spacing: -.01em; }
.epic-workspace .epic-chapter { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: var(--epic-glass-blur); backdrop-filter: var(--epic-glass-blur); }
.epic-workspace .epic-chapter::before, .epic-workspace .epic-chapter::after { background: rgba(15, 23, 42, .12); }

/* 画面の切り替え（ホーム・深掘り・リサーチ・プロダクト）はアプリのセグメントにする。QXビルドは右端の丸いボタン。 */
.epic-workspace .epic-tabs { gap: 8px; margin: 0 0 20px; padding: 0; border: 0; background: transparent; justify-content: space-between; min-height: 0; }
.epic-workspace .epic-tab-group {
  display: flex;
  gap: 2px;
  min-width: 0;
  padding: 4px;
  border: 1px solid var(--epic-glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  box-shadow: var(--epic-glass-shadow);
  -webkit-backdrop-filter: var(--epic-glass-blur);
  backdrop-filter: var(--epic-glass-blur);
  overflow-x: auto;
  scrollbar-width: none;
}
.epic-workspace .epic-tab-group::-webkit-scrollbar { display: none; }
.epic-workspace .epic-tabs .epic-tab { padding: 7px 18px; border: 0; border-radius: 999px; color: var(--epic-muted); font-size: 15px; font-weight: 550; line-height: 1.5; transition: background-color .15s ease, color .15s ease; }
.epic-workspace .epic-tabs .epic-tab:hover { color: var(--epic-ink); background: rgba(255, 255, 255, .6); }
.epic-workspace .epic-tabs .epic-tab[aria-current="page"] { color: var(--epic-blue); background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 16px rgba(0, 122, 255, .12); }
.epic-workspace .epic-tabs > .epic-build {
  width: 44px;
  min-width: 44px;
  height: 44px;
  margin: 0;
  border: 1px solid var(--epic-glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  box-shadow: var(--epic-glass-shadow);
  -webkit-backdrop-filter: var(--epic-glass-blur);
  backdrop-filter: var(--epic-glass-blur);
}
.epic-workspace .epic-tabs > .epic-build:hover { background: #fff; color: var(--epic-blue); }

/* ボタン・リンク。白い面にアクセントの文字で、濃い塗りは使わない（Creativeと同じ）。 */
.epic-workspace .epic-button,
.epic-dialog .epic-button {
  border: 1px solid rgba(0, 122, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: var(--epic-blue);
  font-weight: 600;
  box-shadow: var(--epic-control-shadow);
  transition: background-color .15s ease, border-color .15s ease;
}
.epic-workspace .epic-button:hover,
.epic-dialog .epic-button:hover { background: #fff; border-color: rgba(0, 122, 255, .4); }
.epic-workspace .epic-icon-button,
.epic-dialog .epic-icon-button { border-radius: 999px; }
.epic-workspace .epic-icon-button:hover,
.epic-dialog .epic-icon-button:hover { background: rgba(0, 122, 255, .08); color: var(--epic-blue); }
.epic-workspace .epic-text-link,
.epic-dialog .epic-text-link { color: var(--epic-blue); text-decoration: none; font-weight: 550; }
.epic-workspace .epic-variant-label,
.epic-dialog .epic-variant-label { border-radius: 999px; padding-inline: 8px; }

/* 入力欄。背景は白のまま、角と枠だけをそろえる。フォーカスで枠を足さない。 */
.epic-workspace .epic-input,
.epic-dialog .epic-input,
.epic-workspace .epic-rich-text {
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: var(--epic-radius-sm);
  background: #fff;
}
.epic-workspace .epic-input:focus,
.epic-dialog .epic-input:focus { outline: none; box-shadow: none; border-color: rgba(15, 23, 42, .12); }

/* 右下の「AIに聞く」 */
.epic-workspace .epic-ask-button {
  border: 1.5px solid #7dd3fc;
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .84), 0 8px 24px rgba(0, 122, 255, .24), 0 2px 6px rgba(0, 122, 255, .12);
  -webkit-backdrop-filter: var(--epic-glass-blur);
  backdrop-filter: var(--epic-glass-blur);
  font-weight: 600;
}

/* ダイアログはすりガラスの一枚。 */
.epic-dialog {
  border: 1px solid var(--epic-glass-border, rgba(255, 255, 255, .78));
  border-radius: 24px;
  background: rgba(255, 255, 255, .96);
  color: #0f172a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 30px 80px rgba(15, 23, 42, .18);
}
/* ダイアログ自体にはbackdrop-filterを付けない。付けると中の共通通知（position: fixed）がダイアログの中に閉じ込められる。 */
.epic-dialog::backdrop { background: rgba(15, 23, 42, .32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.epic-dialog .epic-dialog-head, .epic-dialog .epic-dialog-foot, .epic-dialog .epic-chat-compose { border-color: rgba(15, 23, 42, .08); }
.epic-dialog .epic-dialog-head h2 { letter-spacing: -.01em; }
.epic-chat-user { background: rgba(0, 122, 255, .1); }

/* アイテム内の目次・マーカー */
.epic-workspace .epic-detail-sidebar { background: rgba(255, 255, 255, .55); }
.epic-workspace .epic-resolution-sidebar .epic-resolution-refresh button { border-radius: 999px; background: rgba(255, 255, 255, .8); }
@media (min-width: 1024px) {
  .epic-workspace .epic-item-navigation .epic-detail-sidebar { border-right-color: var(--epic-glass-border); }
}
@media (max-width: 1023.98px) {
  .epic-workspace .epic-detail-sidebar { background: #fff; border-right-color: var(--epic-glass-border); border-radius: 0 24px 24px 0; }
}

/* タイムライン */
.epic-workspace .epic-timeline-post { padding: 20px 22px; }
.epic-workspace .epic-timeline-avatar { background: linear-gradient(135deg, rgba(0, 122, 255, .18), rgba(255, 45, 85, .16)); }

/* 成果物のページの日付 */
.epic-workspace .epic-document-dates { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; margin: 28px 0 0; padding: 0; border: 0; color: var(--epic-faint); font-size: 12px; }

/* 成果物の独立したページ */
.epic-publication .epic-reader { margin-top: 8px; }
.epic-publication .epic-document-heading { align-items: flex-start; margin-bottom: 26px; }
.epic-publication .epic-document-heading h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; margin: 0; font-size: 26px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .epic-publication .epic-document-heading h1 { font-size: 22px; }
}

@media (max-width: 640px) {
  .epic-workspace { --epic-radius: 18px; }
  .epic-workspace .epic-tabs .epic-tab { padding: 7px 12px; font-size: 14px; }
  .epic-dialog { border-radius: 20px; }
}

/* 成果物を開いたときの操作（コピー・編集・投稿・閉じる）。狭い画面ではタイトルの上の行にまとめ、タイトルと本文の間に挟まないようにする。 */
@media (max-width: 640px) {
  .epic-document-preview .epic-dialog-head { flex-wrap: wrap; gap: 4px; padding: 10px 12px 14px 20px; }
  .epic-document-preview .epic-preview-actions { order: -1; width: 100%; justify-content: flex-end; gap: 0; margin: 0 -4px 0 0; }
  .epic-document-preview .epic-dialog-head h2 { flex: 1 1 100%; }
  .epic-reader > .epic-document-heading { flex-direction: column-reverse; align-items: stretch; gap: 4px; }
  .epic-reader > .epic-document-heading .epic-document-tools { justify-content: flex-end; margin-right: -8px; }
}

/* スマホでは4つの切り替えを1行に収める。 */
@media (max-width: 520px) {
  .epic-workspace .epic-tabs { gap: 6px; }
  .epic-workspace .epic-tab-group { flex: 1 1 auto; }
  .epic-workspace .epic-tabs .epic-tab { flex: 1 1 auto; padding: 7px 2px; font-size: 14px; text-align: center; }
  .epic-workspace .epic-tabs > .epic-build { width: 40px; min-width: 40px; height: 40px; }
}
@media (max-width: 360px) {
  .epic-workspace .epic-tabs .epic-tab { font-size: 13px; }
}

/* 目次・マーカーの切り替えも、本文側の切り替えと同じ段・同じ形にする。 */
.epic-workspace .epic-detail-sidebar .epic-sidebar-switcher { align-items: center; border-bottom: 0; }
.epic-workspace .epic-detail-sidebar .epic-sidebar-tabs {
  flex: 1;
  align-items: stretch;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--epic-glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  box-shadow: var(--epic-glass-shadow);
}
.epic-workspace .epic-detail-sidebar .epic-sidebar-tabs > button { height: 34px; min-height: 34px; padding: 0 6px; border: 0; border-radius: 999px; font-size: 13px; font-weight: 550; color: var(--epic-muted); }
.epic-workspace .epic-detail-sidebar .epic-sidebar-tabs > button[aria-selected="true"] { color: var(--epic-blue); background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 16px rgba(0, 122, 255, .12); }
.epic-workspace .epic-outline-generate button[type="submit"] { border: 1px solid rgba(0, 122, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .8); color: var(--epic-blue); font-weight: 600; box-shadow: var(--epic-control-shadow); }
.epic-workspace .epic-outline-generate button[type="submit"]:hover { background: #fff; color: var(--epic-blue); }
@media (min-width: 1024px) {
  .epic-workspace .epic-item-main > .epic-tabs { min-height: 54px; margin: 0 -24px 14px; padding-inline: 24px; }
  .epic-workspace .epic-item-navigation .epic-sidebar-switcher { height: 54px; min-height: 54px; padding-inline: 12px; }
}

/* 編集・設定の画面も、入力をガラスの台紙にまとめる。 */
.epic-workspace .epic-form-page > form.epic-form,
.epic-workspace .epic-settings-history {
  padding: 28px;
  background: var(--epic-glass);
  border: 1px solid var(--epic-glass-border);
  border-radius: var(--epic-radius);
  box-shadow: var(--epic-glass-shadow);
}
.epic-workspace .epic-settings-history h2 { margin-top: 0; }
.epic-workspace .epic-danger-zone { border-top: 0; }

/* 成果物を開いた横のシートは読むための面なので、ほぼ白にする。 */
.epic-dialog.epic-document-preview { background: rgba(255, 255, 255, .97); }

@media (max-width: 640px) {
  .epic-workspace .epic-form-page > form.epic-form,
  .epic-workspace .epic-settings-history { padding: 20px 16px; }
}

/* 「深掘りを始める」は大きな面のボタンなので、丸いボタンにせず元の高さを保つ。 */
.epic-workspace .epic-resolution-next { margin-top: 0; padding-top: 0; }
.epic-workspace .epic-resolution-history + .epic-resolution-next { margin-top: 24px; }
.epic-workspace .epic-resolution-next .epic-resolution-generate {
  min-height: 112px;
  border: 1px solid var(--epic-glass-border);
  border-radius: var(--epic-radius);
  background: var(--epic-glass);
  box-shadow: none;
  font-weight: 600;
}
.epic-workspace .epic-resolution-next .epic-resolution-generate:hover { background: rgba(255, 255, 255, .86); }

/* 目次を開くボタンは本文の白い面の中、左上に置く。 */
.epic-workspace .epic-transcript > .epic-toolbar { margin: 0; padding: 10px 12px 0; }
.epic-workspace .epic-home-grid > .epic-transcript { background: #fff; }
.epic-workspace .epic-home-grid > .epic-transcript .epic-chapter { background: #fff; }
.epic-workspace .epic-source-line.is-anchor-target { background: #fff3c4; }
/* 章見出しの上余白にツールバーを重ね、全体と章のコピー操作の間隔は保つ。 */
.epic-workspace .epic-transcript > .epic-toolbar:has(+ .epic-transcript-chapter > .epic-chapter:first-child) { position: relative; z-index: 3; margin-bottom: -20px; pointer-events: none; }
.epic-workspace .epic-transcript > .epic-toolbar > * { pointer-events: auto; }
.epic-transcript-copy-control { display: inline-flex; flex-shrink: 0; line-height: 1; }
.epic-toolbar > .epic-transcript-copy-control { margin-left: auto; }
.epic-transcript-copy-trigger { touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.epic-workspace .epic-chapter:has(> .epic-transcript-copy-control) { padding-inline: 54px; }
.epic-chapter > .epic-transcript-copy-control { position: absolute; right: 10px; bottom: 2px; }
.epic-transcript-copy-menu {
  position: fixed;
  inset: auto;
  width: 216px;
  max-width: calc(100vw - 16px);
  margin: 0;
  padding: 4px;
  border: 1px solid var(--epic-glass-border);
  border-radius: 10px;
  background: #fff;
  color: var(--epic-blue);
  box-shadow: var(--epic-control-shadow);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
}
.epic-transcript-copy-menu:popover-open { display: flex; flex-direction: column; }
.epic-transcript-copy-menu > button { display: flex; align-items: center; min-height: 44px; width: 100%; padding: 10px 12px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; white-space: nowrap; }
.epic-transcript-copy-menu > button:hover { background: rgba(0, 122, 255, .08); }
.epic-transcript-copy-trigger:focus, .epic-transcript-copy-menu:focus, .epic-transcript-copy-menu > button:focus { outline: none; box-shadow: none; }