@charset "UTF-8";

/* ===== Agentic AI デモ（assets/js/ai-demo.js） =====
 * 画面部分は Exastro AIアシスタントの CSS をそのまま写し、
 * ガイド（暗幕・強調枠・説明文）と開始画面はサイトの配色にする。
 */
.ai-demo {
  --demo-shade: rgba(5, 7, 13, 0.72);
  --demo-ease: 0.3s ease;
  /* 画面を組む最小の幅。これより狭いときは ai-demo.js（initFit）がこの幅のまま zoom で縮める */
  --demo-base-width: 480px;
  width: 100%;
}

.ai-demo.is-scaled .ai-demo__window {
  width: var(--demo-base-width);
}

/* JS が動かない環境で代わりに出す案内（index.html の noscript。デモが動くと ai-demo.js が中身ごと置き換える） */
.ai-demo__noscript {
  margin: 0;
  padding: 2rem 1.5rem;
  border: 1px solid var(--color-border);
  background: var(--mainColor100);
  text-align: center;
}

/* .section__body p の色指定を打ち消す */
.ai-demo p {
  color: inherit;
}

.ai-demo__icon {
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  fill: none;
}

/* ===== ウインドウ枠 ===== */
/* 中の暗幕・開始画面の z-index をデモの中だけで効かせる（下端のお知らせなどより上に出さない） */
.ai-demo__window {
  isolation: isolate;
  overflow: hidden;  
  background: var(--mainColor100);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

.ai-demo__titlebar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.25rem;
  padding: 0.375rem 0.75rem;
  background-image: linear-gradient(rgba(255, 255, 255, .1), transparent);
  border-bottom: 4px solid var(--accentColor100);
  font-size: 0.75rem;
  color: #F2F2F2;
}

.ai-demo__dots {
  display: flex;
  gap: 6px;
}

.ai-demo__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
}

.ai-demo__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ===== 画面 =====
 * Exastro IT Automation の AIアシスタント（common.css・ai_assistant.css・conductor.css）から
 * 必要な部分を写したもの。クラス名も同じにしているので、見た目を合わせるときは元の CSS と見比べる。
 */
