/* Rabitalk desktop repair v2
   IMPORTANT: desktop-only. Mobile / tablet <= 850px remains controlled by existing app CSS. */
@media (min-width:851px){
  html,body{width:100%;min-width:0}
  body{overflow-x:hidden}

  /* The app CSS already uses a fixed sidebar + margin-left workspace.
     Do not combine that with CSS Grid: doing both compressed the workspace twice. */
  .app-shell{
    display:block!important;
    width:100%!important;
    height:100dvh!important;
    min-height:100vh!important;
    overflow:hidden!important;
  }
  .sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:290px!important;
    height:100dvh!important;
    padding:27px 22px!important;
  }
  .workspace{
    position:relative!important;
    display:block!important;
    width:calc(100% - 290px)!important;
    max-width:none!important;
    height:100dvh!important;
    margin:0 0 0 290px!important;
    padding:112px clamp(30px,4vw,64px) 52px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  .topbar{
    left:290px!important;
    right:0!important;
    padding:20px clamp(30px,4vw,64px)!important;
  }
  .workspace>.topbar>div,
  .workspace>.view,
  .workspace>.notice{
    width:100%!important;
    min-width:0!important;
  }
  .workspace>.view.active{display:block!important}

  /* Keep main content readable on very wide monitors, without turning it into a phone column. */
  #view-conversations,
  #view-chats,
  #view-stories{
    max-width:1180px!important;
    margin-left:0!important;
    margin-right:auto!important;
  }
  #view-identity{
    max-width:880px!important;
    margin-left:0!important;
    margin-right:auto!important;
  }

  .section-head{width:100%;gap:20px}
  .conversation-list,.request-list{width:100%;max-width:980px}
  .conversation-row,.request-row{min-width:0}
  .stories-view{width:100%!important;max-width:1100px!important;margin:0!important}
  .own-story-card{width:100%;grid-template-columns:auto minmax(0,1fr) auto}
  .story-feed{width:100%;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
  .story-trail-card{min-width:0}

  .circle-search-panel{width:100%;max-width:900px}
  .contact-grid{
    width:100%;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .contact-card{
    width:100%;
    min-width:0;
    border:1px solid var(--line)!important;
    border-radius:16px!important;
    background:var(--panel)!important;
    padding:13px 14px!important;
  }
  .minimal-contact-card{grid-template-columns:auto minmax(0,1fr)!important}
  .contact-main{min-width:0}

  .identity-card{
    width:100%!important;
    max-width:760px!important;
    margin:20px 0!important;
    padding:30px!important;
  }
  .identity-settings{grid-template-columns:minmax(0,1fr) auto!important}

  /* Desktop chat window */
  .chat-panel{
    top:28px!important;
    right:28px!important;
    bottom:28px!important;
    left:auto!important;
    width:min(680px,calc(100vw - 350px))!important;
    max-width:680px!important;
    border-radius:24px!important;
  }
  .chat-panel header{padding:16px 20px}
  .messages{padding:20px 22px}
  .composer{padding:12px 14px}

  /* Authentication screens */
  .auth-shell{grid-template-columns:minmax(430px,1.05fr) minmax(430px,.95fr)!important}
  .auth-card{width:min(560px,calc(100% - 64px))!important;padding:42px 44px!important}
  .brand-panel{padding:clamp(52px,6vw,90px)!important}

  /* Legacy standalone pages */
  .wrap{width:min(1180px,calc(100% - 64px))!important;max-width:1180px!important;margin-inline:auto!important}
  .wrap>.grid{grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr)!important;gap:20px!important}

  /* Calls */
  #audio-call-app{width:100%;min-height:100vh}
  #video-call-app{width:100%;height:100vh}
}

@media (min-width:1440px){
  #view-conversations,#view-chats,#view-stories{max-width:1260px!important}
  .contact-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}