/* AI TEAM モックアップ（自己完結・.aimock 名前空間・styles.css 非依存）*/

.aimock {
  /* ローカルトークン */
  --mk-ink:        #0f0e0d;
  --mk-ink-soft:   rgba(15, 14, 13, 0.7);
  --mk-ink-mute:   rgba(15, 14, 13, 0.48);
  --mk-paper:      #f4f1ec;
  --mk-accent:     #0000d4;
  --mk-accent-soft: rgba(0, 0, 212, 0.08);
  --mk-signal:     #00d47a;
  --mk-warn:       #ff5c2b;
  --mk-line:       rgba(15, 14, 13, 0.1);
  --mk-line-strong: rgba(15, 14, 13, 0.18);
  --mk-radius-lg:  28px;
  --mk-radius-md:  20px;
  --mk-shadow-lift: 0 2px 4px rgba(15, 14, 13, .05), 0 30px 60px rgba(15, 14, 13, .1);
  --mk-shadow-win: 0 1px 2px rgba(15, 14, 13, .04), 0 16px 40px rgba(15, 14, 13, .1);
  --mk-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mk-en:   "Poppins", "Noto Sans JP", sans-serif;
  --mk-jp:   "Noto Sans JP", system-ui, -apple-system, sans-serif;
  --mk-fs-2xs: 0.68rem;
  --mk-fs-xs:  0.75rem;
  --mk-fw-semibold: 600;

  /* フレーム本体 */
  position: relative;
  aspect-ratio: 5 / 4.3;
  min-height: 460px;
  border-radius: var(--mk-radius-lg);
  background:
    radial-gradient(120% 80% at 20% 0%, #ffffff 0%, var(--mk-paper) 60%, #e8e2d6 100%);
  border: 1px solid var(--mk-line);
  overflow: hidden;

  /* 継承の遮断 */
  font-family: var(--mk-jp);
  color: var(--mk-ink);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  letter-spacing: normal;
}
.aimock *,
.aimock *::before,
.aimock *::after { box-sizing: border-box; }

/* グリッド背景 */
.aimock::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15, 14, 13, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 14, 13, .04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
/* 透かし */
.aimock::after {
  content: "OPENCLAW / AI TEAM";
  position: absolute;
  top: 12px; right: 14px;
  font-family: var(--mk-en);
  font-size: .62rem;
  letter-spacing: .25em;
  color: var(--mk-ink-mute);
}

/* ============ ウィンドウ共通 ============ */
.mk-win {
  position: absolute;
  background: #fff;
  border: 1px solid var(--mk-line);
  border-radius: 12px;
  box-shadow: var(--mk-shadow-win);
  overflow: hidden;
  font-size: var(--mk-fs-xs);
  transform-origin: center center;
}
.mk-win__bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 8px 10px;
  border-bottom: 1px solid var(--mk-line);
  background: rgba(244, 241, 236, .6);
}
.mk-dots { display: flex; gap: 5px; }
.mk-dots span { width: 9px; height: 9px; border-radius: 50%; background: #dcd7ce; }
.mk-dots span:nth-child(1) { background: #ff6058; }
.mk-dots span:nth-child(2) { background: #ffc130; }
.mk-dots span:nth-child(3) { background: #28c840; }
.mk-win__title {
  font-family: var(--mk-mono);
  font-size: var(--mk-fs-2xs);
  color: var(--mk-ink-mute);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mk-win__title-icon {
  width: 12px; height: 12px; border-radius: 3px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 4px;
}
.mk-win__body { padding: 10px 12px; }

/* ============ Slack ウィンドウ ============ */
.mk-win--slack {
  top: 5%;
  left: 5%;
  width: 64%;
}
.mk-win--slack .mk-win__title-icon { background: #611f69; }
/* 本文エリア（JS が最下部へ自動スクロール）*/
.mk-win--slack .mk-win__body {
  max-height: 208px;
  overflow-y: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.mk-win--slack .mk-win__body::-webkit-scrollbar { display: none; }

.mk-msg {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  padding: 5px 0;
  will-change: transform, opacity;
}
.mk-msg + .mk-msg { margin-top: 2px; }

/* 会話演出（JS: ルート .is-playing / 各行 .is-in）*/
.aimock.is-playing .mk-msg { opacity: 0; }
.aimock .mk-msg.is-in { animation: mkMsgIn .5s cubic-bezier(.2, .75, .25, 1) both; }

/* 投稿時刻（名前の右隣に表示）*/
.mk-time {
  margin-left: 6px;
  font-family: var(--mk-mono);
  font-size: .55rem;
  font-weight: 400;
  color: var(--mk-ink-mute);
  letter-spacing: .03em;
  vertical-align: 1px;
}

/* リアクションチップ（絵文字＋件数）*/
.mk-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.mk-reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 10px;
  border-radius: 999px;
  background: rgba(15, 14, 13, .05);
  font-family: var(--mk-mono);
  font-size: .58rem;
  line-height: 1.7;
}
.mk-reaction .mk-emoji { font-size: .84rem; }
.mk-reaction b { font-weight: var(--mk-fw-semibold); color: var(--mk-ink-soft); }
.mk-reaction.is-in { animation: mkPop .34s cubic-bezier(.2, .8, .3, 1.2) both; }

.mk-avatar {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--mk-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mk-en);
  font-size: var(--mk-fs-xs);
  font-weight: var(--mk-fw-semibold);
  overflow: hidden;
  flex-shrink: 0;
}
.mk-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-avatar--sales { background: #ff5c2b; }
.mk-avatar--eng { background: var(--mk-accent); }
.mk-avatar--ops { background: var(--mk-ink); }
.mk-avatar--you {
  background: #e6e2da;   /* 画像読込前のプレースホルダ（写真で覆われる）*/
  color: var(--mk-ink);
}
.mk-name { font-weight: var(--mk-fw-semibold); font-size: var(--mk-fs-xs); }
.mk-name .mk-tag {
  display: inline-block;
  font-family: var(--mk-jp);
  font-size: .58rem;
  background: rgba(15, 14, 13, .08);   /* 薄グレー */
  color: var(--mk-ink-soft);           /* 濃グレー */
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  letter-spacing: .02em;
  vertical-align: 1px;
}
.mk-body { font-size: var(--mk-fs-xs); color: var(--mk-ink-soft); line-height: 1.55; }
.mk-body code {
  background: rgba(0, 0, 212, .06);
  color: var(--mk-accent);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: var(--mk-fs-2xs);
  font-family: var(--mk-mono);
}
.mk-meta {
  margin-top: 3px;
  font-size: .58rem;
  font-family: var(--mk-mono);
  color: var(--mk-ink-mute);
  letter-spacing: .04em;
}
/* 返信は装飾を付けず最初の投稿と左位置を揃える（.mk-msg--reply 系は視覚差なし）*/

/* ============ Status ウィンドウ ============ */
.mk-win--status {
  top: 12%;
  right: 3%;
  width: 40%;
}
.mk-win--status .mk-win__title-icon { background: #5865f2; }
.mk-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed var(--mk-line);
  font-size: var(--mk-fs-xs);
}
.mk-status-row:last-child { border-bottom: none; }
.mk-status-row .mk-name { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.mk-status-row .mk-name::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mk-signal);
  box-shadow: 0 0 0 2px rgba(0, 212, 122, .2);
}
.mk-status-row.mk-idle .mk-name::before {
  background: #d8b450;
  box-shadow: 0 0 0 2px rgba(216, 180, 80, .2);
}
.mk-status-row .mk-count {
  font-family: var(--mk-mono);
  font-size: var(--mk-fs-2xs);
  color: var(--mk-ink-mute);
}

/* ============ Tasks ウィンドウ ============ */
.mk-win--tasks {
  bottom: 5%;
  right: 4%;
  width: 46%;
}
.mk-win--tasks .mk-win__title-icon {
  background: linear-gradient(135deg, var(--mk-accent), #6b6bff);
}
.mk-task {
  padding: 7px 0;
  border-bottom: 1px dashed var(--mk-line);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: var(--mk-fs-xs);
}
.mk-task:last-child { border: none; }
.mk-check {
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1.5px solid var(--mk-line-strong);
  background: #fff;
  position: relative;
}
.mk-task.mk-done .mk-check {
  background: var(--mk-accent);
  border-color: var(--mk-accent);
}
.mk-task.mk-done .mk-check::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: linear-gradient(-45deg, transparent 40%, #fff 40%, #fff 55%, transparent 55%);
  clip-path: polygon(15% 50%, 38% 73%, 85% 20%, 78% 13%, 38% 57%, 22% 43%);
}
.mk-task.mk-wip .mk-check {
  border-color: var(--mk-signal);
  background: radial-gradient(var(--mk-signal) 45%, transparent 50%);
  animation: mkPulseDot 1.8s infinite;
}
.mk-task .mk-label { color: var(--mk-ink); }
.mk-task.mk-done .mk-label { color: var(--mk-ink-mute); text-decoration: line-through; }
.mk-task .mk-who {
  font-family: var(--mk-mono);
  font-size: .6rem;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--mk-accent-soft);
  color: var(--mk-accent);
  letter-spacing: .05em;
}

/* 登場アニメ（一度だけ・JS が可視時に .aimock--enter を付与）*/
.aimock--enter .mk-win { animation: mkWinIn .7s cubic-bezier(.2, .75, .25, 1) both; }
.aimock--enter .mk-win--slack  { animation-delay: .04s; }
.aimock--enter .mk-win--status { animation-delay: .16s; }
.aimock--enter .mk-win--tasks  { animation-delay: .28s; }

/* keyframes（mk 接頭辞）*/
@keyframes mkWinIn {
  0%   { opacity: 0; translate: 0 22px; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes mkMsgIn {
  0%   { opacity: 0; translate: 0 12px; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes mkPop {
  0%   { opacity: 0; scale: .6; }
  100% { opacity: 1; scale: 1; }
}
@keyframes mkPulseDot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0, 212, 122, .15); }
  50% { box-shadow: 0 0 0 6px rgba(0, 212, 122, .02); }
}

/* ============ レスポンシブ ============ */
@media (max-width: 1000px) {
  .aimock { min-height: 380px; aspect-ratio: 5 / 4; }
}
@media (max-width: 720px) {
  .aimock {
    min-height: 300px;
    aspect-ratio: 1 / 1.04;
    border-radius: var(--mk-radius-md);
  }
  .aimock::after {
    top: 10px;
    left: 12px;
    right: auto;
    font-size: .52rem;
    letter-spacing: .18em;
  }
  .mk-win { font-size: var(--mk-fs-2xs); }
  .mk-win__bar { padding: 6px 7px; }
  .mk-win__body { padding: 7px 8px; }
  .mk-win--slack { width: 82%; left: 2.5%; top: 3%; }
  .mk-win--status { width: 56%; right: 2%; top: 7%; }
  .mk-win--tasks { width: 68%; right: 2.5%; bottom: 3%; }
}

/* モーション低減 */
@media (prefers-reduced-motion: reduce) {
  .aimock--enter .mk-win,
  .aimock .mk-msg.is-in,
  .mk-reaction.is-in,
  .mk-task.mk-wip .mk-check { animation: none !important; }
  .aimock.is-playing .mk-msg { opacity: 1 !important; }
  .mk-reaction { opacity: 1 !important; scale: 1 !important; }
}

/* 静的モード .aimock--static（完全静止・会話は全文表示）*/
.aimock--static .mk-task.mk-wip .mk-check { animation: none !important; }
.aimock--static .mk-win--slack .mk-win__body {
  max-height: none;
  overflow: visible;
}
.aimock--static .mk-msg { opacity: 1 !important; }
.aimock--static .mk-reaction { opacity: 1 !important; scale: 1 !important; }

/* 整列レイアウト .aimock--stacked（Slack上段フル幅＋Status/Tasks下段2カラム）*/
.aimock--stacked {
  aspect-ratio: auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 44px 20px 20px;   /* 上は透かし分を確保 */
  align-items: start;
}
/* 重なり・傾き・アニメを解除 */
.aimock--stacked .mk-task.mk-wip .mk-check { animation: none !important; }
.aimock--stacked .mk-win {
  position: relative;   /* 背景グリッド(::before)より前面に */
  z-index: 1;
  width: auto;
  rotate: 0 !important;
  inset: auto;
}
.aimock--stacked .mk-win--slack .mk-win__body {
  max-height: none;
  overflow: visible;
}
.aimock--stacked .mk-msg { opacity: 1 !important; }
.aimock--stacked .mk-reaction { opacity: 1 !important; scale: 1 !important; }
.aimock--stacked .mk-win--slack { grid-column: 1 / -1; }

@media (max-width: 560px) {
  .aimock--stacked { grid-template-columns: 1fr; }
}

/* ワークスペース版 .aimock--workspace（左サイドバー＋右会話・カーソルで切替・JS駆動）*/
.aimock--workspace {
  --mk-nav-bg: #23211f;         /* サイドバー背景（既定。roles/ai-jobs では職種色で上書き可）*/
  --mk-nav-text: rgba(255, 255, 255, .92);
  --mk-nav-muted: rgba(255, 255, 255, .5);
  --mk-nav-hover: rgba(255, 255, 255, .1);
  --mk-nav-active-bg: #f0eaf1;  /* 選択チャンネル */

  aspect-ratio: auto;    /* base .aimock の 5/4.3 を解除（幅が高さ逆算で極小化するのを防ぐ）*/
  width: 600px;          /* 固定デザインサイズ（縮小は .mk-ws-fit 内で transform:scale）*/
  max-width: none;       /* .scene .aimock の max-width:520px を無効化 */
  height: 360px;         /* 高さは幅と独立に固定（サイドバーが収まる高さ）*/
  min-height: 0;         /* base .aimock の min-height:460px を打ち消す */
  transform-origin: top left;
  background: #f3f2f0;
  border: 1px solid var(--mk-line);
  border-radius: 16px;   /* 角丸はコンテナで一元管理（内部パネルはフラット）*/
  display: flex;
  gap: 0;
  padding: 0;
  align-items: stretch;
}
/* 背景グリッド／透かしは非表示 */
.aimock--workspace::before,
.aimock--workspace::after { content: none; }

/* ---- 左：サイドバー ---- */
.mk-nav {
  flex: 0 0 180px;
  background: var(--mk-nav-bg);
  padding: 16px 11px;
  color: var(--mk-nav-text);
  overflow: hidden;
  border-radius: 16px 0 0 16px;   /* 左角のみ（コンテナ非依存で角丸を維持）*/
}
.mk-nav__ws {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--mk-fw-semibold);
  font-size: .98rem;
  color: #fff;
  margin: 2px 4px 15px;
}
.mk-nav__ws::after {
  content: "";
  display: inline-block;
  width: .74em;
  height: .74em;
  background-color: currentColor;
  -webkit-mask: url("/assets/icons/caret-down-bold.svg") center / contain no-repeat;
  mask: url("/assets/icons/caret-down-bold.svg") center / contain no-repeat;
  opacity: .85;
}
.mk-nav__group {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 13px 4px 5px;
  font-size: .72rem;
  font-weight: var(--mk-fw-semibold);
  color: var(--mk-nav-muted);
}
.mk-nav__group::before {
  content: "";
  display: inline-block;
  width: .68em;
  height: .68em;
  background-color: currentColor;
  -webkit-mask: url("/assets/icons/caret-down-fill.svg") center / contain no-repeat;
  mask: url("/assets/icons/caret-down-fill.svg") center / contain no-repeat;
}
.mk-nav__group:first-of-type { margin-top: 4px; }
.mk-nav-ch {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 9px;
  border-radius: 8px;
  font-size: .75rem;
  font-weight: var(--mk-fw-medium, 500);
  color: var(--mk-nav-text);
  white-space: nowrap;   /* ホバー背景は即時（トランジションなし）*/
}
.mk-nav-ch__hash { opacity: .55; font-weight: 400; }
.mk-nav-ch.is-hover { background: var(--mk-nav-hover); }
.mk-nav-ch.is-active {
  background: var(--mk-nav-active-bg);
  color: var(--mk-nav-bg);
  font-weight: var(--mk-fw-semibold);
}
.mk-nav-ch.is-active .mk-nav-ch__hash { opacity: .5; }

/* ---- 右：会話ペイン ---- */
.mk-chat-pane {
  position: relative;
  flex: 1;
  min-width: 0;
  background: #fff;
  overflow: hidden;
  border-radius: 0 16px 16px 0;   /* 右角のみ */
}
.mk-chat {
  position: absolute;
  inset: 0;
  padding: 16px 18px;
  overflow-y: auto;
  scrollbar-width: none;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.mk-chat::-webkit-scrollbar { display: none; }
.mk-chat.is-shown {
  opacity: 1;
  pointer-events: auto;
}

/* 会話アニメ（Scene A同様）: 最初の「あなた」は常時表示、返信は is-in で順次、
   リアクションは is-in が付くまで隠す（JS が制御）*/
.aimock--workspace.is-playing .mk-chat .mk-msg:first-child { opacity: 1; }
.aimock--workspace.is-playing .mk-reaction:not(.is-in) { opacity: 0; }

/* ---- カーソル ---- */
.mk-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background: url("/assets/mockup/cursor.svg") no-repeat center / contain;
  filter: drop-shadow(0 2px 3px rgba(15, 14, 13, .28));
  pointer-events: none;
  z-index: 20;
  translate: 0 0;
  will-change: translate;   /* 位置は JS が毎フレーム更新（カーブ＋揺らぎ）*/
}
.mk-cursor.is-click { animation: mkCursorClick .28s ease; }
@keyframes mkCursorClick {
  0%, 100% { scale: 1; }
  45% { scale: .8; }
}

/* ワークスペースの会話要素はやや大きめ（hero版には影響なし）*/
.aimock--workspace .mk-msg { grid-template-columns: 40px 1fr; }
.aimock--workspace .mk-avatar { width: 40px; height: 40px; border-radius: 11px; }
.aimock--workspace .mk-body,
.aimock--workspace .mk-name { font-size: .88rem; }
.aimock--workspace .mk-time { font-size: .64rem; }
.aimock--workspace .mk-name .mk-tag { font-size: .66rem; }
.aimock--workspace .mk-meta { font-size: .66rem; }
.aimock--workspace .mk-reaction { font-size: .7rem; }
.aimock--workspace .mk-reaction .mk-emoji { font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .mk-cursor.is-click { animation: none; }
  .mk-chat { transition: none; }
}

/* 狭幅では縦積みせず、JS が .mk-ws-fit 内で全体を一律 transform:scale */
.mk-ws-fit { max-width: 600px; overflow: hidden; }