/* ============================================================
   経営AIアシスタント — 共通フローティングウィジェット
   Copilot Studio 標準WebチャットUIに準拠したスタイル
   全ダッシュボードページで css/style.css の後に読み込む
   ============================================================ */
:root{
  --cs-accent:#5b5fc7;          /* Copilot Studio アクセント（インディゴ） */
  --cs-accent-deep:#4a4eb0;
  --cs-ink:#242424; --cs-sub:#616161; --cs-line:#e0e0e0;
  --cs-bot-bg:#f5f5f5;          /* ボット吹き出し背景 */
  --cs-user-bg:#e8ebfa;         /* ユーザー吹き出し背景 */
  --cs-cite-bg:#e6e6fa;
}

/* -- 起動ボタン（FAB） -- */
.ai-fab{
  position:fixed;right:22px;bottom:22px;z-index:1000;
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#5b5fc7,#8b8cf0);color:#fff;border:none;
  padding:12px 18px;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;
  box-shadow:0 4px 16px rgba(91,95,199,.40);
  transition:filter .15s,transform .15s;
}
.ai-fab:hover{filter:brightness(1.06);transform:translateY(-1px);}
.ai-fab .ai-fab-ico{font-size:16px;line-height:1;}
.ai-fab .ai-fab-dot{
  position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 4px;
  background:var(--danger,#CF1B1B);color:#fff;border-radius:999px;
  font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;
}
.ai-fab.hidden{display:none;}

/* -- オーバーレイ -- */
.ai-overlay{
  position:fixed;inset:0;z-index:1001;background:rgba(30,30,40,.28);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;
}
.ai-overlay.open{opacity:1;visibility:visible;}

/* -- スライドパネル（Copilot Studio チャットフレーム風） -- */
.ai-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:1002;
  width:420px;max-width:100vw;background:#fff;
  display:flex;flex-direction:column;
  box-shadow:-6px 0 24px rgba(0,0,0,.16);
  transform:translateX(100%);transition:transform .25s ease;
  font-size:14px;color:var(--cs-ink);
}
.ai-panel.open{transform:translateX(0);}

