.chat-dock {
    position: fixed;
    z-index: 80;
    right: 24px;
    bottom: 24px;
}

.chat-dock__trigger {
    display: inline-flex;
    min-height: 56px;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    border: 1px solid rgb(255 255 255 / 35%);
    border-radius: 999px;
    background: linear-gradient(180deg, #ff3038, var(--color-red-600));
    box-shadow: 0 16px 38px rgb(217 8 18 / 34%), inset 0 1px 0 rgb(255 255 255 / 40%);
    color: var(--color-white);
    font-weight: 800;
    cursor: pointer;
    transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.chat-dock__trigger:hover {
    box-shadow: 0 20px 46px rgb(217 8 18 / 42%), inset 0 1px 0 rgb(255 255 255 / 44%);
    transform: translateY(-3px);
}

.chat-dock__trigger i {
    font-size: 1.15rem;
}

.chat-dock__panel {
    position: absolute;
    right: 0;
    bottom: 70px;
    width: min(360px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 18px;
    background: rgb(4 18 31 / 97%);
    box-shadow: 0 28px 70px rgb(0 0 0 / 40%);
    color: var(--color-white);
    backdrop-filter: blur(16px);
}

.chat-dock__panel[hidden] {
    display: none;
}

.chat-dock__panel header {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 18px;
    border-bottom: 1px solid rgb(255 255 255 / 12%);
}

.chat-dock__panel header > span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 12px;
    background: rgb(239 21 27 / 16%);
    color: #ff454b;
}

.chat-dock__panel h2,
.chat-dock__panel header p {
    margin: 0;
}

.chat-dock__panel h2 {
    font-size: 1rem;
}

.chat-dock__panel header p {
    color: rgb(255 255 255 / 66%);
    font-size: .7rem;
}

.chat-dock__panel header p i {
    color: var(--color-neon-green);
    font-size: .55rem;
}

.chat-dock__panel header button {
    border: 0;
    background: transparent;
    color: rgb(255 255 255 / 76%);
    cursor: pointer;
}

.chat-dock__body {
    display: grid;
    gap: 8px;
    padding: 18px;
}

.chat-dock__body > p {
    margin: 0 0 6px;
    color: rgb(255 255 255 / 76%);
    font-size: .82rem;
}

.chat-dock__body a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgb(255 255 255 / 11%);
    border-radius: 10px;
    background: rgb(255 255 255 / 5%);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.chat-dock__body a:hover {
    border-color: rgb(239 21 27 / 46%);
    background: rgb(239 21 27 / 10%);
}

.chat-dock__body a i {
    width: 18px;
    color: #ff454b;
    text-align: center;
}

.chat-dock__notice {
    margin: 0;
    padding: 12px 18px;
    background: rgb(255 255 255 / 5%);
    color: rgb(255 255 255 / 64%);
    font-size: .68rem;
}

@media (max-width: 700px) {
    .chat-dock { right: 16px; bottom: 16px; }
    .chat-dock__trigger { width: 54px; min-height: 54px; justify-content: center; padding: 0; }
    .chat-dock__trigger span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

@media (prefers-reduced-motion: reduce) {
    .chat-dock__trigger { transition: none; }
}