/* ===========================================================================
   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: var(--radius);
  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: 12px; font-weight: 600; color: var(--accent-color, #2c5171);
  text-transform: uppercase; letter-spacing: 0.12em; 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: var(--radius);
  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: var(--radius-sm);
  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);
}

/* ── 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; }

/* In-use spin convention for action buttons (refresh / sync). The JS toggles
   .spinning on the button element; we rotate the inner <i> icon so the button
   chrome stays still. */
.spinning > i { display: inline-block; animation: t2d-spin 0.9s linear infinite; }

/* Tree panel header refresh button — matches the close button's icon-only
   chrome but with a hover background to signal it's actionable. */
.t2d-tree-panel-head .t2d-tree-refresh {
  background: transparent;
  border: 0;
  padding: 4px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  color: inherit;
  opacity: 0.7;
  border-radius: var(--radius-sm);
}
.t2d-tree-panel-head .t2d-tree-refresh:hover { opacity: 1; background: rgba(0,0,0,0.06); }

/* ── Estadísticas finger tab — corpus KPI cards (corpus_kpis.js) ── */
.t2d-kpi-body { padding: 6px 8px; overflow-y: auto; }
.t2d-kpi-empty {
  padding: 14px 6px; font-size: 13px; color: #6b7d8f;
  text-align: center; line-height: 1.2;
}
.t2d-kpi-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.t2d-kpi-card {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: var(--radius-sm);
  background: rgba(70, 130, 180, 0.08);
  min-width: 0; position: relative;
}
.t2d-kpi-card > i.ph {
  font-size: 16px; color: #4682b4; flex: 0 0 auto;
}
.t2d-kpi-meta {
  display: flex; flex-direction: column; min-width: 0; line-height: 1.15;
}
.t2d-kpi-value {
  font-size: 16px; font-weight: 700; color: #2c5171;
}
.t2d-kpi-label {
  font-size: 11px; color: #5c7187;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.t2d-kpi-bar {
  position: absolute; left: 9px; right: 9px; bottom: 3px;
  height: 3px; border-radius: var(--radius-sm); background: rgba(70,130,180,0.15);
}
.t2d-kpi-bar-fill {
  height: 100%; border-radius: var(--radius-sm); background: #4682b4;
}
.t2d-kpi-bar-txt { display: none; }
.t2d-kpi-card .t2d-kpi-graph-btn {
  margin-left: auto; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  color: #4682b4;
}
.t2d-kpi-card .t2d-kpi-graph-btn:hover { background: rgba(70,130,180,0.15); }

/* Queue pulse + clickable error card */
.t2d-kpi-pulse {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #54c47a;
  animation: t2dKpiPulse 1.6s ease-in-out infinite;
}
@keyframes t2dKpiPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}
.t2d-kpi-clickable { cursor: pointer; }
.t2d-kpi-clickable:hover { background: rgba(70, 130, 180, 0.16); }
.t2d-kpi-err-card > i.ph { color: #c0392b; }
.t2d-kpi-err-card .t2d-kpi-value { color: #c0392b; }

/* ── Errores de indexación — right slide panel (log-style listing) ── */
.t2d-kpierr-panel {
  position: fixed; top: 56px; right: 0; bottom: 36px;
  z-index: 1610; width: min(560px, 94vw);
  background: #fff; box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
  display: flex; flex-direction: column;
  transform: translateX(120%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.t2d-kpierr-panel.active { transform: translateX(0); pointer-events: auto; }
.t2d-kpierr-backdrop {
  position: fixed; inset: 0; z-index: 1609;
  background: rgba(20, 40, 60, 0.2); opacity: 0;
  pointer-events: none; transition: opacity 0.25s;
}
.t2d-kpierr-backdrop.active { opacity: 1; pointer-events: auto; }
.t2d-kpierr-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid rgba(70, 130, 180, 0.15);
  flex: 0 0 auto;
}
.t2d-kpierr-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 14px; }
.t2d-kpierr-row { padding: 7px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
.t2d-kpierr-row-head {
  display: flex; align-items: center; gap: 7px; line-height: 1.2; min-width: 0;
}
.t2d-kpierr-row-head > i.ph { color: #c0392b; flex: 0 0 auto; font-size: 16px; }
.t2d-kpierr-name {
  font-size: 13px; font-weight: 600; color: #2c5171;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.t2d-kpierr-date {
  margin-left: auto; flex: 0 0 auto;
  font-size: 11px; color: #8195a8; font-variant-numeric: tabular-nums;
}
.t2d-kpierr-msg {
  margin: 3px 0 0 22px; font-size: 12px; line-height: 1.25;
  color: #6b7d8f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-word;
}

/* Error rows: clickable name + reindex action */
.t2d-kpierr-name { cursor: pointer; }
.t2d-kpierr-name:hover { text-decoration: underline; color: #4682b4; }
.t2d-kpierr-row-head .t2d-kpierr-reindex {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: var(--radius-sm); color: #4682b4;
}
.t2d-kpierr-row-head .t2d-kpierr-reindex:hover { background: rgba(70,130,180,0.12); }
.t2d-kpierr-requeued { opacity: 0.55; }
.t2d-kpierr-requeued .t2d-kpierr-reindex i.ph-check { color: #54c47a; }
@keyframes t2dKpiSpin { to { transform: rotate(360deg); } }
.t2d-kpierr-spin { display: inline-block; animation: t2dKpiSpin 0.9s linear infinite; }