:root {
  --aibot-navy: #102f49;
  --aibot-navy-deep: #0a2235;
  --aibot-gold: #b79a62;
  --aibot-paper: #f6f7f8;
  --aibot-line: #dce3e7;
  --aibot-text: #17242e;
}

.aibot-launcher,
.aibot-panel,
.aibot-panel * {
  box-sizing: border-box;
}

.aibot-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 154px;
  height: 60px;
  padding: 0 20px 0 16px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  color: #fff;
  background: var(--aibot-navy);
  box-shadow: 0 13px 34px rgba(4, 23, 37, .32);
  font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.aibot-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 17px 40px rgba(4, 23, 37, .4);
}

.aibot-launcher:focus-visible,
.aibot-panel button:focus-visible,
.aibot-panel textarea:focus-visible {
  outline: 3px solid #f3cd75;
  outline-offset: 2px;
}

.aibot-launcher-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 29px;
  height: 24px;
  border: 2px solid currentColor;
  border-radius: 8px;
}

.aibot-launcher-icon::after {
  content: "";
  position: absolute;
  left: 4px;
  bottom: -5px;
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  transform: skew(-28deg);
}

.aibot-launcher-icon i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

.aibot-status-dot {
  position: absolute;
  top: 1px;
  right: 6px;
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #42bb77;
}

.aibot-panel {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 2147483001;
  display: grid;
  grid-template-rows: auto auto minmax(220px, 1fr) auto auto auto;
  width: min(390px, calc(100vw - 28px));
  height: min(650px, calc(100vh - 118px));
  overflow: hidden;
  border: 1px solid rgba(16,47,73,.2);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(4, 23, 37, .3);
  color: var(--aibot-text);
  font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transform-origin: right bottom;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.aibot-panel.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.aibot-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 14px 17px;
  color: #fff;
  background: var(--aibot-navy);
}

.aibot-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--aibot-navy);
  background: #fff;
  font-size: 13px;
  font-weight: 900;
}

.aibot-heading strong,
.aibot-heading span { display: block; }
.aibot-heading strong { font-size: 15px; line-height: 1.5; }
.aibot-heading span { color: #d4e0e8; font-size: 11px; }
.aibot-heading span i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #4ccf83; }

.aibot-close {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.1);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.aibot-notice {
  padding: 9px 16px;
  border-bottom: 1px solid #efdfc2;
  color: #6b563e;
  background: #fff8e9;
  font-size: 10px;
  line-height: 1.55;
}

.aibot-messages {
  overflow-y: auto;
  padding: 18px 15px 8px;
  background: var(--aibot-paper);
  overscroll-behavior: contain;
}

.aibot-message {
  display: flex;
  margin: 0 0 14px;
  animation: aibot-message-in .22s ease both;
}

.aibot-message.is-user { justify-content: flex-end; }

.aibot-bubble {
  max-width: 84%;
  padding: 11px 13px;
  border-radius: 5px 14px 14px 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(4,23,37,.08);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-line;
}

.aibot-message.is-user .aibot-bubble {
  border-radius: 14px 5px 14px 14px;
  color: #fff;
  background: var(--aibot-navy);
}

.aibot-source {
  display: block;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--aibot-line);
  color: #4a6c84;
  font-size: 10px;
  line-height: 1.5;
}

