/* ==========================================================================
   StoneSmartAI – Chat Sidebar (Phase 7 – CSS Cleanup)
   Ownership: Sidebar layout + chat list scrolling + item menus
   ========================================================================== */

body[data-page="chat"] .app{
  display:grid;
  grid-template-columns: 320px 1fr;
  grid-template-rows: 1fr;
  height: var(--appH);
  min-height: var(--appH);
  overflow:hidden; /* App itself must never scroll */
}

/* Grid children must be allowed to shrink for internal scrolling */
body[data-page="chat"] .app > *{ min-height: 0; }

body[data-page="chat"] .app.sidebar-collapsed{
  grid-template-columns: 0 1fr;
}

/* Partial wrapper must not scroll; it only provides height to the sidebar */
body[data-page="chat"] #partial-sidebar{
  height:100%;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* Sidebar: fixed-height column; only the chat list scrolls */
body[data-page="chat"] .sidebar{
  height:100%;
  min-height:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px 14px;
  overflow:hidden;

  background: var(--card);
  border-right: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

body[data-page="chat"] .sidebar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex: 0 0 auto;
}

body[data-page="chat"] .sidebar-head .brand{
  display:flex;
  align-items:center;
  gap:10px;
}
body[data-page="chat"] .sidebar-head .brand strong{
  font-weight:800;
  letter-spacing:-0.02em;
}

body[data-page="chat"] .sidebar-actions{
  flex: 0 0 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Sidebar scroll container (projects + chats) */
body[data-page="chat"] .sidebar-scroll{
  flex:1 1 auto;
  min-height:0;
  height:0; /* force flexbox to allocate remaining height for scrolling */
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-right:4px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.55) transparent;
}
html[data-theme="dark"] body[data-page="chat"] .sidebar-scroll{
  scrollbar-color: rgba(148,163,184,.45) transparent;
}
body[data-page="chat"] .sidebar-scroll::-webkit-scrollbar{ width: 10px; }
body[data-page="chat"] .sidebar-scroll::-webkit-scrollbar-track{ background: transparent; }
body[data-page="chat"] .sidebar-scroll::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.35);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
body[data-page="chat"] .sidebar-scroll::-webkit-scrollbar-thumb:hover{
  background: rgba(148,163,184,.55);
}

body[data-page="chat"] .sidebar-section{
  display:flex;
  flex-direction:column;
  gap:8px;
}

body[data-page="chat"] .section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
  font-weight:700;
}

body[data-page="chat"] .section-toggle{
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  padding:4px;
  border-radius:8px;
}
body[data-page="chat"] .section-toggle:hover{
  background: rgba(255,255,255,.06);
}
body[data-page="chat"] .section-body{
  display:flex;
  flex-direction:column;
  gap:8px;
}
body[data-page="chat"] .section-body.is-collapsed{
  display:none;
}
body[data-page="chat"] .section-actions{
  display:flex;
  gap:6px;
}

body[data-page="chat"] .chat-search{
  display:flex;
}
body[data-page="chat"] .chat-search input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.45);
  color: var(--text);
  box-shadow: var(--shadow);
}
html[data-theme="dark"] body[data-page="chat"] .chat-search input{
  background: rgba(30,41,59,0.55);
}

body[data-page="chat"] .chat-filters{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
body[data-page="chat"] .filter-btn{
  border:1px solid var(--line);
  background: transparent;
  color: var(--text);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
}
body[data-page="chat"] .filter-btn.is-active{
  background: rgba(255,255,255,0.16);
  outline:2px solid var(--ring);
}
body[data-page="chat"] .chat-tag-filters{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
body[data-page="chat"] .tag-filter{
  border:1px solid var(--line);
  background: transparent;
  color: var(--text);
  border-radius:999px;
  padding:4px 8px;
  font-size:11px;
  cursor:pointer;
}
body[data-page="chat"] .tag-filter.is-active{
  background: rgba(255,255,255,0.16);
  outline:2px solid var(--ring);
}

body[data-page="chat"] .btn.btn-ghost{
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  border-radius:10px;
  padding:6px 8px;
  font-size:12px;
  cursor:pointer;
}
body[data-page="chat"] .btn.btn-ghost:hover{
  background: rgba(255,255,255,.06);
}

body[data-page="chat"] .project-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

body[data-page="chat"] .project-item{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
  cursor:pointer;
}
body[data-page="chat"] .project-item:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
}
body[data-page="chat"] .project-item.active{
  outline:2px solid var(--ring);
}
body[data-page="chat"] .project-item .title{
  font-weight:620;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body[data-page="chat"] .project-item .meta{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

/* =========================
   Role Select (Sidebar Mount)
   ========================= */
body[data-page="chat"] .role-mount{
  width: 100%;
}

body[data-page="chat"] .role-mount #roleSelect{
  width: 100%;
  appearance: none;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.45);
  color: var(--text);
  box-shadow: var(--shadow);

  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

html[data-theme="dark"] body[data-page="chat"] .role-mount #roleSelect{
  background: rgba(30,41,59,0.55);
}

/* Chat list scroll container (the ONLY scroll in sidebar) */
body[data-page="chat"] #chat-list.chat-list{
  flex:0 0 auto;
  min-height:0;
  overflow:visible;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-right:0;

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Chat item cards (rendered by JS) */
body[data-page="chat"] .chat-item{
  position:relative;
  padding:12px 12px 12px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
  cursor:pointer;
  transition: transform .12s ease, filter .12s ease;
}
body[data-page="chat"] .chat-item:hover{ filter: brightness(1.02); transform: translateY(-1px); }
body[data-page="chat"] .chat-item.active{ outline: 2px solid var(--ring); }

body[data-page="chat"] .chat-item .title{
  font-weight:620;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-right:34px;
  display:block;
}

body[data-page="chat"] .chat-item .meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}

