/* ECHOTAKE responsive cinema experience layer.
   Keeps the existing brand colours, logo and feature set. */
:root { --etx-dock-height: 70px; }
html { scroll-padding-top: 88px; }
body { -webkit-tap-highlight-color: transparent; }
button, a, input, select, textarea { touch-action: manipulation; }
:where(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline: 2px solid #ff5964;
  outline-offset: 3px;
}
.etx-icon { display:inline-flex; width:1.05em; height:1.05em; flex:0 0 1.05em; align-items:center; justify-content:center; vertical-align:-.17em; color:#ff5964; }
.etx-icon svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.topbar .etx-icon { width:18px; height:18px; }
.topbar .brand-symbol { flex-shrink:0; }
.nav .etx-icon { margin-right:6px; }
.settings-nav-item .etx-icon { width:17px; height:17px; }
.etx-feature-icon { display:inline-grid; width:34px; height:34px; place-items:center; margin-right:10px; border:1px solid rgba(255,38,51,.24); border-radius:11px; background:rgba(255,38,51,.08); vertical-align:middle; }
.etx-feature-icon .etx-icon { width:17px; height:17px; }
.section-heading h2 { display:flex; align-items:center; min-width:0; }
.primary-btn, .ghost-btn, .icon-btn, .mobile-quick-action, .settings-nav-item, .movie-card, .collection-card, .person-card, .character-card {
  -webkit-tap-highlight-color:transparent;
}
.primary-btn, .ghost-btn, .icon-btn, .settings-nav-item, .mobile-quick-action, .etx-mobile-dock a, .etx-mobile-dock button {
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
@media (hover:hover) and (pointer:fine) {
  .primary-btn:hover, .ghost-btn:hover, .icon-btn:hover, .settings-nav-item:hover { transform:translateY(-1px); }
  .etx-mobile-dock { display:none!important; }
}
.movie-card .movie-poster-wrap, .character-card img, .person-card img { background:linear-gradient(110deg,rgba(255,255,255,.035) 8%,rgba(255,255,255,.09) 18%,rgba(255,255,255,.035) 33%); background-size:220% 100%; }
.movie-card img[data-etx-ready="false"], .character-card img[data-etx-ready="false"], .person-card img[data-etx-ready="false"] { opacity:.55; }
.movie-card img[data-etx-ready="true"], .character-card img[data-etx-ready="true"], .person-card img[data-etx-ready="true"] { animation:etx-image-in .32s ease both; }
@keyframes etx-image-in { from {opacity:.65;filter:blur(2px)} to {opacity:1;filter:blur(0)} }
#cinemaLoadingScreen .cinema-loader-brand { position:relative; isolation:isolate; }
#cinemaLoadingScreen .cinema-loader-brand::before { content:""; position:absolute; z-index:-1; inset:-14px; border:1px solid rgba(255,38,51,.25); border-top-color:#ff5964; border-radius:50%; animation:etx-reel 1.25s linear infinite; }
#cinemaLoadingScreen .cinema-loader-brand::after { content:""; position:absolute; z-index:-1; inset:-20px; border:1px solid rgba(255,255,255,.08); border-bottom-color:rgba(255,38,51,.55); border-radius:50%; animation:etx-reel 2.2s linear infinite reverse; }
@keyframes etx-reel { to { transform:rotate(360deg) } }
.ai-chat-log { overscroll-behavior:contain; scroll-behavior:smooth; scrollbar-gutter:stable; }
.ai-message { animation:etx-message-in .24s ease both; }
@keyframes etx-message-in { from {opacity:0;transform:translateY(6px)} to {opacity:1;transform:translateY(0)} }
.ai-chat-form textarea { min-height:52px; max-height:150px; resize:vertical; }
.etx-prompt-chips { display:flex; gap:8px; overflow-x:auto; padding:2px 1px 9px; scrollbar-width:thin; overscroll-behavior-x:contain; }
.etx-prompt-chip { flex:0 0 auto; min-height:40px; padding:8px 12px; border:1px solid var(--line-strong); border-radius:999px; background:rgba(255,255,255,.045); color:var(--text-soft); font:inherit; font-size:.82rem; font-weight:700; cursor:pointer; }
.etx-prompt-chip:hover, .etx-prompt-chip:focus-visible { border-color:rgba(255,38,51,.5); background:rgba(255,38,51,.1); }
.account-card { width:min(860px,calc(100vw - 32px)); max-height:min(92dvh,960px); padding:clamp(24px,4vw,42px); border-radius:26px; overscroll-behavior:contain; scrollbar-gutter:stable; }
#accountModal .account-brand-orbit { margin:0 auto 10px; }
#accountModal .account-owner-line { justify-content:center; flex-wrap:wrap; text-align:center; }
#accountModal .account-kicker { display:block; margin-top:14px; }
#accountModal .account-subtitle { max-width:58ch; margin-inline:auto; }
#accountModal .account-tabs { min-height:52px; }
#accountModal .account-tabs button { min-height:44px; }
#accountModal .account-form { max-width:640px; margin-inline:auto; }
#accountModal .account-form input { min-height:48px; }
#accountModal .account-submit { min-height:48px; }
#accountModal .account-privacy { max-width:65ch; margin:18px auto 0; text-align:center; line-height:1.55; }
#accountModal .account-profile-details { max-width:640px; margin-inline:auto; }
#accountModal .account-profile-actions button { min-height:46px; }
#accountModal .account-profile-perks { display:flex; justify-content:center; flex-wrap:wrap; gap:9px 18px; }
#settingsModal .settings-card { width:min(900px,calc(100vw - 32px)); max-height:min(92dvh,980px); padding:clamp(20px,3vw,34px); overscroll-behavior:contain; scrollbar-gutter:stable; }
#settingsModal .settings-commandbar { gap:14px; }
#settingsModal .settings-nav { display:flex; gap:7px; overflow-x:auto; padding:4px 2px 10px; scrollbar-width:thin; overscroll-behavior-x:contain; }
#settingsModal .settings-nav-item { flex:0 0 auto; min-height:44px; padding:9px 12px; white-space:nowrap; }
#settingsModal .settings-panel { min-width:0; }
#settingsModal .settings-section { min-width:0; }
#settingsModal .setting-label { max-width:720px; }
#settingsModal .setting-toggle { gap:14px; }
#settingsModal .settings-footer { position:sticky; bottom:calc(-1 * clamp(20px,3vw,34px)); z-index:2; padding:14px 0 2px; background:linear-gradient(transparent,rgba(7,11,18,.96) 25%); }
.about-section .owner-card { position:relative; overflow:hidden; border-color:rgba(255,38,51,.27); background:radial-gradient(circle at 100% 0,rgba(255,38,51,.12),transparent 42%),var(--panel,#0a111b); }
.about-section .owner-card::after { content:""; position:absolute; inset:auto 0 0; height:2px; background:linear-gradient(90deg,transparent,#ff2633,transparent); opacity:.7; }
.owner-signature { letter-spacing:.16em; }
.detail-hero { background-position:center 35%; }
.detail-content { min-width:0; }
.netflix-detail { grid-template-columns:minmax(105px,170px) minmax(0,1fr); gap:clamp(12px,2vw,24px); align-items:start; }
.detail-poster { width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; }
.detail-copy, .cast-section, .watch-info, .similar-block { min-width:0; }
.detail-actions { display:flex; flex-wrap:wrap; gap:9px; }
.detail-actions > * { min-height:44px; }
.character-grid { grid-template-columns:repeat(auto-fill,minmax(122px,1fr)); gap:12px; }
.character-card { min-width:0; min-height:160px; }
.character-card img { width:100%; aspect-ratio:2/3; object-fit:cover; }
.similar-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
.etx-mobile-dock { display:none; }
@media (max-width:760px) {
  :root { --etx-dock-height:68px; }
  html { scroll-padding-top:78px; }
  body { padding-bottom:calc(var(--etx-dock-height) + env(safe-area-inset-bottom) + 18px)!important; }
  .topbar { min-height:58px; }
  .topbar .top-actions #installHomeBtn { display:none!important; }
  main, footer { min-width:0; }
  main > .section, main > section.section { width:calc(100% - 28px); max-width:100%; }
  .section-heading { min-width:0; }
  .section-heading > *, .section-heading h2 { min-width:0; overflow-wrap:anywhere; }
  .hero { max-width:calc(100% - 20px); }
  .concierge { grid-template-columns:minmax(0,1fr); }
  .concierge input, .concierge button { min-width:0; width:100%; min-height:48px; }
  .chips { display:flex; overflow-x:auto; flex-wrap:nowrap; gap:8px; padding-bottom:8px; scrollbar-width:thin; overscroll-behavior-x:contain; }
  .chips > * { flex:0 0 auto; min-height:42px; }
  .filter-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .filter-grid > * { min-width:0; width:100%; min-height:46px; }
  .filter-grid > #discoverBtn { grid-column:1/-1; }
  .movie-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 11px; }
  .movie-card-title { font-size:.92rem; }
  .section-tools { flex-wrap:wrap; }
  .person-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .account-card { width:100vw; max-width:100vw; max-height:calc(100dvh - env(safe-area-inset-top)); margin:0; padding:calc(20px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; }
  #accountModal { align-items:end; padding:0; }
  #accountModal .account-card h2 { font-size:clamp(1.45rem,7vw,2rem); }
  #accountModal .account-owner-line { font-size:.67rem; }
  #accountModal .account-brand-orbit { transform:scale(.88); margin-block:-4px 1px; }
  #settingsModal { align-items:end; padding:0; }
  #settingsModal .settings-card { width:100vw; max-width:100vw; max-height:calc(100dvh - env(safe-area-inset-top)); margin:0; padding:calc(16px + env(safe-area-inset-top)) 15px calc(16px + env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; }
  #settingsModal .settings-nav { margin-inline:-3px; }
  #settingsModal .settings-nav-item { min-height:44px; padding:8px 11px; font-size:.78rem; }
  #settingsModal .settings-commandbar { align-items:flex-start; flex-direction:column; }
  #settingsModal .settings-footer { bottom:calc(-16px - env(safe-area-inset-bottom)); grid-template-columns:1fr 1fr; }
  #settingsModal .settings-footer > * { min-height:46px; }
  .ai-movie-assistant { margin-inline:0; }
  .ai-assistant-heading { flex-wrap:wrap; }
  .ai-status { white-space:nowrap; }
  .ai-chat-log { max-height:min(42vh,360px); }
  .ai-chat-form { grid-template-columns:minmax(0,1fr); }
  .ai-chat-form button { width:100%; min-height:48px; }
  .detail-hero { height:clamp(170px,42vw,280px); }
  .netflix-detail { grid-template-columns:78px minmax(0,1fr); gap:12px; }
  .detail-poster { width:78px; }
  .detail-copy { overflow-wrap:anywhere; }
  .detail-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .detail-actions > * { width:100%; min-width:0; padding-inline:9px; }
  .fact-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .character-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .character-card { padding:7px; font-size:.77rem; overflow-wrap:anywhere; }
  .person-detail { padding-inline:16px; }
  .person-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .etx-mobile-dock { position:fixed; z-index:900; inset:auto 10px calc(8px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); min-height:var(--etx-dock-height); padding:6px 5px; border:1px solid rgba(255,255,255,.13); border-radius:19px; background:rgba(7,8,12,.96); box-shadow:0 10px 36px rgba(0,0,0,.42); }
  .etx-mobile-dock a, .etx-mobile-dock button { display:flex; min-width:0; min-height:54px; align-items:center; justify-content:center; flex-direction:column; gap:3px; padding:4px 2px; border:0; border-radius:12px; background:transparent; color:var(--text-soft,#d6dce6); font:inherit; font-size:.62rem; font-weight:700; line-height:1.1; text-decoration:none; cursor:pointer; }
  .etx-mobile-dock .etx-icon { width:19px; height:19px; flex-basis:19px; }
  .etx-mobile-dock [aria-current="page"] { color:#ff5964; background:rgba(255,38,51,.12); }
  .etx-mobile-dock a:focus-visible, .etx-mobile-dock button:focus-visible { outline-offset:-2px; }
}
@media (max-width:390px) {
  main > .section, main > section.section { width:calc(100% - 22px); }
  .topbar { gap:4px; }
  .topbar .top-actions { gap:3px; }
  .topbar .top-actions .icon-btn { width:36px; min-width:36px; height:38px; flex-basis:36px; }
  .brand-symbol { width:34px; height:34px; }
  .brand-wordmark { font-size:.94rem; }
  .filter-grid { grid-template-columns:minmax(0,1fr); }
  .filter-grid > #discoverBtn { grid-column:auto; }
  .character-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .person-stats { grid-template-columns:minmax(0,1fr); }
  #settingsModal .settings-footer { grid-template-columns:minmax(0,1fr); }
  .etx-mobile-dock { inset-inline:7px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  #cinemaLoadingScreen .cinema-loader-brand::before,#cinemaLoadingScreen .cinema-loader-brand::after { animation:none!important; }
}

:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after, :root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
:root[data-theme="light"] .etx-mobile-dock { background:rgba(255,255,255,.96); border-color:rgba(20,25,37,.14); box-shadow:0 10px 36px rgba(20,25,37,.18); }