@font-face {
  font-family: "exastro-ui-icons";
  src:
    url("../fonts/exastro-ui-icons.woff") format("woff"),
    url("../fonts/exastro-ui-icons.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.ai-demo__screen {
  --baseColor100: #f0f0f0;
  --black100: #1a1b1c;
  --black80: #484949;
  --black70: #5f5f60;
  --black60: #767677;
  --black30: #babbbb;
  --black20: #d1d1d2;
  --white100: #fff;
  --buttonColor: #ff821e;
  --focusColor: #0070ff;
  --focusBackgroundColor: #e5f1ff;
  --rowDiscardTextColor: #888;

  position: relative;
  height: clamp(30rem, 75vh, 40rem);
  overflow: hidden;
  background-color: var(--baseColor100);
  font-family: Meiryo, sans-serif;
  font-size: 12px;
  line-height: 1;
  color: var(--black80);
}

/* ----- アイコン（exastro-ui-icons） ----- */
.ai-demo__screen .icon {
  font-family: "exastro-ui-icons" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-plus::before { content: "\e92c"; }
.icon-minus::before { content: "\e92d"; }
.icon-circle::before { content: "\e92e"; }
.icon-cross::before { content: "\e92f"; }
.icon-check::before { content: "\e930"; }
.icon-edit::before { content: "\e90b"; }
.icon-gear::before { content: "\e913"; }
.icon-download::before { content: "\e910"; }
.icon-note::before { content: "\e949"; }
.icon-stop::before { content: "\e940"; }
.icon-send::before { content: "\e962"; }
.icon-ai_assistant::before { content: "\e964"; }

/* ----- ボタン ----- */
.button {
  overflow: hidden;
  height: 32px;
  padding: 0;
  background-color: transparent;
  border: none;
  white-space: nowrap;
  line-height: 32px;
  font-size: 12px;
  cursor: pointer;
  outline: none;
}

.button:hover > .inner {
  background-image: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
}

.button > .inner {
  overflow: hidden;
  display: block;
  height: 100%;
  text-overflow: ellipsis;
}

.button .icon {
  vertical-align: -10%;
  font-size: 120%;
  opacity: 0.8;
}

.iconButton .icon {
  margin-right: 8px;
}

.itaButton {
  display: block;
  max-width: 100%;
  border-radius: 4px;
  letter-spacing: 0.75px;
  font-size: 14px;
  color: var(--white100);
}

.itaButton > .inner {
  display: block;
  padding: 0 8px;
  border-radius: 4px;
  background-color: var(--buttonColor);
  background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4) inset,
    0 -2px 0 1px rgba(0, 0, 0, 0.4) inset,
    0 2px 0 0 rgba(255, 255, 255, 0.2) inset;
}

.itaButton:active > .inner {
  transform: translateY(2px);
}

.button[data-action="positive"] > .inner { background-color: #56b20c; }
.button[data-action="danger"] > .inner { background-color: #cc1100; }
.button[data-action="normal"] > .inner,
.button[data-action="negative"] > .inner {
  background-color: var(--black20);
  color: var(--black70);
}

.buttonMinWidth {
  display: block;
  height: 0;
}

.button:disabled {
  cursor: no-drop;
}

.button:disabled > .inner {
  transform: none !important;
  background-color: var(--black20) !important;
  background-image: none !important;
  box-shadow: none;
  color: var(--rowDiscardTextColor) !important;
  opacity: 0.5 !important;
}

/* ----- 操作メニュー ----- */
.operationMenu {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  column-gap: 32px;
  width: 100%;
  padding: 4px;
}

.operationMenuList {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 16px;
  max-width: 100%;
  height: 40px;
  min-width: 0;
  padding-bottom: 4px;
}

.operationMenuSub {
  margin-left: auto;
}

.operationMenuItem {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
}

.operationMenuButton {
  height: 32px;
  line-height: 32px;
}

.operationMenuButton > .inner {
  overflow: hidden;
  max-width: 100%;
  padding: 0 12px;
}

.operationMenuSub .operationMenuButton {
  height: 28px;
  line-height: 28px;
}

.operationMenuSub .operationMenuButton > .inner {
  padding: 0 8px;
  font-size: 12px;
}

/* ----- 全体 ----- */
.aiAssistantContainer {
  width: 100%;
  height: 100%;
}

.aiAssistantContainerInner {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-top: 1px solid #333;
}

.aiAssistantContainerInner > div {
  min-height: 0;
}

.aiAssistantHeader {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  column-gap: 32px;
  padding: 0 4px;
}

.aiAssistantBody {
  overflow: hidden;
  flex: 1 1 auto;
  position: relative;
  z-index: 0;
  background-color: var(--mainColor10);
  background-image: linear-gradient(var(--mainColor15), var(--mainColor5));
}

.aiAssistantBodyInner {
  position: relative;
  z-index: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  transform: translateZ(0);
  width: 100%;
  height: 100%;
  border: 1px solid var(--mainColor30);
  border-bottom: none;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.1) inset;
  background-image:
    radial-gradient(circle, rgba(0, 0, 0, 0.15) 1px, transparent 1.5px),
    linear-gradient(rgba(0, 0, 0, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.075) 1px, transparent 1px);
  background-size: 24px 24px, 48px 48px, 48px 48px;
  display: grid;
  grid-template-rows: 1fr;
}

/* 右下の大きなキャラクター */
.aiAssistantBody::before {
  content: "\e964";
  display: block;
  position: absolute;
  right: -14px;
  bottom: -72px;
  transform: rotate(-16deg);
  font-size: 480px;
  line-height: 1;
  font-family: "exastro-ui-icons" !important;
  user-select: none;
  pointer-events: none;
  color: var(--mainColor100);
  opacity: 0.05;
}

/* ----- フッター（AI・モデル） ----- */
.aiAssistantFooter {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  background-color: var(--black80);
  background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2) inset;
  border: 1px solid var(--black100);
}

.aiAssistantFooterInner {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.aiAssistantFooterBlock {
  flex: 1 1 auto;
  display: inline-flex;
  max-width: 100%;
  background-color: var(--black80);
  background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2) inset;
  border-right: 1px solid rgba(0, 0, 0, 0.8);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.aiAssistantFooterList {
  flex: 1 1 auto;
  display: inline-flex;
  height: 40px;
  min-width: 0;
  max-width: 100%;
}

.aiAssistantFooterTitle,
.aiAssistantFooterItem {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-width: 0;
  color: var(--white100);
}

.aiAssistantFooterItem {
  background-color: rgba(0, 0, 0, 0.1);
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}

.aiAssistantFooterText {
  padding: 12px;
  overflow: hidden;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.modelSelectedName {
  position: relative;
  min-width: 40px;
  padding: 12px 28px 12px 12px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.modelSelectedName::after {
  content: "\e95c";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 6px;
  top: 0;
  width: 16px;
  height: 100%;
  font-family: "exastro-ui-icons" !important;
  font-size: 12px;
}

/* ----- チャット画面 ----- */
.aiAssistantChatContainer {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 24px;
}

.aiAssistantChatInner {
  position: relative;
  width: 100%;
}

.aiAssistantNewChat .aiAssistantChatContainer {
  display: flex;
  align-items: safe center;
  justify-content: center;
}

.aiAssistantNewChat .aiAssistantChatInner {
  padding: 24px 0;
}

.aiAssistantCharacter {
  position: relative;
  width: 120px;
  height: 80px;
  margin: 0 auto 16px;
  text-align: center;
  font-size: 128px;
  color: var(--mainColor100);
  animation: puyon 3s ease-in-out infinite;
}

.aiAssistantCharacter .icon {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(var(--mainColor100), var(--mainColor80));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes puyon {
  0%, 40%, 100% { transform: translateY(0) scale(1); }
  6% { transform: translateY(4px) scaleX(1.15) scaleY(0.85); }
  14% { transform: translateY(-18px) scaleX(0.9) scaleY(1.1); }
  22% { transform: translateY(0) scaleX(1.1) scaleY(0.9); }
  29% { transform: translateY(-6px) scaleX(0.97) scaleY(1.03); }
  35% { transform: translateY(0) scaleX(1.03) scaleY(0.97); }
}

.aiAssistantGreetingMessage {
  text-align: center;
  line-height: 1.5;
  font-size: 24px;
  font-weight: bold;
  color: var(--mainColor100);
  background: linear-gradient(var(--mainColor80), var(--mainColor60));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.aiAssistantDisclaimerMessage {
  margin: 8px auto 0;
  padding: 8px 16px;
  border-radius: 8px;
  line-height: 1.75;
  font-size: 14px;
  color: var(--black80);
}

.aiAssistantChatBody {
  margin-bottom: 16px;
}

/* ----- 入力欄 ----- */
.aiAssistantChatComposer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  background-color: var(--white100);
  box-shadow: 4px 4px 16px var(--black30);
  border: 1px solid var(--mainColor15);
  border-right: 4px solid var(--mainColor80);
  border-left: 4px solid var(--mainColor80);
}

.aiAssistantChatComposer > div {
  min-width: 0;
}

.aiAssistantInputMessage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

/* common.css の .input .textarea も当たっている */
.aiAssistantInputTextarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 4px 8px;
  background-color: var(--white100);
  font-family: "Osaka-mono", "MS Gothic", monospace;
  letter-spacing: 0.75px;
  word-break: break-all;
  field-sizing: content;
  resize: none;
  min-height: min-content;
  border: none;
  border-radius: 4px;
  outline: none;
  line-height: 1.5;
  font-size: 16px;
  color: var(--black80);
  cursor: text;
}

.aiAssistantInputTextarea::placeholder {
  color: var(--black60);
  opacity: 1;
}

.aiAssistantInputActions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.aiAssistantInputActions .itaButton {
  width: 32px;
}

.aiAssistantInputActions .icon {
  display: block;
  height: 100%;
  position: relative;
}

.aiAssistantInputActions .icon::before {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 応答中は送信ボタンの代わりに停止ボタンを出す */
.exchangingMessages .aiAssistantInputActionsSendButton,
.aiAssistantInputActionsStopButton {
  display: none;
}

.exchangingMessages .aiAssistantInputActionsStopButton {
  display: block;
}

/* ----- チャット中 ----- */
.aiAssistantChatNow .aiAssistantChatContainer,
.aiAssistantChatNow .aiAssistantChatInner {
  display: grid;
  grid-template-rows: 1fr;
}

.aiAssistantChatNow .aiAssistantChatContainer > *,
.aiAssistantChatNow .aiAssistantChatInner > *,
.aiAssistantChatBody,
.aiAssistantChatList,
.aiAssistantChatItem {
  min-width: 0;
}

.aiAssistantChatNow .aiAssistantChatFooter {
  position: sticky;
  bottom: 0;
  left: 0;
  margin: 0 -16px;
  padding: 16px 0;
}

.aiAssistantChatNow .aiAssistantChatBody {
  margin: 0;
  padding: 16px 0 32px;
}

.aiAssistantChatNow .aiAssistantDisclaimerMessage {
  display: none;
}

.aiAssistantChatList {
  display: flex;
  flex-direction: column;
}

.aiAssistantChatItem {
  position: relative;
  display: flex;
  margin-top: 16px;
  animation: ai-demo-in 0.35s ease both;
}

.aiAssistantChatItem:first-child {
  margin-top: 0;
}

@keyframes ai-demo-in {
  from { opacity: 0; transform: translateY(8px); }
}

.aiAssistantChatItemInner {
  overflow: auto;
  position: relative;
  display: inline-block;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.aiAssistantChatItemInner > * {
  font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.03em;
  line-break: strict;
  word-break: normal;
  text-wrap: pretty;
}

/* ユーザメッセージ */
.aiAssistantChatUserMessage {
  justify-content: flex-end;
  margin-top: 48px;
}

.aiAssistantChatUserMessage::after,
.aiAssistantChatUserChoice::after {
  content: "";
  width: 48px;
  height: 4px;
  position: absolute;
  top: 50%;
  right: -48px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--mainColor80), rgba(255, 255, 255, 0));
}

.aiAssistantChatUserMessageInner {
  padding: 8px 16px 8px 24px;
  background-color: var(--mainColor70);
  background-image: linear-gradient(rgba(255, 255, 255, 0.1), transparent 16px);
  border: 1px solid var(--mainColor80);
  border-right: 4px solid var(--mainColor80);
  border-radius: 4px 4px 4px 16px;
  box-shadow: 4px 4px 16px var(--black30), 0 -16px 16px rgba(0, 0, 0, 0.2) inset;
  color: #fff;
}

.aiAssistantChatUserMessageInner::before,
.aiAssistantChatUserChoiceInner::before {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  left: 8px;
  top: 0;
  background-color: var(--mainColor80);
}

/* 選択肢への回答：提示された選択肢の一覧（開閉式） */
.aiAssistantChatUserMessageChoices {
  margin-top: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 12px;
}

.aiAssistantChatUserMessageChoicesSummary {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  cursor: pointer;
  opacity: 0.8;
  user-select: none;
}

.aiAssistantChatUserMessageChoicesSummary::-webkit-details-marker {
  display: none;
}

.aiAssistantChatUserMessageChoicesSummary::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent currentColor;
  transition: transform 0.15s;
}

.aiAssistantChatUserMessageChoices[open] .aiAssistantChatUserMessageChoicesSummary::before {
  transform: rotate(90deg);
}

.aiAssistantChatUserMessageChoicesSummary:hover {
  opacity: 1;
}

.aiAssistantChatUserMessageChoiceList {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  padding-left: 10px;
}

.aiAssistantChatUserMessageChoiceItem {
  display: flex;
  align-items: baseline;
  gap: 6px;
  opacity: 0.6;
}

.aiAssistantChatUserMessageChoiceItem .icon {
  flex: 0 0 12px;
  font-size: 10px;
  text-align: center;
}

.aiAssistantChatUserMessageChoiceItemSelected {
  font-weight: bold;
  opacity: 1;
}

/* アシスタントメッセージ */
.aiAssistantChatAssistantMessage {
  gap: 8px;
}

.aiAssistantChatAssistantMessageInner {
  min-width: 0;
  padding: 16px 24px 16px 16px;
  background: var(--white100);
  border-left: 4px solid var(--accentColor100);
  border-radius: 4px 4px 16px 4px;
  box-shadow: 4px 4px 16px var(--black30), 0 -16px 16px rgba(0, 0, 0, 0.05) inset;
  color: var(--black80);
}

.aiAssistantChatAssistantMessageInner::before {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  right: 8px;
  top: 0;
  background-color: var(--accentColor50);
}

.aiAssistantChatAssistantMessageIcon {
  flex: 0 0 auto;
  top: 6px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--accentColor100);
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.3), transparent, rgba(0, 0, 0, 0.05));
  box-shadow: 4px 4px 16px var(--black30), 0 1px 2px rgba(255, 255, 255, 0.4) inset;
  border: 2px solid var(--accentColor100);
  text-shadow: 0 0 4px var(--accentColor100);
  border-radius: 8px;
  font-size: 24px;
}

