/* GrabSauce webapps — /apology-letter/ ([gs_apology_letter]) and /sales-meeting/ ([gs_sales_meeting]). * Loaded after css/emoji-generator.css, which supplies the shared chrome and * the --gs-* tokens on .gs-emoji. Only the webapp-specific bits live here, plus * the queue display and the run bar that all five tool pages share. */ /* The input box is shorter: the options sit under it. */ .gs-webapp textarea[data-gs-input] { min-height: 150px; flex: 0 0 auto; } /* Output is mostly plain text with some ASCII (letterhead, KPI chart, bingo): keep it monospace and small enough that 30 columns fit a phone. */ .gs-emoji textarea.gs-webapp__output { font-size: 15px; line-height: 1.45; min-height: 420px; } .gs-webapp__field { border: 0; margin: 16px 0 0; padding: 0; min-width: 0; } .gs-webapp .gs-webapp__q { display: block; color: var(--gs-orange); font-weight: 700; font-size: 14px; margin: 0 0 8px; padding: 0; float: none; width: auto; text-align: left; } .gs-webapp__val { color: var(--gs-teal); font-weight: 700; margin-left: 6px; } /* "Who's upset?" chips: the mode pills, smaller */ .gs-webapp__chips { display: flex; flex-wrap: wrap; gap: 6px; } .gs-webapp__chips legend { width: 100%; } .gs-webapp__chip label { padding: 6px 12px; font-size: 13px; } .gs-emoji input.gs-webapp__text { width: 100%; margin: 6px 0 0; background: var(--gs-navy-darkest); color: #f5f5f5; border: 1px solid var(--gs-muted); border-radius: 8px; padding: 9px 12px; font-family: 'Courier New', monospace; font-size: 15px; } .gs-emoji input.gs-webapp__text::placeholder { color: var(--gs-dim); } .gs-emoji input.gs-webapp__text:focus { outline: none; border-color: var(--gs-orange); box-shadow: 0 0 0 2px rgba(231, 127, 36, 0.25); } /* 0-4 sliders */ .gs-webapp__range { width: 100%; margin: 0; accent-color: var(--gs-orange); cursor: pointer; } .gs-webapp__range:focus-visible { outline: 2px solid var(--gs-teal); outline-offset: 4px; } .gs-webapp__ends { display: flex; justify-content: space-between; color: var(--gs-dim); font-size: 12px; margin-top: 2px; } /* Extras checkboxes */ .gs-webapp__checks { border: 0; margin: 16px 0 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; } .gs-webapp__checks legend { width: 100%; } .gs-webapp__check { display: inline-flex; gap: 6px; align-items: center; color: var(--gs-grey); font-size: 14px; cursor: pointer; } .gs-webapp__check input { accent-color: var(--gs-orange); width: 16px; height: 16px; margin: 0; } /* Queue: "#3 in line · ~60 s" + a little line of people. Plain spans, not 
: style.css forces pre to 7px on phones. */
.gs-webapp__queue {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 12px 0 0;
    padding: 10px 14px;
    border: 1px dashed var(--gs-orange);
    border-radius: 8px;
    background: rgba(231, 127, 36, 0.06);
    font-family: 'Courier New', monospace;
}
.gs-webapp__queue[hidden] { display: none; }
.gs-webapp__queue-pos { color: var(--gs-orange); font-size: 34px; font-weight: 700; line-height: 1; }
.gs-webapp__queue-meta { color: #fff; font-size: 14px; }
.gs-webapp__queue-line { flex-basis: 100%; color: var(--gs-teal); font-size: 14px; letter-spacing: 1px; white-space: normal; word-break: break-all; }

.gs-emoji button.gs-webapp__local { margin-top: 10px; white-space: normal; text-align: left; border-color: var(--gs-teal); color: var(--gs-teal); }
.gs-emoji button.gs-webapp__local[hidden] { display: none; }

/* Translators + emoji (js/gs-box-tool.js): the in-browser model is the fallback,
   tucked into a "run it in your browser" box under the AI note. */
.gs-box-local { margin: 12px 0 0; color: var(--gs-grey); font-size: 14px; }
.gs-box-local[hidden] { display: none; }
.gs-box-local > summary { cursor: pointer; color: var(--gs-teal); }
.gs-box-local__why { margin: 8px 0 0; padding: 0; color: var(--gs-dim); font-size: 13px; }

@media (max-width: 767px) {
    .gs-emoji textarea.gs-webapp__output { font-size: 13px; min-height: 360px; }
}

/* ==== Run bar (all 5 tool pages) ============================================
 * ONE main button, top middle: [data-gs-ai-run] = run / re-run, Stop while busy
 * (data-gs-state="stop"), Instant while the AI box is offline (data-gs-state=
 * "instant"). In line at #1-#5 the queue sits under the button; further back
 * (.gs-run--long, set by GSBoxTool.queueView) it is "⚡ Instant" on the left,
 * "You're #7 in line" in the middle, Stop on the right. Markup: gs_tool_markup().
 * ========================================================================== */
.gs-run { max-width: 820px; margin: 0 auto 28px; text-align: center; }
.gs-run[hidden] { display: block; } /* never hidden: it is the only way to run */
.gs-run__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "left main right" "queue queue queue";
    align-items: center;
    gap: 12px 16px;
}
.gs-emoji button.gs-run__main {
    grid-area: main;
    font-size: 18px;
    padding: 14px 30px;
    min-width: 240px;
    box-shadow: 0 0 0 4px rgba(231, 127, 36, 0.15);
    transition: background .15s, color .15s, border-color .15s;
}
.gs-emoji button.gs-run__main[data-gs-state="stop"] { background: var(--gs-navy-darkest); border-color: var(--gs-orange); color: var(--gs-orange); box-shadow: none; }
.gs-emoji button.gs-run__main[data-gs-state="stop"]:hover { background: var(--gs-navy-mid); color: #fff; }
.gs-emoji button.gs-run__main[data-gs-state="instant"] { background: var(--gs-teal); border-color: var(--gs-teal); color: var(--gs-navy); box-shadow: 0 0 0 4px rgba(46, 196, 182, 0.15); }
.gs-emoji button.gs-run__main[data-gs-state="instant"]:hover { background: #26a89c; border-color: #26a89c; }
.gs-emoji button.gs-run__instant {
    grid-area: left;
    justify-self: end;
    font-size: 16px;
    padding: 12px 20px;
    border-color: var(--gs-teal);
    color: var(--gs-teal);
}
.gs-emoji button.gs-run__instant:hover { background: rgba(46, 196, 182, 0.12); border-color: var(--gs-teal); }
.gs-emoji button.gs-run__instant[hidden] { display: none; }
.gs-run .gs-run__queue { grid-area: queue; justify-self: center; margin: 0; justify-content: center; text-align: left; }
.gs-run__queue .gs-webapp__queue-who { color: var(--gs-grey); font-size: 14px; }
/* Near the front: a small line under the button. */
.gs-run:not(.gs-run--long) .gs-webapp__queue-pos { font-size: 22px; }
.gs-run:not(.gs-run--long) .gs-webapp__queue-line { display: none; }
/* Far back: Instant | count | Stop */
.gs-run--long .gs-run__bar { grid-template-areas: "left queue main"; }
.gs-emoji .gs-run--long button.gs-run__main { justify-self: start; min-width: 0; }
.gs-run--long .gs-run__queue { max-width: 320px; }
.gs-emoji .gs-run p.gs-run__note {
    color: var(--gs-grey);
    font-size: 13px;
    line-height: 1.5;
    margin: 12px auto 0;
    padding: 0;
    max-width: 640px;
    min-height: 1.5em;
}
.gs-run__progress { display: block; width: 100%; max-width: 420px; height: 10px; margin: 10px auto 0; accent-color: var(--gs-orange); }
.gs-run__progress[hidden] { display: none; }

@media (max-width: 767px) {
    .gs-run { margin-bottom: 22px; }
    .gs-run__bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "main main" "queue queue"; gap: 10px; }
    .gs-emoji button.gs-run__main { width: 100%; min-width: 0; font-size: 17px; }
    .gs-run--long .gs-run__bar { grid-template-areas: "queue queue" "left main"; }
    .gs-emoji .gs-run--long button.gs-run__main, .gs-emoji .gs-run--long button.gs-run__instant { justify-self: stretch; width: 100%; padding: 12px 10px; }
    .gs-run--long .gs-run__queue { max-width: none; width: 100%; }
}
/* ==== end run bar ==== */

/* ==== apology letter: letterhead form + paper preview (js/apology-letter.js) ==== */
.gs-apology__brand { display: flex; flex-direction: column; }
.gs-apology__lbl { display: block; color: var(--gs-grey); font-size: 13px; margin: 8px 0 0; }
.gs-apology__brand .gs-apology__lbl:first-of-type { margin-top: 0; }
.gs-apology__logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0 0; }
/* The file input stays focusable; its label is the button you see. */
.gs-apology__file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
/* A