/*
 * SkyDeck — TweetDeck CSS integration overrides
 * Bridges TweetDeck's absolute-positioned DOM to SkyDeck's flex model
 * while preserving every TweetDeck visual style.
 */

/* ── Global resets ───────────────────────────────────────────────── */
html { overflow: auto !important; }
body {
  background-color: rgb(var(--background)) !important;
  overflow: auto !important;
}
body::before { display: none !important; }

/* ── Application shell ───────────────────────────────────────────── */
.application {
  position: relative !important;
  display: flex !important;
  width: 100vw !important;
}

/* Sidebar — condensed 60px wide, always dark navy */
.app-header {
  position: relative !important;
  width: 60px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: #1c2938 !important;
}
.app-header-inner {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  width: 60px !important;
  min-width: unset !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 8px 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* App-title (logo area at bottom of sidebar) */
.app-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 0 !important;
  background-color: #1c2938 !important;
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}

/* Main content: flex-grow, not left:200px */
.app-content {
  position: relative !important;
  left: auto !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: row !important;
}

/* Column scroll container */
.app-columns-container {
  position: relative !important;
  flex: 1 !important;
  display: flex !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background-color: rgb(var(--background-dark)) !important;
}
.app-columns {
  display: flex !important;
  height: 100% !important;
  padding: 0 4px !important;
  gap: 4px !important;
  counter-reset: column-number;
}

/* ── Sidebar nav buttons ─────────────────────────────────────────── */

/* SkyDeck nav elements — icon-only, centered, full-width */
.td-nav-icon-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  height: 44px !important;
  padding: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  color: #1da1f2 !important;
  background: none !important;
  border: none !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}
.td-nav-icon-btn:hover { background-color: rgba(255,255,255,0.08) !important; }
.td-nav-icon-btn.is-selected { background-color: rgba(29,161,242,0.15) !important; }
.td-nav-icon-btn:disabled { opacity: 0.4 !important; cursor: default !important; }
.td-nav-icon-btn .icon { font-size: 20px !important; }

/* Account avatar section */
.td-nav-account {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  padding: 8px 0 !important;
}
.td-nav-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
}

/* Deck list area */
.td-nav-decks {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.td-nav-decks::-webkit-scrollbar { display: none; }

/* Deck emoji tabs */
.td-nav-emoji {
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Unread badge on messages icon */
.td-nav-badge {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  font-size: 10px !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 3px !important;
}

/* Separator lines in sidebar */
.with-nav-border-t {
  display: block !important;
  border-top: 1px solid rgba(136,153,166,0.3) !important;
  margin: 4px 8px !important;
}

/* Update ready indicator */
.td-update-ready  { color: #17bf63 !important; }
.td-update-pending { color: #8899a6 !important; }

/* Hide TweetDeck's text labels (we're always in condensed mode) */
.app-nav-link-text, .app-nav-tab-text, .hide-condensed { display: none !important; }

/* ── Column (pane) ───────────────────────────────────────────────── */
.column {
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* Column header — flex row, 50px tall, TweetDeck dark bg in dark mode */
.column-header {
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  line-height: normal !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 10px !important;
  cursor: grab !important;
}
.column-header.is-dragging { cursor: grabbing !important; }

/* Column title area — icon + heading + attribution */
.column-title {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.column-type-icon { flex-shrink: 0 !important; font-size: 18px !important; }
.column-heading { font-size: 14px !important; font-weight: 700 !important; }
.attribution { display: block !important; font-size: 11px !important; opacity: 0.65 !important; }

/* Column header links (settings icon) */
.column-header-links {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  gap: 2px !important;
}

/* TweetDeck column-header-link button */
.column-header-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  color: #8899a6 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  border-radius: 4px !important;
}
.column-header-link:hover { color: #1da1f2 !important; background-color: rgba(29,161,242,0.1) !important; }
.column-header-link .icon { font-size: 16px !important; }

/* Column scroller: let PaneBody manage scroll */
.column-scroller {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  height: auto !important;
  overflow-x: hidden !important;
}

/* ── Stream items / tweets ───────────────────────────────────────── */

/* Kill TweetDeck's padding-left:46px indent — SkyDeck uses flex */
.tweet { padding-left: 0 !important; display: block !important; }

/* item-box padding duplicates SkyDeck's px-4 */
.item-box, html.dark .item-box { padding: 0 !important; }

/* Action buttons — always visible, inline-flex */
.tweet-actions {
  display: flex !important;
  float: none !important;
  visibility: visible !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 6px 0 8px !important;
  gap: 4px !important;
}
.stream-item:hover .tweet-actions { visibility: visible !important; }
.tweet-action-item { display: flex !important; align-items: center !important; }

/* tweet-action: icon + count side by side */
.tweet-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  color: #8899a6 !important;
  padding: 4px 8px 4px 0 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}
.tweet-action:hover { color: #1da1f2 !important; }
.tweet-action .icon { font-size: 16px !important; }
.tweet-action-count { font-size: 12px !important; }

/* Liked/retweeted active states */
.is-favorite-color  { color: #e0245e !important; }
.is-retweet-color   { color: #17bf63 !important; }
html.dark .is-favorite-color { color: #e0245e !important; }
html.dark .is-retweet-color  { color: #17bf63 !important; }

/* ── Post author area ────────────────────────────────────────────── */
/* tweet-header: flex row for avatar alignment in column header context */
.tweet-header {
  display: flex !important;
  align-items: flex-start !important;
}

/* ── Misc fixes ──────────────────────────────────────────────────── */
dialog[data-modal] {
  background-color: rgb(var(--background)) !important;
  border: none !important;
  padding: 0 !important;
  position: fixed !important;
  height: auto !important;
  width: auto !important;
}

.column.is-focused { box-shadow: 0 0 0 3px #1da1f2 !important; }

/* SkyDeck sidebar logo — Twitter bird in blue rounded square */
.td-sidebar-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  background-color: #1da1f2 !important;
  border-radius: 8px !important;
}
.td-sidebar-logo svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}