/* ============================================================
   v67 — premium shared scrollbars + splitters
   ------------------------------------------------------------
   Purpose: reuse the violet internal scrollbar from Blog cards
   and standardize brown→violet split handles on two-pane screens.
   ============================================================ */
:root{
  --bp-scroll-thumb: rgba(154, 111, 255, .55);
  --bp-scroll-thumb-strong: rgba(107, 44, 255, .78);
  --bp-scroll-track: transparent;
  --bp-split-idle: #D8CDB9;
  --bp-split-active: var(--purple, #6B2CFF);
}

/* Premium internal scrollbars */
.bp-premium-scroll,
.loop-create-sidebar .choice-tools-body,
.loop-create-sidebar .loop-create-stage,
.messages-shell,
.messages-mobile-list,
.messages-layout,
.thread-list,
.dm-thread,
.panel-body,
.thread-scroll,
.blog-side-panel,
.blog-card-body,
.blog-card-content,
.annotation-list{
  scrollbar-width: thin;
  scrollbar-color: var(--bp-scroll-thumb) var(--bp-scroll-track);
}
.bp-premium-scroll::-webkit-scrollbar,
.loop-create-sidebar .choice-tools-body::-webkit-scrollbar,
.loop-create-sidebar .loop-create-stage::-webkit-scrollbar,
.messages-shell::-webkit-scrollbar,
.messages-mobile-list::-webkit-scrollbar,
.messages-layout::-webkit-scrollbar,
.thread-list::-webkit-scrollbar,
.dm-thread::-webkit-scrollbar,
.panel-body::-webkit-scrollbar,
.thread-scroll::-webkit-scrollbar,
.blog-side-panel::-webkit-scrollbar,
.blog-card-body::-webkit-scrollbar,
.blog-card-content::-webkit-scrollbar,
.annotation-list::-webkit-scrollbar{
  width:6px;
  height:6px;
}
.bp-premium-scroll::-webkit-scrollbar-track,
.loop-create-sidebar .choice-tools-body::-webkit-scrollbar-track,
.loop-create-sidebar .loop-create-stage::-webkit-scrollbar-track,
.messages-shell::-webkit-scrollbar-track,
.messages-mobile-list::-webkit-scrollbar-track,
.messages-layout::-webkit-scrollbar-track,
.thread-list::-webkit-scrollbar-track,
.dm-thread::-webkit-scrollbar-track,
.panel-body::-webkit-scrollbar-track,
.thread-scroll::-webkit-scrollbar-track,
.blog-side-panel::-webkit-scrollbar-track,
.blog-card-body::-webkit-scrollbar-track,
.blog-card-content::-webkit-scrollbar-track,
.annotation-list::-webkit-scrollbar-track{
  background:transparent;
}
.bp-premium-scroll::-webkit-scrollbar-thumb,
.loop-create-sidebar .choice-tools-body::-webkit-scrollbar-thumb,
.loop-create-sidebar .loop-create-stage::-webkit-scrollbar-thumb,
.messages-shell::-webkit-scrollbar-thumb,
.messages-mobile-list::-webkit-scrollbar-thumb,
.messages-layout::-webkit-scrollbar-thumb,
.thread-list::-webkit-scrollbar-thumb,
.dm-thread::-webkit-scrollbar-thumb,
.panel-body::-webkit-scrollbar-thumb,
.thread-scroll::-webkit-scrollbar-thumb,
.blog-side-panel::-webkit-scrollbar-thumb,
.blog-card-body::-webkit-scrollbar-thumb,
.blog-card-content::-webkit-scrollbar-thumb,
.annotation-list::-webkit-scrollbar-thumb{
  background:var(--bp-scroll-thumb);
  border-radius:999px;
}
.bp-premium-scroll::-webkit-scrollbar-thumb:hover,
.loop-create-sidebar .choice-tools-body::-webkit-scrollbar-thumb:hover,
.loop-create-sidebar .loop-create-stage::-webkit-scrollbar-thumb:hover,
.messages-shell::-webkit-scrollbar-thumb:hover,
.messages-mobile-list::-webkit-scrollbar-thumb:hover,
.messages-layout::-webkit-scrollbar-thumb:hover,
.thread-list::-webkit-scrollbar-thumb:hover,
.dm-thread::-webkit-scrollbar-thumb:hover,
.panel-body::-webkit-scrollbar-thumb:hover,
.thread-scroll::-webkit-scrollbar-thumb:hover,
.blog-side-panel::-webkit-scrollbar-thumb:hover,
.blog-card-body::-webkit-scrollbar-thumb:hover,
.blog-card-content::-webkit-scrollbar-thumb:hover,
.annotation-list::-webkit-scrollbar-thumb:hover{
  background:var(--bp-scroll-thumb-strong);
}

/* Loop creation sidebar: internal scroll, no Chrome-page scrolling. */
@media (min-width:901px){
  body.loop-choice-page .loop-create-sidebar{
    min-height:0!important;
    max-height:calc(100dvh - 112px)!important;
  }
  body.loop-choice-page .loop-create-sidebar .choice-tools-body{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-right:16px!important;
  }
}

/* Messages: WhatsApp-like desktop flow, composer fixed inside the chat panel. */
@media (min-width:761px){
  .messages-shell{
    height:calc(100dvh - 108px)!important;
    min-height:0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }
  .messages-desktop-head{
    flex:0 0 auto!important;
  }
  .messages-layout{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:var(--bp-messages-left, 230px) 10px minmax(0,1fr)!important;
    gap:0!important;
    align-items:stretch!important;
    overflow:hidden!important;
  }
  .thread-list{
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    border-radius:20px 0 0 20px!important;
  }
  .dm-window{
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
    border-radius:0 20px 20px 0!important;
    padding:0!important;
    gap:0!important;
    background:#fff!important;
  }
  .dm-window .conversation-title{
    flex:0 0 auto!important;
    padding:16px 18px!important;
    border-bottom:1px solid var(--md-outline-soft)!important;
  }
  .dm-thread{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    padding:16px 18px!important;
    background:linear-gradient(180deg,#FBF9F3,#FCFAF5)!important;
  }
  .dm-composer{
    flex:0 0 auto!important;
    margin-top:0!important;
    padding:10px 12px!important;
    border-top:1px solid var(--md-outline-soft)!important;
    background:var(--md-surface)!important;
  }
}

/* Messages mobile detail: v71 hardening.
   L'appbar est dans .messages-shell, donc le shell doit prendre 100dvh.
   Seul le fil .dm-thread scrolle. La barre de réponse reste fixée au bas du smartphone. */
@media (max-width:760px){
  body.mobile-message-detail .messages-shell{
    height:100dvh!important;
    min-height:0!important;
    flex:1 1 auto!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    padding:0!important;
  }

  body.mobile-message-detail .mobile-message-appbar{
    flex:0 0 58px!important;
    height:58px!important;
    position:relative!important;
    top:auto!important;
    z-index:360!important;
  }

  body.mobile-message-detail .messages-desktop-layout{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  body.mobile-message-detail .messages-resizer{display:none!important;}

  body.mobile-message-detail .dm-window{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    overflow:hidden!important;
    padding:0!important;
    background:linear-gradient(180deg,#FBF9F3,#FCFAF5)!important;
  }

  body.mobile-message-detail .dm-thread{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    padding:12px 10px calc(92px + env(safe-area-inset-bottom))!important;
    scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom))!important;
  }

  body.mobile-message-detail .dm-composer{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:500!important;
    margin:0!important;
    padding:9px 10px calc(9px + env(safe-area-inset-bottom))!important;
    background:color-mix(in oklab,var(--md-surface) 98%,transparent)!important;
    border-top:1px solid var(--md-outline-soft)!important;
    box-shadow:0 -12px 32px -28px rgba(20,24,60,.38)!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
  }
}

/* Brown → violet splitters shared across two-pane screens. */
.pane-resizer,
.blog-resizer,
.messages-resizer,
.bp-split-resizer{
  align-self:stretch;
  width:10px;
  min-width:10px;
  border-radius:999px;
  background:transparent!important;
  cursor:col-resize;
  position:relative;
  z-index:8;
  margin:18px 0;
  border:0;
  padding:0;
}
.pane-resizer::before,
.blog-resizer::before,
.messages-resizer::before,
.bp-split-resizer::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:3px;
  transform:translateX(-50%);
  border-radius:999px;
  background:var(--bp-split-idle)!important;
  box-shadow:0 0 0 1px rgba(216,205,185,.16);
  transition:background .15s,width .15s,box-shadow .15s;
}
.pane-resizer:hover::before,
.blog-resizer:hover::before,
.messages-resizer:hover::before,
.bp-split-resizer:hover::before,
.pane-resizer.is-dragging::before,
.blog-resizer.is-dragging::before,
.messages-resizer.is-dragging::before,
.bp-split-resizer.is-dragging::before{
  width:4px;
  background:var(--bp-split-active)!important;
  box-shadow:0 0 0 5px rgba(107,44,255,.08),0 12px 28px -18px rgba(107,44,255,.58);
}
.messages-resizer{display:block;}
@media(max-width:760px){
  .messages-resizer{display:none!important;}
}

/* ============================================================
   v72 — Blog editor desktop: stretch Annotations card to the
   available bottom of the screen.
   ------------------------------------------------------------
   Problem: previous compact limits kept the Annotations card
   around 440px high, leaving a large empty area below the card.
   The sidebar now behaves as a vertical flex column: collapsed
   cards keep their natural height and the open Annotations card
   takes the remaining viewport height. The annotation list keeps
   its own internal scrollbar.
   ============================================================ */
@media (min-width:1041px){
  body.page-blog .blog-editor-layout{
    align-items:stretch!important;
  }
  body.page-blog .blog-side-panel{
    height:calc(100dvh - 166px)!important;
    min-height:620px!important;
    max-height:calc(100dvh - 166px)!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
  }
  body.page-blog .blog-tool-card{
    flex:0 0 auto!important;
  }
  body.page-blog .blog-tool-card[data-accordion-card="annotations"].is-open{
    flex:1 1 auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  body.page-blog .blog-tool-card[data-accordion-card="annotations"].is-open .blog-tool-header{
    flex:0 0 auto!important;
  }
  body.page-blog .blog-tool-card[data-accordion-card="annotations"].is-open .blog-tool-body{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }
  body.page-blog .blog-tool-card[data-accordion-card="annotations"].is-open .annotation-control-row,
  body.page-blog .blog-tool-card[data-accordion-card="annotations"].is-open .annotation-inline-popover{
    flex:0 0 auto!important;
  }
  body.page-blog .blog-tool-card[data-accordion-card="annotations"].is-open .annotation-list{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
}


/* ============================================================
   v73 — full-height workspaces on desktop
   ------------------------------------------------------------
   Decision: on desktop, the main work panels must reach the
   bottom of the viewport. The floating dock can overlay them;
   each panel owns its own scroll instead of being visually cut.
   ============================================================ */
@media (min-width:901px){
  body.choice-page-v70 .app-main{
    height:calc(100dvh - 76px)!important;
    min-height:0!important;
    padding:0!important;
    overflow:hidden!important;
    display:block!important;
  }
  body.choice-page-v70 .choice-workspace{
    height:100%!important;
    min-height:0!important;
    align-items:stretch!important;
  }
  body.choice-page-v70 .choice-left-pane,
  body.choice-page-v70 .choice-workspace .loop-create-sidebar{
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  body.choice-page-v70 .choice-left-pane{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:28px 28px 128px!important;
    scrollbar-gutter:stable!important;
  }
  body.choice-page-v70 .choice-left-pane .loop-choice-grid{
    min-height:min-content!important;
    grid-template-rows:repeat(3,minmax(152px,1fr))!important;
    padding-bottom:0!important;
  }
  body.choice-page-v70 .choice-workspace .loop-create-sidebar{
    display:flex!important;
    flex-direction:column!important;
  }
  body.choice-page-v70 .choice-workspace .loop-create-sidebar .choice-tools-head{
    flex:0 0 auto!important;
  }
  body.choice-page-v70 .choice-workspace .loop-create-sidebar .choice-tools-body{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:24px 26px 128px!important;
    scrollbar-gutter:stable!important;
  }
}

@media (min-width:1041px){
  body.page-blog .app-main{
    width:min(calc(100vw - 28px),1920px)!important;
    max-width:none!important;
    height:calc(100dvh - 76px)!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:0 18px 0!important;
    overflow:hidden!important;
    display:block!important;
  }
  body.page-blog .blog-editor-shell{
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
    display:block!important;
  }
  body.page-blog .blog-editor-layout{
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    align-items:stretch!important;
  }
  body.page-blog .blog-editor-main{
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-bottom:128px!important;
    scrollbar-gutter:stable!important;
  }
  body.page-blog .blog-write-card{
    min-height:100%!important;
  }
  body.page-blog .blog-side-panel{
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
  }
  body.page-blog .blog-tool-card{
    flex:0 0 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  body.page-blog .blog-tool-card.is-open{
    flex:1 1 0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    display:flex!important;
    flex-direction:column!important;
  }
  body.page-blog .blog-tool-card.is-open .blog-tool-header{
    flex:0 0 auto!important;
  }
  body.page-blog .blog-tool-card.is-open .blog-tool-body{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    display:block!important;
    padding:12px 18px 18px!important;
    scrollbar-gutter:stable!important;
  }
  body.page-blog .blog-tool-card[data-accordion-card="annotations"].is-open .blog-tool-body{
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  body.page-blog .blog-tool-card[data-accordion-card="annotations"].is-open .annotation-control-row,
  body.page-blog .blog-tool-card[data-accordion-card="annotations"].is-open .annotation-inline-popover{
    flex:0 0 auto!important;
  }
  body.page-blog .blog-tool-card[data-accordion-card="annotations"].is-open .annotation-list{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
}


/* v73 refinement — when several blog cards are open, the last meaningful
   open card in the sidebar gets the remaining height. Earlier open cards keep
   their natural content height and remain scrollable if needed. */
@media (min-width:1041px){
  body.page-blog .blog-side-panel .blog-tool-card.is-open{
    flex:0 0 auto!important;
  }
  body.page-blog .blog-side-panel:not(:has(.blog-tool-card[data-accordion-card="snapshot"].is-open)):not(:has(.blog-tool-card[data-accordion-card="cowrite"].is-open)):not(:has(.blog-tool-card[data-accordion-card="annotations"].is-open)) .blog-tool-card[data-accordion-card="loop"].is-open,
  body.page-blog .blog-side-panel:not(:has(.blog-tool-card[data-accordion-card="cowrite"].is-open)):not(:has(.blog-tool-card[data-accordion-card="annotations"].is-open)) .blog-tool-card[data-accordion-card="snapshot"].is-open,
  body.page-blog .blog-side-panel:not(:has(.blog-tool-card[data-accordion-card="annotations"].is-open)) .blog-tool-card[data-accordion-card="cowrite"].is-open,
  body.page-blog .blog-side-panel .blog-tool-card[data-accordion-card="annotations"].is-open{
    flex:1 1 0!important;
    min-height:0!important;
    max-height:none!important;
  }
}

/* ============================================================
   v74 — restore page-level scroll on desktop workspaces
   ------------------------------------------------------------
   v73 made blog_editor.php and boucle_choice.php true fixed
   viewport workspaces with internal panel scroll. That removed
   the browser/app scrollbar and made the UI feel clipped.

   Desktop decision for these two prototype screens:
   - panels must still reach at least the bottom of the viewport;
   - the document/page owns the main vertical scroll;
   - internal scroll remains only where it is semantically useful
     inside dense tool bodies such as annotation lists.
   ============================================================ */
@media (min-width:901px){
  html,
  body.choice-page-v70,
  body.page-blog{
    height:auto!important;
    min-height:100dvh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }

  body.choice-page-v70 .app-main{
    height:auto!important;
    min-height:calc(100dvh - 76px)!important;
    padding:0 18px 128px!important;
    overflow:visible!important;
    display:block!important;
  }

  body.choice-page-v70 .choice-workspace{
    height:auto!important;
    min-height:calc(100dvh - 76px)!important;
    align-items:stretch!important;
    overflow:visible!important;
  }

  body.choice-page-v70 .choice-left-pane,
  body.choice-page-v70 .choice-workspace .loop-create-sidebar{
    height:auto!important;
    min-height:calc(100dvh - 76px)!important;
    max-height:none!important;
    overflow:visible!important;
  }

  body.choice-page-v70 .choice-left-pane{
    padding:28px 28px 128px!important;
    scrollbar-gutter:auto!important;
  }

  body.choice-page-v70 .choice-left-pane .loop-choice-grid{
    min-height:0!important;
    grid-template-rows:none!important;
    padding-bottom:0!important;
  }

  body.choice-page-v70 .choice-workspace .loop-create-sidebar{
    display:flex!important;
    flex-direction:column!important;
  }

  body.choice-page-v70 .choice-workspace .loop-create-sidebar .choice-tools-body{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    padding:24px 26px 128px!important;
    scrollbar-gutter:auto!important;
  }
}

@media (min-width:1041px){
  body.page-blog .app-main{
    width:min(calc(100vw - 28px),1920px)!important;
    max-width:none!important;
    height:auto!important;
    min-height:calc(100dvh - 76px)!important;
    margin:0 auto!important;
    padding:0 18px 128px!important;
    overflow:visible!important;
    display:block!important;
  }

  body.page-blog .blog-editor-shell{
    height:auto!important;
    min-height:calc(100dvh - 76px)!important;
    overflow:visible!important;
    display:block!important;
  }

  body.page-blog .blog-editor-layout{
    height:auto!important;
    min-height:calc(100dvh - 76px)!important;
    max-height:none!important;
    align-items:stretch!important;
    overflow:visible!important;
  }

  body.page-blog .blog-editor-main{
    height:auto!important;
    min-height:calc(100dvh - 76px)!important;
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:0!important;
    scrollbar-gutter:auto!important;
  }

  body.page-blog .blog-write-card{
    min-height:calc(100dvh - 76px)!important;
  }

  body.page-blog .blog-side-panel{
    height:auto!important;
    min-height:calc(100dvh - 76px)!important;
    max-height:none!important;
    overflow:visible!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
  }

  body.page-blog .blog-tool-card{
    flex:0 0 auto!important;
    min-height:0!important;
    max-height:none!important;
  }

  body.page-blog .blog-tool-card.is-open{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    display:flex!important;
    flex-direction:column!important;
  }

  body.page-blog .blog-tool-card.is-open .blog-tool-body{
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    padding:12px 18px 18px!important;
    scrollbar-gutter:auto!important;
  }

  body.page-blog .blog-tool-card[data-accordion-card="annotations"].is-open .blog-tool-body{
    display:flex!important;
    flex-direction:column!important;
    overflow:visible!important;
  }

  body.page-blog .blog-tool-card[data-accordion-card="annotations"].is-open .annotation-list{
    max-height:none!important;
    overflow:visible!important;
  }

  /* Keep the v73 intent: when the right column has spare vertical room,
     the last meaningful opened card absorbs it. If content exceeds the
     viewport, the browser scrollbar takes over. */
  body.page-blog .blog-side-panel .blog-tool-card.is-open{
    flex:0 0 auto!important;
  }
  body.page-blog .blog-side-panel:not(:has(.blog-tool-card[data-accordion-card="snapshot"].is-open)):not(:has(.blog-tool-card[data-accordion-card="cowrite"].is-open)):not(:has(.blog-tool-card[data-accordion-card="annotations"].is-open)) .blog-tool-card[data-accordion-card="loop"].is-open,
  body.page-blog .blog-side-panel:not(:has(.blog-tool-card[data-accordion-card="cowrite"].is-open)):not(:has(.blog-tool-card[data-accordion-card="annotations"].is-open)) .blog-tool-card[data-accordion-card="snapshot"].is-open,
  body.page-blog .blog-side-panel:not(:has(.blog-tool-card[data-accordion-card="annotations"].is-open)) .blog-tool-card[data-accordion-card="cowrite"].is-open,
  body.page-blog .blog-side-panel .blog-tool-card[data-accordion-card="annotations"].is-open{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
  }
}