/* Shared control styling for both build targets. Deliberately plain HTML
   elements rather than any component library, for the broadest host support. */

@font-face {
  font-family: 'Inter';
  font-weight: 400;
  src: url('assets/fonts/Inter-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-weight: 700;
  src: url('assets/fonts/Inter-Bold.ttf') format('truetype');
}

/* Montserrat, at the two weights twitchmessagecreator.site uses — 400 for the
   message body and 500 for the username. (It ships them under the opaque
   names Comentario1/Comentario2; the name tables say MontserratThin-Regular
   and MontserratThin-Medium.) ~5% wider than Inter.

   Note the correct `woff2` hint: the site declares these as `truetype`, which
   Safari rejects, and that mislabelling is the likeliest reason its output
   looks different on a Mac.

   Nothing renders in these via CSS, so fonts.js loads them explicitly before
   drawing — a webfont is not fetched until something paints with it, and
   canvas drawing does not count. Declaring the family here also shadows any
   locally installed Montserrat, so output is identical on every machine. */
@font-face {
  font-family: 'Montserrat';
  font-weight: 400;
  src: url('assets/fonts/Montserrat-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: 500;
  src: url('assets/fonts/Montserrat-Medium.woff2') format('woff2');
}

/* Scrolling: give a real element a definite height and let it overflow.
   Relying on `body { overflow:auto }` alone does not scroll in UXP, which is
   why a short panel clipped its own controls with no way to reach them. */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: #262626;
  color: #d8d8d8;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
}

.panel {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Flex items default to min-height:auto and will happily overrun each other in
   a short panel — which is how the preview ended up drawn over the options
   below it. Pin every direct child to its natural height and let .panel scroll. */
.panel > * { flex: 0 0 auto; }

/* Author `display` rules outrank the UA stylesheet's [hidden] rule, so the
   custom-font row stayed visible after switching back to a preset. */
[hidden] { display: none !important; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field > span, .label { color: #9a9a9a; font-size: 11px; }

input[type=text], textarea, input[type=number], select {
  background: #1c1c1c;
  border: 1px solid #3d3d3d;
  border-radius: 4px;
  color: #e8e8e8;
  font-family: inherit;
  font-size: 12px;
  padding: 5px 7px;
  width: 100%;
  box-sizing: border-box;
}
textarea { resize: vertical; min-height: 40px; }
input:focus, textarea:focus, select:focus { border-color: #7C37E2; outline: none; }

/* Colour + badge pickers share a row: the panel has spare width, not height. */
.pickers { display: flex; gap: 12px; flex-wrap: wrap; }
.pickers > .field { flex: 1 1 auto; min-width: 130px; }

/* Swatches and badge chips are divs, not buttons: UXP paints its own control
   background over a button's, which showed swatches as grey discs. */
.swatches { display: flex; flex-wrap: wrap; gap: 5px; }
.swatch {
  width: 18px; height: 18px; border-radius: 9px;
  box-sizing: border-box;
  border: 2px solid transparent; cursor: pointer; padding: 0;
  flex: 0 0 auto;
}
.swatch.sel { border-color: #fff; }

.badges { display: flex; flex-wrap: wrap; gap: 5px; }
.badge {
  width: 26px; height: 26px; border-radius: 5px;
  box-sizing: border-box;
  background-color: #1c1c1c; border: 1px solid #3d3d3d;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  flex: 0 0 auto;
  overflow: hidden;
}
/* Size also set as width/height attributes in main.js — UXP ignores this rule. */
.badge img { width: 18px; height: 18px; opacity: 0.45; }
.badge.sel { border-color: #7C37E2; background-color: #2a1e3d; }
.badge.sel img { opacity: 1; }

/* Custom badges carry a remove affordance; overflow:hidden on .badge would
   clip it, so custom chips opt out and clip the image instead. */
.badge.custom { overflow: visible; position: relative; }
.badge.custom img { border-radius: 3px; }
.badge-remove {
  position: absolute; top: -5px; right: -5px;
  width: 14px; height: 14px; border-radius: 7px;
  background-color: #c4373a; color: #fff;
  font-size: 11px; line-height: 13px; text-align: center;
  cursor: pointer; opacity: 0; transition: opacity .12s;
}
.badge.custom:hover .badge-remove { opacity: 1; }

.badge-add {
  color: #7a7a7a; font-size: 17px; line-height: 1;
  border-style: dashed;
}
.badge-add:hover { color: #c8c8c8; border-color: #6a6a6a; }

.field > span em { color: #6a6a6a; font-style: normal; }

.row.check.compact { margin-top: 0; }

.more summary { color: #9a9a9a; font-size: 11px; cursor: pointer; padding: 1px 0; }
.more .row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 7px;
}
.more .row > span { color: #9a9a9a; font-size: 11px; }
.more .row select, .more .row input[type=number] { width: 120px; }
.more .row.check { justify-content: flex-start; }
.more .row.check input { width: auto; margin-right: 6px; }

.preview-wrap { display: flex; flex-direction: column; gap: 4px; }
.preview-label span { color: #6a6a6a; }
.preview {
  /* Checkerboard so transparent output is readable. `.opaque` turns it off
     when the render has its own background, where it is only noise. */
  background-color: #3a3a3a;
  background-image:
    linear-gradient(45deg, #333 25%, transparent 25%, transparent 75%, #333 75%),
    linear-gradient(45deg, #333 25%, transparent 25%, transparent 75%, #333 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
  border-radius: 4px;
  padding: 8px;
  overflow: auto;
}
.preview.opaque {
  background-image: none;
  background-color: #2b2b2d;
}

canvas { display: block; }

.actions { display: flex; gap: 6px; }
button {
  border: none; border-radius: 4px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 8px 10px; width: 100%;
}
button.primary { background: #7C37E2; color: #fff; }
button.primary:hover { background: #8c4bf0; }
button.secondary { background: #3d3d3d; color: #d8d8d8; flex: 0 0 40%; }
button.secondary:hover { background: #4a4a4a; }
button:disabled { opacity: 0.5; cursor: default; }

.status { font-size: 11px; min-height: 14px; color: #8a8a8a; word-break: break-word; }
.status.ok { color: #6fcf7f; }
.status.err { color: #ff7a6b; }

.diag {
  font-size: 10px; color: #8a8a8a; margin: 6px 0 0;
  white-space: pre-wrap; word-break: break-word;
  background-color: #1c1c1c; border-radius: 4px; padding: 6px;
}

/* --- custom dropdowns -----------------------------------------------------
   Native <select> popups frequently fail to render in a CEP panel (CEF 99 in
   an embedded macOS view): the value still changes on scroll or arrow keys,
   so the control looks alive while showing no list to choose from. These are
   drawn as ordinary elements instead. The real <select> stays in the DOM as
   the source of truth, just visually hidden.

   Prefixed `dd-`, not `sel-`: `.sel` already marks a selected swatch or badge,
   and a bare `.sel { width: 100% }` here stretched them into full-width bars. */

.dd { position: relative; width: 100%; }

.dd-native {
  /* Hidden without display:none, so it keeps participating in forms/labels. */
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 0;
}

.dd-trigger {
  background: #1c1c1c;
  border: 1px solid #3d3d3d;
  border-radius: 4px;
  color: #e8e8e8;
  font-size: 12px;
  padding: 5px 22px 5px 7px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
.dd-trigger::after {
  content: '';
  position: absolute;
  right: 8px; top: 50%;
  margin-top: -2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #8a8a8a;
}
.dd-trigger:hover { border-color: #555; }
.dd-trigger:focus { border-color: #7C37E2; outline: none; }

.dd-list {
  position: fixed;
  z-index: 9999;
  background: #1c1c1c;
  border: 1px solid #4a4a4a;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .55);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 3px;
}

.dd-search {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 3px;
  background: #131313;
  border: 1px solid #3d3d3d;
  border-radius: 3px;
  color: #e8e8e8;
  font-size: 11px;
  padding: 4px 6px;
}
.dd-search.dd-none { border-color: #7a3a3a; }

.dd-group {
  color: #7a7a7a;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 6px 6px 3px;
}

.dd-opt {
  padding: 5px 7px;
  border-radius: 3px;
  font-size: 12px;
  color: #d8d8d8;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-opt:hover, .dd-opt.dd-active { background: #33333a; }
.dd-opt.dd-cur { color: #b98cff; }

/* --- wrap-width slider ----------------------------------------------------
   Styled explicitly rather than left native: CEF 99 renders default range
   controls inconsistently, and the panel should look the same in Premiere as
   it does on the web. */

.slider-row { align-items: center; }
.slider-row > span { flex: 0 0 auto; }
.slider-row em {
  color: #b98cff;
  font-style: normal;
  font-weight: 700;
}

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  width: 150px;
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
  height: 16px;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: #3d3d3d;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background: #7C37E2;
  border: none;
  margin-top: -5px; /* centre the thumb on a 4px track */
}
input[type=range]:hover::-webkit-slider-thumb { background: #8c4bf0; }
input[type=range]:focus { outline: none; }
input[type=range]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(124, 55, 226, .35);
}

/* A control that has nothing to act on: visibly inert rather than silently so.
   Corner radius is disabled when the background is transparent. */
.row-off { opacity: .4; }
.row-off input[type=range] { cursor: default; }