/* CKM 694: shared visual identity for Negotiation Master and Effective Sales.
 * Purely presentational. Do not change game-state, dialogue, evaluation or builder behavior.
 * Loaded after negotiation-app.css so historic negotiation skins remain a safe fallback.
 */
html.ckm-neg-app-html {
  background:#0b0f14!important;
}
html.ckm-neg-app-html body.ckm-neg-app-document {
  --neg-sales-bg:#0b0f14;
  --neg-sales-panel:#111720;
  --neg-sales-panel-2:#151d28;
  --neg-sales-line:rgba(255,255,255,.09);
  --neg-sales-text:#f4f7fb;
  --neg-sales-muted:#9aa7b8;
  --neg-sales-accent:#63d3ff;
  --neg-sales-accent-2:#8df0cf;
  background:var(--neg-sales-bg)!important;
  color:var(--neg-sales-text)!important;
  font-family:Ubuntu,Arial,sans-serif!important;
  font-size:15px!important;
}
html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-app-frame {
  background:radial-gradient(circle at 18% 0%,rgba(99,211,255,.08),transparent 34%),var(--neg-sales-bg);
}
/* Header follows the sales app: compact body-font navigation, handwritten brand only. */
html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-appbar {
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  height:auto!important;
  min-height:74px!important;
  border-bottom:1px solid var(--neg-sales-line)!important;
  background:rgba(11,15,20,.92)!important;
  backdrop-filter:blur(18px);
}
html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-appbar-inner {
  width:100%!important;
  max-width:1480px!important;
  margin:0 auto!important;
  min-height:74px!important;
  padding:0 28px!important;
  gap:28px!important;
  display:flex!important;
  justify-content:flex-start!important;
  align-items:center!important;
}
html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-brand {
  min-width:270px!important;
  flex:0 0 auto!important;
  gap:12px!important;
  color:var(--neg-sales-text)!important;
}
html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-brand-mark {
  flex:0 0 42px!important;
  width:42px!important;
  height:42px!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:12px!important;
}
html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-brand-mark img {
  width:42px!important;height:42px!important;object-fit:contain;
  display:block;border-radius:12px;
}
html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-brand-copy {
  display:flex!important;
  min-width:0;
}
html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-brand-copy strong {
  font-family:Caveat,cursive!important;
  font-size:24px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:0!important;
  color:#fff!important;
}
html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-brand-copy small {
  display:block!important;
  color:var(--neg-sales-muted)!important;
  font-family:Ubuntu,Arial,sans-serif!important;
  font-size:12px!important;
  line-height:1.3!important;
  margin-top:4px!important;
}
html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-appnav {
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  gap:8px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none;
}
html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-appnav a {
  flex:0 0 auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:40px!important;
  padding:10px 13px!important;
  font-family:Ubuntu,Arial,sans-serif!important;
  font-size:14px!important;
  font-weight:400!important;
  line-height:1.3!important;
  color:#c8d1dd!important;
  border-radius:10px!important;
  text-decoration:none!important;
}
html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-appnav a:hover,
html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-appnav a.is-active {
  background:rgba(255,255,255,.06)!important;
  color:#fff!important;
}
html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-appnav a.is-active:after {display:none!important;}
html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-organizer-link {
  margin:0 0 0 auto!important;
  min-width:0!important;
  min-height:40px!important;
  height:auto!important;
  padding:10px 13px!important;
  font-family:Ubuntu,Arial,sans-serif!important;
  font-size:14px!important;
  font-weight:400!important;
  line-height:1.3!important;
  color:#c8d1dd!important;
  border-radius:10px!important;
  border:1px solid var(--neg-sales-line)!important;
  background:transparent!important;
}
html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-organizer-link:hover {
  color:#fff!important;
  background:rgba(255,255,255,.06)!important;
}
/* Main content and type hierarchy match the sales section. */
html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-app-main {
  width:100%!important;
  max-width:1480px!important;
  padding:0 28px!important;
  margin:0 auto!important;
}
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-shell {
  color:var(--neg-sales-text)!important;
  padding:30px 0 56px!important;
}
body.ckm-neg-app-document .ckm-neg-app-main h2,
body.ckm-neg-app-document .ckm-neg-app-main h3,
body.ckm-neg-app-document .ckm-neg-app-main h4,
body.ckm-neg-app-document .ckm-neg-app-main h5,
body.ckm-neg-app-document .ckm-neg-app-main h6 {
  font-family:Ubuntu,Arial,sans-serif!important;
  letter-spacing:normal!important;
  font-weight:600!important;
}
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-catalog-hero h1 {
  font-family:Caveat,cursive!important;
  font-size:clamp(38px,4vw,48px)!important;
  font-weight:700!important;
  letter-spacing:0!important;
  line-height:1.05!important;
}
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-catalog-hero,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-start-hero {
  background:linear-gradient(180deg,rgba(21,29,40,.97),rgba(16,22,31,.97))!important;
  border:1px solid var(--neg-sales-line)!important;
  border-radius:18px!important;
  box-shadow:0 18px 50px rgba(0,0,0,.28)!important;
}
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-catalog-hero:after,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-start-hero:after {
  background:radial-gradient(circle,rgba(99,211,255,.09),transparent 68%)!important;
}
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-lead,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-muted,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-catalog-count {
  color:var(--neg-sales-muted)!important;
}
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-kicker {
  color:var(--neg-sales-accent)!important;
  font-size:11px!important;
  letter-spacing:.12em!important;
  font-weight:700!important;
}
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-back,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-text-link {
  color:#9cdfff!important;
}
/* Catalog, assignment, game and editor surfaces. No layout/state changes. */
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-card,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-panel,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-scenario-card,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-library-card,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-builder-list-card,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-assignment-card {
  background:linear-gradient(180deg,rgba(21,29,40,.96),rgba(16,22,31,.96))!important;
  border-color:var(--neg-sales-line)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.20)!important;
}
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-scenario-card:hover,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-library-card:hover,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-builder-list-card:hover,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-assignment-card:hover {
  border-color:rgba(99,211,255,.32)!important;
}
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-chip {
  background:rgba(99,211,255,.10)!important;
  color:#a8e8ff!important;
  border-color:rgba(99,211,255,.16)!important;
}
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-chip.is-subtle {
  background:rgba(255,255,255,.045)!important;
  color:var(--neg-sales-muted)!important;
  border-color:var(--neg-sales-line)!important;
}
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-btn {
  background:#18212d!important;
  border:1px solid var(--neg-sales-line)!important;
  color:#edf4fb!important;
  border-radius:10px!important;
  box-shadow:none!important;
  font-family:Ubuntu,Arial,sans-serif!important;
  font-weight:500!important;
  text-decoration:none!important;
}
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-btn:hover {
  background:#1d2836!important;
  border-color:rgba(99,211,255,.3)!important;
  color:#fff!important;
}
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-btn.ckm-neg-primary,
body.ckm-neg-app-document .ckm-neg-app-main button.ckm-neg-primary {
  background:linear-gradient(135deg,#136f95,#126c73)!important;
  border-color:rgba(99,211,255,.38)!important;
  color:#fff!important;
}
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-btn.ckm-neg-primary:hover,
body.ckm-neg-app-document .ckm-neg-app-main button.ckm-neg-primary:hover {
  background:linear-gradient(135deg,#177ba4,#157d83)!important;
}
/* Destructive and unavailable actions keep their semantic treatment. */
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-btn.ckm-neg-danger {
  background:rgba(176,69,75,.13)!important;
  color:#ffc1bf!important;
  border-color:rgba(250,143,143,.3)!important;
}
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-btn.ckm-neg-danger:hover {
  background:rgba(176,69,75,.22)!important;
}
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-btn.is-disabled,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-btn:disabled {
  opacity:.5!important;
  cursor:not-allowed!important;
  transform:none!important;
}
/* Live negotiation and evaluation retain their structure, but use sales surfaces. */
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-dialogue,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-compose,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-state-item,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-start-choice,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-start-voice,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-builder-row,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-builder-toolbar,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-builder-tabs {
  background:#0d141d!important;
  border-color:var(--neg-sales-line)!important;
}
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-opponent {
  background:#151d28!important;
  border-color:var(--neg-sales-line)!important;
}
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-message {
  background:#18212c!important;
  border-color:var(--neg-sales-line)!important;
}
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-message.is-player {
  background:rgba(29,116,145,.25)!important;
  border-color:rgba(99,211,255,.23)!important;
}
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-coach {
  background:rgba(141,240,207,.07)!important;
  border-color:rgba(141,240,207,.18)!important;
  color:#d7f7ec!important;
}
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-builder-tabs button.is-active {
  background:rgba(99,211,255,.12)!important;
  color:#e7f7ff!important;
  box-shadow:inset 0 0 0 1px rgba(99,211,255,.30)!important;
}
body.ckm-neg-app-document .ckm-neg-app-main input:not([type=checkbox]):not([type=radio]),
body.ckm-neg-app-document .ckm-neg-app-main textarea,
body.ckm-neg-app-document .ckm-neg-app-main select {
  background:#0d141d!important;
  border-color:var(--neg-sales-line)!important;
  color:var(--neg-sales-text)!important;
}
body.ckm-neg-app-document .ckm-neg-app-main input:focus-visible,
body.ckm-neg-app-document .ckm-neg-app-main textarea:focus-visible,
body.ckm-neg-app-document .ckm-neg-app-main select:focus-visible,
html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-appnav a:focus-visible,
body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-btn:focus-visible {
  outline:2px solid var(--neg-sales-accent)!important;
  outline-offset:2px!important;
}
/* On narrow screens navigation stays scrollable (unlike the sales page) so builder,
 * assignments and catalog remain discoverable without a separate mobile menu. */
@media(max-width:1100px) {
  html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-appbar-inner {
    padding:0 16px!important;gap:14px!important;
  }
  html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-brand {min-width:0!important;}
  html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-brand-copy small {display:none!important;}
  html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-app-main {padding:0 16px!important;}
  html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-organizer-link {display:none!important;}
}
@media(max-width:720px) {
  html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-appbar {min-height:64px!important;}
  html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-appbar-inner {
    min-height:64px!important;padding:0 10px!important;gap:10px!important;
  }
  html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-brand {
    min-width:42px!important;gap:0!important;
  }
  html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-brand-copy {display:none!important;}
  html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-appnav a {
    font-family:Ubuntu,Arial,sans-serif!important;
    font-size:12px!important;
    padding:8px 9px!important;
    min-height:38px!important;
  }
  html.ckm-neg-app-html body.ckm-neg-app-document .ckm-neg-app-main {padding:0 10px!important;}
  body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-catalog-hero h1 {font-size:36px!important;}
  body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-shell {padding:18px 0 34px!important;}
}
@media(prefers-reduced-motion:reduce) {
  body.ckm-neg-app-document .ckm-neg-app-main .ckm-neg-btn {transition:none!important;}
}


/* NEG-DIALOGUE-VOICE-FIX 700.
 * The old 760px fixed viewport was almost entirely occupied by voice tools,
 * coach hints and composer, leaving the transcript one line tall. Let the
 * overall panel grow naturally, while the message list has its own viewport.
 * Scoped to the Negotiation Master player; other CKM apps stay untouched. */
body.ckm-neg-app-document .ckm-neg-app-main #ckm-neg-game > .ckm-neg-dialogue {
  display:flex!important;
  flex-direction:column!important;
  height:auto!important;
  min-height:800px!important;
  max-height:none!important;
  overflow:hidden!important;
}
body.ckm-neg-app-document .ckm-neg-app-main #ckm-neg-game > .ckm-neg-dialogue > #ckm-neg-messages {
  flex:1 1 auto!important;
  min-height:clamp(340px, 46vh, 540px)!important;
  max-height:58vh!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
body.ckm-neg-app-document .ckm-neg-app-main #ckm-neg-game > .ckm-neg-dialogue > .ckm-neg-compose {
  flex:0 0 auto!important;
  min-width:0;
}
@media (max-width:720px) {
  body.ckm-neg-app-document .ckm-neg-app-main #ckm-neg-game > .ckm-neg-dialogue {
    min-height:680px!important;
  }
  body.ckm-neg-app-document .ckm-neg-app-main #ckm-neg-game > .ckm-neg-dialogue > #ckm-neg-messages {
    min-height:280px!important;
    max-height:52vh!important;
  }
}