/* McNamer Help Assistant — widget styles */

.mha-root { position: fixed; right: 22px; bottom: 22px; z-index: 99990; }

.mha-fab {
    --mha-accent: #1e40af;
    width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
    color: #fff; display: flex; align-items: center; justify-content: center;
    background: var(--mha-accent);
    background-image: linear-gradient(135deg, var(--mha-accent), #6366f1);
    box-shadow: 0 10px 26px rgba(30,64,175,.4);
    transition: transform .15s ease, box-shadow .15s ease;
}
.mha-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 14px 30px rgba(30,64,175,.5); }
.mha-fab:active { transform: scale(.96); }

.mha-panel {
    --mha-accent: #1e40af;
    position: fixed; right: 22px; bottom: 92px; z-index: 99991;
    width: 380px; max-width: calc(100vw - 32px);
    height: 560px; max-height: calc(100vh - 130px);
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15,23,42,.28);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    animation: mha-pop .18s ease;
}
@keyframes mha-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* Critical: our display:flex would otherwise override the [hidden] attribute,
   so the close button appeared to do nothing. Force-hide when hidden. */
.mha-panel[hidden] { display: none !important; }

/* Defensive resets so site themes can't stretch or blank our controls/icons. */
.mha-fab, .mha-head-close, .mha-input button {
    -webkit-appearance: none; appearance: none; box-sizing: border-box; padding: 0;
    line-height: 1; text-decoration: none;
}
.mha-fab svg { width: 26px !important; height: 26px !important; fill: #fff !important; display: block !important; }
.mha-head-ic svg { display: block; }
.mha-head-close { width: 28px !important; min-width: 28px; flex-shrink: 0; }
.mha-input button { width: 42px !important; min-width: 42px; flex-shrink: 0; }
.mha-input button svg { display: block; stroke: #fff !important; fill: none !important; margin: 0 auto; }

.mha-head {
    display: flex; align-items: center; gap: 11px; padding: 14px 16px; color: #fff;
    background: var(--mha-accent);
    background-image: linear-gradient(135deg, var(--mha-accent), #6366f1);
}
.mha-head-ic {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
}
.mha-head-main { flex: 1; min-width: 0; }
.mha-head-title { font-weight: 700; font-size: 15px; line-height: 1.2; display: block; }
.mha-head-sub { font-size: 11px; opacity: .85; display: block; margin-top: 1px; }
.mha-head-close {
    background: rgba(255,255,255,.18); border: 0; color: #fff; cursor: pointer;
    width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; flex-shrink: 0;
}
.mha-head-close:hover { background: rgba(255,255,255,.32); }

.mha-log { flex: 1; overflow-y: auto; padding: 16px; background: #f8fafc; }

.mha-msg { max-width: 88%; margin: 0 0 11px; padding: 10px 13px; border-radius: 15px; font-size: 14px; line-height: 1.55; }
.mha-msg p { margin: 0 0 7px; }
.mha-msg p:last-child { margin-bottom: 0; }
.mha-msg ul { margin: 5px 0; padding-left: 18px; }
.mha-msg a { color: inherit; font-weight: 600; text-decoration: underline; }
.mha-msg.me {
    margin-left: auto; color: #fff; border-bottom-right-radius: 5px;
    background: var(--mha-accent); background-image: linear-gradient(135deg, var(--mha-accent), #6366f1);
}
.mha-msg.me a { color: #fff; }
.mha-msg.bot { margin-right: auto; background: #fff; color: #0f172a; border: 1px solid #e8edf3; border-bottom-left-radius: 5px; }
.mha-msg.bot a { color: var(--mha-accent); }

.mha-cta {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 11px;
    color: #fff !important; text-decoration: none !important; font-weight: 600; font-size: 13px;
    padding: 9px 16px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--mha-accent); background-image: linear-gradient(135deg, var(--mha-accent), #6366f1);
}
.mha-cta:hover { filter: brightness(1.07); }
.mha-cta-col { display: flex; flex-direction: column; gap: 8px; margin-top: 11px; align-items: stretch; }
.mha-cta-pick { justify-content: center; }

.mha-starters { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 8px; }
.mha-chip {
    text-align: left; cursor: pointer; font-size: 13.5px; color: #1e293b;
    background: #fff; border: 1px solid #d8e0ea; border-radius: 12px; padding: 10px 13px;
    transition: all .14s ease;
}
.mha-chip:hover { border-color: var(--mha-accent); color: var(--mha-accent); background: #f0f4ff; }

.mha-links { margin: 2px 0 10px; }
.mha-links-h { font-size: 12px; color: #64748b; margin: 0 0 7px; }
.mha-links-row { display: flex; flex-wrap: wrap; gap: 7px; }
.mha-linkchip {
    font-size: 12.5px; text-decoration: none; color: var(--mha-accent);
    background: #fff; border: 1px solid #d8e0ea; border-radius: 999px; padding: 6px 12px;
    transition: all .14s ease;
}
.mha-linkchip:hover { border-color: var(--mha-accent); background: #f0f4ff; }

.mha-typing { display: inline-flex; gap: 4px; padding: 3px 0; }
.mha-typing span { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: mha-blink 1.2s infinite both; }
.mha-typing span:nth-child(2) { animation-delay: .2s; }
.mha-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes mha-blink { 0%,80%,100% { opacity: .3; } 40% { opacity: 1; } }

.mha-input { display: flex; gap: 8px; padding: 11px; background: #fff; border-top: 1px solid #eef2f7; }
.mha-input input {
    flex: 1; border: 1px solid #d1d9e3; border-radius: 999px; padding: 11px 15px;
    font-size: 14px; outline: none; color: #0f172a;
}
.mha-input input:focus { border-color: var(--mha-accent); }
.mha-input button {
    border: 0; cursor: pointer; width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    color: #fff; font-size: 18px;
    background: var(--mha-accent); background-image: linear-gradient(135deg, var(--mha-accent), #6366f1);
}
.mha-input button:hover { filter: brightness(1.06); }

.mha-foot { text-align: center; font-size: 11px; color: #94a3b8; padding: 7px; background: #fff; }
.mha-foot a { color: #64748b; text-decoration: none; font-weight: 600; }
.mha-foot a:hover { color: var(--mha-accent); }
.mha-fab .mha-ic { display: block; }

.mha-inline-launch {
    --mha-accent: #1e40af;
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    border: 0; color: #fff; font-size: 15px; font-weight: 600;
    padding: 12px 22px; border-radius: 999px;
    background: var(--mha-accent); background-image: linear-gradient(135deg, var(--mha-accent), #6366f1);
    box-shadow: 0 6px 16px rgba(30,64,175,.3);
}
.mha-inline-launch:hover { filter: brightness(1.05); }

@media (max-width: 480px) {
    .mha-panel { right: 10px; left: 10px; width: auto; bottom: 84px; height: 70vh; }
    .mha-root { right: 16px; bottom: 16px; }
}