/* ═══════════════════════════════════════════════════════════════════════════
   COMPOSE — Topbar v6
   LEFT: website-exact brand "Tolstoy Workspace | Compose"
   CENTRE: file name + blue-dot unsaved indicator
   RIGHT: icon buttons that form the TOP of each sidebar panel
   ═══════════════════════════════════════════════════════════════════════════ */

#topbar {
  display: flex;
  align-items: center;
  padding: 0 0 0 20px;   /* right padding 0 — icons bleed into sidebar */
  gap: 0;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  height: var(--topbar-h);
  position: relative;
  z-index: var(--z-topbar);
}

/* ── LEFT: Website-exact brand ───────────────────────────────────────── */
.topbar-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-right: 20px;
  height: 100%;
}

/* Exact replica of .hdr-brand from tolstoyworkspace.com */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.topbar-brand-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text);
  white-space: nowrap;
}
.topbar-brand-sep {
  width: 1px;
  height: 14px;
  background: var(--border-strong);
  flex-shrink: 0;
}
.topbar-brand-sub {
  font-size: 12px;
  font-weight: 500;
  color: #3356E8;
  opacity: 0.85;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ── CENTRE: Document title + unsaved dot ────────────────────────────── */
.topbar-centre {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.topbar-title-shell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.topbar-title-btn {
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.01em;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  cursor: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
  transition: background var(--t-fast) var(--ease);
  border-bottom: 1px solid transparent;
}
.topbar-title-btn:hover {
  background: var(--fill-hover);
  border-bottom-color: var(--border-strong);
}

.topbar-title-input {
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.01em;
  background: var(--bg-card);
  border: 1px solid var(--border-focus);
  border-radius: var(--r-sm);
  outline: none;
  padding: 4px 6px;
  min-width: 80px;
  max-width: 340px;
  box-shadow: 0 0 0 3px rgba(51,86,232,.10);
}

/* Blue dot for unsaved — replaces text save-state */
.topbar-unsaved-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3356E8;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  pointer-events: none;
}
.topbar-unsaved-dot.is-visible { opacity: 1; }

/* Legacy save state — hidden, kept for JS compat */
.topbar-save-state { display: none !important; }

/* Editing state */
#topbar-title-shell.is-editing .topbar-title-btn      { display: none; }
#topbar-title-shell:not(.is-editing) .topbar-title-input { display: none; }

/* ── RIGHT: Icon buttons — form the TOP of the sidebar ──────────────── */
.topbar-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  /* No left padding — word count has its own border */
}

.topbar-wordcount {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  padding: 0 12px;
  border-right: 1px solid var(--border);
  user-select: none;
  cursor: pointer;
  height: 100%;
  display: flex;
  align-items: center;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  margin-right: 4px;
}
.topbar-wordcount:hover {
  background: var(--fill-hover);
  color: var(--text-sec);
}

/* Stats popover */
#stats-popover {
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px 16px;
  z-index: var(--z-modal);
  min-width: 180px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
#stats-popover.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 3px 0;
  font-size: 12px;
}
.stats-row-label { color: var(--text-muted); }
.stats-row-val   { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/*
 * Topbar icon buttons — each one IS the header of its sidebar panel.
 * No left borders except after the wordcount.
 * Active = solid blue background (website button style).
 */
.topbar-btn {
  width: 44px;
  height: var(--topbar-h);
  border-left: none;
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sec);
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
  flex-shrink: 0;
  position: relative;
}
.topbar-btn svg    { width: 17px; height: 17px; }
.topbar-btn:hover  { background: var(--fill-hover); color: var(--text); }
.topbar-btn:active { background: var(--fill-active); }

/* Active: accent icon on subtle fill — matches toolbar icon active style */
.topbar-btn.is-active {
  background: var(--fill-selected);
  color: var(--accent);
  border-bottom-color: transparent;
}
.topbar-btn.is-active:hover {
  background: rgba(var(--accent-rgb), .13);
  color: var(--accent);
}


/* Responsive */

/* ── Mobile (≤767px) ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Hide brand — save space */
  .topbar-left { display: none; }

  /* Topbar: standard flex, title centred naturally */
  #topbar {
    padding: 0 4px 0 4px;
    gap: 2px;
  }

  /* Centre section takes available space, title centred within it */
  .topbar-centre {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* NO pointer-events: none — title must be tappable */
  }

  .topbar-title-btn,
  .topbar-title-input {
    max-width: 160px;
    font-size: 13px;
  }

  /* Word count: visible and compact */
  .topbar-wordcount {
    display: flex;
    font-size: 11px;
    padding: 0 6px;
    border-right: none;
    margin-right: 0;
    white-space: nowrap;
  }

  /* Icon buttons: tighter */
  .topbar-btn {
    width: 40px;
  }
}