/* v0.23 Ask Flappy: the in-game support chat. Island colours, Lilita One, solid bands (no scrims). */
.faby-chat { position: fixed; inset: 0; z-index: 9000; background: rgba(10, 18, 40, .55); display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .18s; }
.faby-chat.on { opacity: 1; pointer-events: auto; }
.fc-panel { width: min(440px, 100%); height: min(720px, 92dvh); background: #eaf6ff; border: 3px solid #14161f; border-bottom: 0; border-radius: 22px 22px 0 0; display: flex; flex-direction: column; overflow: hidden; transform: translateY(24px); transition: transform .2s; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.faby-chat.on .fc-panel { transform: none; }
@media (min-width: 700px) { .faby-chat { align-items: center; } .fc-panel { border-radius: 22px; border-bottom: 3px solid #14161f; } }
.fc-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #1b2a5c; color: #fff; border-bottom: 3px solid #14161f; }
.fc-av { width: 40px; height: 40px; object-fit: contain; background: #4fb5f0; border: 2px solid #14161f; border-radius: 50%; }
.fc-title { flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.fc-title b { font-family: 'Lilita One', system-ui, sans-serif; font-weight: 400; font-size: 20px; letter-spacing: .5px; }
.fc-title small { font-size: 12px; color: #a9c8ff; }
.fc-x { width: 36px; height: 36px; border-radius: 10px; border: 2px solid #14161f; background: #e84a4a; color: #fff; font-weight: 900; cursor: pointer; }
.fc-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain; }
.fc-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 88%; }
.fc-b { padding: 8px 12px; border-radius: 16px; font-size: 15px; line-height: 1.35; border: 2px solid #14161f; max-width: 88%; word-wrap: break-word; position: relative; }
.fc-b.faby { background: #fff; border-bottom-left-radius: 4px; max-width: 100%; }
.fc-b.staff { background: #d9f7c9; border-color: #2f7d1f; border-bottom-left-radius: 4px; max-width: 100%; }
.fc-b.me { align-self: flex-end; background: #2a86e0; color: #fff; border-bottom-right-radius: 4px; }
.fc-b.me.queued { opacity: .6; }
.fc-eyes { position: absolute; left: -12px; bottom: -8px; font-size: 14px; }
.fc-who { font-size: 11px; font-weight: 700; color: #2f7d1f; margin-left: 4px; }
.fc-react { font-size: 18px; margin-left: 6px; }
.fc-sys { align-self: center; font-size: 12px; color: #4a5a7a; background: #d6e8fa; padding: 3px 10px; border-radius: 10px; }
.fc-card { background: #fff; border: 2px solid #14161f; border-radius: 14px; padding: 8px 10px; font-size: 13px; min-width: 210px; }
.fc-card b { font-family: 'Lilita One', system-ui, sans-serif; font-weight: 400; font-size: 15px; display: block; margin-bottom: 4px; color: #1b2a5c; }
.fc-card table { width: 100%; border-collapse: collapse; }
.fc-card td { padding: 2px 0; } .fc-card td + td { text-align: right; font-weight: 700; }
.fc-card.gift { background: #fff6d6; border-color: #b8860b; }
.fc-card.grant { background: #d9f7c9; border-color: #2f7d1f; } .fc-card.grant span { font-weight: 800; }
.fc-opts { display: flex; gap: 8px; } .fc-opts .btn { flex: 1; }
.fc-steps { display: flex; gap: 4px; } .fc-steps span { flex: 1; text-align: center; font-size: 11px; padding: 4px 2px; border-radius: 8px; background: #e4ebf3; color: #6b7a90; }
.fc-steps span.on { background: #3fbf2e; color: #fff; font-weight: 700; }
.fc-stars { margin-top: 6px; display: flex; align-items: center; gap: 2px; } .fc-stars small { margin-right: 6px; }
.fc-stars button { border: 0; background: none; font-size: 22px; color: #f2b705; cursor: pointer; padding: 0 1px; }
.fc-go { margin-top: 2px; }
.fc-rate { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #6b7a90; margin-left: 4px; }
.fc-rate button { border: 1px solid #b9c6d8; background: #fff; border-radius: 8px; padding: 1px 6px; cursor: pointer; font-size: 13px; }
.fc-rate button.on { background: #ffe58a; } .fc-rate button:disabled { cursor: default; }
.fc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.fc-chip { border: 2px solid #2a86e0; color: #1b5fae; background: #fff; border-radius: 16px; padding: 5px 11px; font-size: 13px; font-weight: 700; cursor: pointer; }
.fc-typing { padding: 0 16px 6px; display: flex; gap: 4px; } .fc-typing[hidden] { display: none; }
.fc-typing span { width: 7px; height: 7px; background: #7d8ba3; border-radius: 50%; animation: fcDot 1s infinite; } .fc-typing span:nth-child(2) { animation-delay: .15s; } .fc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes fcDot { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-4px); opacity: 1; } }
.fc-bar { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #1b2a5c; border-top: 3px solid #14161f; }
.fc-in { flex: 1; min-width: 0; border: 2px solid #14161f; border-radius: 14px; padding: 10px 12px; font-size: 16px; }
.fc-send { width: 46px; border: 2px solid #14161f; border-radius: 14px; background: #3fbf2e; color: #fff; font-size: 18px; cursor: pointer; }
/* Settings card + the unread dot */
.faby-card, .gs-card.faby-card { position: relative; display: flex; flex-direction: row; align-items: center; gap: 10px; cursor: pointer; width: 100%; text-align: left; color: #fff; font: inherit; }
.faby-card img { width: 44px; height: 44px; object-fit: contain; background: #4fb5f0; border: 2px solid #14161f; border-radius: 50%; }
.faby-card .fcard-t { flex: 1; text-align: left; } .faby-card .fcard-t b { display: block; } .faby-card .fcard-t small { opacity: .8; }
.faby-card.has-dot::after, .tb-gear.has-dot::after { content: ''; position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; background: #e84a4a; border: 2px solid #fff; border-radius: 50%; }
.tb-gear { position: relative; }
.fc-chips.wrap { align-items: center; } .fc-chips.wrap small { color: #6b7a90; margin-right: 2px; }
.fc-card.csat { background: #fff6d6; border-color: #b8860b; } .fc-card.csat small { display: block; margin-top: 4px; color: #6b5200; }
.fc-faces { display: flex; gap: 6px; } .fc-faces button { font-size: 24px; background: #fff; border: 2px solid #e0c46a; border-radius: 12px; padding: 2px 8px; cursor: pointer; }
.fc-faces button.on { background: #ffe58a; border-color: #b8860b; } .fc-faces button:disabled:not(.on) { opacity: .45; }
/* v0.24.1: guests are asked to sign in first */
.fc-card.signin { background: #e8f1ff; border-color: #1d5fd0; }
.fc-card.signin span { display: block; margin: 4px 0 8px; font-size: 13px; line-height: 1.35; }
.fc-card.signin .fc-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.fc-ver { font: 600 10px system-ui; color: #cfe1ff; margin-left: 4px; vertical-align: middle; }