/* Responsive hardening: compact phones, Telegram safe areas, long content */
html,body{width:100%;max-width:100%;overflow-x:hidden}
.app{width:100%}

.app .topbar>div,
.app .quick-choice>div:first-child,
.app .movie-card>div,
.app .catalog-card>div,
.app .catalog-head>div,
.app .detail-title-row h2,
.app .filter-row>span:first-child,
.app .filter-row .value,
.app .result-head>div{min-width:0}

.app .quick-choice .muted,
.app .movie-card h3,
.app .catalog-card h3,
.app .catalog-note,
.app .detail-title-row h2,
.app .filter-row>span,
.app .result-head{overflow-wrap:anywhere}

.app main{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
.app .nav{padding-bottom:env(safe-area-inset-bottom)}
.app .nav button{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .toast{bottom:calc(84px + env(safe-area-inset-bottom))}

.app .home-status-card{min-width:0;overflow:hidden}
.app .home-status-card strong,.app .home-status-card .muted{min-width:0}
.app .library-head,.app .catalog-head,.app .result-head{min-width:0}

/* Full movie card: explicit watchlist action instead of icon-only control. */
.app .detail-body{display:flex;flex-direction:column}
.app .detail-title-row{display:contents}
.app #detailTitle{order:0;margin-bottom:8px}
.app #detailMeta{order:1}
.app .detail-body>.rating-links{order:2}
.app #detailDesc{order:3}
.app #detailStatus{order:4}
.app #detailBookmarkBtn{
  order:5;
  width:100%;height:auto;min-height:48px;
  margin-top:14px;padding:13px 14px;
  border:0;border-radius:15px;
  display:block;
  background:var(--accent);color:var(--accentText);
  font-weight:750;font-size:15px;text-align:center;
}
.app #detailBookmarkBtn svg{display:none}
.app #detailBookmarkBtn::after{content:"＋ Хочу посмотреть"}
.app #detailBookmarkBtn.saved{
  background:var(--panel2);color:var(--text);
  border:1px solid var(--line);
}
.app #detailBookmarkBtn.saved::after{content:"✓ Хочу посмотреть"}
.app #detailBookmarkBtn[hidden]{display:none}

/* The action button already communicates none/watchlist. Keep only extra state such as “На вечер”. */
.app .detail-body:has(#detailBookmarkBtn:not([hidden])) #detailStatus .badge:first-child{display:none}
.app .detail-body:has(#detailBookmarkBtn:not([hidden])) #detailStatus:not(:has(.badge:nth-child(2))){display:none}

.app #personalRating{order:6}
.app #tonightBtn{order:7}
.app #cancelTonightBtn{order:8}
.app #markWatchedBtn{order:9}
.app .detail-body>.card{order:10}
.app .detail-body>.similar-section{order:11}
.app #detailReturnBtn{order:12}

/* Reuse the existing sticky header as the visual home for the return control. */
.app:has(#detailStickyBack.show) header{
  background:var(--bg);
  backdrop-filter:none;
}
.app:has(#detailStickyBack.show) header .topbar>div:first-child{visibility:hidden}

.app .detail-sticky-back{
  z-index:31;
  top:10px;
  left:max(12px,calc(50% - 258px));
  width:auto;height:42px;min-width:88px;
  padding:0 12px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:21px;font-weight:750;
  background:var(--panel2);
  backdrop-filter:none;
}
.app .detail-sticky-back::after{
  content:"Назад";
  font-size:14px;
  line-height:1;
}
@media(max-width:540px){
  .app .detail-sticky-back{left:12px}
}

@media (min-width:391px) and (max-width:430px){
  .app .home-status-card{padding:11px}
  .app .home-status-card strong{font-size:23px}
  .app .home-status-card .muted{font-size:11px}
}

@media (max-width:390px){
  .app .home-status-card{grid-template-columns:28px max-content minmax(0,1fr);column-gap:12px}
  .app .home-status-card strong{margin:0;font-size:clamp(22px,7vw,25px);white-space:nowrap}
  .app .home-status-card .muted{overflow-wrap:anywhere}
}

@media (max-width:350px){
  .app main{padding-left:12px;padding-right:12px}
  .app .hero{padding:16px}
  .app h1{font-size:clamp(24px,8vw,28px)}
  .app h2{font-size:22px}
  .app .actions,.app .searchbar{grid-template-columns:1fr}
  .app .movie-card,.app .catalog-card{grid-template-columns:72px minmax(0,1fr);gap:10px;padding-right:42px}
  .app .movie-card .poster,.app .catalog-card .poster{width:72px}
  .app .nav button{font-size:11px;padding-left:1px;padding-right:1px}
  .app .type-options,.app .year-presets,.app .year-range,.app .sheet-actions{grid-template-columns:1fr}
  .app .filter-row{gap:8px;padding-left:12px;padding-right:12px}
  .app .filter-row .value{font-size:13px}
  .app .sheet{padding-left:12px;padding-right:12px}
  .app .library-head{flex-wrap:wrap}
}