/* Vera can float in the center or stay beside the workspace. The same chat
   element is used in both positions, so moving it never interrupts a reply. */
:root { --cp-dock-width: 400px; }
.cp-layout-bar {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex:none; padding:7px 10px 7px 16px; border:1px solid var(--border-2);
  border-radius:12px; background:var(--panel); color:var(--muted); font-size:11px;
}
.cp-layout-options { display:flex; gap:3px; padding:3px; background:var(--bg); border-radius:8px; }
.cp-layout-options button {
  padding:7px 11px; border:0; border-radius:5px; background:transparent;
  color:var(--muted); font:500 11px/1.2 var(--ui); cursor:pointer;
}
.cp-layout-options button[aria-pressed="true"] { background:var(--raise); color:var(--txt); }
.cp-layout-options button:hover { color:var(--txt); }
.cp-layout-options button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
html .cp-side:not(.cp-open) { visibility:hidden; }
html .cp-side.cp-right {
  top:0!important; right:0!important; bottom:0!important; left:auto!important;
  width:var(--cp-dock-width)!important; max-width:100vw;
  height:100dvh!important; max-height:none!important;
  background:var(--panel)!important; border:1px solid var(--border-2)!important;
  border-radius:0; overflow:hidden; gap:0; justify-content:flex-start;
  transform:translateX(calc(100% + 24px))!important;
}
html .cp-side.cp-right.cp-open { transform:translateX(0)!important; pointer-events:auto; }
html .cp-side.cp-right .cp-layout-bar { border:0; border-bottom:1px solid var(--border); border-radius:0; }
html .cp-side.cp-right .cp-head {
  flex:none; gap:6px; max-height:none!important; opacity:1!important; transform:none!important;
  padding:12px!important; margin:0!important; pointer-events:auto!important;
  border:0!important; border-bottom:1px solid var(--border)!important;
  border-radius:0; box-shadow:none; background:var(--panel); overflow:visible;
}
html .cp-side.cp-right .cp-title { flex:1; }
html .cp-side.cp-right .cp-coin { max-width:64px; overflow:hidden; text-overflow:ellipsis; }
html .cp-side.cp-right .cp-new { width:32px!important; padding:0!important; justify-content:center; }
html .cp-side.cp-right .cp-new span { display:none; }
.cp-side .cp-collapse-icon, .cp-side .cp-collapse-label { display:none; }
html .cp-side.cp-right .cp-close-icon { display:none; }
html .cp-side.cp-right .cp-collapse-icon, html .cp-side.cp-right .cp-collapse-label { display:block; }
html .cp-side.cp-right .cp-close {
  width:auto!important; height:32px!important; padding:0 9px; gap:5px;
  border-radius:7px!important; border:1px solid var(--border-2)!important;
  background:var(--bg)!important; color:var(--txt-2)!important; font:500 11px/1 var(--ui);
}
html .cp-side.cp-right .cp-close:hover { background:var(--raise)!important; color:var(--txt)!important; }
html .cp-side.cp-right .cp-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
html .cp-side.cp-right.cp-open:not(.cp-min-on) .cp-list {
  flex:1 1 0!important; min-height:0; max-height:none!important; opacity:1!important;
  padding:16px!important; margin:0!important; border:0!important; border-radius:0;
  transform:none!important; pointer-events:auto!important; overflow-y:auto!important;
  box-shadow:none; background:transparent; backdrop-filter:none;
}
html .cp-side.cp-right .cp-compose {
  flex:none; padding:12px!important; border-top:1px solid var(--border)!important;
  max-height:55%; overflow-y:auto;
}
html .cp-side.cp-right .cp-crow { flex-wrap:wrap; gap:8px; }
html .cp-side.cp-right .cp-ltools { flex-basis:100%; }
html .cp-side.cp-right .cp-lt { width:30px; height:30px; flex-basis:30px; box-shadow:none; }
html .cp-side.cp-right .cp-input-row { min-width:0; }
html .cp-side.cp-right .cp-disc { text-align:center; }
html .cp-side.cp-right .cp-unavailable-notice { padding:8px 0; }
html .cp-side.cp-right.cp-min-on {
  top:auto!important; height:auto!important; max-height:80dvh!important;
}
html .cp-side.cp-right.cp-min-on .cp-compose { max-height:40dvh; }
html .cp-drawer { z-index:62; }
body.cp-docked .cp-drawer { background:var(--panel); }

/* Reserve a column only when there is room for both workspaces. Smaller screens
   use an overlay while keeping the user's saved position unchanged. */
@media (min-width:1200px) {
  body.cp-docked #app { margin-right:calc(var(--cp-dock-width) + 12px); }
}
@media (min-width:1200px) and (max-width:1799px) {
  body.cp-docked .trade-social-integrated .trade-grid { grid-template-columns:minmax(0,1fr) 246px; gap:10px; }
  body.cp-docked .trade-social-integrated .trade-grid>.coinbar { grid-column:1/-1; grid-row:1; }
  body.cp-docked .trade-social-integrated .trade-left { grid-column:1; grid-row:2/4; }
  body.cp-docked .trade-social-integrated .trade-grid>.ticket { grid-column:2; grid-row:2; position:static; min-height:0; }
  body.cp-docked .trade-social-integrated .trade-grid>.book-card { grid-column:2; grid-row:3; position:static; height:420px; }
  body.cp-docked .trade-social-integrated .col-resizer { display:none; }
  body.cp-docked .community-workspace .social-columns { grid-template-columns:1fr; }
  body.cp-docked .community-workspace .social-directory { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.cp-docked .community-workspace .social-following { display:none; }
  body.cp-docked #view-social .social-discovery { flex-direction:column; align-items:stretch; }
  body.cp-docked .social-search-field { flex:auto; min-width:0; }
  body.cp-docked .community-workspace .social-journal-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  html .cp-side.cp-right { max-width:100vw; border-radius:0; }
  .cp-layout-bar { padding:7px 8px 7px 12px; }
  html .cp-side.cp-right .cp-head { padding:10px!important; }
  html .cp-side.cp-right .cp-coin { display:none; }
  html .cp-side.cp-right .cp-stop { width:32px!important; padding:0!important; justify-content:center; }
  html .cp-side.cp-right .cp-stop span { display:none; }

}
@media (prefers-reduced-motion:reduce) {
  html .cp-side { transition:none!important; }
}