body[data-page="chat"] .chat-item.pinned{
  border-color: var(--ring);
}

body[data-page="chat"] .chat-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}
body[data-page="chat"] .chat-tag{
  font-size:11px;
  padding:2px 6px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
}

body[data-page="chat"] .chat-item .badge{
  padding:2px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
}

/* Item menu */
body[data-page="chat"] .chat-item .menu-btn{
  position:absolute;
  right:8px;
  top:8px;
  background:transparent;
  border:0;
  cursor:pointer;
  color:var(--muted);
  padding:8px;
  border-radius:999px;
  z-index: 30;
}
html[data-theme="dark"] body[data-page="chat"] .chat-item .menu-btn{ color:#fff; }
body[data-page="chat"] .chat-item .menu-btn:hover{ background: rgba(0,0,0,.06); }
html[data-theme="dark"] body[data-page="chat"] .chat-item .menu-btn:hover{
  background: rgba(255,255,255,.10);
}

body[data-page="chat"] .chat-item .menu{
  position:absolute;
  right:10px;
  top:40px;
  display:none;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  min-width:160px;
  box-shadow:var(--shadow);
  z-index: 40;
  overflow:hidden;
}
body[data-page="chat"] .chat-item .menu.open{ display:flex; }

/* Wenn ein Item-Menü offen ist: Item nach oben holen, damit Menü nicht "hinter" anderen Items liegt */
body[data-page="chat"] .chat-item{ z-index: 0; }

/* Moderne Browser: z-index automatisch hoch, sobald Menü offen ist */
body[data-page="chat"] .chat-item:has(.menu.open){
  z-index: 9999;
}
body[data-page="chat"] .chat-item:has(.menu.open) .menu{
  z-index: 10000;
}

body[data-page="chat"] .chat-item .menu button{
  appearance:none;
  border:0;
  background:transparent;
  text-align:left;
  padding:10px 12px;
  cursor:pointer;
  color:var(--text);
}
body[data-page="chat"] .chat-item .menu button:hover{ background: rgba(0,0,0,.06); }
html[data-theme="dark"] body[data-page="chat"] .chat-item .menu button:hover{ background: rgba(255,255,255,.06); }

/* Mobile: sidebar becomes FULLSCREEN overlay (over header) */
@media (max-width: 980px){

    /* IMPORTANT: Mobile Chat must use full width (no reserved 320px grid column) */
  body[data-page="chat"] .app{
    grid-template-columns: 1fr;
  }
  body[data-page="chat"] .app.sidebar-collapsed{
    grid-template-columns: 1fr;
  }

  body[data-page="chat"] #partial-sidebar{
    position: fixed;
    inset: 0;              /* FULLSCREEN */
    width: 100%;           /* FULLSCREEN */
    z-index: 2800;         /* (bei dir schon korrekt) */
    overflow: hidden;

    visibility: hidden;
    pointer-events: none;
    background: transparent;
  }

  /* Backdrop (nur sichtbar wenn offen) */
  body[data-page="chat"] #partial-sidebar::before{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    transition: opacity .18s ease;
  }

  /* Sidebar Panel bleibt schmal */
  body[data-page="chat"] #partial-sidebar .sidebar{
    position: relative;
    height: 100%;
    width: min(92vw, 360px);   /* Panel-Breite */
    transform: translateX(-110%);
    transition: transform .18s ease;
    border-radius: 0 20px 20px 0;
    padding-top: var(--safeTop);
  }

  /* Wenn offen (Variante A: #sidebar.open) */
  body[data-page="chat"] #partial-sidebar:has(.sidebar.open){
    visibility: visible;
    pointer-events: auto;
  }
  body[data-page="chat"] #partial-sidebar:has(.sidebar.open)::before{
    opacity: 1;
  }
  body[data-page="chat"] #partial-sidebar .sidebar.open{
    transform: translateX(0);
  }

  /* Wenn offen (Variante B: .app.sidebar-open) */
  body[data-page="chat"] .app.sidebar-open #partial-sidebar{
    visibility: visible;
    pointer-events: auto;
  }
  body[data-page="chat"] .app.sidebar-open #partial-sidebar::before{
    opacity: 1;
  }
  body[data-page="chat"] .app.sidebar-open #partial-sidebar .sidebar{
    transform: translateX(0);
  }
}

/* ==========================================================================
   iOS Safari (Mobile) – backdrop-filter seam fix (sidebar overlay)
   ========================================================================== */
@supports (-webkit-touch-callout: none){
  @media (max-width: 980px){
    body[data-page="chat"] #partial-sidebar .sidebar{
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      background: rgba(255,255,255,0.92) !important;
    }
    html[data-theme="dark"] body[data-page="chat"] #partial-sidebar .sidebar{
      background: rgba(15,23,42,0.92) !important;
    }
  }
}