:root{
  --mc-z: 99999;
  --mc-bubble-size: 54px;
  --mc-panel-w: 360px;
  --mc-panel-h: 520px;
  --mc-radius: 16px;
  --mc-shadow: 0 10px 35px rgba(0,0,0,.18);
  --mc-bg: #ffffff;
  --mc-border: rgba(0,0,0,.10);
  --mc-bot: #f3f6ff;
  --mc-user: #e8f7ef;
  --mc-link: #0b63d1;
}

/* root */
#mc-chat-root{ position: fixed; right: 16px; bottom: 16px; z-index: var(--mc-z); }

/* Bubble */
#mc-chat-bubble{
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--mc-border);
  background: var(--mc-bg);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: var(--mc-shadow);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  max-width: 320px;
}

/* 以前の“青い丸SVG”が残る場合の保険（あなたの環境の旧バブル対策） */
#mc-chat-bubble svg{ display:none !important; }

#mc-chat-bubble *{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

.mc-bubble-avatar{
  width: var(--mc-bubble-size);
  height: var(--mc-bubble-size);
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
}

.mc-bubble-text{
  font-size: 13px;
  line-height: 1.25;
  white-space: pre-line; /* \n 改行を表示 */
}

/* bounce */
@keyframes mc-bounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.mc-bounce{ animation: mc-bounce 1.8s ease-in-out infinite; }

/* Panel */
#mc-chat-panel{
  position: fixed;
  right: 16px;
  bottom: 86px;
  width: var(--mc-panel-w);
  height: var(--mc-panel-h);
  background: var(--mc-bg);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius);
  box-shadow: var(--mc-shadow);
  display: none;
  overflow: hidden;
}
#mc-chat-panel.is-open{ display: flex; flex-direction: column; }

.mc-panel-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--mc-border);
}
.mc-panel-title{ font-weight: 700; font-size: 14px; }
.mc-panel-close{
  width: 32px; height: 32px;
  border-radius: 10px;
  border: 1px solid var(--mc-border);
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.mc-panel-body{
  flex: 1 1 auto;
  padding: 12px;
  overflow: auto;
  background: #fafafa;
}

.mc-panel-footer{
  padding: 10px;
  border-top: 1px solid var(--mc-border);
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.mc-input{
  flex: 1 1 auto;
  border: 1px solid var(--mc-border);
  border-radius: 12px;
  padding: 10px;
  resize: none;
  outline: none;
  font-size: 14px;
  line-height: 1.35;
}

.mc-send{
  flex: 0 0 auto;
  border: 1px solid var(--mc-border);
  background: #111827;
  color: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
}
.mc-send:disabled{ opacity: .6; cursor: default; }

/* Messages layout */
.mc-row{
  display: flex;
  gap: 8px;
  margin: 10px 0;
  align-items: flex-end;
}
.mc-row-bot{ justify-content: flex-start; }
.mc-row-user{ justify-content: flex-end; }

.mc-avatar{
  width: 28px; height: 28px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--mc-border);
  background: #fff;
}
.mc-avatar-user{
  /* user.pngをグレーに寄せたいなら、画像をグレーにするのが確実。
     ここでは“保険”として少しだけトーンを落とす */
  filter: grayscale(1);
  opacity: .9;
}

.mc-msg{
  max-width: 75%;
  border: 1px solid var(--mc-border);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.mc-row-bot .mc-msg{ background: var(--mc-bot); }
.mc-row-user .mc-msg{ background: var(--mc-user); }

.mc-msg-text{
  white-space: pre-wrap;  /* 改行を反映 */
  word-break: break-word;
  font-size: 14px;
  line-height: 1.45;
}

/* ★リンク化：表示はそのまま、クリックで飛ぶ */
.mc-msg-text a{
  color: var(--mc-link);
  text-decoration: underline;
  word-break: break-word;
}

/* バブル内：アイコンを右側に */
#mc-chat-bubble .mc-bubble-text { order: 1 !important; }
#mc-chat-bubble .mc-bubble-avatar { order: 2 !important; }

/* 見た目微調整（必要なら） */
#mc-chat-bubble { gap: 10px; }