.aiAssistantChatAssistantMessageIcon::after {
  content: "\e965";
  font-size: 16px;
  font-weight: bold;
  font-family: "exastro-ui-icons" !important;
  color: #fff;
}

/* 思考中 */
.aiAssistantChatItemNowLoading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 20px;
}

.aiAssistantChatItemNowLoading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accentColor100);
  animation: supportLoading 0.8s ease infinite alternate;
}

.aiAssistantChatItemNowLoading-dot-2 { animation-delay: 0.16s; }
.aiAssistantChatItemNowLoading-dot-3 { animation-delay: 0.32s; }
.aiAssistantChatItemNowLoading-dot-4 { animation-delay: 0.48s; }
.aiAssistantChatItemNowLoading-dot-5 { animation-delay: 0.64s; }
.aiAssistantChatItemNowLoading-dot-6 { animation-delay: 0.8s; }

@keyframes supportLoading {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0.25; transform: scale(0.75); }
}

.aiAssistantChatItemNowLoadingText {
  font-size: 90%;
  color: var(--black80);
  opacity: 0.8;
}

/* 回答の本文（マークダウン） */
.aiAssistantChatAssistantMessageInner > :first-child {
  margin-top: 0 !important;
}

.aiAssistantChatAssistantMessageInner > :last-child {
  margin-bottom: 0 !important;
}

