/* MedCSC チャットボット。サイトのテーマに馴染むよう、色は控えめ・角丸は小さめ。 */
.medcsc-chat { --mc-accent:#0f5c8c; --mc-bg:#fff; --mc-line:#dfe4ea; --mc-ink:#1d2733; --mc-muted:#5b6674; --mc-soft:#f3f6f9;
  font-size:15px; line-height:1.75; color:var(--mc-ink); box-sizing:border-box; }
.medcsc-chat *, .medcsc-chat *::before, .medcsc-chat *::after { box-sizing:inherit; }

.medcsc-chat--inline { border:1px solid var(--mc-line); border-radius:10px; background:var(--mc-bg);
  display:flex; flex-direction:column; overflow:hidden; height:520px; max-height:80vh; }

/* 外枠→内側ラッパ→ログ、と flex の連鎖を切らさない。
   どこかが display:block になると、ログが内容の高さまで伸びてスクロールできなくなる。 */
.mc-shell { display:flex; flex-direction:column; height:100%; min-height:0; overflow:hidden; }

.mc-head { flex:0 0 auto; padding:12px 16px; border-bottom:1px solid var(--mc-line); background:var(--mc-soft); display:flex; align-items:center; gap:8px; }
.mc-head strong { font-size:15px; }
.mc-badge { font-size:11px; padding:2px 8px; border-radius:999px; background:#e3efd9; color:#2f6a2f; }

/* flexアイテムの min-height は既定 auto。0 にしないと内容の高さまで伸びてしまい、
   overflow-y:auto が効かず「スクロールできない・末尾しか見えない」状態になる。 */
.mc-log { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:16px; display:flex; flex-direction:column; gap:14px; -webkit-overflow-scrolling:touch; }
.mc-msg { display:flex; gap:10px; }
.mc-msg .mc-body { padding:10px 14px; border-radius:10px; max-width:88%; white-space:pre-wrap; word-break:break-word; }
.mc-msg--bot .mc-body { background:var(--mc-soft); }
.mc-msg--me { justify-content:flex-end; }
.mc-msg--me .mc-body { background:var(--mc-accent); color:#fff; }

.mc-sources { margin:8px 0 0; padding:10px 12px; border-left:3px solid var(--mc-accent); background:#fbfdff; border-radius:0 8px 8px 0; }
.mc-sources p { margin:0 0 6px; font-size:12px; color:var(--mc-muted); }
.mc-sources ul { margin:0; padding-left:18px; }
.mc-sources li { font-size:13px; margin:2px 0; }

.mc-suggests { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.mc-suggests button { font:inherit; font-size:13px; padding:6px 12px; border:1px solid var(--mc-line);
  background:#fff; border-radius:999px; cursor:pointer; color:var(--mc-accent); }
.mc-suggests button:hover { background:var(--mc-soft); }

.mc-form { flex:0 0 auto; border-top:1px solid var(--mc-line); padding:10px; display:flex; gap:8px; background:#fff; }
.mc-form textarea { flex:1; resize:none; font:inherit; padding:9px 12px; border:1px solid var(--mc-line);
  border-radius:8px; min-height:44px; max-height:120px; }
.mc-form button { font:inherit; padding:0 18px; border:0; border-radius:8px; background:var(--mc-accent);
  color:#fff; cursor:pointer; white-space:nowrap; }
.mc-form button[disabled] { opacity:.5; cursor:default; }

.mc-note { flex:0 0 auto; padding:8px 16px 12px; font-size:11.5px; color:var(--mc-muted); border-top:1px solid var(--mc-line); background:#fff; }
.mc-typing { color:var(--mc-muted); font-size:13px; }
.mc-error { color:#b32d2e; }

/* 右下に常駐させる場合 */
.medcsc-chat--floating { position:fixed; right:20px; bottom:20px; z-index:99999; }
.mc-launch { border:0; border-radius:999px; padding:13px 20px; background:var(--mc-accent); color:#fff;
  font:inherit; font-size:14px; cursor:pointer; box-shadow:0 6px 20px rgba(15,92,140,.32); }
.mc-panel { width:min(400px, calc(100vw - 32px)); height:min(560px, calc(100vh - 120px)) !important;
  background:var(--mc-bg); border:1px solid var(--mc-line); border-radius:12px; display:flex; flex-direction:column;
  overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.18); }
.mc-close { margin-left:auto; border:0; background:transparent; font-size:20px; line-height:1; cursor:pointer; color:var(--mc-muted); }

@media (max-width:480px){ .medcsc-chat--floating{ right:12px; bottom:12px; } }