.orders-page {
  width: min(920px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0 72px;
}

.orders-page h1 {
  margin: 8px 0;
}

.orders-back {
  display: inline-block;
  margin-bottom: 28px;
  color: #8ee8ff;
  text-decoration: none;
}

.orders-intro,
.orders-message {
  color: #b7d4df;
}

.orders-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.customer-order-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(82, 204, 248, 0.3);
  border-radius: 10px;
  background: #061b2a;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.customer-order-card:hover,
.customer-order-card:focus-visible {
  border-color: #8ee8ff;
  outline: none;
  transform: translateY(-1px);
}

.customer-order-card h2 {
  margin: 5px 0;
  font-size: 18px;
}

.customer-order-card p {
  margin: 0;
  color: #b7d4df;
}

.customer-order-total {
  align-self: center;
  color: #8ee8ff;
  font-size: 20px;
  font-weight: 800;
}

.customer-order-popup {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.68);
}

.customer-order-popup.show { display: grid; }
.customer-order-dialog { position: relative; width: min(860px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 28px; border: 1px solid rgba(82,204,248,.4); border-radius: 14px; background: #061b2a; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.customer-order-dialog h2 { margin: 7px 0 18px; }
.customer-order-close { position: absolute; top: 14px; right: 18px; border: 0; background: transparent; color: #8ee8ff; font-size: 30px; cursor: pointer; }
.customer-order-summary, .customer-order-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.customer-order-summary > div, .customer-order-options > div { padding: 12px; border: 1px solid rgba(82,204,248,.22); border-radius: 8px; background: rgba(4,25,39,.75); }
.customer-order-options { grid-template-columns: repeat(2, 1fr); margin-top: 10px; }
.customer-order-summary span, .customer-order-options span { display: block; margin-bottom: 5px; color: #8ee8ff; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.customer-order-options ul { min-height: 20px; margin: 0; padding-left: 18px; }
.customer-order-chat { margin-top: 16px; border: 1px solid rgba(82,204,248,.3); border-radius: 10px; overflow: hidden; }
.customer-chat-heading { display: flex; flex-direction: column; gap: 3px; padding: 14px; border-bottom: 1px solid rgba(82,204,248,.2); }
.customer-order-messages { min-height: 230px; max-height: 370px; overflow-y: auto; padding: 14px; }
.customer-order-messages { scrollbar-color: #69dfff #061b2a; scrollbar-width: thin; }
.customer-order-messages::-webkit-scrollbar { width: 10px; }
.customer-order-messages::-webkit-scrollbar-track { background: #061b2a; }
.customer-order-messages::-webkit-scrollbar-thumb { background: #69dfff; border: 2px solid #061b2a; border-radius: 10px; }
.customer-order-messages::-webkit-scrollbar-thumb:hover { background: #a9edff; }
.customer-chat-message { max-width: 78%; margin-bottom: 10px; padding: 10px 12px; border-radius: 10px; background: #103148; }
.customer-chat-message,.customer-chat-message.buyer{padding:7px 0;background:transparent!important;border-radius:0}.customer-chat-message-content{background:transparent!important}
.customer-chat-message.seller { margin-right: auto; }.customer-chat-message.buyer { margin-left: auto; background: #135874; }
.customer-chat-message.seller { justify-content: start; }.customer-chat-message.buyer { justify-content: end; }
.customer-chat-message strong { display: block; margin-bottom: 3px; font-size: 12px; color: #bcefff; }.customer-chat-empty { color: #b7d4df; }
.customer-message-compose { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(82,204,248,.2); }.customer-message-compose textarea { flex: 1; resize: vertical; padding: 9px; border: 1px solid rgba(82,204,248,.4); border-radius: 7px; background: #03131f; color: #fff; }.customer-message-compose button { padding: 0 17px; border: 0; border-radius: 7px; background: #39bee9; color: #04141f; font-weight: 800; cursor: pointer; }
.chat-attachment-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.chat-attachment-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:68px;padding:0 10px;border:1px solid #45cafa;border-radius:7px;background:#0b425e;color:#dff8ff;font:700 11px "Trebuchet MS",Arial,sans-serif;cursor:pointer;white-space:nowrap}.chat-attachment-button:hover{background:#135f80}.chat-attachment-name{min-height:16px;margin:0 12px 10px;color:#8cdcf7;font:11px "Trebuchet MS",Arial,sans-serif}.chat-attachment{display:block;width:min(100%,300px);margin-top:8px;color:#a9eaff;text-decoration:none}.chat-attachment img,.chat-attachment video{display:block;width:100%;max-height:230px;object-fit:contain;border:1px solid rgba(121,222,255,.45);border-radius:7px;background:#04131e}.chat-attachment small{display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#a9eaff;font-size:10px}
.customer-chat-reply{margin:0 0 6px;padding:5px 7px;border-left:3px solid #66dfff;background:rgba(76,194,237,.12);color:#a9dced;font-size:10px;line-height:1.35}.customer-chat-close-request{display:grid;gap:8px;max-width:350px;margin:12px auto;padding:12px;border:1px solid #4bd4ff;border-radius:8px;background:#0a3147;color:#e2f8ff;text-align:center;font-family:"Trebuchet MS",Arial,sans-serif}.customer-chat-close-request strong{color:#70e2ff}.customer-chat-close-actions{display:flex;justify-content:center;gap:8px}.customer-chat-close-actions button{border:1px solid #57cef1;border-radius:5px;padding:8px 10px;background:#126b8d;color:#fff;font-weight:800;cursor:pointer}.customer-chat-close-actions button:first-child{border-color:#72d58e;background:#17653d}.customer-chat-close-actions button:hover{filter:brightness(1.14)}
.customer-typing-indicator { color: #7ce5ff; font-size: 12px; font-style: italic; font-weight: 700; }.customer-typing-indicator:empty { display: none; }
.customer-order-summary button,.customer-shulker-edit{margin-top:7px;padding:6px 10px;border:1px solid #55cff9;border-radius:5px;background:#123c53;color:#dff8ff;font-weight:800;cursor:pointer}.order-shulker-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;margin:12px 0;padding:10px;border:6px solid #8657ae;border-radius:8px;background:#432c5c}.order-shulker-grid[hidden]{display:none}.order-shulker-slot{aspect-ratio:1;min-width:0;border:1px solid #241733;border-radius:3px;background:#1e3142;position:relative}.order-shulker-slot img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.order-shulker-slot b{position:absolute;right:1px;bottom:0;color:#fff;font-size:11px;text-shadow:1px 1px #000}

@media (max-width: 600px) { .customer-order-summary, .customer-order-options { grid-template-columns: 1fr; }.customer-order-card { grid-template-columns: 1fr; }.customer-order-total { justify-self: start; } }
@media (max-width: 700px) { .customer-message-compose textarea { font-size: 16px; } }

body {
  min-height: 100vh;
  background: linear-gradient(180deg, #0b2638 0%, #0b1d2a 62%, #071522 100%);
  color: #fff;
  font-family: "Minecraft Ten", Arial, sans-serif;
}

.orders-page { padding-top: 58px; }
.orders-page h1 { color: #fff; font-family: "Minecraft Ten", Arial, sans-serif; font-size: clamp(28px, 5vw, 46px); line-height: 1.25; }
.orders-page .page-label, .orders-back, .orders-message { color: #bcefff; }
.customer-order-card, .customer-order-card h2, .customer-order-card p { color: #fff; font-family: "Minecraft Ten", Arial, sans-serif; }
.customer-order-card { align-items: center; background: rgba(8, 24, 36, .88); border-color: rgba(144, 223, 255, .42); }
.customer-order-card h2 { font-size: 21px; }.customer-order-card p { color: #dff7ff; font-size: 13px; }
.customer-order-dialog, .customer-order-summary > div, .customer-order-options > div { color: #fff; background: rgba(8, 24, 36, .94); }
.customer-order-chat, .customer-message-compose { font-family: "Trebuchet MS", Arial, sans-serif; }.customer-chat-heading strong { color: #fff; }
.customer-chat-message { display: flex; width: 100%; gap: 9px; align-items: start; color: #fff; font-family: "Trebuchet MS", Arial, sans-serif; }.customer-chat-message.buyer { flex-direction: row-reverse; justify-content: flex-start; }.customer-chat-message.buyer .customer-chat-avatar { order: 0; }.customer-chat-avatar { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid #83dfff; border-radius: 50%; object-fit: cover; background: #0b4c68; }.customer-chat-avatar-fallback { display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 800; }.customer-chat-message-content { width: fit-content; min-width: 0; max-width: calc(100% - 43px); }.customer-chat-message.buyer .customer-chat-message-content { order: 0; }.customer-message-compose button { font-family: "Trebuchet MS", Arial, sans-serif; }
.customer-chat-message.seller,.customer-chat-message.buyer{margin-left:0;margin-right:auto;flex-direction:row;justify-content:flex-start}.customer-chat-message.buyer .customer-chat-avatar,.customer-chat-message.buyer .customer-chat-message-content{order:0}

/* This is the Dev Panel's order-only version of the customer live chat. */
body.staff-order-embed { overflow: hidden; background: #061725; }
body.staff-order-embed .orders-page { display: none; }
body.staff-order-embed .customer-order-popup { display: grid; padding: 0; background: #061725; }
body.staff-order-embed .customer-order-dialog { width: 100%; max-width: none; min-height: 100vh; max-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
body.staff-order-embed .customer-order-close { display: none; }


/* =========================================================
   V52 — FULL PAGE ORDER CHAT
   /orders/0158 style routes are internally rewritten to orders.html.
========================================================= */
body.my-orders-page,
body.order-detail-mode {
  background: linear-gradient(180deg, #bdeaff 0%, #a9ddf7 55%, #9fd5f0 100%) !important;
  color: #123f63 !important;
}

body.order-detail-mode .orders-page {
  display: none !important;
}

body.order-detail-mode .customer-order-popup {
  position: static;
  inset: auto;
  display: block !important;
  min-height: calc(100vh - 92px);
  padding: 28px clamp(14px, 4vw, 48px) 38px;
  background: transparent;
}

body.order-detail-mode .customer-order-dialog {
  width: min(1180px, 100%);
  max-width: 1180px;
  max-height: none;
  min-height: min(760px, calc(100vh - 150px));
  margin: 0 auto;
  overflow: visible;
  padding: 0;
  border: 2px solid rgba(23, 105, 170, .38);
  border-radius: 22px;
  background: rgba(236, 249, 255, .82);
  box-shadow: 0 18px 48px rgba(22, 86, 127, .18), inset 0 1px rgba(255,255,255,.85);
  color: #0c3e69;
}

.order-livechat-brand {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  min-height: 76px;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(23,105,170,.22);
  background: linear-gradient(90deg, rgba(103,190,245,.5), rgba(208,240,255,.7));
  border-radius: 20px 20px 0 0;
}
.order-livechat-brand > div { display: flex; flex-direction: column; gap: 2px; }
.order-livechat-brand strong {
  color: #1375c6;
  font-family: "Minecraft Ten", "Press Start 2P", Arial, sans-serif;
  font-size: clamp(20px, 2.8vw, 34px);
  line-height: 1;
  text-shadow: 2px 2px 0 rgba(255,255,255,.9);
}
.order-livechat-brand span { color: #245b84; font: 700 12px "Trebuchet MS", Arial, sans-serif; }
.order-detail-back {
  border: 2px solid #1769aa;
  border-radius: 10px;
  padding: 9px 12px;
  background: #f7fdff;
  color: #1769aa;
  font: 800 12px "Trebuchet MS", Arial, sans-serif;
  text-decoration: none;
  white-space: nowrap;
}
.order-live-dot { color: #12b76a !important; font-weight: 900 !important; }

body.order-detail-mode .customer-order-close { display: none; }
body.order-detail-mode #customerOrderNumber,
body.order-detail-mode #customerOrderTitle,
body.order-detail-mode .customer-order-summary,
body.order-detail-mode .customer-order-options {
  margin-left: 22px;
  margin-right: 22px;
}
body.order-detail-mode #customerOrderNumber { display: block; margin-top: 20px; color: #2977a8; }
body.order-detail-mode #customerOrderTitle {
  margin-top: 5px;
  margin-bottom: 14px;
  color: #0b4674;
  font-family: "Minecraft Ten", Arial, sans-serif;
}
body.order-detail-mode .customer-order-summary > div,
body.order-detail-mode .customer-order-options > div {
  border-color: rgba(23,105,170,.2);
  background: rgba(255,255,255,.62);
  color: #0c416b;
}
body.order-detail-mode .customer-order-summary span,
body.order-detail-mode .customer-order-options span { color: #347ba9; }

body.order-detail-mode .customer-order-chat {
  margin: 20px 22px 22px;
  border: 1px solid rgba(23,105,170,.25);
  border-radius: 14px;
  background: rgba(255,255,255,.56);
  box-shadow: inset 0 1px rgba(255,255,255,.8);
}
body.order-detail-mode .customer-chat-heading {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom-color: rgba(23,105,170,.18);
  background: rgba(212,241,255,.72);
}
body.order-detail-mode .customer-chat-heading strong { color: #104d7d; }
body.order-detail-mode .customer-order-messages {
  min-height: 330px;
  max-height: 52vh;
  padding: 18px;
  scrollbar-color: #55aee4 #dff5ff;
}
body.order-detail-mode .customer-order-messages::-webkit-scrollbar-track { background: #dff5ff; }
body.order-detail-mode .customer-order-messages::-webkit-scrollbar-thumb { background: #55aee4; border-color: #dff5ff; }
body.order-detail-mode .customer-chat-message { color: #123f63; }
body.order-detail-mode .customer-chat-message strong { color: #0b4d7d; }
body.order-detail-mode .customer-chat-avatar { border-color: #4aa8df; background: #d6f3ff; }
body.order-detail-mode .customer-chat-message-text,
body.order-detail-mode .customer-chat-message-content { color: #123f63; }
body.order-detail-mode .customer-chat-empty { color: #4d7695; }
body.order-detail-mode .customer-message-compose {
  align-items: stretch;
  padding: 12px;
  border-top-color: rgba(23,105,170,.18);
  background: rgba(219,244,255,.72);
}
body.order-detail-mode .customer-message-compose textarea {
  min-height: 48px;
  resize: none;
  border: 1px solid #8ac7e8;
  border-radius: 12px;
  background: #fff;
  color: #123f63;
}
body.order-detail-mode .customer-message-compose textarea::placeholder { color: #6c9bb9; }
body.order-detail-mode .chat-attachment-button {
  min-width: 52px;
  border-color: #75bce5;
  background: #d9f2ff;
  color: #1769aa;
}
body.order-detail-mode .customer-message-compose button {
  min-width: 116px;
  border-radius: 12px;
  background: #167ee6;
  color: #fff;
}
body.order-detail-mode .chat-attachment-name { color: #397da8; }
body.order-detail-mode .chat-attachment img,
body.order-detail-mode .chat-attachment video { border-color: #78bfe5; background: #e8f8ff; }

/* My Orders listing stays light-blue too. */
body.my-orders-page .orders-page h1 { color: #0b4d7d; }
body.my-orders-page .orders-intro,
body.my-orders-page .orders-message { color: #3d7093; }
body.my-orders-page .customer-order-card {
  background: rgba(239,250,255,.84);
  border-color: rgba(23,105,170,.28);
  color: #0d456f;
}
body.my-orders-page .customer-order-card h2 { color: #0b4d7d; }
body.my-orders-page .customer-order-card p { color: #527d99; }
body.my-orders-page .customer-order-total { color: #1674b7; }

@media (min-width: 860px) {
  body.order-detail-mode .customer-order-dialog {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    grid-template-areas:
      "brand brand"
      "number summary"
      "title summary"
      "chat summary";
  }
  body.order-detail-mode .order-livechat-brand { grid-area: brand; }
  body.order-detail-mode #customerOrderNumber { grid-area: number; align-self: end; }
  body.order-detail-mode #customerOrderTitle { grid-area: title; }
  body.order-detail-mode .customer-order-chat { grid-area: chat; }
  body.order-detail-mode .customer-order-summary {
    grid-area: summary;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 20px 0 0;
  }
  body.order-detail-mode .customer-order-options {
    grid-column: 2;
    grid-row: 4;
    display: flex;
    flex-direction: column;
    margin: 0 20px 22px 0;
  }
}

@media (max-width: 700px) {
  body.order-detail-mode .customer-order-popup {
    min-height: 100vh;
    padding: 0 0 92px;
  }
  body.order-detail-mode .customer-order-dialog {
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: rgba(236,249,255,.92);
  }
  .order-livechat-brand {
    position: sticky;
    top: 0;
    z-index: 5;
    grid-template-columns: auto 1fr auto;
    min-height: 70px;
    padding: 10px 12px;
    border-radius: 0;
  }
  .order-detail-back { padding: 8px; font-size: 0; }
  .order-detail-back::after { content: "←"; font-size: 20px; }
  .order-livechat-brand strong { font-size: 22px; }
  body.order-detail-mode #customerOrderNumber,
  body.order-detail-mode #customerOrderTitle,
  body.order-detail-mode .customer-order-summary,
  body.order-detail-mode .customer-order-options,
  body.order-detail-mode .customer-order-chat { margin-left: 12px; margin-right: 12px; }
  body.order-detail-mode .customer-order-messages { min-height: 46vh; max-height: none; }
  body.order-detail-mode .customer-message-compose {
    position: sticky;
    bottom: 0;
    z-index: 4;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  body.order-detail-mode .customer-message-compose button { min-width: 58px; padding-inline: 12px; }
  body.order-detail-mode .chat-attachment-button span:last-child { display: none; }
}

/* v54: Order cards are real links so /orders/#### navigation always changes the URL. */
a.customer-order-card {
  text-decoration: none;
  color: inherit;
}

/* =========================================================
   V58 — ORIGINAL MANUAL LIGHT-BLUE CHAT + STAFF TOOLS
========================================================= */
.customer-staff-tools {
  margin: 14px 22px 0;
  padding: 14px;
  border: 1px solid rgba(23,105,170,.22);
  border-radius: 12px;
  background: rgba(255,255,255,.58);
  color: #0c416b;
}
.customer-staff-tools[hidden] { display: none !important; }
.customer-staff-tools > span {
  display: block;
  margin-bottom: 10px;
  color: #347ba9;
  font: 800 11px "Trebuchet MS", Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.customer-staff-tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.customer-staff-tool-actions button {
  padding: 9px 12px;
  border: 1px solid #6bb7e4;
  border-radius: 8px;
  background: #d9f2ff;
  color: #1769aa;
  font-weight: 800;
  cursor: pointer;
}
.customer-staff-tool-actions button:last-child {
  background: #1769aa;
  color: #fff;
}
#customerOrderCommandHint {
  display: block;
  margin-top: 9px;
  color: #4f7ca0;
  font: 700 11px "Trebuchet MS", Arial, sans-serif;
}
.customer-command-menu {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 78px;
  z-index: 30;
  padding: 8px;
  border: 1px solid rgba(23,105,170,.25);
  border-radius: 10px;
  background: #f7fdff;
  box-shadow: 0 12px 28px rgba(21,84,126,.16);
}
.customer-command-menu[hidden] { display: none !important; }
.customer-command-menu button {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #145f96;
  text-align: left;
  cursor: pointer;
  font-weight: 800;
}
.customer-command-menu button:hover { background: #e3f5ff; }
.customer-reminder-modal[hidden] { display: none !important; }
.customer-reminder-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(13,55,86,.32);
}
.customer-reminder-dialog {
  width: min(520px,100%);
  padding: 20px;
  border: 1px solid rgba(23,105,170,.25);
  border-radius: 16px;
  background: #eaf8ff;
  box-shadow: 0 18px 40px rgba(26,88,127,.18);
  color: #0c416b;
}
.customer-reminder-dialog h3 {
  margin: 0 0 14px;
  color: #1769aa;
  font-family: "Minecraft Ten", Arial, sans-serif;
}
.customer-reminder-dialog label {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: #347ba9;
  font: 800 11px "Trebuchet MS", Arial, sans-serif;
  text-transform: uppercase;
}
.customer-reminder-dialog input,
.customer-reminder-dialog textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #8ac7e8;
  border-radius: 9px;
  background: #fff;
  color: #123f63;
  font: 500 14px "Trebuchet MS", Arial, sans-serif;
}
.customer-reminder-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.customer-reminder-actions button {
  padding: 10px 13px;
  border: 1px solid #6bb7e4;
  border-radius: 8px;
  background: #d9f2ff;
  color: #1769aa;
  font-weight: 800;
  cursor: pointer;
}
.customer-reminder-actions button:last-child { background: #1769aa; color: #fff; }
@media (max-width: 700px) {
  .customer-staff-tools { margin-left: 12px; margin-right: 12px; }
}


/* =========================================================
   V60 — KEEP ORIGINAL V58 CHAT, ONLY MOVE SIDE/DETAIL AREAS
========================================================= */
@media (min-width: 860px) {
  body.order-detail-mode .customer-order-dialog {
    grid-template-columns: minmax(0, 1fr) 310px !important;
    grid-template-areas:
      "brand brand"
      "number summary"
      "title summary"
      "chat summary"
      "details details" !important;
  }

  body.order-detail-mode .order-role-sidebar {
    grid-area: summary;
    display: block !important;
    margin: 20px 20px 22px 0 !important;
  }

  body.order-detail-mode .customer-order-chat {
    grid-area: chat;
    margin: 20px 22px 22px !important;
  }

  body.order-detail-mode .order-detail-panels {
    grid-area: details;
  }
}

.order-role-sidebar {
  border: 1px solid rgba(23,105,170,.22);
  border-radius: 12px;
  background: rgba(255,255,255,.62);
  overflow: hidden;
  align-self: stretch;
}

.order-role-sidebar-heading {
  display: grid;
  gap: 3px;
  padding: 13px 14px;
  border-bottom: 1px solid rgba(23,105,170,.16);
  background: rgba(216,242,255,.78);
}

.order-role-sidebar-heading span {
  color: #347ba9;
  font: 800 10px "Trebuchet MS", Arial, sans-serif;
  letter-spacing: .08em;
}

.order-role-sidebar-heading strong {
  color: #104d7d;
  font: 800 14px "Trebuchet MS", Arial, sans-serif;
}

.order-role-list {
  display: grid;
  gap: 2px;
  padding: 8px;
}

.order-role-loading {
  margin: 8px;
  color: #557f9e;
  font: 700 12px "Trebuchet MS", Arial, sans-serif;
}

.order-role-row {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 7px;
  border-radius: 9px;
}

.order-role-row:hover { background: rgba(196,232,250,.52); }

.order-role-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #4d89d0;
  color: #fff;
  font-weight: 900;
}

.order-role-info { min-width: 0; }
.order-role-name-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.order-role-name-line strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #114d7d;
  font: 800 12px "Trebuchet MS", Arial, sans-serif;
}
.order-role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  background: #4d89d0;
  color: white;
  font: 800 8px "Trebuchet MS", Arial, sans-serif;
  white-space: nowrap;
}
.order-buyer-label {
  display: block;
  margin-top: 2px;
  color: #6287a3;
  font: 800 8px "Trebuchet MS", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.role-owner .order-role-icon,
.order-role-badge.role-owner { background: #247fff; }
.role-dev .order-role-icon,
.order-role-badge.role-dev { background: #15a2c7; }
.role-manager .order-role-icon,
.order-role-badge.role-manager { background: #8a49ed; }
.role-base-builder .order-role-icon,
.order-role-badge.role-base-builder { background: #f39a1f; }
.role-member .order-role-icon,
.order-role-badge.role-member { background: #4d89d0; }

.order-role-sidebar .customer-staff-tools {
  margin: 8px !important;
  padding: 10px !important;
}
.order-role-sidebar .customer-staff-tool-actions {
  display: block;
}
.order-role-sidebar #customerRemindButton {
  width: 100%;
}

.order-detail-panels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 10px;
  margin: 0 22px 22px;
}

.order-detail-box {
  min-height: 88px;
  padding: 13px;
  border: 1px solid rgba(23,105,170,.22);
  border-radius: 11px;
  background: rgba(255,255,255,.64);
}
.order-detail-box[hidden] { display: none !important; }
.order-detail-box > span {
  display: block;
  margin-bottom: 6px;
  color: #347ba9;
  font: 800 10px "Trebuchet MS", Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.order-detail-box > strong {
  color: #0c416b;
  font-family: "Minecraft Ten", Arial, sans-serif;
  font-size: 15px;
}
.order-detail-box ul {
  margin: 0;
  padding-left: 15px;
  color: #164f7c;
  font: 700 11px "Trebuchet MS", Arial, sans-serif;
}

@media (max-width: 859px) {
  body.order-detail-mode .order-role-sidebar,
  body.order-detail-mode .order-detail-panels {
    margin-left: 12px;
    margin-right: 12px;
  }

  body.order-detail-mode .order-role-sidebar {
    margin-top: 12px;
  }

  .order-detail-panels {
    grid-template-columns: repeat(2,minmax(0,1fr));
    margin-top: 12px;
  }
}

@media (max-width: 560px) {
  .order-detail-panels {
    grid-template-columns: 1fr;
  }
}


/* V61 role roster Discord avatars */
.order-role-avatar {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(23,105,170,.24);
  border-radius: 8px;
  object-fit: cover;
  background: #dff3ff;
}


/* =========================================================
   V62 — PARTICIPANT ROLE GROUPS + NAMEPLATES + STAFF SCROLL
========================================================= */

/* Staff opens order chat as its own tab. Never trap the whole page at 100vh. */
html:has(body.staff-order-embed),
body.staff-order-embed,
body.staff-order-embed.order-detail-mode {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100% !important;
  overscroll-behavior-y: auto !important;
}

body.staff-order-embed .customer-order-popup,
body.staff-order-embed.order-detail-mode .customer-order-popup {
  position: static !important;
  display: block !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow: visible !important;
  padding-bottom: 48px !important;
}

body.staff-order-embed .customer-order-dialog,
body.staff-order-embed.order-detail-mode .customer-order-dialog {
  min-height: calc(100vh - 24px) !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Role group separators like Discord. */
.order-role-list {
  display: block !important;
  padding: 8px !important;
}

.order-role-group + .order-role-group {
  margin-top: 10px;
}

.order-role-separator {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 5px 7px 6px;
  border-bottom: 1px solid rgba(23,105,170,.16);
  color: #347ba9;
  font: 800 10px "Trebuchet MS", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.order-role-separator strong,
.order-role-separator span {
  font: inherit;
  color: inherit;
}


.order-role-group-members {
  display: grid;
  gap: 2px;
  padding-top: 4px;
}

/* Equipped nameplates sit behind usernames without changing the chat layout. */
.order-role-name,
.order-chat-nameplate {
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 7px;
  border-radius: 6px;
}

.order-role-name.has-nameplate::before,
.order-chat-nameplate::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -3px -7px;
  border-radius: 7px;
  background-image:
    linear-gradient(rgba(223,245,255,.34), rgba(223,245,255,.34)),
    var(--order-nameplate);
  background-size: cover;
  background-position: center;
  opacity: .9;
}

.order-role-name.has-nameplate,
.order-chat-nameplate {
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 0 3px rgba(255,255,255,.9);
}

/* Keep the role column usable if several actual participants join. */
.order-role-sidebar {
  max-height: none !important;
}
.order-role-list {
  max-height: 62vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}


/* =========================================================
   V64 — DISCORD-LIKE ROLE DIVIDERS + FULL NAMEPLATE CARDS
========================================================= */

/* Dividers stay neutral/light gray regardless of role. */
.order-role-separator,
.order-role-group.role-owner .order-role-separator,
.order-role-group.role-dev .order-role-separator,
.order-role-group.role-manager .order-role-separator,
.order-role-group.role-base-builder .order-role-separator,
.order-role-group.role-member .order-role-separator {
  color: #78828c !important;
  border-bottom: 0 !important;
  padding: 8px 8px 5px !important;
  min-height: 30px;
  font-family: "Trebuchet MS", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.order-role-separator strong,
.order-role-separator span {
  color: inherit !important;
  font: inherit !important;
}

/* Participant row behaves like a Discord member row / nameplate card. */
.order-role-row {
  position: relative;
  isolation: isolate;
  min-height: 58px;
  padding: 8px 9px !important;
  border-radius: 13px !important;
  overflow: hidden;
  background: transparent;
}

.order-role-row.has-full-nameplate {
  background-image:
    linear-gradient(rgba(12,38,58,.14), rgba(12,38,58,.14)),
    var(--order-nameplate);
  background-size: cover;
  background-position: center;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 4px 11px rgba(16,78,119,.08);
}

.order-role-row.has-full-nameplate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(225,246,255,.10), rgba(255,255,255,.04));
}

.order-role-row.has-full-nameplate .order-role-name,
.order-role-row.has-full-nameplate .order-role-badge,
.order-role-row.has-full-nameplate .order-buyer-label {
  position: relative;
  z-index: 4;
}

.order-role-row.has-full-nameplate .order-role-name {
  color: #f4fbff !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.88),
    0 0 5px rgba(0,0,0,.55);
}

.order-role-row.has-full-nameplate .order-buyer-label {
  color: rgba(245,250,255,.82) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}

.order-role-row.has-full-nameplate .order-role-avatar,
.order-role-row.has-full-nameplate .order-role-icon {
  position: relative;
  z-index: 4;
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 2px 7px rgba(0,0,0,.22);
}

/* Nameplate live effects cover the ENTIRE participant row. */
.order-nameplate-effects {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.order-nameplate-rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.order-nameplate-rain i {
  --x: calc((var(--i) * 37) % 101);
  position: absolute;
  top: -28px;
  left: calc(var(--x) * 1%);
  width: 1.5px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(235,249,255,0), rgba(226,247,255,.88));
  opacity: .82;
  transform: rotate(10deg);
  animation: order-nameplate-rain-fall .84s linear infinite;
  animation-delay: calc(var(--i) * -0.037s);
}

.order-nameplate-rain i:nth-child(3n) {
  height: 28px;
  opacity: .62;
  animation-duration: .97s;
}

.order-nameplate-rain i:nth-child(4n) {
  height: 16px;
  animation-duration: .72s;
}

@keyframes order-nameplate-rain-fall {
  from { transform: translate3d(0,-32px,0) rotate(10deg); }
  to   { transform: translate3d(-18px,105px,0) rotate(10deg); }
}

.order-nameplate-shimmer {
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255,255,255,.46) 48%,
    transparent 58%
  );
  transform: translateX(-42%);
  animation: order-nameplate-shimmer 2.4s ease-in-out infinite;
}

@keyframes order-nameplate-shimmer {
  0%, 28% { transform: translateX(-45%); opacity: 0; }
  45% { opacity: .9; }
  72%, 100% { transform: translateX(45%); opacity: 0; }
}

.order-nameplate-water {
  position: absolute;
  inset: 55% -20% -30%;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(157,226,255,.35), transparent 45%),
    radial-gradient(ellipse at 70% 10%, rgba(64,177,224,.28), transparent 52%);
  filter: blur(2px);
  animation: order-nameplate-water 3.6s ease-in-out infinite alternate;
}

@keyframes order-nameplate-water {
  from { transform: translateX(-6%) translateY(2px) scaleX(1.04); }
  to { transform: translateX(6%) translateY(-3px) scaleX(.98); }
}

.order-nameplate-clouds {
  position: absolute;
  inset: 0;
  opacity: .34;
}

.order-nameplate-clouds i {
  position: absolute;
  width: 52px;
  height: 14px;
  border-radius: 999px;
  background: rgba(240,250,255,.65);
  filter: blur(3px);
  animation: order-nameplate-clouds 6s linear infinite;
}
.order-nameplate-clouds i:nth-child(1) { top: 9px; left: -58px; }
.order-nameplate-clouds i:nth-child(2) { top: 30px; left: -86px; animation-delay: -2s; }
.order-nameplate-clouds i:nth-child(3) { top: 45px; left: -72px; animation-delay: -4s; }

@keyframes order-nameplate-clouds {
  from { transform: translateX(0); }
  to { transform: translateX(390px); }
}

.order-role-row.order-nameplate-pulse {
  animation: order-nameplate-pulse 2.2s ease-in-out infinite;
}

@keyframes order-nameplate-pulse {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.13); }
}

/* Disable old tiny sidebar-name-only nameplate styling. */
.order-role-name.has-nameplate::before {
  display: none !important;
}


/* =========================================================
   V65 — Discord-like gray dividers + full-width nameplates
========================================================= */
.order-role-list {
  padding: 6px 8px 10px !important;
}

.order-role-group + .order-role-group {
  margin-top: 12px;
}

.order-role-separator,
.order-role-group.role-owner .order-role-separator,
.order-role-group.role-dev .order-role-separator,
.order-role-group.role-manager .order-role-separator,
.order-role-group.role-base-builder .order-role-separator,
.order-role-group.role-member .order-role-separator {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 4px 6px !important;
  color: #8e949b !important;
  border-bottom: 0 !important;
  background: transparent !important;
  font-family: "Trebuchet MS", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.1;
}

.order-role-separator strong,
.order-role-separator span {
  color: inherit !important;
  font: inherit !important;
}

.order-role-group-members {
  display: grid;
  gap: 5px;
  padding-top: 2px;
}

.order-role-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 10px !important;
  border-radius: 16px !important;
  overflow: hidden;
  isolation: isolate;
  background: rgba(220, 241, 252, 0.55);
}

.order-role-row.has-full-nameplate {
  background-image:
    linear-gradient(rgba(14, 26, 36, 0.28), rgba(14, 26, 36, 0.28)),
    var(--order-nameplate);
  background-size: cover;
  background-position: center;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 3px 10px rgba(16,78,119,.10);
}

.order-role-row.has-full-nameplate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.05), rgba(255,255,255,.03));
}

.order-role-row .order-role-avatar,
.order-role-row .order-role-icon,
.order-role-row .order-role-info,
.order-role-row .order-role-name-line,
.order-role-row .order-buyer-label {
  position: relative;
  z-index: 4;
}

.order-role-avatar,
.order-role-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: 0 0 36px;
}

.order-role-info {
  min-width: 0;
  flex: 1 1 auto;
}

.order-role-name-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.order-role-name-line strong,
.order-role-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 800 12px "Trebuchet MS", Arial, sans-serif;
}

.order-role-row:not(.has-full-nameplate) .order-role-name {
  color: #114d7d;
}

.order-role-row.has-full-nameplate .order-role-name {
  color: #f5fbff !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.82),
    0 0 6px rgba(0,0,0,.42);
}

/* Neutral role text like the Discord-style example; no bright role colors. */
.order-role-badge,
.order-role-badge.role-owner,
.order-role-badge.role-dev,
.order-role-badge.role-manager,
.order-role-badge.role-base-builder,
.order-role-badge.role-member {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(224, 229, 235, 0.95) !important;
  color: #5d6670 !important;
  border: 1px solid rgba(206, 213, 220, 0.95);
  font: 800 8px "Trebuchet MS", Arial, sans-serif !important;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .02em;
  box-shadow: none;
}

.order-role-row.has-full-nameplate .order-role-badge {
  background: rgba(232, 238, 244, 0.95) !important;
  color: #515962 !important;
  border-color: rgba(255,255,255,.30);
}

.order-buyer-label {
  display: block;
  margin-top: 2px;
  color: #7d8892;
  font: 800 8px "Trebuchet MS", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.order-role-row.has-full-nameplate .order-buyer-label {
  color: rgba(241,247,252,.85) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.72);
}

/* Full-card live nameplate effects. */
.order-nameplate-effects {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.order-nameplate-rain,
.order-nameplate-shimmer,
.order-nameplate-water,
.order-nameplate-clouds {
  position: absolute;
  inset: 0;
}

.order-nameplate-rain i {
  --x: calc((var(--i) * 37) % 100);
  position: absolute;
  top: -30px;
  left: calc(var(--x) * 1%);
  width: 1.6px;
  height: 21px;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(229,248,255,.90));
  opacity: .85;
  transform: rotate(10deg);
  animation: order-nameplate-rain-fall .82s linear infinite;
  animation-delay: calc(var(--i) * -0.035s);
}
.order-nameplate-rain i:nth-child(3n) {
  height: 28px;
  opacity: .66;
  animation-duration: .95s;
}
.order-nameplate-rain i:nth-child(4n) {
  height: 15px;
  animation-duration: .7s;
}

.order-nameplate-shimmer {
  inset: -38% -58%;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.50) 48%, transparent 58%);
  transform: translateX(-45%);
  animation: order-nameplate-shimmer 2.4s ease-in-out infinite;
}

.order-nameplate-water {
  inset: 54% -16% -28%;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(157,226,255,.34), transparent 45%),
    radial-gradient(ellipse at 70% 10%, rgba(64,177,224,.28), transparent 52%);
  filter: blur(2px);
  animation: order-nameplate-water 3.6s ease-in-out infinite alternate;
}

.order-nameplate-clouds {
  opacity: .32;
}
.order-nameplate-clouds i {
  position: absolute;
  width: 54px;
  height: 14px;
  border-radius: 999px;
  background: rgba(240,250,255,.68);
  filter: blur(3px);
  animation: order-nameplate-clouds 6s linear infinite;
}
.order-nameplate-clouds i:nth-child(1) { top: 9px; left: -58px; }
.order-nameplate-clouds i:nth-child(2) { top: 28px; left: -86px; animation-delay: -2s; }
.order-nameplate-clouds i:nth-child(3) { top: 44px; left: -72px; animation-delay: -4s; }

/* Old username-only nameplate background disabled in sidebar. */
.order-role-name.has-nameplate::before {
  display: none !important;
}


/* =========================================================
   V66 — live nameplate animation + reminder modal reliability
========================================================= */
html.order-modal-open,
body.order-modal-open {
  overflow: hidden !important;
}

.customer-reminder-modal.show {
  display: grid !important;
  z-index: 10000 !important;
}

/* Keep animated layers visibly above the nameplate background and below content. */
.order-role-row.has-full-nameplate {
  position: relative;
  transform: translateZ(0);
}

.order-nameplate-effects {
  z-index: 2 !important;
  opacity: 1 !important;
  mix-blend-mode: screen;
}

.order-role-row.has-full-nameplate .order-role-avatar,
.order-role-row.has-full-nameplate .order-role-icon,
.order-role-row.has-full-nameplate .order-role-info {
  z-index: 5 !important;
}

/* Slightly stronger rain so the effect is obvious but still readable. */
.order-nameplate-rain i {
  width: 1.7px !important;
  opacity: .92 !important;
  filter: drop-shadow(0 0 1px rgba(215,245,255,.55));
}


/* =========================================================
   V81 — PARTICIPANT PROFILE DISPLAY + CLICKABLE NAMES
========================================================= */
.order-role-profile-trigger {
  cursor: pointer !important;
}

.order-role-profile-trigger *,
.order-role-profile-trigger .order-role-name,
.order-chat-profile-trigger {
  cursor: pointer !important;
}

.order-role-profile-trigger:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 5px 12px rgba(16,78,119,.12);
}

.order-chat-profile-trigger {
  display: inline-block;
  border-radius: 5px;
}

.order-chat-profile-trigger:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

html.order-profile-modal-open,
body.order-profile-modal-open {
  overflow: hidden !important;
}

.order-participant-profile-modal {
  position: fixed;
  inset: 0;
  z-index: 25000;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(6, 29, 43, .56);
  backdrop-filter: blur(8px);
}

.order-participant-profile-modal.show {
  display: grid !important;
}

.order-participant-profile-modal[hidden] {
  display: none !important;
}

.order-participant-profile-card {
  position: relative;
  width: min(430px, 94vw);
  max-height: min(760px, 92vh);
  overflow-y: auto;
  border: 2px solid #55bce7;
  border-radius: 20px;
  background: #172b38;
  color: #ecf9ff;
  box-shadow: 0 22px 60px rgba(0,0,0,.3);
}

.order-participant-profile-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(8,29,42,.78);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.order-participant-profile-banner {
  position: relative;
  min-height: 135px;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(98,199,239,.48), transparent 36%),
    linear-gradient(135deg, #1d6d92, #17384b);
  background-size: cover !important;
  background-position: center !important;
}

.order-participant-profile-banner .order-nameplate-effects,
.order-participant-profile-nameplate .order-nameplate-effects,
.order-participant-profile-display .order-nameplate-effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.order-participant-profile-identity {
  display: flex;
  gap: 13px;
  align-items: flex-end;
  padding: 0 18px;
  margin-top: -31px;
  position: relative;
  z-index: 5;
}

.order-participant-profile-avatar {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  object-fit: cover;
  border: 5px solid #172b38;
  border-radius: 50%;
  background: #24485d;
}

.order-participant-profile-heading {
  min-width: 0;
  padding-bottom: 3px;
}

.order-participant-profile-heading strong {
  display: block;
  color: var(--order-profile-name-color, #fff);
  font-family: "Minecraft Ten", Arial, sans-serif;
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-participant-profile-heading strong[data-font="regular"] {
  font-family: Arial, sans-serif;
}

.order-participant-profile-heading strong[data-font="blocky"] {
  letter-spacing: .05em;
  text-transform: uppercase;
}

.order-participant-profile-heading > span:not(.order-participant-profile-role) {
  display: block;
  margin-top: 3px;
  color: #9bb6c4;
  font-size: 11px;
}

.order-participant-profile-role {
  display: inline-flex;
  margin-top: 6px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #d9e3e9;
  color: #56626a;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.order-participant-profile-status {
  margin: 16px 18px 0;
  padding: 9px 11px;
  border: 1px solid #31566b;
  border-radius: 10px;
  background: #203b4b;
  color: #e5f8ff;
  font-size: 10px;
  line-height: 1.45;
}

.order-participant-profile-bio,
.order-participant-profile-equipped {
  margin: 16px 18px 0;
  padding: 13px;
  border: 1px solid #2c4b5c;
  border-radius: 12px;
  background: #102430;
}

.order-participant-profile-equipped {
  margin-bottom: 18px;
}

.order-participant-profile-bio > span,
.order-participant-profile-equipped > span {
  display: block;
  margin-bottom: 8px;
  color: #81bcd7;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}

.order-participant-profile-bio p {
  margin: 0;
  color: #d5e7ef;
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.order-participant-profile-nameplate,
.order-participant-profile-display {
  position: relative;
  min-height: 74px;
  overflow: hidden;
  margin-top: 9px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: #1a3b4d;
  background-size: cover !important;
  background-position: center !important;
}

.order-participant-profile-display {
  min-height: 120px;
}

.order-participant-profile-nameplate small,
.order-participant-profile-display small {
  position: absolute;
  left: 9px;
  bottom: 8px;
  z-index: 8;
  padding: 4px 7px;
  border-radius: 6px;
  background: rgba(7,22,32,.72);
  color: #fff;
  font-size: 8px;
}

.order-participant-profile-nameplate[hidden],
.order-participant-profile-display[hidden] {
  display: none !important;
}


/* =========================================================
   V82 — EQUIPPED ITEMS LINK TO MARKETPLACE
========================================================= */
.order-profile-marketplace-link {
  cursor: pointer !important;
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    filter .14s ease;
}

.order-profile-marketplace-link *,
.order-profile-marketplace-link small {
  cursor: pointer !important;
}

.order-profile-marketplace-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    0 0 0 2px rgba(85,188,231,.44),
    0 8px 18px rgba(0,0,0,.20);
}

.order-profile-marketplace-link:focus-visible {
  outline: 3px solid #55bce7;
  outline-offset: 3px;
}

/* Tiny marketplace hint without cluttering the profile. */
.order-participant-profile-nameplate.order-profile-marketplace-link::after,
.order-participant-profile-display.order-profile-marketplace-link::after,
.order-participant-profile-banner.order-profile-marketplace-link::after {
  content: "View in Marketplace";
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 12;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(5,23,34,.74);
  color: #e8f9ff;
  font-size: 7px;
  font-weight: 900;
  pointer-events: none;
}


/* =========================================================
   V83 — LIVE CHAT FULL NAMEPLATE CLICK + EFFECTS
========================================================= */

/* The clickable area is the WHOLE visual nameplate, not just the letters. */
.customer-chat-message-content > .order-chat-nameplate {
  position: relative !important;
  isolation: isolate;
  display: flex !important;
  align-items: center;
  width: min(100%, 340px) !important;
  min-height: 38px !important;
  margin: 0 0 5px !important;
  padding: 8px 12px !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background-image:
    linear-gradient(rgba(8,31,45,.14), rgba(8,31,45,.14)),
    var(--order-nameplate) !important;
  background-size: cover !important;
  background-position: center !important;
  color: #f5fbff !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.9),
    0 0 5px rgba(0,0,0,.5);
  cursor: pointer !important;
}

.customer-chat-message-content > .order-chat-nameplate:hover {
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.25),
    0 4px 12px rgba(12,72,104,.14);
  filter: brightness(1.05);
}

.customer-chat-message-content > .order-chat-nameplate,
.customer-chat-message-content > .order-chat-nameplate * {
  cursor: pointer !important;
}

/* Effect overlay is allowed to cover the entire nameplate but never steals clicks. */
.customer-chat-message-content > .order-chat-nameplate .order-nameplate-effects {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Keep the username visibly above rain/shimmer/etc. */
.customer-chat-message-content > .order-chat-nameplate {
  z-index: 0;
}

.customer-chat-message-content > .order-chat-nameplate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}

/* Existing profile popup/banner/nameplate/display effects stay visible and animated. */
.order-participant-profile-banner,
.order-participant-profile-nameplate,
.order-participant-profile-display,
.order-role-row.has-full-nameplate {
  transform: translateZ(0);
}

.order-participant-profile-banner .order-nameplate-effects,
.order-participant-profile-nameplate .order-nameplate-effects,
.order-participant-profile-display .order-nameplate-effects,
.order-role-row.has-full-nameplate .order-nameplate-effects {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

/* Entire right-side nameplate row is one profile button. */
.order-role-row.has-full-nameplate {
  cursor: pointer !important;
}

.order-role-row.has-full-nameplate *,
.order-role-row.has-full-nameplate .order-role-info,
.order-role-row.has-full-nameplate .order-role-name {
  cursor: pointer !important;
}


/* =========================================================
   V95 — LIVE CHAT USES STAFF PANEL FONT
========================================================= */

/* Give the entire live order conversation the same ShoreBuild staff-panel
   Minecraft font while leaving long helper/body copy readable where needed. */
.customer-order-chat,
.customer-chat-heading,
.customer-chat-heading strong,
.customer-chat-message,
.customer-chat-message-content,
.customer-chat-message-content strong,
.customer-chat-message-content p,
.customer-message-compose,
.customer-message-compose textarea,
.customer-message-compose button,
.chat-attachment-button,
.customer-chat-close-request,
.customer-chat-close-request strong,
.customer-chat-close-actions button,
.order-role-group-title,
.order-role-row,
.order-chat-profile-trigger,
.customer-typing-indicator {
  font-family: "Minecraft Ten", "Press Start 2P", Arial, sans-serif !important;
}

/* Keep message sizes comfortable with the chunkier Minecraft font. */
.customer-chat-message-content p,
.customer-message-compose textarea {
  line-height: 1.45 !important;
}

.customer-message-compose textarea {
  font-size: 12px !important;
}

.customer-chat-message-content p {
  font-size: 12px !important;
}

.customer-chat-heading strong {
  letter-spacing: .01em;
}


/* =========================================================
   V98 — LIVE CHAT MESSAGE CONTEXT MENU + SHULKER PREVIEW
========================================================= */
.customer-chat-message {
  user-select: text;
}
.customer-chat-message.is-own-message {
  cursor: context-menu;
}
.customer-chat-context-menu {
  position: fixed;
  z-index: 65000;
  min-width: 145px;
  padding: 6px;
  border: 2px solid #185a84;
  border-radius: 10px;
  background: #eefaff;
  box-shadow: 0 14px 34px rgba(12, 57, 86, .25);
}
.customer-chat-context-menu[hidden] { display: none !important; }
.customer-chat-context-menu button {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #164f76;
  text-align: left;
  font-family: "Minecraft Ten", Arial, sans-serif !important;
  cursor: pointer;
}
.customer-chat-context-menu button:hover { background: #d4f2ff; }
.customer-chat-context-menu button.danger { color: #b73535; }
.customer-chat-context-menu button.danger:hover { background: #ffe3e3; }

.customer-chat-compose-mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 5px;
  padding: 8px 11px;
  border: 2px solid #4d97bd;
  border-radius: 9px;
  background: #dff6ff;
  color: #165a82;
  font-family: "Minecraft Ten", Arial, sans-serif;
  font-size: 10px;
}
.customer-chat-compose-mode button {
  border: 0;
  background: transparent;
  color: #165a82;
  font-size: 20px;
  cursor: pointer;
}

.order-shulker-preview {
  display: inline-block;
  width: min(232px, 100%);
  padding: 7px;
  border: 3px solid #6d3f82;
  border-radius: 11px;
  background: linear-gradient(#a36ac3, #74478d);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.15), 0 4px 10px rgba(43,31,53,.18);
  cursor: zoom-in;
}
.order-shulker-preview:disabled { cursor: default; }
.order-shulker-preview-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 3px;
}
.order-shulker-preview-slot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid #3c2847;
  border-radius: 3px;
  background: #2c3340;
  overflow: visible;
}
.order-shulker-preview-slot img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  image-rendering: pixelated;
}
.order-shulker-preview-slot em {
  position: absolute;
  right: 2px;
  bottom: 0;
  color: #fff;
  font: 700 9px/1 Arial, sans-serif;
  text-shadow: -1px -1px #111, 1px 1px #111;
}
.order-shulker-preview-fallback {
  color: #d9f2ff;
  font: 700 9px/1 Arial, sans-serif;
}
.order-shulker-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 64000;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(8, 31, 47, .58);
  backdrop-filter: blur(6px);
}
.order-shulker-preview-modal.show { display: grid; }
.order-shulker-preview-dialog {
  position: relative;
  width: min(680px, 96vw);
  padding: 25px;
  border: 3px solid #185a84;
  border-radius: 17px;
  background: #eaf9ff;
  box-shadow: 0 25px 60px rgba(8, 37, 57, .34);
  text-align: center;
}
.order-shulker-preview-dialog h3 {
  margin: 8px 0 18px;
  color: #155b84;
  font-family: "Minecraft Ten", Arial, sans-serif;
}
.order-shulker-preview-dialog p {
  color: #52758a;
  font-size: 12px;
}
.order-shulker-preview-close {
  position: absolute;
  top: 10px;
  right: 11px;
  width: 36px;
  height: 36px;
  border: 2px solid #185a84;
  border-radius: 8px;
  background: #fff;
  color: #185a84;
  font-size: 22px;
  cursor: pointer;
}
.order-shulker-preview.is-large {
  width: min(560px, 88vw);
  padding: 14px;
}
.order-shulker-preview.is-large .order-shulker-preview-grid { gap: 6px; }
.order-shulker-preview.is-large .order-shulker-preview-slot { border-width: 2px; }
.order-shulker-preview.is-large .order-shulker-preview-slot em { font-size: 13px; }

@media (max-width: 620px) {
  .order-shulker-preview { width: 100%; }
  .order-shulker-preview-dialog { padding: 20px 12px; }
  .order-shulker-preview.is-large { width: 100%; }
  .order-shulker-preview.is-large .order-shulker-preview-grid { gap: 3px; }
}


/* v109: Custom notes may contain long words/order references; keep them inside the panel. */
.order-notes-box > strong {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
}