.aiAssistantChatAssistantMessage p {
  margin: 0 0 1.25em;
}

.aiAssistantChatAssistantMessage ul {
  margin: 0 0 1.3em;
  padding-left: 1.8em;
  list-style: disc;
}

.aiAssistantChatAssistantMessage li {
  margin: 0.35em 0;
  padding-left: 0.15em;
}

.aiAssistantChatAssistantMessage li::marker {
  color: var(--mainColor100);
  font-weight: 600;
}

.aiAssistantChatAssistantMessage :not(pre) > code {
  margin-inline: 0.12em;
  padding: 0.18em 0.42em;
  color: var(--mainColor100);
  background: var(--mainColor10);
  border: 1px solid var(--mainColor30);
  border-radius: 4px;
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.9em;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.aiAssistantChatAssistantMessage strong {
  color: var(--mainColor80);
  font-weight: 700;
}

/* ユーザ選択欄 */
.aiAssistantChatUserChoice {
  justify-content: flex-end;
  margin-top: 12px;
  padding-left: 32px;
}

.aiAssistantChatUserChoiceInner {
  padding: 8px 16px 8px 24px;
  background: var(--white100);
  border-right: 4px solid var(--mainColor80);
  border-radius: 4px 4px 4px 16px;
  box-shadow: 4px 4px 16px var(--black30), 0 -16px 16px rgba(0, 0, 0, 0.05) inset;
  color: #fff;
}

.aiAssistantChatUserChoiceInner::before {
  background-color: var(--mainColor30);
}

.aiAssistantChatUserChoiceList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.aiAssistantChatUserChoiceNote {
  text-align: right;
  padding-top: 4px;
  font-size: 12px;
  color: var(--black60) !important;
}

/* ===== Movement ===== */
.aiAssistantChatAssistantMessage .operationMenu {
  padding: 0 0 8px;
}

.aiAssistantChatAssistantMessage ul.operationMenuList {
  height: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiAssistantChatAssistantMessage li.operationMenuItem {
  margin: 0;
  padding: 0;
}

.aiAssistantChatAssistantMessage ul.operationMenuSub {
  margin-left: auto;
}

.movementArea {
  width: 860px;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 0;
  height: 120px;
  background:
    linear-gradient(transparent, transparent 99px, #ccc 99px, #ccc 100px),
    linear-gradient(90deg, transparent, transparent 99px, #ccc 99px, #ccc 100px),
    linear-gradient(transparent, transparent 49px, #d0d0d0 49px, #d0d0d0 50px),
    linear-gradient(90deg, transparent, transparent 49px, #d0d0d0 49px, #d0d0d0 50px),
    linear-gradient(transparent, transparent 9px, #ddd 9px, #ddd 10px),
    linear-gradient(90deg, transparent, transparent 9px, #ddd 9px, #ddd 10px),
    transparent;
  background-color: #f2f2f2;
  background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: background-color 0.4s, border-color 0.4s;
}

.movementArea[data-result=""] .movementAreaInner {
  opacity: 0.5;
  filter: grayscale(1);
}

/* Movement をつなぐ配管 */
.movementAreaInner::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 68px;
  width: 100%;
  height: 13px;
  background-color: #001a3b;
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  border-top: 4px solid #eee;
  border-bottom: 4px solid #eee;
}

.movementArea[data-result="done"] {
  background-color: #eef8e7;
  border-color: #58b60c;
}

.movementArea[data-result="error"] {
  background-color: #fce6e6;
  border-color: #d00;
}

.movementArea[data-result="stop"] {
  background-color: #fffbe0;
  border-color: #fd0;
}

.movementWaiting {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 20;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 40px;
  padding: 8px;
  border-radius: 16px;
  background-color: #fff;
}

.movementArea[data-result=""] .movementWaiting {
  display: block;
}

/* ノード（conductor.css） */
.node {
  position: absolute;
  left: 50%;
  top: 46px;
  z-index: 10;
  max-width: calc(100% - 64px);
  min-width: 320px;
  transform: translateX(-50%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.node-main {
  display: flex;
  padding: 1px;
  background: linear-gradient(#666, #111);
  border-radius: 9px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
}

.node-main > div {
  min-width: 0;
}

.node-body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
}

.node-circle {
  position: absolute;
  left: 4px;
  top: -8px;
  z-index: 1;
  width: 72px;
  height: 72px;
  background-image: linear-gradient(-45deg, #ccc, #eee);
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.4);
  border-radius: 50%;
}

.node-circle::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  z-index: 2;
  width: 70px;
  height: 70px;
  background-image: linear-gradient(-45deg, #eee, #ccc);
  border-radius: 50%;
}

.node-circle::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  z-index: 3;
  width: 64px;
  height: 64px;
  background-image: linear-gradient(-45deg, #333, #666);
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3) inset;
  border-radius: 50%;
}

.node-circle .node-gem {
  display: block;
  position: absolute;
  left: 7px;
  top: 7px;
  z-index: 5;
  width: 58px;
  height: 58px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  text-align: center;
  line-height: 58px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
  font-family: Consolas, "メイリオ", Meiryo, Osaka, sans-serif;
  font-weight: bold;
  font-size: 28px;
  color: #eee;
  transition-duration: 1s;
}

.node-circle .node-gem::before,
.node-circle .node-gem::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
}

.node-circle .node-gem::before {
  background-image: radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.6), transparent);
  box-shadow: 0 -1px 4px 2px rgba(0, 0, 0, 0.3) inset;
}

.node-circle .node-gem::after {
  background-image: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.7) 10%, transparent 85%);
  transform-origin: center top;
  transform: scale(0.8, 0.6) translateY(4px);
}

.node-circle .node-gem-inner {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.node-type,
.node-name {
  overflow: hidden;
  font-family: Consolas, "メイリオ", Meiryo, Osaka, sans-serif;
}

.node-type {
  text-overflow: ellipsis;
  height: 24px;
  padding: 0 8px 0 84px;
  background: linear-gradient(rgba(255, 255, 255, 0.2), transparent, rgba(0, 0, 0, 0.3)) #666;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6), -1px -1px 2px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  line-height: 24px;
  font-size: 11px;
  color: #ddd;
}

.node-name {
  min-height: 32px;
  padding: 4px 8px 4px 84px;
  background-color: #ddd;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  background-position: -1px -1px;
  background-size: 105% 105%;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  line-height: 1.3;
  font-size: 14px;
  font-weight: bold;
  word-break: break-all;
  color: #222;
}

.node-name > span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Ansible Legacy の色 */
.node-ansible-legacy .node-type { background-color: #dd0000; }
.node-ansible-legacy .node-circle .node-gem { background-color: #ee0000; }

/* 入出力の端子 */
.node-in,
.node-out {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 32px;
  min-height: 32px;
  background-color: #666;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
  background-position: -1px -1px;
  background-size: 105% 105%;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  border-right: 1px solid rgba(0, 0, 0, 0.3);
}

.node-in { border-radius: 8px 0 0 8px; }
.node-out { border-radius: 0 8px 8px 0; }

.node-terminal::after {
  content: "";
  display: block;
  position: absolute;
  left: 20%;
  bottom: 4px;
  z-index: 1;
  width: 60%;
  height: 8px;
  background-size: 6px 6px;
  background-image: linear-gradient(#444 1px, #111 1px, #111 2px, transparent 2px);
}

.node-in.node-terminal::before,
.node-out.node-terminal::before {
  content: "IN";
  display: block;
  position: absolute;
  left: 0;
  top: 4px;
  z-index: 1;
  transform: scale(0.9);
  width: 100%;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(255, 255, 255, 0.2);
  text-align: center;
  line-height: 1;
  letter-spacing: 0.2em;
  font-size: 10px;
  font-weight: bold;
  font-family: Consolas, "メイリオ", Meiryo, Osaka, sans-serif;
  color: #ddd;
}

.node-out.node-terminal::before {
  content: "OUT";
}

.node-terminal .hole,
.node-terminal .hole::before,
.node-terminal .hole::after {
  display: block;
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

.node-terminal .hole {
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background-image: linear-gradient(#111, #444);
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3), 0 -1px 1px rgba(0, 0, 0, 0.4);
}

.node-terminal .hole::before {
  top: 3px;
  z-index: 3;
  width: 18px;
  height: 18px;
  background-image: linear-gradient(#ccc, #aaa);
}

.node-terminal .hole::after {
  top: 4px;
  z-index: 4;
  width: 16px;
  height: 16px;
  border: 1px solid #333;
  background-image: linear-gradient(130deg, #aaa, #fffff2, #aaa);
  box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.8);
}

.node-terminal .hole-inner {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  border-radius: 50%;
}

.node-terminal .hole-inner::before,
.node-terminal .hole-inner::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 2px;
  background-color: #333;
  border-radius: 1px;
}

.node-terminal .hole-inner::before {
  z-index: 7;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* 実行中の表示 */
.node.ready .node-circle::after,
.node.running .node-circle::after {
  background-image: linear-gradient(#264f05 2px, #132803 2px);
  background-size: 3px 3px;
  animation: runningNodeCircleBack 0.5s linear infinite;
}

@keyframes runningNodeCircleBack {
  0% { background-position: 0 0; opacity: 1; box-shadow: 0 0 2px #60c60d; }
  50% { background-position: 0 1px; opacity: 0.9; box-shadow: 0 0 4px #60c60d; }
  100% { background-position: 0 3px; opacity: 1; box-shadow: 0 0 2px #60c60d; }
}

.node-running {
  display: none;
}

.node.ready .node-running,
.node.running .node-running {
  display: block;
  position: absolute;
  left: 11%;
  top: 11%;
  z-index: 4;
  width: 78%;
  height: 78%;
  border: 4px solid transparent;
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0.75;
}

.node.ready .node-running {
  animation: nodeRunningBlink 2s ease-in-out infinite;
}

.node.ready.running .node-running {
  animation: nodeRunningBlinkRotate 3s linear infinite;
}

@keyframes nodeRunningBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes nodeRunningBlinkRotate {
  to { transform: rotate(360deg); }
}

.node.ready .node-running::before,
.node.ready .node-running::after,
.node.running .node-running::before,
.node.running .node-running::after {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  z-index: 4;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  border: 4px solid transparent;
  border-top-color: #fff;
  border-radius: 50%;
}

.node.ready .node-running::before,
.node.running .node-running::before {
  transform: rotate(120deg);
}

.node.ready .node-running::after,
.node.running .node-running::after {
  transform: rotate(240deg);
}

.node.ready .node-circle .node-gem,
.node.running .node-circle .node-gem {
  transform: scale(0.75);
  box-shadow: 0 0 16px 2px rgba(0, 0, 0, 0.3) inset, 0 0 8px 2px #264f05;
}

.node.running.complete .node-circle::after,
.node.running.complete .node-running {
  animation: none;
}

/* 結果（DONE / ERROR / STOP） */
.node-result {
  overflow: hidden;
  display: block;
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 20;
  width: 62px;
  height: 62px;
  border-radius: 50%;
}

.node-result::before {
  display: none;
  content: attr(data-result-text);
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #666;
  background-image: linear-gradient(rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.1) 50%);
  background-size: 4px 4px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 1px #111 inset, 0 0 8px rgba(0, 0, 0, 0.6) inset;
  border-radius: 50%;
  text-shadow: 0 0 4px #111;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  font-size: 16px;
  font-family: Consolas, "メイリオ", Meiryo, Osaka, sans-serif;
  font-weight: bold;
  color: #fff;
}

.complete .node-result::before {
  display: flex;
  animation: completeResult 1s forwards;
}

@keyframes completeResult {
  0% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.node-result[data-result-text="DONE"]::before { background-color: #58b60c; }
.node-result[data-result-text="ERROR"]::before { background-color: #d00; }
.node-result[data-result-text="STOP"]::before {
  background-color: #fd0;
  text-shadow: none;
  color: #000;
}

/* オペレーション */
.node > .node-operation {
  position: absolute;
  left: 12px;
  top: -36px;
  z-index: 0;
  width: calc(100% - 24px);
  height: 24px;
  display: flex;
  padding: 1px;
  background-color: #666;
  background-image: linear-gradient(#666, #111);
  background-position: -1px -1px;
  background-size: 105% 105%;
  border-radius: 12px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

.node > .node-operation::before,
.node > .node-operation::after {
  content: "";
  display: block;
  z-index: 2;
  width: 16px;
  height: 22px;
  background-color: #555;
  background-image: linear-gradient(#555, #222);
  background-position: -1px -1px;
  background-size: 105% 105%;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  border-right: 1px solid rgba(0, 0, 0, 0.6);
}

.node > .node-operation::before { border-radius: 10px 0 0 10px; }
.node > .node-operation::after { border-radius: 0 10px 10px 0; }

.node-operation-border {
  position: absolute;
  left: 14px;
  bottom: -16px;
  width: calc(100% - 28px);
  height: 16px;
}

.node-operation-border::before,
.node-operation-border::after {
  content: "";
  position: absolute;
  top: -2px;
  z-index: 0;
  width: 4px;
  height: 24px;
  background-color: #555;
  border: 1px solid #222;
  border-top-width: 2px;
  box-shadow: 2px 0 2px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.6) inset;
}

.node-operation-border::before {
  left: 0;
  transform: rotate(8deg);
}

.node-operation-border::after {
  right: 0;
  transform: rotate(-8deg);
}

.node-operation-body {
  z-index: 2;
  display: flex;
  width: calc(100% - 32px);
  height: 100%;
  padding: 2px 4px;
  background-image: linear-gradient(#666, #555);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  border-right: 1px solid rgba(0, 0, 0, 0.3);
}

.node-operation-data,
.node-operation-name {
  display: inline-block;
  height: 16px;
  box-shadow: 0 0 0 1px #222;
  vertical-align: top;
  line-height: 14px;
  font-family: Consolas, "メイリオ", Meiryo, Osaka, sans-serif;
  color: #eee;
}

.node-operation-name {
  flex: 0 0 auto;
  width: 24px;
  margin-right: 1px;
  background-color: #ff640a;
  border: 1px solid rgba(0, 0, 0, 0.2);
  text-align: center;
  font-weight: bold;
  font-size: 11px;
}

.node-operation-data {
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 8px;
  background-color: #222;
  border: 1px solid #000;
  white-space: nowrap;
  font-size: 12px;
  text-overflow: ellipsis;
}

/* ===== ガイド（暗幕・強調枠・説明文） =====
 * 暗幕は対象の周りの4枚で、対象の部分だけ穴が空く（穴の中だけ押せる）
 */
.ai-demo__shade,
.ai-demo__ring,
.ai-demo__tip {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--demo-ease), visibility var(--demo-ease),
    left var(--demo-ease), top var(--demo-ease), width var(--demo-ease), height var(--demo-ease);
}

.is-spot-jump .ai-demo__shade,
.is-spot-jump .ai-demo__ring,
.is-spot-jump .ai-demo__tip {
  transition: opacity var(--demo-ease), visibility var(--demo-ease);
}

.is-guiding .ai-demo__shade,
.is-guiding .ai-demo__ring,
.is-guiding .ai-demo__tip {
  opacity: 1;
  visibility: visible;
}

.ai-demo__shade {
  z-index: 20;
  background: var(--demo-shade);
}

.ai-demo__ring {
  z-index: 21;
  border: 2px solid var(--accentColor100);
  pointer-events: none;
}

.is-guiding .ai-demo__ring {
  animation: ai-demo-pulse 1.6s ease-in-out infinite;
}

@keyframes ai-demo-pulse {
  0%, 100% { box-shadow: 0 0 4px var(--accentColor100); }
  50% { box-shadow: 0 0 16px var(--accentColor100); }
}

.ai-demo__tip {
  z-index: 22;
  width: min(18rem, calc(100% - 1.5rem));
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: rgba(10, 15, 28, 0.96);
  color: var(--color-text);
  line-height: 1.5;
}

.ai-demo__tip-step {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--accentColor100);
}

.ai-demo__tip-next {
  display: block;
  margin: 0.5rem 0 0 auto;
  padding: 0.25rem 1rem;
  border-radius: 999px;
  background: var(--accentColor100);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-void);
}

/* ===== 開始・終了画面 ===== */
.ai-demo__cover {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--demo-shade);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
}

.ai-demo__cover.is-visible {
  opacity: 1;
  visibility: visible;
}

.ai-demo__loading {
  position: relative;
  width: 200px;
  height: 3px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(255,255,255, 0.15);
  overflow: hidden;
}

.ai-demo__loading::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: inherit;
  background: var(--accentColor100);
  animation: ai-demo-loading 1.2s ease-in-out infinite;
}

@keyframes ai-demo-loading {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}

.ai-demo__cover-text {
  margin-bottom: 1.25rem;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text)!important;
}

.ai-demo__cover-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border: 1px solid var(--accentColor100);
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accentColor100);
  transition: background 0.2s;
}

.ai-demo__cover-button:hover {
  background: rgba(255,165,0, 0.25);
}

.ai-demo__cover-button .ai-demo__icon {
  fill: currentColor;
}