/* ===========================================================================
   Talk2Doc drive — pibiCo two-card + finger-tab reskin (#85)
   Layered ON TOP of pd_drive.css. Scoped to the legacy .pd-* containers so the
   pibiRAG JS keeps all its DOM hooks; this only changes the look + adds the
   finger-tab behaviour to the left card. Load AFTER pd_drive.css.
   =========================================================================== */

/* Drive root = the workspace surface; pale neutral so tab-mask scoops don't
   reveal the body's blue gradient (per pibiCo finger-tab rule). */
#pd-drive-root {
  background: linear-gradient(180deg, #f4f6f8 0%, #e9ebef 100%) !important;
  padding: 8px;
}
.pd-drive-container {
  background: transparent !important;
  gap: 8px;
}

/* ── LEFT card: .pd-sidebar promoted to a pibiCo card-area ───────────────── */
.pd-sidebar.pibico-card-area {
  position: relative;
  /* flex:0 0 auto so the drag JS's explicit width is honoured — pibico.css
     .pibico-card-area sets flex:1 which would stretch it and break the
     splitter (the bar dragged but the card never resized). */
  flex: 0 0 auto;
  width: 320px;                     /* JS (_attachResizeHandle) overrides on drag/restore */
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;                 /* card clips; inner panels scroll */
  background: transparent;          /* the glass layer paints the surface */
  border-right: none;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* White glass surface that pibico-tabs.js masks with the finger scoops */
.pd-sidebar .pibico-glass {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  pointer-events: none;
  z-index: 1;
}

/* Finger-tab row (icon over label) above the glass */
.pd-sidebar .pibico-tab-row {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px 0;
}
.pd-sidebar .pibico-tab {
  flex: 1 1 56px;
  min-width: 48px;
  max-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 5px;
  border: none;
  background: none;
  cursor: pointer;
  color: rgba(44, 81, 113, 0.55);
  font-family: var(--font-body, 'Inter', sans-serif);
  transition: color 0.15s;
}
.pd-sidebar .pibico-tab:hover { color: rgba(44, 81, 113, 0.9); }
.pd-sidebar .pibico-tab.active { color: var(--accent-color, #2c5171); }
.pd-sidebar .pibico-tab svg { width: 16px; height: 16px; }
.pd-sidebar .pibico-tab-label { font-size: 8px; font-weight: 500; line-height: 1; }
.pd-sidebar .pibico-tab.active .pibico-tab-label { font-weight: 600; }

/* Content area below the tabs; each tab panel scrolls internally */
.pd-sidebar .pibico-content {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 4px 6px 6px;
}
.pd-sidebar .pibico-tab-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  gap: 6px;
}

/* The legacy sidebar bits drop their own borders/bg — the card owns the look */
.pd-sidebar .pd-folder-content-area { flex: 1; min-height: 0; overflow-y: auto; }
.pd-sidebar .pd-sidebar-section { border: none; background: transparent; }
.pd-sidebar .pd-workspace-selector { border: none; }
.pd-sidebar .pd-folder-list-header,
.pd-sidebar .pd-section-header { padding: 4px 6px; }
.pd-sidebar .pd-section-title {
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-size: 0.72rem; font-weight: 600; color: var(--accent-color, #2c5171);
  text-transform: uppercase; letter-spacing: 0.3px; line-height: 1;
}

/* ── RIGHT card: .pd-main-panel as a glass card ─────────────────────────── */
.pd-main-panel {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--glass-bg, rgba(255, 255, 255, 0.85)) !important;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Resize handle: api_collab-style draggable splitter between the two cards.
   The pibiRAG JS (_attachResizeHandle) sets .pd-sidebar width on drag; here we
   give it a visible 6px grab bar with a centred pill (hidden 1px line look). */
.pd-resize-handle {
  width: 6px !important;
  background: transparent !important;
  cursor: col-resize;
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
}
.pd-resize-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 48px;
  border-radius: 999px;
  background: rgba(70, 130, 180, 0.35);
  transition: background 0.15s, height 0.15s;
}
.pd-resize-handle:hover::after,
.pd-resize-handle.resizing::after {
  background: rgba(70, 130, 180, 0.85);
  height: 72px;
}

/* Workspace dropdown (Bibliotecas) reads as a pibiCo selector, not a nav bar */
.pd-workspace-dropdown {
  width: 100%;
  border-radius: var(--radius-sm, 8px);
}

/* ── Responsive / PWA (api_collab parity) ──────────────────────────────────
   Tablet/phone: the left card becomes an off-canvas drawer toggled by the
   existing .pd-sidebar-toggle hamburger (adds .sidebar-active on the
   container); the files card goes full-width; the splitter hides; right
   slide panels go full-width. Finger tabs stay horizontal + scrollable. */
@media (max-width: 768px) {
  #pd-drive-root { padding: 6px; }
  .pd-drive-container { position: relative; gap: 0; }

  .pd-sidebar.pibico-card-area {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 86% !important; max-width: 340px;
    z-index: 40;
    transform: translateX(-104%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
  }
  .pd-drive-container.sidebar-active .pd-sidebar.pibico-card-area {
    transform: translateX(0);
  }
  .pd-resize-handle { display: none !important; }
  .pd-main-panel { width: 100% !important; flex: 1 1 100% !important; }

  /* Tabs scroll horizontally if they don't fit */
  .pd-sidebar .pibico-tab-row { flex-wrap: nowrap; overflow-x: auto; }

  /* Right slide panels (document detail + AI chat) take the full screen */
  .pd-details-panel,
  .pd-ai-chat-panel {
    width: 100% !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
  }
}

/* Embed / WebView PWA mode: base.html hides .pibico-tab-row globally for the
   native nav — but the drive's LEFT-card finger tabs are its navigation, so
   keep them visible. Chrome (header/footer) stays hidden by base.html. */
.embed-mobile .pd-sidebar .pibico-tab-row { display: flex !important; }
.embed-mobile #pd-drive-root { height: 100vh; }

/* ── Reader mode ───────────────────────────────────────────────────────────
   Talk2Doc reads/searches a connected corpus (originals live in the external
   DMS); it does not author. Hide upload / folder-create / in-card AI-chat
   affordances. They stay in the DOM so the pibiRAG JS keeps its hooks. */
.t2d-reader-hide,
.pd-upload-trigger { display: none !important; }

/* Phosphor spinner (replaces the old fa-spin loading icon) */
@keyframes t2d-spin { to { transform: rotate(360deg); } }
.t2d-spin { display: inline-block; animation: t2d-spin 0.9s linear infinite; }