/* scenario-callouts.css — SecurityForMe callout engine v2 (bold)
   Public LIGHT theme. Each type owns a strong colour, carried in a solid
   gradient header rather than a thin left border — v1 was too polite to
   notice while reading.

   One card at a time; the engine rotates the corner between them. */

#sfm-callouts {
    position: fixed;
    z-index: 900;              /* under the sticky header, over the page */
    width: min(380px, calc(100vw - 40px));
    pointer-events: none;      /* the container never blocks clicks */

    inset-block-end: 20px;
    inset-inline-end: 20px;
}

#sfm-callouts.pos-br { inset-block-end: 20px; inset-inline-end: 20px; inset-block-start: auto; inset-inline-start: auto; }
#sfm-callouts.pos-bl { inset-block-end: 20px; inset-inline-start: 20px; inset-block-start: auto; inset-inline-end: auto; }
#sfm-callouts.pos-tr { inset-block-start: 88px; inset-inline-end: 20px; inset-block-end: auto; inset-inline-start: auto; }

#sfm-callouts.pos-tr .sfm-co     { transform: translateY(-18px); }
#sfm-callouts.pos-tr .sfm-co-in  { transform: none; }
#sfm-callouts.pos-tr .sfm-co-out { transform: translateY(-12px); }

/* ── The card ─────────────────────────────────────────────── */
.sfm-co {
    pointer-events: auto;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;                    /* keeps the header corners round */
    box-shadow: 0 18px 44px rgba(11, 45, 90, .30),
                0 3px 10px rgba(11, 45, 90, .16);
    margin-block-start: 10px;
    opacity: 0;
    transform: translateY(18px) scale(.97);
    transition: opacity .24s ease, transform .28s cubic-bezier(.2, .9, .25, 1);
}
.sfm-co-in  { opacity: 1; transform: none; }
.sfm-co-out { opacity: 0; transform: translateY(12px) scale(.98); }

/* ── Coloured header ──────────────────────────────────────── */
.sfm-co-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    background: #0B2D5A;                 /* per-type gradient overrides this */
    color: #fff;
}
.sfm-co-ico {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sfm-co-head strong {
    flex: 1;
    min-width: 0;
    font-size: .97rem;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.3;
    color: inherit;
}
.sfm-co-x {
    margin-inline-start: auto;
    background: rgba(255, 255, 255, .18);
    border: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 1.15rem;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s;
}
.sfm-co-x:hover { background: rgba(255, 255, 255, .38); }

/* ── Body ─────────────────────────────────────────────────── */
.sfm-co-body {
    padding: 14px 16px;
    font-size: .91rem;
    line-height: 1.65;
    color: #26303d;
    font-weight: 500;
}

/* ── Type colours — each owns a strong gradient ───────────── */
.sfm-co--fact  { border-block-end: 5px solid #D4AF37; }
.sfm-co--fact  .sfm-co-head { background: linear-gradient(135deg, #D4AF37, #b8912a); color: #241d05; }
.sfm-co--fact  .sfm-co-ico  { background: rgba(0, 0, 0, .13); }
.sfm-co--fact  .sfm-co-x    { background: rgba(0, 0, 0, .13); color: #241d05; }
.sfm-co--fact  .sfm-co-x:hover { background: rgba(0, 0, 0, .26); }

.sfm-co--alert { border-block-end: 5px solid #dc2626; }
.sfm-co--alert .sfm-co-head { background: linear-gradient(135deg, #dc2626, #991b1b); }
.sfm-co--alert .sfm-co-body { background: #fff7f7; }

.sfm-co--toast { border-block-end: 5px solid #0B2D5A; }
.sfm-co--toast .sfm-co-head { background: linear-gradient(135deg, #0B2D5A, #164a8a); }

.sfm-co--sms   { border-block-end: 5px solid #16a34a; }
.sfm-co--sms   .sfm-co-head { background: linear-gradient(135deg, #16a34a, #15803d); }
.sfm-co--sms   .sfm-co-body {
    background: #f2fdf5;
    margin: 12px 14px 14px;
    padding: 11px 14px;
    border-radius: 14px 14px 14px 4px;   /* speech-bubble tail */
    border: 1.5px solid #bbf7d0;
}

.sfm-co--poll  { border-block-end: 5px solid #7c3aed; }
.sfm-co--poll  .sfm-co-head { background: linear-gradient(135deg, #7c3aed, #5b21b6); }

/* ── Poll ─────────────────────────────────────────────────── */
.sfm-co-poll {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 0 16px 14px;
}
.sfm-co-opt {
    background: #fff;
    border: 2px solid #e2d5fb;
    border-radius: 11px;
    padding: 11px 14px;
    font: inherit;
    font-size: .89rem;
    font-weight: 600;
    color: #3b1e79;
    text-align: start;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
}
.sfm-co-opt:hover:not(:disabled) { border-color: #7c3aed; background: #f6f1ff; transform: translateY(-1px); }
.sfm-co-opt:disabled { cursor: default; transform: none; }
.sfm-co-opt.is-right { border-color: #16a34a; background: #ecfdf3; color: #14532d; font-weight: 800; }
.sfm-co-opt.is-wrong { border-color: #dc2626; background: #fef2f2; color: #7f1d1d; }

.sfm-co-why {
    margin: 0 16px 16px;
    font-size: .87rem;
    line-height: 1.6;
    color: #26303d;
    background: #f6f1ff;
    border-inline-start: 4px solid #7c3aed;
    border-radius: 4px 10px 10px 4px;
    padding: 11px 13px;
    font-weight: 500;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 600px) {
    /* Every callout sits at the bottom regardless of the rotation class —
       top placement collides with the sticky header and sits out of thumb
       reach. Position variety is a desktop luxury. */
    #sfm-callouts,
    #sfm-callouts.pos-br,
    #sfm-callouts.pos-bl,
    #sfm-callouts.pos-tr {
        inset-inline: 12px;
        inset-block-start: auto;
        inset-block-end: 12px;
        width: auto;
    }
    #sfm-callouts.pos-tr .sfm-co    { transform: translateY(18px) scale(.97); }
    #sfm-callouts.pos-tr .sfm-co-in { transform: none; }

    .sfm-co-head { padding: 12px 14px; }
    .sfm-co-body { font-size: .89rem; }
    .sfm-co-opt  { padding: 13px 15px; }   /* thumb-sized */
    .sfm-co-x    { width: 30px; height: 30px; font-size: 1.3rem; }
}

/* ── Motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sfm-co, .sfm-co-opt { transition: none; }
    .sfm-co { opacity: 1; transform: none; }
}
.sfm-co--still { transition: none; opacity: 1; transform: none; }

/* ── Print ────────────────────────────────────────────────── */
@media print { #sfm-callouts { display: none; } }