/* Spirit shared styling. Bootstrap 5.3 carries the layout; this file only holds what is ours. There is no form styling here on purpose: the application has no

element anywhere. */ /* C1: anything you can click says so under the pointer. */ .nav-link, .dropdown-item, button:not(:disabled), [role="button"], .sp-clickable { cursor: pointer; } /* Toasts, created on demand by SP.toast. Above the env banner and the Bootstrap modals. */ .sp-toast-wrap { position: fixed; top: 1rem; right: 1rem; z-index: 2100; } /* Non production banner, inserted by layout/head.jspf as the first child of . */ .env-banner { position: sticky; top: 0; z-index: 2000; text-align: center; padding: .25rem; font-weight: 600; font-size: .8rem; color: #fff; } .sp-navbar-logo { max-height: 26px; } .sp-page-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; } /* Login, enrolment and the forced password change: one narrow card, vertically centred. */ .sp-login-body { background-color: #f4f5f7; } .sp-login-wrap { max-width: 26rem; margin: 0 auto; padding: 3rem 0; } .sp-login-logo { max-height: 48px; } /* ───────── la chat ───────── */ /* One screen, and only the two inner panels scroll: a chat whose whole page scrolls loses the composer the moment the transcript gets long. 56px is the navbar, and it is the fallback. The real rule is the flex one below, and it is there because the fixed subtraction is a lie on any page that carries something else above the chat: in DEV and in STAGE head.jspf inserts the environment banner as the first child of , the page grew 26px past the viewport and the Invia button ended up under the fold, which is exactly where a send button must never be. */ .sp-chat-row { height: calc(100vh - 56px); } .sp-chat-body { display: flex; flex-direction: column; min-height: 100vh; max-height: 100vh; } .sp-chat-body > main.sp-chat { flex: 1 1 auto; display: flex; min-height: 0; padding: 0; } .sp-chat-body > main.sp-chat > .sp-chat-row { flex: 1 1 auto; height: auto; /* the flex line decides, not a subtraction we had to guess */ min-height: 0; width: 100%; margin: 0; } /* The two columns take the height of the row rather than the height of their own content. Without this the row is 929px and the columns are 943: a flex line is never shrunk below what its items want, so the transcript kept its full height and pushed the composer past the fold instead of scrolling. A definite height is what lets the flex-grow-1 inside actually shrink. */ @media (min-width: 768px) { .sp-chat-row > .sp-chat-side, .sp-chat-row > .sp-chat-main { height: 100%; min-height: 0; } } /* On a phone the two columns stack, and then one screen is the wrong shape for them: the page scrolls the way every other page does and only the transcript keeps a ceiling of its own. */ @media (max-width: 767.98px) { .sp-chat-body { max-height: none; } .sp-chat-row { height: auto; } .sp-chat-messages { max-height: 60vh; } } .sp-chat-side { overflow: auto; } .sp-chat-main { min-width: 0; /* so the title can truncate instead of widening the column */ min-height: 0; } /* min-height: 0 is what makes the transcript give way instead of the composer. A flex item will not shrink below its own content unless it is told to, and without this the note that appears under the composer while a request runs pushed the page 14px past the viewport, which is a scrollbar on a screen that is supposed to have none. */ .sp-chat-messages { background: #f8f9fa; min-height: 0; } .sp-bubble { max-width: 75%; border-radius: 12px; padding: .5rem .75rem; margin-bottom: .5rem; overflow-wrap: anywhere; } .sp-bubble-user { background: #0d6efd; color: #fff; margin-left: auto; } /* The date and the author line of a bubble are secondary text, and on the blue bubble the secondary colour of the theme would be unreadable. */ .sp-bubble-user .text-body-secondary { color: rgba(255, 255, 255, .75) !important; } .sp-bubble-agent { background: #fff; border: 1px solid #dee2e6; } .sp-bubble-system { max-width: 90%; text-align: center; } .sp-bubble p:last-child { margin-bottom: 0; } .sp-bubble code { background: rgba(0, 0, 0, .06); padding: 0 .2rem; border-radius: 3px; } .sp-bubble-user code { background: rgba(255, 255, 255, .2); color: inherit; } /* The dot of a conversation that is still running. No dot at all when it is over. */ .sp-live-dot { width: .6rem; height: .6rem; border-radius: 50%; flex: 0 0 auto; } .sp-live-dot.working { background: #ffc107; animation: sp-pulse 1s infinite; } .sp-live-dot.asking { background: #0dcaf0; } @keyframes sp-pulse { 0% { opacity: 1; } 50% { opacity: .25; } 100% { opacity: 1; } } /* The customer picker floats over the composer: it must cover it, not push it down. */ .sp-picker { z-index: 1050; max-height: 14rem; overflow: auto; width: 30rem; max-width: 100%; } /* C1: the conversations and the rows of the picker are clicked. */ .sp-chat-side .list-group-item, .sp-picker .list-group-item { cursor: pointer; } .sp-picker .list-group-item.text-body-secondary { cursor: default; } /* A secret shown once: monospaced and spaced out, because it gets copied by hand. */ .sp-secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: .08em; user-select: all; }