:root {
    --instant-navy: #25364f;
    --instant-blue: #3d5f87;
    --instant-blue-soft: #eaf1f8;
    --instant-orange: #f36b21;
    --instant-rule: #aebbd0;
    --instant-paper: #fbfcfe;
}

.friendspace-instant-page {
    min-height: 100vh;
    background:
        repeating-linear-gradient(0deg, rgba(106, 124, 151, .045) 0, rgba(106, 124, 151, .045) 1px, transparent 1px, transparent 24px),
        #e9eef4;
}

.friendspace-instant-main {
    width: min(1280px, calc(100% - 2rem));
    margin: 1rem auto 2rem;
}

.friendspace-instant-window {
    overflow: hidden;
    border: 1px solid #899bb5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(37, 54, 79, .18), 0 2px 4px rgba(37, 54, 79, .16);
}

.friendspace-instant-appbar {
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem .8rem;
    border-bottom: 3px solid var(--instant-orange);
    color: #fff;
    background: linear-gradient(110deg, #1f2d42, #385778 66%, #29435f);
}

.friendspace-instant-classic-actions { display: none; align-items: center; gap: .4rem; }
.friendspace-instant-classic-actions a,
.friendspace-instant-classic-actions button { display: inline-flex; min-height: 32px; align-items: center; gap: .35rem; padding: 0 .6rem; border: 1px solid rgba(255,255,255,.28); border-radius: 4px; color: #fff; background: rgba(15,23,42,.28); font-size: .62rem; font-weight: 850; }
.friendspace-instant-classic-actions a:hover,
.friendspace-instant-classic-actions button:hover { border-color: #fdba74; background: rgba(249,115,22,.34); }

.friendspace-instant-classic-root body > nav { display: none; }
.friendspace-instant-classic-root .friendspace-instant-main { width: 100%; margin: 0; }
.friendspace-instant-classic-root .friendspace-instant-window { min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
.friendspace-instant-classic-root .friendspace-instant-workspace { min-height: calc(100dvh - 62px); }
.friendspace-instant-classic-root .friendspace-instant-classic-actions { display: flex; }
.friendspace-instant-chat-window-root .friendspace-instant-brand,
.friendspace-instant-chat-window-root .friendspace-instant-status-message-label,
.friendspace-instant-chat-window-root .friendspace-instant-status-update,
.friendspace-instant-chat-window-root .friendspace-instant-classic-actions a { display: none; }
.friendspace-instant-chat-window-root .friendspace-instant-appbar { justify-content: space-between; }
.friendspace-instant-chat-window-root .friendspace-instant-self { flex: 1; }
@media (min-width: 801px) {
    .friendspace-instant-classic-root:not(.friendspace-instant-chat-window-root) .friendspace-instant-workspace { grid-template-columns: 1fr; }
    .friendspace-instant-classic-root:not(.friendspace-instant-chat-window-root) .friendspace-instant-chat { display: none; }
    .friendspace-instant-classic-root:not(.friendspace-instant-chat-window-root) .friendspace-instant-circle-list { border-right: 0; }
    .friendspace-instant-chat-window-root .friendspace-instant-workspace { grid-template-columns: 1fr; }
    .friendspace-instant-chat-window-root .friendspace-instant-circle-list { display: none; }
    .friendspace-instant-chat-window-root .friendspace-instant-chat { display: flex; min-height: calc(100dvh - 62px); }
    .friendspace-instant-chat-window-root .friendspace-instant-mobile-back { display: none; }
}
.friendspace-instant-circle-members { max-height: 242px; overflow-y: auto; border-bottom: 1px solid #c7d2df; }
.friendspace-instant-circle-member { display: flex; width: 100%; min-height: 58px; align-items: center; gap: .65rem; padding: .5rem .7rem; border-bottom: 1px solid #e2e8f0; text-align: left; background: #fff; }
.friendspace-instant-circle-member:hover { background: #fff8ee; }
.friendspace-instant-circle-member img { width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid #9aaac0; border-radius: 5px; object-fit: cover; }
.friendspace-instant-circle-member strong { display: block; overflow: hidden; color: var(--instant-navy); font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.friendspace-instant-circle-member span { display: block; overflow: hidden; color: #64748b; font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.friendspace-instant-circle-member span span i { display: inline; margin-right: .16rem; color: #f97316; font-size: .48rem; }
.friendspace-instant-circle-star { margin-left: auto; color: #f59e0b !important; }

.friendspace-instant-brand,
.friendspace-instant-self {
    display: flex;
    align-items: center;
}

.friendspace-instant-brand { gap: .55rem; }
.friendspace-instant-brand p { color: #fdba74; font-size: .56rem; font-weight: 900; letter-spacing: .18em; }
.friendspace-instant-brand h1 { margin-top: -.08rem; font-family: Georgia, 'Times New Roman', serif; font-size: 1.32rem; line-height: 1; }
.friendspace-instant-logo { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 6px; color: #fff; background: var(--instant-orange); box-shadow: inset 0 1px rgba(255,255,255,.32); }
.friendspace-instant-beta { align-self: flex-start; margin-top: .12rem; padding: .12rem .3rem; border: 1px solid rgba(255,255,255,.3); border-radius: 3px; color: #dbeafe; font-size: .48rem; font-weight: 900; letter-spacing: .08em; }

.friendspace-instant-self { min-width: 0; gap: .55rem; }
.friendspace-instant-self-avatar { position: relative; flex: 0 0 auto; }
.friendspace-instant-self-avatar img { width: 36px; height: 36px; border: 2px solid #fff; border-radius: 5px; object-fit: cover; }
.friendspace-instant-self-avatar i { position: absolute; right: -2px; bottom: -1px; width: 11px; height: 11px; border: 2px solid var(--instant-navy); border-radius: 50%; background: #22c55e; }
.friendspace-instant-self-avatar i[data-status="away"] { background: #f59e0b; }
.friendspace-instant-self-avatar i[data-status="busy"] { background: #ef4444; }
.friendspace-instant-self-avatar i[data-status="invisible"] { background: #94a3b8; }
.friendspace-instant-self-copy { display: grid; min-width: 110px; }
.friendspace-instant-self-copy strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.friendspace-instant-self-copy span { color: #cbd5e1; font-size: .58rem; }
.friendspace-instant-status-label select,
.friendspace-instant-status-message-label input { height: 32px; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; color: #fff; background: rgba(15,23,42,.35); font-size: .7rem; outline: none; }
.friendspace-instant-status-label select { padding: 0 1.7rem 0 .55rem; }
.friendspace-instant-status-label option { color: #172033; background: #fff; }
.friendspace-instant-status-message-label { min-width: 0; }
.friendspace-instant-status-message-label input { width: min(270px, 26vw); padding: 0 .6rem; }
.friendspace-instant-status-message-label input::placeholder { color: #cbd5e1; }
.friendspace-instant-status-update { display: inline-flex; height: 32px; align-items: center; justify-content: center; gap: .28rem; padding: 0 .58rem; border: 1px solid rgba(255,255,255,.34); border-radius: 4px; color: #fff; background: rgba(249,115,22,.78); font-size: .62rem; font-weight: 900; white-space: nowrap; }
.friendspace-instant-status-update:hover { border-color: #fed7aa; background: #ea580c; }
.friendspace-instant-status-update:disabled { cursor: wait; opacity: .8; }
.friendspace-instant-status-update.is-saved { border-color: #86efac; background: #15803d; }
.friendspace-instant-sound-toggle { display: inline-flex; height: 32px; align-items: center; justify-content: center; gap: .3rem; padding: 0 .62rem; border: 1px solid rgba(255,255,255,.34); border-radius: 4px; color: #fff; background: rgba(15,23,42,.34); font-size: .62rem; font-weight: 900; white-space: nowrap; }
.friendspace-instant-sound-toggle:hover { border-color: #fed7aa; background: rgba(249,115,22,.4); }
.friendspace-instant-sound-toggle.is-muted { color: #cbd5e1; background: rgba(15,23,42,.52); }
.friendspace-instant-status-label select:focus,
.friendspace-instant-status-message-label input:focus { border-color: #fdba74; box-shadow: 0 0 0 2px rgba(251,146,60,.22); }

.friendspace-instant-workspace {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    min-height: min(760px, calc(100vh - 150px));
    background: var(--instant-paper);
}

.friendspace-instant-circle-list {
    border-right: 1px solid var(--instant-rule);
    background: #f4f7fb;
}

.friendspace-instant-list-head {
    min-height: 78px;
    border-bottom-color: #c7d2df !important;
    background: linear-gradient(#fff, #edf3f8);
}
.friendspace-instant-list-head h2 { color: var(--instant-navy); font-family: Georgia, 'Times New Roman', serif; font-size: 1.18rem; }
.friendspace-instant-new { display: inline-flex; min-height: 34px; align-items: center; gap: .35rem; padding: 0 .65rem; border: 1px solid #d85612; border-radius: 4px; color: #fff; background: linear-gradient(#fb7d37, #e75c13); font-size: .68rem; font-weight: 850; box-shadow: inset 0 1px rgba(255,255,255,.3); }
.friendspace-instant-list-label { display: flex; align-items: center; justify-content: space-between; padding: .35rem .7rem; border-bottom: 1px solid #c7d2df; color: #53657d; background: #dfe8f2; font-size: .56rem; font-weight: 900; letter-spacing: .1em; }
.friendspace-instant-thread-list { overflow-y: auto; max-height: calc(100vh - 265px); }

.friendspace-instant-contact { position: relative; border-bottom: 1px solid #dbe3ec; background: #fff; }
.friendspace-instant-contact:hover { background: #fff8ee; }
.friendspace-instant-contact.is-active { background: #fff0dd; box-shadow: inset 4px 0 var(--instant-orange); }
.friendspace-instant-contact-main { min-height: 68px; padding: .62rem 2.8rem .62rem .7rem; cursor: pointer; }
.friendspace-instant-contact-avatar { position: relative; flex: 0 0 auto; }
.friendspace-instant-contact-avatar img { width: 40px; height: 40px; border: 1px solid #9aaac0; border-radius: 5px; object-fit: cover; }
.friendspace-instant-contact-dot { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: #94a3b8; }
.friendspace-instant-contact-dot[data-presence="online"] { background: #22c55e; }
.friendspace-instant-contact-dot[data-presence="away"] { background: #f59e0b; }
.friendspace-instant-contact-dot[data-presence="busy"] { background: #ef4444; }
.friendspace-instant-contact-dot[data-presence="offline"],
.friendspace-instant-contact-dot[data-presence="unknown"] { background: #94a3b8; }
.friendspace-instant-contact-name { color: #25364f; font-size: .78rem; font-weight: 850; }
.friendspace-instant-contact-summary { color: #64748b; font-size: .68rem; }
.friendspace-instant-contact-time { display: flex; align-items: center; justify-content: space-between; gap: .4rem; color: #94a3b8; font-size: .58rem; }
.friendspace-instant-presence-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friendspace-instant-presence-label[data-presence="online"] { color: #15803d; font-weight: 850; }
.friendspace-instant-unread { display: inline-flex; min-width: 18px; height: 18px; align-items: center; justify-content: center; padding: 0 .3rem; border-radius: 3px; color: #fff; background: var(--instant-orange); font-size: .55rem; font-weight: 900; }
.friendspace-instant-contact-close { position: absolute; top: 50%; right: .45rem; padding: .25rem; transform: translateY(-50%); color: #94a3b8; opacity: 0; font-size: .62rem; }
.friendspace-instant-contact:hover .friendspace-instant-contact-close,
.friendspace-instant-contact-close:focus { opacity: 1; }

.friendspace-instant-chat { min-width: 0; background: #fff; }
.friendspace-instant-chat-head { min-height: 78px; border-bottom: 1px solid #9aabc0 !important; background: linear-gradient(#fefefe, #e9f0f7); }
.friendspace-instant-chat-head > .flex { align-items: center !important; }
.friendspace-instant-chat-head img { border: 1px solid #8da0b8; border-radius: 5px !important; }
.friendspace-instant-chat-head p.font-semibold { color: var(--instant-navy); font-family: Georgia, 'Times New Roman', serif; font-size: 1.02rem; }
.friendspace-instant-mobile-back { display: none; align-items: center; gap: .3rem; margin-bottom: .45rem; color: #c2410c; font-size: .68rem; font-weight: 850; }

.friendspace-instant-transcript {
    background:
        linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)),
        repeating-linear-gradient(0deg, #d9e1ea 0, #d9e1ea 1px, transparent 1px, transparent 25px),
        #fff;
}
.friendspace-instant-message-row { display: flex; gap: .55rem; align-items: flex-start; }
.friendspace-instant-message-row.is-mine { flex-direction: row-reverse; }
.friendspace-instant-message-avatar { width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid #9bacbf; border-radius: 4px; object-fit: cover; }
.friendspace-instant-message-entry { width: min(82%, 680px); padding: .48rem .65rem; border: 1px solid #ccd7e3; border-left: 4px solid var(--instant-blue); border-radius: 3px; color: #334155; background: rgba(247,250,253,.96); box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.friendspace-instant-message-row.is-mine .friendspace-instant-message-entry { border-color: #f0caa9; border-right: 4px solid var(--instant-orange); border-left-width: 1px; background: rgba(255,248,238,.97); }
.friendspace-instant-message-byline { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .22rem; }
.friendspace-instant-message-byline strong { color: #315d91; font-size: .68rem; }
.friendspace-instant-message-row.is-mine .friendspace-instant-message-byline strong { color: #c2410c; }
.friendspace-instant-message-time { color: #94a3b8; font-size: .56rem; white-space: nowrap; }
.friendspace-instant-message-actions { display: flex; justify-content: flex-end; gap: .55rem; margin-top: .25rem; }
.friendspace-instant-message-actions button { color: #94a3b8; font-size: .56rem; font-weight: 750; }
.friendspace-instant-message-actions button:hover { color: #be123c; }

.friendspace-instant-composer { border-top: 1px solid #9aabc0 !important; background: linear-gradient(#edf3f8, #e1e9f2); }
.friendspace-instant-composer { position: relative; }
.friendspace-instant-composer .mb-2 { border-color: #c7d2df !important; border-radius: 5px !important; background: #f8fbfe !important; }
.friendspace-instant-composer .message-tool-btn { min-height: 31px; border-color: #bac7d6; border-radius: 4px; color: #485c75; background: linear-gradient(#fff, #e8eef5); font-size: .66rem; box-shadow: inset 0 1px #fff; }
.friendspace-instant-composer .message-tool-btn:hover { border-color: #ee9b61; color: #c2410c; background: #fff5e8; }
.friendspace-instant-composer .friendspace-nudge-btn { color: #b45309; }
.friendspace-instant-entry textarea { min-height: 50px; max-height: 120px; resize: vertical; border-radius: 4px; background: #fff; font-size: .82rem; line-height: 1.45; }
.friendspace-instant-send { display: inline-flex; min-width: 82px; min-height: 50px; align-items: center; justify-content: center; gap: .4rem; border: 1px solid #d85612; border-radius: 4px; color: #fff; background: linear-gradient(#fb7d37, #e75c13); font-size: .76rem; font-weight: 900; box-shadow: inset 0 1px rgba(255,255,255,.35); }

.friendspace-smiley-picker { position: absolute; z-index: 30; right: 1rem; bottom: calc(100% - 48px); width: min(390px, calc(100% - 2rem)); overflow: hidden; border: 1px solid #7f93ad; border-radius: 6px; background: #fff; box-shadow: 0 12px 30px rgba(15,23,42,.24); }
.friendspace-smiley-head { display: flex; min-height: 48px; align-items: center; justify-content: space-between; padding: .55rem .7rem; border-bottom: 3px solid var(--instant-orange); color: #fff; background: linear-gradient(#344e70, #25364f); }
.friendspace-smiley-head div { display: grid; }
.friendspace-smiley-head strong { font-family: Georgia, 'Times New Roman', serif; font-size: .88rem; }
.friendspace-smiley-head span { color: #dbeafe; font-size: .56rem; }
.friendspace-smiley-head button { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 3px; color: #fff; background: rgba(15,23,42,.25); }
.friendspace-smiley-categories { display: flex; gap: .25rem; overflow-x: auto; padding: .45rem .5rem; border-bottom: 1px solid #cbd5e1; background: #edf3f8; }
.friendspace-smiley-categories button { min-height: 28px; padding: 0 .55rem; border: 1px solid #bac7d6; border-radius: 3px; color: #52647b; background: linear-gradient(#fff, #e8eef5); font-size: .58rem; font-weight: 850; white-space: nowrap; }
.friendspace-smiley-categories button.is-active { border-color: #d85612; color: #fff; background: linear-gradient(#fb7d37, #e75c13); }
.friendspace-smiley-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: .3rem; max-height: 210px; overflow-y: auto; padding: .65rem; background: #fbfcfe; }
.friendspace-smiley-icon { display: grid; aspect-ratio: 1; place-items: center; border: 1px solid #d5dee8; border-radius: 4px; background: #fff; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif; font-size: 1.35rem; line-height: 1; transition: transform .1s ease, border-color .1s ease, background .1s ease; }
.friendspace-smiley-icon:hover,
.friendspace-smiley-icon:focus { border-color: var(--instant-orange); background: #fff5e8; outline: none; transform: scale(1.1); }

@media (max-width: 800px) {
    .friendspace-instant-main { width: 100%; margin: 0; }
    .friendspace-instant-window { border-right: 0; border-left: 0; border-radius: 0; }
    .friendspace-instant-appbar { flex-wrap: wrap; align-items: center; }
    .friendspace-instant-self { order: 3; width: 100%; }
    .friendspace-instant-self-copy { display: none; }
    .friendspace-instant-status-message-label { flex: 1; }
    .friendspace-instant-status-message-label input { width: 100%; }
    .friendspace-instant-status-update { width: 34px; padding: 0; }
    .friendspace-instant-status-update span { display: none; }
    .friendspace-instant-sound-toggle { width: 34px; padding: 0; }
    .friendspace-instant-sound-toggle span { display: none; }
    .friendspace-instant-workspace { grid-template-columns: 1fr; min-height: calc(100dvh - 125px); }
    .friendspace-instant-circle-list { min-height: calc(100dvh - 125px); border-right: 0; }
    .friendspace-instant-thread-list { max-height: calc(100dvh - 245px); }
    .friendspace-instant-chat { display: none; min-height: calc(100dvh - 125px); }
    .friendspace-instant-workspace.instant-chat-open .friendspace-instant-circle-list { display: none; }
    .friendspace-instant-workspace.instant-chat-open .friendspace-instant-chat { display: flex; }
    .friendspace-instant-mobile-back { display: inline-flex; }
    .friendspace-instant-classic-actions span { display: none; }
    .friendspace-instant-classic-root .friendspace-instant-workspace { min-height: calc(100dvh - 108px); }
    .friendspace-instant-classic-root .friendspace-instant-circle-list,
    .friendspace-instant-classic-root .friendspace-instant-chat { min-height: calc(100dvh - 108px); }
    .friendspace-instant-message-entry { width: calc(100% - 36px); }
}

@media (max-width: 480px) {
    .friendspace-instant-brand h1 { font-size: 1.05rem; }
    .friendspace-instant-beta { display: none; }
    .friendspace-instant-self { gap: .35rem; }
    .friendspace-instant-status-label select { width: 92px; }
    .friendspace-instant-message-avatar { display: none; }
    .friendspace-instant-message-entry { width: 94%; }
    .friendspace-instant-composer { padding: .65rem !important; }
    .friendspace-instant-send { min-width: 54px; }
    .friendspace-instant-send span { display: none; }
    .friendspace-smiley-picker { right: .5rem; bottom: calc(100% - 42px); width: calc(100% - 1rem); }
    .friendspace-smiley-grid { grid-template-columns: repeat(7, 1fr); }
}

/* Desktop Classic Instant uses a deliberately compact buddy window. Its narrow
   viewport should not be mistaken for the single-window mobile experience. */
.friendspace-instant-buddy-window-root .friendspace-instant-workspace,
.friendspace-instant-buddy-window-root .friendspace-instant-workspace.instant-chat-open { grid-template-columns: 1fr; }
.friendspace-instant-buddy-window-root .friendspace-instant-circle-list,
.friendspace-instant-buddy-window-root .friendspace-instant-workspace.instant-chat-open .friendspace-instant-circle-list { display: block; min-height: calc(100dvh - 108px); border-right: 0; }
.friendspace-instant-buddy-window-root .friendspace-instant-chat,
.friendspace-instant-buddy-window-root .friendspace-instant-workspace.instant-chat-open .friendspace-instant-chat { display: none; }
.friendspace-instant-buddy-window-root .friendspace-instant-thread-list { max-height: calc(100dvh - 350px); }

/* The in-page app supplies its own window controls outside this iframe. */
.friendspace-instant-embedded-root body { min-height: 100dvh; }
.friendspace-instant-embedded-root .friendspace-instant-classic-actions { display: none; }
.friendspace-instant-embedded-root .friendspace-instant-main { min-height: 100dvh; }
.friendspace-instant-embedded-root .friendspace-instant-window { min-height: 100dvh; border-radius: 0; border: 0; box-shadow: none; }