/* =====================================================
   palette.css
   PURPOSE: Styles for the Symbol Palette ONLY.
   This includes:
     - Category tab bar
     - Emoji grid
     - Search bar
     - Individual palette items
     - Custom symbol (PNG = Portable Network Graphics)
       display

   SCOPE: Everything inside #palette-container
   DO NOT put styles for other screens in this file.

   IMPORTANT SCROLL RULE:
   ONLY .palette-scroll scrolls vertically.
   Everything above it (card canvas, suggestion bar)
   must stay fixed in view.
   ===================================================== */

/* --- Palette Outer Container ---
   Sits at the bottom of the card editor screen, filling
   whatever space remains below the fixed canvas/toolbar/
   suggestion-bar sections above it (#card-editor-screen is a
   height: 100% flex column — see card-editor.css) — flex: 1
   (not a hardcoded height) is what lets it actually reach all
   the way down to the bottom nav on every screen size, instead
   of stopping short and leaving a gap on any device taller
   than whatever fixed number was guessed.
   min-height: 0 is CRITICAL here — without it, a flex item
   won't shrink below its own content's natural size (the
   emoji grid can be much taller than the available space), so
   the container would grow to fit ALL of it instead of being
   capped at flex: 1's share, breaking the internal scroll below
   AND likely pushing the card canvas out of view above it. Same
   fix .palette-scroll needs one level deeper, for the same
   reason — see its own comment. */
.palette-container {
  display:          flex;
  flex-direction:   column;
  background-color: var(--color-nav-bg);
  border-top:       var(--border-width) solid var(--color-border);
  /* All 4 corners now (was top-only) — this panel no longer
     ends short of the nav bar with a squared-off bottom edge
     sitting against the app background, so there's no longer
     a "flush edge" reason to leave the bottom corners square. */
  border-radius:    var(--border-radius-card);
  flex:             1;
  min-height:       0;
  overflow:         hidden;
  /* Leaves the SAME 10px breathing room below the palette,
     down to the bottom nav, as #card-editor-screen's own
     "gap: 10px" already puts between every OTHER section on
     this screen (header→tabs, tabs→canvas, canvas→Extract
     Text, Extract Text→suggestion bar, suggestion bar→palette)
     — without this the palette's flex: 1 fills every last
     pixel down to the nav bar with none at all, breaking that
     otherwise-consistent rhythm right at the last gap. */
  margin-bottom:    10px;
}

/* --- Search Bar ─────────────────────────────────────────
   Always-visible iOS-style pill search field — icon,
   input, and a clear button all live inside ONE pill.
   Previously this was a toggle button that had to be
   tapped before a hidden input even appeared; search is
   simpler and easier to use just sitting there ready.  */
.palette-search {
  display:          flex;
  align-items:      center;
  gap:              6px;
  margin:           8px 10px;
  padding:          7px 10px;
  background-color: var(--ios-tertiarySystemFill);
  border-radius:    999px;
  flex-shrink:      0;
}

.palette-search__icon {
  display:     flex;
  flex-shrink: 0;
  color:       var(--color-text-secondary);
}

.palette-search__input {
  flex:        1;
  min-width:   0;
  background:  transparent;
  border:      none;
  color:       var(--color-text-primary);
  font-size:   var(--font-size-footnote);
  font-family: var(--font-primary);
  outline:     none;
}

.palette-search__input::placeholder {
  color: var(--color-text-secondary);
}

/* Only shown once there's text to clear — see
   symbol-palette.js initPaletteSearch(). */
.palette-search__clear {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  width:            18px;
  height:           18px;
  padding:          0;
  border:           none;
  border-radius:    50%;
  background-color: var(--ios-systemGray3);
  color:            #fff;
  cursor:           pointer;
}

/* --- Category Tab Bar ──────────────────────────────────
   Icon-only chips — matching the native iOS emoji-
   keyboard's own category strip: just the icons, no text
   labels, the active one gets a soft rounded highlight
   instead of an underline. Scrolls horizontally if there
   isn't room for all of them (there usually isn't).    */
