/* The support launcher + panel. Fixed bottom-right, above toasts' neighbours but below modals. */
.aw-support { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1075; font-family: inherit; }
.aw-support-launch {
    width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; position: relative;
    background: var(--aw-primary, #0b3d2e); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.22);
    display: flex; align-items: center; justify-content: center; transition: transform .15s;
}
.aw-support-launch:hover { transform: translateY(-2px); }
.aw-support-launch svg { width: 26px; height: 26px; }
.aw-support-badge {
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    background: #d92d20; color: #fff; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
}
.aw-support-panel {
    position: absolute; right: 0; bottom: 68px; width: min(380px, calc(100vw - 2.5rem)); height: min(560px, calc(100vh - 7rem));
    background: #fff; border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.24); display: flex; flex-direction: column; overflow: hidden;
}
.aw-support-head { display: flex; align-items: center; gap: .5rem; padding: .9rem 1rem; background: var(--aw-primary, #0b3d2e); color: #fff; }
.aw-support-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.aw-support-title { font-weight: 700; font-size: 1rem; }
.aw-support-sub { font-size: .75rem; opacity: .85; }
.aw-support-all { color: #fff; font-size: .75rem; opacity: .9; text-decoration: underline; white-space: nowrap; }
.aw-support-close { border: 0; background: transparent; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 .25rem; }
.aw-support-body { flex: 1 1 auto; overflow-y: auto; padding: 1rem; background: var(--aw-surface-2, #f1f4f0); display: flex; flex-direction: column; gap: .5rem; }
.aw-support-empty { font-size: .85rem; color: var(--aw-muted, #5a6661); background: #fff; border-radius: 12px; padding: .9rem 1rem; }
.aw-support-msg { max-width: 84%; padding: .45rem .7rem; border-radius: 14px; font-size: .875rem; line-height: 1.35; word-break: break-word; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.05); align-self: flex-start; }
/* Only what the person typed keeps its line breaks — never the template's whitespace. */
.aw-support-msg .body { white-space: pre-wrap; }
.aw-support-msg.mine { align-self: flex-end; background: var(--aw-primary, #0b3d2e); color: #fff; }
.aw-support-msg.system { align-self: center; background: transparent; box-shadow: none; color: var(--aw-muted, #5a6661); font-size: .75rem; text-align: center; max-width: 100%; }
.aw-support-msg .who { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .75; margin-bottom: .15rem; }
.aw-support-msg .when { display: block; font-size: .68rem; opacity: .65; margin-top: .2rem; }
/* A picture in a bubble is a thumbnail; the viewer shows it full size. Fixed box so a phone
   photo never becomes a 3000px column. */
.aw-support-msg img { max-width: 220px; max-height: 180px; width: auto; height: auto; object-fit: cover; border-radius: 8px; display: block; margin-bottom: .25rem; cursor: zoom-in; }
.aw-support-msg .support-thumb, .aw-support-msg a.mlb-item { display: inline-block; max-width: 220px; }
.aw-support-msg .support-thumb img { width: auto; }
.aw-support-msg .support-thumb video { display: block; max-width: 220px; max-height: 180px; background: #000; }
.aw-support-msg .support-thumb.mlb-item--video { position: relative; }
.aw-support-msg a.file { color: inherit; text-decoration: underline; font-size: .85rem; }
.aw-support-compose { display: flex; align-items: center; gap: .35rem; padding: .6rem .75rem; border-top: 1px solid var(--aw-border); background: #fff; }
.aw-support-attach { cursor: pointer; color: var(--aw-muted, #5a6661); display: flex; }
.aw-support-attach svg { width: 20px; height: 20px; }
.aw-support-input { flex: 1 1 auto; border: 1px solid var(--aw-border); border-radius: 10px; padding: .5rem .7rem; font-size: .9rem; }
.aw-support-send { border: 0; border-radius: 10px; background: var(--aw-primary, #0b3d2e); color: #fff; width: 40px; height: 38px; cursor: pointer; }
.aw-support-filename { font-size: .72rem; color: var(--aw-muted, #5a6661); padding: 0 .9rem .5rem; background: #fff; }
@media (max-width: 480px) {
    .aw-support { right: .75rem; bottom: .75rem; }
    .aw-support-panel { width: calc(100vw - 1.5rem); height: min(70vh, calc(100vh - 6rem)); }
}

/* Full pages (My tickets, a ticket, the desk) reuse the bubble look inside a surface. */
.support-thread { display: flex; flex-direction: column; gap: .4rem; max-height: 60vh; overflow-y: auto; padding: .75rem; background: var(--aw-surface-2, #f1f4f0); border-radius: 12px; }
.support-thread .aw-support-msg { max-width: 62%; padding: .4rem .65rem; font-size: .875rem; }
.support-thread .aw-support-msg .who { font-size: .65rem; margin-bottom: .1rem; }
.support-thread .aw-support-msg .when { font-size: .66rem; margin-top: .15rem; }
@media (max-width: 767px) { .support-thread .aw-support-msg { max-width: 86%; } }

/* ---- Full pages ------------------------------------------------------------------------ */
.support-card { overflow: hidden; }
.support-card .support-thread { border-radius: 0; max-height: 62vh; min-height: 16rem; padding: 1rem; }
.support-system { align-self: center; text-align: center; font-size: .74rem; color: var(--aw-muted, #5a6661); padding: .15rem 0; }
.support-system span { background: rgba(0,0,0,.05); border-radius: 1rem; padding: .15rem .7rem; }
.support-compose { padding: .85rem 1rem 1rem; border-top: 1px solid var(--aw-border); background: #fff; }
.support-compose textarea { resize: vertical; }
.support-compose-row { display: flex; align-items: center; gap: .75rem; margin-top: .6rem; flex-wrap: wrap; }
.support-file { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--aw-muted, #5a6661); cursor: pointer; margin: 0; }
.support-file svg { width: 16px; height: 16px; }
.support-file:hover { color: var(--aw-ink, #1f1f1f); }
.support-desk tr.is-waiting td { background: #fff8ec; }
.support-desk td { vertical-align: middle; }