.aibot-source-link {
  display: block;
  margin-top: 5px;
  color: #1d5f86;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.aibot-source-link:hover { color: var(--aibot-navy); }

.aibot-handoff {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding: 9px 8px;
  border: 1px solid var(--aibot-navy);
  border-radius: 7px;
  color: var(--aibot-navy);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.aibot-typing .aibot-bubble { color: #71808a; }
.aibot-typing-dots span { display: inline-block; width: 5px; height: 5px; margin-right: 3px; border-radius: 50%; background: #74838e; animation: aibot-pulse 1s infinite alternate; }
.aibot-typing-dots span:nth-child(2) { animation-delay: .2s; }
.aibot-typing-dots span:nth-child(3) { animation-delay: .4s; }

.aibot-quick-actions {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 10px 13px;
  border-top: 1px solid var(--aibot-line);
  background: #fff;
}

.aibot-quick-actions button {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid #c8d3da;
  border-radius: 999px;
  color: var(--aibot-navy);
  background: #fff;
  font-size: 11px;
  cursor: pointer;
}

.aibot-form {
  display: grid;
  grid-template-columns: 1fr 42px;
  gap: 8px;
  padding: 11px 13px;
  border-top: 1px solid var(--aibot-line);
  background: #fff;
}

.aibot-input {
  resize: none;
  width: 100%;
  max-height: 86px;
  padding: 10px 11px;
  border: 1px solid #c5d0d7;
  border-radius: 10px;
  color: var(--aibot-text);
  background: #fff;
  font-size: 13px;
  line-height: 1.5;
}

.aibot-send {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--aibot-navy);
  cursor: pointer;
}

.aibot-send svg { width: 22px; fill: currentColor; }
.aibot-send:disabled,
.aibot-input:disabled { opacity: .55; cursor: wait; }
.aibot-footer { padding: 0 13px 10px; color: #88949c; background: #fff; text-align: center; font-size: 9px; }
.aibot-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; }

@keyframes aibot-message-in { from { opacity: 0; transform: translateY(5px); } }
@keyframes aibot-pulse { to { opacity: .25; transform: translateY(-2px); } }

@media (max-width: 640px) {
  .aibot-launcher { right: 14px; bottom: 14px; min-width: 58px; width: 58px; padding: 0; justify-content: center; }
  .aibot-launcher-text { display: none; }
  .aibot-panel { right: 14px; bottom: 84px; width: calc(100vw - 28px); height: min(650px, calc(100dvh - 98px)); }
}

@media (prefers-reduced-motion: reduce) {
  .aibot-launcher,
  .aibot-panel,
  .aibot-message,
  .aibot-typing-dots span { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ロゴプレート製作所の既存TOP・お問い合わせ固定ボタンとの重なりを避ける。 */
.aibot-launcher {
  right: 250px;
  bottom: 18px;
}

.aibot-panel {
  right: 24px;
  bottom: 96px;
}

@media (max-width: 640px) {
  .aibot-launcher {
    right: 14px;
    bottom: 72px;
  }

  .aibot-panel {
    right: 14px;
    bottom: 144px;
    height: min(620px, calc(100dvh - 158px));
  }
}

/* C案：ブランド・ショーケース */
.aibot-launcher {
  border-color: rgba(92, 225, 255, .72);
  background:
    radial-gradient(circle at 82% 10%, rgba(85, 244, 255, .42), transparent 31%),
    linear-gradient(135deg, #082a8f 0%, #006bea 58%, #00a9f4 100%);
  box-shadow:
    0 15px 38px rgba(0, 75, 214, .38),
    0 0 0 1px rgba(41, 218, 255, .18) inset,
    0 0 24px rgba(0, 201, 255, .18);
}

.aibot-launcher:hover {
  box-shadow:
    0 19px 46px rgba(0, 75, 214, .48),
    0 0 0 1px rgba(112, 235, 255, .32) inset,
    0 0 30px rgba(0, 201, 255, .28);
}

.aibot-panel {
  grid-template-rows: auto auto minmax(180px, 1fr) auto auto auto;
  width: min(370px, calc(100vw - 28px));
  height: min(540px, calc(100vh - 118px));
  border-radius: 17px;
  border-color: rgba(42, 140, 255, .55);
  background: #eef7ff;
  box-shadow:
    0 26px 76px rgba(0, 42, 133, .34),
    0 0 0 1px rgba(41, 203, 255, .14) inset,
    0 0 34px rgba(0, 143, 255, .14);
}

.aibot-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 75px;
  padding: 11px 15px;
  background:
    radial-gradient(circle at 87% -18%, rgba(46, 242, 255, .85), transparent 37%),
    linear-gradient(130deg, #061b72 0%, #003ab7 48%, #007de9 78%, #02c6ef 125%);
}

.aibot-header::before,
.aibot-header::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  transform: rotate(-16deg);
}

.aibot-header::before {
  top: -52px;
  right: 45px;
  width: 150px;
  height: 190px;
  border-left: 1px solid rgba(119, 239, 255, .54);
  border-right: 12px solid rgba(0, 211, 255, .13);
}

.aibot-header::after {
  right: -22px;
  bottom: -84px;
  width: 170px;
  height: 140px;
  border-radius: 50%;
  background: rgba(0, 230, 255, .15);
  filter: blur(2px);
}

.aibot-avatar {
  flex-basis: 44px;
  width: 44px;
  height: 44px;
  color: #eaffff;
  border: 2px solid #65eeff;
  background: linear-gradient(145deg, #09328c, #008cf0 62%, #12dcf4);
  box-shadow:
    0 0 0 4px rgba(70, 224, 255, .14),
    0 0 22px rgba(79, 232, 255, .58);
  text-shadow: 0 1px 6px rgba(255,255,255,.46);
}

.aibot-heading strong {
  font-size: 15px;
  letter-spacing: .01em;
  text-shadow: 0 1px 8px rgba(0, 22, 94, .42);
}

.aibot-heading span { color: #d8f8ff; }
.aibot-heading span i {
  background: #43f49a;
  box-shadow: 0 0 8px rgba(67, 244, 154, .8);
}

.aibot-close {
  border: 1px solid rgba(114, 226, 255, .52);
  background: rgba(1, 23, 100, .26);
  box-shadow: 0 0 16px rgba(80, 226, 255, .16);
  transition: background .2s ease, transform .2s ease;
}

.aibot-close:hover {
  background: rgba(14, 188, 239, .3);
  transform: rotate(4deg);
}

.aibot-notice {
  position: relative;
  min-height: 49px;
  padding: 9px 14px 9px 47px;
  border-color: #c8e6fb;
  color: #365b7e;
  background: linear-gradient(90deg, #edf8ff, #f7fbff 55%, #e7f6ff);
}

.aibot-notice::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 11px;
  width: 19px;
  height: 23px;
  background: linear-gradient(145deg, #0069ef, #18b8ff);
  clip-path: polygon(50% 0, 92% 16%, 84% 72%, 50% 100%, 16% 72%, 8% 16%);
  filter: drop-shadow(0 3px 4px rgba(0, 91, 215, .22));
}

.aibot-notice::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 17px;
  width: 6px;
  height: 3px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.aibot-messages {
  background:
    linear-gradient(137deg, transparent 0 65%, rgba(84, 168, 255, .11) 65% 76%, transparent 76%),
    linear-gradient(38deg, rgba(255,255,255,.72) 0 45%, transparent 45%),
    radial-gradient(circle at 20% 105%, rgba(59, 169, 255, .10), transparent 30%),
    linear-gradient(145deg, rgba(247,252,255,.96), rgba(218,239,255,.9));
  padding: 15px 14px 7px;
}

.aibot-bubble {
  max-width: 94%;
  padding: 14px 15px;
  border: 1px solid rgba(85, 154, 219, .17);
  border-radius: 8px 18px 18px 18px;
  box-shadow: 0 8px 24px rgba(15, 68, 130, .12);
  line-height: 1.78;
}

.aibot-message.is-user .aibot-bubble {
  border-color: rgba(64, 220, 255, .45);
  border-radius: 18px 8px 18px 18px;
  background: linear-gradient(135deg, #0731a0, #006fe6 68%, #00b7ed);
  box-shadow: 0 9px 25px rgba(0, 77, 190, .25);
}

.aibot-source {
  border-color: #cfe4f3;
  color: #3c6f99;
}

.aibot-source-link { color: #006ad2; }

.aibot-handoff {
  border-color: #008cef;
  color: #0755b1;
  background: linear-gradient(90deg, #f5fbff, #eaf7ff);
}

.aibot-quick-actions {
  justify-content: center;
  gap: 3px;
  padding: 10px 8px;
  border-color: #c9e2f4;
  background: linear-gradient(90deg, #f4faff, #eaf6ff);
}

.aibot-quick-actions button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  border: 0;
  padding: 8px 9px;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  box-shadow: 0 7px 18px rgba(0, 92, 205, .22);
  transition: transform .18s ease, box-shadow .18s ease;
}

.aibot-quick-actions button::before {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.aibot-quick-actions button:nth-child(1) {
  background: linear-gradient(135deg, #0059df, #008df4);
}

.aibot-quick-actions button:nth-child(1)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 9 4.8v10.4L12 22l-9-4.8V6.8L12 2Zm0 2.3L6.2 7.4 12 10.5l5.8-3.1L12 4.3ZM5 9.1v6.8l6 3.2v-6.8L5 9.1Zm8 10 6-3.2V9.1l-6 3.2v6.8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 9 4.8v10.4L12 22l-9-4.8V6.8L12 2Zm0 2.3L6.2 7.4 12 10.5l5.8-3.1L12 4.3ZM5 9.1v6.8l6 3.2v-6.8L5 9.1Zm8 10 6-3.2V9.1l-6 3.2v6.8Z'/%3E%3C/svg%3E");
}

.aibot-quick-actions button:nth-child(2) {
  background: linear-gradient(135deg, #00a4d7, #00d1ec);
}

.aibot-quick-actions button:nth-child(2)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v15H6V2Zm2 2v16h10V8h-4V4H8Zm8 1.4V6h.6L16 5.4ZM10 11h6v2h-6v-2Zm0 4h6v2h-6v-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v15H6V2Zm2 2v16h10V8h-4V4H8Zm8 1.4V6h.6L16 5.4ZM10 11h6v2h-6v-2Zm0 4h6v2h-6v-2Z'/%3E%3C/svg%3E");
}

.aibot-quick-actions button:nth-child(3) {
  background: linear-gradient(135deg, #5226d7, #8c39f0);
}

.aibot-quick-actions button:nth-child(3)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3C6.5 3 2 6.8 2 11.5c0 2.5 1.3 4.7 3.4 6.2L4 22l4.7-2.2c1.1.3 2.2.5 3.3.5 5.5 0 10-3.8 10-8.5S17.5 3 12 3Zm0 2c4.4 0 8 2.9 8 6.5S16.4 18 12 18c-1.1 0-2.2-.2-3.2-.5l-.7-.2-1.2.6.4-1.4-.7-.5C5 14.9 4 13.3 4 11.5 4 7.9 7.6 5 12 5Zm-4 5.5h2v2H8v-2Zm3 0h2v2h-2v-2Zm3 0h2v2h-2v-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3C6.5 3 2 6.8 2 11.5c0 2.5 1.3 4.7 3.4 6.2L4 22l4.7-2.2c1.1.3 2.2.5 3.3.5 5.5 0 10-3.8 10-8.5S17.5 3 12 3Zm0 2c4.4 0 8 2.9 8 6.5S16.4 18 12 18c-1.1 0-2.2-.2-3.2-.5l-.7-.2-1.2.6.4-1.4-.7-.5C5 14.9 4 13.3 4 11.5 4 7.9 7.6 5 12 5Zm-4 5.5h2v2H8v-2Zm3 0h2v2h-2v-2Zm3 0h2v2h-2v-2Z'/%3E%3C/svg%3E");
}

.aibot-quick-actions button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 92, 205, .32);
}

.aibot-form {
  grid-template-columns: 1fr 46px;
  gap: 7px;
  padding: 9px 12px 7px;
  border-color: #c7e1f5;
  background: linear-gradient(90deg, #f5faff, #eaf6ff);
}

.aibot-input {
  min-height: 46px;
  border-radius: 11px;
  border-color: #058ce9;
  background: rgba(255,255,255,.92);
  box-shadow:
    0 0 0 2px rgba(0, 196, 245, .08),
    0 5px 15px rgba(0, 92, 190, .08) inset;
}

.aibot-input:focus {
  border-color: #00bfe9;
  box-shadow:
    0 0 0 3px rgba(0, 191, 233, .15),
    0 5px 15px rgba(0, 92, 190, .06) inset;
}

.aibot-send {
  min-height: 46px;
  border-radius: 11px;
  border: 1px solid #64e9ff;
  background:
    radial-gradient(circle at 75% 18%, rgba(104, 249, 255, .74), transparent 35%),
    linear-gradient(145deg, #053fd2, #0089f4 70%, #00d2e9);
  box-shadow: 0 8px 22px rgba(0, 93, 221, .32), 0 0 16px rgba(0, 209, 244, .25);
}

.aibot-footer {
  padding-bottom: 9px;
  color: #7189a0;
  background: #eaf6ff;
}

@media (max-width: 640px) {
  .aibot-panel {
    height: min(540px, calc(100dvh - 98px));
  }

  .aibot-quick-actions button {
    padding-inline: 7px;
    font-size: 11px;
  }
}

.aibot-typing-dots span {
  background: #008ce8;
  box-shadow: 0 0 6px rgba(0, 140, 232, .45);
}