/* ANIUMA 相談UI（全ページ共通）
   下部固定バー（常時表示の疑似入力欄）＋オーバーレイチャット。
   マークアップは /scripts/ask.js が注入する。 */

/* ---- 下部固定バー ---- */
.ask-bar {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 50; width: min(560px, calc(100% - 28px));
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line, #e5ded4); border-radius: 999px;
  padding: 10px 12px 10px 10px; cursor: text;
  box-shadow: 0 18px 44px -22px rgba(60,45,30,.35);
  font-family: inherit; text-align: left;
  transition: transform .3s ease, opacity .3s ease, border-color .3s;
}
.ask-bar:hover { border-color: var(--accent, #c46a42); }
.ask-bar .ask-ai {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent, #c46a42); color: #faf8f4;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
}
.ask-bar .ask-ph { flex: 1; font-size: 13.5px; color: #b5ac9f; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-bar .ask-go { font-size: 12px; color: var(--accent, #c46a42); letter-spacing: .08em; flex-shrink: 0; padding-right: 6px; }
.ask-open .ask-bar { transform: translateX(-50%) translateY(90px); opacity: 0; pointer-events: none; }
/* バーがフッター等に被らないよう、ページ末尾に余白を確保 */
body { padding-bottom: 76px; }

/* ---- オーバーレイ ---- */
.ask-ov {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(43,38,34,.28);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.ask-open .ask-ov { opacity: 1; visibility: visible; }
.ask-panel {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(420px, 100%); height: 100dvh;
  background: var(--paper, #faf8f4);
  display: flex; flex-direction: column;
  box-shadow: -20px 0 60px -30px rgba(60,45,30,.4);
  transform: translateX(100%); transition: transform .4s cubic-bezier(.32,.72,.28,1);
}
.ask-open .ask-panel { transform: none; }

/* グラバー（モバイルのつまみ）。PCでは非表示 */
.ask-grab { display: none; padding: 12px 0 4px; flex-shrink: 0; touch-action: none; }
.ask-grab span { display: block; width: 44px; height: 5px; border-radius: 999px; background: var(--line, #e5ded4); margin: 0 auto; }

.ask-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line, #e5ded4); flex-shrink: 0; }
.ask-head .ask-ai { width: 34px; height: 34px; border-radius: 50%; background: var(--accent, #c46a42); color: #faf8f4; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.ask-head .n { font-size: 13.5px; font-weight: 700; letter-spacing: .05em; }
.ask-head .s { font-size: 11px; color: var(--sub, #7a716a); margin-top: 2px; }
.ask-reset { margin-left: auto; width: 36px; height: 36px; border: none; background: none; cursor: pointer; color: var(--sub, #7a716a); padding: 8px; flex-shrink: 0; transition: color .3s, transform .4s; }
.ask-reset:hover { color: var(--accent, #c46a42); transform: rotate(-120deg); }
.ask-reset svg { width: 100%; height: 100%; display: block; }
.ask-close { width: 36px; height: 36px; border: none; background: none; cursor: pointer; position: relative; flex-shrink: 0; }
.ask-close::before, .ask-close::after { content: ""; position: absolute; left: 9px; right: 9px; top: 17px; height: 1.5px; background: var(--ink, #2b2622); }
.ask-close::before { transform: rotate(45deg); }
.ask-close::after { transform: rotate(-45deg); }

.ask-log { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }
.ask-msg { display: flex; gap: 10px; align-items: flex-end; max-width: 88%; }
.ask-msg .ask-ai { width: 26px; height: 26px; font-size: 9px; border-radius: 50%; background: var(--accent, #c46a42); color: #faf8f4; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.ask-msg .bub { background: #fff; border: 1px solid var(--line, #e5ded4); border-radius: 20px 20px 20px 7px; padding: 13px 18px; font-size: 13.5px; line-height: 2; white-space: pre-line; }
.ask-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.ask-msg.me .bub { background: var(--ink, #2b2622); color: #faf8f4; border: none; border-radius: 20px 20px 7px 20px; }
.ask-typing .bub { display: flex; gap: 5px; align-items: center; padding: 15px 16px; }
.ask-typing .bub i { width: 5px; height: 5px; border-radius: 50%; background: var(--sub, #7a716a); animation: askdot 1s infinite; }
.ask-typing .bub i:nth-child(2) { animation-delay: .16s; }
.ask-typing .bub i:nth-child(3) { animation-delay: .32s; }
@keyframes askdot { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 14px; flex-shrink: 0; }
.ask-chip { border: 1px solid var(--line, #e5ded4); background: none; border-radius: 999px; padding: 8px 16px; font-size: 12px; color: var(--sub, #7a716a); cursor: pointer; font-family: inherit; transition: border-color .3s, color .3s; }
.ask-chip:hover { border-color: var(--accent, #c46a42); color: var(--accent, #c46a42); }

.ask-input { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line, #e5ded4); flex-shrink: 0; background: var(--paper, #faf8f4); }
.ask-input input { flex: 1; border: none; outline: none; background: none; font-family: inherit; font-size: 16px; color: var(--ink, #2b2622); padding: 8px 6px; min-width: 0; }
.ask-input input::placeholder { color: #b5ac9f; font-size: 13.5px; }
.ask-send { border: none; background: var(--ink, #2b2622); color: #faf8f4; border-radius: 999px; padding: 10px 22px; font-family: inherit; font-size: 12.5px; letter-spacing: .06em; cursor: pointer; transition: background .3s; flex-shrink: 0; }
.ask-send:hover { background: var(--accent, #c46a42); }
.ask-note { font-size: 10.5px; color: #b5ac9f; text-align: center; padding: 0 18px 10px; letter-spacing: .04em; flex-shrink: 0; background: var(--paper, #faf8f4); }

/* タイプライター中のカーソル */
.ask-msg .bub.typing::after { content: ""; display: inline-block; width: 2px; height: 1em; background: var(--accent, #c46a42); margin-left: 2px; vertical-align: -2px; animation: askcaret .8s steps(1) infinite; }
@keyframes askcaret { 50% { opacity: 0; } }

/* モバイル: 下からブワッと展開するボトムシート
   上に一筋ページを残し（92dvh）、グラバーの下スワイプ・上部の余白タップ・戻る操作で閉じる */
@media (max-width: 720px) {
  .ask-panel {
    width: 100%; left: 0; top: auto; bottom: 0;
    height: 92dvh; border-radius: 28px 28px 0 0;
    transform: translateY(100%);
    transition: transform .55s cubic-bezier(.22, 1.1, .36, 1);
    box-shadow: 0 -20px 60px -30px rgba(60,45,30,.4);
  }
  .ask-open .ask-panel { transform: none; }
  .ask-grab { display: block; }
  .ask-close { display: none; }
  .ask-head { padding-top: 4px; border-bottom: none; }
  .ask-log { border-top: 1px solid var(--line, #e5ded4); }
}
.ask-lock { overflow: hidden; }

/* --- モバイルのタップ表現（ハイライト消し＋押下フィードバック） --- */
.ask-bar, .ask-bar *, .ask-chip, .ask-send, .ask-close, .ask-reset, .ask-grab { -webkit-tap-highlight-color: transparent; }
.ask-bar:active { transform: translateX(-50%) scale(.97); transition-duration: .1s; }
.ask-chip:active { border-color: var(--accent, #c46a42); color: var(--accent, #c46a42); background: var(--accent-soft, #f3e2d7); }
.ask-send:active { background: var(--accent, #c46a42); transform: scale(.95); }
.ask-reset:active { color: var(--accent, #c46a42); }

/* タップハイライト強化（*指定で効かない環境向けに、要素型にも直接指定） */
html { -webkit-tap-highlight-color: rgba(0,0,0,0); }
a, button, summary, input, [role="button"] { -webkit-tap-highlight-color: rgba(0,0,0,0); touch-action: manipulation; }