/* GewoonChatten 0.65.00 — Cody visual unification. One last component layer: all theme packs keep their palette/background, while geometry, density, states and modal behaviour stay identical. */ :root{ --gc-u-bg:var(--bg,#0b0e14); --gc-u-panel:var(--panel,#141a24); --gc-u-panel2:var(--panel2,#1c2430); --gc-u-line:var(--line,#3d4a5e); --gc-u-text:var(--text,#fff); --gc-u-muted:var(--muted,#b7c0cf); --gc-u-accent:var(--user-accent,var(--gold,#f0bd54)); --gc-u-good:var(--good,#65d49a); --gc-u-danger:var(--danger,#ff6b72); --gc-u-on-accent:#0c1118; --gc-u-surface:color-mix(in srgb,var(--gc-u-panel) 94%,transparent); --gc-u-surface2:color-mix(in srgb,var(--gc-u-panel2) 96%,transparent); --gc-u-hover:color-mix(in srgb,var(--gc-u-panel2) 78%,var(--gc-u-accent) 8%); --gc-u-soft-accent:color-mix(in srgb,var(--gc-u-panel2) 86%,var(--gc-u-accent) 14%); --gc-u-soft-danger:color-mix(in srgb,var(--gc-u-panel2) 85%,var(--gc-u-danger) 15%); --gc-u-shadow:0 18px 55px color-mix(in srgb,#000 60%,transparent); --gc-u-radius-xs:5px; --gc-u-radius-sm:7px; --gc-u-radius:9px; --gc-u-radius-lg:11px; --gc-u-top-h:54px; --gc-u-composer-h:54px; } /* Accountverwijdering met bedenktijd */ #chatOptionsModal .gcAccountDeletionBox{ margin-top:16px;padding:16px;border:1px solid color-mix(in srgb,var(--gc-danger,#ef5f6c) 48%,var(--gc-line,#35445a)); border-radius:14px;background:color-mix(in srgb,var(--gc-danger,#ef5f6c) 8%,var(--gc-panel,#111a27));color:var(--gc-text,#f4f7fb) } #chatOptionsModal .gcAccountDeletionHead{display:flex;align-items:flex-start;gap:12px;margin-bottom:13px} #chatOptionsModal .gcAccountDeletionHead>span{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--gc-danger,#ef5f6c) 18%,transparent);font-size:18px} #chatOptionsModal .gcAccountDeletionHead h4{margin:0 0 4px;font-size:16px} #chatOptionsModal .gcAccountDeletionHead p,#chatOptionsModal .gcAccountDeletionNotice{margin:0;color:var(--gc-muted,#aeb8c7);font-size:13px;line-height:1.45} #chatOptionsModal .gcAccountDeletionNotice{margin-bottom:12px} #chatOptionsModal .gcDangerBtn{width:100%;min-height:42px;margin-top:10px;border:1px solid color-mix(in srgb,var(--gc-danger,#ef5f6c) 72%,#fff);border-radius:10px;background:var(--gc-danger,#c84351);color:#fff;font-weight:800;cursor:pointer} #chatOptionsModal .gcDangerBtn:disabled{opacity:.62;cursor:wait} #chatOptionsModal .gcAccountDeletionScheduled{display:grid;gap:5px;padding:13px;border-radius:11px;background:color-mix(in srgb,var(--gc-danger,#ef5f6c) 10%,transparent)} #chatOptionsModal .gcAccountDeletionScheduled b{color:var(--gc-danger,#ff7a84)} #chatOptionsModal .gcAccountDeletionScheduled span{font-size:16px;font-weight:900} #chatOptionsModal .gcAccountDeletionScheduled small{color:var(--gc-muted,#aeb8c7);line-height:1.4} #chatOptionsModal #gcCancelAccountDeletion{width:100%;margin-top:10px} html[data-chat-theme="light"] #chatOptionsModal .gcAccountDeletionBox{background:#fff7f7;color:#172033} @media(max-width:600px){#chatOptionsModal .gcAccountDeletionBox{padding:13px}#chatOptionsModal .gcAccountDeletionHead>span{flex-basis:34px;height:34px}} body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubPane>button.gcCodyAccountDeleteRow{color:var(--gc-danger,#ff7a84)!important;border-color:color-mix(in srgb,var(--gc-danger,#ef5f6c) 34%,var(--gc-u-line))!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubPane>button.gcCodyAccountDeleteRow>i{background:color-mix(in srgb,var(--gc-danger,#ef5f6c) 18%,var(--gc-u-panel2))!important;color:var(--gc-danger,#ff7a84)!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubPane>button.gcCodyAccountDeleteRow:hover{background:color-mix(in srgb,var(--gc-danger,#ef5f6c) 9%,var(--gc-u-hover))!important} /* --- Shared surfaces / fields / buttons: theme-neutral geometry --- */ body.gcCodyFamiliarV3{color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 .panel, body.gcCodyFamiliarV3 .modalCard, body.gcCodyFamiliarV3 .authbox, body.gcCodyFamiliarV3 .gcProfileDrawer, body.gcCodyFamiliarV3 .emojiPanel, body.gcCodyFamiliarV3 .reactionPicker, body.gcCodyFamiliarV3 .actionTray, body.gcCodyFamiliarV3 .gcMobileMoreCard{ color:var(--gc-u-text)!important; border-color:var(--gc-u-line)!important; } body.gcCodyFamiliarV3 input, body.gcCodyFamiliarV3 textarea, body.gcCodyFamiliarV3 select{ color:var(--gc-u-text)!important; background:color-mix(in srgb,var(--gc-u-bg) 84%,var(--gc-u-panel) 16%)!important; border:1px solid var(--gc-u-line)!important; border-radius:var(--gc-u-radius-sm)!important; box-shadow:none!important; } body.gcCodyFamiliarV3 input::placeholder, body.gcCodyFamiliarV3 textarea::placeholder{color:color-mix(in srgb,var(--gc-u-muted) 82%,transparent)!important} body.gcCodyFamiliarV3 input:focus, body.gcCodyFamiliarV3 textarea:focus, body.gcCodyFamiliarV3 select:focus{outline:0!important;border-color:color-mix(in srgb,var(--gc-u-accent) 70%,var(--gc-u-line))!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--gc-u-accent) 18%,transparent)!important} body.gcCodyFamiliarV3 .primaryBtn{background:var(--gc-u-accent)!important;color:var(--gc-u-on-accent)!important;border:1px solid color-mix(in srgb,var(--gc-u-accent) 78%,#000 22%)!important;border-radius:var(--gc-u-radius-sm)!important;box-shadow:none!important} body.gcCodyFamiliarV3 .secondaryBtn{background:var(--gc-u-panel2)!important;color:var(--gc-u-text)!important;border:1px solid var(--gc-u-line)!important;border-radius:var(--gc-u-radius-sm)!important;box-shadow:none!important} body.gcCodyFamiliarV3 .primaryBtn:hover, body.gcCodyFamiliarV3 .secondaryBtn:hover{filter:none!important;transform:none!important;border-color:color-mix(in srgb,var(--gc-u-accent) 55%,var(--gc-u-line))!important} /* --- Main Cody shell --- */ body.gcCodyFamiliarV3 .gcClassicTop, body.gcCodyFamiliarV3 .topbar{ height:var(--gc-u-top-h)!important; min-height:var(--gc-u-top-h)!important; padding:0 10px!important; gap:7px!important; background:color-mix(in srgb,var(--gc-u-panel2) 96%,var(--gc-u-bg) 4%)!important; border-bottom:1px solid var(--gc-u-line)!important; box-shadow:none!important; } body.gcCodyFamiliarV3 .gcTopLeft, body.gcCodyFamiliarV3 .gcTopRight{gap:4px!important} body.gcCodyFamiliarV3 .gcHamburger, body.gcCodyFamiliarV3 .gcTopIcon{ width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important; border:1px solid transparent!important;border-radius:var(--gc-u-radius-sm)!important;background:transparent!important;color:var(--gc-u-text)!important; } body.gcCodyFamiliarV3 .gcHamburger:hover, body.gcCodyFamiliarV3 .gcTopIcon:hover{background:var(--gc-u-hover)!important;border-color:color-mix(in srgb,var(--gc-u-line) 75%,transparent)!important} body.gcCodyFamiliarV3 .coinPill, body.gcCodyFamiliarV3 .streakPill, body.gcCodyFamiliarV3 .statusChip{ height:30px!important;padding:0 8px!important;border-radius:15px!important;background:var(--gc-u-panel)!important;color:var(--gc-u-text)!important;border:1px solid var(--gc-u-line)!important; } body.gcCodyFamiliarV3 .layout{height:calc(100dvh - var(--gc-u-top-h))!important;background:transparent!important} body.gcCodyFamiliarV3 .quickbar{background:color-mix(in srgb,var(--gc-u-panel2) 96%,var(--gc-u-bg) 4%)!important;border-right:1px solid var(--gc-u-line)!important} body.gcCodyFamiliarV3 .quickbar button{border-radius:var(--gc-u-radius-xs)!important;color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 .quickbar button:hover, body.gcCodyFamiliarV3 .quickbar button.active{background:var(--gc-u-hover)!important;color:var(--gc-u-accent)!important} body.gcCodyFamiliarV3 .rooms{top:var(--gc-u-top-h)!important;background:var(--gc-u-panel2)!important;border-right:1px solid var(--gc-u-line)!important;box-shadow:12px 0 34px color-mix(in srgb,#000 50%,transparent)!important} body.gcCodyFamiliarV3 .roomShell, body.gcCodyFamiliarV3 .room, body.gcCodyFamiliarV3 .roomSelect{border-radius:var(--gc-u-radius-sm)!important} body.gcCodyFamiliarV3 .chat{background:color-mix(in srgb,var(--gc-u-bg) 91%,transparent)!important} body.gcCodyFamiliarV3 .gcRightPanel, body.gcCodyFamiliarV3 .users{background:color-mix(in srgb,var(--gc-u-panel2) 96%,var(--gc-u-bg) 4%)!important;border-left:1px solid var(--gc-u-line)!important} body.gcCodyFamiliarV3 .gcRightTabs{background:var(--gc-u-panel2)!important;border-color:var(--gc-u-line)!important} body.gcCodyFamiliarV3 .gcRightTabs button{color:var(--gc-u-muted)!important;border-color:color-mix(in srgb,var(--gc-u-line) 65%,transparent)!important} body.gcCodyFamiliarV3 .gcRightTabs button:hover, body.gcCodyFamiliarV3 .gcRightTabs button.active{background:var(--gc-u-hover)!important;color:var(--gc-u-text)!important;box-shadow:inset 0 -2px var(--gc-u-accent)!important} /* --- Userlist: quiet Cody rows, badges in one line --- */ body.gcCodyFamiliarV3 .gcUserScroll{padding:3px 2px 10px!important} body.gcCodyFamiliarV3 .userGroup{margin:3px 0 7px!important} body.gcCodyFamiliarV3 .userGroup>header{ min-height:28px!important;height:28px!important;padding:0 7px!important;margin:0 0 2px!important; border:0!important;border-radius:var(--gc-u-radius-xs)!important;background:color-mix(in srgb,var(--gc-u-panel) 72%,transparent)!important;color:var(--gc-u-muted)!important; } body.gcCodyFamiliarV3 .userGroup>header b{font-size:8.5px!important;letter-spacing:.08em!important} body.gcCodyFamiliarV3 .rankCount{font-size:8.5px!important;color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 .userCard{ min-height:46px!important;margin:2px 0!important;padding:4px 6px!important;border:1px solid transparent!important;border-radius:var(--gc-u-radius-sm)!important; background:transparent!important;color:var(--gc-u-text)!important;box-shadow:none!important; } body.gcCodyFamiliarV3 .userCard:hover{background:var(--gc-u-hover)!important;border-color:color-mix(in srgb,var(--gc-u-line) 70%,transparent)!important;transform:none!important} body.gcCodyFamiliarV3 .uAvatar{width:38px!important;height:38px!important;min-width:38px!important} body.gcCodyFamiliarV3 .uAvatar img, body.gcCodyFamiliarV3 .uAvatar>span{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important} body.gcCodyFamiliarV3 .uBody{min-width:0!important} body.gcCodyFamiliarV3 .uBody strong{font-size:11px!important;line-height:1.12!important} body.gcCodyFamiliarV3 .uBody small{font-size:8.5px!important;color:var(--gc-u-muted)!important;line-height:1.15!important} body.gcCodyFamiliarV3 .uMeta{gap:3px!important;align-items:center!important} body.gcCodyFamiliarV3 .staffPill, body.gcCodyFamiliarV3 .staffMessageBadge, body.gcCodyFamiliarV3 .rank{min-height:16px!important;padding:2px 5px!important;border-radius:4px!important;background:var(--gc-u-accent)!important;color:var(--gc-u-on-accent)!important;font-size:8px!important;font-weight:950!important;line-height:1!important} body.gcCodyFamiliarV3 .gcMuteHand, body.gcCodyFamiliarV3 [data-mute-indicator]{display:inline-grid!important;place-items:center!important;min-width:17px!important;height:17px!important;font-size:12px!important;line-height:1!important} /* --- Mainchat: compact rows, readable system/join/leave rows --- */ body.gcCodyFamiliarV3 .messages{padding:7px 12px 12px!important;background:transparent!important} body.gcCodyFamiliarV3 .msg{ grid-template-columns:38px minmax(0,1fr)!important;gap:8px!important;min-height:0!important;margin:0!important;padding:7px 4px!important; border:0!important;border-bottom:1px solid color-mix(in srgb,var(--gc-u-line) 48%,transparent)!important;background:transparent!important; } body.gcCodyFamiliarV3 .msg:hover{background:color-mix(in srgb,var(--gc-u-panel) 42%,transparent)!important} body.gcCodyFamiliarV3 .msg .avatar{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;border:1px solid var(--gc-u-line)!important;background:var(--gc-u-panel2)!important} body.gcCodyFamiliarV3 .meta{gap:5px!important;align-items:center!important} body.gcCodyFamiliarV3 .name{font-size:11px!important;line-height:1.15!important} body.gcCodyFamiliarV3 .time, body.gcCodyFamiliarV3 .edited, body.gcCodyFamiliarV3 .messageSeen{font-size:8.5px!important;color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 .body{margin-top:2px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--gc-u-text)!important;line-height:1.4!important;max-width:100%!important} body.gcCodyFamiliarV3 .gcCustomBubble{padding:6px 8px!important;border:1px solid color-mix(in srgb,var(--gc-u-line) 60%,transparent)!important;border-radius:var(--gc-u-radius-sm)!important;background:color-mix(in srgb,var(--gc-u-panel) 78%,transparent)!important} body.gcCodyFamiliarV3 .msgActions{gap:7px!important;margin-top:3px!important} body.gcCodyFamiliarV3 .msgActions button{color:var(--gc-u-muted)!important;font-size:9px!important} body.gcCodyFamiliarV3 .replyQuote{ margin:4px 0 3px!important;padding:4px 7px!important;border-left:3px solid var(--gc-u-accent)!important;border-radius:0 var(--gc-u-radius-xs) var(--gc-u-radius-xs) 0!important; background:color-mix(in srgb,var(--gc-u-panel) 68%,transparent)!important;color:var(--gc-u-muted)!important;font-size:9.5px!important; } body.gcCodyFamiliarV3 .replyQuote b{color:var(--gc-u-accent)!important} body.gcCodyFamiliarV3 .gcPresenceEvent, body.gcCodyFamiliarV3 .gcCommunityEvent{ display:flex!important;align-items:center!important;gap:7px!important;min-height:30px!important;padding:5px 8px!important;margin:2px 0!important; border:0!important;border-bottom:1px solid color-mix(in srgb,var(--gc-u-line) 38%,transparent)!important;border-radius:0!important;background:transparent!important;color:var(--gc-u-muted)!important; } body.gcCodyFamiliarV3 .gcPresenceEventIcon, body.gcCodyFamiliarV3 .gcCommunityEventIcon{flex:0 0 22px!important;width:22px!important;height:22px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:var(--gc-u-panel)!important;font-size:11px!important} body.gcCodyFamiliarV3 .gcPresenceEventText, body.gcCodyFamiliarV3 .gcCommunityEventText{min-width:0!important;font-size:9.5px!important;line-height:1.3!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important} /* --- Reply preview + composer: one Cody footer on all themes --- */ body.gcCodyFamiliarV3 .replyBar{ min-height:42px!important;margin:0!important;padding:6px 10px!important;border:0!important;border-top:1px solid var(--gc-u-line)!important;border-left:3px solid var(--gc-u-accent)!important;border-radius:0!important; background:var(--gc-u-panel)!important;color:var(--gc-u-text)!important; } body.gcCodyFamiliarV3 .replyBar small{color:var(--gc-u-muted)!important;font-size:8.5px!important} body.gcCodyFamiliarV3 .replyBar strong{color:var(--gc-u-accent)!important;font-size:9.5px!important} body.gcCodyFamiliarV3 .composer{ min-height:var(--gc-u-composer-h)!important;height:auto!important;grid-template-columns:40px 40px minmax(0,1fr) 42px!important;gap:6px!important;padding:7px 9px!important; border:0!important;border-top:1px solid var(--gc-u-line)!important;background:var(--gc-u-panel2)!important; } body.gcCodyFamiliarV3 .composer>button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;border:1px solid var(--gc-u-line)!important;border-radius:50%!important;background:var(--gc-u-panel)!important;color:var(--gc-u-text)!important;box-shadow:none!important} body.gcCodyFamiliarV3 .composer>button:hover{background:var(--gc-u-hover)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 45%,var(--gc-u-line))!important} body.gcCodyFamiliarV3 .composer .composerSend{background:var(--gc-u-accent)!important;color:var(--gc-u-on-accent)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 75%,#000)!important} body.gcCodyFamiliarV3 .composer textarea{height:40px!important;min-height:40px!important;max-height:120px!important;padding:9px 14px!important;border-radius:20px!important;background:color-mix(in srgb,var(--gc-u-bg) 86%,var(--gc-u-panel) 14%)!important;color:var(--gc-u-text)!important;line-height:20px!important} body.gcCodyFamiliarV3 .typing{height:19px!important;min-height:19px!important;padding:2px 9px!important;color:var(--gc-u-muted)!important;font-size:9px!important;background:transparent!important} body.gcCodyFamiliarV3 .actionTray{background:var(--gc-u-panel2)!important;border:1px solid var(--gc-u-line)!important;border-radius:var(--gc-u-radius)!important;box-shadow:var(--gc-u-shadow)!important} body.gcCodyFamiliarV3 .actionTray button{border-radius:var(--gc-u-radius-sm)!important;background:var(--gc-u-panel)!important;color:var(--gc-u-text)!important;border:1px solid color-mix(in srgb,var(--gc-u-line) 75%,transparent)!important} body.gcCodyFamiliarV3 .actionTray button:hover{background:var(--gc-u-hover)!important} /* --- Emoji / stickers / reactions --- */ body.gcCodyFamiliarV3 .emojiPanel, body.gcCodyFamiliarV3 .reactionPicker{background:var(--gc-u-panel2)!important;border:1px solid var(--gc-u-line)!important;border-radius:var(--gc-u-radius)!important;box-shadow:var(--gc-u-shadow)!important} body.gcCodyFamiliarV3 .emojiHead, body.gcCodyFamiliarV3 .reactionPickerHead{border-color:var(--gc-u-line)!important;background:transparent!important} body.gcCodyFamiliarV3 .emojiTabs{gap:2px!important;padding:3px!important;border:1px solid var(--gc-u-line)!important;border-radius:var(--gc-u-radius-sm)!important;background:var(--gc-u-panel)!important} body.gcCodyFamiliarV3 .emojiTabs button{min-height:31px!important;padding:4px 8px!important;border-radius:var(--gc-u-radius-xs)!important;background:transparent!important;color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 .emojiTabs button.active{background:var(--gc-u-soft-accent)!important;color:var(--gc-u-text)!important;box-shadow:inset 0 -2px var(--gc-u-accent)!important} body.gcCodyFamiliarV3 .emojiGrid{gap:5px!important;padding:7px 1px!important} body.gcCodyFamiliarV3 .emojiGrid button{border-radius:var(--gc-u-radius-sm)!important;background:transparent!important;border:1px solid transparent!important} body.gcCodyFamiliarV3 .emojiGrid button:hover{background:var(--gc-u-hover)!important;border-color:color-mix(in srgb,var(--gc-u-line) 65%,transparent)!important} body.gcCodyFamiliarV3 .stickerTile img, body.gcCodyFamiliarV3 [data-sticker-url] img{max-width:86px!important;max-height:86px!important;object-fit:contain!important} /* --- User/profile drawer: same palette and Cody density in every theme --- */ body.gcCodyFamiliarV3 #gcProfileMenu.gcProfileMenuCody{background:var(--gc-u-panel2)!important;border:1px solid var(--gc-u-line)!important;color:var(--gc-u-text)!important;box-shadow:var(--gc-u-shadow)!important} body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileDrawerHead, body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileDrawerFooter{background:var(--gc-u-panel2)!important;border-color:var(--gc-u-line)!important} body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuGroup{background:color-mix(in srgb,var(--gc-u-panel) 88%,transparent)!important;border-color:color-mix(in srgb,var(--gc-u-line) 72%,transparent)!important} body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuLabel{color:var(--gc-u-accent)!important} body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuGroup>button, body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuGroup>a{color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-line) 45%,transparent)!important;background:transparent!important} body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuGroup>button:hover, body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuGroup>a:hover{background:var(--gc-u-hover)!important} body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuIcon{background:var(--gc-u-panel2)!important;border-color:var(--gc-u-line)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuCopy b{color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuCopy small{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileDrawerClose{background:var(--gc-u-panel)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-line)!important} /* --- Private chat: Cody window, safe message menu, no overlap --- */ body.gcCodyFamiliarV3 #pmModal .pmCard, body.gcCodyFamiliarV3 #pmModal .gcPmCard{background:var(--gc-u-panel2)!important;border:1px solid var(--gc-u-line)!important;border-radius:var(--gc-u-radius-lg)!important;box-shadow:var(--gc-u-shadow)!important;color:var(--gc-u-text)!important;overflow:hidden!important} body.gcCodyFamiliarV3 #pmModal .pmHead{min-height:58px!important;padding:7px 54px 7px 10px!important;background:var(--gc-u-panel2)!important;border-bottom:1px solid var(--gc-u-line)!important} body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity h3{color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity small{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #pmModal .pmMessages{background:color-mix(in srgb,var(--gc-u-bg) 92%,var(--gc-u-panel) 8%)!important;border:0!important;border-radius:0!important;padding:10px!important;scrollbar-color:color-mix(in srgb,var(--gc-u-accent) 34%,var(--gc-u-line)) transparent!important} body.gcCodyFamiliarV3 #pmModal .pm{margin:6px 0!important;max-width:min(82%,680px)!important} body.gcCodyFamiliarV3 #pmModal .pm div.pmBody, body.gcCodyFamiliarV3 #pmModal .pm>div:not(.pmMessageTools):not(.pmReplyQuote){border-radius:var(--gc-u-radius)!important;background:var(--gc-u-panel)!important;color:var(--gc-u-text)!important;border:1px solid color-mix(in srgb,var(--gc-u-line) 58%,transparent)!important;box-shadow:none!important} body.gcCodyFamiliarV3 #pmModal .pm.mine div.pmBody, body.gcCodyFamiliarV3 #pmModal .pm.mine>div:not(.pmMessageTools):not(.pmReplyQuote){background:color-mix(in srgb,var(--gc-u-panel2) 78%,var(--gc-u-accent) 10%)!important} body.gcCodyFamiliarV3 #pmModal .pmMeta, body.gcCodyFamiliarV3 #pmModal .pmReceipt{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #pmModal .pmActionToggle{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #pmModal .pmActionToggle:hover, body.gcCodyFamiliarV3 #pmModal .pm.actionsOpen .pmActionToggle{background:var(--gc-u-hover)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #pmModal .pmMessageTools, body.gcCodyFamiliarV3 #pmModal .pm:hover .pmMessageTools, body.gcCodyFamiliarV3 #pmModal .pm:focus-within .pmMessageTools{ background:var(--gc-u-panel2)!important;border:1px solid var(--gc-u-line)!important;color:var(--gc-u-text)!important;box-shadow:var(--gc-u-shadow)!important; overflow:auto!important;overscroll-behavior:contain!important; } body.gcCodyFamiliarV3 #pmModal .pmMessageTools button.pmToolRow, body.gcCodyFamiliarV3 #pmModal .pmMessageTools button.pmTranslateAction{color:var(--gc-u-text)!important;background:transparent!important} body.gcCodyFamiliarV3 #pmModal .pmMessageTools button.pmToolRow:hover, body.gcCodyFamiliarV3 #pmModal .pmMessageTools button.pmTranslateAction:hover{background:var(--gc-u-hover)!important} body.gcCodyFamiliarV3 #pmModal .pmMessageTools .pmToolCopy small{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #pmModal .pmReplyQuote{background:color-mix(in srgb,var(--gc-u-panel) 76%,transparent)!important;border-left-color:var(--gc-u-accent)!important} body.gcCodyFamiliarV3 #pmModal .pmReplyQuote b{color:var(--gc-u-accent)!important} body.gcCodyFamiliarV3 #pmModal .pmReplyQuote span{color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #pmModal .pmReplyBar{background:var(--gc-u-panel)!important;border-color:var(--gc-u-line)!important;border-left-color:var(--gc-u-accent)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #pmModal .pmReplyBar small{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #pmModal .pmBottom{background:var(--gc-u-panel2)!important;border-top:1px solid var(--gc-u-line)!important} body.gcCodyFamiliarV3 #pmModal .pmComposer{min-height:54px!important;display:grid!important;align-items:end!important;gap:6px!important;padding:7px!important;background:var(--gc-u-panel2)!important;border:0!important} body.gcCodyFamiliarV3 #pmModal .pmComposer textarea{min-height:40px!important;max-height:120px!important;padding:9px 13px!important;border-radius:20px!important;background:color-mix(in srgb,var(--gc-u-bg) 86%,var(--gc-u-panel) 14%)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #pmModal .pmComposer button{min-height:40px!important;border-radius:20px!important} /* --- Notifications / inbox: compact rows instead of dashboard cards --- */ body.gcCodyFamiliarV3 #notificationsModal .notificationCard, body.gcCodyFamiliarV3 #privateInboxModal .inboxCard{background:var(--gc-u-panel2)!important;border-color:var(--gc-u-line)!important;color:var(--gc-u-text)!important;box-shadow:var(--gc-u-shadow)!important} body.gcCodyFamiliarV3 #notificationsModal .notificationHead, body.gcCodyFamiliarV3 #privateInboxModal .inboxTop{background:var(--gc-u-panel2)!important;border-color:var(--gc-u-line)!important} body.gcCodyFamiliarV3 .notificationList{padding:6px 9px 12px!important} body.gcCodyFamiliarV3 .notification{ min-height:56px!important;margin:0!important;padding:8px 9px!important;border:0!important;border-bottom:1px solid color-mix(in srgb,var(--gc-u-line) 58%,transparent)!important;border-radius:0!important;background:transparent!important;color:var(--gc-u-text)!important;box-shadow:none!important; } body.gcCodyFamiliarV3 .notification.unread{background:color-mix(in srgb,var(--gc-u-panel2) 83%,var(--gc-u-accent) 9%)!important;border-left:3px solid var(--gc-u-accent)!important} body.gcCodyFamiliarV3 .notification:hover{background:var(--gc-u-hover)!important} body.gcCodyFamiliarV3 .notification strong{color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 .notification p{color:var(--gc-u-muted)!important;margin:2px 0!important;line-height:1.3!important} body.gcCodyFamiliarV3 .notification small{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 .notificationOpenHint{color:var(--gc-u-accent)!important} /* --- Modal standard: same X/button/form rhythm everywhere --- */ body.gcCodyFamiliarV3 .modal{background:color-mix(in srgb,#000 68%,transparent)!important} body.gcCodyFamiliarV3 .modalCard{background:var(--gc-u-panel2)!important;border:1px solid var(--gc-u-line)!important;border-radius:var(--gc-u-radius-lg)!important;box-shadow:var(--gc-u-shadow)!important} body.gcCodyFamiliarV3 .modalClose{ width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;margin:0!important; display:grid!important;place-items:center!important;border:1px solid var(--gc-u-line)!important;border-radius:var(--gc-u-radius-sm)!important;background:var(--gc-u-panel)!important;color:var(--gc-u-text)!important;line-height:1!important;box-shadow:none!important; } body.gcCodyFamiliarV3 .modalClose:hover{background:var(--gc-u-hover)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 .modalTitle small{color:var(--gc-u-accent)!important} body.gcCodyFamiliarV3 .modalTitle h3{color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 .modalTitle p, body.gcCodyFamiliarV3 .muted{color:var(--gc-u-muted)!important} /* --- Public profile: keep Cody layout but let EVERY theme paint it --- */ body.gcCodyFamiliarV3 #profileModal .profileModalCard, body.gcCodyFamiliarV3 #profileModal .gcProfile{background:var(--gc-u-panel)!important;border-color:var(--gc-u-line)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #profileModal .modalClose{background:color-mix(in srgb,var(--gc-u-panel2) 94%,transparent)!important;border-color:var(--gc-u-line)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #profileModal .gcProfileHero{background-color:var(--gc-u-panel2)!important} body.gcCodyFamiliarV3 #profileModal .gcProfileHero::before{background:linear-gradient(180deg,color-mix(in srgb,#000 4%,transparent) 0%,color-mix(in srgb,#000 18%,transparent) 35%,color-mix(in srgb,var(--gc-u-bg) 88%,transparent) 100%)!important} body.gcCodyFamiliarV3 #profileModal .gcCodyProfileStat, body.gcCodyFamiliarV3 #profileModal .donorBadge, body.gcCodyFamiliarV3 #profileModal .gcCodyProfileTopTools button{background:color-mix(in srgb,var(--gc-u-panel2) 88%,transparent)!important;border-color:color-mix(in srgb,var(--gc-u-line) 80%,transparent)!important;color:var(--gc-u-text)!important;backdrop-filter:blur(6px)!important} body.gcCodyFamiliarV3 #profileModal .gcProfileAvatar{background:var(--gc-u-panel2)!important;border-color:color-mix(in srgb,var(--gc-u-text) 88%,var(--gc-u-line))!important} body.gcCodyFamiliarV3 #profileModal .gcProfileAvatar>i{border-color:color-mix(in srgb,var(--gc-u-text) 88%,var(--gc-u-line))!important} body.gcCodyFamiliarV3 #profileModal .gcProfileIdentity h2, body.gcCodyFamiliarV3 #profileModal .gcCodyProfileTitle{color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #profileModal .gcProfileRankBadge{background:var(--gc-u-accent)!important;color:var(--gc-u-on-accent)!important} body.gcCodyFamiliarV3 #profileModal .gcProfilePresenceLabel, body.gcCodyFamiliarV3 #profileModal .profileFriendStatus{background:color-mix(in srgb,var(--gc-u-panel2) 86%,transparent)!important;border-color:var(--gc-u-line)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #profileModal .gcProfileMoodLabel{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #profileModal .gcCodyProfilePrimaryActions, body.gcCodyFamiliarV3 #profileModal .gcProfileTabs, body.gcCodyFamiliarV3 #profileModal .gcPublicProfileMusic.gcCodyProfilePlayer, body.gcCodyFamiliarV3 #profileModal #gcProfileLevelCard{background:var(--gc-u-panel2)!important;border-color:var(--gc-u-line)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #profileModal .gcCodyPrimaryAction{color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-line) 74%,transparent)!important;background:transparent!important} body.gcCodyFamiliarV3 #profileModal .gcCodyPrimaryAction:hover{background:var(--gc-u-hover)!important} body.gcCodyFamiliarV3 #profileModal .gcProfileTabs button{color:var(--gc-u-muted)!important;background:transparent!important} body.gcCodyFamiliarV3 #profileModal .gcProfileTabs button.active{color:var(--gc-u-text)!important;background:color-mix(in srgb,var(--gc-u-panel) 80%,transparent)!important;box-shadow:inset 0 -3px var(--gc-u-accent)!important} body.gcCodyFamiliarV3 #profileModal .gcProfilePane{background:var(--gc-u-panel)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #profileModal .profileInfoRow{background:transparent!important;border-color:color-mix(in srgb,var(--gc-u-line) 70%,transparent)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #profileModal .profileInfoRow span, body.gcCodyFamiliarV3 #profileModal .profileInfoRow small{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #profileModal .profileBio{color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #profileModal .gcProfileLevelMain small, body.gcCodyFamiliarV3 #profileModal .gcProfileLevelMain span, body.gcCodyFamiliarV3 #profileModal .gcCodyProfileTrack small{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #profileModal .gcProfileLevelMain strong, body.gcCodyFamiliarV3 #profileModal .gcCodyProfileTrack b{color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #profileModal .gcProfileLevelMain i{background:color-mix(in srgb,var(--gc-u-line) 65%,transparent)!important} body.gcCodyFamiliarV3 #profileModal .gcProfileLevelMain i b{background:var(--gc-u-accent)!important} body.gcCodyFamiliarV3 #profileModal .gcCodyProfilePlay, body.gcCodyFamiliarV3 #profileModal .gcPublicProfileMusicManage{background:var(--gc-u-panel)!important;border-color:var(--gc-u-line)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #profileModal .gcCodyProfileMusicEmptyIcon{color:var(--gc-u-accent)!important} body.gcCodyFamiliarV3 #profileModal .profileFriendCard, body.gcCodyFamiliarV3 #profileModal .profileGiftCard, body.gcCodyFamiliarV3 #profileModal .profilePhoto{background:var(--gc-u-panel2)!important;border-color:var(--gc-u-line)!important;color:var(--gc-u-text)!important} /* --- Profile edit: Cody editor, functional camera controls, no icon collision --- */ body.gcCodyFamiliarV3 #editProfileModal .profileStudioCard, body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHub, body.gcCodyFamiliarV3 #editProfileModal .profileStudioEditor{background:var(--gc-u-panel)!important;border-color:var(--gc-u-line)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #editProfileModal>.modalCard>.modalClose{ top:10px!important;right:10px!important;z-index:120!important;background:color-mix(in srgb,var(--gc-u-panel2) 94%,transparent)!important;border-color:var(--gc-u-line)!important;color:var(--gc-u-text)!important; } body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHero{background:var(--gc-u-panel2)!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileCover{background-color:var(--gc-u-panel2)!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileCover::after{background:linear-gradient(180deg,color-mix(in srgb,#000 5%,transparent),color-mix(in srgb,var(--gc-u-bg) 82%,transparent))!important} /* IMPORTANT: cover camera gets its own lane left of the X. */ body.gcCodyFamiliarV3 #editProfileModal .gcCodyCoverButton{ position:absolute!important;top:10px!important;right:60px!important;z-index:110!important; width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;margin:0!important;padding:0!important; display:grid!important;place-items:center!important;border:1px solid var(--gc-u-line)!important;border-radius:var(--gc-u-radius-sm)!important;background:color-mix(in srgb,var(--gc-u-panel2) 92%,transparent)!important;color:var(--gc-u-text)!important;cursor:pointer!important;pointer-events:auto!important;box-shadow:none!important; } body.gcCodyFamiliarV3 #editProfileModal .gcCodyCoverButton:hover{background:var(--gc-u-hover)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 55%,var(--gc-u-line))!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyCoverButton>span{display:block!important;font-size:16px!important;line-height:1!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileAvatarWrap{z-index:6!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileAvatarWrap>img{border-color:var(--gc-u-panel)!important;background:var(--gc-u-panel2)!important} /* IMPORTANT: avatar camera stays attached to avatar/staff area and remains clickable. */ body.gcCodyFamiliarV3 #editProfileModal .gcCodyAvatarButton{ position:absolute!important;right:-3px!important;bottom:1px!important;z-index:12!important; width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;margin:0!important;padding:0!important; display:grid!important;place-items:center!important;border:2px solid var(--gc-u-panel)!important;border-radius:50%!important;background:color-mix(in srgb,var(--gc-u-panel2) 80%,var(--gc-u-accent) 12%)!important;color:var(--gc-u-text)!important;cursor:pointer!important;pointer-events:auto!important;box-shadow:0 3px 10px color-mix(in srgb,#000 40%,transparent)!important; } body.gcCodyFamiliarV3 #editProfileModal .gcCodyAvatarButton:hover{background:var(--gc-u-soft-accent)!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyAvatarButton>span{display:block!important;font-size:14px!important;line-height:1!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileIdentity{color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileIdentity small{background:var(--gc-u-accent)!important;color:var(--gc-u-on-accent)!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileIdentity button{background:color-mix(in srgb,var(--gc-u-panel2) 86%,transparent)!important;color:var(--gc-u-text)!important;border:1px solid color-mix(in srgb,var(--gc-u-line) 65%,transparent)!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubTabs{background:var(--gc-u-panel2)!important;border-color:var(--gc-u-line)!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubTabs button{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubTabs button.active{color:var(--gc-u-text)!important;box-shadow:inset 0 -3px var(--gc-u-accent)!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubPane{background:var(--gc-u-panel)!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubPane>button{color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-line) 72%,transparent)!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubPane>button:hover{background:var(--gc-u-hover)!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubPane>button>i{background:var(--gc-u-panel2)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubPane>button small, body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubPane>button em{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileBack, body.gcCodyFamiliarV3 #editProfileModal .gcCodyV11EditorHead, body.gcCodyFamiliarV3 #editProfileModal .profileEditorActions{background:var(--gc-u-panel2)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-line)!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyV11EditorHead b{color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyV11EditorHead small{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #editProfileModal .profileFieldsGrid>label, body.gcCodyFamiliarV3 #editProfileModal .profileFieldsGrid>label.wide{color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-line) 70%,transparent)!important} body.gcCodyFamiliarV3 #editProfileModal .profileUploadHero, body.gcCodyFamiliarV3 #editProfileModal .profileBannerUpload, body.gcCodyFamiliarV3 #editProfileModal .profileStyleLauncher, body.gcCodyFamiliarV3 #editProfileModal .userlistStyleStudio, body.gcCodyFamiliarV3 #editProfileModal .profileMusicStudio, body.gcCodyFamiliarV3 #editProfileModal .profileSocialStudio{background:var(--gc-u-panel2)!important;border-color:var(--gc-u-line)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #editProfileModal .profileMusicCurrent{background:color-mix(in srgb,var(--gc-u-bg) 72%,var(--gc-u-panel) 28%)!important;border-color:var(--gc-u-line)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #editProfileModal .profileMusicCurrent small{color:var(--gc-u-muted)!important} /* --- Chat options: Cody list + per-section form in theme palette --- */ body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionsCard, body.gcCodyFamiliarV3 #chatOptionsModal .gcCodyV11ChatHub, body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionsForm{background:var(--gc-u-panel)!important;border-color:var(--gc-u-line)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #chatOptionsModal .gcCodyV11ChatHero, body.gcCodyFamiliarV3 #chatOptionsModal .gcCodyV11ChatBack, body.gcCodyFamiliarV3 #chatOptionsModal .gcCodyV11ChatSectionHead, body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionsActions{background:var(--gc-u-panel2)!important;border-color:var(--gc-u-line)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #chatOptionsModal .gcCodyV11ChatHero small{color:var(--gc-u-accent)!important} body.gcCodyFamiliarV3 #chatOptionsModal .gcCodyV11ChatHero p, body.gcCodyFamiliarV3 #chatOptionsModal .gcCodyV11ChatRows small, body.gcCodyFamiliarV3 #chatOptionsModal .gcCodyV11ChatRows em, body.gcCodyFamiliarV3 #chatOptionsModal .gcCodyV11ChatSectionHead small{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #chatOptionsModal .gcCodyV11ChatRows>button{color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-line) 72%,transparent)!important} body.gcCodyFamiliarV3 #chatOptionsModal .gcCodyV11ChatRows>button:hover{background:var(--gc-u-hover)!important} body.gcCodyFamiliarV3 #chatOptionsModal .gcCodyV11ChatRows>button>i{background:var(--gc-u-panel2)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionToggle, body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionField{color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-line) 72%,transparent)!important;background:transparent!important} /* --- Mobile bottom navigation + More sheet: same geometry in each theme --- */ @media(max-width:900px){ body.gcCodyFamiliarV3 .gcMobileBottomNav{ left:4px!important;right:4px!important;bottom:max(5px,env(safe-area-inset-bottom))!important;height:54px!important;min-height:54px!important; padding:3px!important;gap:2px!important;border:1px solid var(--gc-u-line)!important;border-radius:var(--gc-u-radius-lg)!important;background:color-mix(in srgb,var(--gc-u-panel2) 97%,transparent)!important;box-shadow:0 10px 30px color-mix(in srgb,#000 38%,transparent)!important; } body.gcCodyFamiliarV3 .gcMobileBottomNav button{height:46px!important;min-height:46px!important;border:0!important;border-radius:var(--gc-u-radius-sm)!important;background:transparent!important;color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 .gcMobileBottomNav button.active, body.gcCodyFamiliarV3 .gcMobileBottomNav button[aria-current="page"]{background:var(--gc-u-hover)!important;color:var(--gc-u-text)!important;box-shadow:inset 0 -2px var(--gc-u-accent)!important} body.gcCodyFamiliarV3 .gcMobileBottomNav button.active>svg, body.gcCodyFamiliarV3 .gcMobileBottomNav button[aria-current="page"]>svg{color:var(--gc-u-accent)!important} body.gcCodyFamiliarV3 .gcMobileMoreCard{background:var(--gc-u-panel2)!important;border:1px solid var(--gc-u-line)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 .gcMobileMoreCard>header{background:var(--gc-u-panel2)!important;border-color:var(--gc-u-line)!important} body.gcCodyFamiliarV3 .gcMobileMoreCard>header small{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 .gcMobileMoreClose{background:var(--gc-u-panel)!important;border-color:var(--gc-u-line)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 .gcMobileMoreGrid>button{background:var(--gc-u-panel)!important;border-color:var(--gc-u-line)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 .gcMobileMoreGrid>button:hover{background:var(--gc-u-hover)!important} /* Never make the composer absolute: visualViewport controller remains the single authority. */ body.gcCodyFamiliarV3 .composer{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important} body.gcCodyFamiliarV3 .rooms, body.gcCodyFamiliarV3 .gcRightPanel, body.gcCodyFamiliarV3 .users{transition:transform .16s ease!important} } @media(max-width:700px){ body.gcCodyFamiliarV3 #pmModal .pmCard, body.gcCodyFamiliarV3 #pmModal .gcPmCard{border-radius:var(--gc-u-radius)!important} body.gcCodyFamiliarV3 #pmModal .pmMessages{padding:8px 7px!important} body.gcCodyFamiliarV3 #pmModal .pm{max-width:88%!important} body.gcCodyFamiliarV3 #pmModal .pmMessageTools, body.gcCodyFamiliarV3 #pmModal .pm:hover .pmMessageTools, body.gcCodyFamiliarV3 #pmModal .pm:focus-within .pmMessageTools{max-height:min(330px,calc(var(--gc-cody-vv-height,100dvh) - 120px))!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyCoverButton{top:calc(9px + env(safe-area-inset-top))!important;right:58px!important} body.gcCodyFamiliarV3 #editProfileModal>.modalCard>.modalClose{top:calc(9px + env(safe-area-inset-top))!important;right:8px!important} body.gcCodyFamiliarV3 #profileModal .modalClose{top:calc(9px + env(safe-area-inset-top))!important;right:8px!important} body.gcCodyFamiliarV3 #profileModal .gcCodyProfileTopTools{right:55px!important} body.gcCodyFamiliarV3 #profileModal .gcProfileTabs{scrollbar-width:none!important} body.gcCodyFamiliarV3 #profileModal .gcProfileTabs::-webkit-scrollbar{display:none!important} body.gcCodyFamiliarV3 #editProfileModal .profileFieldsGrid>label, body.gcCodyFamiliarV3 #editProfileModal .profileFieldsGrid>label.wide{grid-template-columns:1fr!important;gap:5px!important;align-items:stretch!important;padding:9px 2px!important} } /* 0.74.08 — final accent contract for every style/theme shell. */ body.gcCodyFamiliarV3 :is(.chathead,.asideHead,.addonTrayHead,#usersPanel .gcRightTitle,#usersPanel .gcCodyStatsToggle){ background:linear-gradient(180deg,color-mix(in srgb,var(--gc-u-accent) 10%,var(--gc-u-card2)),color-mix(in srgb,var(--gc-u-accent) 4%,var(--gc-u-card)))!important; color:var(--gc-u-text)!important; border-color:color-mix(in srgb,var(--gc-u-accent) 38%,var(--gc-u-border))!important; box-shadow:none!important; text-shadow:none!important; } body.gcCodyFamiliarV3 :is(.chathead,.asideHead,.addonTrayHead,#usersPanel .gcRightTitle,#usersPanel .gcCodyStatsToggle) :is(h1,h2,h3,h4,b,strong,span){ color:var(--gc-u-text)!important;text-shadow:none!important;opacity:1!important } body.gcCodyFamiliarV3 :is(.chathead,.asideHead,.addonTrayHead) :is(p,small), body.gcCodyFamiliarV3 .chathead .connection{color:var(--gc-u-muted)!important;text-shadow:none!important;opacity:1!important} body.gcCodyFamiliarV3 :is(.asideHead,.addonTrayHead) :is(button,[role="button"]){ background:color-mix(in srgb,var(--gc-u-accent) 8%,var(--gc-u-card2))!important; color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 34%,var(--gc-u-border))!important } body.gcCodyFamiliarV3 #usersPanel{ background:color-mix(in srgb,var(--gc-u-accent) 3%,var(--gc-u-card))!important; color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 30%,var(--gc-u-border))!important } body.gcCodyFamiliarV3 #usersPanel .userGroup>header{ background:color-mix(in srgb,var(--rank-group-color,var(--gc-u-accent)) 9%,var(--gc-u-card2))!important; color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--rank-group-color,var(--gc-u-accent)) 28%,var(--gc-u-border))!important; text-shadow:none!important } body.gcCodyFamiliarV3 #usersPanel .userGroup>header :is(b,span){color:var(--gc-u-text)!important;text-shadow:none!important;opacity:1!important} body.gcCodyFamiliarV3 #usersPanel .userCard:not(.has-nameplate){ background:color-mix(in srgb,var(--gc-u-accent) 4%,var(--gc-u-card))!important; color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 17%,var(--gc-u-border))!important } body.gcCodyFamiliarV3 #usersPanel .userCard :is(.uName,strong,b){text-shadow:none!important;opacity:1!important} body.gcCodyFamiliarV3 #usersPanel .userCard :is(.uStatus,.uMeta,small){color:var(--gc-u-muted)!important;opacity:1!important} body.gcCodyFamiliarV3 #roomsPanel{ background:color-mix(in srgb,var(--gc-u-accent) 3%,var(--gc-u-card))!important; color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 32%,var(--gc-u-border))!important } body.gcCodyFamiliarV3 #roomsPanel :is(.gcRoomGroupTitle,.roomEyebrow){color:color-mix(in srgb,var(--gc-u-accent) 72%,var(--gc-u-text))!important;text-shadow:none!important;opacity:1!important} body.gcCodyFamiliarV3 #roomsPanel :is(.roomShell,.roomSelect,.roomGameStrip){ background:color-mix(in srgb,var(--gc-u-accent) 5%,var(--gc-u-card2))!important; color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 34%,var(--gc-u-border))!important; box-shadow:none!important;text-shadow:none!important } body.gcCodyFamiliarV3 #roomsPanel .roomShell.active{ background:color-mix(in srgb,var(--gc-u-accent) 13%,var(--gc-u-card2))!important; border-color:color-mix(in srgb,var(--gc-u-accent) 70%,var(--gc-u-border))!important } body.gcCodyFamiliarV3 #roomsPanel .roomCopy :is(strong,span){color:var(--gc-u-text)!important;text-shadow:none!important;opacity:1!important} body.gcCodyFamiliarV3 #roomsPanel .roomCopy>span{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #roomsPanel :is(.roomPeopleCount,.roomIcon,.roomGameStrip button){ background:color-mix(in srgb,var(--gc-u-accent) 12%,var(--gc-u-card))!important; color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 36%,var(--gc-u-border))!important } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(.chathead,.asideHead,.addonTrayHead,#usersPanel .gcRightTitle,#usersPanel .gcCodyStatsToggle){ background:linear-gradient(180deg,color-mix(in srgb,var(--gc-u-accent) 9%,#fff),color-mix(in srgb,var(--gc-u-accent) 4%,#f4f8fc))!important; color:#172534!important;border-color:color-mix(in srgb,var(--gc-u-accent) 35%,#b9c9d9)!important } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(.chathead,.asideHead,.addonTrayHead,#usersPanel .gcRightTitle,#usersPanel .gcCodyStatsToggle) :is(h1,h2,h3,h4,b,strong,span){color:#172534!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(.chathead,.asideHead,.addonTrayHead) :is(p,small), html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .chathead .connection{color:#526b83!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(#usersPanel,#roomsPanel){background:#f7fafc!important;color:#172534!important;border-color:#b9c9d9!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #usersPanel .userGroup>header, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #usersPanel .userCard:not(.has-nameplate), html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #roomsPanel :is(.roomShell,.roomSelect,.roomGameStrip){background:color-mix(in srgb,var(--gc-u-accent) 5%,#fff)!important;color:#172534!important;border-color:color-mix(in srgb,var(--gc-u-accent) 28%,#c2d0de)!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #usersPanel .userGroup>header :is(b,span), html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #roomsPanel .roomCopy :is(strong,span){color:#172534!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #usersPanel .userCard :is(.uStatus,.uMeta,small), html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #roomsPanel .roomCopy>span{color:#526b83!important} /* 0.74.06 — compact command directory, generated from the real command source. */ body.gcCodyFamiliarV3 #commandsModal .addonModal{width:min(620px,calc(100vw - 18px))!important;max-height:min(780px,calc(100dvh - 18px))!important;background:var(--gc-u-card)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important} body.gcCodyFamiliarV3 #commandsModal .gcCommandDirectory{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;margin-top:10px!important;padding:2px!important} body.gcCodyFamiliarV3 #commandsModal .gcCommandDirectoryRow{ display:grid!important;grid-template-columns:minmax(92px,auto) minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important; min-height:54px!important;padding:8px 10px!important;border:1px solid var(--gc-u-border)!important;border-radius:10px!important; background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important } body.gcCodyFamiliarV3 #commandsModal .gcCommandDirectoryRow code{padding:5px 7px!important;border-radius:7px!important;background:color-mix(in srgb,var(--gc-u-accent) 16%,var(--gc-u-card))!important;color:color-mix(in srgb,var(--gc-u-accent) 76%,var(--gc-u-text))!important;font-size:11px!important;font-weight:900!important;white-space:nowrap!important} body.gcCodyFamiliarV3 #commandsModal .gcCommandDirectoryRow>span{display:grid!important;gap:2px!important;min-width:0!important} body.gcCodyFamiliarV3 #commandsModal .gcCommandDirectoryRow b{color:var(--gc-u-text)!important;font-size:11px!important} body.gcCodyFamiliarV3 #commandsModal .gcCommandDirectoryRow small{color:var(--gc-u-muted)!important;font-size:8.5px!important;line-height:1.3!important} body.gcCodyFamiliarV3 #commandsModal .gcCommandDirectoryRow em{padding:3px 6px!important;border-radius:999px!important;background:color-mix(in srgb,var(--gc-u-accent) 18%,var(--gc-u-card))!important;color:var(--gc-u-text)!important;font-size:7px!important;font-weight:950!important;font-style:normal!important} body.gcCodyFamiliarV3 #commandsModal .gcCommandDirectoryRow.isRestricted{opacity:.62!important;filter:saturate(.7)!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #commandsModal .addonModal{background:#fff!important;color:#172534!important;border-color:#b8c9da!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #commandsModal .gcCommandDirectoryRow{background:#f5f9fd!important;color:#172534!important;border-color:#c5d4e2!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #commandsModal .gcCommandDirectoryRow b{color:#172534!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #commandsModal .gcCommandDirectoryRow small{color:#526b83!important} @media(max-width:480px){body.gcCodyFamiliarV3 #commandsModal .gcCommandDirectoryRow{grid-template-columns:minmax(84px,auto) minmax(0,1fr)!important;gap:7px!important}body.gcCodyFamiliarV3 #commandsModal .gcCommandDirectoryRow em{grid-column:1!important;justify-self:start!important}} /* 0.74.07 — private header order and calmer message rhythm on every theme. */ body.gcCodyFamiliarV3 #pmModal .pmHead{ display:grid!important;grid-template-columns:32px 32px minmax(0,1fr) 30px 30px!important;align-items:center!important;gap:4px!important; padding:6px 7px!important;background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important } body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity{grid-column:3!important;grid-row:1!important;min-width:0!important;max-width:none!important;margin:0!important} body.gcCodyFamiliarV3 #pmModal .pmCallActions{display:contents!important;margin:0!important;padding:0!important} body.gcCodyFamiliarV3 #pmModal #pmAudioCall{grid-column:1!important;grid-row:1!important;color:#ef5276!important} body.gcCodyFamiliarV3 #pmModal #pmVideoCall{grid-column:2!important;grid-row:1!important;color:#9a72e8!important} body.gcCodyFamiliarV3 #pmModal #pmMinimize{grid-column:4!important;grid-row:1!important} body.gcCodyFamiliarV3 #pmModal #pmClose{grid-column:5!important;grid-row:1!important} body.gcCodyFamiliarV3 #pmModal .pmHead .pmCallActions>button{ width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;padding:0!important; background:var(--gc-u-card)!important;border:1px solid var(--gc-u-border)!important;border-radius:9px!important;box-shadow:none!important } body.gcCodyFamiliarV3 #pmModal :is(#pmAudioCall,#pmVideoCall):is(:hover,:focus-visible){background:color-mix(in srgb,currentColor 16%,var(--gc-u-card))!important;border-color:currentColor!important} body.gcCodyFamiliarV3 #pmModal .pmMessages{padding:10px 8px 12px!important;background:var(--gc-u-panel)!important} body.gcCodyFamiliarV3 #pmModal .pm{margin:0 0 8px!important;gap:6px!important} body.gcCodyFamiliarV3 #pmModal .pmBubble{ max-width:min(78%,560px)!important;border-radius:12px!important;border:1px solid var(--gc-u-border)!important; box-shadow:0 2px 8px rgba(0,0,0,.12)!important;background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important } body.gcCodyFamiliarV3 #pmModal .pm.mine .pmBubble{background:color-mix(in srgb,var(--gc-u-accent) 12%,var(--gc-u-card2))!important;border-bottom-right-radius:5px!important} body.gcCodyFamiliarV3 #pmModal .pm.theirs .pmBubble{border-bottom-left-radius:5px!important} body.gcCodyFamiliarV3 #pmModal .pmBody{color:var(--gc-u-text)!important;line-height:1.4!important} body.gcCodyFamiliarV3 #pmModal .pmMeta{color:var(--gc-u-muted)!important;margin-top:4px!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal .pmHead{background:#f5f9fd!important;color:#172534!important;border-color:#c5d4e2!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal .pmMessages{background:#edf3f9!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal .pmBubble{background:#fff!important;color:#172534!important;border-color:#c5d4e2!important;box-shadow:0 2px 7px rgba(34,52,70,.10)!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal .pm.mine .pmBubble{background:color-mix(in srgb,var(--gc-u-accent) 11%,#fff)!important} @media(max-width:420px){ body.gcCodyFamiliarV3 #pmModal .pmHead{grid-template-columns:28px 28px minmax(0,1fr) 27px 27px!important;gap:3px!important;padding-inline:5px!important} body.gcCodyFamiliarV3 #pmModal .pmHead .pmCallActions>button{width:27px!important;height:27px!important;min-width:27px!important;min-height:27px!important;font-size:13px!important} body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity img{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important} body.gcCodyFamiliarV3 #pmModal .pmBubble{max-width:calc(100% - 38px)!important} } @media(max-width:430px){ :root{--gc-u-top-h:52px;--gc-u-composer-h:52px} body.gcCodyFamiliarV3 .gcClassicTop, body.gcCodyFamiliarV3 .topbar{padding:0 6px!important} body.gcCodyFamiliarV3 .gcHamburger, body.gcCodyFamiliarV3 .gcTopIcon{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important} body.gcCodyFamiliarV3 .messages{padding:5px 7px 9px!important} body.gcCodyFamiliarV3 .msg{grid-template-columns:34px minmax(0,1fr)!important;gap:6px!important;padding:6px 2px!important} body.gcCodyFamiliarV3 .msg .avatar{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important} body.gcCodyFamiliarV3 .composer{grid-template-columns:38px 38px minmax(0,1fr) 40px!important;gap:4px!important;padding:6px!important} body.gcCodyFamiliarV3 .composer>button{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important} body.gcCodyFamiliarV3 .composer textarea{height:38px!important;min-height:38px!important;padding:8px 12px!important} body.gcCodyFamiliarV3 .gcCodyProfileHero{min-height:218px!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyCoverButton{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;right:55px!important} } /* 0.74.00 — mood contrast, unmistakable navigation icons and foreground alerts. */ body.gcCodyFamiliarV3 .userCard .uMood{ color:var(--gc-u-muted-readable)!important;opacity:1!important; -webkit-text-fill-color:currentColor!important;text-shadow:none!important; } body.gcCodyFamiliarV3 .userCard.has-nameplate .uMood{ display:inline-flex!important;align-items:center!important;min-height:17px!important;max-width:100%!important; padding:1px 6px!important;border:1px solid rgba(255,255,255,.24)!important;border-radius:999px!important; background:rgba(4,10,18,.72)!important;color:#fff!important;-webkit-text-fill-color:#fff!important; text-shadow:0 1px 2px #000,0 0 4px #000!important;box-shadow:0 1px 4px rgba(0,0,0,.28)!important; overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important; } body.gcCodyFamiliarV3 :is(.gcMobileBottomNav,#quickbar) button>svg, body.gcCodyFamiliarV3 :is(.gcMobileBottomNav,#quickbar) button i>svg{ opacity:1!important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.42)) saturate(1.28) contrast(1.16)!important; } body.gcCodyFamiliarV3 .gcMobileBottomNav button{ border:1px solid color-mix(in srgb,var(--gc-u-border) 78%,transparent)!important; background:color-mix(in srgb,var(--gc-u-card2) 88%,transparent)!important; } body.gcCodyFamiliarV3 .gcMobileBottomNav button>svg{stroke:currentColor!important;stroke-width:2.15!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .gcMobileBottomNav button{color:#26394d!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 .gcMobileBottomNav button{color:#f3f7fb!important} body.gcCodyFamiliarV3 #toast, body.gcCodyFamiliarV3 .toast{ position:fixed!important;z-index:2147483000!important;isolation:isolate!important; pointer-events:auto!important;opacity:1!important; } body.gcCodyFamiliarV3 .toast:not(.hidden){ box-shadow:0 18px 52px rgba(0,0,0,.38)!important; } @media(max-width:360px){ body.gcCodyFamiliarV3 .gcMobileBottomNav button>span{font-size:7.4px!important} body.gcCodyFamiliarV3 .composer{grid-template-columns:36px 36px minmax(0,1fr) 38px!important} body.gcCodyFamiliarV3 .composer>button{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important} body.gcCodyFamiliarV3 .composer textarea{height:36px!important;min-height:36px!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyCoverButton{right:53px!important} } @media(max-width:320px){ body.gcCodyFamiliarV3 .gcMobileBottomNav{left:2px!important;right:2px!important;padding:2px!important} body.gcCodyFamiliarV3 .gcMobileBottomNav button{min-width:0!important;padding-left:1px!important;padding-right:1px!important} body.gcCodyFamiliarV3 .gcMobileBottomNav button>span{font-size:7px!important} body.gcCodyFamiliarV3 .messages{padding-left:4px!important;padding-right:4px!important} } /* Landscape phones/tablets: keep profile/PM usable without oversized hero sections. */ @media(max-width:900px) and (orientation:landscape) and (max-height:540px){ body.gcCodyFamiliarV3 #profileModal .gcProfileHero{flex-basis:168px!important;height:168px!important;min-height:168px!important;max-height:168px!important;padding-top:30px!important} body.gcCodyFamiliarV3 #profileModal .gcProfileAvatar{flex-basis:66px!important;width:66px!important;height:66px!important;min-width:66px!important;min-height:66px!important;max-width:66px!important;max-height:66px!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHero{flex-basis:178px!important;height:178px!important;min-height:178px!important;max-height:178px!important} body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileAvatarWrap{top:35px!important} body.gcCodyFamiliarV3 #pmModal .pmHead{min-height:50px!important} } /* Accessibility / touch: keep controls reliably usable. */ @media(pointer:coarse){ body.gcCodyFamiliarV3 .modalClose, body.gcCodyFamiliarV3 #editProfileModal .gcCodyCoverButton{touch-action:manipulation!important} body.gcCodyFamiliarV3 .userCard, body.gcCodyFamiliarV3 .gcCodyProfileHubPane>button, body.gcCodyFamiliarV3 .gcCodyV11ChatRows>button{touch-action:manipulation!important} } /* ========================================================================== GC 0.65.01 — Addon surfaces + PM alignment/responsive hardening ========================================================================== */ /* Theme addon and style-studio use real modal surfaces even when older markup is absent. Geometry follows the same Cody component language as Chatopties. */ body.gcCodyFamiliarV3 #themesModal .gcThemeCenterCard, body.gcCodyFamiliarV3 #gcStyleStudioModal .gcStyleStudioCard{ width:min(760px,calc(100vw - 24px))!important; max-height:min(780px,calc(100dvh - 24px))!important; padding:18px!important; overflow:hidden!important; display:flex!important; flex-direction:column!important; background:var(--gc-u-panel2)!important; border:1px solid var(--gc-u-line)!important; color:var(--gc-u-text)!important; } body.gcCodyFamiliarV3 #themesModal .themeGallery{ flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important; grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;padding:2px 3px 8px!important; overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important; } body.gcCodyFamiliarV3 #themesModal .themeTile{ min-width:0!important;min-height:124px!important;border-radius:10px!important; border-width:1px!important;border-style:solid!important;box-shadow:none!important; } body.gcCodyFamiliarV3 #themesModal .themeTile.active{border-color:var(--gc-u-accent)!important;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--gc-u-accent) 48%,transparent)!important} body.gcCodyFamiliarV3 #themesModal .gcThemeCenterActions, body.gcCodyFamiliarV3 #gcStyleStudioModal .gcStyleStudioActions{display:flex!important;justify-content:flex-end!important;gap:8px!important;padding-top:10px!important;border-top:1px solid var(--gc-u-line)!important} body.gcCodyFamiliarV3 #gcStyleStudioModal .gcStyleStudioModes{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important;margin:8px 0!important} body.gcCodyFamiliarV3 #gcStyleStudioModal .gcStyleStudioModes button{min-height:38px!important;border:1px solid var(--gc-u-line)!important;border-radius:9px!important;background:var(--gc-u-panel)!important;color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #gcStyleStudioModal .gcStyleStudioModes button.active{border-color:var(--gc-u-accent)!important;color:var(--gc-u-text)!important;box-shadow:inset 0 -2px var(--gc-u-accent)!important} body.gcCodyFamiliarV3 #gcStyleStudioModal .gcStylePalette{display:grid!important;grid-template-columns:repeat(8,minmax(30px,1fr))!important;gap:6px!important;max-height:190px!important;overflow:auto!important;padding:4px 1px 8px!important} body.gcCodyFamiliarV3 #gcStyleStudioModal .gcStylePalette button{aspect-ratio:1.35!important;min-width:0!important;border:1px solid var(--gc-u-line)!important;border-radius:8px!important} body.gcCodyFamiliarV3 #gcStyleStudioModal .gcStyleStudioFields{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin:8px 0!important} body.gcCodyFamiliarV3 #gcStyleStudioModal .gcStyleStudioFields label{display:grid!important;gap:5px!important;color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #gcStyleStudioModal .gcStyleStudioFields select{min-height:40px!important;background:var(--gc-u-panel)!important;border:1px solid var(--gc-u-line)!important;color:var(--gc-u-text)!important;border-radius:9px!important;padding:0 10px!important} body.gcCodyFamiliarV3 #gcStyleStudioModal .gcStudioPreview{min-height:66px!important;display:grid!important;place-items:center!important;margin:6px 0 12px!important;padding:12px!important;border:1px solid var(--gc-u-line)!important;border-radius:10px!important;background:var(--gc-u-panel)!important;color:var(--gc-u-text)!important;font-size:18px!important;text-align:center!important} /* Private chat header: identity grows, every action stays pinned to the real right edge. This deliberately replaces the older spacer-grid layout. */ body.gcCodyFamiliarV3 #pmModal .pmHead{ display:flex!important;align-items:center!important;justify-content:flex-start!important; gap:8px!important;padding:7px 9px 7px 10px!important;min-width:0!important; } body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity{ display:flex!important;align-items:center!important;gap:8px!important;flex:1 1 auto!important; width:auto!important;max-width:none!important;min-width:0!important;overflow:hidden!important; } body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity>div{min-width:0!important;overflow:hidden!important} body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity h3{margin:1px 0 0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important} body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity small{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important} body.gcCodyFamiliarV3 #pmModal .pmCallActions{ display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:5px!important; flex:0 0 auto!important;margin-left:auto!important;position:static!important;inset:auto!important; } body.gcCodyFamiliarV3 #pmModal .pmCallActions>button{ position:static!important;inset:auto!important;width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important; padding:0!important;margin:0!important;display:grid!important;place-items:center!important;border-radius:8px!important; } /* Private rows use the whole conversation width. Only the bubble is limited. Own messages therefore really attach to the right side instead of an 82%-wide row. */ body.gcCodyFamiliarV3 #pmModal .pmMessages{min-width:0!important} body.gcCodyFamiliarV3 #pmModal .pm{ display:flex!important;width:100%!important;max-width:100%!important;min-width:0!important; align-items:flex-end!important;gap:8px!important;margin:6px 0 9px!important;box-sizing:border-box!important; } body.gcCodyFamiliarV3 #pmModal .pm.theirs{padding-right:12%!important} body.gcCodyFamiliarV3 #pmModal .pm.mine{padding-left:12%!important;margin-left:0!important} body.gcCodyFamiliarV3 #pmModal .pmBubble{ width:auto!important;min-width:0!important;max-width:min(76%,680px)!important;margin:0!important; padding:8px 38px 7px 10px!important;position:relative!important;overflow:visible!important; } body.gcCodyFamiliarV3 #pmModal .pm.mine .pmBubble{margin-left:auto!important} body.gcCodyFamiliarV3 #pmModal .pm.theirs .pmBubble{margin-right:auto!important} body.gcCodyFamiliarV3 #pmModal .pmMessageAvatar{flex:0 0 30px!important;width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;max-width:30px!important;max-height:30px!important;object-fit:cover!important} body.gcCodyFamiliarV3 #pmModal .pmBody{min-width:0!important;overflow-wrap:anywhere!important;word-break:normal!important} body.gcCodyFamiliarV3 #pmModal .pmMeta{min-width:0!important;max-width:100%!important;overflow:hidden!important} /* Mobile PM is one viewport-safe screen on iOS and Android. visualViewport is the only height authority; no bottom-dock or absolute-composer competition. */ @media(max-width:700px){ body.gcCodyFamiliarV3.gcPmOpen #pmModal, body.gcCodyFamiliarV3 #pmModal:not(.hidden){ position:fixed!important;left:0!important;right:0!important;top:var(--gc-cody-vv-top,0px)!important; bottom:auto!important;width:100vw!important;height:var(--gc-cody-vv-height,100dvh)!important; min-height:0!important;max-height:none!important;padding:0!important;overflow:hidden!important; background:var(--gc-u-bg)!important; } body.gcCodyFamiliarV3 #pmModal .gcPmCard{ position:relative!important;inset:auto!important;transform:none!important; width:100%!important;max-width:none!important;height:100%!important;max-height:100%!important;min-height:0!important; margin:0!important;padding:max(0px,env(safe-area-inset-top)) 0 max(0px,env(safe-area-inset-bottom))!important; border:0!important;border-radius:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important; } body.gcCodyFamiliarV3 #pmModal .pmHead{flex:0 0 auto!important;min-height:52px!important;padding:6px max(7px,env(safe-area-inset-right)) 6px max(7px,env(safe-area-inset-left))!important;gap:5px!important} body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity img{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important} body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity small{font-size:8px!important} body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity h3{font-size:13px!important} body.gcCodyFamiliarV3 #pmModal .pmCallActions{gap:3px!important} body.gcCodyFamiliarV3 #pmModal .pmCallActions>button{width:31px!important;height:31px!important;min-width:31px!important;min-height:31px!important;font-size:14px!important} body.gcCodyFamiliarV3 #pmModal .pmMessages{ flex:1 1 0!important;height:0!important;min-height:0!important;max-height:none!important; overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!important; padding:8px 7px 10px!important;touch-action:pan-y!important; } body.gcCodyFamiliarV3 #pmModal .pm{gap:6px!important;margin:5px 0 8px!important} body.gcCodyFamiliarV3 #pmModal .pm.theirs{padding-right:5%!important} body.gcCodyFamiliarV3 #pmModal .pm.mine{padding-left:5%!important} body.gcCodyFamiliarV3 #pmModal .pmBubble{max-width:84%!important;padding:8px 34px 7px 9px!important} body.gcCodyFamiliarV3 #pmModal .pmMessageAvatar{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;max-width:28px!important;max-height:28px!important;flex-basis:28px!important} body.gcCodyFamiliarV3 #pmModal .pmTyping{flex:0 0 auto!important;min-height:18px!important;max-height:26px!important} body.gcCodyFamiliarV3 #pmModal .pmReplyBar{flex:0 0 auto!important;margin:0!important;border-radius:0!important} body.gcCodyFamiliarV3 #pmModal .pmBottom{ flex:0 0 auto!important;position:relative!important;inset:auto!important;transform:none!important; margin:0!important;padding:5px max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important; background:var(--gc-u-panel2)!important;z-index:4!important; } body.gcCodyFamiliarV3 #pmModal .pmTools{min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important} body.gcCodyFamiliarV3 #pmModal .pmTools::-webkit-scrollbar{display:none!important} body.gcCodyFamiliarV3 #pmModal .pmComposer{position:relative!important;inset:auto!important;transform:none!important;grid-template-columns:minmax(0,1fr) 42px!important;padding:5px 0 0!important;gap:5px!important} body.gcCodyFamiliarV3 #pmModal .pmComposer textarea{width:100%!important;min-width:0!important;min-height:40px!important;max-height:96px!important;font-size:16px!important;line-height:20px!important} body.gcCodyFamiliarV3 #pmModal .pmComposer button[type="submit"]{width:42px!important;min-width:42px!important;height:40px!important;min-height:40px!important;padding:0!important} body.gcCodyFamiliarV3.gcPmOpen .gcMobileBottomNav{visibility:hidden!important;pointer-events:none!important} } @media(max-width:430px){ body.gcCodyFamiliarV3 #themesModal .gcThemeCenterCard, body.gcCodyFamiliarV3 #gcStyleStudioModal .gcStyleStudioCard{width:calc(100vw - 8px)!important;max-height:calc(var(--gc-cody-vv-height,100dvh) - 8px)!important;padding:12px!important} body.gcCodyFamiliarV3 #themesModal .themeGallery{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important} body.gcCodyFamiliarV3 #themesModal .themeTile{min-height:112px!important} body.gcCodyFamiliarV3 #gcStyleStudioModal .gcStylePalette{grid-template-columns:repeat(6,minmax(28px,1fr))!important} body.gcCodyFamiliarV3 #gcStyleStudioModal .gcStyleStudioFields{grid-template-columns:1fr!important} body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity{gap:6px!important} body.gcCodyFamiliarV3 #pmModal .pmCallActions>button{width:29px!important;height:29px!important;min-width:29px!important;min-height:29px!important} body.gcCodyFamiliarV3 #pmModal .pm.theirs{padding-right:2%!important} body.gcCodyFamiliarV3 #pmModal .pm.mine{padding-left:2%!important} body.gcCodyFamiliarV3 #pmModal .pmBubble{max-width:86%!important} } @media(max-width:360px){ body.gcCodyFamiliarV3 #pmModal .pmHead{gap:3px!important} body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity img{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important} body.gcCodyFamiliarV3 #pmModal .pmCallActions>button{width:27px!important;height:27px!important;min-width:27px!important;min-height:27px!important;font-size:13px!important} body.gcCodyFamiliarV3 #pmModal .pmBubble{max-width:88%!important} } /* ========================================================================== GC 0.66.00 — Cody UX completion / all-theme readability / mobile hardening Extends the existing unified layer; no second override stack. ========================================================================== */ /* Theme-aware contrast and common addon surfaces. */ :root[data-gc-theme-tone="light"]{--gc-u-shadow:0 16px 42px rgba(22,34,48,.20)} :root[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .modal{background:rgba(27,39,53,.32)!important} body.gcCodyFamiliarV3 .fieldHint, body.gcCodyFamiliarV3 .helpText, body.gcCodyFamiliarV3 .modalTitle p, body.gcCodyFamiliarV3 .gcOptionHint{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 .staffPill, body.gcCodyFamiliarV3 .staffMessageBadge, body.gcCodyFamiliarV3 .rank, body.gcCodyFamiliarV3 .composerSend, body.gcCodyFamiliarV3 #pmModal .pmComposer button[type="submit"], body.gcCodyFamiliarV3 .primaryBtn{color:var(--gc-u-on-accent)!important;text-shadow:none!important} body.gcCodyFamiliarV3 .badge, body.gcCodyFamiliarV3 .statusChip, body.gcCodyFamiliarV3 .coinPill, body.gcCodyFamiliarV3 .streakPill{border-color:var(--gc-u-line)!important} body.gcCodyFamiliarV3 .giphyCodyCard, body.gcCodyFamiliarV3 .youtubeCodyCard, body.gcCodyFamiliarV3 .paintModalCard, body.gcCodyFamiliarV3 .shareInviteCard, body.gcCodyFamiliarV3 .radioCard, body.gcCodyFamiliarV3 .giftCard, body.gcCodyFamiliarV3 .memoCard, body.gcCodyFamiliarV3 .callCard, body.gcCodyFamiliarV3 .gcMobileMoreCard, body.gcCodyFamiliarV3 .gcUserMenu, body.gcCodyFamiliarV3 .gcCompactPlayer{ background:var(--gc-u-panel2)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-line)!important } body.gcCodyFamiliarV3 .giphyCodyCard input, body.gcCodyFamiliarV3 .youtubeCodyCard input, body.gcCodyFamiliarV3 .shareInviteCard input{background:var(--gc-u-panel)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-line)!important} body.gcCodyFamiliarV3 .gcUserMenu button, body.gcCodyFamiliarV3 .gcUserMenu a{color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-line) 75%,transparent)!important} body.gcCodyFamiliarV3 .gcUserMenu small, body.gcCodyFamiliarV3 .giphyCodyCard p, body.gcCodyFamiliarV3 .youtubeCodyCard p, body.gcCodyFamiliarV3 .shareInviteCard p{color:var(--gc-u-muted)!important} /* Mainchat: Cody density without clipping content. */ body.gcCodyFamiliarV3 .msg .content{min-width:0!important;max-width:100%!important} body.gcCodyFamiliarV3 .msg .body, body.gcCodyFamiliarV3 .msg .gcStyledMessageText{overflow-wrap:anywhere!important;word-break:normal!important;white-space:normal!important} body.gcCodyFamiliarV3 .msg .meta{min-height:18px!important;flex-wrap:wrap!important;row-gap:2px!important} body.gcCodyFamiliarV3 .msg .time{margin-left:auto!important;white-space:nowrap!important;color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 .mention, body.gcCodyFamiliarV3 .gcMention{background:color-mix(in srgb,var(--gc-u-accent) 20%,var(--gc-u-panel))!important;color:var(--gc-u-text)!important;border:1px solid color-mix(in srgb,var(--gc-u-accent) 38%,var(--gc-u-line))!important;border-radius:5px!important;padding:1px 4px!important} body.gcCodyFamiliarV3 .gcPresenceEventText, body.gcCodyFamiliarV3 .gcCommunityEventText{display:block!important;max-width:100%!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important} /* Private chat: full-width rows, sent group against real right edge. */ body.gcCodyFamiliarV3 #pmModal .pm{width:100%!important;max-width:100%!important} body.gcCodyFamiliarV3 #pmModal .pm.theirs{padding:0!important} body.gcCodyFamiliarV3 #pmModal .pm.mine{padding:0!important;margin-left:0!important;margin-right:0!important} body.gcCodyFamiliarV3 #pmModal .pm.mine .pmBubble, body.gcCodyFamiliarV3 #pmModal .pm.theirs .pmBubble{margin:0!important} body.gcCodyFamiliarV3 #pmModal .pmBubble{max-width:min(79%,680px)!important} body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity{max-width:calc(100% - 158px)!important} body.gcCodyFamiliarV3 #pmModal .pmCallActions{margin-left:auto!important;padding-left:2px!important;transform:none!important;right:auto!important} body.gcCodyFamiliarV3 #pmModal .pmCallActions #pmMinimize, body.gcCodyFamiliarV3 #pmModal .pmCallActions #pmClose{margin-left:1px!important} /* PM history is made of .pm rows only. Old orphan close controls never render in the message body. */ body.gcCodyFamiliarV3 #pmModal #pmMessages>button, body.gcCodyFamiliarV3 #pmModal #pmMessages>.modalClose, body.gcCodyFamiliarV3 #pmModal #pmMessages>#pmReplyClose, body.gcCodyFamiliarV3 #pmModal #pmMessages>.gcTranslationClose{display:none!important} body.gcCodyFamiliarV3 #pmModal .gcTranslation{position:relative!important;max-width:100%!important;overflow:hidden!important} body.gcCodyFamiliarV3 #pmModal .gcTranslation .gcTranslationClose{position:absolute!important;right:4px!important;top:4px!important} body.gcCodyFamiliarV3 #pmModal .pmReplyBar.hidden{display:none!important} /* Mobile drawers: one transform model prevents half-open room/user panels. */ @media(max-width:900px){ html.gcCodyMobileShell body.gcCodyFamiliarV3{overflow:hidden!important} body.gcCodyFamiliarV3 #roomsPanel.rooms, body.gcCodyFamiliarV3 #usersPanel.gcRightPanel{ position:fixed!important;top:var(--gc-u-top-h)!important;bottom:calc(58px + env(safe-area-inset-bottom))!important; height:auto!important;max-height:none!important;width:min(320px,92vw)!important;max-width:92vw!important;margin:0!important; z-index:470!important;transition:transform .18s cubic-bezier(.2,.8,.2,1)!important;will-change:transform!important; backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;overflow:hidden!important;visibility:visible!important } body.gcCodyFamiliarV3 #roomsPanel.rooms{left:0!important;right:auto!important;transform:translate3d(-103%,0,0)!important} body.gcCodyFamiliarV3 #usersPanel.gcRightPanel{right:0!important;left:auto!important;transform:translate3d(103%,0,0)!important} body.gcCodyFamiliarV3 #roomsPanel.rooms.mobileOpen, body.gcCodyFamiliarV3 #usersPanel.gcRightPanel.mobileOpen{transform:translate3d(0,0,0)!important} body.gcCodyFamiliarV3 #sidebarBackdrop{ position:fixed!important;left:0!important;right:0!important;top:var(--gc-u-top-h)!important;bottom:calc(58px + env(safe-area-inset-bottom))!important; z-index:465!important;background:rgba(0,0,0,.42)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .18s ease!important } body.gcCodyFamiliarV3 #sidebarBackdrop.open{opacity:1!important;visibility:visible!important;pointer-events:auto!important} body.gcCodyFamiliarV3.gcMobileDrawerOpen .chat{pointer-events:none!important} /* One viewport-height authority on Android + iOS. */ html.gcCodyMobileShell body.gcCodyFamiliarV3 #app{height:var(--gc-cody-vv-height,var(--gc-vh,100dvh))!important;min-height:0!important;overflow:hidden!important} html.gcCodyMobileShell body.gcCodyFamiliarV3 .layout{height:calc(var(--gc-cody-vv-height,var(--gc-vh,100dvh)) - var(--gc-u-top-h))!important;min-height:0!important;overflow:hidden!important;gap:0!important} html.gcCodyMobileShell body.gcCodyFamiliarV3 .chat{min-width:0!important;min-height:0!important;height:100%!important;padding-bottom:calc(58px + env(safe-area-inset-bottom))!important;overflow:hidden!important} html.gcCodyMobileShell body.gcCodyFamiliarV3 .messages{min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!important} html.gcCodyMobileShell.gcKeyboardOpen body.gcCodyFamiliarV3 .gcMobileBottomNav{display:none!important} html.gcCodyMobileShell.gcKeyboardOpen body.gcCodyFamiliarV3 .chat{padding-bottom:0!important} /* Header stays on one row even at 320px. */ body.gcCodyFamiliarV3 .gcLogoBrand{min-width:0!important;overflow:hidden!important} body.gcCodyFamiliarV3 .gcLogoBrand img{display:block!important;max-width:min(190px,34vw)!important;height:auto!important;object-fit:contain!important} body.gcCodyFamiliarV3 .gcTopRight{min-width:0!important;flex:0 1 auto!important;margin-left:auto!important;overflow:visible!important} body.gcCodyFamiliarV3 .gcTopText, body.gcCodyFamiliarV3 #statusBtn, body.gcCodyFamiliarV3 #xpPill, body.gcCodyFamiliarV3 #coinPill, body.gcCodyFamiliarV3 #streakPill{display:none!important} /* Mobile PM uses safe edges and no percentage indent for own messages. */ body.gcCodyFamiliarV3 #pmModal .pmMessages{padding-inline:max(6px,env(safe-area-inset-left)) max(6px,env(safe-area-inset-right))!important} body.gcCodyFamiliarV3 #pmModal .pm.theirs, body.gcCodyFamiliarV3 #pmModal .pm.mine{padding:0!important} body.gcCodyFamiliarV3 #pmModal .pmBubble{max-width:82%!important} body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity{max-width:calc(100% - 132px)!important} } @media(max-width:430px){ body.gcCodyFamiliarV3 #roomsPanel.rooms, body.gcCodyFamiliarV3 #usersPanel.gcRightPanel{width:min(300px,90vw)!important;max-width:90vw!important} body.gcCodyFamiliarV3 #pmModal .pmBubble{max-width:84%!important} body.gcCodyFamiliarV3 #pmModal .pmMessageAvatar{flex-basis:26px!important;width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important;max-width:26px!important;max-height:26px!important} body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity{max-width:calc(100% - 124px)!important} body.gcCodyFamiliarV3 .gcLogoBrand img{max-width:min(150px,31vw)!important} } @media(max-width:360px){ body.gcCodyFamiliarV3 #roomsPanel.rooms, body.gcCodyFamiliarV3 #usersPanel.gcRightPanel{width:min(286px,89vw)!important;max-width:89vw!important} body.gcCodyFamiliarV3 #pmModal .pmBubble{max-width:86%!important} body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity{max-width:calc(100% - 116px)!important} body.gcCodyFamiliarV3 .gcLogoBrand img{max-width:105px!important} } @media(max-width:320px){ body.gcCodyFamiliarV3 #pmModal .pmBubble{max-width:88%!important} body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity img{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important} body.gcCodyFamiliarV3 #pmModal .pmCallActions>button{width:25px!important;height:25px!important;min-width:25px!important;min-height:25px!important} } @media(max-width:900px) and (orientation:landscape) and (max-height:520px){ :root{--gc-u-top-h:46px;--gc-u-composer-h:46px} body.gcCodyFamiliarV3 .gcClassicTop,body.gcCodyFamiliarV3 .topbar{height:46px!important;min-height:46px!important} body.gcCodyFamiliarV3 .gcMobileBottomNav{height:50px!important;min-height:50px!important} body.gcCodyFamiliarV3 #roomsPanel.rooms,body.gcCodyFamiliarV3 #usersPanel.gcRightPanel{top:46px!important;bottom:50px!important} body.gcCodyFamiliarV3 #pmModal .pmHead{min-height:44px!important} body.gcCodyFamiliarV3 #pmModal .pmMessages{padding-top:4px!important;padding-bottom:5px!important} } /* 0.66.00 final polish — unread/new-message indicator + generic toast. Keep both readable in every theme and clear of composer/mobile browser safe areas. */ body.gcCodyFamiliarV3 .newMessages{ position:absolute!important; left:50%!important;right:auto!important; bottom:calc(var(--gc-u-composer-h) + 14px)!important; transform:translateX(-50%)!important; width:max-content!important;max-width:min(460px,calc(100% - 24px))!important; min-height:36px!important;height:auto!important; display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important; margin:0!important;padding:7px 14px!important; border:1px solid color-mix(in srgb,var(--gc-u-accent) 42%,var(--gc-u-line))!important; border-radius:999px!important; background:color-mix(in srgb,var(--gc-u-panel2) 91%,var(--gc-u-accent) 9%)!important; color:var(--gc-u-text)!important; box-shadow:0 7px 22px color-mix(in srgb,#000 28%,transparent)!important; font-size:11px!important;font-weight:850!important;line-height:1.2!important; text-align:center!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important; overflow-wrap:anywhere!important;word-break:normal!important; z-index:82!important;cursor:pointer!important;isolation:isolate!important; } body.gcCodyFamiliarV3 .newMessages::before{ content:'↓';display:grid;place-items:center;width:20px;height:20px;flex:0 0 20px; border-radius:50%;background:var(--gc-u-accent);color:var(--gc-u-on-accent);font-size:12px;font-weight:950;line-height:1 } body.gcCodyFamiliarV3 .newMessages:hover, body.gcCodyFamiliarV3 .newMessages:focus-visible{ background:color-mix(in srgb,var(--gc-u-panel2) 84%,var(--gc-u-accent) 16%)!important; border-color:color-mix(in srgb,var(--gc-u-accent) 64%,var(--gc-u-line))!important; outline:0!important } body.gcCodyFamiliarV3 .newMessages.hidden{display:none!important} /* Toasts must never truncate technical/user feedback or become unreadable in a light theme. */ body.gcCodyFamiliarV3 #toast.toast{ position:fixed!important; left:50%!important;right:auto!important; top:calc(env(safe-area-inset-top) + var(--gc-u-top-h) + 10px)!important;bottom:auto!important; transform:translateX(-50%)!important; width:min(520px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important; min-height:52px!important;height:auto!important; display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;align-items:center!important;gap:10px!important; padding:9px 13px!important;margin:0!important; border:1px solid color-mix(in srgb,var(--gc-u-line) 78%,var(--gc-u-accent) 22%)!important; border-radius:13px!important; background:color-mix(in srgb,var(--gc-u-panel2) 96%,var(--gc-u-bg) 4%)!important; color:var(--gc-u-text)!important; box-shadow:0 14px 42px color-mix(in srgb,#000 36%,transparent)!important; font-size:12px!important;font-weight:750!important;line-height:1.35!important; text-align:left!important;white-space:normal!important;overflow:visible!important; overflow-wrap:anywhere!important;word-break:normal!important; z-index:10090!important } body.gcCodyFamiliarV3 #toast.toast.hidden{display:none!important} body.gcCodyFamiliarV3 #toast .gcToastText{ display:block!important;min-width:0!important;max-width:100%!important; color:inherit!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important; overflow-wrap:anywhere!important;word-break:normal!important } body.gcCodyFamiliarV3 #toast .gcToastIcon{ width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important; display:grid!important;place-items:center!important;border-radius:9px!important; background:color-mix(in srgb,var(--gc-u-panel) 78%,var(--gc-u-accent) 22%)!important; border:1px solid color-mix(in srgb,var(--gc-u-line) 68%,var(--gc-u-accent) 32%)!important; color:var(--gc-u-text)!important;font-size:15px!important;font-weight:950!important } body.gcCodyFamiliarV3 #toast.gcToastSuccess{border-color:color-mix(in srgb,var(--gc-u-good) 62%,var(--gc-u-line))!important} body.gcCodyFamiliarV3 #toast.gcToastSuccess .gcToastIcon{background:color-mix(in srgb,var(--gc-u-panel) 72%,var(--gc-u-good) 28%)!important;border-color:color-mix(in srgb,var(--gc-u-good) 58%,var(--gc-u-line))!important} body.gcCodyFamiliarV3 #toast.gcToastError{border-color:color-mix(in srgb,var(--gc-u-danger) 68%,var(--gc-u-line))!important} body.gcCodyFamiliarV3 #toast.gcToastError .gcToastIcon{background:color-mix(in srgb,var(--gc-u-panel) 70%,var(--gc-u-danger) 30%)!important;border-color:color-mix(in srgb,var(--gc-u-danger) 60%,var(--gc-u-line))!important} @media(max-width:900px){ body.gcCodyFamiliarV3 .newMessages{ position:fixed!important; left:50%!important;right:auto!important; bottom:calc(58px + env(safe-area-inset-bottom) + var(--gc-u-composer-h) + 8px)!important; max-width:calc(100vw - max(18px,env(safe-area-inset-left)) - max(18px,env(safe-area-inset-right)))!important; min-height:34px!important;padding:6px 12px!important;font-size:10.5px!important; transform:translateX(-50%)!important } html.gcCodyMobileShell.gcKeyboardOpen body.gcCodyFamiliarV3 .newMessages{ bottom:calc(var(--gc-u-composer-h) + env(safe-area-inset-bottom) + 8px)!important } body.gcCodyFamiliarV3 #toast.toast{ left:max(9px,env(safe-area-inset-left))!important; right:max(9px,env(safe-area-inset-right))!important; top:calc(env(safe-area-inset-top) + var(--gc-u-top-h) + 7px)!important; transform:none!important;width:auto!important;max-width:none!important; grid-template-columns:30px minmax(0,1fr)!important;gap:8px!important; min-height:48px!important;padding:8px 10px!important;border-radius:12px!important;font-size:11.5px!important } body.gcCodyFamiliarV3 #toast .gcToastIcon{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important} } @media(max-width:360px){ body.gcCodyFamiliarV3 .newMessages{max-width:calc(100vw - 14px)!important;padding:6px 10px!important} body.gcCodyFamiliarV3 #toast.toast{left:max(7px,env(safe-area-inset-left))!important;right:max(7px,env(safe-area-inset-right))!important;font-size:11px!important} } @media(max-width:900px) and (orientation:landscape) and (max-height:520px){ body.gcCodyFamiliarV3 .newMessages{bottom:calc(50px + env(safe-area-inset-bottom) + 48px)!important} html.gcCodyMobileShell.gcKeyboardOpen body.gcCodyFamiliarV3 .newMessages{bottom:calc(48px + env(safe-area-inset-bottom) + 6px)!important} body.gcCodyFamiliarV3 #toast.toast{top:calc(env(safe-area-inset-top) + 50px)!important} } /* 0.66.02 — all-theme field/composer readability hardening. Keep every theme's palette, but make typed text, caret, placeholders and native select/autofill states readable on all 36 themes (including iOS Safari). */ :root{ --gc-u-field-bg:color-mix(in srgb,var(--gc-u-panel2) 82%,var(--gc-u-bg) 18%); --gc-u-field-text:var(--gc-u-text); --gc-u-field-muted:var(--gc-u-muted); --gc-u-field-line:color-mix(in srgb,var(--gc-u-line) 86%,var(--gc-u-text) 14%); } body.gcCodyFamiliarV3 input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), body.gcCodyFamiliarV3 textarea, body.gcCodyFamiliarV3 select{ background:var(--gc-u-field-bg)!important; color:var(--gc-u-field-text)!important; -webkit-text-fill-color:var(--gc-u-field-text)!important; caret-color:var(--gc-u-accent)!important; border-color:var(--gc-u-field-line)!important; opacity:1!important; } body.gcCodyFamiliarV3 input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"])::placeholder, body.gcCodyFamiliarV3 textarea::placeholder{ color:var(--gc-u-field-muted)!important; -webkit-text-fill-color:var(--gc-u-field-muted)!important; opacity:1!important; } body.gcCodyFamiliarV3 select option, body.gcCodyFamiliarV3 select optgroup{ background:var(--gc-u-panel2)!important; color:var(--gc-u-text)!important; -webkit-text-fill-color:var(--gc-u-text)!important; } body.gcCodyFamiliarV3 input:-webkit-autofill, body.gcCodyFamiliarV3 input:-webkit-autofill:hover, body.gcCodyFamiliarV3 input:-webkit-autofill:focus, body.gcCodyFamiliarV3 textarea:-webkit-autofill, body.gcCodyFamiliarV3 select:-webkit-autofill{ -webkit-text-fill-color:var(--gc-u-field-text)!important; caret-color:var(--gc-u-accent)!important; -webkit-box-shadow:0 0 0 1000px var(--gc-u-field-bg) inset!important; box-shadow:0 0 0 1000px var(--gc-u-field-bg) inset!important; } /* The two actual chat typing surfaces must never inherit a user's outgoing message colour/gradient or an old theme's transparent WebKit text fill. */ body.gcCodyFamiliarV3 #message, body.gcCodyFamiliarV3 #pmInput, body.gcCodyFamiliarV3 .composerInputWrap textarea, body.gcCodyFamiliarV3 #pmModal .pmComposer textarea{ background:var(--gc-u-field-bg)!important; color:var(--gc-u-field-text)!important; -webkit-text-fill-color:var(--gc-u-field-text)!important; caret-color:var(--gc-u-accent)!important; text-shadow:none!important; background-clip:border-box!important; -webkit-background-clip:border-box!important; opacity:1!important; visibility:visible!important; } body.gcCodyFamiliarV3 #message::placeholder, body.gcCodyFamiliarV3 #pmInput::placeholder, body.gcCodyFamiliarV3 .composerInputWrap textarea::placeholder, body.gcCodyFamiliarV3 #pmModal .pmComposer textarea::placeholder{ color:var(--gc-u-field-muted)!important; -webkit-text-fill-color:var(--gc-u-field-muted)!important; opacity:1!important; } body.gcCodyFamiliarV3 #message:focus, body.gcCodyFamiliarV3 #pmInput:focus, body.gcCodyFamiliarV3 .composerInputWrap textarea:focus, body.gcCodyFamiliarV3 #pmModal .pmComposer textarea:focus{ border-color:color-mix(in srgb,var(--gc-u-accent) 74%,var(--gc-u-line))!important; box-shadow:0 0 0 2px color-mix(in srgb,var(--gc-u-accent) 18%,transparent)!important; outline:0!important; } body.gcCodyFamiliarV3 #message::selection, body.gcCodyFamiliarV3 #pmInput::selection{ background:var(--gc-u-accent)!important; color:var(--gc-u-on-accent)!important; -webkit-text-fill-color:var(--gc-u-on-accent)!important; } /* Theme-sensitive helper UI around text entry. */ body.gcCodyFamiliarV3 .mentionSuggestions, body.gcCodyFamiliarV3 .commandSuggestions, body.gcCodyFamiliarV3 .emojiPanel, body.gcCodyFamiliarV3 .actionTray, body.gcCodyFamiliarV3 #themesModal .modalCard{ background:var(--gc-u-panel)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-line)!important; } body.gcCodyFamiliarV3 .mentionSuggestions small, body.gcCodyFamiliarV3 .commandSuggestions .commandDesc, body.gcCodyFamiliarV3 #themesModal small{ color:var(--gc-u-muted)!important; } /* Explicit light-theme native-control hinting. */ :root[data-gc-theme-tone="light"]{color-scheme:light} :root[data-gc-theme-tone="dark"]{color-scheme:dark} /* ========================================================= 0.67.00 FINAL STABILITY & THEME COMPONENT AUDIT Theme colours remain individual; every daily-use component receives the same readable Cody geometry and explicit foreground/background contract. ========================================================= */ :root{ --gc-u-canvas:var(--gc-u-bg); --gc-u-card:color-mix(in srgb,var(--gc-u-panel) 96%,var(--gc-u-bg) 4%); --gc-u-card2:color-mix(in srgb,var(--gc-u-panel2) 97%,var(--gc-u-bg) 3%); --gc-u-border:color-mix(in srgb,var(--gc-u-line) 88%,var(--gc-u-text) 12%); --gc-u-subtle:color-mix(in srgb,var(--gc-u-panel2) 88%,var(--gc-u-text) 12%); --gc-u-overlay:color-mix(in srgb,var(--gc-u-panel2) 88%,transparent); } :root[data-gc-theme-tone="light"]{ --gc-u-card:color-mix(in srgb,var(--gc-u-panel) 99%,var(--gc-u-bg) 1%); --gc-u-card2:color-mix(in srgb,var(--gc-u-panel2) 99%,var(--gc-u-bg) 1%); --gc-u-overlay:color-mix(in srgb,var(--gc-u-panel2) 94%,transparent); } /* Canvas / chrome: a light theme must stay light all the way through. */ body.gcCodyFamiliarV3, body.gcCodyFamiliarV3 #app, body.gcCodyFamiliarV3 .layout, body.gcCodyFamiliarV3 .chat, body.gcCodyFamiliarV3 .messages{color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 .gcClassicTop, body.gcCodyFamiliarV3 .topbar, body.gcCodyFamiliarV3 .quickbar, body.gcCodyFamiliarV3 .rooms, body.gcCodyFamiliarV3 .gcRightPanel, body.gcCodyFamiliarV3 .users, body.gcCodyFamiliarV3 .gcRightTabs, body.gcCodyFamiliarV3 .composer, body.gcCodyFamiliarV3 .pmComposer{ color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; } :root[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .gcClassicTop, :root[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .topbar, :root[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .quickbar, :root[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .rooms, :root[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .gcRightPanel, :root[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .users, :root[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .gcRightTabs, :root[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .composer{ background:var(--gc-u-card2)!important; box-shadow:none!important; } :root[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .chat{ background:color-mix(in srgb,var(--gc-u-bg) 96%,var(--gc-u-panel) 4%)!important; } :root[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .chat::after{ background:linear-gradient(90deg, color-mix(in srgb,var(--gc-u-panel2) 48%,transparent), color-mix(in srgb,var(--gc-u-panel2) 18%,transparent) 50%, color-mix(in srgb,var(--gc-u-panel2) 38%,transparent))!important; } /* Userlist: neutralize old dark pseudo-overlay and low-opacity offline rows. */ body.gcCodyFamiliarV3 .userGroup>header{ background:color-mix(in srgb,var(--gc-u-panel) 88%,var(--gc-u-accent) 4%)!important; color:var(--gc-u-muted)!important; border-color:var(--gc-u-line)!important; } body.gcCodyFamiliarV3 .userCard{ background:color-mix(in srgb,var(--gc-u-panel) 72%,transparent)!important; color:var(--gc-u-text)!important; border-color:color-mix(in srgb,var(--gc-u-line) 58%,transparent)!important; filter:none!important; } body.gcCodyFamiliarV3 .userCard::after{ background:linear-gradient(90deg, color-mix(in srgb,var(--gc-u-panel2) 82%,transparent), color-mix(in srgb,var(--gc-u-panel2) 62%,transparent) 62%, color-mix(in srgb,var(--gc-u-panel2) 46%,transparent))!important; } :root[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .userCard::after{ background:linear-gradient(90deg, color-mix(in srgb,var(--gc-u-panel2) 94%,transparent), color-mix(in srgb,var(--gc-u-panel2) 84%,transparent) 62%, color-mix(in srgb,var(--gc-u-panel2) 72%,transparent))!important; } body.gcCodyFamiliarV3 .userCard.offline{opacity:.68!important;filter:saturate(.76)!important} :root[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .userCard.offline{opacity:.78!important;filter:saturate(.82)!important} body.gcCodyFamiliarV3 .userCard.offline:hover{opacity:.94!important;filter:none!important} body.gcCodyFamiliarV3 .uBody small, body.gcCodyFamiliarV3 .uStatus, body.gcCodyFamiliarV3 .offlineGroup header, body.gcCodyFamiliarV3 .rankCount, body.gcCodyFamiliarV3 .userListEmpty{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 .userListEmpty b, body.gcCodyFamiliarV3 .gcRightTitle strong{color:var(--gc-u-text)!important} /* User-selected name/message colours can be white, black or neon. Do not alter preferences; add a tiny opposite-tone outline so they remain readable. */ :root[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .gcStyledMessageText, :root[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .userStyledName, :root[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .msg .name, :root[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .uName strong{ text-shadow:-1px 0 rgba(20,28,38,.34),1px 0 rgba(20,28,38,.34),0 -1px rgba(20,28,38,.34),0 1px rgba(20,28,38,.34)!important; } :root[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 .gcStyledMessageText, :root[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 .userStyledName{ text-shadow:-1px 0 rgba(255,255,255,.10),1px 0 rgba(255,255,255,.10),0 -1px rgba(255,255,255,.10),0 1px rgba(255,255,255,.10)!important; } body.gcCodyFamiliarV3 .msg .body{color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 .msg:hover{background:color-mix(in srgb,var(--gc-u-panel) 48%,transparent)!important} body.gcCodyFamiliarV3 .msg .time, body.gcCodyFamiliarV3 .msg .edited, body.gcCodyFamiliarV3 .messageSeen{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 .replyQuote, body.gcCodyFamiliarV3 .gcPresenceEvent, body.gcCodyFamiliarV3 .gcCommunityEvent{ color:var(--gc-u-muted)!important; border-color:color-mix(in srgb,var(--gc-u-line) 58%,transparent)!important; } body.gcCodyFamiliarV3 .mention, body.gcCodyFamiliarV3 .gcMention{ background:color-mix(in srgb,var(--gc-u-accent) 20%,var(--gc-u-panel2))!important; color:var(--gc-u-text)!important; border-color:color-mix(in srgb,var(--gc-u-accent) 46%,var(--gc-u-line))!important; } /* PM, modals, menus, notifications and addon cards always inherit the theme. */ body.gcCodyFamiliarV3 #pmModal .pmCard, body.gcCodyFamiliarV3 #pmModal .pmMessages, body.gcCodyFamiliarV3 .modalCard, body.gcCodyFamiliarV3 .gcProfileMenu, body.gcCodyFamiliarV3 .gcUserMenu, body.gcCodyFamiliarV3 .notification, body.gcCodyFamiliarV3 .notificationCard, body.gcCodyFamiliarV3 .emojiPanel, body.gcCodyFamiliarV3 .actionTray, body.gcCodyFamiliarV3 .reactionPicker, body.gcCodyFamiliarV3 .giphyCodyCard, body.gcCodyFamiliarV3 .youtubeCodyCard, body.gcCodyFamiliarV3 .paintModalCard, body.gcCodyFamiliarV3 .shareInviteCard, body.gcCodyFamiliarV3 .giftCard, body.gcCodyFamiliarV3 .radioCard, body.gcCodyFamiliarV3 .callCard{ background:var(--gc-u-card2)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; } body.gcCodyFamiliarV3 .notification.unread, body.gcCodyFamiliarV3 .notificationCard.unread{ background:color-mix(in srgb,var(--gc-u-card2) 82%,var(--gc-u-accent) 18%)!important; } body.gcCodyFamiliarV3 .notification p, body.gcCodyFamiliarV3 .notificationCard p{color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 .notification small, body.gcCodyFamiliarV3 .notificationCard small, body.gcCodyFamiliarV3 .modalTitle p, body.gcCodyFamiliarV3 .fieldHint{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 .modalClose, body.gcCodyFamiliarV3 .gcUserMenu button, body.gcCodyFamiliarV3 .gcUserMenu a{color:var(--gc-u-text)!important} /* Native/disabled controls must stay legible on both tones. */ body.gcCodyFamiliarV3 button:disabled, body.gcCodyFamiliarV3 input:disabled, body.gcCodyFamiliarV3 textarea:disabled, body.gcCodyFamiliarV3 select:disabled{opacity:.58!important;filter:none!important} body.gcCodyFamiliarV3 button:focus-visible, body.gcCodyFamiliarV3 a:focus-visible, body.gcCodyFamiliarV3 input:focus-visible, body.gcCodyFamiliarV3 textarea:focus-visible, body.gcCodyFamiliarV3 select:focus-visible{ outline:2px solid color-mix(in srgb,var(--gc-u-accent) 72%,var(--gc-u-text))!important; outline-offset:2px!important; } /* Counter pills are preserved until their owning feature marks them read. */ body.gcCodyFamiliarV3 .badge, body.gcCodyFamiliarV3 .gcCountBadge, body.gcCodyFamiliarV3 [id$="Count"]{ color:#fff!important; -webkit-text-fill-color:#fff!important; text-shadow:none!important; } /* Scrollbars follow the active theme instead of retaining dark defaults. */ body.gcCodyFamiliarV3 *{scrollbar-color:color-mix(in srgb,var(--gc-u-muted) 68%,transparent) color-mix(in srgb,var(--gc-u-panel2) 74%,transparent)} body.gcCodyFamiliarV3 *::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--gc-u-muted) 68%,transparent)!important;border-color:var(--gc-u-panel2)!important} body.gcCodyFamiliarV3 *::-webkit-scrollbar-track{background:color-mix(in srgb,var(--gc-u-panel2) 76%,transparent)!important} /* 320–430px: no horizontal page overflow; drawers/modals stay inside safe edges. */ @media(max-width:430px){ html.gcCodyMobileShell,html.gcCodyMobileShell body{max-width:100vw!important;overflow-x:hidden!important} body.gcCodyFamiliarV3 .gcClassicTop, body.gcCodyFamiliarV3 .topbar, body.gcCodyFamiliarV3 .composer, body.gcCodyFamiliarV3 #pmModal .pmComposer{max-width:100vw!important} body.gcCodyFamiliarV3 .modal{padding-left:max(6px,env(safe-area-inset-left))!important;padding-right:max(6px,env(safe-area-inset-right))!important} body.gcCodyFamiliarV3 .modalCard{max-width:calc(100vw - max(12px,env(safe-area-inset-left)) - max(12px,env(safe-area-inset-right)))!important} } @media(max-width:900px) and (orientation:landscape) and (max-height:520px){ body.gcCodyFamiliarV3 .gcClassicTop,body.gcCodyFamiliarV3 .topbar{--gc-u-top-h:48px!important} body.gcCodyFamiliarV3 .composer{--gc-u-composer-h:48px!important;padding-block:4px!important} body.gcCodyFamiliarV3 #pmModal .pmHead{min-height:44px!important} } /* 0.67.00 LIGHT-THEME CASCADE CLEANUP Older generic Cody dialog rules have higher specificity than the theme-aware modal rule. Override only that proven conflict so light themes do not open a dark dialog with light-theme text. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3.gcCodyStructureV2 .modal > .modalCard{ background:var(--gc-u-card2)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; box-shadow:0 12px 34px color-mix(in srgb,var(--gc-u-text) 10%,transparent)!important; } /* 0.67.00 PM FINAL ALIGNMENT — one unambiguous direction model. Legacy row-reverse/justify combinations are intentionally not used here: sent rows stay normal flex rows and are pinned right with justify-content. */ body.gcCodyFamiliarV3 #pmModal .pm.theirs{ display:flex!important;flex-direction:row!important;justify-content:flex-start!important;align-items:flex-end!important; width:100%!important;max-width:100%!important;padding:0!important;margin:0!important; } body.gcCodyFamiliarV3 #pmModal .pm.mine{ display:flex!important;flex-direction:row!important;justify-content:flex-end!important;align-items:flex-end!important; width:100%!important;max-width:100%!important;padding:0!important;margin:0!important; } body.gcCodyFamiliarV3 #pmModal .pm.mine .pmBubble{order:1!important} body.gcCodyFamiliarV3 #pmModal .pm.mine .pmMessageAvatar{order:2!important;margin:0 0 0 7px!important} body.gcCodyFamiliarV3 #pmModal .pm.theirs .pmMessageAvatar{order:1!important;margin:0 7px 0 0!important} body.gcCodyFamiliarV3 #pmModal .pm.theirs .pmBubble{order:2!important} body.gcCodyFamiliarV3 #pmModal .pm.mine .pmBubble, body.gcCodyFamiliarV3 #pmModal .pm.theirs .pmBubble{margin:0!important;min-width:0!important;max-width:min(78%,680px)!important} body.gcCodyFamiliarV3 #pmModal .pm.mine .pmMeta{justify-content:flex-end!important} @media(max-width:430px){ body.gcCodyFamiliarV3 #pmModal .pm.mine .pmBubble, body.gcCodyFamiliarV3 #pmModal .pm.theirs .pmBubble{max-width:calc(100% - 42px)!important} } /* ========================================================= 0.67.01 LIGHT THEME VISUAL CONSISTENCY Targeted cascade repair for the five light palettes. These selectors match the real production IDs so older Cody dark defaults can no longer win. ========================================================= */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .chathead{ background:linear-gradient(180deg,var(--gc-u-card2),color-mix(in srgb,var(--gc-u-card2) 88%,var(--gc-u-bg) 12%))!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; box-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .chathead h2{color:var(--gc-u-text)!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .chathead p{color:var(--gc-u-muted)!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .chathead .connection{color:var(--gc-u-muted)!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .chathead .connection.online{color:color-mix(in srgb,var(--gc-u-good) 64%,var(--gc-u-text) 36%)!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #usersPanel .gcRightTitle{ background:linear-gradient(180deg,var(--gc-u-card2),color-mix(in srgb,var(--gc-u-card2) 90%,var(--gc-u-bg) 10%))!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; box-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #usersPanel .gcRightTitle strong{color:var(--gc-u-text)!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #users .userGroup>header{ background:color-mix(in srgb,var(--gc-u-panel2) 91%,var(--gc-u-accent) 9%)!important; color:color-mix(in srgb,var(--gc-u-text) 88%,var(--gc-u-accent) 12%)!important; border-bottom-color:var(--gc-u-border)!important; text-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #users .userGroup>header b{color:inherit!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #users .userGroup>header .rankCount{ color:var(--gc-u-text)!important; background:color-mix(in srgb,var(--gc-u-panel) 74%,var(--gc-u-accent) 26%)!important; border-color:color-mix(in srgb,var(--gc-u-line) 72%,var(--gc-u-accent) 28%)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #users .userCard:not(.has-nameplate){ background:color-mix(in srgb,var(--gc-u-panel) 88%,var(--gc-u-bg) 12%)!important; color:var(--gc-u-text)!important; border-bottom-color:color-mix(in srgb,var(--gc-u-line) 72%,transparent)!important; box-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #users .userCard:not(.has-nameplate):hover, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #users .userCard:not(.has-nameplate):focus-visible{ background:color-mix(in srgb,var(--gc-u-panel) 91%,var(--gc-u-accent) 9%)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #users .userCard:not(.has-nameplate)::after{ background:linear-gradient(90deg, color-mix(in srgb,var(--gc-u-panel) 28%,transparent), transparent 64%, color-mix(in srgb,var(--gc-u-panel2) 42%,transparent))!important; } /* Do not fade the complete row: that also fades name/badge/action readability. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #users .userCard.offline{ opacity:1!important;filter:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #users .userCard.offline .uAvatar{opacity:.66!important;filter:saturate(.72)!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #users .userCard.offline .uBody small, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #users .userCard.offline .uStatus{ color:color-mix(in srgb,var(--gc-u-muted) 82%,var(--gc-u-text) 18%)!important; opacity:1!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #users .userCard .uMeta{opacity:.68!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #users .userCard:hover .uMeta, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #users .userCard:focus-visible .uMeta{opacity:1!important} /* Preserve each user's chosen hue, but make solid colours usable on a pale canvas. Neon/gradient keep their own visual mode and receive only an ink keyline; nameplates stay untouched because their background is intentionally dark/media based. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .gcStyledMessageText:not(.gcTextMode_neon):not(.gcTextMode_gradient){ color:color-mix(in srgb,var(--gc-message-color,var(--gc-u-text)) 25%,var(--gc-u-text) 75%)!important; -webkit-text-fill-color:color-mix(in srgb,var(--gc-message-color,var(--gc-u-text)) 25%,var(--gc-u-text) 75%)!important; text-shadow:none!important; -webkit-text-stroke:0!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #messages .msg .meta>.name:not(.gcNameMode_gradient):not(.gcNameMode_neon), html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #users .userCard:not(.has-nameplate) .userStyledName:not(.gcNameMode_gradient):not(.gcNameMode_neon), html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #profileModal .profileStyledName:not(.gcNameMode_gradient):not(.gcNameMode_neon){ color:color-mix(in srgb,var(--gc-style-c1,var(--gc-u-text)) 25%,var(--gc-u-text) 75%)!important; -webkit-text-fill-color:color-mix(in srgb,var(--gc-style-c1,var(--gc-u-text)) 25%,var(--gc-u-text) 75%)!important; text-shadow:none!important; -webkit-text-stroke:0!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .gcStyledMessageText.gcTextMode_neon, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .gcStyledMessageText.gcTextMode_gradient, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #messages .msg .meta>.name.gcNameMode_neon, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #messages .msg .meta>.name.gcNameMode_gradient, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #users .userCard:not(.has-nameplate) .userStyledName.gcNameMode_neon, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #users .userCard:not(.has-nameplate) .userStyledName.gcNameMode_gradient{ -webkit-text-stroke:.38px color-mix(in srgb,var(--gc-u-text) 72%,transparent)!important; paint-order:stroke fill!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .gcStyledMessageText .gcStyleEmoji{ -webkit-text-stroke:0!important;paint-order:normal!important;text-shadow:none!important; } /* Main history should look deliberately light, not like a dark skin with white paint over it. Keep the compact Cody row rhythm while restoring hierarchy. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #messages.messages{ background:linear-gradient(180deg, color-mix(in srgb,var(--gc-u-bg) 94%,var(--gc-u-panel) 6%), color-mix(in srgb,var(--gc-u-bg) 97%,var(--gc-u-panel2) 3%))!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #messages>.msg:not(.gcPresenceEvent):not(.gcCommunityEvent){ border-bottom-color:color-mix(in srgb,var(--gc-u-line) 48%,transparent)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #messages>.msg:not(.gcPresenceEvent):not(.gcCommunityEvent):nth-child(odd){ background:color-mix(in srgb,var(--gc-u-panel) 34%,transparent)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #messages>.msg:not(.gcPresenceEvent):not(.gcCommunityEvent):hover{ background:color-mix(in srgb,var(--gc-u-panel) 68%,var(--gc-u-accent) 3%)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .gcPresenceEvent, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .gcCommunityEvent{ background:color-mix(in srgb,var(--gc-u-panel2) 74%,transparent)!important; color:var(--gc-u-muted)!important; border-color:color-mix(in srgb,var(--gc-u-line) 52%,transparent)!important; text-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .gcPresenceText, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .gcCommunityEvent small{color:var(--gc-u-muted)!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .replyQuote{ background:color-mix(in srgb,var(--gc-u-panel2) 82%,var(--gc-u-accent) 4%)!important; color:var(--gc-u-muted)!important; border-color:color-mix(in srgb,var(--gc-u-accent) 38%,var(--gc-u-line))!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .replyQuote b{color:color-mix(in srgb,var(--gc-u-accent) 58%,var(--gc-u-text) 42%)!important} /* PM keeps the same side logic, but every surface follows a light palette. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal .gcPmCard, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal .pmCard{ background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal .pmHead{ background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal .pmMessages{ background:color-mix(in srgb,var(--gc-u-bg) 95%,var(--gc-u-panel) 5%)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal .pm.theirs .pmBubble{ background:var(--gc-u-panel)!important;color:var(--gc-u-text)!important;border:1px solid color-mix(in srgb,var(--gc-u-line) 68%,transparent)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal .pm.mine .pmBubble{ background:color-mix(in srgb,var(--gc-u-panel) 78%,var(--gc-u-accent) 22%)!important; color:var(--gc-u-text)!important;border:1px solid color-mix(in srgb,var(--gc-u-line) 62%,var(--gc-u-accent) 38%)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal .pmBody, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal .pmMeta, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal .pmReceipt{color:var(--gc-u-text)!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal .pmMeta time{color:var(--gc-u-muted)!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal .pmComposer{ background:var(--gc-u-card2)!important;border-color:var(--gc-u-border)!important; } /* Inputs/composer: explicit Safari/iOS foreground contract. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #message, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmInput, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .composer textarea, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .pmComposer textarea{ color:var(--gc-u-text)!important; -webkit-text-fill-color:var(--gc-u-text)!important; caret-color:color-mix(in srgb,var(--gc-u-accent) 62%,var(--gc-u-text) 38%)!important; background:color-mix(in srgb,var(--gc-u-panel) 78%,var(--gc-u-bg) 22%)!important; border-color:var(--gc-u-border)!important; opacity:1!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #message::placeholder, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmInput::placeholder, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .composer textarea::placeholder, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .pmComposer textarea::placeholder{ color:color-mix(in srgb,var(--gc-u-muted) 88%,var(--gc-u-text) 12%)!important; -webkit-text-fill-color:color-mix(in srgb,var(--gc-u-muted) 88%,var(--gc-u-text) 12%)!important; opacity:1!important; } /* Right-column statistics follow the light palette too; old #0d1b2d panels are only appropriate for dark skins. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #usersPanel>.liveStats{ background:var(--gc-u-panel)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; box-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #usersPanel>.liveStats>b{ background:color-mix(in srgb,var(--gc-u-panel2) 78%,var(--gc-u-accent) 22%)!important; color:var(--gc-u-text)!important; -webkit-text-fill-color:var(--gc-u-text)!important; text-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #usersPanel>.liveStats span{ background:var(--gc-u-panel2)!important; color:var(--gc-u-muted)!important; border-color:color-mix(in srgb,var(--gc-u-line) 60%,transparent)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #usersPanel>.liveStats strong{color:var(--gc-u-text)!important} /* ========================================================= 0.67.02 WHITE THEME COMPLETE COMPONENT FIX Scope: the actual WHITE theme (`data-chat-theme="light"`) only. Purpose: remove remaining hard-coded dark Cody surfaces without touching component logic, database behaviour or the other 35 themes. ========================================================= */ html[data-chat-theme="light"]{ --gc-white-canvas:#edf3f8; --gc-white-surface:#ffffff; --gc-white-surface-alt:#f7fafc; --gc-white-surface-soft:#eef3f7; --gc-white-line:#c8d5e2; --gc-white-line-strong:#aebfd0; --gc-white-text:#172435; --gc-white-muted:#5d7085; --gc-white-subtle:#7b8da0; --gc-u-bg:var(--gc-white-canvas); --gc-u-panel:var(--gc-white-surface); --gc-u-panel2:var(--gc-white-surface-alt); --gc-u-line:var(--gc-white-line); --gc-u-text:var(--gc-white-text); --gc-u-muted:var(--gc-white-muted); --gc-u-card:var(--gc-white-surface); --gc-u-card2:var(--gc-white-surface-alt); --gc-u-border:var(--gc-white-line); --gc-u-hover:color-mix(in srgb,var(--gc-u-accent) 8%,var(--gc-white-surface-alt)); --gc-u-soft-accent:color-mix(in srgb,var(--gc-u-accent) 13%,var(--gc-white-surface)); --gc-u-shadow:0 16px 42px rgba(34,52,71,.16); color-scheme:light; } html[data-chat-theme="light"] body.gcCodyFamiliarV3{ background:linear-gradient(180deg,#f3f7fb 0%,var(--gc-white-canvas) 100%)!important; color:var(--gc-white-text)!important; } /* Generic white modal/addon contract. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 .modalCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .addonCenterCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .socialCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .notificationCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .profileModalCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .profileEditorCard{ background:var(--gc-white-surface)!important; color:var(--gc-white-text)!important; border-color:var(--gc-white-line)!important; box-shadow:0 18px 48px rgba(35,52,70,.18)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .modalTitle, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .modalTitle h2, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .modalTitle h3{ color:var(--gc-white-text)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .modalTitle p, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard .modalTitle p{ color:var(--gc-white-muted)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .modalTitle small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard .modalTitle small{ color:color-mix(in srgb,var(--gc-u-accent) 62%,var(--gc-white-text) 38%)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .modalClose, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard .modalClose{ background:var(--gc-white-surface-alt)!important; color:var(--gc-white-text)!important; border-color:var(--gc-white-line)!important; box-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .modalClose:hover, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard .modalClose:hover{ background:var(--gc-u-hover)!important; color:var(--gc-white-text)!important; border-color:color-mix(in srgb,var(--gc-u-accent) 42%,var(--gc-white-line))!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard input:not([type=checkbox]):not([type=radio]):not([type=range]), html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard select, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard textarea{ background:var(--gc-white-surface-alt)!important; color:var(--gc-white-text)!important; -webkit-text-fill-color:var(--gc-white-text)!important; border-color:var(--gc-white-line)!important; caret-color:color-mix(in srgb,var(--gc-u-accent) 64%,var(--gc-white-text) 36%)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard input::placeholder, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard textarea::placeholder{ color:var(--gc-white-muted)!important; -webkit-text-fill-color:var(--gc-white-muted)!important; opacity:1!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard label{color:var(--gc-white-text)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard .muted{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard .secondaryBtn{ background:var(--gc-white-surface-soft)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard .box, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard .panel, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard .card, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard .spotifyStatus, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard .privateEmpty, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard .sideEmpty{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard .sideEmpty, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard .privateEmpty{color:var(--gc-white-muted)!important} /* Emoji / emoticons / stickers: no dark island inside WHITE. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #emojiPanel.emojiPanel{ background:var(--gc-white-surface)!important; color:var(--gc-white-text)!important; border-color:var(--gc-white-line-strong)!important; box-shadow:0 18px 44px rgba(35,52,70,.20)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #emojiPanel .emojiHead{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #emojiPanel .emojiHead b{color:var(--gc-white-text)!important;text-shadow:none!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #emojiPanel #emojiContextLabel{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #emojiPanel #emojiClose{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #emojiPanel #emojiClose:hover{background:var(--gc-u-hover)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #emojiPanel .emojiTabs{ background:var(--gc-white-surface-alt)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #emojiPanel .emojiTabs button{background:transparent!important;color:var(--gc-white-muted)!important;border-color:transparent!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #emojiPanel .emojiTabs button.active{ background:var(--gc-u-soft-accent)!important;color:var(--gc-white-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 54%,var(--gc-white-line))!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #emojiPanel .emojiGrid{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #emojiPanel .emojiGrid button{background:transparent!important;border-color:transparent!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #emojiPanel .emojiGrid button:hover{background:var(--gc-u-hover)!important;border-color:var(--gc-white-line)!important} /* Friends / Social. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .socialCard{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; box-shadow:0 18px 48px rgba(35,52,70,.18)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .modalTitle{ background:var(--gc-white-surface-alt)!important;border-bottom-color:var(--gc-white-line)!important;color:var(--gc-white-text)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .modalTitle h3{color:var(--gc-white-text)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .modalTitle p{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .modalTitle small{color:color-mix(in srgb,var(--gc-u-accent) 62%,var(--gc-white-text) 38%)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .socialList{background:var(--gc-white-surface)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSummary>span{ background:var(--gc-white-surface-alt)!important;border-color:var(--gc-white-line)!important;color:var(--gc-white-text)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSummary b{color:color-mix(in srgb,var(--gc-u-accent) 62%,var(--gc-white-text) 38%)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSummary small{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSection{ background:var(--gc-white-surface)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSectionHead{ background:var(--gc-white-surface-soft)!important;border-bottom-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSectionHead b{color:color-mix(in srgb,var(--gc-u-accent) 58%,var(--gc-white-text) 42%)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSectionHead span{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border:1px solid var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .socialRow{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-bottom-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .socialRow:hover{background:var(--gc-u-hover)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendRowText b{color:var(--gc-white-text)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendRowText small{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendPresence{border-color:var(--gc-white-surface)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendChatBtn{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendsEmpty{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendsEmpty b{color:var(--gc-white-text)!important} /* User action menu. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; box-shadow:0 18px 48px rgba(35,52,70,.20)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu>header{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-bottom-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu>header b{color:var(--gc-white-text)!important;text-shadow:none!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu>header small{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuClose{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuTabs{ background:var(--gc-white-surface-alt)!important;border-bottom-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuTabs button{background:transparent!important;color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuTabs button.active{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;box-shadow:inset 0 -3px var(--gc-u-accent)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuBody{background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuSectionLabel{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuGrid button, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuModeration button, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuGrid>span[data-friend-action-slot]>button{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuGrid button:hover, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuModeration button:hover, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuGrid>span[data-friend-action-slot]>button:hover{ background:var(--gc-u-hover)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 38%,var(--gc-white-line))!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuGrid small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuModeration small{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu .friendFriends{ background:#eef9f3!important;color:#24613f!important;border-color:#a9d8bd!important; } /* Own profile drawer, including the previously dark Beheer block. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu.gcProfileMenuCody, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu.gcProfileDrawer{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; box-shadow:0 18px 48px rgba(35,52,70,.20)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileDrawerHead, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileDrawerFooter{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important;box-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileIdentityCopy b{color:var(--gc-white-text)!important;text-shadow:none!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileIdentityCopy>span, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileIdentityCopy small{color:#4f647a!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileDrawerClose{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileQuickActions>button{ background:var(--gc-white-surface-soft)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important;box-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileQuickActions>button:hover{ background:var(--gc-u-hover)!important;border-color:var(--gc-white-line-strong)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuGroup, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu #profileMenuAdminGroup{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuGroup+.gcProfileMenuGroup{border-top-color:var(--gc-white-line)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuLabel{ color:color-mix(in srgb,var(--gc-u-accent) 60%,var(--gc-white-text) 40%)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuGroup>button, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuGroup>a{ background:transparent!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuGroup>button+button, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuGroup>a+a, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuGroup>button+a, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuGroup>a+button{border-top-color:var(--gc-white-line)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuGroup>button:hover, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuGroup>a:hover, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuGroup>button:focus-visible, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuGroup>a:focus-visible{background:var(--gc-u-hover)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuIcon, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileMenuContact>span.gcProfileMenuIcon:first-child, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileMenuApply>span.gcProfileMenuIcon:first-child, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileMenuAdmin>span.gcProfileMenuIcon:first-child{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuCopy b{color:var(--gc-white-text)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuCopy small{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuGroup>button>i, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuGroup>a>i{color:var(--gc-white-subtle)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileDrawerFooter>button{ background:var(--gc-white-surface-soft)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileDrawerFooter .gcProfileLogout{ background:#fff0f1!important;color:#a4323b!important;border-color:#e5b7bb!important; } /* Report centre and attachment controls. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal .reportCenterCard{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal .reportTabs{ background:var(--gc-white-surface-alt)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal .reportTabs button{background:transparent!important;color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal .reportTabs button.active{ background:color-mix(in srgb,var(--gc-u-accent) 10%,var(--gc-white-surface))!important;color:var(--gc-white-text)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal .reportPane, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal .reportPane label{color:var(--gc-white-text)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal .reportPane input, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal .reportPane select, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal .reportPane textarea{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;-webkit-text-fill-color:var(--gc-white-text)!important;border-color:var(--gc-white-line-strong)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal .reportPane input::placeholder, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal .reportPane textarea::placeholder{ color:var(--gc-white-muted)!important;-webkit-text-fill-color:var(--gc-white-muted)!important;opacity:1!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal .reportAttachment{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal .reportAttachment span, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal .reportAttachment small{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal .reportAttachment input{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line-strong)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal .reportListItem, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal .reportThreadHead, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal .reportMessages article{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal .reportListItem small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal .reportMessages small{color:var(--gc-white-muted)!important} /* Addon centre and common addon internals. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #addonCenterModal .addonCenterCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #addonCenterModal .addonCenterContent, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #addonCenterModal .addonCenterFooter{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #addonCenterModal .addonCenterTabs{ background:var(--gc-white-surface-alt)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #addonCenterModal .addonCenterTabs button{background:transparent!important;color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #addonCenterModal .addonCenterTabs button.active{background:var(--gc-u-accent)!important;color:var(--gc-u-on-accent)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #addonCenterModal .addonSettingCard{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .voiceRecorderVisual, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .profileSocialFields, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .referralStats span, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcNameplateTools, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .nameplateAddonCard .gcNameplateTools{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .voiceRecorderVisual span, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .profileSocialFields>small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .referralStats small{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 .profileSocialLinks a, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .shareButtons a, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .shareButtons button{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } /* Native controls and iOS/Safari keep explicit readable foregrounds. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 input, html[data-chat-theme="light"] body.gcCodyFamiliarV3 textarea, html[data-chat-theme="light"] body.gcCodyFamiliarV3 select{ color:var(--gc-white-text)!important; -webkit-text-fill-color:var(--gc-white-text)!important; caret-color:color-mix(in srgb,var(--gc-u-accent) 64%,var(--gc-white-text) 36%)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 input::placeholder, html[data-chat-theme="light"] body.gcCodyFamiliarV3 textarea::placeholder{ color:var(--gc-white-muted)!important;-webkit-text-fill-color:var(--gc-white-muted)!important;opacity:1!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 input[type="file"]::file-selector-button{ background:var(--gc-white-surface-soft)!important;color:var(--gc-white-text)!important;border:1px solid var(--gc-white-line)!important;border-radius:7px!important; } /* 0.67.02 WHITE contrast tightening for accent-copy and pending actions. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .modalTitle small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSummary b, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSectionHead b, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuLabel, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .modalTitle small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcAddonModalCard .modalTitle small{ color:color-mix(in srgb,var(--gc-u-accent) 45%,var(--gc-white-text) 55%)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendCancelBtn, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendPendingRow .friendCancelBtn{ background:#fff7e8!important; color:#7b5511!important; border-color:#d8b766!important; box-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendCancelBtn:hover{ background:#fff1d1!important; color:#68470d!important; border-color:#caa64e!important; } /* ========================================================================== GC 0.67.02 — WHITE complete component contract Scope: WHITE only (data-chat-theme="light"). Purpose: remove legacy Cody dark surfaces from every interactive component without changing geometry, JS behaviour, API calls or any other theme. ========================================================================== */ /* Rooms drawer / room cards. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #roomsPanel, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .rooms{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; box-shadow:10px 0 30px rgba(45,65,84,.12)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .rooms .roomAsideHead, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .rooms .asideHead{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .rooms .roomShell{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important;box-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .rooms .roomShell:hover{background:var(--gc-u-hover)!important;border-color:var(--gc-white-line-strong)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 .rooms .roomShell.active{ background:color-mix(in srgb,var(--gc-u-accent) 8%,var(--gc-white-surface))!important;border-color:color-mix(in srgb,var(--gc-u-accent) 42%,var(--gc-white-line))!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .rooms .roomShell .room, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .rooms .roomShell .room.roomSelect{background:transparent!important;color:var(--gc-white-text)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 .rooms .roomIcon{ background:var(--gc-white-surface-soft)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important;box-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .rooms .roomIcon-adult{background:#fff2f5!important;border-color:#e1bac4!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 .rooms .roomIcon-games{background:#f4f1ff!important;border-color:#c9c0e6!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 .rooms .roomTitle, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .rooms .roomName, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .rooms strong{color:var(--gc-white-text)!important;text-shadow:none!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 .rooms .roomMeta, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .rooms small{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 .rooms .roomGameStrip, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .rooms .roomGameActions{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .rooms .roomGameActions button{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } /* Status / presence. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #statusModal .statusCard{background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #statusModal .statusOption{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #statusModal .statusOption:hover{background:var(--gc-u-hover)!important;border-color:var(--gc-white-line-strong)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #statusModal .statusOption.active{ background:color-mix(in srgb,var(--gc-u-accent) 10%,var(--gc-white-surface))!important;border-color:color-mix(in srgb,var(--gc-u-accent) 55%,var(--gc-white-line))!important;box-shadow:inset 3px 0 color-mix(in srgb,var(--gc-u-accent) 68%,#8f731f)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #statusModal .statusOption small{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #statusModal .invisibleRow{ background:#f7f3fb!important;color:var(--gc-white-text)!important;border-color:#cfc1db!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #statusModal .invisibleRow small{color:#675a73!important} /* Notifications and push preferences. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #notificationsModal .notificationCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #notificationsModal .notificationHead{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #notificationsModal .notificationHead small{color:color-mix(in srgb,var(--gc-u-accent) 45%,var(--gc-white-text) 55%)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #notificationsModal .pushSettings{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #notificationsModal .pushSettings small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #notificationsModal .pushSettings p{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #notificationsModal .pushPreferenceFields{border-top-color:var(--gc-white-line)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #notificationsModal .pushPreferenceFields label{color:var(--gc-white-text)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #notificationsModal .notification{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-bottom-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #notificationsModal .notification.unread{ background:color-mix(in srgb,var(--gc-u-accent) 8%,var(--gc-white-surface))!important;border-left-color:color-mix(in srgb,var(--gc-u-accent) 72%,#8f731f)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #notificationsModal .notification:hover{background:var(--gc-u-hover)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #notificationsModal .notification p, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #notificationsModal .notification small{color:var(--gc-white-muted)!important} /* Action tray, addon launcher, command/mention/reaction popovers. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #actionTray, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .actionTray, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reactionPicker, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .reactionPicker, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #mentionSuggestions, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #commandSuggestions, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcMentionOptionsCard{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important;box-shadow:0 14px 34px rgba(35,52,70,.18)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #actionTray .addonTrayHead, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reactionPicker .reactionPickerHead{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #actionTray .addonTrayHead small{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #actionTray .addonTrayQuick, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #actionTray .speelcafeTraySummary{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #actionTray .addonTrayQuick small{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #actionTray .addonTrayGrid>button{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important;box-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #actionTray .addonTrayGrid>button:hover{background:var(--gc-u-hover)!important;border-color:var(--gc-white-line-strong)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #mentionSuggestions button, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #commandSuggestions button, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcMentionOptionsCard button{ background:transparent!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #mentionSuggestions button:hover, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #commandSuggestions button:hover, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcMentionOptionsCard button:hover{background:var(--gc-u-hover)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #mentionSuggestions small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #commandSuggestions small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcMentionOptionsCard small{color:var(--gc-white-muted)!important} /* Public profile: remaining high-specificity legacy surfaces. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .profileModalCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcProfile, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcProfilePane{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcProfileHero{background-color:var(--gc-white-surface-soft)!important;border-bottom-color:var(--gc-white-line)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcProfileHero:not([style*="background-image"])::before{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(238,243,247,.72) 58%,rgba(255,255,255,.98))!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcProfileTabs, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcCodyProfilePrimaryActions, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcCodyProfileSecondaryActions, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcPublicProfileMusic, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .profileAlbumActions, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #gcProfileLevelCard{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcProfileTabs button{background:transparent!important;color:var(--gc-white-muted)!important;border-color:var(--gc-white-line)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcProfileTabs button:hover{background:var(--gc-u-hover)!important;color:var(--gc-white-text)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcProfileTabs button.active{background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .profileInfoRow, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .profileFriendCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .profileGiftCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .profilePhoto, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcUploadedProfileTrack, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcSpotifyProfileTrack{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcCodyProfileSecondaryActions>button, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcCodyProfileMoreActions button, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcCodyProfileSocials a, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcPublicProfileMusicManage, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcProfileMusicOpen{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcCodyProfileSecondaryActions>button:hover, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcCodyProfileMoreActions button:hover, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcCodyProfileSocials a:hover{background:var(--gc-u-hover)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .profileBio, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcUploadedProfileTrack b{color:var(--gc-white-text)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .profileBio, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcUploadedProfileTrack small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .gcSpotifyProfileTrack em, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .profileAlbumActions small{color:var(--gc-white-muted)!important} /* Profile editor and Chat options: keep all working controls, repaint old dark cards. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .profileStudioCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .profileStudioEditor, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .profileTabbedForm, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .profileTabPane, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHub, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubPane, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionsCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionsForm, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionsPane{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .profileStudioHeader, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .profileEditorTabs, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .profileEditorActions, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubTabs, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionsTitle, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionsTabs, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionsActions{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .profileEditorTabs button, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionsTabs button{background:transparent!important;color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .profileEditorTabs button.active, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionsTabs button.active{background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;box-shadow:inset 0 -3px var(--gc-u-accent)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .profileUploadHero, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .profileBannerUpload, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .profileStyleLauncher, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .userlistStyleStudio, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .profileMusicStudio, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .profileSocialStudio, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .profileStyleInlinePanel, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .profileLivePanel, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .profileLiveCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionToggle, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionField, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #chatOptionsModal .gcInlineStyleCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #chatOptionsModal .gcUiTextScaleCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #chatOptionsModal .gcAvatarShapeCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #chatOptionsModal .gcPasswordChangeBox, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #chatOptionsModal .gcMentionOptionsCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionThemeCard{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .profileSectionHead small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .userlistStyleNote, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .profileSocialHint, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #editProfileModal .gcProfileMusicHint, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionsSectionHead small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #chatOptionsModal .gcUiTextScaleHead small{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionInfo{background:#eef4ff!important;color:#334b6b!important;border-color:#bed0e8!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionInfo.adultInfo{background:#fff2f5!important;color:#70404c!important;border-color:#e4bec7!important} /* Wallet, badges, birthday, friends/favourites, leaderboards/social lists. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #walletModal .walletHero{ background:#fff9e8!important;color:var(--gc-white-text)!important;border-color:#dfc87b!important;box-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #walletModal .walletHero strong{color:#755607!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #walletModal .walletHero span{color:#6c5c31!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #walletModal .walletRow, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #leaderboardModal .leaderRow, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #socialFeedModal .feedRow, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #favoritesModal .socialRow{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #walletModal .walletRow small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #leaderboardModal .leaderRow small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #socialFeedModal .feedRow small{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #badgesModal .badgeCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #badgesModal .achievementCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #birthdayModal .birthdayCalendar, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #birthdayModal .birthdayDay, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #birthdayModal .birthdayRewardInfo{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #badgesModal .badgeCard small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #badgesModal .achievementCard small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #birthdayModal small{color:var(--gc-white-muted)!important} /* Secret Post. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #secretPostModal .secretPostHead{border-bottom-color:var(--gc-white-line)!important;color:var(--gc-white-text)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #secretPostModal .secretPostHead p{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #secretPostModal .secretPostWallet, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #secretPostModal .secretPostTabs, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #secretPostModal .secretPostItem, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #secretPostModal .secretComposeIntro, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #secretPostModal .secretEffectGrid button, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #secretPostModal .secretAnonToggle{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #secretPostModal .secretPostTabs button{background:transparent!important;color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #secretPostModal .secretPostTabs button.active, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #secretPostModal .secretEffectGrid button.active{ background:color-mix(in srgb,var(--gc-u-accent) 10%,var(--gc-white-surface))!important;color:var(--gc-white-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 48%,var(--gc-white-line))!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #secretPostModal .secretPostItem small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #secretPostModal .secretComposeIntro small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #secretPostModal .secretPostCompose>label, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #secretPostModal .secretAnonToggle small{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #secretPostModal .secretPostCost{background:#fff9e8!important;color:#624c12!important;border-color:#dfc87b!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #secretRevealModal .secretRevealCard{background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #secretRevealModal .secretRevealBody{background:#fbf5ff!important;color:var(--gc-white-text)!important;border-color:#d7c4df!important} /* Media/addon dialogs: frames light, actual photo/video content remains untouched. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #giphyModal .giphyCodyCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #youtubeModal .youtubeCodyCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #youtubeModal .youtubeAddonCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #voiceModal .voiceRecorderCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #paintModal .paintModalCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #radioModal .radioCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #memosModal .memoCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #shareModal .shareInviteCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #suggestionModal .suggestionModalCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #commandsModal .addonModal{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #giphyModal .gcMediaTabs, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #youtubeModal .youtubeDirect, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #youtubeModal .youtubePreview, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #voiceModal .voiceRecorderVisual, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #paintModal .paintToolbar, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #paintModal .paintCanvasWrap, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #radioModal .gcCompactPlayer, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #radioModal .radioCustom, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #memosModal .memoForm, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #memosModal .memoSearch, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #shareModal .shareLinkRow, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #shareModal .referralRewardInfo, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #suggestionModal .suggestionUpload, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #commandsModal .commandList{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #giphyModal .gcMediaTabs button{color:var(--gc-white-muted)!important;background:transparent!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #giphyModal .gcMediaTabs button.active{color:var(--gc-white-text)!important;background:var(--gc-white-surface)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #giphyModal .giphyPick{background:var(--gc-white-surface-soft)!important;border:1px solid var(--gc-white-line)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #youtubeModal .sideEmpty, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #giphyModal .sideEmpty{background:var(--gc-white-surface-alt)!important;color:var(--gc-white-muted)!important;border-color:var(--gc-white-line)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #voiceModal .voiceVuMeter{background:var(--gc-white-surface-soft)!important;border-color:var(--gc-white-line)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #paintModal .paintToolbar label, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #paintModal .paintToolbar button{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #paintModal .paintToolbar button.active{background:var(--gc-u-soft-accent)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 48%,var(--gc-white-line))!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #radioModal .radioStation, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #radioModal .radioStations button, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #memosModal .memoItem{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #memosModal .memoItem small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #radioModal .gcMusicInfo small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #radioModal .radioStation small{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #shareModal .referralStats span{background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #commandsModal .commandList span{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #commandsModal .commandList b{color:var(--gc-white-text)!important} /* Gifts. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #giftModal .giftCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #giftModal .giftCatalogScroll, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #giftModal .giftMessageRow, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #giftModal .giftRecipientRow, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #giftModal .giftFooter{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #giftModal .giftCatalog button{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important;box-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #giftModal .giftCatalog button:hover{background:var(--gc-u-hover)!important;border-color:var(--gc-white-line-strong)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #giftModal .giftCatalog small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #giftModal .giftMessageRow small{color:#6f5a20!important} /* Calls: outer UI follows WHITE; video itself deliberately keeps a neutral stage. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #incomingCallModal .callPrompt, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #activeCallModal .activeCallCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcCallBlockUserModal .gcCallBlockUserCard{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #activeCallModal .activeCallTop, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #activeCallModal .callControls, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcCallBlockUserModal .gcCallBlockHead{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #activeCallModal .callControls button, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcCallBlockUserModal .gcCallBlockChoices>button{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #activeCallModal .callControls button:hover, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcCallBlockUserModal .gcCallBlockChoices>button:hover{background:var(--gc-u-hover)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #activeCallModal .callHint{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #incomingCallModal .callAvatar{background:var(--gc-white-surface-soft)!important;border-color:var(--gc-white-line)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcCallBlockUserModal .gcCallBlockChoices>button.isBlocked{background:#fff0f2!important;color:#8b2d3b!important;border-color:#e4b3ba!important} /* Cookie preferences. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #cookieSettingsModal .cookieSettingsCard{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important;box-shadow:0 20px 55px rgba(35,52,70,.20)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #cookieSettingsModal .cookieSettingsTitle{border-bottom-color:var(--gc-white-line)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #cookieSettingsModal .cookieSettingsTitle small{color:color-mix(in srgb,var(--gc-u-accent) 45%,var(--gc-white-text) 55%)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #cookieSettingsModal .cookieSettingsTitle h3{color:var(--gc-white-text)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #cookieSettingsModal .cookieSettingsTitle p, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #cookieSettingsModal .cookieSettingsFooter small{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #cookieSettingsModal .cookieToggle, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #cookieSettingsModal .cookieToggleLocked{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #cookieSettingsModal .cookieToggle:hover{background:var(--gc-u-hover)!important;border-color:var(--gc-white-line-strong)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #cookieSettingsModal .cookieToggleText b{color:var(--gc-white-text)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #cookieSettingsModal .cookieToggleText small{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #cookieSettingsModal .cookieSwitch i{background:#d5dee7!important;border-color:#aebdcb!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #cookieSettingsModal .cookieSwitch i:after{background:#ffffff!important;box-shadow:0 1px 4px rgba(35,52,70,.24)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #cookieSettingsModal .cookieSwitch input:checked+i{background:#d9b84e!important;border-color:#bd9a2b!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #cookieSettingsModal .cookieSwitch input:checked+i:after{background:#44350e!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #cookieSettingsModal .cookieSettingsFooter{border-top-color:var(--gc-white-line)!important} /* News wall and common generated feed cards. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #newsWallModal .newsWallCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #newsWallModal .newsWallHead, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #newsWallModal .newsWallList{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #newsWallModal .newsWallHead p, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #newsWallModal .newsWallEmpty small{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #newsWallModal .newsPost, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #newsWallModal .newsComment{ background:var(--gc-white-surface-alt)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important;box-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #newsWallModal .newsPostBody{color:var(--gc-white-text)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #newsWallModal .newsPostAuthor small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #newsWallModal .newsComment small{color:var(--gc-white-muted)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #newsWallModal .newsReaction, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #newsWallModal .newsWallAction{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line)!important; } /* Keep the close controls consistently visible on WHITE, including drawers. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 .modalClose, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .mobileClose, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .drawerClose, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcRoomAccessClose, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcEntryRoomClose{ background:var(--gc-white-surface)!important;color:var(--gc-white-text)!important;border-color:var(--gc-white-line-strong)!important;text-shadow:none!important; } /* WHITE must never inherit legacy pale foregrounds inside these component roots. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 :is(#statusModal,#notificationsModal,#friendsModal,#favoritesModal,#profileModal,#editProfileModal,#chatOptionsModal,#walletModal,#secretPostModal,#secretRevealModal,#giphyModal,#youtubeModal,#voiceModal,#paintModal,#giftModal,#badgesModal,#birthdayModal,#memosModal,#shareModal,#radioModal,#cookieSettingsModal,#suggestionModal,#commandsModal,#addonCenterModal,#leaderboardModal,#socialFeedModal,#newsWallModal) :is(h1,h2,h3,h4,b,strong,label){ color:var(--gc-white-text)!important;text-shadow:none!important; } /* ========================================================================== GC 0.67.03 — LIGHT visual redesign Theme key: `light` (label: Light — Lichte, rustige interface) This is a real Light design layer, not a generic contrast patch. It keeps user decorations/media intact while making every application surface light, calm, readable and consistent with the white/light-blue theme preview. ========================================================================== */ html[data-chat-theme="light"]{ --gc-light-bg:#eef4fa; --gc-light-bg-deep:#e7f0f8; --gc-light-panel:#ffffff; --gc-light-panel-blue:#f3f8fd; --gc-light-panel-blue-2:#eaf3fb; --gc-light-line:#c8d7e6; --gc-light-line-strong:#aebfd1; --gc-light-ink:#1b2c3e; --gc-light-ink-soft:#435a72; --gc-light-muted:#61758b; --gc-light-faint:#7d8fa2; --gc-light-blue:#3f73d8; --gc-light-blue-soft:#e8f1ff; --gc-white-canvas:var(--gc-light-bg); --gc-white-surface:var(--gc-light-panel); --gc-white-surface-alt:var(--gc-light-panel-blue); --gc-white-surface-soft:var(--gc-light-panel-blue-2); --gc-white-line:var(--gc-light-line); --gc-white-line-strong:var(--gc-light-line-strong); --gc-white-text:var(--gc-light-ink); --gc-white-muted:var(--gc-light-muted); --gc-white-subtle:var(--gc-light-faint); --gc-u-bg:var(--gc-light-bg); --gc-u-panel:var(--gc-light-panel); --gc-u-panel2:var(--gc-light-panel-blue); --gc-u-line:var(--gc-light-line); --gc-u-text:var(--gc-light-ink); --gc-u-muted:var(--gc-light-muted); --gc-u-card:var(--gc-light-panel); --gc-u-card2:var(--gc-light-panel-blue); --gc-u-border:var(--gc-light-line); --gc-u-hover:color-mix(in srgb,var(--gc-u-accent) 8%,#f6faff 92%); --gc-u-soft-accent:color-mix(in srgb,var(--gc-u-accent) 12%,#f8fbff 88%); --gc-u-shadow:0 16px 40px rgba(38,59,82,.14); color-scheme:light; background:var(--gc-light-bg); } html[data-chat-theme="light"] body.gcCodyFamiliarV3{ background:linear-gradient(180deg,#f8fbff 0%,var(--gc-light-bg) 52%,var(--gc-light-bg-deep) 100%)!important; color:var(--gc-light-ink)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .modal{background:rgba(40,57,77,.22)!important} /* Main application chrome. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcClassicTop, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .topbar{ background:#ffffff!important; color:var(--gc-light-ink)!important; border-color:var(--gc-light-line)!important; box-shadow:0 1px 0 rgba(80,104,128,.08)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .quickbar{ background:#f8fbfe!important; border-color:var(--gc-light-line)!important; box-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .quickbar button{ color:#416892!important; background:transparent!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .quickbar button:hover, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .quickbar button.active{ background:var(--gc-light-blue-soft)!important; color:#244f91!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .chat{ background:var(--gc-light-bg)!important; color:var(--gc-light-ink)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .chat::after{background:none!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 .chathead{ background:#f9fcff!important; color:var(--gc-light-ink)!important; border-color:var(--gc-light-line)!important; box-shadow:inset 0 -1px 0 rgba(117,145,173,.08)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .chathead h2{color:#17293b!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 .chathead p, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .chathead .connection{color:#5c7188!important} /* Main history: crisp white/light-blue rhythm instead of washed-out grey. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #messages.messages{ background:#f5f9fd!important; color:var(--gc-light-ink)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #messages>.msg:not(.gcPresenceEvent):not(.gcCommunityEvent){ background:#ffffff!important; border-bottom:1px solid #dce7f1!important; color:var(--gc-light-ink)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #messages>.msg:not(.gcPresenceEvent):not(.gcCommunityEvent):nth-child(odd){ background:#eef5fb!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #messages>.msg:not(.gcPresenceEvent):not(.gcCommunityEvent):hover{ background:#e7f1fb!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #messages .msg .body, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #messages .msg .body>span:not(.gcStyledMessageText), html[data-chat-theme="light"] body.gcCodyFamiliarV3 #messages .msg .body>div:not(.replyQuote){ color:#26394d!important; text-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #messages .msg .time, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #messages .msg .edited, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #messages .messageSeen{color:#7a8da1!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcPresenceEvent, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcCommunityEvent{ background:#f4f8fc!important; color:#526980!important; border-color:#d8e4ef!important; text-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcPresenceText, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcCommunityEvent small{color:#526980!important;text-shadow:none!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 .replyQuote{ background:#f7fbff!important; color:#4f657c!important; border-left:3px solid #5f88cf!important; border-top-color:#d3e1ee!important; border-right-color:#d3e1ee!important; border-bottom-color:#d3e1ee!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .replyQuote b{color:#294f88!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 .mention, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcMention{ background:#e7f0ff!important; color:#244b83!important; border-color:#afc8ee!important; text-shadow:none!important; } /* Solid custom names/messages are blended toward readable ink only in Light. Neon/gradient stay decorative but receive a thin dark keyline. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcStyledMessageText:not(.gcTextMode_neon):not(.gcTextMode_gradient){ color:color-mix(in srgb,var(--gc-message-color,var(--gc-light-ink)) 20%,var(--gc-light-ink) 80%)!important; -webkit-text-fill-color:color-mix(in srgb,var(--gc-message-color,var(--gc-light-ink)) 20%,var(--gc-light-ink) 80%)!important; text-shadow:none!important;-webkit-text-stroke:0!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #messages .msg .meta>.name:not(.gcNameMode_gradient):not(.gcNameMode_neon), html[data-chat-theme="light"] body.gcCodyFamiliarV3 #users .userCard:not(.has-nameplate) .userStyledName:not(.gcNameMode_gradient):not(.gcNameMode_neon), html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .profileStyledName:not(.gcNameMode_gradient):not(.gcNameMode_neon){ color:color-mix(in srgb,var(--gc-style-c1,var(--gc-light-ink)) 24%,var(--gc-light-ink) 76%)!important; -webkit-text-fill-color:color-mix(in srgb,var(--gc-style-c1,var(--gc-light-ink)) 24%,var(--gc-light-ink) 76%)!important; text-shadow:none!important;-webkit-text-stroke:0!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 :is(.gcStyledMessageText.gcTextMode_neon,.gcStyledMessageText.gcTextMode_gradient,#messages .msg .meta>.name.gcNameMode_neon,#messages .msg .meta>.name.gcNameMode_gradient,#users .userCard:not(.has-nameplate) .userStyledName.gcNameMode_neon,#users .userCard:not(.has-nameplate) .userStyledName.gcNameMode_gradient){ -webkit-text-stroke:.42px rgba(25,42,60,.72)!important; paint-order:stroke fill!important; } /* Composer / reply / typing: explicit foregrounds also for Safari/iOS. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 .composer, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #pmModal .pmComposer{ background:#f8fbfe!important; border-color:var(--gc-light-line)!important; box-shadow:0 -1px 0 rgba(80,104,128,.06)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #message, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #pmInput, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .composer textarea, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .pmComposer textarea{ background:#ffffff!important; color:#1f3246!important; -webkit-text-fill-color:#1f3246!important; caret-color:#315fae!important; border:1px solid #b7cadc!important; box-shadow:inset 0 1px 2px rgba(40,61,83,.04)!important; opacity:1!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #message:focus, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #pmInput:focus, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .composer textarea:focus, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .pmComposer textarea:focus{ border-color:#6f99d9!important; box-shadow:0 0 0 2px rgba(63,115,216,.13)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #message::placeholder, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #pmInput::placeholder, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .composer textarea::placeholder, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .pmComposer textarea::placeholder{ color:#687d93!important;-webkit-text-fill-color:#687d93!important;opacity:1!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .replyBar{ background:#f4f8fc!important;color:#334a61!important;border-color:#c8d8e7!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .typing, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .typingIndicator, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #typingIndicator{color:#536b82!important;text-shadow:none!important} /* Right userlist: light cards and readable offline rows. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #usersPanel, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .users, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcRightPanel{ background:#fbfdff!important; color:var(--gc-light-ink)!important; border-color:var(--gc-light-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcRightTabs{ background:#ffffff!important;border-color:var(--gc-light-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcRightTabs button{color:#536a82!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcRightTabs button.active{ background:#edf4ff!important;color:#244d89!important;box-shadow:inset 0 -2px #4d78c9!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #users .userGroup>header{ background:color-mix(in srgb,var(--rank-group-color,#7b91aa) 10%,#f5f9fd 90%)!important; color:color-mix(in srgb,var(--rank-group-color,#53677c) 38%,#25384b 62%)!important; border:1px solid color-mix(in srgb,var(--rank-group-color,#9babbc) 20%,#d4e0eb 80%)!important; box-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #users .offlineGroup>header{ background:#f1f4f7!important;color:#536476!important;border-color:#d5dee7!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #users .userCard:not(.has-nameplate){ background:#ffffff!important; color:#213449!important; border-color:#d3dfeb!important; box-shadow:0 1px 2px rgba(45,66,89,.05)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #users .userCard:not(.has-nameplate)::after{background:none!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #users .userCard:not(.has-nameplate):hover, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #users .userCard:not(.has-nameplate):focus-visible{ background:#edf5ff!important;border-color:#afc8e5!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #users .userCard.offline{opacity:1!important;filter:none!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #users .userCard.offline:not(.has-nameplate){background:#f8fafc!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #users .userCard.offline .uAvatar{opacity:.72!important;filter:saturate(.72)!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #users .userCard:not(.has-nameplate) .uBody small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #users .userCard:not(.has-nameplate) .uStatus{color:#617489!important;opacity:1!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #users .userCard:not(.has-nameplate) .uMeta{color:#57789b!important;opacity:.82!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #usersPanel>.liveStats{ background:#ffffff!important;border-color:#cfdeeb!important;box-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #usersPanel>.liveStats>b{ background:#eaf3ff!important;color:#294a72!important;border-bottom:1px solid #cbdced!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #usersPanel>.liveStats span{ background:#f6f9fc!important;color:#5a7086!important;border:1px solid #dbe5ee!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #usersPanel>.liveStats strong{color:#203449!important} /* Generic application surfaces: no dark islands inside Light. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 :is(.modalCard,.gcAddonModalCard,.addonCenterCard,.socialCard,.notificationCard,.profileModalCard,.profileEditorCard,.actionTray,.reactionPicker,.emojiPanel,.gcProfileMenu,.gcUserMenu,.gcMobileMoreCard){ background:#ffffff!important;color:var(--gc-light-ink)!important;border-color:var(--gc-light-line)!important; box-shadow:0 18px 48px rgba(38,59,82,.15)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 :is(.modalTitle,.emojiHead,.gcProfileDrawerHead,.gcProfileDrawerFooter,.notificationHead,.gcUserMenu>header,.gcUserMenuTabs,.gcRightTabs){ background:#f5f9fd!important;color:var(--gc-light-ink)!important;border-color:var(--gc-light-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 :is(.modalCard,.gcAddonModalCard,.addonCenterCard,.socialCard,.notificationCard,.profileEditorCard,.gcProfileMenu,.gcUserMenu) :is(h1,h2,h3,h4,h5,b,strong,label){ color:#1d3044!important;text-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 :is(.modalCard,.gcAddonModalCard,.addonCenterCard,.socialCard,.notificationCard,.profileEditorCard,.gcProfileMenu,.gcUserMenu) :is(p,small,.muted,.fieldHint){ color:#60758b!important;text-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 :is(.modalClose,.mobileClose,.drawerClose,.gcProfileDrawerClose,.gcUserMenuClose,#emojiClose){ background:#ffffff!important;color:#26394d!important;border-color:#bfcfe0!important;box-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 :is(.modalClose,.mobileClose,.drawerClose,.gcProfileDrawerClose,.gcUserMenuClose,#emojiClose):hover{ background:#eaf2fb!important;color:#173d73!important;border-color:#8eadd2!important; } /* Forms/buttons in Light. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 :is(input,textarea,select):not([type="range"]):not([type="checkbox"]):not([type="radio"]){ background:#ffffff!important;color:#203449!important;-webkit-text-fill-color:#203449!important;border-color:#bdcfe0!important;caret-color:#315fae!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 :is(input,textarea)::placeholder{color:#6a7f94!important;-webkit-text-fill-color:#6a7f94!important;opacity:1!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 .secondaryBtn, html[data-chat-theme="light"] body.gcCodyFamiliarV3 button:not(.primaryBtn):not(.composerSend):not(.dangerBtn):not(.gcTopIcon):not(.gcHamburger):not(.themeTile):not(.userCard){ border-color:var(--gc-light-line)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 .secondaryBtn{background:#f3f7fb!important;color:#263a4f!important} /* Emoji/stickers: white picker with a blue-tinted toolbar. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #emojiPanel.emojiPanel{background:#ffffff!important;border-color:#aec1d4!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #emojiPanel .emojiHead{background:#f6faff!important;border-color:#ccdae7!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #emojiPanel .emojiTabs{background:#edf4fb!important;border-color:#c5d5e4!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #emojiPanel .emojiTabs button{color:#526a82!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #emojiPanel .emojiTabs button.active{background:#ffffff!important;color:#234d88!important;border-color:#88a8d0!important;box-shadow:inset 0 -2px #4c77c4!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #emojiPanel .emojiGrid{background:#ffffff!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #emojiPanel .emojiGrid button:hover{background:#eaf2fb!important;border-color:#cad8e6!important} /* Friends, report center, profile drawer and user menu get the same visual hierarchy. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSummary>span, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSection, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .socialRow, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuGrid button, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuModeration button, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuGroup, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileMenuRow, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal :is(.reportTabs,.reportPane,.reportAttachment,.reportThreadHead,.reportMessages article){ background:#ffffff!important;color:#203449!important;border-color:#d0ddea!important;box-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSectionHead, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #reportCenterModal .reportTabs, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuTabs{ background:#f1f6fb!important;border-color:#cbd9e6!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileQuickActions button{ background:#eef4fa!important;color:#263a4f!important;border-color:#c5d5e4!important;box-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileQuickActions button:hover{background:#e3eef9!important;border-color:#9db9d6!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileDrawerFooter{background:#f4f8fc!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcProfileMenu .gcProfileDrawerFooter button:not(.dangerBtn){background:#eef4fa!important;color:#30475f!important;border-color:#bdcedf!important} /* PM: clearly separated bubbles while preserving mine-right/theirs-left logic. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #pmModal .gcPmCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #pmModal .pmCard{background:#ffffff!important;border-color:#bfd0e1!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #pmModal .pmHead{background:#f5f9fd!important;color:#203449!important;border-color:#cddbe7!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #pmModal .pmMessages{background:#eef4fa!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #pmModal .pm.theirs .pmBubble{background:#ffffff!important;color:#26394d!important;border-color:#cbd9e6!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #pmModal .pm.mine .pmBubble{background:#e4efff!important;color:#203a59!important;border-color:#aec7ea!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #pmModal .pmBody{color:#26394d!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #pmModal .pmMeta, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #pmModal .pmReceipt{color:#61768c!important} /* Scrollbars are visible but quiet on white surfaces. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 *{scrollbar-color:#9db1c4 #edf3f8} html[data-chat-theme="light"] body.gcCodyFamiliarV3 *::-webkit-scrollbar-thumb{background:#9db1c4!important;border-color:#edf3f8!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 *::-webkit-scrollbar-track{background:#edf3f8!important} /* ========================================================================== GC 0.67.04 — LIGHT PROFILE READABILITY COMPLETION Scope: ONLY chat_theme=light. These selectors intentionally match / exceed legacy app.css/profile specificity so old dark-profile foregrounds cannot leak into the Light theme. ========================================================================== */ /* Profile shell and scrolling content. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal .profileModalCard, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfile, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfilePane{ background:#f8fbff!important; color:#1d3147!important; border-color:#c8d8e8!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfilePane.active{ background:#f8fbff!important; } /* Cover: preserve the real image, but guarantee readable identity over every light/dark photograph. Without a cover, remain genuinely light. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileHero{ border-bottom:1px solid #bfd0e1!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileHero:not([style*="background-image"]){ background:linear-gradient(145deg,#edf5fd 0%,#dbe9f6 56%,#c9dced 100%)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileHero:not([style*="background-image"])::after{ background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.25) 55%,rgba(241,247,253,.88))!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileHero[style*="background-image"]::after{ background:linear-gradient(180deg,rgba(8,20,34,.04) 0%,rgba(8,20,34,.18) 40%,rgba(8,20,34,.76) 100%)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileHero[style*="background-image"] .gcProfileIdentity, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileHero[style*="background-image"] .gcProfileStatusRow{ position:relative!important; z-index:2!important; } /* Profile name: solid custom colours remain recognisable but can no longer disappear against a light cover. On a real cover use a light name with a dark keyline; neon/gradient keep their decorative fill with the same edge. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileHero:not([style*="background-image"]) .profileStyledName:not(.gcNameMode_gradient):not(.gcNameMode_neon){ color:color-mix(in srgb,var(--gc-style-c1,#263b51) 28%,#1f3348 72%)!important; -webkit-text-fill-color:color-mix(in srgb,var(--gc-style-c1,#263b51) 28%,#1f3348 72%)!important; -webkit-text-stroke:0!important; text-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileHero[style*="background-image"] .profileStyledName:not(.gcNameMode_gradient):not(.gcNameMode_neon), html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileHero[style*="background-image"] .gcProfileNameLine h2{ color:#f7fbff!important; -webkit-text-fill-color:#f7fbff!important; -webkit-text-stroke:.8px rgba(12,24,38,.88)!important; paint-order:stroke fill!important; text-shadow:0 1px 2px rgba(6,15,25,.95),0 2px 7px rgba(6,15,25,.68)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileHero[style*="background-image"] :is(.profileStyledName.gcNameMode_gradient,.profileStyledName.gcNameMode_neon){ -webkit-text-stroke:.72px rgba(8,19,31,.92)!important; paint-order:stroke fill!important; text-shadow:0 1px 2px rgba(6,15,25,.94),0 2px 7px rgba(6,15,25,.72)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileHero:not([style*="background-image"]) .gcCodyProfileTitle, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileHero:not([style*="background-image"]) .gcProfileMoodLabel{ color:#536a81!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileHero[style*="background-image"] .gcCodyProfileTitle, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileHero[style*="background-image"] .gcProfileMoodLabel{ color:#eef6fd!important; text-shadow:0 1px 2px rgba(6,15,25,.9)!important; } /* Hero status pills / counters / tools stay readable on both image and no-image hero variants. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfilePresenceLabel, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .profileFriendStatus, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcCodyProfileStat, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcCodyProfileTopTools button{ background:rgba(247,251,255,.94)!important; color:#20354b!important; border:1px solid #c4d4e4!important; text-shadow:none!important; box-shadow:0 2px 8px rgba(26,45,65,.12)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileRankBadge{ color:#332606!important; -webkit-text-fill-color:#332606!important; text-shadow:none!important; } /* Primary actions. gc-cody-polish-v9/app.css used white foregrounds here with high specificity. Match the real production class, not a generic button. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcCodyProfilePrimaryActions{ background:#edf4fb!important; border-top:1px solid #c8d8e8!important; border-bottom:1px solid #c4d5e6!important; color:#1d3147!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcCodyProfilePrimaryActions .gcCodyPrimaryAction, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcCodyProfilePrimaryActions button{ background:#f9fcff!important; color:#243a50!important; -webkit-text-fill-color:#243a50!important; border-color:#c4d6e7!important; text-shadow:none!important; box-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcCodyProfilePrimaryActions .gcCodyPrimaryAction:hover, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcCodyProfilePrimaryActions button:hover{ background:#e4effa!important; color:#183653!important; -webkit-text-fill-color:#183653!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcCodyProfilePrimaryActions .gcCodyPrimaryAction i, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcCodyProfilePrimaryActions button i, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcCodyProfilePrimaryActions .gcCodyPrimaryAction::before{ color:#315f9b!important; -webkit-text-fill-color:#315f9b!important; text-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcCodyProfilePrimaryActions .gcCodyPrimaryAction span, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcCodyProfilePrimaryActions button span{ color:#243a50!important; -webkit-text-fill-color:#243a50!important; } /* Tabs: visible active state without dark legacy backgrounds. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileTabs{ background:#edf4fb!important; border-top:0!important; border-bottom:1px solid #c6d7e7!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileTabs button{ background:transparent!important; color:#536b83!important; -webkit-text-fill-color:#536b83!important; border-color:transparent!important; text-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileTabs button:hover{ background:#e3eef9!important; color:#24486f!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileTabs button.active{ background:#ffffff!important; color:#1d3f66!important; -webkit-text-fill-color:#1d3f66!important; border-color:#bed1e3!important; box-shadow:inset 0 -3px #d0a735!important; } /* The exact information-grid selectors from app.css: labels, nested and values must all be dark enough on white/light-blue cards. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfilePane[data-profile-pane="info"].active{ background:#f5f9fd!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfilePane[data-profile-pane="info"] .profileInfoRow{ background:#ffffff!important; color:#1f344a!important; border:1px solid #c5d7e7!important; box-shadow:0 1px 2px rgba(34,57,81,.045)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfilePane[data-profile-pane="info"] .profileInfoRow:nth-child(even){ background:#f1f7fc!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfilePane[data-profile-pane="info"] .profileInfoRow span, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfilePane[data-profile-pane="info"] .profileInfoRow small{ color:#536b82!important; -webkit-text-fill-color:#536b82!important; opacity:1!important; text-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfilePane[data-profile-pane="info"] .profileInfoRow span b, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfilePane[data-profile-pane="info"] .profileInfoRow span strong{ color:#36516b!important; -webkit-text-fill-color:#36516b!important; opacity:1!important; text-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfilePane[data-profile-pane="info"] .profileInfoRow span i{ color:#5d84b0!important; -webkit-text-fill-color:#5d84b0!important; opacity:1!important; text-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfilePane[data-profile-pane="info"] .profileInfoRow strong{ color:#20364c!important; -webkit-text-fill-color:#20364c!important; opacity:1!important; text-shadow:none!important; } /* About / More use the same row primitive but legacy CSS has separate high specificity rules. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileAboutPane .profileInfoRow, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent [data-profile-pane="about"]>.profileInfoRow, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent [data-profile-pane="more"]>.profileInfoRow{ background:#ffffff!important; color:#20364c!important; border-color:#c5d7e7!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileAboutPane .profileInfoRow span, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileAboutPane .profileInfoRow span b, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent [data-profile-pane="about"]>.profileInfoRow span, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent [data-profile-pane="about"]>.profileInfoRow span b, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent [data-profile-pane="more"]>.profileInfoRow span, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent [data-profile-pane="more"]>.profileInfoRow span b{ color:#536b82!important; -webkit-text-fill-color:#536b82!important; opacity:1!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileAboutPane .profileInfoRow strong, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent [data-profile-pane="about"]>.profileInfoRow strong, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent [data-profile-pane="more"]>.profileInfoRow strong{ color:#20364c!important; -webkit-text-fill-color:#20364c!important; opacity:1!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .profileBio, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .sideEmpty{ color:#435d75!important; -webkit-text-fill-color:#435d75!important; opacity:1!important; text-shadow:none!important; } /* Friends, gifts, album, music and More cards. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent :is(.profileFriendCard,.profileGiftCard,.profilePhoto,.gcUploadedProfileTrack,.gcSpotifyProfileTrack,.gcCodyProfileMoreActions button,.gcCodyProfileSocials a,.gcPublicProfileMusic,.profileAlbumActions){ background:#ffffff!important; color:#20364c!important; border-color:#c6d7e7!important; text-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent :is(.profileFriendCard,.profileGiftCard,.gcUploadedProfileTrack,.gcSpotifyProfileTrack,.gcCodyProfileMoreActions button,.gcCodyProfileSocials a) b{ color:#20364c!important; -webkit-text-fill-color:#20364c!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent :is(.profileFriendCard,.profileGiftCard,.gcUploadedProfileTrack,.gcSpotifyProfileTrack,.gcCodyProfileMoreActions button,.gcCodyProfileSocials a) :is(small,em,p){ color:#5b7187!important; -webkit-text-fill-color:#5b7187!important; opacity:1!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcCodyProfileMoreActions button:hover, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcCodyProfileSocials a:hover{ background:#eaf3fc!important; } /* Scrollbars remain visible but quiet on touch/tablet/desktop. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfilePane{ scrollbar-color:#9db7d0 #eef4fa!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfilePane::-webkit-scrollbar{width:9px!important;height:9px!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfilePane::-webkit-scrollbar-track{background:#eef4fa!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfilePane::-webkit-scrollbar-thumb{background:#9db7d0!important;border:2px solid #eef4fa!important;border-radius:999px!important} /* Small screens: preserve readability and prevent action/tab text from being squeezed into unreadable 8-9px remnants from legacy media queries. */ @media (max-width:520px){ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfileTabs button{font-size:10px!important;line-height:1.1!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcCodyProfilePrimaryActions .gcCodyPrimaryAction, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcCodyProfilePrimaryActions button{font-size:10.5px!important;line-height:1.15!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfilePane[data-profile-pane="info"] .profileInfoRow span{font-size:9.5px!important;line-height:1.2!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfilePane[data-profile-pane="info"] .profileInfoRow strong{font-size:11px!important;line-height:1.25!important} } /* ========================================================================== GC 0.67.05 — PRESENCE / PM CHROME / LIGHT CLARITY COMPLETION ========================================================================== */ /* PM history contract: only message rows belong in the scroll history. Window chrome remains in .pmHead and an unexpected legacy close control can never paint mid-history. */ body.gcCodyFamiliarV3 #pmModal #pmMessages > :not(.pm){display:none!important} body.gcCodyFamiliarV3 #pmModal #pmMessages :is(#pmClose,#pmMinimize,#pmAudioCall,#pmVideoCall,#pmReplyClose,.modalClose){display:none!important} body.gcCodyFamiliarV3 #pmModal .pmHead #pmClose, body.gcCodyFamiliarV3 #pmModal .pmHead #pmMinimize, body.gcCodyFamiliarV3 #pmModal .pmHead #pmAudioCall, body.gcCodyFamiliarV3 #pmModal .pmHead #pmVideoCall{display:grid!important;visibility:visible!important;opacity:1!important} /* The fourth statistic is a rolling registration window, not the total member count. */ body.gcCodyFamiliarV3 .liveStats .liveStatLabel{font:inherit!important;color:inherit!important;line-height:inherit!important;margin:0!important;padding:0!important} /* Light: top/navigation controls must remain visually distinct on white surfaces. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcHamburger, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #mainMenuBtn, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #topUserListRestore, html[data-chat-theme="light"] body.gcCodyFamiliarV3 .gcTopIcon{ background:#f8fbff!important; border-color:#b8cadd!important; color:#263d56!important; box-shadow:0 1px 2px rgba(42,66,92,.08)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 :is(.gcHamburger,#mainMenuBtn,#topUserListRestore,.gcTopIcon):hover, html[data-chat-theme="light"] body.gcCodyFamiliarV3 :is(.gcHamburger,#mainMenuBtn,#topUserListRestore,.gcTopIcon):focus-visible{ background:#eaf3fd!important; border-color:#87a9cc!important; color:#173d70!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 :is(.gcHamburger,#mainMenuBtn) .gcUiIcon3D g{ stroke:#6d5525!important; stroke-width:1.5!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 :is(.gcHamburger,#mainMenuBtn) .gcUiIcon3D{ filter:drop-shadow(0 1px 0 rgba(255,255,255,.9))!important; opacity:1!important; } /* Friends: real offline presence must also look offline in every theme; Light gets a subtle neutral row rather than a misleading green-online presentation. */ body.gcCodyFamiliarV3 #friendsModal .friendAcceptedRow.isOffline .friendPresence{background:#8a98a8!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--gc-u-panel,#fff) 90%,transparent)!important} body.gcCodyFamiliarV3 #friendsModal .friendAcceptedRow.isOffline .uAvatar{border-color:#a9b4bf!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendAcceptedRow.isOffline{background:#f8fafc!important;color:#26394c!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendAcceptedRow.isOffline .friendRowText small{color:#5b7084!important} html[data-chat-theme="light"] body.gcCodyFamiliarV3 #friendsModal .friendAcceptedRow.isOnline .friendPresence{background:#2fc978!important} /* ========================================================================== GC 0.67.06 — CODY INTERACTION PARITY / RESPONSIVE GEOMETRY COMPLETION Geometry and interaction only. Existing GewoonChatten functions, permissions, realtime, media and theme palettes remain authoritative. ========================================================================== */ :root{ --gc-cody-mobile-nav-h:58px; --gc-cody-mobile-gap:4px; --gc-cody-touch:44px; } /* PM close-source fix. #pmClose draws its X with absolute pseudo elements; the button itself must be their positioning context. */ body.gcCodyFamiliarV3 #pmModal .pmCallActions>#pmClose{ position:relative!important;inset:auto!important;overflow:hidden!important;isolation:isolate!important; } body.gcCodyFamiliarV3 #pmModal .pmCallActions>#pmClose::before, body.gcCodyFamiliarV3 #pmModal .pmCallActions>#pmClose::after{ left:50%!important;top:50%!important;transform-origin:center!important; } body.gcCodyFamiliarV3 #pmModal #pmMessages::before, body.gcCodyFamiliarV3 #pmModal #pmMessages::after{content:none!important;display:none!important} /* PM header and rows use one unambiguous Cody-like direction model. */ body.gcCodyFamiliarV3 #pmModal .pmHead{ display:flex!important;align-items:center!important;justify-content:flex-start!important;min-width:0!important; } body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity{ flex:1 1 auto!important;width:auto!important;max-width:none!important;min-width:0!important;overflow:hidden!important; } body.gcCodyFamiliarV3 #pmModal .pmCallActions{ display:flex!important;position:relative!important;inset:auto!important;flex:0 0 auto!important; margin-left:auto!important;padding-left:3px!important;align-items:center!important;justify-content:flex-end!important; } body.gcCodyFamiliarV3 #pmModal .pmCallActions>button{flex:0 0 auto!important} body.gcCodyFamiliarV3 #pmModal .pm{ display:flex!important;flex-direction:row!important;align-items:flex-end!important; width:100%!important;max-width:100%!important;min-width:0!important;margin:5px 0 8px!important;padding:0!important;box-sizing:border-box!important; } body.gcCodyFamiliarV3 #pmModal .pm.theirs{justify-content:flex-start!important} body.gcCodyFamiliarV3 #pmModal .pm.mine{justify-content:flex-end!important} body.gcCodyFamiliarV3 #pmModal .pm.theirs .pmMessageAvatar{order:1!important;margin:0 7px 0 0!important} body.gcCodyFamiliarV3 #pmModal .pm.theirs .pmBubble{order:2!important;margin:0!important} body.gcCodyFamiliarV3 #pmModal .pm.mine .pmBubble{order:1!important;margin:0!important} body.gcCodyFamiliarV3 #pmModal .pm.mine .pmMessageAvatar{order:2!important;margin:0 0 0 7px!important} body.gcCodyFamiliarV3 #pmModal .pmBubble{ flex:0 1 auto!important;width:fit-content!important;min-width:72px!important;max-width:min(78%,680px)!important; padding:8px 38px 7px 10px!important;position:relative!important;overflow:visible!important; } body.gcCodyFamiliarV3 #pmModal .pmBody{min-width:0!important;max-width:100%!important;overflow-wrap:anywhere!important;word-break:normal!important} body.gcCodyFamiliarV3 #pmModal .pm.mine .pmMeta{justify-content:flex-end!important} body.gcCodyFamiliarV3 #pmModal #pmMessages>:not(.pm){display:none!important} body.gcCodyFamiliarV3 #pmModal #pmMessages :is(#pmClose,#pmMinimize,#pmAudioCall,#pmVideoCall,#pmReplyClose,.modalClose){display:none!important} body.gcCodyFamiliarV3 #pmModal .pmHead :is(#pmClose,#pmMinimize,#pmAudioCall,#pmVideoCall){display:grid!important;visibility:visible!important;opacity:1!important} /* Reply preview has several legacy ID-specific rules. Close those selectors here so every theme uses its own palette instead of old navy/white constants. */ body.gcCodyFamiliarV3 #replyBar.replyBar{ background:var(--gc-u-panel)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-line)!important;border-left-color:var(--gc-u-accent)!important; } body.gcCodyFamiliarV3 #replyBar.replyBar small{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #replyBar.replyBar #replyName{color:var(--gc-u-accent)!important} body.gcCodyFamiliarV3 #replyBar.replyBar #replyText{color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #replyBar.replyBar #cancelReply{ background:var(--gc-u-panel2)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-line)!important; } /* Legacy 0.52 mobile PM docking used highly-specific bottom/top declarations. The current model is a single visualViewport-sized PM screen on phones. Match the old selector strength so the two models cannot combine. */ @media(max-width:700px){ body.gcCodyFamiliarV3.gcPmOpen #pmModal:not(.hidden){ position:fixed!important;left:0!important;right:0!important;top:var(--gc-cody-vv-top,0px)!important;bottom:auto!important; width:100vw!important;height:var(--gc-cody-vv-height,100dvh)!important;max-height:none!important;min-height:0!important;overflow:hidden!important; } html:not(.gcKeyboardOpen) body.gcCodyFamiliarV3.gcPmOpen #pmModal:not(.hidden) .gcPmCard, html.gcKeyboardOpen body.gcCodyFamiliarV3.gcPmOpen #pmModal:not(.hidden) .gcPmCard{ position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important; width:100%!important;max-width:none!important;height:100%!important;max-height:100%!important;min-height:0!important; margin:0!important;padding:max(0px,env(safe-area-inset-top)) 0 max(0px,env(safe-area-inset-bottom))!important;border-radius:0!important; display:flex!important;flex-direction:column!important;overflow:hidden!important; } } /* Touch targets: larger hit area, same visual design. */ @media(pointer:coarse){ body.gcCodyFamiliarV3 :is(.gcHamburger,.gcTopIcon,.modalClose,.mobileClose,.gcUserMenuClose,.gcMobileMoreClose,.pmActionToggle){ touch-action:manipulation!important;-webkit-tap-highlight-color:transparent!important; } body.gcCodyFamiliarV3 :is(.userCard,.roomSelect,.gcRightTabs button,.gcMobileBottomNav button){touch-action:manipulation!important} } /* Compact tablet + phone: one shell, one bottom navigation and one drawer model. The old quickbar is intentionally hidden here because its actions are mirrored by Chat/Kamers/Chatters/Meldingen/Meer and the More sheet. */ @media(max-width:900px){ body.gcCodyFamiliarV3 #quickbar{display:none!important} body:not(.gcAuthActive).gcCodyFamiliarV3 #app>.topbar.gcClassicTop{ flex:0 0 var(--gc-u-top-h)!important;height:var(--gc-u-top-h)!important;min-height:var(--gc-u-top-h)!important; padding-left:max(6px,env(safe-area-inset-left))!important;padding-right:max(6px,env(safe-area-inset-right))!important; gap:4px!important;overflow:hidden!important; } body.gcCodyFamiliarV3 #app .gcTopLeft{flex:1 1 auto!important;min-width:0!important;overflow:hidden!important;gap:5px!important} body.gcCodyFamiliarV3 #app .gcLogoBrand{flex:1 1 auto!important;width:auto!important;max-width:180px!important;min-width:0!important;overflow:hidden!important} body.gcCodyFamiliarV3 #app .gcLogoBrand img{display:block!important;width:auto!important;max-width:100%!important;max-height:32px!important;object-fit:contain!important} body.gcCodyFamiliarV3 #app .gcTopRight{flex:0 0 auto!important;min-width:0!important;gap:3px!important;overflow:visible!important} body.gcCodyFamiliarV3 .layout{grid-template-columns:minmax(0,1fr)!important;padding:0!important;gap:0!important;min-height:0!important;overflow:hidden!important} html.gcCodyMobileShell body.gcCodyFamiliarV3 .chat{ min-width:0!important;min-height:0!important;height:100%!important;overflow:hidden!important;border-radius:0!important; padding-bottom:calc(var(--gc-cody-mobile-nav-h) + var(--gc-cody-mobile-gap) + env(safe-area-inset-bottom))!important; } html.gcCodyMobileShell.gcKeyboardOpen body.gcCodyFamiliarV3 .chat{padding-bottom:0!important} body.gcCodyFamiliarV3 .gcMobileBottomNav{ display:grid!important;position:fixed!important; left:max(var(--gc-cody-mobile-gap),env(safe-area-inset-left))!important; right:max(var(--gc-cody-mobile-gap),env(safe-area-inset-right))!important; bottom:max(var(--gc-cody-mobile-gap),env(safe-area-inset-bottom))!important; height:var(--gc-cody-mobile-nav-h)!important;min-height:var(--gc-cody-mobile-nav-h)!important; grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:2px!important;padding:3px!important; z-index:2147482000!important; } body.gcCodyFamiliarV3 .gcMobileBottomNav button{ min-width:0!important;height:50px!important;min-height:50px!important;padding:3px 1px!important; display:grid!important;grid-template-rows:27px 12px!important;place-items:center!important;gap:1px!important; } body.gcCodyFamiliarV3 .gcMobileBottomNav button>svg{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;padding:3px!important} body.gcCodyFamiliarV3 .gcMobileBottomNav button>span{font-size:8px!important;line-height:12px!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important} html.gcCodyMobileShell.gcKeyboardOpen body.gcCodyFamiliarV3 .gcMobileBottomNav, body.gcCodyFamiliarV3.gcPmOpen .gcMobileBottomNav{display:none!important} /* Drawers never share the screen or stop halfway. */ body.gcCodyFamiliarV3 #roomsPanel.rooms, body.gcCodyFamiliarV3 #usersPanel.gcRightPanel{ display:flex!important;flex-direction:column!important;position:fixed!important; top:var(--gc-u-top-h)!important; bottom:calc(var(--gc-cody-mobile-nav-h) + 2 * var(--gc-cody-mobile-gap) + env(safe-area-inset-bottom))!important; height:auto!important;max-height:none!important;width:min(360px,94vw)!important;max-width:94vw!important; margin:0!important;overflow:hidden!important;border-radius:0!important;z-index:2147481200!important; transition:transform .17s cubic-bezier(.2,.8,.2,1)!important;will-change:transform!important; } body.gcCodyFamiliarV3 #roomsPanel.rooms{left:0!important;right:auto!important;transform:translate3d(calc(-100% - 12px),0,0)!important} body.gcCodyFamiliarV3 #usersPanel.gcRightPanel{right:0!important;left:auto!important;transform:translate3d(calc(100% + 12px),0,0)!important} body.gcCodyFamiliarV3 #roomsPanel.rooms.mobileOpen, body.gcCodyFamiliarV3 #usersPanel.gcRightPanel.mobileOpen{transform:translate3d(0,0,0)!important} body.gcCodyFamiliarV3 #sidebarBackdrop{ position:fixed!important;top:var(--gc-u-top-h)!important;left:0!important;right:0!important; bottom:calc(var(--gc-cody-mobile-nav-h) + 2 * var(--gc-cody-mobile-gap) + env(safe-area-inset-bottom))!important; } body.gcCodyFamiliarV3 #usersPanel .gcRightTabs, body.gcCodyFamiliarV3 #usersPanel .liveStats, body.gcCodyFamiliarV3 #usersPanel .gcRightTitle{flex:0 0 auto!important} body.gcCodyFamiliarV3 #usersPanel .gcUserScroll{flex:1 1 0!important;min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important} body.gcCodyFamiliarV3 #usersPanel .liveStats{margin:4px 3px 6px!important} body.gcCodyFamiliarV3 #usersPanel .liveStats>div{gap:3px!important;padding:4px!important} body.gcCodyFamiliarV3 #usersPanel .liveStats span{min-height:38px!important;padding:4px 2px!important} body.gcCodyFamiliarV3 #usersPanel .userCard{min-height:48px!important;margin:2px 0!important;padding:4px 6px!important} body.gcCodyFamiliarV3 #usersPanel .userGroup>header{height:27px!important;min-height:27px!important} /* Main chat follows Cody density while preserving custom fonts/sizes. */ body.gcCodyFamiliarV3 .chathead{min-height:44px!important;padding:7px 9px!important;gap:7px!important} body.gcCodyFamiliarV3 .chathead h2{font-size:14px!important;line-height:1.15!important} body.gcCodyFamiliarV3 .chathead p{margin-top:2px!important;font-size:8.5px!important;line-height:1.2!important} body.gcCodyFamiliarV3 #messages.messages{padding:4px 7px 8px!important;min-width:0!important;overflow-x:hidden!important} body.gcCodyFamiliarV3 #messages .msg{grid-template-columns:34px minmax(0,1fr)!important;gap:7px!important;padding:6px 3px!important;margin:0!important;min-width:0!important} body.gcCodyFamiliarV3 #messages .msg .avatar{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important} body.gcCodyFamiliarV3 #messages .msgMain{min-width:0!important;max-width:100%!important} body.gcCodyFamiliarV3 #messages .msg .body{max-width:100%!important;overflow-wrap:anywhere!important;word-break:normal!important;line-height:1.38!important} body.gcCodyFamiliarV3 #messages .msg .meta{min-width:0!important;gap:4px!important;row-gap:2px!important} body.gcCodyFamiliarV3 #messages .msg .name{max-width:min(58vw,260px)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important} body.gcCodyFamiliarV3 #messages .gcPresenceEvent, body.gcCodyFamiliarV3 #messages .gcCommunityEvent{min-height:28px!important;padding-block:4px!important} body.gcCodyFamiliarV3 #messages :is(.chatImage,.messageImage,.gcChatMedia img,.chat_video_container,.gcYoutubePreview,.gcGiphyPreview){max-width:min(320px,82vw)!important} /* Five actual composer children = five explicit tracks. This prevents the voice/send buttons from falling into an implicit row on narrow phones. */ body.gcCodyFamiliarV3 #composer.composer{ flex:0 0 auto!important;position:relative!important;inset:auto!important;transform:none!important; min-height:52px!important;height:auto!important; grid-template-columns:38px 38px minmax(0,1fr) 38px 42px!important;grid-template-rows:minmax(40px,auto)!important; align-items:end!important;gap:4px!important;padding:5px max(5px,env(safe-area-inset-right)) 5px max(5px,env(safe-area-inset-left))!important; overflow:visible!important; } body.gcCodyFamiliarV3 #composer .composerPlus{grid-column:1!important;grid-row:1!important} body.gcCodyFamiliarV3 #composer>#emoji{grid-column:2!important;grid-row:1!important} body.gcCodyFamiliarV3 #composer .composerInputWrap{grid-column:3!important;grid-row:1!important;min-width:0!important} body.gcCodyFamiliarV3 #composer .composerVoice{grid-column:4!important;grid-row:1!important} body.gcCodyFamiliarV3 #composer .composerSend{grid-column:5!important;grid-row:1!important} body.gcCodyFamiliarV3 #composer>button{width:38px!important;height:40px!important;min-width:38px!important;min-height:40px!important;padding:0!important} body.gcCodyFamiliarV3 #composer .composerSend{width:42px!important;min-width:42px!important} body.gcCodyFamiliarV3 #composer .composerInputWrap, body.gcCodyFamiliarV3 #composer textarea{width:100%!important;min-width:0!important} body.gcCodyFamiliarV3 #composer textarea{height:40px!important;min-height:40px!important;max-height:108px!important;font-size:16px!important;line-height:20px!important;padding:9px 13px!important} body.gcCodyFamiliarV3 .mentionSuggestions, body.gcCodyFamiliarV3 .commandSuggestions{max-height:min(320px,42dvh)!important;overscroll-behavior:contain!important} /* Addons open above composer + bottom navigation and stay inside the visual viewport. */ html.gcCodyMobileShell body.gcCodyFamiliarV3 :is(.emojiPanel,.actionTray,.reactionPicker){ position:fixed!important;left:max(4px,env(safe-area-inset-left))!important;right:max(4px,env(safe-area-inset-right))!important;width:auto!important; bottom:calc(var(--gc-cody-mobile-nav-h) + var(--gc-u-composer-h) + 12px + env(safe-area-inset-bottom))!important; max-height:calc(var(--gc-cody-vv-height,100dvh) - var(--gc-u-top-h) - var(--gc-cody-mobile-nav-h) - var(--gc-u-composer-h) - 24px)!important; overflow:auto!important;-webkit-overflow-scrolling:touch!important; } html.gcCodyMobileShell.gcKeyboardOpen body.gcCodyFamiliarV3 :is(.emojiPanel,.actionTray,.reactionPicker){ bottom:calc(var(--gc-u-composer-h) + 8px + env(safe-area-inset-bottom))!important; max-height:calc(var(--gc-cody-vv-height,100dvh) - var(--gc-u-top-h) - var(--gc-u-composer-h) - 18px)!important; } /* Standard modals remain inside the currently visible viewport. */ body.gcCodyFamiliarV3 .modal:not(#pmModal):not(#publicVideoModal){ padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))!important; overflow:hidden!important; } body.gcCodyFamiliarV3 .modal:not(#pmModal):not(#publicVideoModal)>:is(.modalCard,.notificationCard,.profileModalCard,.profileEditorCard,.gcAddonModalCard){ max-width:calc(100vw - 8px)!important;max-height:calc(var(--gc-cody-vv-height,100dvh) - 8px)!important;min-height:0!important; } } /* Phone: compact header, room picker and a bounded user drawer. */ @media(max-width:480px){ :root{--gc-u-top-h:52px;--gc-u-composer-h:50px;--gc-cody-mobile-nav-h:56px} body.gcCodyFamiliarV3 #app>.topbar.gcClassicTop{height:52px!important;min-height:52px!important;flex-basis:52px!important;gap:3px!important} body.gcCodyFamiliarV3 #app .gcHamburger{flex:0 0 34px!important;width:34px!important;min-width:34px!important;height:36px!important;min-height:36px!important} body.gcCodyFamiliarV3 #app .gcLogoBrand{max-width:min(145px,39vw)!important} body.gcCodyFamiliarV3 #app .gcLogoBrand img{max-height:30px!important} body.gcCodyFamiliarV3 #app .gcTopRight>.gcTopIcon, body.gcCodyFamiliarV3 #app .gcTopRight>.gcProfileTop{flex:0 0 34px!important;width:34px!important;min-width:34px!important;max-width:34px!important;height:36px!important;min-height:36px!important} /* These functions already have a dedicated bottom-nav/More destination. */ body.gcCodyFamiliarV3 #app :is(#topFriendsBtn,#notificationBtn,#topReportBtn,#topUserListRestore){display:none!important} body.gcCodyFamiliarV3 #roomsPanel.rooms, body.gcCodyFamiliarV3 #usersPanel.gcRightPanel{ width:calc(100vw - 8px)!important;max-width:none!important;left:4px!important;right:4px!important; border:1px solid var(--gc-u-line)!important;border-radius:12px!important; box-shadow:0 12px 38px color-mix(in srgb,#000 44%,transparent)!important; } body.gcCodyFamiliarV3 #roomsPanel.rooms{transform:translate3d(calc(-100% - 10px),0,0)!important} /* Keep part of the chat visible, including on 320px phones. */ body.gcCodyFamiliarV3 #usersPanel.gcRightPanel{ width:min(320px,calc(100vw - 48px))!important; max-width:calc(100vw - 48px)!important;min-width:0!important; left:auto!important;right:max(4px,env(safe-area-inset-right))!important; } body.gcCodyFamiliarV3 #usersPanel.gcRightPanel{transform:translate3d(calc(100% + 10px),0,0)!important} body.gcCodyFamiliarV3 #roomsPanel.rooms.mobileOpen, body.gcCodyFamiliarV3 #usersPanel.gcRightPanel.mobileOpen{transform:translate3d(0,0,0)!important} body.gcCodyFamiliarV3 #composer.composer{ grid-template-columns:36px 36px minmax(0,1fr) 36px 40px!important;grid-template-rows:40px!important;gap:3px!important;padding-inline:4px!important; } body.gcCodyFamiliarV3 #composer>button{width:36px!important;min-width:36px!important;height:38px!important;min-height:38px!important} body.gcCodyFamiliarV3 #composer .composerSend{width:40px!important;min-width:40px!important} body.gcCodyFamiliarV3 #composer textarea{height:38px!important;min-height:38px!important;padding:8px 11px!important} body.gcCodyFamiliarV3 .gcMobileBottomNav{left:max(3px,env(safe-area-inset-left))!important;right:max(3px,env(safe-area-inset-right))!important;height:56px!important;min-height:56px!important;padding:3px!important} body.gcCodyFamiliarV3 .gcMobileBottomNav button{height:49px!important;min-height:49px!important;grid-template-rows:25px 12px!important} body.gcCodyFamiliarV3 .gcMobileBottomNav button>svg{width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important} body.gcCodyFamiliarV3 #pmModal .pmHead{min-height:50px!important;padding:5px max(5px,env(safe-area-inset-right)) 5px max(5px,env(safe-area-inset-left))!important;gap:3px!important} body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity{gap:6px!important;max-width:none!important} body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity img{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important} body.gcCodyFamiliarV3 #pmModal .pmCallActions{gap:2px!important} body.gcCodyFamiliarV3 #pmModal .pmCallActions>button{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;padding:0!important} body.gcCodyFamiliarV3 #pmModal .pmMessages{padding:6px 5px 8px!important} body.gcCodyFamiliarV3 #pmModal .pm{gap:5px!important;margin:4px 0 7px!important} body.gcCodyFamiliarV3 #pmModal .pmMessageAvatar{width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important;max-width:26px!important;max-height:26px!important;flex-basis:26px!important} body.gcCodyFamiliarV3 #pmModal .pmBubble{min-width:60px!important;max-width:min(82%,calc(100% - 38px))!important;padding:7px 34px 6px 8px!important} body.gcCodyFamiliarV3 #pmModal .pmBody{font-size:13px!important;line-height:1.35!important} body.gcCodyFamiliarV3 #pmModal .pmMeta{font-size:8.5px!important} body.gcCodyFamiliarV3 #pmModal .pmBottom{padding:4px max(5px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left))!important} body.gcCodyFamiliarV3 #pmModal .pmComposer{grid-template-columns:minmax(0,1fr) 42px!important;gap:4px!important;padding-top:4px!important} body.gcCodyFamiliarV3 #pmModal .pmComposer textarea{font-size:16px!important;min-height:40px!important;height:40px!important} body.gcCodyFamiliarV3 .emojiGrid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:4px!important} body.gcCodyFamiliarV3 .emojiGrid button{min-width:0!important;min-height:38px!important;padding:3px!important} body.gcCodyFamiliarV3 #gcProfileMenu.gcProfileMenuCody{ left:4px!important;right:4px!important;width:auto!important;max-width:none!important; top:calc(52px + max(2px,env(safe-area-inset-top)))!important; bottom:calc(var(--gc-cody-mobile-nav-h) + 8px + env(safe-area-inset-bottom))!important;border-radius:12px!important; } } /* 0.73.00 — compact Cody private composer and addon popover. */ body.gcCodyFamiliarV3 #pmModal .pmBottom{ display:grid!important;grid-template-columns:auto minmax(0,1fr)!important; align-items:end!important;column-gap:7px!important;padding:6px!important; background:color-mix(in srgb,var(--gc-u-panel2) 96%,var(--gc-u-accent) 4%)!important; box-shadow:0 -1px 0 var(--gc-u-border),0 -8px 22px color-mix(in srgb,#000 10%,transparent)!important; } body.gcCodyFamiliarV3 #pmModal .pmTools{grid-column:1!important;display:flex!important;gap:4px!important;padding:0!important;overflow:visible!important} body.gcCodyFamiliarV3 #pmModal .pmTools>button{ width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important; padding:0!important;display:grid!important;place-items:center!important;border-radius:50%!important; background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important;border:1px solid var(--gc-u-border)!important; box-shadow:0 2px 8px color-mix(in srgb,#000 16%,transparent)!important; } body.gcCodyFamiliarV3 #pmModal .pmTools>.pmLegacyAddonButton{display:none!important} body.gcCodyFamiliarV3 #pmModal #pmPlus[aria-expanded="true"]{background:color-mix(in srgb,var(--gc-u-accent) 20%,var(--gc-u-card2))!important;border-color:var(--gc-u-accent)!important} body.gcCodyFamiliarV3 #pmModal .pmComposer{grid-column:2!important;display:grid!important;grid-template-columns:minmax(0,1fr) 42px!important;gap:6px!important;padding:0!important;min-height:40px!important;background:transparent!important} body.gcCodyFamiliarV3 #pmModal .pmComposer button[type="submit"]{width:42px!important;height:40px!important;min-width:42px!important;min-height:40px!important;border-radius:50%!important;font-size:18px!important} body.gcCodyFamiliarV3 #pmModal .pmAddonMenu{ left:6px!important;bottom:calc(100% + 8px)!important;width:min(270px,calc(100vw - 24px))!important; gap:3px!important;padding:8px!important;border-radius:14px!important; background:color-mix(in srgb,var(--gc-u-panel2) 96%,var(--gc-u-accent) 4%)!important; border:1px solid var(--gc-u-border)!important;box-shadow:0 18px 46px color-mix(in srgb,#000 48%,transparent)!important; } body.gcCodyFamiliarV3 #pmModal .pmAddonMenu::before{ content:'Delen in privéchat';display:block;padding:3px 7px 7px;color:var(--gc-u-muted-readable)!important; font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--gc-u-border); } body.gcCodyFamiliarV3 #pmModal .pmAddonMenu>button{min-height:42px!important;padding:5px 7px!important;border-radius:9px!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #pmModal .pmAddonMenu>button:hover, body.gcCodyFamiliarV3 #pmModal .pmAddonMenu>button:focus-visible{background:var(--gc-u-hover)!important;outline:2px solid color-mix(in srgb,var(--gc-u-accent) 55%,transparent)!important;outline-offset:-2px!important} body.gcCodyFamiliarV3 #pmModal .pmAddonMenu>button>span{background:var(--gc-u-card2)!important;border-color:var(--gc-u-border)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #pmModal .pmAddonMenu>button b{color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #pmModal .pmAddonMenu>button small{color:var(--gc-u-muted-readable)!important} @media(max-width:430px){ body.gcCodyFamiliarV3 #pmModal .pmBottom{grid-template-columns:auto minmax(0,1fr)!important;column-gap:5px!important;padding:5px!important} body.gcCodyFamiliarV3 #pmModal .pmTools{gap:3px!important} body.gcCodyFamiliarV3 #pmModal .pmTools>button{width:36px!important;height:38px!important;min-width:36px!important;min-height:38px!important} body.gcCodyFamiliarV3 #pmModal .pmComposer{grid-template-columns:minmax(0,1fr) 40px!important;gap:5px!important} body.gcCodyFamiliarV3 #pmModal .pmComposer button[type="submit"]{width:40px!important;min-width:40px!important;height:38px!important;min-height:38px!important} body.gcCodyFamiliarV3 #pmModal .pmComposer textarea{height:38px!important;min-height:38px!important} body.gcCodyFamiliarV3 #pmModal .pmAddonMenu{left:4px!important;bottom:calc(100% + 7px)!important;width:min(258px,calc(100vw - 18px))!important;max-height:min(330px,55dvh)!important;overflow-y:auto!important} } @media(max-width:360px){ body.gcCodyFamiliarV3 #app .gcLogoBrand{max-width:104px!important} body.gcCodyFamiliarV3 #app .gcTopRight>.gcTopIcon, body.gcCodyFamiliarV3 #app .gcTopRight>.gcProfileTop{flex-basis:32px!important;width:32px!important;min-width:32px!important;max-width:32px!important} body.gcCodyFamiliarV3 #composer.composer{grid-template-columns:33px 33px minmax(0,1fr) 33px 38px!important;gap:3px!important} body.gcCodyFamiliarV3 #composer>button{width:33px!important;min-width:33px!important} body.gcCodyFamiliarV3 #composer .composerSend{width:38px!important;min-width:38px!important} body.gcCodyFamiliarV3 .emojiGrid{grid-template-columns:repeat(5,minmax(0,1fr))!important} body.gcCodyFamiliarV3 #pmModal .pmCallActions>button{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important} body.gcCodyFamiliarV3 #pmModal .pmHeadIdentity img{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important} } /* Short landscape devices: preserve message space rather than giant chrome. */ @media(max-width:900px) and (orientation:landscape) and (max-height:520px){ :root{--gc-u-top-h:44px;--gc-u-composer-h:44px;--gc-cody-mobile-nav-h:48px} body.gcCodyFamiliarV3 #app>.topbar.gcClassicTop{height:44px!important;min-height:44px!important;flex-basis:44px!important} body.gcCodyFamiliarV3 .gcMobileBottomNav{height:48px!important;min-height:48px!important;padding:2px 4px!important} body.gcCodyFamiliarV3 .gcMobileBottomNav button{height:42px!important;min-height:42px!important;display:grid!important;grid-template-columns:22px minmax(0,1fr)!important;grid-template-rows:1fr!important;gap:3px!important} body.gcCodyFamiliarV3 .gcMobileBottomNav button>svg{width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;padding:2px!important} body.gcCodyFamiliarV3 .gcMobileBottomNav button>span{font-size:8px!important;text-align:left!important} body.gcCodyFamiliarV3 .chathead{min-height:36px!important;padding-block:3px!important} body.gcCodyFamiliarV3 #composer.composer{min-height:44px!important;padding-block:3px!important} body.gcCodyFamiliarV3 #pmModal .pmHead{min-height:44px!important} body.gcCodyFamiliarV3 #pmModal .pmBottom{padding-block:3px!important} } /* Theme consistency contract: chrome always uses theme variables. This leaves each palette intact but prevents old hard-coded dark/light leftovers. */ body.gcCodyFamiliarV3 :is(.gcMobileBottomNav,.gcMobileMoreCard,#usersPanel,#roomsPanel,.emojiPanel,.actionTray,.reactionPicker,#pmModal .gcPmCard){ color:var(--gc-u-text)!important;border-color:var(--gc-u-line)!important; } body.gcCodyFamiliarV3 :is(.gcMobileMoreCard,.emojiPanel,.actionTray,.reactionPicker,#pmModal .gcPmCard){background:var(--gc-u-panel2)!important} body.gcCodyFamiliarV3 :is(.gcMobileMoreCard,.emojiPanel,.actionTray,.reactionPicker,#pmModal .gcPmCard) :is(p,small,.muted){color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 :is(.gcMobileMoreCard,.emojiPanel,.actionTray,.reactionPicker,#pmModal .gcPmCard) :is(h2,h3,h4,b,strong){color:var(--gc-u-text)!important} /* Light-like themes keep the same geometry while their own light palette wins. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(.gcMobileBottomNav,.gcMobileMoreCard){ background:color-mix(in srgb,var(--gc-u-panel2) 97%,#fff 3%)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-line)!important; box-shadow:0 8px 28px color-mix(in srgb,var(--gc-u-text) 12%,transparent)!important; } /* 0.67.06 final theme readability contract. Keep every theme palette, but derive secondary text toward the theme's own primary text so placeholders/meta/help copy never become unreadable. */ :root[data-chat-theme]{ --gc-u-muted-readable:color-mix(in srgb,var(--gc-u-muted) 80%,var(--gc-u-text) 20%); } body.gcCodyFamiliarV3 :is(.modalTitle p,.modalTitle>p,.friendRowText small,.friendsEmpty small,.sideEmpty,.pmMeta,.pmReceipt,.pmHeadIdentity small,.notification small,.notification p){ color:var(--gc-u-muted-readable)!important; } body.gcCodyFamiliarV3 :is(input,textarea)::placeholder, body.gcCodyFamiliarV3 #message::placeholder, body.gcCodyFamiliarV3 #pmInput::placeholder{ color:var(--gc-u-muted-readable)!important;opacity:1!important; -webkit-text-fill-color:var(--gc-u-muted-readable)!important; } /* The LIGHT family must remain light even against old ID-specific mobile Cody rules. These selectors intentionally include the production IDs. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #composer.composer, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #replyBar.replyBar, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal .pmBottom, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal .pmHead{ background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important;box-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #composer .composerInputWrap, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #composer textarea, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal #pmInput{ background:var(--gc-u-card)!important;color:var(--gc-u-text)!important; -webkit-text-fill-color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important; caret-color:var(--gc-u-text)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #composer>button:not(.composerSend), html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal .pmTools>button, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal .pmCallActions>button{ background:var(--gc-u-card)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcMobileBottomNav.gcMobileBottomNav{ background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcMobileBottomNav button{ color:var(--gc-u-muted-readable)!important;background:transparent!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcMobileBottomNav button.active{ color:var(--gc-u-text)!important;background:color-mix(in srgb,var(--gc-u-card) 90%,var(--gc-u-accent) 10%)!important; } /* Cody-like PM: rows own the full line, bubble owns the visual width. */ @media(max-width:700px){ body.gcCodyFamiliarV3 #pmModal .pm{padding-inline:4px!important} body.gcCodyFamiliarV3 #pmModal .pm.theirs .pmBubble, body.gcCodyFamiliarV3 #pmModal .pm.mine .pmBubble{max-width:min(82%,calc(100% - 38px))!important} body.gcCodyFamiliarV3 #pmModal .pm.mine .pmBubble{margin-left:auto!important} body.gcCodyFamiliarV3 #pmModal .pm.theirs .pmBubble{margin-right:auto!important} } /* Exact high-specificity readability closures for legacy component rules. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #replyBar.replyBar small, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .modalTitle p, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .friendAcceptedRow .friendRowText small, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #reportCenterModal .modalTitle p{ color:color-mix(in srgb,var(--gc-u-muted) 64%,var(--gc-u-text) 36%)!important; } body.gcCodyFamiliarV3 #pmModal .pm.mine .pmMeta{ color:color-mix(in srgb,var(--gc-u-muted) 64%,var(--gc-u-text) 36%)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #message::placeholder, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal #pmInput::placeholder{ color:color-mix(in srgb,var(--gc-u-muted) 62%,var(--gc-u-text) 38%)!important; -webkit-text-fill-color:color-mix(in srgb,var(--gc-u-muted) 62%,var(--gc-u-text) 38%)!important; opacity:1!important; } html[data-chat-theme="light"][data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .friendAcceptedRow.isOffline .friendRowText small{ color:color-mix(in srgb,var(--gc-u-muted) 58%,var(--gc-u-text) 42%)!important; } /* Friends/social is a first-class light component for every light palette, not only the plain Light theme. Old social CSS used dark fixed fills. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .socialCard, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .socialList, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSectionBody{ background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSummary, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSection, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSectionHead, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSectionHead button, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .socialRow, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .friendIdentity, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .friendChatBtn{ background:var(--gc-u-card)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .friendRowText b, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSummary b, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSectionHead button{ color:var(--gc-u-text)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .friendRowText small, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSummary small{ color:color-mix(in srgb,var(--gc-u-muted) 60%,var(--gc-u-text) 40%)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .friendAcceptedRow.isOffline{ background:color-mix(in srgb,var(--gc-u-card) 96%,var(--gc-u-bg) 4%)!important;opacity:1!important; } /* 0.67.07 LIGHT OPTIONS COMPLETION Several option widgets still used Cody's fixed dark fills. Theme tone is the authoritative switch because Lite, Notepad and Scent are light themes too. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #chatOptionsModal :is( .chatOptionsTabs, .chatOptionsCard, .chatOptionsForm, .chatOptionsPane, .chatOptionThemeCard, .gcAvatarShapeCard, .gcUiTextScaleCard, .gcUiTextScalePreview, .gcInlineStyleCard, .gcMentionOptionsCard, #gcSoundOptions, .gcSoundHead, .gcSoundPicker ){ background:var(--gc-u-card2)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; text-shadow:none!important; } /* 0.74.00 final cascade guards. */ body.gcCodyFamiliarV3 #toast.toast{z-index:2147483000!important} body.gcCodyFamiliarV3 :is(#quickbar,#gcMobileBottomNav) button :is(svg,.gcUiIcon){ opacity:1!important;visibility:visible!important;color:currentColor!important; filter:drop-shadow(0 1px 1px rgba(0,0,0,.48)) saturate(1.3) contrast(1.2)!important; } body.gcCodyFamiliarV3 .userCard.has-nameplate .uBody>small .uMood{ color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important; background:rgba(4,10,18,.76)!important;border-color:rgba(255,255,255,.3)!important; } /* Notifications: these widgets used fixed navy surfaces, which made their inherited dark text unreadable in every light-family theme. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #notificationsModal :is(.notificationCard,.notificationHead){ background:#fff!important;color:#1e2935!important;border-color:#cbd9e6!important;text-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #notificationsModal .pushSettings{ background:#eef4fa!important;color:#1e2935!important;border-color:#c3d2e1!important;text-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #notificationsModal .notification{ background:#f7fafd!important;color:#1e2935!important;border-color:#cbd9e6!important;text-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #notificationsModal .notification.unread{ background:color-mix(in srgb,var(--gc-u-accent) 8%,#fff)!important; border-color:color-mix(in srgb,var(--gc-u-accent) 72%,#cbd9e6)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #notificationsModal :is(.notification b,.notification p,.pushSettings b,.pushPreferenceFields label){color:#1e2935!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #notificationsModal :is(.notification small,.pushSettings small,.pushSettings p,.muted){color:#60758b!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #notificationsModal .notification>button{color:#60758b!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #notificationsModal .notificationIcon{background:#fff!important;color:#26394d!important;border:1px solid #d3dfeb!important} /* Report centre and suggestion uploads use the same palette contract. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(#reportCenterModal,#suggestionModal) :is(.reportAttachment,.suggestionUpload,.reportUpload,.gcUploadZone){ background:#f7fafd!important;color:#1e2935!important;border-color:#bfcfe0!important;text-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(#reportCenterModal,#suggestionModal) :is(.reportAttachment,.suggestionUpload,.reportUpload,.gcUploadZone) :is(b,strong,label,span){color:#1e2935!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(#reportCenterModal,#suggestionModal) :is(.reportAttachment,.suggestionUpload,.reportUpload,.gcUploadZone) small{color:#60758b!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(#reportCenterModal,#suggestionModal) input[type="file"]{ background:#fff!important;color:#1e2935!important;border-color:#cbd9e6!important; } /* Friends summary and rows must follow the selected palette too. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSummary>span{ background:#f7fafd!important;color:#1e2935!important;border-color:#cbd9e6!important;text-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSummary b{color:#1e2935!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal .friendsSummary small{color:#60758b!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #friendsModal :is(.friendsSection,.friendsSectionBody,.socialRow){ background:#fff!important;color:#1e2935!important;border-color:#cbd9e6!important; } /* Dark-family themes receive the matching semantic contract as well. */ html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #notificationsModal :is(.notificationCard,.notificationHead,.pushSettings,.notification), html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 :is(#reportCenterModal,#suggestionModal) :is(.reportAttachment,.suggestionUpload,.reportUpload,.gcUploadZone), html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #friendsModal :is(.friendsSummary>span,.friendsSection,.friendsSectionBody,.socialRow){ background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important;text-shadow:none!important; } html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 :is(#notificationsModal,#reportCenterModal,#suggestionModal,#friendsModal) :is(h2,h3,h4,b,strong,label){color:var(--gc-u-text)!important;text-shadow:none!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 :is(#notificationsModal,#reportCenterModal,#suggestionModal,#friendsModal) :is(p,small,.muted){color:var(--gc-u-muted)!important;text-shadow:none!important} /* Rooms panel / mobile room chooser. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #roomsPanel :is(.roomShell,.roomSelect,.roomGameStrip){background:#fff!important;color:#1e2935!important;border-color:#cbd9e6!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #roomsPanel :is(.roomCopy strong,.roomPeopleCount,.roomGameStrip span){color:#1e2935!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #roomsPanel :is(.roomCopy>span,.roomEyebrow,.gcRoomGroupTitle){color:#60758b!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #roomsPanel :is(.roomIcon,.roomPeopleCount,.roomGameStrip span){background:#eef4fa!important;border-color:#c3d2e1!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #roomsPanel .roomGameActions button:not(.primaryBtn){background:#f7fafd!important;color:#1e2935!important;border-color:#cbd9e6!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #roomsPanel :is(.roomShell,.roomSelect,.roomGameStrip){background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important} /* Friends modal: remove the last legacy navy shell in every supplied palette. */ html[data-gc-theme-tone] body.gcCodyFamiliarV3 #friendsModal .socialCard{ background:var(--gc-u-panel)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; box-shadow:0 24px 70px color-mix(in srgb,var(--gc-u-bg) 72%,transparent)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #friendsModal :is(.modalTitle,.socialList){ background:var(--gc-u-card)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #friendsModal .friendsSectionHead{ background:color-mix(in srgb,var(--gc-u-card2) 92%,var(--gc-u-accent) 8%)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #friendsModal .friendsSectionHead :is(b,button){ color:var(--gc-u-text)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #friendsModal .friendsSectionHead span{ background:var(--gc-u-card)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #friendsModal .modalClose{ background:var(--gc-u-card2)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #friendsModal .modalClose:is(:hover,:focus-visible){ background:color-mix(in srgb,var(--gc-u-card2) 82%,var(--gc-u-accent) 18%)!important; border-color:color-mix(in srgb,var(--gc-u-border) 55%,var(--gc-u-accent) 45%)!important; } /* Remaining legacy addon shells used the original fixed navy modal fill. */ html[data-gc-theme-tone] body.gcCodyFamiliarV3 :is( #suggestionModal .suggestionModalCard, #giftModal .giftCard, #badgesModal > .modalCard, #badgesModal .modalCard, #paintModal .paintModalCard ){ background:var(--gc-u-panel)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; box-shadow:0 24px 70px color-mix(in srgb,var(--gc-u-bg) 72%,transparent)!important; } /* Universal modal-shell contract. Legacy feature CSS may still declare a navy fill later in its own bundle; every actual dialog shell must nevertheless inherit the currently selected palette. Media/canvas stages inside the shell intentionally keep their specialised neutral backgrounds. */ html[data-gc-theme-tone] body.gcCodyFamiliarV3 [id$="Modal"] :is(.modalCard,.pmCard,.inboxCard){ background:var(--gc-u-panel)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; box-shadow:0 24px 70px color-mix(in srgb,var(--gc-u-bg) 72%,transparent)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 [id$="Modal"] :is(.modalCard,.pmCard,.inboxCard) > :is(.modalTitle,.modalHead){ color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; } /* 0.74.11 — balanced chatter toolbar on desktop and narrow phones. */ html[data-gc-theme-tone] body.gcCodyFamiliarV3 #usersPanel .gcRightTabs{ display:grid!important; grid-template-columns:repeat(6,minmax(0,1fr))!important; align-items:stretch!important; gap:6px!important; width:auto!important; height:auto!important; min-height:62px!important; margin:0 -7px 7px!important; padding:6px 7px!important; box-sizing:border-box!important; overflow:visible!important; background:color-mix(in srgb,var(--gc-u-accent) 4%,var(--gc-u-card2))!important; border-bottom:1px solid var(--gc-u-border)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #usersPanel .gcRightTabs button{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:2px!important; width:100%!important; min-width:0!important; height:50px!important; min-height:50px!important; padding:4px 2px!important; box-sizing:border-box!important; overflow:hidden!important; color:var(--gc-u-text)!important; background:var(--gc-u-card)!important; border:1px solid var(--gc-u-border)!important; border-radius:10px!important; box-shadow:0 2px 6px color-mix(in srgb,var(--gc-u-shadow) 34%,transparent)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #usersPanel .gcRightTabs button:is(:hover,:focus-visible){ color:var(--gc-u-text)!important; background:color-mix(in srgb,var(--gc-u-accent) 10%,var(--gc-u-card))!important; border-color:color-mix(in srgb,var(--gc-u-accent) 60%,var(--gc-u-border))!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #usersPanel .gcRightTabs button.active{ color:var(--gc-u-text)!important; background:color-mix(in srgb,var(--gc-u-accent) 16%,var(--gc-u-card))!important; border-color:var(--gc-u-accent)!important; box-shadow:inset 0 -3px var(--gc-u-accent),0 2px 7px color-mix(in srgb,var(--gc-u-shadow) 38%,transparent)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #usersPanel .gcRightTabs button .gcUiIcon{ flex:0 0 20px!important; width:20px!important; height:20px!important; min-width:20px!important; min-height:20px!important; margin:0!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #usersPanel .gcRightTabs .gcRightTabLabel{ display:block!important; width:100%!important; overflow:hidden!important; color:inherit!important; font-size:9px!important; font-weight:800!important; line-height:1.05!important; text-align:center!important; text-overflow:ellipsis!important; white-space:nowrap!important; } @media(max-width:430px){ html[data-gc-theme-tone] body.gcCodyFamiliarV3 #usersPanel .gcRightTabs{ gap:5px!important; min-height:60px!important; padding:6px!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #usersPanel .gcRightTabs button{ height:48px!important; min-height:48px!important; border-radius:9px!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #usersPanel .gcRightTabs .gcRightTabLabel{font-size:8.5px!important} } /* ID-weighted closure for legacy feature bundles whose selectors contain an ID. */ html[data-gc-theme-tone] body.gcCodyFamiliarV3 :is( #guestEntryModal, #forgotPasswordModal, #statusModal, #walletModal, #favoritesModal, #birthdayModal, #incomingCallModal, #activeCallModal, #userQuickModal, #guestRegisterModal, #verificationModal, #pmSecureMediaModal, #addonCenterModal, #reportCenterModal, #moderationWarningModal, #donationModal, #leaderboardModal, #socialFeedModal, #legalCenterModal, #cookieSettingsModal, #voiceModal, #shareModal, #moderationStatusModal ) .modalCard{ background:var(--gc-u-panel)!important; background-image:none!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; box-shadow:0 24px 70px color-mix(in srgb,var(--gc-u-bg) 72%,transparent)!important; } /* Music player station choices and player copy. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #radioModal :is(.radioStation,.gcMusicPlay,.musicPlayerActions .secondaryBtn){background:#f7fafd!important;color:#1e2935!important;border-color:#cbd9e6!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #radioModal .radioStation b{color:#1e2935!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #radioModal .gcCompactPlayer{color:#1e2935!important;border-color:#cbd9e6!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #radioModal :is(.gcMusicInfo strong,.gcMusicInfo small,.gcMusicInfo span,.gcMusicLive){color:#1e2935!important;text-shadow:none!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #radioModal .radioStation{background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important} /* Community news: remove white-on-light inherited copy. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #newsWallModal :is(.newsWallCard,.newsWallHead,.newsWallList){background:#f7fafd!important;color:#1e2935!important;border-color:#cbd9e6!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #newsWallModal .newsPost{background:#fff!important;color:#1e2935!important;border-color:#cbd9e6!important;box-shadow:0 8px 24px rgba(38,57,77,.09)!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #newsWallModal :is(.newsPostAuthor b,.newsPost h4,.newsPostBody,.newsComment b,.newsComment span){color:#1e2935!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #newsWallModal :is(.newsWallHead p,.newsPostAuthor small,.newsComment small){color:#60758b!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #newsWallModal :is(.newsWallAction,.newsReaction,.newsComment){background:#eef4fa!important;color:#26394d!important;border-color:#c3d2e1!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #newsWallModal :is(.newsWallCard,.newsWallHead,.newsPost){background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important} /* Help centre: hero remains branded, all interactive content follows palette. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #helpCenterModal :is(.gcHelpCenterCard,.gcHelpLayout,.gcHelpResults){background:#f7fafd!important;color:#1e2935!important;border-color:#cbd9e6!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #helpCenterModal :is(.gcHelpSearch,.gcHelpCategories button,.gcHelpTopicCard,.gcHelpArticle>button,.gcHelpArticleBody){background:#fff!important;color:#1e2935!important;border-color:#cbd9e6!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #helpCenterModal :is(.gcHelpTopicCard b,.gcHelpArticle b,.gcHelpResultHead h3){color:#1e2935!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #helpCenterModal :is(.gcHelpTopicCard small,.gcHelpArticle small,.gcHelpArticleBody p,.gcHelpArticleBody li){color:#60758b!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #helpCenterModal :is(.gcHelpTopicIcon,.gcHelpArticleIcon){background:#eef4fa!important;color:#26394d!important;border-color:#c3d2e1!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #helpCenterModal .gcHelpCategories button.active{background:color-mix(in srgb,var(--gc-u-accent) 14%,#fff)!important;color:#1e2935!important;border-color:var(--gc-u-accent)!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #helpCenterModal :is(.gcHelpCenterCard,.gcHelpSearch,.gcHelpTopicCard,.gcHelpArticle>button,.gcHelpArticleBody){background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important} /* Theme catalogue: preview swatches may use their own palette, but labels and descriptions belong to the currently active modal palette. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionThemeCard{ background:#f7fafd!important;color:#1e2935!important;border-color:#cbd9e6!important;text-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionThemeCard :is(b,strong,.chatOptionThemeName){color:#1e2935!important;text-shadow:none!important;opacity:1!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionThemeCard :is(p,small,.chatOptionThemeDescription){color:#60758b!important;text-shadow:none!important;opacity:1!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionThemeCard{ background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important;text-shadow:none!important; } html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionThemeCard :is(b,strong,.chatOptionThemeName){color:var(--gc-u-text)!important;text-shadow:none!important;opacity:1!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #chatOptionsModal .chatOptionThemeCard :is(p,small,.chatOptionThemeDescription){color:var(--gc-u-muted)!important;text-shadow:none!important;opacity:1!important} /* Actual full theme gallery (37 tiles). The gallery shell follows the active theme, while every preview tile keeps its own supplied palette and image. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #themesModal :is(.gcThemeCenterCard,.themeGrid){background:#fff!important;color:#1e2935!important;border-color:#cbd9e6!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #themesModal :is(.gcThemeCenterCard,.themeGrid){background:var(--gc-u-card)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important} body.gcCodyFamiliarV3 #themesModal .themeTile{color:#eef4fa!important;text-shadow:none!important} body.gcCodyFamiliarV3 #themesModal .themeTile :is(b,small){text-shadow:none!important;opacity:1!important} body.gcCodyFamiliarV3 #themesModal .themeTile small{color:#b8c4d2!important;font-size:9.5px!important;line-height:1.25!important} body.gcCodyFamiliarV3 #themesModal :is( .themeTile[data-theme-preview="light"], .themeTile[data-theme-preview="light-blue"], .themeTile[data-theme-preview="lite"], .themeTile[data-theme-preview="notepad"], .themeTile[data-theme-preview="scent"] ) small{color:#60758b!important} body.gcCodyFamiliarV3 #themesModal .themeTile b{color:#f4f7fb!important;font-size:11.5px!important;line-height:1.2!important} body.gcCodyFamiliarV3 #themesModal :is( .themeTile[data-theme-preview="light"], .themeTile[data-theme-preview="light-blue"], .themeTile[data-theme-preview="lite"], .themeTile[data-theme-preview="notepad"], .themeTile[data-theme-preview="scent"] ) b{color:#1e2935!important} /* 0.70.00 — universal modal typography and crisp icon contract. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .modal :is(.modalCard,.gcAddonModalCard,.notificationCard,.socialCard,.profileModalCard,.profileEditorCard){color:#1e2935!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .modal :is(h1,h2,h3,h4,h5,b,strong,label,legend){color:#1e2935!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .modal :is(p,small,.muted,.fieldHint,.modalSubtitle){color:#60758b!important;text-shadow:none!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 .modal :is(.modalCard,.gcAddonModalCard,.notificationCard,.socialCard,.profileModalCard,.profileEditorCard){color:var(--gc-u-text)!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 .modal :is(h1,h2,h3,h4,h5,b,strong,label,legend){color:var(--gc-u-text)!important;text-shadow:none!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 .modal :is(p,small,.muted,.fieldHint,.modalSubtitle){color:var(--gc-u-muted)!important;text-shadow:none!important} /* Quick-user actions: a clean pale well on light themes and a lifted navy well on dark themes. Emoji and line glyphs get the same optical weight. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcActionIcon{ width:34px!important;height:34px!important;min-width:34px!important; background:#e7f0f8!important;color:#173752!important;border:1px solid #bfd0df!important; box-shadow:0 1px 3px rgba(23,55,82,.12)!important;font-size:17px!important;font-weight:900!important;opacity:1!important; } html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcActionIcon{ width:34px!important;height:34px!important;min-width:34px!important; background:#20364c!important;color:#f5f9fd!important;border:1px solid #45627c!important; box-shadow:0 1px 4px rgba(0,0,0,.24)!important;font-size:17px!important;font-weight:900!important;opacity:1!important; } /* Addon icons retain their individual colour identity but gain size, edge and contrast. The surrounding tile follows the active palette. */ body.gcCodyFamiliarV3 #actionTray .addonIcon{width:40px!important;height:40px!important;min-width:40px!important;border-radius:11px!important;display:grid!important;place-items:center!important;opacity:1!important} body.gcCodyFamiliarV3 #actionTray .addonIcon :is(.gcAddonSvg,svg){width:23px!important;height:23px!important;opacity:1!important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3)) saturate(1.18)!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #actionTray .addonIcon{background:#f5f1e6!important;color:#26394d!important;border:1px solid #d8cfb8!important;box-shadow:0 2px 6px rgba(38,57,77,.13)!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #actionTray .addonIcon{background:#203247!important;color:#f4f8fc!important;border:1px solid #405a74!important;box-shadow:0 2px 7px rgba(0,0,0,.28)!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #actionTray .addonTrayGrid>button{background:#f7fafd!important;color:#1e2935!important;border-color:#cbd9e6!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #actionTray .addonTrayGrid>button{background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important} /* The tray close control must be a button, never a full-width dark bar. */ body.gcCodyFamiliarV3 #actionTray .addonTrayHead{position:relative!important;padding-right:58px!important} body.gcCodyFamiliarV3 #actionTray #actionTrayClose{ position:absolute!important;right:12px!important;top:50%!important;transform:translateY(-50%)!important; width:38px!important;height:38px!important;min-width:38px!important;max-width:38px!important;padding:0!important; display:grid!important;place-items:center!important;border-radius:10px!important;font-size:0!important;line-height:1!important; } body.gcCodyFamiliarV3 #actionTray #actionTrayClose::before{content:'×'!important;font-size:25px!important;font-weight:500!important;line-height:1!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #actionTray #actionTrayClose{background:#eef4fa!important;color:#26394d!important;border:1px solid #bfcfe0!important;box-shadow:0 3px 9px rgba(38,57,77,.12)!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #actionTray #actionTrayClose{background:var(--gc-u-card2)!important;color:#f4f8fc!important;border:1px solid var(--gc-u-border)!important;box-shadow:0 3px 10px rgba(0,0,0,.25)!important} /* Main navigation icons: restore full opacity and a legible minimum size. */ body.gcCodyFamiliarV3 :is(.quickbar,.topbar,.gcRightTabs,.composer) .gcUiIcon{width:19px!important;height:19px!important;opacity:1!important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.24)) saturate(1.14)!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(.quickbar,.topbar,.gcRightTabs,.composer) button{color:#26394d!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 :is(.quickbar,.topbar,.gcRightTabs,.composer) button{color:var(--gc-u-text)!important} /* Main and private composers stay visible above every themed surface. */ body.gcCodyFamiliarV3 :is(#composer,#pmComposer,.pmComposer){display:flex!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:12!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(#composer,#pmComposer,.pmComposer){background:#fff!important;color:#1e2935!important;border-color:#cbd9e6!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(#composer,#pmComposer,.pmComposer) :is(textarea,input){background:#fff!important;color:#1e2935!important;border-color:#bfcfe0!important;caret-color:#1e2935!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(#composer,#pmComposer,.pmComposer) :is(textarea,input)::placeholder{color:#71859a!important;opacity:1!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 :is(#composer,#pmComposer,.pmComposer){background:var(--gc-u-card)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 :is(#composer,#pmComposer,.pmComposer) :is(textarea,input){background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important;caret-color:var(--gc-u-text)!important} /* Reply preview above the main composer. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #replyBar{background:#eef4fa!important;color:#1e2935!important;border-color:#bfcfe0!important;box-shadow:inset 3px 0 var(--gc-u-accent)!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #replyBar :is(small,strong,span){color:#1e2935!important;text-shadow:none!important;opacity:1!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #replyBar small{color:#60758b!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #replyBar button{background:#fff!important;color:#26394d!important;border-color:#cbd9e6!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #replyBar{background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important;box-shadow:inset 3px 0 var(--gc-u-accent)!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #replyBar :is(small,strong,span){color:var(--gc-u-text)!important;text-shadow:none!important;opacity:1!important} /* Three-dot message action menu. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .msg .msgActions{background:#fff!important;color:#1e2935!important;border-color:#bfcfe0!important;box-shadow:0 10px 28px rgba(23,37,52,.18)!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .msg .msgActions button{background:transparent!important;color:#26394d!important;border-color:transparent!important;text-shadow:none!important;opacity:1!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .msg .msgActions button:hover{background:#eef4fa!important;color:#172534!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .msg .msgActions button.danger{color:#c73546!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 .msg .msgActions{background:var(--gc-u-card)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important;box-shadow:0 10px 30px rgba(0,0,0,.34)!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 .msg .msgActions button{background:transparent!important;color:var(--gc-u-text)!important;border-color:transparent!important;text-shadow:none!important;opacity:1!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 .msg .msgActions button:hover{background:var(--gc-u-card2)!important} /* Private-message toolbar and quote use the same contrast guarantees. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal :is(.pmMessageTools,.pmReplyPreview){background:#fff!important;color:#1e2935!important;border-color:#bfcfe0!important;box-shadow:0 9px 26px rgba(23,37,52,.16)!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal :is(.pmToolRow,.pmQuickReactionRow button){background:transparent!important;color:#26394d!important;border-color:transparent!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal :is(.pmToolCopy b,.pmToolCopy small){color:#1e2935!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal .pmToolCopy small{color:#60758b!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #pmModal :is(.pmMessageTools,.pmReplyPreview){background:var(--gc-u-card)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important} /* 0.71.00 — private voice recorder, matching the main-chat control. */ body.gcCodyFamiliarV3 #pmVoiceQuick{display:grid!important;place-items:center!important;flex:0 0 40px!important;width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;border-radius:11px!important;font-size:18px!important;line-height:1!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmVoiceQuick{background:#f7fafd!important;color:#4d357a!important;border:1px solid #cbd9e6!important;box-shadow:0 2px 7px rgba(38,57,77,.1)!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #pmVoiceQuick{background:var(--gc-u-card2)!important;color:#eadfff!important;border:1px solid var(--gc-u-border)!important;box-shadow:0 2px 8px rgba(0,0,0,.2)!important} body.gcCodyFamiliarV3 #pmVoiceQuick.recording{background:#d84a5b!important;color:#fff!important;border-color:#ff7b89!important;animation:gcVoicePrivatePulse 1.15s ease-in-out infinite!important} body.gcCodyFamiliarV3 #pmAddonVoice:not(.hidden){display:grid!important} body.gcCodyFamiliarV3 #voiceModal.voicePrivateTarget .voiceRecorderCard{box-shadow:0 18px 60px rgba(47,35,74,.3),inset 0 3px #8a63c7!important} @keyframes gcVoicePrivatePulse{50%{transform:scale(1.06);box-shadow:0 0 0 6px rgba(216,74,91,.16)}} @media(max-width:560px){body.gcCodyFamiliarV3 #pmVoiceQuick{flex-basis:38px!important;width:38px!important;height:38px!important;min-width:38px!important}.pmTools{gap:5px!important}} /* 0.74.01 — readable, theme-aware reaction colours in main and private chat. */ body.gcCodyFamiliarV3 :is(.reactionPicker .codyReactionChoice,#pmModal .pmQuickReactionRow button,#pmModal .pmReactionSummary .pmReactionChip){ --gc-reaction-color:#6ca8ff; color:var(--gc-u-text)!important; border:1px solid color-mix(in srgb,var(--gc-reaction-color) 45%,var(--gc-u-border))!important; background:color-mix(in srgb,var(--gc-reaction-color) 18%,var(--gc-u-card2))!important; box-shadow:inset 0 1px color-mix(in srgb,#fff 16%,transparent),0 2px 7px color-mix(in srgb,var(--gc-reaction-color) 13%,transparent)!important; opacity:1!important; } body.gcCodyFamiliarV3 :is(.reactionPicker .codyReactionChoice,#pmModal .pmQuickReactionRow button,#pmModal .pmReactionSummary .pmReactionChip):nth-child(1){--gc-reaction-color:#f2bd3f} body.gcCodyFamiliarV3 :is(.reactionPicker .codyReactionChoice,#pmModal .pmQuickReactionRow button,#pmModal .pmReactionSummary .pmReactionChip):nth-child(2){--gc-reaction-color:#ef5276} body.gcCodyFamiliarV3 :is(.reactionPicker .codyReactionChoice,#pmModal .pmQuickReactionRow button,#pmModal .pmReactionSummary .pmReactionChip):nth-child(3){--gc-reaction-color:#ff9f43} body.gcCodyFamiliarV3 :is(.reactionPicker .codyReactionChoice,#pmModal .pmQuickReactionRow button,#pmModal .pmReactionSummary .pmReactionChip):nth-child(4){--gc-reaction-color:#a875ff} body.gcCodyFamiliarV3 :is(.reactionPicker .codyReactionChoice,#pmModal .pmQuickReactionRow button,#pmModal .pmReactionSummary .pmReactionChip):nth-child(5){--gc-reaction-color:#58aaf5} body.gcCodyFamiliarV3 :is(.reactionPicker .codyReactionChoice,#pmModal .pmQuickReactionRow button,#pmModal .pmReactionSummary .pmReactionChip):nth-child(6){--gc-reaction-color:#ef5964} body.gcCodyFamiliarV3 .reactionPicker .codyReactionChoice span, body.gcCodyFamiliarV3 #pmModal .pmReactionSummary .pmReactionChip b{color:var(--gc-u-text)!important;text-shadow:none!important;opacity:1!important} body.gcCodyFamiliarV3 .reactionPicker .codyReactionChoice img{filter:drop-shadow(0 2px 2px rgba(0,0,0,.28)) saturate(1.08)!important} body.gcCodyFamiliarV3 :is(.reactionPicker .codyReactionChoice,#pmModal .pmQuickReactionRow button,#pmModal .pmReactionSummary .pmReactionChip):is(:hover,:focus-visible){ color:var(--gc-u-text)!important; border-color:color-mix(in srgb,var(--gc-reaction-color) 78%,var(--gc-u-text))!important; background:color-mix(in srgb,var(--gc-reaction-color) 32%,var(--gc-u-card2))!important; outline:2px solid color-mix(in srgb,var(--gc-reaction-color) 58%,transparent)!important; outline-offset:1px!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(.reactionPicker .codyReactionChoice,#pmModal .pmQuickReactionRow button,#pmModal .pmReactionSummary .pmReactionChip){ color:#172534!important; border-color:color-mix(in srgb,var(--gc-reaction-color) 48%,#aebfd0)!important; background:color-mix(in srgb,var(--gc-reaction-color) 18%,#fff)!important; box-shadow:inset 0 1px #fff,0 2px 6px rgba(34,52,70,.10)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .reactionPicker .codyReactionChoice span, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #pmModal .pmReactionSummary .pmReactionChip b{color:#26394d!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(.reactionPicker .codyReactionChoice,#pmModal .pmQuickReactionRow button,#pmModal .pmReactionSummary .pmReactionChip):is(:hover,:focus-visible){ color:#101b27!important; background:color-mix(in srgb,var(--gc-reaction-color) 30%,#fff)!important; } /* 0.72.00 — one polished composer contract for main chat and private chat. */ body.gcCodyFamiliarV3 #composer.composer{ display:grid!important;width:100%!important;max-width:none!important; grid-template-columns:40px 40px minmax(120px,1fr) 40px 44px!important; grid-template-rows:minmax(42px,auto)!important;align-items:end!important; gap:6px!important;padding:7px 9px!important; } body.gcCodyFamiliarV3 #composer .composerInputWrap{width:100%!important;min-width:0!important;align-self:stretch!important} body.gcCodyFamiliarV3 #composer textarea{width:100%!important;min-width:0!important;height:42px!important;min-height:42px!important;border-radius:21px!important} body.gcCodyFamiliarV3 :is(#voiceQuickBtn,#pmVoiceQuick) .gcUiIcon{width:21px!important;height:21px!important;display:block!important;opacity:1!important} body.gcCodyFamiliarV3 #pmVoiceQuick{border-radius:50%!important} body.gcCodyFamiliarV3 #pmModal .pmTools{display:flex!important;align-items:center!important;gap:6px!important;flex:0 0 auto!important} body.gcCodyFamiliarV3 #pmModal .pmBottom{border-top:1px solid var(--gc-u-border)!important} body.gcCodyFamiliarV3 #pmModal #pmInput{border-radius:21px!important;padding-inline:14px!important} body.gcCodyFamiliarV3 :is(#composer,#pmModal .pmBottom) button:focus-visible{outline:3px solid color-mix(in srgb,var(--gc-u-accent) 58%,#fff 42%)!important;outline-offset:2px!important} @media(max-width:480px){ body.gcCodyFamiliarV3 #composer.composer{grid-template-columns:36px 36px minmax(80px,1fr) 36px 40px!important;grid-template-rows:40px!important;gap:4px!important;padding:5px!important} body.gcCodyFamiliarV3 #composer textarea{height:40px!important;min-height:40px!important} body.gcCodyFamiliarV3 #pmModal .pmBottom{padding:5px max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important} } /* 0.68.00 COMPLETE LIGHT-SURFACE CONTRACT Cody layout stays intact, but every chrome/panel surface follows the active palette. This closes fixed navy leakage in all supplied light-theme shots. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(.gcClassicTop,.topbar){ background:var(--gc-u-card)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; box-shadow:0 1px 0 var(--gc-u-border)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(.gcHamburger,.gcTopIcon,.gcProfileTop){ background:var(--gc-u-card2)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; box-shadow:0 2px 7px color-mix(in srgb,var(--gc-u-text) 9%,transparent)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcOlderMessages{ background:var(--gc-u-card2)!important; color:var(--gc-u-text)!important; border:1px solid var(--gc-u-border)!important; box-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #usersPanel :is(.liveStats,.gcRightTitle), html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #usersPanel .liveStats>b{ background:var(--gc-u-card2)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; text-shadow:none!important; } /* Public profile: keep the Cody geometry and accent line while replacing the hard-coded dark shell, tabs, panes and action tiles. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #profileModal :is( .profileModalCard,.gcProfile,.gcCodyProfileExact,.gcProfileHero, .gcProfileTabs,.gcProfilePane,.gcCodyProfileSection,.profileActions ){ background:var(--gc-u-card)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; text-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #profileModal :is( .gcProfileTabs button,.profileInfoRow,.profileActions button, .gcCodyProfileAction,.gcCodyProfileMoreActions button, .gcCodyProfileSocials a,.profileFriendRow ){ background:var(--gc-u-card2)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; text-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #profileModal .gcProfileTabs button.active{ background:color-mix(in srgb,var(--gc-u-accent) 13%,var(--gc-u-card))!important; color:var(--gc-u-text)!important; box-shadow:inset 0 -2px var(--gc-u-accent)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #profileModal :is( .gcProfileIdentity h3,.gcProfileIdentity b,.profileInfoRow b, .profileActions b,.gcCodyProfileAction b ){color:var(--gc-u-text)!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #profileModal :is( .gcProfileIdentity small,.gcProfileIdentity p,.profileInfoRow small, .profileActions small,.gcCodyProfileAction small ){color:color-mix(in srgb,var(--gc-u-muted) 62%,var(--gc-u-text) 38%)!important;text-shadow:none!important} /* Emoji/sticker panel is a floating Cody surface and must follow the theme. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #emojiPanel, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #emojiPanel :is(.emojiHead,.emojiTabs,.emojiGrid){ background:var(--gc-u-card)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; text-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #emojiPanel .emojiTabs button{ background:transparent!important;color:var(--gc-u-text)!important;border-color:transparent!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #emojiPanel .emojiTabs button.active{ background:color-mix(in srgb,var(--gc-u-accent) 14%,var(--gc-u-card2))!important; border-color:var(--gc-u-accent)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #emojiPanel .emojiHead small{ color:color-mix(in srgb,var(--gc-u-muted) 62%,var(--gc-u-text) 38%)!important; } /* File/drop zones and secondary cards used by Ideeënbus and other modals. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .modal :is( .suggestionUpload,.contactUpload,.reportUpload,.gcUploadZone, .profileUploadHero,.profileBannerUpload,.profileAlbumActions ){ background:var(--gc-u-card2)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; text-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .modal :is( .suggestionUpload,.contactUpload,.reportUpload,.gcUploadZone, .profileUploadHero,.profileBannerUpload,.profileAlbumActions ) :is(span,small){ color:color-mix(in srgb,var(--gc-u-muted) 62%,var(--gc-u-text) 38%)!important; text-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .modal input[type="file"]{ background:var(--gc-u-card)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; } /* Quick user card (the General / Privacy / Manage sheet in the screenshots). */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .gcUserMenu{ background:var(--gc-u-card)!important;color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .gcUserMenu :is(header,.gcUserMenuHead,.gcUserMenuTabs,.gcUserMenuBody,.gcUserMenuTabPanel){ background:var(--gc-u-card)!important;color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important;text-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .gcUserMenu :is(.gcUserMenuTabs button,.gcUserMenuGrid button){ background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important;text-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .gcUserMenu .gcUserMenuTabs button.active{ background:color-mix(in srgb,var(--gc-u-accent) 13%,var(--gc-u-card))!important; color:var(--gc-u-text)!important;box-shadow:inset 0 -2px var(--gc-u-accent)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .gcUserMenu :is(h3,b,strong){color:var(--gc-u-text)!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .gcUserMenu :is(p,small){color:color-mix(in srgb,var(--gc-u-muted) 62%,var(--gc-u-text) 38%)!important;text-shadow:none!important} /* ID-specific legacy rules otherwise beat the shared top-button selector. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #publicVideoBtn, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #myProfileBtn{ background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; box-shadow:0 2px 7px color-mix(in srgb,var(--gc-u-text) 9%,transparent)!important; } /* The quick-user sheet declares dark component-local --gc-u-* variables. Explicit light values are therefore required at this boundary. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu :is(header,.gcUserMenuHead,.gcUserMenuBody,.gcUserMenuTabPanel){ background:#fff!important;color:#1e2935!important;border-color:#cbd9e6!important;text-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuTabs{ background:#f1f6fb!important;color:#1e2935!important;border-color:#cbd9e6!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu :is(.gcUserMenuTabs button,.gcUserMenuGrid button,.gcUserMenuModeration button){ background:#f7fafd!important;color:#1e2935!important;border-color:#cbd9e6!important;text-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu .gcUserMenuTabs button.active{ background:#e8f1fa!important;color:#172534!important;border-bottom-color:var(--gc-u-accent)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu :is(h3,b,strong){color:#1e2935!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu :is(p,small){color:#60758b!important;text-shadow:none!important} /* 0.69.00 THEME-WIDE ICON + TEXT CONTRAST CONTRACT */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #usersPanel .liveStats>b{ background:#eef4fa!important;color:#172534!important;border-color:#cbd9e6!important;text-shadow:none!important; } html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #usersPanel .liveStats>b{ background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important; } /* Action-icon wells: never allow a dark glyph to disappear into a dark tile. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(.gcActionIcon,.gcProfileMenuIcon,.addonIcon,.gcExtraIcon){ background:color-mix(in srgb,var(--gc-u-accent) 11%,#f7fafd)!important; color:color-mix(in srgb,var(--gc-u-accent) 66%,#172534 34%)!important; border-color:color-mix(in srgb,var(--gc-u-accent) 24%,#cbd9e6 76%)!important; text-shadow:none!important; } html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 :is(.gcActionIcon,.gcProfileMenuIcon,.addonIcon,.gcExtraIcon){ background:color-mix(in srgb,var(--gc-u-card2) 84%,#fff 16%)!important; color:#f4f8fc!important;border-color:color-mix(in srgb,var(--gc-u-border) 70%,#fff 30%)!important; } body.gcCodyFamiliarV3 :is(.gcActionIcon,.gcProfileMenuIcon,.addonIcon,.gcExtraIcon) :is(svg,path,circle,rect,line,polyline,polygon){ color:inherit!important;stroke:currentColor!important; } /* Desktop Extra functions / addon centre. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(.gcCodyExtraCard,.addonCenterCard,.actionTray){ background:#f7fafd!important;color:#1e2935!important;border-color:#cbd9e6!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(.gcCodyExtraCard,.addonCenterCard,.actionTray) :is(header,.gcCodyExtraHead,.addonTrayHead){ background:#fff!important;color:#1e2935!important;border-color:#cbd9e6!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(.gcCodyExtraCard,.addonCenterCard,.actionTray) :is(h2,h3,b,strong,label){color:#1e2935!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(.gcCodyExtraCard,.addonCenterCard,.actionTray) :is(p,small){color:#60758b!important;text-shadow:none!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(.gcCodyExtraGrid,.addonTrayGrid)>button{ background:#fff!important;color:#1e2935!important;border-color:#d3dfeb!important;text-shadow:none!important; } /* Mobile More sheet follows every palette instead of fixed navy. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcMobileMore .gcMobileMoreCard, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcMobileMore .gcMobileMoreCard>header{ background:#fff!important;color:#1e2935!important;border-color:#cbd9e6!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcMobileMore .gcMobileMoreGrid>button{ background:#f7fafd!important;color:#1e2935!important;border-color:#cbd9e6!important;text-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcMobileMore .gcMobileMoreClose{ background:#eef4fa!important;color:#26394d!important;border-color:#bfcfe0!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcMobileMore .gcMobileMoreCard>header small{color:#60758b!important} html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #gcMobileMore .gcMobileMoreCard, html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #gcMobileMore .gcMobileMoreCard>header{ background:var(--gc-u-card)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important; } html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 #gcMobileMore .gcMobileMoreGrid>button{ background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important; } /* Close controls and muted copy receive an explicit readable foreground. */ html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(.gcCodyExtraCard,.actionTray,.modalCard,.emojiPanel,.gcMobileMoreCard) :is(.modalClose,.gcCodyExtraClose,.gcMobileMoreClose,#emojiClose){ color:#26394d!important;border-color:#bfcfe0!important;text-shadow:none!important; } html[data-gc-theme-tone="dark"] body.gcCodyFamiliarV3 :is(.gcCodyExtraCard,.actionTray,.modalCard,.emojiPanel,.gcMobileMoreCard) :is(.modalClose,.gcCodyExtraClose,.gcMobileMoreClose,#emojiClose){ color:#f1f6fb!important;border-color:color-mix(in srgb,var(--gc-u-border) 70%,#fff 30%)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #chatOptionsModal :is( .gcAvatarShapeChoice, .gcPxInput, .chatOptionToggle, .chatOptionField ){ background:var(--gc-u-card)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #chatOptionsModal :is( .chatOptionThemeCard, .gcAvatarShapeCard, .gcUiTextScaleCard, .gcUiTextScalePreview, .gcInlineStyleCard, .gcMentionOptionsCard, #gcSoundOptions ) :is(h3,h4,b,strong,label,span){ color:var(--gc-u-text)!important; text-shadow:none!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #chatOptionsModal :is( .chatOptionThemeCard, .gcAvatarShapeCard, .gcUiTextScaleCard, .gcInlineStyleCard, .gcMentionOptionsCard, #gcSoundOptions ) :is(p,small){ color:color-mix(in srgb,var(--gc-u-muted) 62%,var(--gc-u-text) 38%)!important; text-shadow:none!important; } /* White/Light: accountcontrole is een lichte kaart en erft geen donkere naamplaat- of menu-tekstkleuren. Houd alle technische waarden leesbaar. */ html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserInsight{ background:#f7faff!important; border-color:#bfd0e1!important; color:#18293b!important; box-shadow:0 8px 22px rgba(26,52,78,.10)!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserInsightHead{ border-bottom-color:#cfdae6!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserInsightHead small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserInsightColumns h5{ color:#315f91!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserInsightHead h4, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserInsightFacts b, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserInsightColumns li b, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserInsightColumns li span{ color:#14283b!important; text-shadow:none!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserInsightHead>span{ background:#dceafa!important; color:#244d76!important; border:1px solid #b8cee3!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserInsightFacts>div, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserInsightColumns section{ background:#fff!important; border-color:#cbd9e6!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserInsightFacts small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserInsightColumns li small, html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserInsight>p{ color:#526b83!important; } html[data-chat-theme="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserInsightColumns li em{ background:#e2f1fb!important; color:#17577d!important; border:1px solid #bad8e9!important; } /* YouTube-spelers pas na een bewuste klik laden houdt lange gesprekken licht. */ body.gcCodyFamiliarV3 .mediaEmbed.gcYouTubeDeferred{position:relative!important;overflow:hidden!important;background:#090f18!important;border:1px solid var(--gc-u-border)!important;border-radius:12px!important;aspect-ratio:16/9!important} body.gcCodyFamiliarV3 .gcYouTubeLoad{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;border:0!important;border-radius:inherit!important;overflow:hidden!important;background:#090f18!important;color:#fff!important;cursor:pointer!important} body.gcCodyFamiliarV3 .gcYouTubeThumb{position:absolute!important;inset:0!important;background-position:center!important;background-size:cover!important;opacity:.74!important;transition:opacity .18s ease,transform .18s ease!important} body.gcCodyFamiliarV3 .gcYouTubeLoad:hover .gcYouTubeThumb,body.gcCodyFamiliarV3 .gcYouTubeLoad:focus-visible .gcYouTubeThumb{opacity:.9!important;transform:scale(1.015)!important} body.gcCodyFamiliarV3 .gcYouTubePlay{position:absolute!important;left:50%!important;top:50%!important;translate:-50% -58%!important;width:52px!important;height:38px!important;display:grid!important;place-items:center!important;padding-left:3px!important;border-radius:12px!important;background:#e5232b!important;color:#fff!important;font-size:19px!important;box-shadow:0 7px 22px #0009!important} body.gcCodyFamiliarV3 .gcYouTubeLoad strong{position:absolute!important;left:10px!important;right:10px!important;bottom:8px!important;color:#fff!important;font-size:11px!important;text-align:center!important;text-shadow:0 1px 4px #000,0 1px 8px #000!important} /* 0.74.02 — avatar shape selector follows every light/dark theme. */ body.gcCodyFamiliarV3 #chatOptionsModal .gcAvatarShapeCard{ background:linear-gradient(145deg,var(--gc-u-card2),var(--gc-u-card))!important; color:var(--gc-u-text)!important; border:1px solid var(--gc-u-border)!important; box-shadow:inset 0 1px color-mix(in srgb,#fff 10%,transparent)!important; } body.gcCodyFamiliarV3 #chatOptionsModal .gcAvatarShapeChoice{ --gc-shape-color:#55a9f4; background:color-mix(in srgb,var(--gc-shape-color) 9%,var(--gc-u-card2))!important; color:var(--gc-u-text)!important; border:1px solid color-mix(in srgb,var(--gc-shape-color) 38%,var(--gc-u-border))!important; box-shadow:inset 0 1px color-mix(in srgb,#fff 9%,transparent)!important; transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease!important; } body.gcCodyFamiliarV3 #chatOptionsModal .gcAvatarShapeChoice:nth-child(2){--gc-shape-color:#a875ff} body.gcCodyFamiliarV3 #chatOptionsModal .gcAvatarShapeChoice :is(b,small){color:var(--gc-u-text)!important;text-shadow:none!important;opacity:1!important} body.gcCodyFamiliarV3 #chatOptionsModal .gcAvatarShapeChoice small{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #chatOptionsModal .gcAvatarShapePreview{ background:linear-gradient(145deg,color-mix(in srgb,var(--gc-shape-color) 32%,var(--gc-u-card2)),color-mix(in srgb,var(--gc-shape-color) 14%,var(--gc-u-card)))!important; border-color:color-mix(in srgb,var(--gc-shape-color) 68%,var(--gc-u-text))!important; box-shadow:0 3px 10px color-mix(in srgb,var(--gc-shape-color) 20%,transparent),inset 0 1px color-mix(in srgb,#fff 20%,transparent)!important; } body.gcCodyFamiliarV3 #chatOptionsModal .gcAvatarShapePreview i, body.gcCodyFamiliarV3 #chatOptionsModal .gcAvatarShapePreview i::after{background:color-mix(in srgb,var(--gc-shape-color) 24%,#eef7ff)!important} body.gcCodyFamiliarV3 #chatOptionsModal .gcAvatarShapeChoice:is(:hover,:focus-within){ background:color-mix(in srgb,var(--gc-shape-color) 18%,var(--gc-u-card2))!important; border-color:color-mix(in srgb,var(--gc-shape-color) 72%,var(--gc-u-text))!important; transform:translateY(-1px)!important; } body.gcCodyFamiliarV3 #chatOptionsModal .gcAvatarShapeChoice:has(input:checked){ background:color-mix(in srgb,var(--gc-shape-color) 24%,var(--gc-u-card2))!important; border-color:var(--gc-shape-color)!important; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gc-shape-color) 50%,transparent),0 0 0 2px color-mix(in srgb,var(--gc-shape-color) 18%,transparent)!important; } body.gcCodyFamiliarV3 #chatOptionsModal .gcAvatarShapeChoice:has(input:checked)::after{ content:'✓';position:absolute;right:8px;top:7px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%; background:var(--gc-shape-color);color:#07111d;font-size:11px;font-weight:950;box-shadow:0 2px 7px color-mix(in srgb,var(--gc-shape-color) 36%,transparent) } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #chatOptionsModal .gcAvatarShapeCard{background:#f5f9fd!important;border-color:#bfd0e1!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #chatOptionsModal .gcAvatarShapeChoice{ background:color-mix(in srgb,var(--gc-shape-color) 10%,#fff)!important;color:#172534!important;border-color:color-mix(in srgb,var(--gc-shape-color) 45%,#b7c7d8)!important } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #chatOptionsModal .gcAvatarShapeChoice :is(b,small){color:#172534!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #chatOptionsModal .gcAvatarShapeChoice small{color:#526b83!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #chatOptionsModal .gcAvatarShapeChoice:has(input:checked){background:color-mix(in srgb,var(--gc-shape-color) 20%,#fff)!important} /* 0.74.03 — function colours for both composers, without breaking theme contrast. */ body.gcCodyFamiliarV3 :is(#plusMenuBtn,#pmPlus){--gc-control-color:#58aaf5} body.gcCodyFamiliarV3 :is(#emoji,#pmEmoji){--gc-control-color:#f2b83f} body.gcCodyFamiliarV3 :is(#voiceQuickBtn,#pmVoiceQuick){--gc-control-color:#9a72e8} body.gcCodyFamiliarV3 :is(#composer .composerSend,#pmComposer button[type="submit"]){--gc-control-color:var(--gc-u-accent)} body.gcCodyFamiliarV3 :is(#plusMenuBtn,#emoji,#voiceQuickBtn,#pmPlus,#pmEmoji,#pmVoiceQuick,#composer .composerSend,#pmComposer button[type="submit"]){ background:color-mix(in srgb,var(--gc-control-color) 18%,var(--gc-u-card2))!important; color:var(--gc-u-text)!important; border:1px solid color-mix(in srgb,var(--gc-control-color) 52%,var(--gc-u-border))!important; box-shadow:inset 0 1px color-mix(in srgb,#fff 14%,transparent),0 2px 7px color-mix(in srgb,var(--gc-control-color) 14%,transparent)!important; opacity:1!important; } body.gcCodyFamiliarV3 :is(#plusMenuBtn,#emoji,#voiceQuickBtn,#pmPlus,#pmEmoji,#pmVoiceQuick,#composer .composerSend,#pmComposer button[type="submit"]):is(:hover,:focus-visible), body.gcCodyFamiliarV3 :is(#plusMenuBtn,#pmPlus)[aria-expanded="true"]{ background:color-mix(in srgb,var(--gc-control-color) 32%,var(--gc-u-card2))!important; border-color:color-mix(in srgb,var(--gc-control-color) 78%,var(--gc-u-text))!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(#plusMenuBtn,#emoji,#voiceQuickBtn,#pmPlus,#pmEmoji,#pmVoiceQuick,#composer .composerSend,#pmComposer button[type="submit"]){ background:color-mix(in srgb,var(--gc-control-color) 17%,#fff)!important; color:#172534!important; border-color:color-mix(in srgb,var(--gc-control-color) 55%,#b8c8d8)!important; box-shadow:inset 0 1px #fff,0 2px 6px rgba(34,52,70,.10)!important; } /* 0.74.04 — user profile/action cards inherit each theme and keep functional accents. */ body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu{ background:linear-gradient(150deg,var(--gc-u-card2),var(--gc-u-card))!important; color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important; } body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu>header, body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuTabs{background:transparent!important;border-color:var(--gc-u-border)!important} body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu :is(header b,header small,.gcUserMenuSectionLabel){color:var(--gc-u-text)!important;text-shadow:none!important;opacity:1!important} body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu header small, body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu .gcUserMenuSectionLabel{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuTabs button{ --gc-tab-color:#58aaf5;color:var(--gc-u-muted)!important;background:transparent!important;border-color:transparent!important;opacity:1!important } body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuTabs button:nth-child(2){--gc-tab-color:#61c99a} body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuTabs button:nth-child(3){--gc-tab-color:#f2b83f} body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuTabs button :is(svg,.gcUserMenuTabIcon){color:var(--gc-tab-color)!important;stroke:currentColor!important} body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuTabs button:is(:hover,:focus-visible){color:var(--gc-u-text)!important;background:color-mix(in srgb,var(--gc-tab-color) 12%,var(--gc-u-card2))!important} body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuTabs button.active{ color:var(--gc-u-text)!important;background:color-mix(in srgb,var(--gc-tab-color) 18%,var(--gc-u-card2))!important; box-shadow:inset 0 -3px var(--gc-tab-color)!important } body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuGrid>button, body.gcCodyFamiliarV3 #gcUserMenuOverlay [data-friend-action-slot]>button, body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuModerationPair>button{ --gc-action-color:#9a72e8; background:color-mix(in srgb,var(--gc-action-color) 9%,var(--gc-u-card2))!important; color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-action-color) 34%,var(--gc-u-border))!important; box-shadow:inset 0 1px color-mix(in srgb,#fff 8%,transparent)!important; } body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuGrid>button:nth-child(2){--gc-action-color:#58aaf5} body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuGrid>button:nth-child(3){--gc-action-color:#f2b83f} body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuGrid>button:nth-child(4){--gc-action-color:#61c99a} body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuGrid>button:nth-child(5){--gc-action-color:#ef6c75} body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuGrid>button:nth-child(6){--gc-action-color:#b578f2} body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuGrid>button :is(b,small){color:var(--gc-u-text)!important;text-shadow:none!important;opacity:1!important} body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuGrid>button small{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcActionIcon{ background:color-mix(in srgb,var(--gc-action-color) 22%,var(--gc-u-card))!important; color:color-mix(in srgb,var(--gc-action-color) 78%,var(--gc-u-text))!important; border:1px solid color-mix(in srgb,var(--gc-action-color) 42%,var(--gc-u-border))!important; } body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuGrid>button:is(:hover,:focus-visible){ background:color-mix(in srgb,var(--gc-action-color) 18%,var(--gc-u-card2))!important; border-color:color-mix(in srgb,var(--gc-action-color) 72%,var(--gc-u-text))!important; } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu{background:#fff!important;color:#172534!important;border-color:#b8c9da!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu :is(header b,.gcUserMenuTabs button,.gcUserMenuGrid>button b){color:#172534!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu :is(header small,.gcUserMenuSectionLabel,.gcUserMenuGrid>button small){color:#526b83!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuGrid>button{background:color-mix(in srgb,var(--gc-action-color) 9%,#fff)!important;border-color:color-mix(in srgb,var(--gc-action-color) 42%,#bdccdb)!important} /* 0.74.05 — edge-to-edge public profile shell and full-width cover. */ body.gcCodyFamiliarV3 #profileModal .profileModalCard{ padding:0!important;overflow:hidden!important;background:var(--gc-u-card)!important;border-color:var(--gc-u-border)!important } body.gcCodyFamiliarV3 #profileModal #profileContent, body.gcCodyFamiliarV3 #profileModal .gcProfile{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:var(--gc-u-card)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #profileModal .gcProfileHero{ width:100%!important;max-width:none!important;margin:0!important;border-radius:0!important; background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important; border:0!important;border-bottom:1px solid color-mix(in srgb,var(--profile-accent,var(--gc-u-accent)) 54%,var(--gc-u-border))!important; box-sizing:border-box!important } body.gcCodyFamiliarV3 #profileModal .gcCodyProfilePrimaryActions, body.gcCodyFamiliarV3 #profileModal .gcProfileTabs{width:100%!important;margin:0!important;border-radius:0!important;box-sizing:border-box!important;background:var(--gc-u-card2)!important;border-color:var(--gc-u-border)!important} body.gcCodyFamiliarV3 #profileModal .gcCodyProfilePrimaryActions .gcCodyPrimaryAction{ background:color-mix(in srgb,var(--profile-accent,var(--gc-u-accent)) 10%,var(--gc-u-card2))!important; color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important } body.gcCodyFamiliarV3 #profileModal .gcCodyProfilePrimaryActions .gcCodyPrimaryAction:is(:hover,:focus-visible){background:color-mix(in srgb,var(--profile-accent,var(--gc-u-accent)) 20%,var(--gc-u-card2))!important} body.gcCodyFamiliarV3 #profileModal .gcProfileTabs button{color:var(--gc-u-muted)!important;background:transparent!important;border-color:transparent!important;opacity:1!important} body.gcCodyFamiliarV3 #profileModal .gcProfileTabs button.active{ color:var(--gc-u-text)!important;background:color-mix(in srgb,var(--profile-accent,var(--gc-u-accent)) 15%,var(--gc-u-card2))!important; box-shadow:inset 0 -3px var(--profile-accent,var(--gc-u-accent))!important } body.gcCodyFamiliarV3 #profileModal .gcProfilePane{width:100%!important;margin:0!important;padding:10px 12px 16px!important;box-sizing:border-box!important;background:var(--gc-u-card)!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #profileModal .profileInfoRow{ width:100%!important;margin:0!important;background:color-mix(in srgb,var(--profile-accent,var(--gc-u-accent)) 6%,var(--gc-u-card2))!important; color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--profile-accent,var(--gc-u-accent)) 24%,var(--gc-u-border))!important;box-sizing:border-box!important } body.gcCodyFamiliarV3 #profileModal .profileInfoRow :is(span,strong,b,small){color:var(--gc-u-text)!important;text-shadow:none!important;opacity:1!important} body.gcCodyFamiliarV3 #profileModal .profileInfoRow span{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #profileModal .profilePhotoGrid{width:100%!important;margin:0!important;padding:0!important;grid-template-columns:repeat(auto-fill,minmax(132px,1fr))!important} body.gcCodyFamiliarV3 #profileModal .profilePhotoGrid :is(img,a,button){max-width:100%!important;box-sizing:border-box!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #profileModal :is(.profileModalCard,#profileContent,.gcProfile,.gcProfilePane){background:#fff!important;color:#172534!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #profileModal :is(.gcCodyProfilePrimaryActions,.gcProfileTabs){background:#f2f7fc!important;border-color:#bfd0e1!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #profileModal .profileInfoRow{background:color-mix(in srgb,var(--profile-accent,var(--gc-u-accent)) 7%,#fff)!important;color:#172534!important;border-color:#c3d3e2!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #profileModal .profileInfoRow :is(strong,b){color:#172534!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #profileModal .profileInfoRow span{color:#526b83!important} @media(max-width:700px){ body.gcCodyFamiliarV3 #profileModal{padding:0!important;align-items:stretch!important} body.gcCodyFamiliarV3 #profileModal .profileModalCard{width:100%!important;max-width:100%!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important} body.gcCodyFamiliarV3 #profileModal .gcProfileHero{min-height:224px!important} body.gcCodyFamiliarV3 #profileModal .gcProfilePane{padding:10px 8px max(14px,env(safe-area-inset-bottom))!important} } /* 0.74.08-final — keep the theme contract last in the cascade. */ body.gcCodyFamiliarV3 :is(.chathead,.asideHead,.addonTrayHead,#usersPanel .gcRightTitle,#usersPanel .gcCodyStatsToggle){background:linear-gradient(180deg,color-mix(in srgb,var(--gc-u-accent) 10%,var(--gc-u-card2)),color-mix(in srgb,var(--gc-u-accent) 4%,var(--gc-u-card)))!important;color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 38%,var(--gc-u-border))!important;box-shadow:none!important;text-shadow:none!important} body.gcCodyFamiliarV3 :is(.chathead,.asideHead,.addonTrayHead,#usersPanel .gcRightTitle,#usersPanel .gcCodyStatsToggle) :is(h1,h2,h3,h4,b,strong,span){color:var(--gc-u-text)!important;text-shadow:none!important;opacity:1!important} body.gcCodyFamiliarV3 :is(.chathead,.asideHead,.addonTrayHead) :is(p,small),body.gcCodyFamiliarV3 .chathead .connection{color:var(--gc-u-muted)!important;text-shadow:none!important;opacity:1!important} body.gcCodyFamiliarV3 :is(.asideHead,.addonTrayHead) :is(button,[role="button"]){background:color-mix(in srgb,var(--gc-u-accent) 8%,var(--gc-u-card2))!important;color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 34%,var(--gc-u-border))!important} body.gcCodyFamiliarV3 :is(#usersPanel,#roomsPanel){background:color-mix(in srgb,var(--gc-u-accent) 3%,var(--gc-u-card))!important;color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 30%,var(--gc-u-border))!important} body.gcCodyFamiliarV3 #usersPanel .userGroup>header{background:color-mix(in srgb,var(--rank-group-color,var(--gc-u-accent)) 9%,var(--gc-u-card2))!important;color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--rank-group-color,var(--gc-u-accent)) 28%,var(--gc-u-border))!important;text-shadow:none!important} body.gcCodyFamiliarV3 #usersPanel .userGroup>header :is(b,span){color:var(--gc-u-text)!important;text-shadow:none!important;opacity:1!important} body.gcCodyFamiliarV3 #usersPanel .userCard:not(.has-nameplate){background:color-mix(in srgb,var(--gc-u-accent) 4%,var(--gc-u-card))!important;color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 17%,var(--gc-u-border))!important} body.gcCodyFamiliarV3 #usersPanel .userCard :is(.uStatus,.uMeta,small){color:var(--gc-u-muted)!important;opacity:1!important} body.gcCodyFamiliarV3 #roomsPanel :is(.gcRoomGroupTitle,.roomEyebrow){color:color-mix(in srgb,var(--gc-u-accent) 72%,var(--gc-u-text))!important;text-shadow:none!important;opacity:1!important} body.gcCodyFamiliarV3 #roomsPanel :is(.roomShell,.roomSelect,.roomGameStrip){background:color-mix(in srgb,var(--gc-u-accent) 5%,var(--gc-u-card2))!important;color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 34%,var(--gc-u-border))!important;box-shadow:none!important;text-shadow:none!important} body.gcCodyFamiliarV3 #roomsPanel .roomShell.active{background:color-mix(in srgb,var(--gc-u-accent) 13%,var(--gc-u-card2))!important;border-color:color-mix(in srgb,var(--gc-u-accent) 70%,var(--gc-u-border))!important} body.gcCodyFamiliarV3 #roomsPanel .roomCopy :is(strong,span){color:var(--gc-u-text)!important;text-shadow:none!important;opacity:1!important} body.gcCodyFamiliarV3 #roomsPanel .roomCopy>span{color:var(--gc-u-muted)!important} body.gcCodyFamiliarV3 #roomsPanel :is(.roomPeopleCount,.roomIcon,.roomGameStrip button){background:color-mix(in srgb,var(--gc-u-accent) 12%,var(--gc-u-card))!important;color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 36%,var(--gc-u-border))!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(.chathead,.asideHead,.addonTrayHead,#usersPanel .gcRightTitle,#usersPanel .gcCodyStatsToggle){background:linear-gradient(180deg,color-mix(in srgb,var(--gc-u-accent) 9%,#fff),color-mix(in srgb,var(--gc-u-accent) 4%,#f4f8fc))!important;color:#172534!important;border-color:color-mix(in srgb,var(--gc-u-accent) 35%,#b9c9d9)!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(.chathead,.asideHead,.addonTrayHead,#usersPanel .gcRightTitle,#usersPanel .gcCodyStatsToggle) :is(h1,h2,h3,h4,b,strong,span){color:#172534!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(.chathead,.asideHead,.addonTrayHead) :is(p,small),html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 .chathead .connection{color:#526b83!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 :is(#usersPanel,#roomsPanel){background:#f7fafc!important;color:#172534!important;border-color:#b9c9d9!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #usersPanel .userGroup>header,html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #usersPanel .userCard:not(.has-nameplate),html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #roomsPanel :is(.roomShell,.roomSelect,.roomGameStrip){background:color-mix(in srgb,var(--gc-u-accent) 5%,#fff)!important;color:#172534!important;border-color:color-mix(in srgb,var(--gc-u-accent) 28%,#c2d0de)!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #usersPanel .userGroup>header :is(b,span),html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #roomsPanel .roomCopy :is(strong,span){color:#172534!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #usersPanel .userCard :is(.uStatus,.uMeta,small),html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #roomsPanel .roomCopy>span{color:#526b83!important} /* 0.74.09 — user action/profile menu uses one coherent palette per theme. */ body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu{ background:var(--gc-u-card)!important;color:var(--gc-u-text)!important; border-color:color-mix(in srgb,var(--gc-u-accent) 38%,var(--gc-u-border))!important } body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu>header, body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuTabs, body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuBody{ background:color-mix(in srgb,var(--gc-u-accent) 4%,var(--gc-u-card))!important; color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 28%,var(--gc-u-border))!important } body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuTabs button{ --gc-tab-color:var(--gc-u-accent)!important;background:transparent!important; color:var(--gc-u-muted)!important;border-color:transparent!important;text-shadow:none!important } body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuTabs button :is(b,.gcUserMenuTabIcon,svg){color:inherit!important;stroke:currentColor!important} body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuTabs button:is(:hover,:focus-visible){background:color-mix(in srgb,var(--gc-u-accent) 9%,var(--gc-u-card2))!important;color:var(--gc-u-text)!important} body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuTabs button.active{ background:color-mix(in srgb,var(--gc-u-accent) 17%,var(--gc-u-card2))!important; color:var(--gc-u-text)!important;box-shadow:inset 0 -3px var(--gc-u-accent)!important } body.gcCodyFamiliarV3 #gcUserMenuOverlay :is(.gcUserMenuGrid>button,[data-friend-action-slot]>button,.gcUserMenuModerationPair>button){ --gc-action-color:var(--gc-u-accent)!important; background:color-mix(in srgb,var(--gc-u-accent) 6%,var(--gc-u-card2))!important; color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 30%,var(--gc-u-border))!important; box-shadow:inset 0 1px color-mix(in srgb,#fff 7%,transparent)!important } body.gcCodyFamiliarV3 #gcUserMenuOverlay :is(.gcUserMenuGrid>button,[data-friend-action-slot]>button,.gcUserMenuModerationPair>button):is(:hover,:focus-visible){ background:color-mix(in srgb,var(--gc-u-accent) 14%,var(--gc-u-card2))!important; border-color:color-mix(in srgb,var(--gc-u-accent) 66%,var(--gc-u-border))!important } body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcActionIcon{ background:color-mix(in srgb,var(--gc-u-accent) 15%,var(--gc-u-card))!important; color:color-mix(in srgb,var(--gc-u-accent) 78%,var(--gc-u-text))!important; border-color:color-mix(in srgb,var(--gc-u-accent) 38%,var(--gc-u-border))!important } body.gcCodyFamiliarV3 #gcUserMenuOverlay :is(.gcUserMenuSectionLabel,.gcUserMenuGrid small,.gcUserMenu>header small){color:var(--gc-u-muted)!important;text-shadow:none!important;opacity:1!important} body.gcCodyFamiliarV3 #gcUserMenuOverlay :is(.gcUserMenuGrid b,.gcUserMenu>header b){color:var(--gc-u-text)!important;text-shadow:none!important;opacity:1!important} body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserInsight{ background:color-mix(in srgb,var(--gc-u-accent) 5%,var(--gc-u-card))!important; color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 34%,var(--gc-u-border))!important } body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserInsight :is(.gcUserInsightFacts>div,.gcUserInsightColumns>section){ background:color-mix(in srgb,var(--gc-u-accent) 4%,var(--gc-u-card2))!important; color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 24%,var(--gc-u-border))!important } body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserInsight :is(h4,h5,b){color:var(--gc-u-text)!important;text-shadow:none!important;opacity:1!important} body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserInsight :is(small,p){color:var(--gc-u-muted)!important;text-shadow:none!important;opacity:1!important} body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserInsight :is(.gcUserInsightHead>span,.gcUserInsightColumns li em){ background:color-mix(in srgb,var(--gc-u-accent) 18%,var(--gc-u-card2))!important; color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 34%,var(--gc-u-border))!important } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay :is(.gcUserMenu,.gcUserMenu>header,.gcUserMenuTabs,.gcUserMenuBody){background:#fff!important;color:#172534!important;border-color:#b9c9d9!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuTabs button{color:#526b83!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenuTabs button.active{background:color-mix(in srgb,var(--gc-u-accent) 14%,#fff)!important;color:#172534!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay :is(.gcUserMenuGrid>button,[data-friend-action-slot]>button,.gcUserMenuModerationPair>button,.gcUserInsight,.gcUserInsightFacts>div,.gcUserInsightColumns>section){background:color-mix(in srgb,var(--gc-u-accent) 5%,#fff)!important;color:#172534!important;border-color:color-mix(in srgb,var(--gc-u-accent) 28%,#c0cedc)!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay :is(.gcUserMenuGrid b,.gcUserMenu>header b,.gcUserInsight h4,.gcUserInsight h5,.gcUserInsight b){color:#172534!important} html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay :is(.gcUserMenuSectionLabel,.gcUserMenuGrid small,.gcUserMenu>header small,.gcUserInsight small,.gcUserInsight p){color:#526b83!important} /* Beat legacy Cody profile specificity: no fixed blue/green panels may leak. */ body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu.gcUserMenuPolished .gcUserMenuGrid>button, body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu.gcUserMenuPolished .gcUserMenuGrid>span[data-friend-action-slot]>button, body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu.gcUserMenuPolished .gcUserMenuModerationPair>button{ --gc-action-color:var(--gc-u-accent)!important; background:color-mix(in srgb,var(--gc-u-accent) 14%,var(--gc-u-card2))!important; color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 46%,var(--gc-u-border))!important } body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu.gcUserMenuPolished .gcActionIcon{ background:color-mix(in srgb,var(--gc-u-accent) 24%,var(--gc-u-card))!important; color:color-mix(in srgb,var(--gc-u-accent) 82%,var(--gc-u-text))!important; border-color:color-mix(in srgb,var(--gc-u-accent) 52%,var(--gc-u-border))!important } body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu.gcUserMenuPolished .gcUserInsight{ background:color-mix(in srgb,var(--gc-u-accent) 10%,var(--gc-u-card))!important; color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 46%,var(--gc-u-border))!important } body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu.gcUserMenuPolished .gcUserInsight :is(.gcUserInsightFacts>div,.gcUserInsightColumns>section){ background:color-mix(in srgb,var(--gc-u-accent) 8%,var(--gc-u-card2))!important; color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 34%,var(--gc-u-border))!important } html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu.gcUserMenuPolished .gcUserMenuGrid>button, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu.gcUserMenuPolished .gcUserMenuGrid>span[data-friend-action-slot]>button, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu.gcUserMenuPolished .gcUserMenuModerationPair>button, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu.gcUserMenuPolished .gcUserInsight, html[data-gc-theme-tone="light"] body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu.gcUserMenuPolished .gcUserInsight :is(.gcUserInsightFacts>div,.gcUserInsightColumns>section){ background:color-mix(in srgb,var(--gc-u-accent) 8%,#fff)!important;color:#172534!important; border-color:color-mix(in srgb,var(--gc-u-accent) 38%,#becddb)!important } /* Mobile follow-up: compact private window and reachable profile actions. */ @media(max-width:700px){ html body.gcCodyFamiliarV3 #pmModal:not(.hidden){ display:flex!important;align-items:center!important;justify-content:center!important; padding:8px!important;box-sizing:border-box!important; background:rgba(0,0,0,.42)!important; } html:not(.gcKeyboardOpen) body.gcCodyFamiliarV3.gcPmOpen #pmModal:not(.hidden) .gcPmCard, html.gcKeyboardOpen body.gcCodyFamiliarV3.gcPmOpen #pmModal:not(.hidden) .gcPmCard{ width:min(420px,100%)!important;max-width:100%!important; height:min(620px,calc(var(--gc-cody-vv-height,100dvh) - 24px))!important; max-height:100%!important;min-height:0!important; border:1px solid var(--gc-u-border)!important;border-radius:12px!important; } html body.gcCodyFamiliarV3 #gcUserMenuOverlay{ top:var(--gc-cody-vv-top,0px)!important;bottom:auto!important; height:var(--gc-cody-vv-height,100dvh)!important;box-sizing:border-box!important; align-items:start!important;justify-items:center!important; padding:max(12px,env(safe-area-inset-top)) 8px max(12px,env(safe-area-inset-bottom))!important; overflow-y:auto!important; } html body.gcCodyFamiliarV3 #gcUserMenuOverlay .gcUserMenu{ margin:0!important;max-width:100%!important; max-height:calc(var(--gc-cody-vv-height,100dvh) - 24px)!important; } html body.gcCodyFamiliarV3 #gcMobileBottomNav button :is(svg,.gcUiIcon){ background:transparent!important;background-image:none!important; border-color:transparent!important;box-shadow:none!important; color:inherit!important; } } /* 0.74.11 — addon surfaces must beat the legacy fixed-blue modal rule. */ html[data-gc-theme-tone] body.gcCodyFamiliarV3 .modal>.modalCard.gcAddonModalCard{ background:var(--gc-u-card)!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 .modal>.modalCard.gcAddonModalCard .modalClose{ background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; min-width:40px!important;min-height:40px!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 .modal>.modalCard.gcAddonModalCard .modalTitle{ padding-right:44px!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcAddonModalCard :is(button,input,select,textarea,summary):focus-visible{ outline:2px solid var(--gc-u-accent)!important;outline-offset:3px!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcAddonModalCard :is(.sideEmpty,.privateEmpty,.gcAddonLoading){ background:var(--gc-u-card2)!important;color:var(--gc-u-muted)!important; border-color:var(--gc-u-border)!important;opacity:1!important; } /* 2026-09-16: consistent header controls and clean private composer. */ html[data-gc-theme-tone] body.gcCodyFamiliarV3 :is(.gcTopIcon,#mainMenuBtn,#publicVideoBtn){ background:var(--gc-u-card2)!important;background-image:none!important; color:var(--gc-u-text)!important;border:1px solid var(--gc-u-border)!important; border-radius:10px!important;box-shadow:none!important; height:38px!important;min-height:38px!important;box-sizing:border-box!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 :is(.gcTopIcon,#mainMenuBtn){width:38px!important;min-width:38px!important;padding:7px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 :is(.gcTopIcon,#mainMenuBtn) .gcUiIcon{ width:20px!important;height:20px!important;background:transparent!important; border:0!important;box-shadow:none!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 :is(.gcTopIcon,#mainMenuBtn,#publicVideoBtn):is(:hover,:focus-visible){ background:color-mix(in srgb,var(--gc-u-accent) 16%,var(--gc-u-card2))!important; border-color:var(--gc-u-accent)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 :is(.gcTopIcon,#mainMenuBtn,#publicVideoBtn):focus-visible{outline:2px solid var(--gc-u-accent)!important;outline-offset:2px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #pmModal #pmComposer{ display:grid!important;grid-template-columns:minmax(0,1fr) 40px!important; align-items:center!important;gap:6px!important;min-width:0!important; padding:0!important;margin:0!important;border:0!important; background:transparent!important;box-shadow:none!important;border-radius:0!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #pmModal #pmInput{ box-sizing:border-box!important;width:100%!important;min-width:0!important; height:40px!important;min-height:40px!important;line-height:20px!important; padding:9px 12px!important;resize:none!important; background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important; border:1px solid var(--gc-u-border)!important;border-radius:20px!important;box-shadow:none!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #pmModal #pmInput:focus{outline:2px solid var(--gc-u-accent)!important;outline-offset:1px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #pmModal #pmInput::placeholder{color:var(--gc-u-muted)!important;opacity:1!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #pmModal #pmComposer button[type="submit"]{ width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important; padding:0!important;display:grid!important;place-items:center!important;line-height:1!important; background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important; border:2px solid var(--gc-u-accent)!important;border-radius:50%!important;box-shadow:none!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #pmModal #pmTyping{ background:var(--gc-u-card)!important;color:var(--gc-u-muted)!important; border-color:var(--gc-u-border)!important;font-size:11px!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #pmModal #pmTyping:not(.active){height:0!important;min-height:0!important;padding-block:0!important;border:0!important} /* 2026-09-16: finish addon, profile and public-video theme surfaces. */ html[data-gc-theme-tone] body.gcCodyFamiliarV3 #actionTray .addonIcon{ background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important; border:1px solid var(--gc-u-border)!important;box-shadow:none!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfilePane[data-profile-pane] .profileInfoRow, html[data-gc-theme-tone] body.gcCodyFamiliarV3 #profileModal #profileContent :is(.profileFriendsHead,.profileGiftsHead,.profileFriendCard,.profileGiftCard,.profileFriendsEmpty,.profileGiftsEmpty){ background:var(--gc-u-card2)!important;background-image:none!important; color:var(--gc-u-text)!important;border:1px solid var(--gc-u-border)!important; border-radius:12px!important;box-shadow:none!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfilePane[data-profile-pane] .profileInfoRow{margin-bottom:8px!important;padding:12px 14px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #profileModal #profileContent .gcProfilePane[data-profile-pane] .profileInfoRow :is(span,strong,b,i), html[data-gc-theme-tone] body.gcCodyFamiliarV3 #profileModal #profileContent :is(.profileFriendsHead,.profileGiftsHead,.profileFriendCard,.profileGiftCard) :is(b,strong){color:var(--gc-u-text)!important;-webkit-text-fill-color:currentColor!important;text-shadow:none!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #profileModal #profileContent :is(.profileFriendsHead,.profileGiftsHead,.profileFriendCard,.profileGiftCard) :is(small,p){color:var(--gc-u-muted)!important;opacity:1!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #profileModal #profileGiftSendNow{background:var(--gc-u-card)!important;color:var(--gc-u-text)!important;border:1px solid var(--gc-u-accent)!important;border-radius:10px!important;min-height:40px!important;padding:8px 12px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcRightTabs{ display:flex!important;flex-wrap:wrap!important;gap:6px!important; padding:8px!important;height:auto!important;min-height:0!important;overflow:visible!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcRightTabs button{ flex:0 0 auto!important;width:auto!important;min-width:36px!important;min-height:38px!important; height:auto!important;padding:8px!important;gap:6px!important; display:inline-flex!important;align-items:center!important;justify-content:center!important; white-space:nowrap!important;background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important; border:1px solid var(--gc-u-border)!important;border-radius:9px!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcRightTabs button.active{border-color:var(--gc-u-accent)!important;background:color-mix(in srgb,var(--gc-u-accent) 14%,var(--gc-u-card2))!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcRightTabs .gcRightTabLabel{font-size:12px!important;line-height:1.3!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcRightTabs .gcUiIcon{flex:0 0 18px!important;width:18px!important;height:18px!important;background:transparent!important;border:0!important;box-shadow:none!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 :is(#publicVideoModal,#gcPublicVideoInlineHost)>.gcPublicVideoCard{ width:min(840px,100%)!important;max-width:100%!important;box-sizing:border-box!important; background:var(--gc-u-card)!important;color:var(--gc-u-text)!important; border:1px solid var(--gc-u-border)!important;border-radius:16px!important;padding:0!important;overflow:auto!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 :is(#publicVideoModal,#gcPublicVideoInlineHost) .gcPublicVideoHead{display:flex!important;flex-wrap:wrap!important;align-items:start!important;justify-content:space-between!important;gap:16px!important;padding:20px!important;border-bottom:1px solid var(--gc-u-border)!important;background:var(--gc-u-card2)!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 :is(#publicVideoModal,#gcPublicVideoInlineHost) .gcPublicVideoHeadActions{display:flex!important;align-items:center!important;gap:12px!important;margin-left:auto!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 :is(#publicVideoModal,#gcPublicVideoInlineHost) :is(h3,p){margin:0 0 12px!important;line-height:1.5!important;color:var(--gc-u-text)!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 :is(#publicVideoModal,#gcPublicVideoInlineHost) :is(small,.gcPublicVideoNotice,.gcPublicVideoHead p){color:var(--gc-u-muted)!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 :is(#publicVideoModal,#gcPublicVideoInlineHost) .gcPublicVideoIntroBox{margin:20px!important;padding:24px!important;border:1px solid var(--gc-u-border)!important;border-radius:14px!important;background:var(--gc-u-card2)!important;text-align:center!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 :is(#publicVideoModal,#gcPublicVideoInlineHost) .gcPublicVideoIntroIcon{font-size:32px!important;margin-bottom:12px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 :is(#publicVideoModal,#gcPublicVideoInlineHost) #gcPublicVideoJoin{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;max-width:100%!important;margin-top:18px!important;padding:10px 18px!important;border:2px solid var(--gc-u-accent)!important;border-radius:12px!important;background:var(--gc-u-card)!important;color:var(--gc-u-text)!important;font:inherit!important;font-weight:700!important;white-space:normal!important;cursor:pointer!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 :is(#publicVideoModal,#gcPublicVideoInlineHost) #gcPublicVideoJoin:disabled{opacity:.55!important;cursor:not-allowed!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 :is(#publicVideoModal,#gcPublicVideoInlineHost) #gcPublicVideoClose{width:40px!important;height:40px!important;border:1px solid var(--gc-u-border)!important;border-radius:10px!important;background:var(--gc-u-card)!important;color:var(--gc-u-text)!important;font-size:22px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 :is(#gcPublicVideoJoin,#gcPublicVideoClose,#profileGiftSendNow,.gcRightTabs button):focus-visible{outline:2px solid var(--gc-u-accent)!important;outline-offset:2px!important} @media(max-width:480px){html[data-gc-theme-tone] body.gcCodyFamiliarV3 :is(#publicVideoModal,#gcPublicVideoInlineHost) .gcPublicVideoIntroBox{margin:12px!important;padding:16px!important}} /* Connected video shares its layout in the modal and the inline host. */ html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcPublicVideoCard .gcPublicVideoGrid:not(.hidden){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))!important;gap:12px!important;padding:16px!important;box-sizing:border-box!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcPublicVideoCard .gcPublicVideoTile{position:relative!important;min-width:0!important;min-height:180px!important;overflow:hidden!important;border:1px solid var(--gc-u-border)!important;border-radius:12px!important;background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important;display:flex!important;flex-direction:column!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcPublicVideoCard .gcPublicVideoPlaceholder{display:grid!important;place-items:center!important;min-height:132px!important;flex:1!important;padding:12px!important;box-sizing:border-box!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcPublicVideoCard .gcPublicVideoPlaceholder img{width:64px!important;height:64px!important;object-fit:cover!important;border-radius:50%!important;border:2px solid var(--gc-u-accent)!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcPublicVideoCard .gcPublicVideoPlaceholder>span{font-size:28px!important;font-weight:700!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcPublicVideoCard .gcPublicVideoTile>video{display:block!important;width:100%!important;aspect-ratio:16/9!important;object-fit:contain!important;background:#080b10!important;max-height:45vh!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcPublicVideoCard .gcPublicVideoTile.hasVideo .gcPublicVideoPlaceholder{display:none!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcPublicVideoCard .gcPublicVideoMeta{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:10px 12px!important;background:var(--gc-u-card)!important;border-top:1px solid var(--gc-u-border)!important;font-size:12px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcPublicVideoCard .gcPublicVideoMeta>span{display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important;min-width:0!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcPublicVideoCard .gcPublicVideoName{overflow-wrap:anywhere!important;color:var(--gc-u-text)!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcPublicVideoCard .gcPublicVideoRank{color:var(--gc-u-muted)!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcPublicVideoCard .gcPublicVideoBadge{font-size:9px!important;font-style:normal!important;padding:3px 5px!important;border:1px solid var(--gc-u-accent)!important;border-radius:5px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcPublicVideoCard .gcPublicVideoControls:not(.hidden), html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcPublicVideoCard .gcPublicVideoMod{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:8px!important;padding:12px!important;background:var(--gc-u-card2)!important;border-top:1px solid var(--gc-u-border)!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcPublicVideoCard :is(.gcPublicVideoControls,.gcPublicVideoMod) button, html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcPublicVideoCard #gcPublicVideoDock{min-height:38px!important;padding:8px 12px!important;border:1px solid var(--gc-u-border)!important;border-radius:9px!important;background:var(--gc-u-card)!important;color:var(--gc-u-text)!important;font:inherit!important;font-size:12px!important;cursor:pointer!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcPublicVideoCard :is(button.off,button.leave,button.danger){border-style:dashed!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcPublicVideoCard .gcPublicVideoStatus{margin-left:auto!important;font-size:12px!important;color:var(--gc-u-muted)!important;overflow-wrap:anywhere!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #gcPublicVideoInlineHost:not(.hidden){flex:0 0 auto!important;min-width:0!important;max-height:46dvh!important;overflow:auto!important;margin:8px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #gcPublicVideoInlineHost>.gcPublicVideoCard{width:100%!important;max-width:100%!important;margin:0!important;border-radius:12px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #gcPublicVideoInlineHost .gcPublicVideoHead{padding:10px 12px!important;gap:8px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #gcPublicVideoInlineHost .gcPublicVideoHead :is(small,p){display:none!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #gcPublicVideoInlineHost .gcPublicVideoHead h3{font-size:15px!important;margin:0!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #gcPublicVideoInlineHost .gcPublicVideoGrid:not(.hidden){display:flex!important;overflow-x:auto!important;gap:10px!important;padding:10px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #gcPublicVideoInlineHost .gcPublicVideoTile{flex:0 0 220px!important;min-height:150px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #gcPublicVideoInlineHost .gcPublicVideoPlaceholder{min-height:100px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcRightTabs{display:grid!important;grid-template-columns:28px repeat(3,minmax(0,1fr)) 28px 28px!important;gap:4px!important;padding:6px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcRightTabs button{min-width:0!important;width:100%!important;padding:6px 3px!important;box-sizing:border-box!important} /* Keep the user-tab glyphs visible when the compact mobile layout hides labels. */ html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcRightTabs button[data-user-tab] .gcUiIcon{display:block!important} /* Mobile public profile: keep level, likes, actions and close controls identical. */ /* Stable chat footer: legacy grid rows could place reply preview over typing/composer. */ html[data-gc-theme-tone] body.gcCodyFamiliarV3 main.chat, html[data-gc-theme-tone] body.gcCodyFamiliarV3 .chat.panel{ display:flex!important; flex-direction:column!important; min-height:0!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 .chat>.messages{ flex:1 1 0!important; min-height:0!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 .chat>:is(.chathead,.gcPublicVideoInlineHost,.replyBar,.typing,.composer){ flex:0 0 auto!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #replyBar.replyBar:not(.hidden){ position:relative!important; inset:auto!important; width:100%!important; max-width:100%!important; min-height:52px!important; margin:0!important; padding:7px 10px!important; overflow:hidden!important; box-sizing:border-box!important; z-index:13!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #replyBar>div{min-width:0!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #replyBar #replyText{ display:block!important; max-width:100%!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } @media (max-width:520px){ html[data-gc-theme-tone] body.gcCodyFamiliarV3 #profileModal :is(.gcCodyProfileStat,.gcCodyProfileTopTools button,.modalClose){ box-sizing:border-box!important; flex:0 0 44px!important; width:44px!important; min-width:44px!important; max-width:44px!important; height:44px!important; min-height:44px!important; max-height:44px!important; margin:0!important; padding:0!important; display:inline-grid!important; place-items:center!important; border-radius:9px!important; line-height:1!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #profileModal .gcCodyProfileStat{ grid-auto-flow:column!important; grid-auto-columns:max-content!important; gap:3px!important; font-size:10px!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #profileModal .gcCodyProfileStats{ top:9px!important; left:9px!important; gap:6px!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #profileModal .gcCodyProfileTopTools{ top:9px!important; right:59px!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #profileModal .modalClose{ top:calc(9px + env(safe-area-inset-top))!important; right:9px!important; } /* Keep the scrolling profile pane, its cards and scrollbar inside one frame. */ html[data-gc-theme-tone] body.gcCodyFamiliarV3 #profileModal :is(.profileModalCard,#profileContent,.gcProfile,.gcProfilePane){ width:100%!important; max-width:100%!important; box-sizing:border-box!important; overflow-x:hidden!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #profileModal .gcProfilePane{ padding-left:8px!important; padding-right:8px!important; scrollbar-gutter:auto!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #profileModal .gcProfilePane .profileInfoRow{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #profileModal .gcProfilePane::-webkit-scrollbar{width:6px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #profileModal .gcProfilePane::-webkit-scrollbar-track{background:transparent!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #profileModal .gcProfilePane::-webkit-scrollbar-thumb{ border:1px solid transparent!important; border-radius:999px!important; background:color-mix(in srgb,var(--gc-u-muted) 72%,transparent)!important; background-clip:padding-box!important; } /* Every public-profile tab remains visible; no clipped final "Meer" tab. */ html[data-gc-theme-tone] body.gcCodyFamiliarV3 #profileModal .gcProfileTabs{ display:grid!important; grid-auto-flow:column!important; grid-auto-columns:minmax(0,1fr)!important; overflow:hidden!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #profileModal .gcProfileTabs button{ width:auto!important; min-width:0!important; max-width:none!important; padding:0 2px!important; font-size:8.5px!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } /* Compact deferred YouTube cards without loading extra players. */ html[data-gc-theme-tone] body.gcCodyFamiliarV3 .mediaEmbed.gcYouTubeDeferred{ width:min(320px,100%)!important; margin:6px auto 0!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcYouTubePlay{ width:46px!important; height:34px!important; font-size:17px!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcYouTubeLoad strong{ bottom:6px!important; font-size:9.5px!important; } } /* Stronger, clearer glyphs in the compact chatter toolbar. */ html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcRightTabs button .gcUiIcon{ width:20px!important; height:20px!important; min-width:20px!important; opacity:1!important; filter:drop-shadow(0 1px 0 color-mix(in srgb,var(--gc-u-text) 34%,transparent))!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcRightTabs button .gcUiIcon :is(path,circle,rect,line,polyline,polygon){ stroke-width:1.85px!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcRightTabs .gcRightTabLabel{font-size:11px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #liveStats{background:var(--gc-u-card)!important;color:var(--gc-u-text)!important;border:1px solid var(--gc-u-border)!important;border-radius:10px!important;padding:8px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #liveStats>div{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #liveStats>div>span{min-width:0!important;background:var(--gc-u-card2)!important;color:var(--gc-u-muted)!important;border:1px solid var(--gc-u-border)!important;border-radius:8px!important;padding:8px 3px!important;text-align:center!important;font-size:10px!important;line-height:1.5!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #liveStats :is(strong,small){color:inherit!important;-webkit-text-fill-color:currentColor!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #liveStats strong{display:block!important;color:var(--gc-u-text)!important;font-size:14px!important} /* 2026-09-17: room chooser and own-profile admin card follow every theme. */ html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel{ background:color-mix(in srgb,var(--gc-u-accent) 3%,var(--gc-u-card))!important; color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .roomAsideHead{ min-height:54px!important;padding:9px 12px!important;box-sizing:border-box!important; width:calc(100% + 11px)!important;margin:-11px 0 9px -11px!important; background:color-mix(in srgb,var(--gc-u-accent) 7%,var(--gc-u-card2))!important; color:var(--gc-u-text)!important;border-bottom:1px solid var(--gc-u-border)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .roomAsideHead small{ color:var(--gc-u-muted)!important;font-size:9px!important;letter-spacing:.09em!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .roomAsideHead h3{ margin:1px 0 0!important;color:var(--gc-u-text)!important;font-size:14px!important;line-height:1.15!important;text-shadow:none!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .roomAsideHead p{display:none!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .roomAsideHead .mobileClose{ width:36px!important;height:36px!important;min-width:36px!important;padding:0!important; background:var(--gc-u-card)!important;color:var(--gc-u-text)!important; border:1px solid var(--gc-u-border)!important;border-radius:10px!important;box-shadow:none!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel #rooms{padding:10px 10px 18px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .gcRoomGroup{margin:0 0 6px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .gcRoomGroup:last-child{margin-bottom:0!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .gcRoomGroupTitle{ display:none!important;margin:0!important;padding:0!important;min-height:0!important;height:0!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .gcRoomGroupTitle>span{ color:color-mix(in srgb,var(--gc-u-accent) 66%,var(--gc-u-text))!important; font-size:9px!important;letter-spacing:.11em!important;text-shadow:none!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .roomShell{ margin-bottom:7px!important;overflow:hidden!important; background:color-mix(in srgb,var(--gc-u-accent) 5%,var(--gc-u-card2))!important; border:1px solid color-mix(in srgb,var(--gc-u-accent) 30%,var(--gc-u-border))!important; border-radius:12px!important;box-shadow:0 4px 14px color-mix(in srgb,#000 12%,transparent)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .roomShell.active{ background:color-mix(in srgb,var(--gc-u-accent) 11%,var(--gc-u-card2))!important; border-color:var(--gc-u-accent)!important;box-shadow:inset 3px 0 0 var(--gc-u-accent),0 4px 14px color-mix(in srgb,#000 12%,transparent)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .roomShell .room.roomSelect{ grid-template-columns:38px minmax(0,1fr) 31px!important;gap:8px!important; min-height:56px!important;padding:7px 9px!important;background:transparent!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .roomIcon{ width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important; border-radius:10px!important;background:color-mix(in srgb,var(--gc-u-accent) 13%,var(--gc-u-card))!important; color:var(--gc-u-text)!important;border:1px solid color-mix(in srgb,var(--gc-u-accent) 38%,var(--gc-u-border))!important; box-shadow:none!important;font-size:17px!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .roomCopy .roomEyebrow{ margin-bottom:2px!important;color:color-mix(in srgb,var(--gc-u-accent) 68%,var(--gc-u-text))!important;font-size:8.5px!important;line-height:1.15!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .roomCopy strong{color:var(--gc-u-text)!important;font-size:12.5px!important;line-height:1.12!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .roomCopy>span:not(.roomAccessTag){margin-top:2px!important;color:color-mix(in srgb,var(--gc-u-muted) 76%,var(--gc-u-text))!important;font-size:9.2px!important;line-height:1.2!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .roomAccessTag{ background:color-mix(in srgb,var(--gc-u-accent) 15%,var(--gc-u-card))!important; color:var(--gc-u-text)!important;border-color:color-mix(in srgb,var(--gc-u-accent) 48%,var(--gc-u-border))!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .roomPeopleCount{ min-width:30px!important;height:22px!important;background:var(--gc-u-card)!important; color:var(--gc-u-text)!important;border:1px solid var(--gc-u-border)!important;box-shadow:none!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .roomGameStrip{ grid-template-columns:repeat(6,24px)!important;gap:5px!important;padding:7px 8px!important; background:color-mix(in srgb,var(--gc-u-accent) 3%,var(--gc-u-card))!important; border-top:1px solid var(--gc-u-border)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .roomGameStrip span{ width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important; background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important; border:1px solid var(--gc-u-border)!important;border-radius:8px!important;box-shadow:none!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .roomGameActions{ display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:4px!important;padding:0 7px 7px!important;background:color-mix(in srgb,var(--gc-u-accent) 3%,var(--gc-u-card))!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .roomGameActions button{ height:29px!important;min-height:29px!important;background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important; border:1px solid var(--gc-u-border)!important;border-radius:9px!important;box-shadow:none!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .roomGameActions button:first-child{ background:color-mix(in srgb,var(--gc-u-accent) 18%,var(--gc-u-card2))!important; color:var(--gc-u-text)!important;border-color:var(--gc-u-accent)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel :is(.roomSelect,.roomGameActions button,.mobileClose):focus-visible{ outline:2px solid var(--gc-u-accent)!important;outline-offset:-2px!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #gcProfileMenu #profileMenuAdminGroup{ background:color-mix(in srgb,var(--gc-u-accent) 4%,var(--gc-u-card))!important; color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #gcProfileMenu #profileMenuAdmin{ min-height:62px!important;background:var(--gc-u-card2)!important;color:var(--gc-u-text)!important; border:1px solid var(--gc-u-border)!important;border-radius:11px!important;box-shadow:none!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #gcProfileMenu #profileMenuAdmin:is(:hover,:focus-visible){ background:color-mix(in srgb,var(--gc-u-accent) 12%,var(--gc-u-card2))!important;border-color:var(--gc-u-accent)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #gcProfileMenu #profileMenuAdmin .gcProfileMenuIcon{ background:color-mix(in srgb,var(--gc-u-accent) 12%,var(--gc-u-card))!important; color:var(--gc-u-text)!important;border-color:var(--gc-u-border)!important;box-shadow:none!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 #gcProfileMenu #profileMenuAdmin .gcProfileMenuCopy b{color:var(--gc-u-text)!important;text-shadow:none!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #gcProfileMenu #profileMenuAdmin .gcProfileMenuCopy small{color:color-mix(in srgb,var(--gc-u-muted) 76%,var(--gc-u-text))!important;opacity:1!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #gcProfileMenu #profileMenuAdmin>i{color:var(--gc-u-muted)!important} /* Empty/cleared-room state: compact and fully themed instead of legacy blue. */ html[data-gc-theme-tone] body.gcCodyFamiliarV3.gcCodyStructureV2 #messages>.chatWelcome{ width:min(520px,calc(100% - 28px))!important; height:auto!important; min-height:150px!important; max-width:520px!important; margin:auto!important; padding:24px 18px!important; box-sizing:border-box!important; border:1px solid color-mix(in srgb,var(--gc-u-accent) 42%,var(--gc-u-border))!important; border-radius:16px!important; background:linear-gradient(145deg,color-mix(in srgb,var(--gc-u-accent) 10%,var(--gc-u-card2)),var(--gc-u-card))!important; color:var(--gc-u-muted)!important; box-shadow:0 12px 32px color-mix(in srgb,var(--gc-u-shadow) 55%,transparent)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3.gcCodyStructureV2 #messages>.chatWelcome strong{color:var(--gc-u-text)!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3.gcCodyStructureV2 #messages>.chatWelcome small{color:var(--gc-u-muted)!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3.gcCodyStructureV2 #messages>.chatWelcome>span{color:var(--gc-u-accent)!important;filter:none!important} /* Userlist controls need visible breathing room on narrow phones. */ html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcRightTabs{ column-gap:7px!important; padding:7px 6px!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 .gcRightTabs button{ min-height:38px!important; border-radius:9px!important; } @media(max-width:430px){ html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel #rooms{padding:12px 8px calc(18px + env(safe-area-inset-bottom,0px))!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .gcRoomGroup{margin-bottom:15px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .roomGameStrip{grid-template-columns:repeat(6,26px)!important;gap:5px!important} html[data-gc-theme-tone] body.gcCodyFamiliarV3 #roomsPanel .roomGameStrip span{width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important} } /* 0.74.10 — mobile modal safe-area and viewport guard. */ @media(max-width:700px){ body.gcCodyFamiliarV3 #notificationsModal{padding:4px!important;align-items:center!important;box-sizing:border-box!important} body.gcCodyFamiliarV3 #notificationsModal>.notificationCard{ width:calc(100vw - 8px)!important;max-width:calc(100vw - 8px)!important; height:auto!important;max-height:calc(100dvh - 8px)!important;margin:0!important; inset:auto!important;transform:none!important;box-sizing:border-box!important } } /* 0.74.10 final cascade: all dialog shells use the selected palette. */ html[data-gc-theme-tone] body.gcCodyFamiliarV3 [id$="Modal"] :is(.modalCard,.pmCard,.inboxCard){ background:var(--gc-u-panel)!important; background-image:none!important; color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; box-shadow:0 24px 70px color-mix(in srgb,var(--gc-u-bg) 72%,transparent)!important; } html[data-gc-theme-tone] body.gcCodyFamiliarV3 [id$="Modal"] :is(.modalCard,.pmCard,.inboxCard) > :is(.modalTitle,.modalHead){ color:var(--gc-u-text)!important; border-color:var(--gc-u-border)!important; }