/* ── regex-builder.css — Styles for the Intent-Driven Pattern Builder ─────── */

/* ── Sample area mirror ─────────────────────────────────────────────────────── */
#rb-sample-mirror {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875rem;
  line-height: 1.625;
  padding: .5rem .75rem;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
  color: var(--th-text);
  background: transparent;
  z-index: 1;
}
#rb-sample-mirror .rb-nl { color: var(--th-text-muted); opacity: .35; }
#rb-sample-mirror mark { background: transparent; color: inherit; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ── Chip / highlight colours ──────────────────────────────────────────────── */
/* Dark themes */
.rb-chip-literal  { --rb-fg: #93c5fd; --rb-bg: rgba(59,130,246,.18);  }
.rb-chip-pattern  { --rb-fg: #6ee7b7; --rb-bg: rgba(16,185,129,.18);  }
.rb-chip-word     { --rb-fg: #c4b5fd; --rb-bg: rgba(139,92,246,.18);  }
.rb-chip-custom   { --rb-fg: #fcd34d; --rb-bg: rgba(245,158,11,.18);  }
.rb-chip-capture  { --rb-fg: #fdba74; --rb-bg: rgba(249,115,22,.18);  }
.rb-chip-alt      { --rb-fg: #d8b4fe; --rb-bg: rgba(168,85,247,.18);  }
.rb-chip-gap      { --rb-fg: #94a3b8; --rb-bg: rgba(100,116,139,.15); }

/* Light theme overrides */
[data-theme="dawn"]   .rb-chip-literal,  [data-theme="arctic"] .rb-chip-literal  { --rb-fg: #1d4ed8; --rb-bg: rgba(59,130,246,.12);  }
[data-theme="dawn"]   .rb-chip-pattern,  [data-theme="arctic"] .rb-chip-pattern  { --rb-fg: #065f46; --rb-bg: rgba(16,185,129,.12);  }
[data-theme="dawn"]   .rb-chip-word,     [data-theme="arctic"] .rb-chip-word     { --rb-fg: #5b21b6; --rb-bg: rgba(139,92,246,.12);  }
[data-theme="dawn"]   .rb-chip-custom,   [data-theme="arctic"] .rb-chip-custom   { --rb-fg: #92400e; --rb-bg: rgba(245,158,11,.12);  }
[data-theme="dawn"]   .rb-chip-capture,  [data-theme="arctic"] .rb-chip-capture  { --rb-fg: #9a3412; --rb-bg: rgba(249,115,22,.12);  }
[data-theme="dawn"]   .rb-chip-alt,      [data-theme="arctic"] .rb-chip-alt      { --rb-fg: #6b21a8; --rb-bg: rgba(168,85,247,.12);  }
[data-theme="dawn"]   .rb-chip-gap,      [data-theme="arctic"] .rb-chip-gap      { --rb-fg: #475569; --rb-bg: rgba(100,116,139,.12); }

/* Mark highlights in mirror */
#rb-sample-mirror .rb-chip-literal  { background: rgba(59,130,246,.22);  }
#rb-sample-mirror .rb-chip-pattern  { background: rgba(16,185,129,.22);  }
#rb-sample-mirror .rb-chip-word     { background: rgba(139,92,246,.22);  }
#rb-sample-mirror .rb-chip-custom   { background: rgba(245,158,11,.22);  }
#rb-sample-mirror .rb-chip-capture  { background: rgba(249,115,22,.22);  }
#rb-sample-mirror .rb-chip-alt      { background: rgba(168,85,247,.22);  }
#rb-sample-mirror .rb-chip-gap      { background: rgba(100,116,139,.18); }

[data-theme="dawn"]  #rb-sample-mirror .rb-chip-literal,  [data-theme="arctic"] #rb-sample-mirror .rb-chip-literal  { background: rgba(59,130,246,.18);  }
[data-theme="dawn"]  #rb-sample-mirror .rb-chip-pattern,  [data-theme="arctic"] #rb-sample-mirror .rb-chip-pattern  { background: rgba(16,185,129,.18);  }
[data-theme="dawn"]  #rb-sample-mirror .rb-chip-word,     [data-theme="arctic"] #rb-sample-mirror .rb-chip-word     { background: rgba(139,92,246,.18);  }
[data-theme="dawn"]  #rb-sample-mirror .rb-chip-custom,   [data-theme="arctic"] #rb-sample-mirror .rb-chip-custom   { background: rgba(245,158,11,.18);  }
[data-theme="dawn"]  #rb-sample-mirror .rb-chip-capture,  [data-theme="arctic"] #rb-sample-mirror .rb-chip-capture  { background: rgba(249,115,22,.18);  }
[data-theme="dawn"]  #rb-sample-mirror .rb-chip-alt,      [data-theme="arctic"] #rb-sample-mirror .rb-chip-alt      { background: rgba(168,85,247,.18);  }
[data-theme="dawn"]  #rb-sample-mirror .rb-chip-gap,      [data-theme="arctic"] #rb-sample-mirror .rb-chip-gap      { background: rgba(100,116,139,.15); }

/* ── Builder strip chips ────────────────────────────────────────────────────── */
.rb-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--rb-fg);
  background: var(--rb-bg);
  border: 1.5px solid var(--rb-fg);
  cursor: pointer;
  transition: opacity .15s;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
}
.rb-chip:hover        { opacity: .85; }
.rb-chip:focus        { outline: 2px solid var(--rb-fg); outline-offset: 1px; }
.rb-chip-label        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.rb-chip-del          { opacity: .55; font-size: .8rem; cursor: pointer; flex-shrink: 0; }
.rb-chip-del:hover    { opacity: 1; }
.rb-chip-opt          { font-size: .65rem; opacity: .7; }

/* Gap button */
.rb-gap-btn {
  display: inline-flex;
  align-items: center;
  padding: .15rem .4rem;
  border-radius: 4px;
  font-size: .65rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--rb-fg);
  background: var(--rb-bg);
  border: 1px dashed;
  border-color: var(--rb-fg);
  cursor: pointer;
  opacity: .7;
  transition: opacity .15s;
}
.rb-gap-btn:hover { opacity: 1; }

/* ── Builder strip container ────────────────────────────────────────────────── */
#rb-builder-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
  padding: .5rem .75rem;
  min-height: 44px;
}
#rb-strip-empty { font-size: .8rem; font-style: italic; color: var(--th-text-muted); }

/* ── Feedback bar ───────────────────────────────────────────────────────────── */
#rb-feedback { font-size: .75rem; padding: .2rem .75rem .3rem; line-height: 1.4; }
.rb-fb-good  { color: #4ade80; }
.rb-fb-warn  { color: #fbbf24; }
.rb-fb-miss  { color: #f87171; }
.rb-fb-none  { color: var(--th-text-muted); }
.rb-fb-error { color: #f87171; }

/* ── Context menu ───────────────────────────────────────────────────────────── */
.rb-menu {
  position: fixed;
  z-index: 9000;
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: 8px;
  padding: 4px;
  min-width: 210px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
[data-theme="dawn"]   .rb-menu,
[data-theme="arctic"] .rb-menu { box-shadow: 0 4px 16px rgba(0,0,0,.14); }

.rb-menu-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .35rem .6rem;
  border: none;
  background: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: .8125rem;
  color: var(--th-text);
  text-align: left;
  white-space: nowrap;
}
.rb-menu-item:hover, .rb-menu-item:focus { background: var(--th-surface-mid); outline: none; }
.rb-menu-item-suggest { color: var(--th-accent); font-weight: 600; }
.rb-menu-item-danger  { color: #f87171; }
.rb-menu-item-danger:hover { background: rgba(239,68,68,.12); }

.rb-menu-icon {
  font-size: .65rem;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  width: 22px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  flex-shrink: 0;
}
.rb-icon-literal { color: #93c5fd; background: rgba(59,130,246,.2);  }
.rb-icon-pattern { color: #6ee7b7; background: rgba(16,185,129,.2);  }
.rb-icon-word    { color: #c4b5fd; background: rgba(139,92,246,.2);  }
.rb-icon-custom  { color: #fcd34d; background: rgba(245,158,11,.2);  }
.rb-icon-capture { color: #fdba74; background: rgba(249,115,22,.2);  }
.rb-icon-gap     { color: #94a3b8; background: rgba(100,116,139,.2); }

[data-theme="dawn"]   .rb-icon-literal, [data-theme="arctic"] .rb-icon-literal { color: #1d4ed8; }
[data-theme="dawn"]   .rb-icon-pattern, [data-theme="arctic"] .rb-icon-pattern { color: #065f46; }
[data-theme="dawn"]   .rb-icon-word,    [data-theme="arctic"] .rb-icon-word    { color: #5b21b6; }
[data-theme="dawn"]   .rb-icon-custom,  [data-theme="arctic"] .rb-icon-custom  { color: #92400e; }
[data-theme="dawn"]   .rb-icon-capture, [data-theme="arctic"] .rb-icon-capture { color: #9a3412; }
[data-theme="dawn"]   .rb-icon-gap,     [data-theme="arctic"] .rb-icon-gap     { color: #475569; }

.rb-menu-text  { flex: 1; }
.rb-menu-hint  { font-size: .7rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--th-text-muted); margin-left: auto; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.rb-menu-arrow { font-size: .65rem; color: var(--th-text-muted); margin-left: auto; }
.rb-menu-divider { height: 1px; background: var(--th-border); margin: 3px 4px; }

/* ── Inline inputs (custom class / capture name) ─────────────────────────── */
.rb-inline-input-row {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .3rem .5rem;
}
.rb-inline-input {
  flex: 1;
  background: var(--th-bg);
  color: var(--th-text);
  border: 1px solid var(--th-border);
  border-radius: 4px;
  padding: .2rem .4rem;
  font-size: .8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  outline: none;
}
.rb-inline-input:focus { border-color: var(--th-accent); }
.rb-inline-btn { border: none; background: none; cursor: pointer; font-size: .85rem; padding: .1rem .3rem; border-radius: 3px; }
.rb-inline-confirm { color: #4ade80; }
.rb-inline-cancel  { color: #f87171; }
.rb-inline-confirm:hover { background: rgba(74,222,128,.15); }
.rb-inline-cancel:hover  { background: rgba(239,68,68,.12); }

/* ── Global options flyout ───────────────────────────────────────────────────── */
.rb-flyout {
  position: fixed;
  z-index: 9001;
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: 8px;
  padding: 6px 4px;
  min-width: 215px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.rb-flyout-title {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--th-text-muted);
  padding: .25rem .5rem .4rem;
}
.rb-flyout-opt {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .5rem;
  font-size: .8rem;
  color: var(--th-text);
  cursor: pointer;
  border-radius: 4px;
}
.rb-flyout-opt:hover { background: var(--th-surface-mid); }
.rb-flyout-opt input { cursor: pointer; accent-color: var(--th-accent); }
.rb-flyout-opt code  { font-size: .7rem; color: var(--th-accent); background: var(--th-accent-muted); border-radius: 3px; padding: 0 3px; margin-left: auto; }

/* ── Gap editor ─────────────────────────────────────────────────────────────── */
.rb-gap-editor {
  position: fixed;
  z-index: 9001;
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: 8px;
  padding: 6px 4px;
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.rb-ge-title {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--th-text-muted);
  padding: .25rem .5rem .4rem;
}
.rb-ge-opt {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .5rem;
  font-size: .8rem;
  color: var(--th-text);
  cursor: pointer;
  border-radius: 4px;
}
.rb-ge-opt:hover { background: var(--th-surface-mid); }
.rb-ge-opt input  { cursor: pointer; accent-color: var(--th-accent); }
.rb-ge-opt code   { font-size: .7rem; color: var(--th-accent); background: var(--th-accent-muted); border-radius: 3px; padding: 0 3px; margin-left: auto; }
.rb-ge-actions    { padding: .35rem .5rem 0; display: flex; justify-content: flex-end; }
.rb-ge-btn        { font-size: .75rem; padding: .2rem .6rem; background: var(--th-surface-mid); color: var(--th-text); border: 1px solid var(--th-border); border-radius: 4px; cursor: pointer; }
.rb-ge-btn:hover  { background: var(--th-accent-muted); color: var(--th-accent); }

/* ── Toast notification ──────────────────────────────────────────────────────── */
.rb-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: .45rem 1.1rem;
  border-radius: 6px;
  font-size: .8125rem;
  background: var(--th-surface);
  color: var(--th-text);
  border: 1px solid var(--th-border);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  transition: opacity .3s ease;
  white-space: nowrap;
  pointer-events: none;
}
.rb-toast-warn { border-color: rgba(251,191,36,.5); color: #fbbf24; }
.rb-toast-error { border-color: rgba(239,68,68,.5); color: #f87171; }

/* ── Reset button ────────────────────────────────────────────────────────────── */
#rb-strip-reset {
  margin-left: auto;
  font-size: .7rem;
  padding: .2rem .55rem;
  background: transparent;
  color: var(--th-text-muted);
  border: 1px solid var(--th-border);
  border-radius: 4px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
#rb-strip-reset:hover { color: var(--th-text); border-color: var(--th-text-muted); }

/* ── Globals panel (right side) ──────────────────────────────────────────────── */
.rb-globals-opt {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .75rem;
  font-size: .8rem;
  color: var(--th-text-muted);
  cursor: pointer;
  line-height: 1.4;
}
.rb-globals-opt:hover { color: var(--th-text); }
.rb-globals-opt input { cursor: pointer; accent-color: var(--th-accent); }
.rb-globals-opt code  { font-size: .7rem; color: var(--th-accent); margin-left: auto; }

/* ── Pattern output code ────────────────────────────────────────────────────── */
#rb-pattern-output:empty::before {
  content: 'Select text above to build a pattern';
  color: var(--th-text-muted);
  font-style: italic;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .8125rem;
  font-weight: 400;
}

/* ── Accessibility: sr-only ─────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rb-chip, .rb-gap-btn, .rb-toast { transition: none !important; }
}

/* ── T-190: Drag, hover, edit-text ─────────────────────────────────────────── */

/* Dragging chip */
.rb-chip-dragging {
  opacity: .35;
  cursor: grabbing;
}

/* Drop indicator: vertical line between chips */
.rb-drop-indicator {
  display: inline-block;
  width: 2px;
  height: 28px;
  background: var(--th-accent, #6ee7b7);
  border-radius: 1px;
  flex-shrink: 0;
  align-self: center;
  pointer-events: none;
}

/* Chip pulse from textarea hover */
.rb-chip-pulse {
  outline: 2px solid var(--rb-fg);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rb-fg) 20%, transparent);
}

/* Mirror mark pulse from chip hover */
#rb-sample-mirror mark.rb-highlight-pulse {
  filter: brightness(1.6) saturate(1.4);
}

/* Edit-text button */
#rb-edit-text {
  font-size: .7rem;
  padding: .15rem .55rem;
  border-radius: 4px;
  border: 1px solid var(--th-border);
  background: var(--th-surface-mid);
  color: var(--th-text-muted);
  cursor: pointer;
  transition: color .15s, background .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
#rb-edit-text:hover { color: var(--th-text); background: var(--th-surface); }

/* Stale chip — token text no longer found at its original position */
.rb-chip--stale {
  opacity: .45;
  border-style: dashed !important;
  pointer-events: auto;
}

/* Reduced motion additions */
@media (prefers-reduced-motion: reduce) {
  .rb-chip-pulse, #rb-sample-mirror mark.rb-highlight-pulse { transition: none !important; }
}