.palette-tabs {
  display:          flex;
  gap:              4px;
  /* 3px on TOP (was 0) — the active tab's highlight ring below
     (.palette-tab--active's box-shadow) is a normal, non-inset
     shadow, which always renders OUTSIDE the tab's own 34px
     box, reaching 1.5px past its top edge. With zero padding
     here and overflow-y: hidden right below to clip it, that
     sliver of the ring was getting sliced off flat — reading as
     a stray straight edge cutting across the top of the circle.
     3px comfortably clears the 1.5px reach with a little room
     to spare. */
  padding:          3px 10px 8px;
  overflow-x:       auto;   /* Horizontal scroll for tabs */
  overflow-y:       hidden;
  flex-shrink:      0;
  border-bottom:    var(--border-width) solid var(--color-border);
  /* Hide scrollbar visually but keep functionality */
  scrollbar-width:  none;   /* Firefox */
}

.palette-tabs::-webkit-scrollbar {
  display: none;             /* Chrome, Safari */
}

.palette-tab {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;       /* Tabs never shrink */
  width:            34px;
  height:           34px;
  padding:          0;
  background-color: transparent;
  border:           none;
  border-radius:    50%;
  font-size:        18px;
  line-height:      1;
  cursor:           pointer;
  transition:       background-color 0.15s ease,
                    transform        0.1s ease;
}

.palette-tab:hover {
  background-color: var(--ios-tertiarySystemFill);
}

.palette-tab:active {
  transform: scale(0.92);
}

/* Active tab highlight — a soft tinted circle with a
   thin accent ring, instead of an underline (which reads
   poorly under a single centered icon glyph). */
.palette-tab--active {
  background-color: var(--tint-accent-soft);
  box-shadow:        0 0 0 1.5px var(--color-accent-amber);
}

/* --- THE ONLY SCROLLING AREA ---
   This div scrolls vertically through the emoji grid.
   NOTHING else on the card editor screen scrolls. */
.palette-scroll {
  flex:       1;       /* Takes remaining height in container */
  min-height: 0;       /* Same flex quirk as .palette-container
                          above, one level deeper — without this
                          the emoji grid's natural height can
                          push this taller than its share instead
                          of actually scrolling. */
  overflow-y: auto;    /* ONLY this scrolls vertically */
  overflow-x: hidden;
  padding:    8px;
}

/* --- Emoji Grid ---
   CSS Grid (Cascading Style Sheets Grid = a 2D layout
   system) of palette items */
.emoji-grid {
  display:               grid;
  /* auto-fill = as many columns as possible,
     each column at least 64px wide */
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap:                   8px;
}

/* --- Individual Palette Item ---
   Each draggable emoji/symbol in the grid */
.palette-item {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  gap:              4px;
  padding:          6px 4px;
  border-radius:    var(--border-radius);
  border:           1px solid transparent;
  cursor:           grab;
  transition:       background-color 0.15s ease,
                    border-color    0.15s ease,
                    transform       0.1s ease;
  user-select:      none;
}

.palette-item:hover {
  background-color: var(--ios-tertiarySystemFill);
  border-color:     var(--color-border);
  transform:        scale(1.08);
}

.palette-item:active {
  cursor:    grabbing;
  transform: scale(0.95);
}

/* The emoji character itself inside a palette item */
.palette-item__emoji {
  font-size:   28px;
  line-height: 1;
}

/* Twemoji rendered image inside palette item
   (Twemoji converts Unicode characters to styled images) */
.palette-item__emoji img {
  width:      28px;
  height:     28px;
  object-fit: contain;
}

/* Custom PNG (Portable Network Graphics) symbol image */
.palette-item__custom-img {
  width:      28px;
  height:     28px;
  object-fit: contain;
}

/* Small label below each palette item */
.palette-item__label {
  font-size:     9px;   /* 9px = 9 pixels, intentionally small */
  color:         var(--color-text-secondary);
  text-align:    center;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis; /* Shows "..." if text is too long */
  max-width:     60px;
}

/* Empty state message inside the palette */
.palette-empty {
  text-align:  center;
  color:       var(--color-text-secondary);
  padding:     20px;
  font-size:   var(--font-size-small);
  font-style:  italic;
}