@charset "UTF-8";

/* =========================================
   HomeRemix — AI相談チャット（LINE風）
   既存スタイルに一切干渉しないよう、すべて .hrc- 接頭辞
   ========================================= */

.hrc{
  --hrc-navy:      #4b4b7d;
  --hrc-navy-deep: #383864;
  --hrc-accent:    #7b7bb5;
  --hrc-ink:       #2c2c3d;
  --hrc-ink-soft:  #5f5f74;
  --hrc-line:      #e7e7f0;
  --hrc-field:     #eeeef6;
  --hrc-white:     #fff;
  --hrc-sans:      "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  --hrc-launcher:  60px;
  --hrc-gap:       24px;

  font-family:var(--hrc-sans);
  letter-spacing:.01em;
}

.hrc *,
.hrc *::before,
.hrc *::after{ box-sizing:border-box; }

.hrc button{
  font:inherit; color:inherit; background:none;
  border:none; padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

/* ページトップボタンを起動ボタンの上へ逃がす */
body.hrc-ready .pagetop{ bottom:calc(var(--hrc-gap) + 60px + 12px); }

/* =========================================
   起動ボタン
   ========================================= */
.hrc .hrc-launcher{
  position:fixed; right:var(--hrc-gap); bottom:var(--hrc-gap); z-index:138;
  width:var(--hrc-launcher); height:var(--hrc-launcher); border-radius:50%;
  display:grid; place-items:center;
  background:var(--hrc-navy); color:#fff;
  box-shadow:0 10px 30px rgba(75,75,125,.30), 0 2px 8px rgba(75,75,125,.18);
  transition:transform .3s cubic-bezier(.22,.68,.3,1), background .3s, box-shadow .3s, opacity .25s, visibility .25s;
}
.hrc .hrc-launcher:hover{ background:var(--hrc-navy-deep); transform:translateY(-2px); }
.hrc .hrc-launcher:active{ transform:translateY(0); }
.hrc .hrc-launcher:focus-visible{ outline:2px solid var(--hrc-accent); outline-offset:3px; }

.hrc-launcher__icon{ width:27px; height:27px; transition:transform .35s cubic-bezier(.22,.68,.3,1), opacity .2s; }
.hrc-launcher__icon--close{ position:absolute; opacity:0; transform:rotate(-45deg) scale(.6); }

.hrc.is-open .hrc-launcher__icon--chat{ opacity:0; transform:rotate(45deg) scale(.6); }
.hrc.is-open .hrc-launcher__icon--close{ opacity:1; transform:none; }

/* 未読ドット */
.hrc-launcher__dot{
  position:absolute; top:4px; right:4px;
  width:12px; height:12px; border-radius:50%;
  background:#e5766f; border:2px solid #fff;
  opacity:0; transform:scale(.4); transition:opacity .3s, transform .3s;
}
.hrc.has-unread .hrc-launcher__dot{ opacity:1; transform:none; }

/* 吹き出しヒント */
.hrc-hint{
  position:fixed; z-index:136;
  right:calc(var(--hrc-gap) + var(--hrc-launcher) + 14px);
  bottom:calc(var(--hrc-gap) + 13px);
  max-width:250px;
  background:#fff; color:var(--hrc-ink);
  border:1px solid var(--hrc-line); border-radius:14px;
  box-shadow:0 12px 34px rgba(75,75,125,.14);
  padding:12px 34px 12px 16px;
  font-size:13px; line-height:1.7;
  opacity:0; visibility:hidden; transform:translateX(8px);
  transition:opacity .4s, visibility .4s, transform .4s;
}
.hrc-hint.is-visible{ opacity:1; visibility:visible; transform:none; }
.hrc-hint::after{
  content:""; position:absolute; right:-6px; bottom:20px;
  width:11px; height:11px; background:#fff;
  border-right:1px solid var(--hrc-line); border-top:1px solid var(--hrc-line);
  transform:rotate(45deg);
}
.hrc .hrc-hint__close{
  position:absolute; top:6px; right:8px;
  width:22px; height:22px; display:grid; place-items:center;
  color:var(--hrc-ink-soft); font-size:15px; line-height:1; border-radius:50%;
}
.hrc .hrc-hint__close:hover{ background:var(--hrc-field); }
.hrc.is-open .hrc-hint{ opacity:0; visibility:hidden; }

/* =========================================
   パネル
   ========================================= */
.hrc-panel{
  position:fixed; z-index:140;   /* サイトのヘッダー(z-index:100)より上 */
  right:var(--hrc-gap);
  bottom:calc(var(--hrc-gap) + var(--hrc-launcher) + 14px);
  width:min(384px, calc(100vw - 32px));
  height:min(636px, calc(100vh - var(--hrc-gap) * 2 - var(--hrc-launcher) - 24px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--hrc-white);
  border-radius:20px;
  box-shadow:0 28px 70px rgba(44,44,61,.20), 0 4px 16px rgba(44,44,61,.08);
  opacity:0; visibility:hidden;
  transform:translateY(14px) scale(.97); transform-origin:100% 100%;
  transition:opacity .3s cubic-bezier(.22,.68,.3,1), transform .3s cubic-bezier(.22,.68,.3,1), visibility .3s;
}
.hrc.is-open .hrc-panel{ opacity:1; visibility:visible; transform:none; }

/* ---- ヘッダー ---- */
.hrc-head{
  flex-shrink:0;
  display:flex; align-items:center; gap:11px;
  padding:14px 14px 14px 16px;
  background:linear-gradient(135deg, var(--hrc-navy) 0%, var(--hrc-navy-deep) 100%);
  color:#fff;
}
.hrc-head__avatar{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  overflow:hidden; background:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.35);
}
.hrc-head__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.hrc-head__meta{ min-width:0; flex:1; }
.hrc-head__name{
  font-size:14.5px; font-weight:500; line-height:1.5;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hrc-head__status{
  display:flex; align-items:center; gap:5px;
  font-size:11px; line-height:1.5; color:rgba(255,255,255,.75);
}
.hrc-head__status::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:#8fd6a8; flex-shrink:0;
}
.hrc .hrc-head__btn{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; flex-shrink:0;
  color:rgba(255,255,255,.85); transition:background .25s, color .25s;
}
.hrc .hrc-head__btn:hover{ background:rgba(255,255,255,.16); color:#fff; }
.hrc .hrc-head__btn:focus-visible{ outline:2px solid #fff; outline-offset:1px; }
.hrc .hrc-head__btn svg{ width:17px; height:17px; }

/* ---- メッセージ欄 ---- */
.hrc-log{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:18px 14px 6px;
  background:#f2f2f8;
  scrollbar-width:thin; scrollbar-color:#d3d3e4 transparent;
}
.hrc-log::-webkit-scrollbar{ width:6px; }
.hrc-log::-webkit-scrollbar-thumb{ background:#d3d3e4; border-radius:99px; }
.hrc-log::-webkit-scrollbar-track{ background:transparent; }

.hrc-date{
  text-align:center; margin:2px 0 16px;
}
.hrc-date span{
  display:inline-block; padding:3px 13px; border-radius:99px;
  background:rgba(75,75,125,.09); color:var(--hrc-ink-soft);
  font-size:11px; letter-spacing:.04em;
}

/* ---- 1メッセージ ---- */
.hrc-row{
  display:flex; align-items:flex-end; gap:8px;
  margin-bottom:14px;
  animation:hrc-pop .34s cubic-bezier(.22,.68,.3,1) both;
}
@keyframes hrc-pop{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}
.hrc-row--user{ flex-direction:row-reverse; }

.hrc-row__avatar{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  overflow:hidden; background:#fff; border:1px solid var(--hrc-line);
  align-self:flex-start; margin-top:2px;
}
.hrc-row__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.hrc-row--stack .hrc-row__avatar{ visibility:hidden; }

.hrc-row__body{ max-width:calc(100% - 76px); min-width:0; }

.hrc-name{
  font-size:11px; color:var(--hrc-ink-soft);
  margin:0 0 4px 3px; line-height:1.4;
}
.hrc-row--stack .hrc-name{ display:none; }

.hrc-bubbleline{ display:flex; align-items:flex-end; gap:6px; }
.hrc-row--user .hrc-bubbleline{ flex-direction:row-reverse; }

.hrc-bubble{
  position:relative;
  padding:11px 15px;
  font-size:14.5px; line-height:1.78;
  border-radius:4px 16px 16px 16px;
  word-break:break-word;
}
.hrc-bubble p{ margin:0; }
.hrc-bubble p + p{ margin-top:.75em; }
.hrc-bubble ul{ margin:.6em 0; padding-left:1.15em; list-style:disc; }
.hrc-bubble li{ margin:.15em 0; }
.hrc-bubble > :first-child{ margin-top:0; }
.hrc-bubble > :last-child{ margin-bottom:0; }
.hrc-bubble strong{ font-weight:700; }

.hrc-row--bot .hrc-bubble{
  background:#fff; color:var(--hrc-ink);
  box-shadow:0 1px 3px rgba(75,75,125,.10);
}
.hrc-row--bot.hrc-row--stack .hrc-bubble{ border-radius:16px; }

.hrc-row--user .hrc-bubble{
  background:var(--hrc-navy); color:#fff;
  border-radius:16px 4px 16px 16px;
  box-shadow:0 1px 3px rgba(75,75,125,.18);
}
.hrc-row--user.hrc-row--stack .hrc-bubble{ border-radius:16px; }

.hrc-bubble a{
  color:var(--hrc-navy); text-decoration:underline;
  text-underline-offset:2px; font-weight:500;
}
.hrc-row--user .hrc-bubble a{ color:#fff; }

.hrc-time{
  flex-shrink:0; font-size:10.5px; color:#9a9ab0;
  line-height:1.4; padding-bottom:3px; white-space:nowrap;
}

.hrc-row--error .hrc-bubble{
  background:#fdf3f2; color:#8c4a45; box-shadow:none;
  border:1px solid #f2dcd9;
}
.hrc-row--error .hrc-bubble a{ color:#8c4a45; }

/* ---- 入力中 ---- */
.hrc-typing{ display:flex; gap:5px; padding:4px 2px; }
.hrc-typing span{
  width:7px; height:7px; border-radius:50%; background:#b9b9d0;
  animation:hrc-blink 1.3s infinite ease-in-out both;
}
.hrc-typing span:nth-child(2){ animation-delay:.18s; }
.hrc-typing span:nth-child(3){ animation-delay:.36s; }
@keyframes hrc-blink{
  0%,70%,100%{ opacity:.35; transform:translateY(0); }
  35%{ opacity:1; transform:translateY(-3px); }
}

/* カーソル（ストリーミング中） */
.hrc-caret{
  display:inline-block; width:2px; height:1em; margin-left:1px;
  background:var(--hrc-accent); vertical-align:-2px;
  animation:hrc-caret 1s step-end infinite;
}
@keyframes hrc-caret{ 50%{ opacity:0; } }

/* ---- クイックリプライ ---- */
.hrc-quick{
  flex-shrink:0;
  display:flex; gap:8px; overflow-x:auto;
  padding:10px 14px;
  background:#f2f2f8;
  scrollbar-width:none;
  border-top:1px solid rgba(75,75,125,.07);
}
.hrc-quick::-webkit-scrollbar{ display:none; }
.hrc-quick:empty{ display:none; }
.hrc .hrc-chip{
  flex-shrink:0;
  padding:8px 15px; border-radius:999px;
  background:#fff; border:1px solid #dcdcea;
  color:var(--hrc-navy); font-size:12.5px; font-weight:500; line-height:1.5;
  white-space:nowrap;
  transition:background .22s, border-color .22s, color .22s, transform .22s;
}
.hrc .hrc-chip:hover{ background:var(--hrc-navy); border-color:var(--hrc-navy); color:#fff; }
.hrc .hrc-chip:active{ transform:scale(.97); }
.hrc .hrc-chip--cta{ background:var(--hrc-navy); border-color:var(--hrc-navy); color:#fff; }
.hrc .hrc-chip--cta:hover{ background:var(--hrc-navy-deep); border-color:var(--hrc-navy-deep); }

/* ---- 入力欄 ---- */
.hrc-form{
  flex-shrink:0;
  display:flex; align-items:flex-end; gap:9px;
  padding:11px 12px calc(11px + env(safe-area-inset-bottom, 0px));
  background:#fff; border-top:1px solid var(--hrc-line);
}
.hrc-input{
  flex:1; min-width:0;
  max-height:112px; height:42px;
  padding:10px 15px;
  background:var(--hrc-field);
  border:1px solid transparent; border-radius:21px;
  font-family:inherit; font-size:14.5px; line-height:1.55; color:var(--hrc-ink);
  resize:none; overflow-y:auto;
  transition:background .25s, border-color .25s;
}
.hrc-input::placeholder{ color:#9c9cb2; }
.hrc-input:focus{ outline:none; background:#fff; border-color:var(--hrc-accent); }

.hrc .hrc-send{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center;
  background:var(--hrc-navy); color:#fff;
  transition:background .25s, opacity .25s, transform .2s;
}
.hrc .hrc-send svg{ width:18px; height:18px; margin-left:-1px; }
.hrc .hrc-send:hover:not(:disabled){ background:var(--hrc-navy-deep); }
.hrc .hrc-send:active:not(:disabled){ transform:scale(.94); }
.hrc .hrc-send:disabled{ background:#c8c8da; cursor:default; }
.hrc .hrc-send:focus-visible{ outline:2px solid var(--hrc-accent); outline-offset:2px; }

.hrc-note{
  flex-shrink:0;
  padding:0 16px 9px; background:#fff;
  font-size:10.5px; line-height:1.6; color:#9a9ab0; text-align:center;
}
.hrc-note a{ color:var(--hrc-ink-soft); text-decoration:underline; text-underline-offset:2px; }

/* =========================================
   タッチ端末：入力欄は 16px 必須
   iOS Safari は 16px 未満の入力欄にフォーカスすると
   画面を自動で拡大してしまうため。
   ========================================= */
@media (hover:none), (pointer:coarse){
  .hrc .hrc-input{
    font-size:16px;
    line-height:1.5;
    height:46px;
    padding:10px 15px;
  }
  .hrc .hrc-send{ width:46px; height:46px; }
}

/* =========================================
   スマートフォン：全画面シート
   ========================================= */
@media (max-width:600px){
  .hrc{ --hrc-gap:16px; --hrc-launcher:56px; }

  .hrc-hint{ max-width:min(228px, calc(100vw - 100px)); font-size:12.5px; }

  .hrc-panel{
    right:0; bottom:0; left:0; top:0;
    width:100%; height:100%; height:100dvh;
    border-radius:0;
    transform:translateY(20px);
  }
  .hrc-head{ padding-top:calc(14px + env(safe-area-inset-top, 0px)); }
  .hrc-log{ padding:16px 12px 6px; }
  .hrc-row__body{ max-width:calc(100% - 62px); }
  .hrc-bubble{ font-size:14px; }
}

/* パネルを開いている間は背面をスクロールさせない */
body.hrc-locked{ overflow:hidden; }
@media (max-width:600px){
  body.hrc-locked{ position:fixed; width:100%; }
  .hrc.is-open .hrc-launcher,
  .hrc.is-open ~ .pagetop,
  body.hrc-locked .pagetop{ opacity:0; visibility:hidden; }
}

@media (prefers-reduced-motion:reduce){
  .hrc-panel, .hrc-launcher, .hrc-hint, .hrc-row,
  .hrc-launcher__icon, .hrc-chip{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}

@media print{
  .hrc{ display:none !important; }
}