/* ========== Theme vars ========== */
:root {
  --fullscreen-background: #0d1e40;

  /* Badge styling (shared) */
  --badge-font-size: 12px;
  --badge-font-weight: 800;
  --badge-letter-spacing: 0.08em;
  --badge-padding: 6px 10px;
  --badge-radius: 999px;
  --badge-top: -22px;
  --badge-left: 12px;
  --badge-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);

  /* State colours */
  --internal-color: #c62828;
  --public-color: #2e7d32;

  /* State tints */
  --internal-tint: rgba(198, 40, 40, 0.04);
  --public-tint: rgba(46, 125, 50, 0.03);
}

:root[data-theme='light'] {
  --text-normal: #000;
  --text-muted: #666;
  --header-secondary: #666;
  --button-primary-background: #0d1e40;
  /* #--background-primary: #fff; */
  /* #--fullscreen-background: #fff; */
}

:root[data-theme='dark'] {}

/* ========== Branding tweaks ========== */
.hero-unit {
  /* #background-color: #0d1e40 !important; */
}

.icon-logo {
  background-image: url('/custom/arch_icon.png');
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-logo use {
  display: none;
}

.poweredBy {
  display: none;
}

/* Hide the make public / private link on open post */
.article-content a[data-type='public'] {
  display: none;
}

/* ========== Shared ticket article styling ========== */
.ticket-article-item.agent {
  position: relative;
}

.ticket-article-item.agent .textBubble {
  position: relative;
}

/* Shared badge base */
.ticket-article-item.agent .textBubble::before {
  display: inline-block;
  font-weight: var(--badge-font-weight);
  letter-spacing: var(--badge-letter-spacing);
  text-transform: uppercase;
  font-size: var(--badge-font-size);
  line-height: 1;
  padding: var(--badge-padding);
  border-radius: var(--badge-radius);
  color: #fff;

  position: absolute;
  top: var(--badge-top);
  left: var(--badge-left);
  box-shadow: var(--badge-shadow);
  z-index: 2;
}

/* Shared border base */
.ticket-article-item.agent .internal-border {
  border-radius: 10px;
  padding-top: 8px; /* room under badge */
}

/* ========== INTERNAL ========== */
.ticket-article-item.agent.is-internal .textBubble::before {
  content: "INTERNAL NOTE";
  background: var(--internal-color);
}

.ticket-article-item.agent.is-internal .internal-border {
  border: 2px dashed var(--internal-color);
}

.ticket-article-item.agent.is-internal .textBubble-content {
  background: var(--internal-tint);
}

.ticket-article-item.agent.is-internal .bubble-arrow {
  filter: saturate(1.4);
}

.ticket-article-item.agent.is-internal .js-article-actions a[data-type="public"] {
  color: var(--internal-color);
  font-weight: 700;
}

.ticket-article-item.agent.is-internal
  .js-article-actions a[data-type="public"]
  .article-action-name::after {
  content: " (careful)";
  font-weight: 600;
  opacity: 0.9;
}

/* ========== PUBLIC (not internal) ========== */
.ticket-article-item.agent:not(.is-internal) .textBubble::before {
  /**content: "RESPONSE TO CUSTOMER"; **/
  background: var(--public-color);
}

.ticket-article-item.agent:not(.is-internal) .internal-border {
  border: 2px solid var(--public-color);
}

.ticket-article-item.agent:not(.is-internal) .textBubble-content {
  background: var(--public-tint);
}

.ticket-article-item.agent:not(.is-internal) .bubble-arrow {
  filter: saturate(0.9);
}

.ticket-article-item.agent:not(.is-internal) .js-article-actions a[data-type="public"] {
  opacity: 0.6;
  pointer-events: none; /* remove if you still want it clickable */
}


/* Reminder when composing a reply/comment */
.article-add.is-open {
  position: relative;
}

/* Inline reminder beneath the editor */
.article-add.is-open::after {
  content: "Don’t forget to click Update to save or send your reply.";
  display: block;
  margin: 8px 0 0 50px !important;
  
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;

  color: #c62828; /* deliberate warning colour */
  background: rgba(198, 40, 40, 0.08);
  border-left: 4px solid #c62828;
  padding: 8px 12px;
  border-radius: 4px;
}

/* Optional: make it calmer for public replies if needed later
.article-add.is-open:not(.is-internal)::after {
  color: #2e7d32;
  background: rgba(46, 125, 50, 0.08);
  border-left-color: #2e7d32;
}
*/