:root {
  color-scheme: light dark;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --text: #1c1c1e;
  --muted: #6e6e73;
  --border: #e0e0e2;
  --accent: #2563eb;
  --accent-text: #ffffff;
  --danger: #dc2626;
  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121214;
    --surface: #1c1c1f;
    --text: #f2f2f3;
    --muted: #9a9a9e;
    --border: #303034;
    --accent: #4f8cff;
    --accent-text: #0b1220;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 80px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

h1 {
  font-size: 20px;
  margin: 0;
}

.status {
  font-size: 12px;
  color: var(--muted);
}

button {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 14px;
  min-height: 44px;
}

button.primary {
  background: var(--accent);
  color: var(--accent-text);
  border-color: transparent;
}

button.danger {
  color: var(--danger);
  border-color: var(--danger);
  background: transparent;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

/* Full-width, outlined, centered icon+label - same footprint as any
   other full-width button in the card, just with the Google mark
   alongside the text rather than colored/branded itself, so it reads
   as this app's own button styling wearing a Google icon rather than
   a copy-pasted Google-brand button. */
.google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
}

/* "or" divider between the Google button and the email/password
   fields - a line on each side, centered label, matching the muted
   text color used for secondary copy elsewhere. */
.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: var(--muted);
  font-size: 13px;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

textarea,
input,
select {
  width: 100%;
  font: inherit;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

textarea {
  min-height: 90px;
  max-height: 50vh;
  overflow-y: auto;
  resize: vertical;
}

.row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.row-end {
  justify-content: flex-end;
}

.compose-row {
  align-items: center;
}

.compose-row #save-text-btn {
  margin-left: auto;
}

.compose-folders {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Sticky so it stays visible once you've scrolled it off the top of
   the viewport - useful once the clip list is long enough that you'd
   otherwise have to scroll back up to change the filter/sort. An
   opaque background (matching the page background) and a border/shadow
   are needed since it's no longer guaranteed to have the page's own
   background showing through once other content scrolls underneath
   it. z-index just needs to clear the clip cards below it (they don't
   set one, so anything above 0 works) - well under the toast, which is
   a separate fixed-position stacking context anyway. */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.filter-bar-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* Filter bar's Named Folders and Sort dropdowns: both plain native
   <select> elements (nothing to type or create in the filter bar -
   only ever choosing among values that already exist), but wearing
   the exact same .folder-combo/.folder-combo-input/.folder-combo-arrow
   classes used by the typeable combobox in compose/edit, so every
   control in the bar reads as one family. The select's own native
   arrow is stripped via `appearance: none` so the shared custom
   chevron is the only one shown, and the selected option's text sits
   inside the box as its own label, rather than a separate caption off
   to the side. Colored --muted, the same color as "Show:" and the
   rest of the filter bar's controls, rather than the default --text
   used for real clip content - even though there's always a real
   value selected here (never empty like a placeholder), it reads as a
   label naming the control's current mode, not as content. */
.filter-native-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--bg);
  color: var(--muted);
  color-scheme: light dark;
  cursor: pointer;
}

/* Rounded-square, not a round pill - matches the folder icon buttons
   (and the dropdowns next to them) so every filter control in this bar
   reads as one family. Muted, matching "Show:" and the Named
   Folders/Sort dropdowns, rather than full-strength text color. */
