/* Ao vivo: 02-AO-VIVO/01-ao-vivo-global.png, mobile reference at 864 px. */
.live-surface .product-head .wordmark{width:60px}
.live-surface .product-head .brand h1{font-size:14px;font-weight:400;letter-spacing:-.03em;border-left:1px solid var(--io-text);padding-left:11px;margin-left:2px}
.live-intro{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;align-items:start;margin:0 0 12px}
.live-character{object-fit:contain;flex:none}.live-character.large{width:84px;height:88px}.live-character.small{width:48px;height:48px}
.live-intro p{font-size:12px;line-height:1.45;letter-spacing:-.035em;margin:0 0 9px}
.live-modes{display:flex;gap:8px;flex-wrap:wrap}
.live-surface .live-mode{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;border:1px solid var(--io-turq-500);border-radius:99px;background:transparent;color:var(--io-text);padding:6px 9px;font-size:11px;line-height:1.25;cursor:pointer}
.live-mode svg{width:17px;height:17px;flex:none;color:var(--io-nav-active)}
.live-mode.selected{background:var(--io-nav-active);color:white}.live-mode.selected svg{color:white}
.live-preview-note{font-size:10px;color:var(--io-text-secondary);margin:0 0 5px;text-align:right}
.live-player{position:relative;isolation:isolate;min-height:205px;overflow:hidden;border-radius:16px;background:#211c16;color:white;box-shadow:0 4px 10px #36270f16}
.live-player.preview{height:230px;display:flex;flex-direction:column;justify-content:space-between}
.live-poster{position:absolute;z-index:-2;left:0;top:24px;width:100%;height:180px;object-fit:cover}
.live-player.preview::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0009,transparent 25%,transparent 70%,#000c)}
.live-player-heading{display:flex;align-items:center;gap:7px;padding:10px;font-size:10px;line-height:1.3}.live-player-heading strong{font-weight:600;flex:none}
.live-badge{border-radius:99px;background:#b83118;color:#fff;padding:5px 7px;font-size:9px;letter-spacing:.04em;flex:none}
.live-player-caption{padding:10px 12px;margin:0;font-size:11px;text-align:center;background:#17130e}
.live-player-empty{min-height:205px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:22px}
.live-player-empty .design-icon{width:30px;height:30px;color:#e9c17a}.live-surface .live-player-empty h2{font-size:19px;color:white;margin:0}.live-player-empty p{font-size:13px;line-height:1.5;color:#e4dfd6}
.live-retry{min-height:44px;color:#ffcf7e;background:transparent;border:1px solid #e9c17a;border-radius:99px;padding:7px 12px;cursor:pointer}
.live-response{display:flex;gap:8px;align-items:center;margin:10px 0 8px}.live-response p{flex:1;min-width:0;border:1px solid var(--io-border);border-radius:13px;background:#fff5;padding:10px;font-size:12px;line-height:1.45;margin:0;overflow-wrap:anywhere}
.live-quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.live-quick-actions button{display:flex;align-items:center;gap:10px;min-height:46px;background:transparent;border:1px solid var(--io-border);border-radius:12px;padding:8px 12px;color:var(--io-text);font-size:12px;line-height:1.3;text-align:left;cursor:pointer}
.live-quick-actions svg{width:19px;height:19px;color:var(--io-gold-700);flex:none}.live-quick-actions button[aria-pressed=true]{background:#fff0d3;border-color:#dbab5a}
.live-feedback{margin:7px 0 0;font-size:11px;line-height:1.45;color:var(--io-text-secondary)}
.live-surface button:disabled{opacity:.5;cursor:default}
.live-surface h2{font-size:16px;line-height:1.3;font-weight:600;letter-spacing:-.035em;margin:0 0 8px}
.live-channels,.live-schedule{margin-top:14px}.live-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}.live-section-head h2{margin:0}
.live-surface .live-text-button{display:flex;align-items:center;gap:5px;min-height:44px;padding:5px 0;background:transparent;border:0;color:var(--io-gold-700);font-size:12px;cursor:pointer}.live-text-button svg{width:16px;height:16px;flex:none}
.live-channel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.live-channel{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--io-border);border-radius:13px;background:transparent;padding:0;color:var(--io-text);text-align:left;cursor:pointer;min-width:0}
.live-channel[aria-pressed=true]{border-color:var(--io-nav-active);box-shadow:0 0 0 1px var(--io-nav-active)}
.live-channel>img{width:100%;height:65px;object-fit:cover}.live-channel-copy{display:grid;gap:4px;padding:7px 6px 8px}
.live-channel-copy strong{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600}.live-channel-copy>span{font-size:11px;line-height:1.4;margin-left:10px}
.live-dot{display:inline-block;width:6px;height:6px;flex:none;background:#b83118;border-radius:50%}
.live-channel-note,.live-empty-copy{font-size:12px;line-height:1.5;color:var(--io-text-secondary);padding:12px;border:1px solid var(--io-border);border-radius:12px;margin:5px 0 0}
.live-schedule ol{list-style:none;padding:0;margin:0;border:1px solid var(--io-border);border-radius:13px;overflow:hidden}
.live-schedule li{display:grid;grid-template-columns:58px minmax(0,1fr) 98px;align-items:stretch;min-height:53px;border-top:1px solid var(--io-border)}.live-schedule li:first-child{border-top:0}
.live-schedule time{display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;border-right:1px solid var(--io-border)}
.live-schedule li>div{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:7px 10px}.live-schedule strong{font-size:12px;line-height:1.3;font-weight:500}.live-schedule li>div>span{font-size:11px;color:var(--io-text-secondary)}
.live-surface .live-schedule .live-text-button{font-size:10px;padding:6px;justify-content:center}.live-schedule [aria-pressed=true]{color:var(--io-turq-700)}
@media(max-width:390px){.live-intro{grid-template-columns:72px minmax(0,1fr);gap:8px}.live-character.large{width:72px;height:84px}.live-intro p{font-size:12px}.live-modes{gap:5px}.live-surface .live-mode{padding-inline:7px;font-size:10px}.live-mode svg{width:15px}.live-quick-actions button{padding-inline:8px;gap:7px;font-size:11px}.live-schedule li{grid-template-columns:48px minmax(0,1fr) 88px}.live-schedule li>div{padding-inline:7px}.live-channel-copy strong{font-size:11px}.live-channel-copy{padding-inline:5px}.live-channel-copy>span{font-size:10px}}
@media(forced-colors:active){.live-player,.live-channel,.live-response p{border:1px solid CanvasText}.live-player h2,.live-player p,.live-mode.selected,.live-player-heading{color:CanvasText;background:Canvas}}

.live-channel-grid.expanded{grid-template-columns:1fr}
.live-channel-grid.expanded .live-channel{flex-direction:row;align-items:center}
.live-channel-grid.expanded .live-channel>img{width:110px;height:65px;flex:none}
.live-channel-grid.expanded .live-channel-copy{padding:10px}
.live-channel-grid.expanded .live-channel-description{margin-left:0;font-size:11px;color:var(--io-text-secondary)}

.product-ready .live-surface .product-head{min-height:50px;padding-block:3px}
.live-surface .area-scroll{padding-top:0}
.live-surface .product-head .account-icon{position:relative;border:0;background:transparent}
.live-surface .product-head .account-icon::before{content:'';position:absolute;width:26px;height:26px;border:1px solid var(--io-nav-active);border-radius:50%}
.live-surface .product-head .account-icon .design-icon{width:16px;height:16px}
/* Compact chat dock, normalized to the Ao vivo mockup at mobile width. */
.product-ready .live-surface .area-dock {
  --io-composer-height:44px;
  --io-tap:32px;
}
.product-ready .live-surface .main-composer {
  min-height:44px;
  padding:5px 5px 5px 16px;
  gap:10px;
}
.product-ready .live-surface .main-composer input {font-size:16px}
.product-ready .live-surface .main-composer input::placeholder {font-size:11px}
.product-ready .live-surface .main-composer .mic-button {
  height:32px;
  min-height:32px;
  padding-inline:12px;
  font-size:11px;
  font-weight:400;
}
.product-ready .live-surface .main-composer .send {width:32px;height:32px}
.product-ready .live-surface .main-composer .send .design-icon {width:20px;height:20px}
.product-ready .live-surface .area-dock .area-legal {font-size:9px;line-height:1.3}
.product-ready .live-surface .main-composer .mic-button .design-icon {width:16px;height:16px}

.live-youtube-player{overflow:hidden;border-radius:16px;background:#211c16;color:white;margin-bottom:10px}
.live-embed-slot{min-height:200px;aspect-ratio:16/9;background:#111}
.live-embed-slot iframe{display:block;width:100%;height:100%;min-height:200px;border:0}
.live-video-start{position:relative;display:block;width:100%;height:100%;min-height:200px;border:0;padding:0;background:#111;color:white;cursor:pointer}
.live-video-start img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72}
.live-video-start span{position:relative;display:inline-block;padding:12px 16px;border-radius:99px;background:#111c;font-size:13px}
.live-video-caption{padding:10px 12px}
.live-video-caption>span,.live-video-caption>a{font-size:10px;color:#f4d396}
.live-surface .live-video-caption h2{color:white;font-size:14px;margin:5px 0 8px}
.live-video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.live-video-grid .live-channel>img{height:90px}
.live-video-grid .live-channel-copy strong{font-size:11px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.live-video-grid .live-channel-copy>span{margin:0;font-size:9px}
.live-schedule .live-modes{margin-bottom:8px}

/* Keep the approved reading scale inside the content, including desktop's
   narrow app column. The header and question dock keep their existing type. */
.live-surface { container: iollo-live / inline-size; }
@container iollo-live (max-width: 600px) {
  .live-surface .live-intro p,
  .live-surface .live-response p,
  .live-surface .live-player-empty p { font-size: 15px; line-height: 1.45; letter-spacing: -.015em; }
  .live-surface .area-scroll h2 { font-size: 17px; line-height: 1.35; letter-spacing: -.02em; }
  .live-surface .live-video-caption h2,
  .live-surface .live-player-empty h2 { font-size: 18px; }
  .live-surface .live-mode,
  .live-surface .live-quick-actions button,
  .live-surface .live-text-button,
  .live-surface .live-schedule .live-text-button,
  .live-surface .live-retry { font-size: 13px; line-height: 1.35; min-height: 34px; }
  .live-surface .live-quick-actions button { min-height: 46px; }
  .live-surface .live-preview-note,
  .live-surface .live-player-heading,
  .live-surface .live-badge,
  .live-surface .live-player-caption,
  .live-surface .live-feedback,
  .live-surface .live-channel-note,
  .live-surface .live-empty-copy,
  .live-surface .live-video-caption > span,
  .live-surface .live-video-caption > a { font-size: 13px; line-height: 1.45; }
  .live-surface .live-player-heading { flex-wrap: wrap; }
  .live-surface .live-channels,
  .live-surface .live-schedule { margin-top: 18px; }
  .live-surface .live-section-head { flex-wrap: wrap; }
  .live-surface .live-channel-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .live-surface .live-channel-grid .live-channel {
    flex-direction: row-reverse; align-items: center; gap: 12px; padding: 10px;
  }
  .live-surface .live-channel-grid .live-channel > img {
    width: 96px; height: 84px; flex: none; border-radius: 9px;
  }
  .live-surface .live-channel-grid .live-channel-copy { flex: 1; min-width: 0; padding: 0; gap: 5px; }
  .live-surface .live-channel-grid .live-channel-copy strong {
    display: block; font-size: 15px; line-height: 1.4; font-weight: 500;
    -webkit-line-clamp: unset; overflow: visible; overflow-wrap: anywhere;
  }
  .live-surface .live-channel-grid .live-channel-copy > span { margin: 0; font-size: 13px; line-height: 1.4; }
  .live-surface .live-channel-copy .live-dot { margin-right: 5px; }
  .live-surface .live-schedule li { grid-template-columns: 48px minmax(0, 1fr) 78px; }
  .live-surface .live-schedule strong { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
  .live-surface .live-schedule time,
  .live-surface .live-schedule li > div > span { font-size: 13px; }
}