/* Website-only video discovery layout. The native app keeps its established feed. */
@media (min-width: 1024px) {
  html.ohole-website,
  html.ohole-website body { min-height: 100%; background: #f9f9f9; color: #0f0f0f; }

  html.ohole-website .app-shell {
    min-height: 100vh;
    grid-template-columns: 240px minmax(0, 1fr) !important;
    grid-template-rows: 64px minmax(0, 1fr);
    max-width: none !important;
  }

  html.ohole-website .website-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: 240px minmax(240px, 640px) minmax(200px, 1fr);
    align-items: center;
    gap: 24px;
    min-width: 0;
    height: 64px;
    padding: 0 28px 0 22px;
    border-bottom: 1px solid #e8e8e8;
    background: #fff;
  }

  html.ohole-website .website-brand-zone,
  html.ohole-website .website-topbar-actions { display: flex; align-items: center; }
  html.ohole-website .website-brand-zone { gap: 15px; min-width: 0; }
  html.ohole-website .website-menu-toggle,
  html.ohole-website .website-topbar-actions button,
  html.ohole-website .website-search button {
    display: inline-grid;
    place-items: center;
    border: 0;
    cursor: pointer;
  }
  html.ohole-website .website-menu-toggle {
    width: 40px; height: 40px; border-radius: 50%; background: transparent; color: #252525; font-size: 21px;
  }
  html.ohole-website .website-menu-toggle:hover,
  html.ohole-website .website-topbar-actions .website-icon-button:hover { background: #eee; }
  html.ohole-website .website-brand { display: inline-flex; align-items: center; gap: 8px; color: #161616; text-decoration: none; white-space: nowrap; }
  html.ohole-website .website-brand-mark { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: #e10600; color: #fff; font-size: 17px; }
  html.ohole-website .website-brand strong { font-size: 20px; font-weight: 800; letter-spacing: -.06em; }
  html.ohole-website .website-search { display: flex; width: 100%; min-width: 0; height: 42px; }
  html.ohole-website .website-search input {
    width: 100%; min-width: 0; padding: 0 17px; border: 1px solid #c6c6c6; border-right: 0; border-radius: 999px 0 0 999px; outline: 0; background: #fff; color: #111; font: 15px "DM Sans", sans-serif; box-shadow: inset 0 1px 2px #0000000b;
  }
  html.ohole-website .website-search input:focus { border-color: #1c62b9; box-shadow: inset 1px 0 #1c62b9, inset 0 1px #1c62b9, inset 0 -1px #1c62b9; }
  html.ohole-website .website-search button { flex: 0 0 62px; border: 1px solid #c6c6c6; border-radius: 0 999px 999px 0; background: #f8f8f8; color: #242424; font-size: 19px; }
  html.ohole-website .website-search button:hover { background: #eee; }
  html.ohole-website .website-topbar-actions { justify-content: flex-end; gap: 12px; }
  html.ohole-website .website-topbar-actions .website-create { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border-radius: 999px; background: #f2f2f2; color: #171717; font: 700 13px "DM Sans", sans-serif; }
  html.ohole-website .website-topbar-actions .website-icon-button { width: 40px; height: 40px; border-radius: 50%; background: transparent; color: #242424; font-size: 20px; }
  html.ohole-website .website-topbar-actions .website-user-button { width: 36px; height: 36px; overflow: hidden; border-radius: 50%; background: #e10600; color: white; font-size: 17px; }
  html.ohole-website .website-search-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

  html.ohole-website .sidebar {
    grid-column: 1;
    grid-row: 2;
    position: sticky;
    top: 64px;
    width: auto;
    height: calc(100dvh - 64px);
    padding: 18px 14px 16px;
    overflow-y: auto;
    border-right: 0;
    background: #fff;
    backdrop-filter: none;
  }
  html.ohole-website .sidebar > .brand { display: none; }
  html.ohole-website .sidebar > nav { gap: 3px; margin-top: 0; }
  html.ohole-website .sidebar .nav-item,
  html.ohole-website .sidebar .nav-more { min-height: 46px; padding: 0 13px; border-radius: 10px; color: #252525; font-size: 13px; font-weight: 600; }
  html.ohole-website .sidebar .nav-item span { width: 24px; font-size: 20px; color: #303030; }
  html.ohole-website .sidebar .nav-item.active { background: #f1f1f1; color: #111; font-weight: 800; }
  html.ohole-website .sidebar .nav-item.active span { color: #111; }
  html.ohole-website .sidebar .nav-item:hover,
  html.ohole-website .sidebar .nav-more:hover { background: #f4f4f4; }
  html.ohole-website .sidebar .premium-mini { margin-top: 22px; padding: 15px; border-radius: 14px; background: #f7f7f7; color: #222; box-shadow: none; }
  html.ohole-website .sidebar .premium-mini p { color: #555; opacity: 1; }
  html.ohole-website .sidebar .premium-mini button { background: #fff; color: #222; border: 1px solid #ddd; }
  html.ohole-website .sidebar .user-chip { flex: 0 0 auto; }

  html.ohole-website main {
    grid-column: 2;
    grid-row: 2;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 20px clamp(22px, 3.2vw, 54px) 56px !important;
    overflow: visible !important;
  }
  html.ohole-website .view { width: 100%; max-width: none; margin: 0; }
  html.ohole-website #feed-view .fyp-header { display: none !important; }
  html.ohole-website #feed-view .fyp-tabs {
    position: sticky;
    top: 64px;
    z-index: 20;
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: none;
    margin: -20px 0 20px;
    padding: 16px 0 13px;
    overflow-x: auto;
    border-bottom: 1px solid #e8e8e8;
    background: #f9f9f9;
    scrollbar-width: none;
  }
  html.ohole-website #feed-view .fyp-tabs::-webkit-scrollbar { display: none; }
  html.ohole-website #feed-view .fyp-tabs button { flex: 0 0 auto; min-height: 34px; padding: 0 13px; border: 0; border-radius: 8px; background: #eee; color: #252525; font: 650 13px "DM Sans", sans-serif; }
  html.ohole-website #feed-view .fyp-tabs button.active { background: #171717; color: #fff; }
  html.ohole-website #feed-view .social-layout,
  html.ohole-website #feed-view .social-layout > section { display: block !important; width: 100%; max-width: none; min-width: 0; height: auto !important; }
  html.ohole-website #feed-view .post-composer { margin-bottom: 16px; padding: 14px 17px; border-color: #e5e5e5; border-radius: 14px; background: #fff; box-shadow: none; }
  html.ohole-website #feed-view .post-composer-heading label { font-size: 14px; }
  html.ohole-website #feed-view .post-composer textarea { min-height: 44px; margin: 3px 0; font-size: 14px; }
  html.ohole-website #feed-view .stories { margin: 12px 0 20px; }
  html.ohole-website #social-feed {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 285px), 1fr));
    align-items: start;
    gap: 34px 18px !important;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    overscroll-behavior: auto;
  }
  html.ohole-website #social-feed > .social-post {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    flex: initial !important;
    flex-direction: column;
    gap: 8px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    scroll-snap-align: none !important;
  }
  html.ohole-website #social-feed .social-post-head { order: 2; min-height: 38px; gap: 10px; margin: 2px 0 0; color: #181818; text-shadow: none; }
  html.ohole-website #social-feed .social-post-head > div { min-width: 0; }
  html.ohole-website #social-feed .social-post-head a,
  html.ohole-website #social-feed .social-post-head time { color: #222 !important; text-shadow: none; }
  html.ohole-website #social-feed .social-post-head time { color: #777 !important; font-size: 11px; }
  html.ohole-website #social-feed .social-post-head .social-follow { padding: 6px 10px; border: 1px solid #ddd; border-radius: 999px; background: #fff; color: #222 !important; text-shadow: none; }
  html.ohole-website #social-feed .social-body { order: 3; display: -webkit-box; max-height: 2.8em; margin: -4px 0 0 54px; overflow: hidden; color: #353535; font-size: 13px; line-height: 1.4; text-shadow: none; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  html.ohole-website #social-feed .social-post.has-video .social-media-wrap {
    order: 1;
    position: relative !important;
    isolation: isolate;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 13px;
    background: #111 !important;
  }
  html.ohole-website #social-feed .social-post.has-video .media-preview.video-preview {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    overflow: hidden;
    border-radius: inherit;
    background: #111 !important;
  }
  html.ohole-website #social-feed .social-post.has-video .media-preview.video-preview video.social-media {
    position: absolute !important;
    inset: 0 !important;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0;
    object-fit: cover !important;
    object-position: center;
    border-radius: inherit;
    background: #111 !important;
  }
  html.ohole-website #social-feed .social-post.has-video .post-view-count-overlay { top: auto !important; right: 9px !important; bottom: 9px !important; left: auto !important; z-index: 2; padding: 3px 6px; border-radius: 4px; background: #000b; color: #fff; font-size: 10px; }
  html.ohole-website #social-feed .social-post.has-video .social-post-music { order: 4; position: static !important; display: flex; max-width: 100%; margin: 0 0 0 54px; padding: 0; background: transparent; color: #666; text-shadow: none; }
  html.ohole-website #social-feed .social-post.has-video .social-post-music strong,
  html.ohole-website #social-feed .social-post.has-video .social-post-music small { color: #666; text-shadow: none; }
  html.ohole-website #social-feed .social-post.has-video .social-post-actions { order: 5; width: 100%; margin: 0; padding: 0; justify-content: flex-start; gap: 2px; border: 0; }
  html.ohole-website #social-feed .social-post.has-video .social-post-actions .post-action { min-width: 40px; min-height: 34px; padding: 3px 7px; border-radius: 8px; color: #555; }
  html.ohole-website #social-feed .social-post.has-video .social-post-actions .post-action svg { width: 18px; height: 18px; filter: none; }
  html.ohole-website #social-feed .social-post.has-video .social-post-actions .post-action span,
  html.ohole-website #social-feed .social-post.has-video .social-post-actions .post-action b { color: #555; font-size: 11px; text-shadow: none; }
  html.ohole-website #social-feed .social-post.has-video .social-post-actions .post-action.active { color: #c00 !important; background: #f2f2f2 !important; }
  html.ohole-website #social-feed .social-post:not(.has-video) { padding: 14px !important; border: 1px solid #e5e5e5 !important; border-radius: 14px !important; background: #fff !important; }
  html.ohole-website #social-feed > .social-feed-ad { display: block; grid-column: 1 / -1; width: 100%; height: auto; min-height: 0; max-height: none; padding: 16px; border: 1px solid #e5e5e5; border-radius: 14px; scroll-snap-align: none; }
  html.ohole-website #social-feed > .empty-state { grid-column: 1 / -1; }
  html.ohole-website .notification-panel { position: fixed; top: 74px; right: 24px; z-index: 50; width: min(420px, 90vw); max-height: 75vh; overflow: auto; box-shadow: 0 10px 35px #0002; }

  html.ohole-website.ohole-sidebar-collapsed .app-shell { grid-template-columns: 82px minmax(0, 1fr) !important; }
  html.ohole-website.ohole-sidebar-collapsed .sidebar { padding-inline: 8px; }
  html.ohole-website.ohole-sidebar-collapsed .sidebar nav { align-items: center; }
  html.ohole-website.ohole-sidebar-collapsed .sidebar .nav-item,
  html.ohole-website.ohole-sidebar-collapsed .sidebar .nav-more { justify-content: center; width: 60px; padding-inline: 0; font-size: 0; }
  html.ohole-website.ohole-sidebar-collapsed .sidebar .nav-item span { flex: 0 0 24px; font-size: 20px; }
  html.ohole-website.ohole-sidebar-collapsed .sidebar .nav-item b,
  html.ohole-website.ohole-sidebar-collapsed .sidebar .nav-more span:last-child,
  html.ohole-website.ohole-sidebar-collapsed .sidebar .premium-mini,
  html.ohole-website.ohole-sidebar-collapsed .sidebar .user-chip > span:not(.avatar) { display: none !important; }
  html.ohole-website.ohole-sidebar-collapsed .sidebar .user-chip { justify-content: center; }
}

@media (min-width: 701px) and (max-width: 1023px) {
  html.ohole-website .website-topbar { display: none; }
  html.ohole-website #social-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Keep the added chrome out of mobile and native app layouts; undo video overlays for desktop cards. */
html.ohole-website .website-topbar { display: none; }
@media (min-width: 1024px) {
  html.ohole-website .website-topbar { display: grid; }
  html.ohole-website #social-feed .social-post-head { position: static !important; inset: auto !important; z-index: auto; }
  html.ohole-website #social-feed .social-body { position: static !important; inset: auto !important; z-index: auto; }
}