/* ヘッダ（白背景・アバター＋名称） */
.ai-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--cs-line);background:#fff;}
.ai-head .ai-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#5b5fc7,#8b8cf0);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.ai-head .ai-hn{font-size:14px;font-weight:600;line-height:1.3;}
.ai-head .ai-hs{font-size:11px;color:var(--cs-sub);display:flex;align-items:center;gap:6px;}
.ai-head .ai-lock{font-size:9.5px;background:#eef0fb;color:var(--cs-accent);border:1px solid #d9ddf5;padding:1px 6px;border-radius:99px;white-space:nowrap;}
.ai-head .ai-ic{margin-left:auto;display:flex;gap:12px;color:var(--cs-sub);font-size:16px;}
.ai-head .ai-ic button{background:none;border:none;color:var(--cs-sub);font-size:16px;cursor:pointer;line-height:1;padding:0;}
.ai-head .ai-ic button:hover{color:var(--cs-ink);}
.ai-head .ai-close{font-size:20px;}

/* チャット領域 */
.ai-chat{flex:1;overflow-y:auto;padding:16px;background:#fff;display:flex;flex-direction:column;gap:12px;}
.ai-row{display:flex;gap:8px;align-items:flex-end;}
.ai-row.user{justify-content:flex-end;}
.ai-mini{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#5b5fc7,#8b8cf0);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;
}
.ai-bubble{max-width:80%;border-radius:8px;padding:10px 13px;font-size:13.5px;line-height:1.6;}
.ai-row.bot .ai-bubble{background:var(--cs-bot-bg);border:1px solid #ececec;border-bottom-left-radius:2px;}
.ai-row.user .ai-bubble{background:var(--cs-user-bg);border-bottom-right-radius:2px;}
.ai-bubble b{font-weight:600;color:var(--cs-ink);}
.ai-bubble h4{font-size:12.5px;color:var(--cs-accent-deep);margin:9px 0 4px;font-weight:600;}
.ai-bubble ul,.ai-bubble ol{padding-left:18px;margin:4px 0;}
.ai-bubble li{margin:2px 0;}

/* 出典・注記 */
.ai-src{font-size:11.5px;color:var(--cs-sub);border-top:1px solid #e6e6e6;margin-top:9px;padding-top:7px;}
.ai-note{font-size:11px;color:#6a4a00;background:#fdf6e0;border-radius:6px;padding:6px 8px;margin-top:7px;}

/* AI生成メタ（👍👎フィードバック） */
.ai-meta{display:flex;align-items:center;gap:10px;margin-top:9px;font-size:10.5px;color:var(--cs-sub);}
.ai-meta .ai-gen{display:flex;align-items:center;gap:4px;}
.ai-meta .ai-fb{margin-left:auto;display:flex;gap:8px;font-size:13px;}
.ai-meta .ai-fb span{cursor:pointer;opacity:.5;transition:opacity .15s;}
.ai-meta .ai-fb span:hover{opacity:1;}
.ai-meta .ai-fb span.sel{opacity:1;}

/* 埋め込み表・バー */
.ai-embed{background:#fff;border:1px solid #e6e6ee;border-radius:8px;padding:9px;margin:8px 0;}
.ai-embed .ai-et{font-size:10.5px;font-weight:600;color:var(--cs-accent);margin-bottom:6px;}
.ai-embed table{width:100%;border-collapse:collapse;font-size:11px;}
.ai-embed th{color:var(--cs-sub);font-weight:600;text-align:right;padding:3px 6px;border-bottom:1px solid #e6e6ee;}
.ai-embed th:first-child,.ai-embed td:first-child{text-align:left;}
.ai-embed td{padding:3px 6px;text-align:right;border-bottom:1px solid #f0f0f5;}
.ai-hbar{display:flex;align-items:center;gap:6px;margin:3px 0;font-size:11px;}
.ai-hbar .nm{width:64px;color:var(--cs-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ai-hbar .tr{flex:1;background:#ececf6;border-radius:3px;height:12px;overflow:hidden;}
.ai-hbar .fl{height:100%;background:var(--cs-accent);border-radius:3px;}
.ai-hbar .fl.warn{background:var(--danger,#CF1B1B);}
.ai-hbar .fl.mid{background:var(--warning,#B06000);}
.ai-hbar .vv{width:52px;text-align:right;font-weight:600;color:var(--cs-ink);white-space:nowrap;}

/* 会話スターター（常時表示：入力欄の上に固定） */
.ai-quick{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 4px;border-top:1px solid var(--cs-line);background:#fff;max-height:118px;overflow-y:auto;}
.ai-quick .ai-ql{width:100%;font-size:10px;color:var(--cs-sub);margin-bottom:2px;}
.ai-chip{
  background:#fff;border:1px solid var(--cs-accent);color:var(--cs-accent);border-radius:999px;
  font-size:12px;padding:6px 12px;cursor:pointer;font-family:inherit;text-align:left;transition:.15s;
}
.ai-chip:hover{background:#f2f2fd;}

/* タイピング */
.ai-typing{padding-left:32px;color:var(--cs-sub);font-size:12px;}
.ai-typing span{animation:aiblink 1.2s infinite;}
.ai-typing span:nth-child(2){animation-delay:.2s;}
.ai-typing span:nth-child(3){animation-delay:.4s;}
@keyframes aiblink{0%,100%{opacity:.2;}50%{opacity:1;}}

/* 入力欄 */
.ai-input{border-top:1px solid var(--cs-line);padding:12px 14px;background:#fff;}
.ai-input .ai-box{display:flex;align-items:center;gap:8px;border:1px solid #c9c9c9;border-radius:8px;padding:8px 12px;}
.ai-input .ai-box:focus-within{border-color:var(--cs-accent);box-shadow:0 0 0 2px rgba(91,95,199,.18);}
.ai-input input{flex:1;border:none;outline:none;font-size:13.5px;font-family:inherit;background:transparent;color:var(--cs-ink);}
.ai-send{background:none;border:none;color:var(--cs-accent);font-size:17px;cursor:pointer;line-height:1;}
.ai-send:hover{color:var(--cs-accent-deep);}
.ai-foot{font-size:10px;color:var(--cs-sub);text-align:center;padding:6px 14px 10px;background:#fff;line-height:1.5;}

/* ダッシュボード側からAIに聞くボタン（任意設置用） */
.ai-ask-btn{
  background:var(--cs-accent);color:#fff;border:none;border-radius:6px;
  font-size:11px;padding:4px 10px;cursor:pointer;font-family:inherit;white-space:nowrap;
}
.ai-ask-btn:hover{background:var(--cs-accent-deep);}

@media(max-width:520px){
  .ai-panel{width:100vw;}
  .ai-fab{right:14px;bottom:14px;padding:11px 15px;}
}