.filter-btn {
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* All, the three folder filters, and (once a name's selected) the
   named-folder combobox all highlight the same way: a muted amber
   background tint, with the icon/text kept its normal color rather
   than also recolored amber - matching the look the folder filter
   icons already had (an accidental side effect of a more specific
   rule that turned out to read better than a flat amber-on-amber
   button), so "what's currently filtering the list" reads as one
   consistent, quiet highlight everywhere it appears. */
.filter-btn.active,
.folder-combo.active .folder-combo-input {
  background: rgba(217, 119, 6, 0.14);
  border-color: transparent;
}

/* Icon-only filter buttons (the three folder filters) get the same
   44px square treatment as the per-clip icon buttons, instead of the
   text pill's horizontal padding. */
.filter-btn.icon {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--muted);
}

/* ---- Named-folder combobox: type to filter/pick, or (where allowed)
   add a new name. Deliberately compact - a fixed, modest width rather
   than stretching to fill its row. ---- */
.folder-combo {
  position: relative;
  flex: 0 0 auto;
  width: 150px;
}

.folder-combo-input {
  width: 100%;
  height: 44px;
  min-height: 44px;
  border-radius: 10px;
  padding: 0 26px 0 10px;
  font-size: 13px;
}

.folder-combo-arrow {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  display: flex;
}

/* Swaps in for the dropdown arrow once a value is selected, in the
   filter bar's persistent combobox (clearOnCommit: false) - lets you
   clear the active named-folder filter without hunting for the All
   button elsewhere in the bar. */
.folder-combo-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  padding: 4px;
  min-height: auto;
  cursor: pointer;
}

.folder-combo-clear:hover {
  color: var(--danger);
}

.folder-combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
  max-height: 220px;
  overflow-y: auto;
}

.folder-combo-option {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.folder-combo-option:hover,
.folder-combo-option.highlighted {
  background: rgba(37, 99, 235, 0.1);
}

.folder-combo-create {
  color: var(--accent);
  font-weight: 600;
}

/* ---- Named-folder chips: shown read-only on a clip's card, editable
   (with a remove button) in the compose row and while editing. ---- */
.folder-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px 4px 8px;
  font-size: 12px;
  color: var(--text);
}

.folder-chip-icon {
  display: flex;
  color: var(--muted);
}

.folder-chip-remove {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  min-height: auto;
  cursor: pointer;
}

.clip-folder-edit {
  align-items: center;
}

.clip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 14px 14px;
  margin-bottom: 12px;
  overflow: hidden;
}

/* Shaded header band, visually set apart from the text below it. Two
   lines: clip-header-top (timestamp +, outside edit mode, the icon
   row: the three folder toggles, then delete, edit, copy) and, only
   when the clip has named folders, clip-header-folders below it -
   keeping both kinds of folder in the same shaded area rather than
   splitting fixed folders (up here) from named folders (down in the
   card body), which read as two unrelated features. */
.clip-header {
  font-size: 12px;
  color: var(--muted);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  margin: 0 -14px 10px;
  padding: 6px 10px;
}

.clip-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.clip-header-folders {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.clip-time {
  padding-left: 4px;
}

.clip-time.edited {
  font-style: italic;
}

.clip-icons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

/* 44px square tap targets (Apple/WCAG minimum) around a smaller glyph,
   so these are easy to hit on a phone even though they look compact. */
/* The clickable/tappable area stays a full 44px square (the mobile
   accessibility minimum), but the hover/active/selected background is
   inset from the button's edges via padding + background-clip, so
   adjacent icons - which sit flush against each other with no gap -
   each get a visually separated highlight instead of neighboring
   highlight boxes merging into one solid block. */
.icon-btn {
  width: 44px;
  height: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  background-clip: content-box;
  border-radius: 8px;
  color: var(--muted);
  padding: 6px;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.icon-btn:hover,
.icon-btn:active {
  background: var(--bg);
}

.icon-btn.copy:hover,
.icon-btn.copy:active {
  color: #16a34a;
  background: rgba(34, 197, 94, 0.14);
}

.icon-btn.delete:hover,
.icon-btn.delete:active {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.14);
}

.icon-btn.edit:hover,
.icon-btn.edit:active {
  color: var(--accent);
  background: rgba(37, 99, 235, 0.14);
}

/* Folder toggle buttons, in the same row as delete/edit/copy above.
   A clip can be in any number of folders, so these just turn amber
   when active rather than behaving like a radio group. */
.icon-btn.folder {
  color: var(--muted);
}

.icon-btn.folder:hover {
  color: #d97706;
  background: rgba(217, 119, 6, 0.14);
}

.icon-btn.folder.active {
  background: rgba(217, 119, 6, 0.14);
}

.icon-btn.attach:hover,
.icon-btn.attach:active {
  color: var(--accent);
  background: rgba(37, 99, 235, 0.14);
}

/* ---- Attachments (images + general documents, any number per clip) ---- */
/* `min-width: 0` on the chip and its link overrides flexbox's default
   automatic minimum size, which is otherwise based on the filename
   text's full unwrapped width - without it, a long filename would
   force the chip wider than its container (and right off the edge of
   the card) regardless of `max-width: 100%`, since that automatic
   minimum can win over an explicit max-width. With it, the chip can
   actually shrink down to (and wrap within) the space it's given. */
.attachment-chip {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  max-width: 100%;
  min-width: 0;
}

.attachment-chip-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
  max-width: 100%;
}

