/* === Concierge (Bun-chan) 共通スタイル ======================= */

/* ミニ吹き出し・強調など共通部分 */
.concierge-bubble{
  position:relative;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 16px 36px rgba(0,0,0,.2);
  padding:.65rem .8rem;
  font-size:.95rem;
  color:#222;
  line-height:1.5;
}
.concierge-bubble .c-head{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:.3rem;
  font-weight:600;
  font-size:.9rem;
  color:#ff7a00;
}
.concierge-bubble .c-actions{display:flex; gap:.35rem; margin-top:.35rem;}
.concierge-btn{
  appearance:none;
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:999px;
  padding:.25rem .6rem;
  font-size:.85rem;
  cursor:pointer;
}
.concierge-btn[aria-pressed="true"]{background:#ffefe3; border-color:#ffcf9b;}
.concierge-hide{
  position:absolute;
  top:6px;
  right:6px;
  border:0;
  background:#0000;
  font-size:14px;
  cursor:pointer;
  opacity:.5;
}
.concierge-hide:hover{opacity:.85;}

/* ハイライト対象 */
[data-help-text]{outline-offset:2px;}
[data-help-text].help-focus{
  outline:2px dashed #ff9f1a;
  background:linear-gradient(180deg,#fffbe8,#ffffff 30%);
}

/* 黒い小ツールチップは完全に隠す */
.concierge-mini,
.concierge-mini::after{
  display:none !important;
  content:none !important;
}

/* hover / focus-visible 用（点線囲み） */
[data-help-text],[data-help]{
  outline:0;
  outline-offset:3px;
  border-radius:6px;
}
@media (hover: hover){
  [data-help-text]:hover,
  [data-help]:hover{
    outline:2px dotted #ff9f1a;
  }
}
[data-help-text]:focus-visible,
[data-help]:focus-visible{
  outline:2px dotted #ff9f1a;
}

/* 文ちゃん画像のアスペクト比を必ず維持する */
#concierge-root #concierge-img{
  width: calc(var(--concierge-size) - 8px) !important; /* 幅だけ固定 */
  height: auto !important;                            /* 高さは自動で比率維持 */
  max-width: 100%;
  display:block;
}

/* ========================================================= */
/*  PC / タブレット用レイアウト（441px以上）                 */
/* ========================================================= */
@media (min-width:441px){
  :root{ --concierge-size: 100px; }  /* PCサイズ */

  #concierge-root{
    position:fixed;
    right:16px;
    bottom:16px;
    left:auto;
    top:auto;
    z-index:9999;
    width:auto;
    height:auto;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
    pointer-events:none;
  }
  #concierge-root *{
    pointer-events:auto;
  }

  #concierge-root .concierge-avatar{
    width:var(--concierge-size);
    height:var(--concierge-size);
    padding:6px;
    border-radius:50%;
    display:grid;
    place-items:center;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    background:#fff;
    cursor:pointer;
    overflow:hidden;
    opacity:.95;
    -webkit-mask-image:radial-gradient(circle,#000 99%,transparent 100%);
    mask-image:radial-gradient(circle,#000 99%,transparent 100%);
    z-index:10000;
  }

  /* PCでは文ちゃんの左に通常の吹き出し */
  #concierge-root .concierge-bubble{
    position:absolute;
    right:calc(var(--concierge-size) + 20px);
    bottom:6px;
    max-width:min(46ch,40vw);
    display:none;
    z-index:10001;
  }
  #concierge-root[data-open="1"] .concierge-bubble,
  #concierge-root[data-pinned="true"] .concierge-bubble{
    display:block;
  }
  #concierge-root .concierge-bubble::after{
    content:"";
    position:absolute;
    right:-8px;
    bottom:18px;
    border:8px solid transparent;
    border-left-color:#fff;
    filter:drop-shadow(0 1px 0 #e5e7eb);
  }

  #concierge-root[data-hidden="1"] .concierge-bubble{
    display:none !important;
  }
}

@media (max-width:440px){
  :root{ --concierge-size: 50px; }

  /* 文ちゃん本体（右下固定） */
  #concierge-root{
    position:fixed;
    left:0;
    right:0;
    bottom:8px;
    z-index:99999;           /* ページ上のほとんどの要素より前に出す */
    display:flex;
    justify-content:flex-end;
    align-items:flex-end;
    padding-right:12px;
    pointer-events:none;
  }
  #concierge-root *{
    pointer-events:auto;
  }

  #concierge-root .concierge-avatar{
    width:var(--concierge-size);
    height:var(--concierge-size);
    padding:6px;
    border-radius:50%;
    display:grid;
    place-items:center;
    box-shadow:0 6px 18px rgba(0,0,0,.18);
    background:#fff;
    cursor:pointer;
    overflow:hidden;
    opacity:.96;
    -webkit-mask-image:radial-gradient(circle,#000 99%,transparent 100%);
    mask-image:radial-gradient(circle,#000 99%,transparent 100%);
    z-index:100000;          /* 吹きだしと同じくらい前面に */
  }

  /* 画面下に横長の吹きだしパネル */
  #concierge-root .concierge-bubble{
    position:fixed;
    left:10px;
    right:10px;
    bottom:calc(var(--concierge-size) + 24px); /* 文ちゃんの少し上 */
    background:#fff;
    border:1px solid #e5e7eb;
    box-shadow:0 16px 36px rgba(0,0,0,.2);
    border-radius:14px;
    max-width:none;
    display:none;
    z-index:100001;          /* 下のボタンより確実に前に出す */
  }

  #concierge-root[data-open="1"] .concierge-bubble,
  #concierge-root[data-pinned="true"] .concierge-bubble{
    display:block;
  }

  /* 文ちゃん方向への矢印（いらなければ display:none; にしてOK） */
  #concierge-root .concierge-bubble::after{
    content:"";
    position:absolute;
    right:36px;              /* 文ちゃん寄りに調整 */
    bottom:-8px;
    border:8px solid transparent;
    border-top-color:#fff;
    filter:drop-shadow(0 -1px 0 #e5e7eb);
  }

  /* Xで閉じたとき用フラグ */
  #concierge-root[data-hidden="1"] .concierge-bubble{
    display:none !important;
  }
}