.cb-live-web-visit-card{ cursor:pointer; } .cb-live-web-visit-card .task{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .cb-live-web-visit-copy{ min-width:0; display:flex; flex-direction:column; gap:3px; } .cb-live-web-visit-title, .cb-live-web-visit-meta, .cb-live-web-visit-reward{ font:inherit; } .cb-live-web-visit-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cb-live-web-visit-meta{ opacity:.68; font-size:.86em; } .cb-live-web-visit-reward{ flex:0 0 auto; white-space:nowrap; } .cb-live-web-visit-card[data-busy="1"]{ pointer-events:none; opacity:.72; } /* Release 224: never show a placeholder latest-completion card. */ a.cb-latest-activity[hidden]{display:none!important} /* Release 244: live tasks own their click flow; the legacy task dialog is not used. */ .cb-live-task-wrapper{cursor:pointer;position:relative} .cb-live-task-wrapper[data-busy="1"]{pointer-events:none;opacity:.72} .cb-task-direct-reward{display:inline-flex!important;align-items:center;gap:5px;white-space:nowrap} .cb-task-direct-reward .cb-task-reward-coin{width:18px;height:18px;object-fit:contain;flex:0 0 auto} .cb-live-task-error{margin:6px 4px 0;padding:7px 10px;border-radius:10px;background:rgba(255,85,85,.12);font-size:12px;line-height:1.3;text-align:center} /* Release 248: dedicated live task list; no legacy placeholder cards. */ .cb-live-task-list{display:flex;flex-direction:column;width:100%;min-width:0} /* * Release 254 — lightweight task stream. * * Individual task cards keep their existing design. * The outer list wrapper is visually removed so tasks stand on their own. */ .cb-task-stream-flat { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; padding-left: 0 !important; padding-right: 0 !important; overflow: visible !important; } /* Avoid spending layout/paint time on task cards well below the viewport. */ .cb-task-stream-flat .cb-live-task { content-visibility: auto; contain-intrinsic-size: auto 120px; } /* * Empty-card design intentionally retained. * Nothing in the runtime creates .cb-task-empty-state in Release 254. */ /* * Release 258 * Live task interaction: * task card -> bottom sheet -> explicit task launch. */ html.cb-task-sheet-open, html.cb-task-sheet-open body { overflow:hidden !important; } .cb-live-task-sheet { position:fixed; inset:0; z-index:2147482000; display:flex; align-items:flex-end; justify-content:center; pointer-events:none; visibility:hidden; } .cb-live-task-sheet.is-open { pointer-events:auto; visibility:visible; } .cb-live-task-sheet__backdrop { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; background:rgba(3,6,20,.68); opacity:0; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); transition:opacity .24s ease; } .cb-live-task-sheet.is-open .cb-live-task-sheet__backdrop { opacity:1; } .cb-live-task-sheet__panel { position:relative; z-index:1; width:min(100%,560px); max-height:min(82vh,720px); margin:0; padding:9px 18px calc(18px + env(safe-area-inset-bottom)); overflow:auto; border:1px solid rgba(201,207,255,.12); border-bottom:0; border-radius:25px 25px 0 0; background: radial-gradient( 90% 70% at 100% 0%, rgba(118,108,255,.18), transparent 58% ), linear-gradient( 155deg, rgba(31,34,71,.99), rgba(17,20,49,.995) ); box-shadow: 0 -22px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.055); transform:translate3d(0,105%,0); transition: transform .30s cubic-bezier(.2,.82,.25,1); } .cb-live-task-sheet.is-open .cb-live-task-sheet__panel { transform:translate3d(0,0,0); } .cb-live-task-sheet__handle { width:42px; height:4px; margin:1px auto 15px; border-radius:999px; background:rgba(220,224,255,.28); } .cb-live-task-sheet__top { display:flex; align-items:center; justify-content:space-between; gap:10px; } .cb-live-task-sheet__platform { display:inline-flex; align-items:center; gap:7px; min-height:28px; padding:5px 10px; border:1px solid rgba(148,157,255,.15); border-radius:999px; background:rgba(130,139,255,.08); color:#dfe2f7; font-size:11px; font-weight:700; } .cb-live-task-sheet__platform > span:first-child { color:#aeb5ff; font-weight:800; } .cb-live-task-sheet__close { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid rgba(216,220,255,.10); border-radius:50%; background:rgba(255,255,255,.045); color:#e9ebfa; font-size:23px; line-height:1; cursor:pointer; } .cb-live-task-sheet__title { margin:17px 0 0; color:#fafaff; font-size:21px; line-height:1.24; letter-spacing:-.35px; } .cb-live-task-sheet__description { margin:8px 0 0; color:#c8cde4; font-size:13.5px; line-height:1.52; } .cb-live-task-sheet__meta { display:flex; align-items:center; gap:8px; margin-top:16px; padding:12px 0; border-top:1px solid rgba(208,212,255,.07); border-bottom:1px solid rgba(208,212,255,.07); } .cb-live-task-sheet__action { min-width:0; color:#d0d4e9; font-size:12px; font-weight:600; } .cb-live-task-sheet__reward { display:flex; align-items:center; gap:6px; margin-left:auto; padding:6px 9px; border:1px solid rgba(255,200,86,.14); border-radius:11px; background:rgba(214,157,47,.09); color:#fff0c1; font-size:12px; font-weight:800; white-space:nowrap; } .cb-live-task-sheet__reward img { width:21px; height:21px; object-fit:contain; } .cb-live-task-sheet__error { margin-top:12px; padding:9px 11px; border:1px solid rgba(255,99,99,.14); border-radius:10px; background:rgba(255,77,77,.08); color:#ffc5c5; font-size:12px; line-height:1.4; } .cb-live-task-sheet__launch { width:100%; min-height:49px; margin-top:16px; border:1px solid rgba(158,165,255,.24); border-radius:14px; background: linear-gradient( 135deg, rgba(117,102,255,.96), rgba(83,113,242,.96) ); box-shadow: 0 10px 25px rgba(61,67,190,.25), inset 0 1px 0 rgba(255,255,255,.15); color:#fff; font-size:14px; font-weight:800; cursor:pointer; } .cb-live-task-sheet__launch:disabled { opacity:.58; cursor:wait; } .cb-live-task-sheet__actions { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(104px,.6fr); gap:10px; margin-top:16px; } .cb-live-task-sheet__actions .cb-live-task-sheet__launch { margin-top:0; } .cb-live-task-sheet__done { width:100%; min-height:49px; border:0; border-radius:10px; background:linear-gradient(90deg,#12AE6C -6.12%,#4CCD4A 52.39%,#12AE6C 106.23%); color:#fff; font-size:14px; font-weight:800; cursor:pointer; } .cb-live-task-sheet__done:hover, .cb-live-task-sheet__done:focus { box-shadow:0 -0.86px 6px rgba(75,255,223,.25),0 .86px 6px rgba(75,255,223,.8),inset 0 -1.72px 4.3px rgba(109,255,141,.3),inset 0 1.72px 4.128px rgba(109,255,141,.5),inset 0 -12.9px 17.544px rgba(17,124,111,.8); } .cb-live-task-sheet__done:disabled { opacity:.42; cursor:not-allowed; box-shadow:none; } .cb-live-task-sheet__status { margin-top:12px; padding:9px 11px; border:1px solid rgba(133,143,255,.16); border-radius:10px; background:rgba(111,120,255,.08); color:#d8dcff; font-size:12px; line-height:1.4; } .cb-live-task-sheet__status[data-state="success"] { border-color:rgba(76,205,74,.22); background:rgba(18,174,108,.09); color:#bff5c9; } .cb-live-task-sheet__status[data-state="error"] { border-color:rgba(255,99,99,.14); background:rgba(255,77,77,.08); color:#ffc5c5; } .cb-live-task-sheet__connect { width:100%; min-height:42px; margin-top:10px; border:1px solid rgba(158,165,255,.18); border-radius:12px; background:rgba(255,255,255,.055); color:#e7e9ff; font-size:13px; font-weight:800; cursor:pointer; } .cb-live-task-sheet__player { margin-top:14px; overflow:hidden; border:1px solid rgba(201,207,255,.12); border-radius:15px; background:#090b16; } .cb-live-task-sheet__player[hidden] { display:none!important; } .cb-sheet-content-watch__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08); color:#eef0ff; font-size:12px; } .cb-sheet-content-watch__timer { font-size:18px; font-weight:900; font-variant-numeric:tabular-nums; } .cb-sheet-content-watch__player { width:100%; height:min(42vh,300px); min-height:220px; background:#05060c; } .cb-sheet-content-watch__player iframe { width:100%!important; height:100%!important; border:0; } .cb-sheet-content-watch__notice { padding:9px 12px; border-top:1px solid rgba(255,255,255,.08); color:#cbd0ed; font-size:12px; } @media (max-width:380px) { .cb-live-task-sheet__actions { grid-template-columns:1fr; } } @media (min-width:700px) { .cb-live-task-sheet__panel { margin-bottom:18px; border-bottom:1px solid rgba(201,207,255,.12); border-radius:25px; } } /* * Release 259 * Live web-visit information inside the existing #task-popup. * This does not create another modal. */ #task-popup .cb-live-modal-info { display:flex; flex-direction:column; width:100%; flex:0 0 100%; box-sizing:border-box; gap:7px; margin:4px 0 10px; } #task-popup .cb-live-modal-copy { color:#f4f6ff; font-size:14px; font-weight:650; line-height:1.42; overflow-wrap:anywhere; } #task-popup .cb-live-modal-status { color:#aeb5cf; font-size:12px; line-height:1.4; } #task-popup .cb-live-modal-status[data-state="working"] { color:#d7dcf2; } #task-popup .cb-live-modal-status[data-state="success"] { color:#75e2a6; } #task-popup .cb-live-modal-status[data-state="error"] { color:#ff9a9a; } #task-popup .cb-live-modal-timer { display:inline-flex; align-items:center; align-self:flex-start; min-height:27px; padding:4px 9px; border:1px solid rgba(145,155,255,.16); border-radius:999px; color:#eef0ff; background:rgba(112,120,220,.08); font-size:11px; font-weight:700; letter-spacing:.15px; } /* * Release 260 — common active-task overlay. * Intentionally transparent: this is task state, not another modal. */ html.cb-task-progress-active, html.cb-task-progress-active body { overflow:hidden !important; } .cb-task-progress-layer { position:fixed !important; inset:0 !important; z-index:2147483000 !important; display:flex !important; align-items:flex-end !important; justify-content:center !important; box-sizing:border-box !important; padding: 18px max(14px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)) !important; /* * Almost completely transparent. * Enough tint to tell the user ClickBee is still tracking the task. */ background:rgba(5,8,22,.12) !important; -webkit-backdrop-filter:blur(.7px) !important; backdrop-filter:blur(.7px) !important; pointer-events:auto !important; } .cb-task-progress-layer[hidden] { display:none !important; } .cb-task-progress-layer__footer { width:min(100%,520px) !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; gap:10px 14px !important; align-items:center !important; padding:12px !important; border:1px solid rgba(255,255,255,.12) !important; border-radius:16px !important; background:rgba(13,17,37,.88) !important; box-shadow: 0 18px 50px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.055) !important; } .cb-task-progress-layer__copy { min-width:0 !important; display:flex !important; flex-direction:column !important; gap:3px !important; } .cb-task-progress-layer__copy strong { color:#fff !important; font-size:13px !important; line-height:1.2 !important; } .cb-task-progress-layer__copy span { color:#c8cee3 !important; font-size:11px !important; line-height:1.35 !important; } .cb-task-progress-layer__timer { min-width:62px !important; color:#fff !important; font-size:16px !important; font-weight:800 !important; line-height:1 !important; text-align:center !important; font-variant-numeric:tabular-nums !important; } .cb-task-progress-layer__actions { grid-column:1 / -1 !important; display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; } .cb-task-progress-layer__actions .btn { min-height:40px !important; margin:0 !important; } @media (max-width:520px) { .cb-task-progress-layer { padding:10px 10px max(10px,env(safe-area-inset-bottom)) !important; } .cb-task-progress-layer__footer { border-radius:14px !important; } } /* Release 292 — premium task sheet content hierarchy. */ #task-popup .task-focus-panel{ position:relative!important; } #task-popup .task-focus-panel>.task-mission{ min-height:24px!important; } #task-popup .cb-task-player-reward{ position:absolute!important; z-index:3!important; top:18px!important; right:18px!important; display:flex!important; align-items:center!important; gap:5px!important; margin:0!important; padding:5px 8px!important; border:1px solid rgba(255,201,87,.14)!important; border-radius:999px!important; color:#fff0c7!important; background:rgba(28,31,65,.72)!important; box-shadow:0 7px 20px rgba(0,0,0,.16)!important; font-size:11px!important; font-weight:750!important; line-height:1!important; pointer-events:none!important; } #task-popup .cb-task-player-reward img{ width:17px!important; height:17px!important; object-fit:contain!important; } #task-popup .cb-premium-task-ad-text{ margin:12px 0 0!important; padding:0!important; color:#d7dbee!important; font-size:13px!important; font-weight:450!important; line-height:1.52!important; letter-spacing:-.04px!important; overflow-wrap:anywhere!important; } #task-popup .cb-live-modal-status:not([hidden]) + .cb-premium-task-ad-text{ margin-top:8px!important; } #task-popup .task-focus-panel>.gradient-button{ margin-top:11px!important; } @media(max-width:390px){ #task-popup .cb-task-player-reward{top:15px!important;right:15px!important;} #task-popup .cb-premium-task-ad-text{font-size:12.5px!important;line-height:1.48!important;} } /* TASK_POPUP_PREMIUM_MESSAGE_STYLE_346 */ /* * Ad message only. * No modal redesign and no task-flow changes. */ #task-popup .cb-premium-task-ad-text{ position:relative; box-sizing:border-box; display:block; width:100%; /* * Do NOT force a tall empty box. * Six-line ads naturally create their own height. */ min-height:0!important; max-height:none!important; margin:14px 0 0!important; padding:18px 20px 19px!important; border: 1px solid rgba(132,82,205,.27); border-bottom-color: rgba(108,58,182,.40); border-radius:18px; /* * Bright white surface with a restrained ClickBee purple tint. * No pseudo-element sits over the text. */ background: radial-gradient( circle at 8% 0%, rgba(173,125,239,.14), transparent 43% ), radial-gradient( circle at 96% 100%, rgba(123,70,202,.08), transparent 42% ), linear-gradient( 145deg, #ffffff 0%, #fefcff 48%, #f8f3ff 100% )!important; color:#251a33!important; opacity:1!important; font-family:inherit; font-size:1rem; font-weight:650; line-height:1.56; letter-spacing:.004em; text-align:left; white-space:pre-wrap; overflow:visible!important; overflow-wrap:anywhere; word-break:normal; /* * Raised 3D card: * bright top edge, subtle purple lower depth and soft floor shadow. */ box-shadow: inset 0 2px 0 rgba(255,255,255,1), inset 0 -4px 8px rgba(102,55,170,.065), 0 2px 0 rgba(90,45,155,.10), 0 7px 13px rgba(44,22,72,.11), 0 16px 29px rgba(47,23,79,.15), 0 29px 48px rgba(49,24,84,.10); transform:translate3d(0,-1px,0); } /* * Completely disable the old overlay layers. * They were reducing readability on the white card. */ #task-popup .cb-premium-task-ad-text::before, #task-popup .cb-premium-task-ad-text::after{ content:none!important; display:none!important; } /* * Only advertiser-entered emojis. * No ClickBee-created emoji. */ #task-popup .cb-premium-ad-user-emoji{ display:inline-block; color:initial; font-size:1.12em; line-height:1; vertical-align:-.04em; transform-origin:50% 74%; filter: drop-shadow( 0 2px 3px rgba(79,41,133,.18) ); animation: cb-premium-ad-user-emoji-346 3.1s cubic-bezier(.42,0,.24,1) infinite; animation-delay: var(--cb-emoji-delay,0ms); } @keyframes cb-premium-ad-user-emoji-346{ 0%,100%{ transform: translate3d(0,0,0) rotate(0deg) scale(1); } 28%{ transform: translate3d(0,-3px,0) rotate(-3deg) scale(1.075); } 50%{ transform: translate3d(0,-1px,0) rotate(2deg) scale(1.035); } 70%{ transform: translate3d(0,-2px,0) rotate(-1deg) scale(1.055); } } /* * Existing status/error line directly below ad copy. */ #task-popup .cb-premium-task-status-below-ad{ display:block!important; box-sizing:border-box; width:100%; min-height:1rem; margin:9px 0 10px!important; padding:0 4px!important; border:0!important; background:transparent!important; box-shadow:none!important; color:#ff6578!important; font-size:.76rem; font-weight:650; line-height:1.32; letter-spacing:.003em; text-align:center; } /* ---------------------------------------------------------- PHONE / NARROW SCREEN ---------------------------------------------------------- */ @media(max-width:480px){ #task-popup .cb-premium-task-ad-text{ margin-top:12px!important; padding: 16px 17px 17px!important; border-radius:17px; font-size:.95rem; line-height:1.50; } #task-popup .cb-premium-task-status-below-ad{ margin: 8px 0 9px!important; } } /* ---------------------------------------------------------- HIGH ZOOM / SHORT VIEWPORT Browser zoom reduces the CSS viewport height. The existing mobile sheet is capped at 80dvh; give this specific task sheet more usable height and compact only the ad-message area. ---------------------------------------------------------- */ @media(max-height:760px){ #task-popup[open] .dialog-content{ height:auto!important; max-height: min(93dvh,93svh)!important; overflow-y:visible!important; padding-bottom: max( 16px, env(safe-area-inset-bottom) )!important; } #task-popup .cb-premium-task-ad-text{ min-height:0!important; margin-top:10px!important; padding: 14px 16px 15px!important; border-radius:16px; font-size:.92rem; line-height:1.44; box-shadow: inset 0 2px 0 rgba(255,255,255,1), inset 0 -3px 6px rgba(102,55,170,.055), 0 5px 10px rgba(44,22,72,.10), 0 13px 24px rgba(47,23,79,.13); } #task-popup .cb-premium-task-status-below-ad{ min-height:.9rem; margin: 7px 0 8px!important; font-size:.72rem; line-height:1.25; } } /* Very short effective viewport: 175–200% zoom / small phones. */ @media(max-height:620px){ #task-popup[open] .dialog-content{ max-height: min(96dvh,96svh)!important; padding-bottom: max( 12px, env(safe-area-inset-bottom) )!important; } #task-popup .cb-premium-task-ad-text{ margin-top:8px!important; padding: 11px 14px 12px!important; border-radius:15px; font-size:.88rem; line-height:1.38; } #task-popup .cb-premium-task-status-below-ad{ margin: 5px 0 6px!important; font-size:.69rem; } } @media(prefers-reduced-motion:reduce){ #task-popup .cb-premium-ad-user-emoji{ animation:none!important; transform:none!important; } } /* TASK_POPUP_FIVE_LINE_MESSAGE_347 */ /* * Mission instruction: * smaller, tighter and no fake blank line underneath. */ /* * The normal live popup deliberately empties .task-content. * When it really is empty, it must occupy ZERO vertical space. * * Content Watch is unaffected because its player node makes * .task-content non-empty. */ #task-popup .task-focus-panel .task-content:empty{ display:none!important; height:0!important; min-height:0!important; max-height:0!important; margin:0!important; padding:0!important; border:0!important; } /* * Advertiser copy: * reserve exactly five lines worth of reading space. * * Short copy leaves clean empty space underneath. * Longer copy can naturally grow beyond five lines. */ #task-popup .cb-premium-task-ad-text{ min-height: calc(5lh + 36px)!important; margin-top: 12px!important; padding: 18px 20px!important; line-height: 1.50!important; } /* Narrow phones */ @media(max-width:480px){ #task-popup .cb-premium-task-ad-text{ min-height: calc(5lh + 30px)!important; margin-top: 10px!important; padding: 15px!important; line-height: 1.46!important; } } /* * Short viewport / browser zoom. * Still reserve five lines, but scale the line box and padding * instead of creating a giant fixed-height card. */ @media(max-height:760px){ #task-popup .cb-premium-task-ad-text{ min-height: calc(5lh + 26px)!important; margin-top: 8px!important; padding: 13px 15px!important; font-size: .90rem!important; line-height: 1.40!important; } } @media(max-height:620px){ #task-popup .cb-premium-task-ad-text{ min-height: calc(5lh + 22px)!important; margin-top: 7px!important; padding: 11px 13px!important; font-size: .86rem!important; line-height: 1.34!important; } } /* TASK_MISSION_INSTRUCTION_RESTORE_348 * * No task-mission override here. * The site's original mission instruction CSS is now back in control. * Advertiser message styling remains unchanged. */ /* TASK_POPUP_RESPONSIVE_PREMIUM_349 * * Responsive scaling only. * * Small phones retain the existing compact five-line treatment. * Larger usable viewports progressively receive: * large phone -> 7 lines * small tablet -> 8 lines * tablet -> 9 lines * large tablet / desktop -> 10 lines * * Browser zoom naturally reduces CSS viewport dimensions, so the * layout automatically falls back to smaller tiers. */ /* ---------------------------------------------------------- FLUID BUTTON TYPOGRAPHY Text labels remain exactly what the task runtime provides. ---------------------------------------------------------- */ #task-popup .task-focus-panel > .gradient-button, #task-popup .dialog-content > .d-flex.g-2.mt-2 > .btn{ font-size: clamp( .88rem, calc(.79rem + .24vw), 1.08rem )!important; line-height:1.2!important; padding-left: clamp(14px,2.5vw,24px)!important; padding-right: clamp(14px,2.5vw,24px)!important; } /* ---------------------------------------------------------- LARGE PHONE 7-line advertiser field ---------------------------------------------------------- */ @media (min-width:560px) and (min-height:720px){ #task-popup[open]{ width: min( 640px, calc(100vw - 24px) )!important; max-width: 640px!important; } #task-popup[open] .dialog-content{ max-height: min(92dvh,92svh)!important; } #task-popup .cb-premium-task-ad-text{ min-height: calc(7lh + 38px)!important; padding: 19px 22px!important; font-size: 1.02rem!important; line-height: 1.52!important; border-radius: 19px!important; } #task-popup .task-focus-panel > .gradient-button, #task-popup .dialog-content > .d-flex.g-2.mt-2 > .btn{ min-height: 48px!important; font-size: .96rem!important; } } /* ---------------------------------------------------------- SMALL / PORTRAIT TABLET 8-line advertiser field ---------------------------------------------------------- */ @media (min-width:700px) and (min-height:780px){ #task-popup[open]{ width: min( 690px, calc(100vw - 40px) )!important; max-width: 690px!important; } #task-popup .dialog-content{ padding-left: 24px!important; padding-right: 24px!important; } #task-popup .cb-premium-task-ad-text{ min-height: calc(8lh + 42px)!important; padding: 21px 24px!important; font-size: 1.07rem!important; line-height: 1.55!important; border-radius: 20px!important; } #task-popup .task-focus-panel > .gradient-button, #task-popup .dialog-content > .d-flex.g-2.mt-2 > .btn{ min-height: 50px!important; font-size: 1rem!important; } } /* ---------------------------------------------------------- TABLET / SMALL DESKTOP 9-line advertiser field ---------------------------------------------------------- */ @media (min-width:860px) and (min-height:820px){ #task-popup[open]{ width: min( 760px, calc(100vw - 64px) )!important; max-width: 760px!important; } #task-popup .dialog-content{ padding-left: 28px!important; padding-right: 28px!important; } #task-popup .task-focus-panel{ padding-left: 26px!important; padding-right: 26px!important; } #task-popup .cb-premium-task-ad-text{ min-height: calc(9lh + 46px)!important; padding: 23px 27px!important; font-size: 1.12rem!important; line-height: 1.57!important; border-radius: 22px!important; box-shadow: inset 0 2px 0 rgba(255,255,255,1), inset 0 -4px 9px rgba(102,55,170,.065), 0 3px 5px rgba(43,22,70,.07), 0 11px 21px rgba(43,22,70,.12), 0 26px 48px rgba(44,22,74,.15), 0 42px 72px rgba(47,22,82,.11)!important; } #task-popup .task-focus-panel > .gradient-button, #task-popup .dialog-content > .d-flex.g-2.mt-2 > .btn{ min-height: 52px!important; font-size: 1.04rem!important; border-radius: 14px!important; } } /* ---------------------------------------------------------- LARGE TABLET / DESKTOP 10-line advertiser field ---------------------------------------------------------- */ @media (min-width:1100px) and (min-height:900px){ #task-popup[open]{ width: min( 820px, calc(100vw - 80px) )!important; max-width: 820px!important; } #task-popup .dialog-content{ padding-left: 32px!important; padding-right: 32px!important; } #task-popup .task-focus-panel{ padding-left: 30px!important; padding-right: 30px!important; } #task-popup .cb-premium-task-ad-text{ min-height: calc(10lh + 50px)!important; padding: 25px 30px!important; font-size: 1.17rem!important; line-height: 1.60!important; letter-spacing: .006em!important; border-radius: 23px!important; } #task-popup .task-focus-panel > .gradient-button, #task-popup .dialog-content > .d-flex.g-2.mt-2 > .btn{ min-height: 54px!important; font-size: 1.08rem!important; } } /* ---------------------------------------------------------- VERY LARGE DISPLAYS Do not keep growing forever. ---------------------------------------------------------- */ @media (min-width:1500px) and (min-height:950px){ #task-popup[open]{ width: min( 860px, calc(100vw - 96px) )!important; max-width: 860px!important; } #task-popup .cb-premium-task-ad-text{ font-size: 1.20rem!important; } } /* ---------------------------------------------------------- SHORT VIEWPORT SAFETY Important for browser zoom and landscape devices. Width alone must never force the large layout. ---------------------------------------------------------- */ @media(max-height:719px){ #task-popup[open]{ max-width: min(576px,100%)!important; } #task-popup .cb-premium-task-ad-text{ /* * Existing v347/v348 compact five-line sizing remains the * controlling layout here. */ font-size: min(.92rem,4vw)!important; } #task-popup .task-focus-panel > .gradient-button, #task-popup .dialog-content > .d-flex.g-2.mt-2 > .btn{ min-height: 42px!important; font-size: .84rem!important; } } @media(prefers-reduced-motion:reduce){ #task-popup .cb-premium-ad-user-emoji{ animation:none!important; } } /* * TASK_POPUP_MOTION_STYLE_359 * * Interaction-only styles. * Existing sheet appearance is preserved. */ @media(max-width:768px){ /* * Pull-up expanded state. */ #task-popup.cb-task-sheet-expanded[open]{ height:min(94dvh,94svh)!important; max-height:min(94dvh,94svh)!important; } #task-popup.cb-task-sheet-expanded[open] .dialog-content{ height:100%!important; max-height:100%!important; min-height:0!important; overflow-y:auto!important; overscroll-behavior:contain!important; } /* * Existing handle pressed feedback. * No shape/color/layout redesign. */ #task-popup::before{ transition: scale .11s ease, opacity .11s ease, filter .11s ease!important; transform-origin:center!important; } #task-popup.cb-task-handle-pressed::before{ scale:.88; opacity:.64!important; filter:brightness(.84); } #task-popup.cb-task-sheet-dragging{ will-change:transform; } } @media(prefers-reduced-motion:reduce){ #task-popup::before{ transition:none!important; } } /* * TASK_SHEET_LAYOUT_360 * * Expanded mobile task sheet: * * - dialog bottom stays physically attached to viewport bottom * - Skip / DONE footer stays at bottom * - purple Open button stays immediately above footer * - advertiser white message field receives the extra height * - visible design remains otherwise unchanged */ @media(max-width:768px){ #task-popup.cb-task-sheet-expanded[open]{ position:fixed!important; top:auto!important; right:0!important; bottom:0!important; left:0!important; inset:auto 0 0 0!important; margin:0 auto!important; height:min(94dvh,94svh)!important; max-height:min(94dvh,94svh)!important; box-sizing:border-box!important; } /* * Do not make the whole sheet an internal scrolling column. * Make its structure consume exactly the expanded height. */ #task-popup.cb-task-sheet-expanded[open] > .dialog-content{ display:flex!important; flex-direction:column!important; width:100%!important; height:100%!important; min-height:0!important; max-height:none!important; overflow:hidden!important; box-sizing:border-box!important; } /* * Main premium area consumes everything above the footer. */ #task-popup.cb-task-sheet-expanded[open] .task-focus-panel{ display:flex!important; flex-direction:column!important; flex:1 1 auto!important; min-height:0!important; overflow:hidden!important; } /* * Mission/title/status/content do not steal the expansion. */ #task-popup.cb-task-sheet-expanded[open] .task-focus-panel > p.text-center.mb-2, #task-popup.cb-task-sheet-expanded[open] .task-focus-panel > .task-mission, #task-popup.cb-task-sheet-expanded[open] .task-focus-panel > .task-content, #task-popup.cb-task-sheet-expanded[open] .task-focus-panel > .cb-live-modal-status, #task-popup.cb-task-sheet-expanded[open] .task-focus-panel > .cb-premium-task-status-below-ad{ flex:0 0 auto!important; } /* * THIS is the flexible area. * * The white advertiser-message card grows vertically when * the user pulls the sheet upward. */ #task-popup.cb-task-sheet-expanded[open] .task-focus-panel > [data-cb-premium-task-ad-text]{ flex:1 1 auto!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; overflow-y:auto!important; overscroll-behavior:contain!important; box-sizing:border-box!important; } /* * Purple Open button never grows and never floats upward. * Flex layout pins it directly above the footer. */ #task-popup.cb-task-sheet-expanded[open] .task-focus-panel > button.gradient-button{ flex:0 0 auto!important; position:relative!important; z-index:3; } /* * Skip Task + DONE: * permanent bottom row of the expanded sheet. */ #task-popup.cb-task-sheet-expanded[open] > .dialog-content > .d-flex.g-2.mt-2{ flex:0 0 auto!important; position:relative!important; z-index:4; } /* * TASK_HANDLE_BUTTON_360 * * Real click target placed ONLY over the existing visible handle. * * Transparent = no design change. */ #task-popup > .cb-task-handle-button-360{ display:block; position:absolute; top:2px; left:50%; width:54px; height:26px; transform:translateX(-50%); margin:0; padding:0; border:0; outline:0; background:transparent; opacity:0; cursor:pointer; z-index:30; -webkit-tap-highlight-color:transparent; touch-action:pan-y; } /* * Press feedback: * * The handle visibly compresses, * and the entire sheet moves down slightly before dismissal. */ #task-popup.cb-task-handle-pressing-360{ transform:translate3d(0,10px,0)!important; transition: transform .105s cubic-bezier(.22,.75,.25,1)!important; } #task-popup.cb-task-handle-pressing-360::before{ scale:.84!important; opacity:.58!important; filter:brightness(.82)!important; transition: scale .095s ease, opacity .095s ease, filter .095s ease!important; } } @media(min-width:769px){ #task-popup > .cb-task-handle-button-360{ display:none!important; } } @media(prefers-reduced-motion:reduce){ #task-popup.cb-task-handle-pressing-360{ transition:none!important; } #task-popup.cb-task-handle-pressing-360::before{ transition:none!important; } } /* * TASK_SHEET_DYNAMIC_STYLE_361 * * Arbitrary-height mobile bottom sheet. * * Sheet height changes upward from bottom:0. * There is no translate-based expansion. */ @media(max-width:768px){ #task-popup.cb-task-sheet-sized-361[open], #task-popup.cb-task-sheet-resizing-361[open]{ position:fixed!important; top:auto!important; right:0!important; bottom:0!important; left:0!important; inset:auto 0 0 0!important; margin:0 auto!important; transform:none; overflow:hidden!important; box-sizing:border-box!important; } /* * Fill the entire current sheet height. * * This removes the transparent unused area that appeared * when the outer dialog grew faster than its content. */ #task-popup.cb-task-sheet-sized-361[open] > .dialog-content, #task-popup.cb-task-sheet-resizing-361[open] > .dialog-content{ display:flex!important; flex-direction:column!important; width:100%!important; height:100%!important; min-height:0!important; max-height:none!important; overflow:hidden!important; box-sizing:border-box!important; } /* * Premium panel occupies all space above Skip/DONE. */ #task-popup.cb-task-sheet-sized-361 .task-focus-panel, #task-popup.cb-task-sheet-resizing-361 .task-focus-panel{ display:flex!important; flex-direction:column!important; flex:1 1 0!important; width:100%!important; min-height:0!important; overflow:hidden!important; box-sizing:border-box!important; } /* * Fixed-size informational rows. */ #task-popup.cb-task-sheet-sized-361 .task-focus-panel > p.text-center.mb-2, #task-popup.cb-task-sheet-sized-361 .task-focus-panel > .task-mission, #task-popup.cb-task-sheet-sized-361 .task-focus-panel > .task-content, #task-popup.cb-task-sheet-sized-361 .task-focus-panel > .cb-live-modal-status, #task-popup.cb-task-sheet-sized-361 .task-focus-panel > .cb-premium-task-status-below-ad, #task-popup.cb-task-sheet-resizing-361 .task-focus-panel > p.text-center.mb-2, #task-popup.cb-task-sheet-resizing-361 .task-focus-panel > .task-mission, #task-popup.cb-task-sheet-resizing-361 .task-focus-panel > .task-content, #task-popup.cb-task-sheet-resizing-361 .task-focus-panel > .cb-live-modal-status, #task-popup.cb-task-sheet-resizing-361 .task-focus-panel > .cb-premium-task-status-below-ad{ flex:0 0 auto!important; } /* * THIS is the only part which stretches. * * White advertiser area grows/shrinks continuously * with the sheet. */ #task-popup.cb-task-sheet-sized-361 .task-focus-panel > [data-cb-premium-task-ad-text], #task-popup.cb-task-sheet-resizing-361 .task-focus-panel > [data-cb-premium-task-ad-text]{ flex:1 1 0!important; width:100%!important; height:auto!important; min-height:4.8em!important; max-height:none!important; overflow-y:auto!important; overscroll-behavior:contain!important; box-sizing:border-box!important; -webkit-overflow-scrolling:touch; } /* * Purple Open Task button: * always anchored directly above footer. */ #task-popup.cb-task-sheet-sized-361 .task-focus-panel > button.gradient-button, #task-popup.cb-task-sheet-resizing-361 .task-focus-panel > button.gradient-button{ flex:0 0 auto!important; position:relative!important; z-index:5; } /* * Skip Task + DONE: * bottom-most row. */ #task-popup.cb-task-sheet-sized-361 > .dialog-content > .d-flex.g-2.mt-2, #task-popup.cb-task-sheet-resizing-361 > .dialog-content > .d-flex.g-2.mt-2{ flex:0 0 auto!important; position:relative!important; z-index:6; } /* * REAL drag-handle click target. * * Narrowly covers only the visible handle region. */ #task-popup > .cb-task-handle-button-361{ display:block!important; position:absolute!important; top:0!important; left:50%!important; width:56px!important; height:28px!important; transform: translateX(-50%)!important; margin:0!important; padding:0!important; border:0!important; outline:0!important; background:transparent!important; opacity:0!important; z-index:50!important; cursor:pointer; -webkit-tap-highlight-color: transparent; touch-action:pan-y; } /* * Physical handle press: * brief downward depression before dismissal. */ #task-popup.cb-task-handle-pressing-361{ transform: translate3d(0,8px,0)!important; transition: transform .095s cubic-bezier(.2,.75,.25,1)!important; } #task-popup.cb-task-handle-pressing-361::before{ scale:.84!important; opacity:.58!important; filter: brightness(.82)!important; } /* * v360 binary-expanded layout is deliberately disabled. * v361 uses arbitrary pixel height instead. */ #task-popup.cb-task-sheet-expanded{ height:auto; } } @media(min-width:769px){ #task-popup > .cb-task-handle-button-361{ display:none!important; } } @media(prefers-reduced-motion:reduce){ #task-popup.cb-task-handle-pressing-361{ transition:none!important; } } /* CB_WHOLE_ACTIVITY_PILL_V1 */ a.cb-latest-activity > .badge.cb-activity-whole-update{ animation:cbActivityWholePillIn 720ms cubic-bezier(.18,.8,.22,1) both 1!important; transform-origin:center center; } @keyframes cbActivityWholePillIn{ 0%{ opacity:.25; transform:translateY(12px) scale(.93); filter:brightness(1.35); } 50%{ opacity:1; transform:translateY(-3px) scale(1.035); filter:brightness(1.22); } 75%{ transform:translateY(1px) scale(.99); filter:brightness(1.08); } 100%{ opacity:1; transform:translateY(0) scale(1); filter:brightness(1); } } a.cb-latest-activity > .badge > .d-flex:first-child{ min-width:0; } a.cb-latest-activity > .badge > .d-flex:first-child span{ display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } a.cb-latest-activity > .badge > .green-highlight{ flex-shrink:0; } @media (prefers-reduced-motion:reduce){ a.cb-latest-activity > .badge.cb-activity-whole-update{ animation:none!important; } } html.cb-motion-paused a.cb-latest-activity > .badge.cb-activity-whole-update{ animation:none!important; } /* CB_AD_CREATIVE_FIDELITY_V61 ? rich advertiser message only; do not redesign normal task popup. Existing popup rules force a white background and responsive font scaling. Rich copy must use the saved background and the editor's text metrics. */ #task-popup .cb-premium-task-ad-text.cb-ad-accurate-v61 { background:var(--cb-v61-message-bg,#121739)!important; background-image:none!important; color:var(--cb-v61-message-ink,#17172b)!important; font-size:13px!important; line-height:1.65!important; font-weight:400!important; letter-spacing:normal!important; text-transform:none!important; white-space:pre-wrap!important; overflow-wrap:anywhere!important; word-break:normal!important; } @media(max-width:380px){ #task-popup .cb-premium-task-ad-text.cb-ad-accurate-v61{font-size:12px!important;} } /* CB_POPUP_CONTINUOUS_TOP_BORDER_V618 * Match the purple top edge to the side outline; no pale/grey/transparent seam. * Keep the existing 2px inner bevel, now the same purple as the outline. * Everything else (background, geometry, typography and outer shadow) stays intact. */ #task-popup .cb-premium-task-ad-text.cb-ad-accurate-v61 { border-top-color:rgba(132,82,205,.27)!important; box-shadow: inset 0 2px 0 rgba(132,82,205,.27), inset 0 -4px 8px rgba(102,55,170,.065), 0 2px 0 rgba(90,45,155,.10), 0 7px 13px rgba(44,22,72,.11), 0 16px 29px rgba(47,23,79,.15), 0 29px 48px rgba(49,24,84,.10)!important; } /* CB_POPUP_MESSAGE_DEFAULT_V8 * Task-popup advertiser message surface ONLY. No editor wrapper, task cards, or other modal. * Replace the legacy white gradient and white top bevel before JS first paint. * Higher-specificity .cb-ad-accurate-v61 continues to display saved ad backgrounds. */ #task-popup .cb-premium-task-ad-text { background:#121739!important; background-image:none!important; color:#f4f0ff!important; box-shadow: inset 0 2px 0 rgba(132,82,205,.27), inset 0 -4px 8px rgba(102,55,170,.065), 0 2px 0 rgba(90,45,155,.10), 0 7px 13px rgba(44,22,72,.11), 0 16px 29px rgba(47,23,79,.15), 0 29px 48px rgba(49,24,84,.10)!important; } #task-popup .cb-premium-task-ad-text.cb-ad-accurate-v61 { background:var(--cb-v61-message-bg,#121739)!important; background-image:none!important; color:var(--cb-v61-message-ink,#f4f0ff)!important; } /* R21: bounded emoji motion is a lightweight transform, not per-glyph shadow filtering. */ #task-popup .cb-premium-ad-user-emoji, .tasks .cb-premium-ad-user-emoji{display:inline-block;vertical-align:-.04em;filter:none!important;will-change:auto; animation:cb-r21-emoji-float 3.2s ease-in-out infinite;animation-delay:var(--cb-emoji-delay,0ms)} @keyframes cb-r21-emoji-float{0%,100%{transform:translateY(0) rotate(0deg)}45%{transform:translateY(-2px) rotate(5deg)}} @media(prefers-reduced-motion:reduce){#task-popup .cb-premium-ad-user-emoji,.tasks .cb-premium-ad-user-emoji{animation:none!important}} html.cb-motion-paused #task-popup .cb-premium-ad-user-emoji,html.cb-motion-paused .tasks .cb-premium-ad-user-emoji{animation:none!important} /* Telegram Post Views: the premium popup hosts Telegram's original public * post widget rather than advertiser-provided copy. Private Telegram posts * cannot be embedded; their original is delivered in the trusted bot. */ #task-popup .task-focus-panel>.cb-premium-task-ad-text.cb-tg-post-native{ max-height:min(62dvh,540px)!important;overflow-y:auto!important; box-sizing:border-box!important;padding:10px!important; } #task-popup .cb-tg-post-native iframe{ width:100%!important;max-width:100%!important;display:block!important; height:min(54dvh,440px)!important;border:0!important; } @media(max-width:480px){#task-popup .cb-tg-post-native iframe{height:min(48dvh,350px)!important}} /* TG POST SHEET READ-HEIGHT V20: allow the original Telegram post to fill the * space revealed by dragging the bottom sheet. Other task messages unchanged. */ @media(max-width:768px){ #task-popup:is(.cb-task-sheet-expanded,.cb-task-sheet-sized-361,.cb-task-sheet-resizing-361)[open] .task-focus-panel > .cb-premium-task-ad-text.cb-tg-post-native{ flex:1 1 auto!important; min-height:0!important; height:auto!important; max-height:none!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch; } } #task-popup .cb-tg-post-native .cb-tg-post-fit{ max-width:100%; overflow:hidden; }