/* ========================================
   SUGGESTED FLOW BAR — Yellow inline bar
   Shows the top suggested action between
   thread header and body. Clicking expands
   the actions panel.

   Based on styled version's .sf-bar / .sf-inline
   ======================================== */

/* Container */
.sf-bar {
  position: relative;
  flex-shrink: 0;
}

/* Inline bar (yellow gradient, always visible when sf-bar is shown) */
.sf-bar__inline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 22px;
  border-bottom: 1px solid var(--color-border-solid, #e5e7eb);
  cursor: pointer;
  background: linear-gradient(135deg, #FFFBEB 0%, var(--color-surface, #ffffff) 100%);
  transition: all 0.1s ease;
}

.sf-bar__inline:hover {
  background: linear-gradient(135deg, #FFF7ED 0%, var(--color-surface, #ffffff) 100%);
}

/* Bolt icon */
.sf-bar__bolt {
  font-size: 12px;
  flex-shrink: 0;
}

/* SUGGESTED label */
.sf-bar__label {
  font-size: 10px;
  font-weight: 700;
  color: #EA580C;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}

/* Top suggestion name */
.sf-bar__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text, #1a1a1a);
  margin-left: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Confidence score */
.sf-bar__score {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-success-dark, #16a34a);
  flex-shrink: 0;
}

/* "N more" text */
.sf-bar__more {
  font-size: 11px;
  color: var(--color-text-tertiary, #94a3b8);
  flex-shrink: 0;
}

/* Spacer to push arrow right */
.sf-bar__spacer {
  flex: 1;
}

/* Arrow indicator */
.sf-bar__arrow {
  font-size: 8px;
  color: var(--color-text-tertiary, #94a3b8);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}