/* Coceyo AI Coach card: an online meeting (three people) while the coach listens and writes live tips. */
.app-coach{background:#ece3da}
.app-coach .application-visual{inset:222px 0 78px}
.cf-film{position:absolute;inset:0 34px;font-family:Inter,"SF Pro Text",system-ui,sans-serif}
.cf-window{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#202124;color:#e8eaed;box-shadow:0 0 0 1px #00000026,0 32px 56px -26px #2b1a0fcc,0 12px 24px -14px #2b1a0f77;transform:translateZ(0)}
.cf-stage{position:relative;flex:1;min-height:0;padding:30px 10px 10px;display:flex;flex-direction:column;gap:10px}
.cf-title{position:absolute;left:14px;top:9px;display:flex;align-items:center;gap:8px;font-size:10px;color:#bdc1c6;letter-spacing:.01em}
.cf-title i{width:7px;height:7px;border-radius:50%;background:#f28b82;box-shadow:0 0 0 0 #f28b8288;animation:cf-rec 1.8s infinite}
.cf-title b{font-weight:500;color:#9aa0a6;font-variant-numeric:tabular-nums}
@keyframes cf-rec{70%{box-shadow:0 0 0 6px #f28b8200}100%{box-shadow:0 0 0 0 #f28b8200}}
.cf-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cf-tile{position:relative;border-radius:14px;overflow:hidden;background:#3c4043;box-shadow:inset 0 0 0 0 #8ab4f8;transition:box-shadow .35s}
.cf-tile.speaking{box-shadow:inset 0 0 0 3px #8ab4f8,0 0 24px -4px #8ab4f866}
.cf-tile>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.cf-fig{transform-box:fill-box;transform-origin:50% 100%}
.cf-mouth{transform-box:fill-box;transform-origin:50% 50%}
.cf-name{position:absolute;left:8px;bottom:7px;padding:3px 8px;border-radius:6px;background:#00000066;color:#fff;font-size:10px;font-weight:500;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cf-eq{position:absolute;right:8px;top:8px;display:flex;align-items:center;justify-content:center;gap:2px;width:24px;height:24px;border-radius:50%;background:#8ab4f8;opacity:0;transform:scale(.7);transition:opacity .25s,transform .3s}
.cf-tile.speaking .cf-eq{opacity:1;transform:none}
.cf-eq i{width:2.5px;height:8px;border-radius:2px;background:#1f2a44;transform-origin:50% 50%}
.cf-mute{position:absolute;right:8px;top:8px;width:22px;height:22px;border-radius:50%;background:#00000073;display:grid;place-items:center;transition:opacity .25s}
.cf-mute svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cf-tile.speaking .cf-mute{opacity:0}

/* ---- the coach: live listening bar ---- */
.cf-coach{position:relative;flex:none;display:flex;align-items:center;gap:12px;min-height:66px;padding:10px 14px 10px 10px;border-radius:16px;background:linear-gradient(135deg,#2b2540,#232034);box-shadow:inset 0 0 0 1px #ffffff1c,0 14px 26px -16px #000a;overflow:hidden;transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.cf-coach::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(110deg,#8f7bff00 20%,#b6a6ff99 50%,#8f7bff00 80%) 0 0/250% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:cf-glint 3.2s linear infinite;pointer-events:none}
@keyframes cf-glint{to{background-position:-250% 0}}
.cf-badge{flex:none;display:flex;align-items:center;gap:9px}
.cf-spark{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffe3c2,#c89bff 48%,#6a4df0);box-shadow:0 0 0 4px #8f7bff22,0 0 18px #8f7bff66}
.cf-spark::after{content:"";position:absolute;inset:7px;background:#fff;opacity:.92;clip-path:polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%)}
.cf-badge b{display:block;font-size:11.5px;font-weight:600;letter-spacing:-.01em;color:#fff;white-space:nowrap}
.cf-badge small{display:block;margin-top:3px;font-size:9px;color:#b7acf5;white-space:nowrap;transition:color .3s}
.cf-coach[data-s=tip] .cf-badge small{color:#7fe0b0}
.cf-lines{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.cf-heard{margin:0;font-size:10px;line-height:1.35;color:#a9a6bb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-heard b{margin-inline-end:7px;color:#d8d3f2;font-weight:600}
.cf-tip{margin:0;font-size:13px;line-height:1.35;font-weight:500;color:#fff;letter-spacing:-.01em;min-height:35px}
.cf-caret{display:inline-block;width:2px;height:1em;margin-inline-start:2px;vertical-align:-.15em;background:#b6a6ff;animation:cf-blink 1s steps(1) infinite}
@keyframes cf-blink{50%{opacity:0}}
.cf-src{flex:none;max-width:150px;padding:5px 10px;border-radius:99px;background:#ffffff14;box-shadow:inset 0 0 0 1px #ffffff1f;font-size:9.5px;color:#d2ccf5;line-height:1.25;text-align:center;opacity:0;transform:translateY(4px);transition:opacity .4s,transform .5s cubic-bezier(.16,1,.3,1)}
.cf-src.on{opacity:1;transform:none}

/* ---- meet-style toolbar ---- */
.cf-bar{flex:none;position:relative;display:flex;align-items:center;justify-content:space-between;height:46px;padding:0 14px;background:#202124}
.cf-meta{display:flex;align-items:center;gap:8px;font-size:10px;color:#e8eaed;min-width:0}.cf-meta i{width:1px;height:12px;background:#5f6368}.cf-meta span:first-child{font-variant-numeric:tabular-nums}
.cf-ctrls{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;gap:7px}
.cf-btn{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#3c4043}
.cf-btn svg{width:15px;height:15px;fill:none;stroke:#e8eaed;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cf-end{width:42px;border-radius:99px;background:#ea4335}.cf-end svg{fill:#fff;stroke:#fff;stroke-width:1}
.cf-side{display:flex;gap:2px}.cf-side .cf-btn{background:none;width:26px}
.cf-side svg{width:14px;height:14px;stroke:#bdc1c6}

@media(max-width:800px){
 .app-coach .application-visual{inset:204px 0 72px}
 .cf-film{inset:0 18px}.cf-window{border-radius:16px}
 .cf-stage{padding:26px 8px 8px;gap:8px}.cf-grid{gap:6px}.cf-tile{border-radius:10px}
 .cf-name{left:5px;bottom:5px;font-size:8.5px;padding:2px 6px}
 .cf-eq{width:18px;height:18px;right:5px;top:5px}.cf-eq i{width:2px;height:6px}.cf-mute{right:5px;top:5px;width:18px;height:18px}.cf-mute svg{width:10px;height:10px}
 .cf-coach{gap:9px;padding:8px 10px 8px 8px;min-height:64px;border-radius:13px}
 .cf-spark{width:26px;height:26px}.cf-spark::after{inset:5px}.cf-badge div{display:none}
 .cf-heard{font-size:9px}.cf-tip{font-size:11.5px;min-height:32px}.cf-src{display:none}
 .cf-bar{height:40px;padding:0 10px}.cf-meta,.cf-side,.cf-cc,.cf-hand{display:none}.cf-btn{width:27px;height:27px}.cf-end{width:38px}
}
@media(prefers-reduced-motion:reduce){.cf-title i,.cf-coach::before,.cf-caret{animation:none}.cf-tile,.cf-eq,.cf-coach,.cf-src{transition:none}}
/* real portraits */
.cf-tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;transform:scale(1.06);will-change:transform}
.cf-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 55%,#0000004d);pointer-events:none}
@media(max-width:800px){.cf-tile>img{object-position:50% 24%}}
.cf-tile>img{object-position:50% 22%}