/*--------------------------------------------------------------------
=== [ひよりの「今日は何見る？」（右下のおすすめチャット）] ====================================
 -------------------------------------------------------------------*/

/* ページトップボタンはチャットのアイコンの左どなりへ（上だと吹き出しとかぶる） */
.pagetop { bottom: 30px; right: 96px; width: 44px; height: 44px; font-size: 17px; }

.hchat {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 60;
    font-size: 14px;
}

/* 丸いアイコン */
.hchatBtn {
    position: relative;
    display: block;
    width: 64px;
    height: 64px;
    padding: 3px;
    border-radius: 50%;
    background: var(--g-logo);
    box-shadow: 0 8px 24px rgba(30, 28, 26, .22);
    cursor: pointer;
    animation: hchatFloat 3.2s ease-in-out infinite;
    transition: transform .25s;
}
.hchatBtn img {
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 50%;
    object-fit: cover;
}
.hchatBtn:hover { transform: scale(1.06); animation-play-state: paused; }
.hchat.is-open .hchatBtn { animation: none; }
.hchatDot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--pink);
}
.hchat.is-seen .hchatDot,
.hchat.is-open .hchatDot { display: none; }
@keyframes hchatFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* 吹き出し */
.hchatBubble {
    position: absolute;
    right: 8px;
    bottom: 76px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1.5px solid var(--ink);
    border-radius: 18px 18px 4px 18px;
    background: var(--g-lemon);
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(30, 28, 26, .15);
    opacity: 0;
    transform: translateY(8px) scale(.9);
    transform-origin: right bottom;
    transition: opacity .35s, transform .35s cubic-bezier(.34, 1.56, .64, 1);
    pointer-events: none;
}
.hchatBubble.is-show { opacity: 1; transform: none; pointer-events: auto; }
.hchatBubble[hidden] { display: none; }
.hchatBubbleX {
    order: 2;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(30, 28, 26, .1);
    font-size: 9px;
    cursor: pointer;
}
.hchatBubbleX:hover { background: var(--ink); color: #fff; }

/* パネル */
.hchatPanel {
    position: absolute;
    right: 0;
    bottom: 78px;
    display: flex;
    flex-direction: column;
    width: 360px;
    height: min(560px, calc(100vh - 120px));
    border: 1.5px solid var(--ink);
    border-radius: 24px;
    background: var(--bg);
    box-shadow: 0 18px 50px rgba(30, 28, 26, .25);
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px) scale(.96);
    transform-origin: right bottom;
    transition: opacity .25s, transform .25s;
}
.hchatPanel[hidden] { display: none; }
.hchat.is-open .hchatPanel { opacity: 1; transform: none; }

.hchatHead {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--g-logo);
    color: #fff;
}
.hchatHead img { width: 36px; height: 36px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; }
.hchatHead p { flex: 1; line-height: 1.35; }
.hchatHead b { display: block; font-size: 15px; font-weight: 900; }
.hchatHead span { font-size: 11px; font-weight: 700; opacity: .9; }
.hchatClose {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}
.hchatClose:hover { background: #fff; color: var(--ink); }

.hchatLog {
    flex: 1;
    padding: 14px 14px 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: relative;
}
.hchatMsg { display: flex; margin-bottom: 8px; animation: hchatIn .3s ease both; }
.hchatMsg p {
    max-width: 82%;
    padding: 9px 13px;
    border-radius: 16px;
    line-height: 1.6;
    font-weight: 700;
}
.hchatMsg.is-hiyori p { border: 1.5px solid var(--ink); border-top-left-radius: 4px; background: #fff; }
.hchatMsg.is-me { justify-content: flex-end; }
.hchatMsg.is-me p { border-top-right-radius: 4px; background: var(--ink); color: #fff; }
@keyframes hchatIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* 入力中の「…」 */
.hchatTyping {
    display: inline-flex;
    gap: 4px;
    padding: 12px 14px;
    border: 1.5px solid var(--ink);
    border-radius: 16px 16px 16px 4px;
    background: #fff;
}
.hchatTyping i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink2); animation: hchatDots 1s infinite; }
.hchatTyping i:nth-child(2) { animation-delay: .15s; }
.hchatTyping i:nth-child(3) { animation-delay: .3s; }
@keyframes hchatDots {
    0%, 60%, 100% { transform: translateY(0); opacity: .4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* 選択肢 */
.hchatOpts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 14px 14px;
}
.hchatOpts:empty { display: none; }
.hchatOpt {
    padding: 7px 13px;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: background .2s, color .2s, transform .2s;
}
.hchatOpt:hover { background: var(--lemon); transform: translateY(-2px); }

/* おすすめカード */
.hchatCards { display: grid; gap: 8px; margin: 4px 0 10px; animation: hchatIn .35s ease both; }
.hchatCard {
    display: flex;
    gap: 10px;
    padding: 8px;
    border: 1.5px solid var(--ink);
    border-radius: 16px;
    background: #fff;
    transition: transform .2s, box-shadow .2s;
}
.hchatCard:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.hchatThumb { flex: 0 0 86px; height: 116px; border-radius: 10px; overflow: hidden; background: var(--line); }
.hchatThumb img { width: 100%; height: 100%; object-fit: cover; }
.hchatBody { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hchatBody b { font-size: 14px; font-weight: 900; line-height: 1.4; }
.hchatCats { display: flex; flex-wrap: wrap; gap: 4px; }
.hchatCats .cat { font-size: 10px; font-style: normal; padding: 0 7px; }
.hchatSay {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--ink2);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
}
.hchatGo { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; font-size: 12px; font-weight: 900; }
.hchatGo .icon { font-size: 10px; }

/* スマホ：パネルは画面下からのシート */
@media screen and (max-width: 767px) {
    .hchat { right: 14px; bottom: 14px; }
    .hchatBtn { width: 58px; height: 58px; }
    .hchatBubble { bottom: 68px; font-size: 13px; }
    .pagetop { bottom: 21px; right: 84px; }
    .hchatPanel {
        position: fixed;
        right: 8px;
        left: 8px;
        bottom: 8px;
        width: auto;
        height: min(78vh, 600px);
    }
    .hchat.is-open .hchatBtn { opacity: 0; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hchatBtn, .hchatMsg, .hchatCards, .hchatTyping i { animation: none; }
}

/* 「×」はアイコンの十字を回して使う */
.hchatClose .icon,
.hchatBubbleX .icon { transform: rotate(45deg); }