.attachment-chip-link img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.attachment-chip-icon {
  display: flex;
  color: var(--muted);
  flex: 0 0 auto;
  /* Lines up with the first line of wrapped text below, rather than
     centering against the whole (now potentially multi-line) block. */
  margin-top: 2px;
}

/* Wraps instead of truncating - a long filename (or one long unbroken
   "word", with no spaces to break on) now wraps onto multiple lines
   within the chip rather than being cut off with an ellipsis or
   overflowing past the card's edge. */
.attachment-chip-info {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.attachment-chip-remove {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 2px 4px;
  min-height: auto;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
}

.attachment-chip-remove:hover {
  color: var(--danger);
}

/* The larger, read-only display inside a saved clip's card body - an
   image gets a real preview (capped height so a huge photo doesn't
   dominate the card); anything else just shows as a chip-style link. */
.clip-attachment {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
}

.clip-attachment .attachment-chip {
  display: block;
  padding: 0;
  border: none;
  background: none;
}

.clip-attachment .attachment-chip-link img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.clip-attachment .attachment-chip-icon,
.clip-attachment .attachment-chip-info {
  display: inline-flex;
}

.compose-attach,
.clip-attach-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.compose-attach-warn {
  font-size: 12px;
  color: #d97706;
}

.attach-uploading {
  font-size: 12px;
  color: var(--muted);
}

.cancel-upload-btn {
  border: none;
  background: transparent;
  color: var(--accent);
  text-decoration: underline;
  font-size: 12px;
  padding: 2px 4px;
  min-height: auto;
  cursor: pointer;
}

/* Shown on the compose card (and, mid-edit, the clip card) while a
   file is being dragged over it - the drop target itself, not just
   the button, since dropping doesn't require aiming at anything
   specific. */
.card.drop-active,
.clip.drop-active {
  border-color: var(--accent);
  background: rgba(37, 99, 235, 0.06);
}

.clip-edit-input {
  min-height: 90px;
  max-height: 70vh;
  margin-bottom: 4px;
}

.clip pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  margin: 0;
  max-height: 260px;
  overflow-y: auto;
}

.empty {
  text-align: center;
  color: var(--muted);
  padding: 40px 0;
  font-size: 14px;
}

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.toast.show {
  opacity: 1;
}

/* Custom hover tooltip (see attachTooltip() in app.js) - positioned
   above whichever button triggered it, in viewport coordinates since
   it's `position: fixed`. Same dark-pill styling as the toast (an
   inverted-color pill is this app's one existing "small transient
   label" pattern), just anchored to a button instead of the bottom of
   the screen. `[hidden]` (below) handles show/hide, no opacity
   transition needed for something this quick. */
.tooltip-popup {
  position: fixed;
  transform: translate(-50%, calc(-100% - 8px));
  background: var(--text);
  color: var(--bg);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 50;
}

[hidden] {
  display: none !important;
}