:root {
  --paper: #ffffff;
  --wash: #f7f8f9;
  --mist: #eceff0;
  --line: #dfe3e3;
  --ink: #242529;
  --muted: #6f777d;
  --cloud: #8ea8b8;
  --lilac: #b7b3c9;
  --sage: #9aaa9c;
  --stone: #a69f97;
  --pearl: #fdfbf7;
  --shadow: 0 20px 70px rgba(40, 44, 48, 0.12);
  --radius: 8px;
}

/* Request-to-order handoff */
.chat-convert-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid #cbd9d8;
  border-radius: 7px;
  background: #f2f7f5;
  color: #46625e;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.chat-drawer[data-chat-mode="thread"] .chat-convert-trigger {
  display: inline-flex;
}

.chat-convert-trigger:hover:not(:disabled) {
  border-color: #9eb9b3;
  background: #e8f2ee;
  color: #2e5049;
  transform: translateY(-1px);
}

.chat-convert-trigger:focus-visible {
  outline: 2px solid #87a4b0;
  outline-offset: 2px;
}

.chat-convert-trigger:disabled {
  opacity: 0.48;
  cursor: wait;
}

.request-convert-card {
  width: min(860px, calc(100vw - 48px));
}

.request-convert-header {
  border-bottom-color: #d9e2e2;
}

.request-convert-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.request-convert-heading-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #cadbd7;
  border-radius: 8px;
  background: #edf5f2;
  color: #55756d;
  font-size: 17px;
}

.request-convert-form {
  gap: 0;
  padding-top: 0;
}

.request-convert-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin: 0 -22px;
  padding: 17px 22px;
  border-bottom: 1px solid #dce5e5;
  background: linear-gradient(90deg, #f7f9fa, #f4f7f6 50%, #f1f6f4);
}

.request-convert-route > span {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 0 10px;
  min-width: 0;
}

.request-convert-route > span > i {
  grid-row: 1 / 3;
  color: #738c93;
  font-size: 19px;
  text-align: center;
}

.request-convert-route > span:last-child > i {
  color: #607d74;
}

.request-convert-route small,
.request-convert-client-copy small,
.request-convert-stat small,
.field-hint {
  color: #849196;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

.request-convert-route strong {
  overflow: hidden;
  color: #30373a;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.request-convert-route > .fa-arrow-right-long {
  color: #8ca29d;
  font-size: 17px;
}

.request-convert-client {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid #e2e8e8;
}

.request-convert-avatar {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--avatar, #a7b4ad);
  color: #fff;
  box-shadow: 0 0 0 1px #d5dfdf, 0 7px 18px rgba(52, 66, 68, 0.11);
  font-weight: 900;
}

.request-convert-client-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.request-convert-client-copy strong {
  overflow: hidden;
  color: #2d3437;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.request-convert-client-copy > span {
  overflow: hidden;
  color: #718084;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.request-convert-stat {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0 6px;
  min-width: 72px;
  padding-left: 14px;
  border-left: 1px solid #dfe7e7;
}

.request-convert-stat i {
  grid-row: 1 / 3;
  color: #899ba0;
  font-size: 13px;
}

.request-convert-stat strong {
  color: #333b3e;
  font-size: 14px;
  line-height: 1;
}

.request-convert-assurance {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 17px 0 18px;
  padding: 3px 0 3px 13px;
  border-left: 3px solid #9eb8b1;
  color: #657478;
  font-size: 12px;
  line-height: 1.55;
}

.request-convert-assurance > i {
  color: #6c8d84;
}

.request-convert-assurance strong {
  color: #35423f;
}

.request-convert-fields {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 0.8fr;
  gap: 15px;
}

.request-convert-fields > label {
  align-content: start;
  gap: 7px;
  min-width: 0;
  color: #55646a;
  font-size: 12px;
  letter-spacing: 0;
}

.request-convert-title-field,
.request-convert-wide {
  grid-column: 1 / -1;
}

.request-convert-fields input,
.request-convert-fields textarea,
.request-convert-fields select {
  min-height: 46px;
  padding: 11px 12px;
  border-radius: 7px;
}

.request-convert-fields textarea {
  min-height: 88px;
}

.request-convert-fields label:last-child textarea {
  min-height: 102px;
}

.field-hint {
  display: block;
  font-weight: 700;
}

.request-convert-actions {
  position: sticky;
  bottom: -22px;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 20px -22px -22px;
  padding: 15px 22px;
  border-top: 1px solid #dce5e5;
  background: rgba(250, 252, 252, 0.97);
  box-shadow: 0 -10px 24px rgba(53, 65, 67, 0.05);
  backdrop-filter: blur(10px);
}

.request-convert-actions .button {
  min-width: 150px;
}

.request-convert-card.is-complete {
  border-color: #a8c2ba;
  box-shadow: 0 34px 110px rgba(27, 31, 34, 0.28), 0 0 0 3px rgba(151, 185, 174, 0.14);
}

.chat-conversion-moment {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 11px;
  width: min(440px, calc(100% - 24px));
  margin: 8px auto;
  padding: 11px 13px;
  border: 1px solid #cbdcd7;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #5e706c;
  box-shadow: 0 12px 30px rgba(49, 64, 62, 0.08);
  animation: conversion-moment-in 0.28s ease-out;
}

.chat-conversion-moment > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #e6f1ed;
  color: #53776d;
}

.chat-conversion-moment > div {
  display: grid;
  gap: 2px;
}

.chat-conversion-moment strong {
  color: #33413d;
  font-size: 12px;
}

.chat-conversion-moment small {
  font-size: 10px;
  line-height: 1.4;
}

.chat-drawer.is-converting .chat-panel {
  border-color: #a9c1ba;
  box-shadow: 0 38px 120px rgba(24, 28, 31, 0.34), 0 0 0 3px rgba(147, 180, 170, 0.13);
}

.chat-drawer.is-converting .chat-heading-icon {
  border-color: #bed3cd;
  background: #e9f3ef;
  color: #53756c;
}

.work-item.is-promoting {
  pointer-events: none;
  opacity: 0;
  transform: translateX(18px) scale(0.985);
}

.live-converted-order {
  animation: converted-order-in 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes conversion-moment-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes converted-order-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
  .chat-convert-trigger {
    width: 36px;
    min-height: 36px;
    padding: 0;
  }

  .chat-convert-trigger span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .chat-drawer[data-chat-mode="thread"] .chat-header h2 {
    max-width: calc(100vw - 210px);
  }

  .request-convert-route {
    gap: 9px;
    margin-right: -15px;
    margin-left: -15px;
    padding: 14px 15px;
  }

  .request-convert-route > span {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 0 6px;
  }

  .request-convert-route > span > i {
    font-size: 15px;
  }

  .request-convert-client {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
  }

  .request-convert-stat {
    min-width: 58px;
    padding-left: 10px;
  }

  .request-convert-stat:last-child {
    display: none;
  }

  .request-convert-fields {
    grid-template-columns: 1fr;
  }

  .request-convert-title-field,
  .request-convert-wide {
    grid-column: auto;
  }

  .request-convert-actions {
    bottom: -15px;
    margin: 18px -15px -15px;
    padding: 12px 15px max(12px, env(safe-area-inset-bottom));
  }

  .request-convert-actions .button {
    min-width: 0;
  }

  .request-convert-actions .button.primary {
    flex: 1;
  }
}

@media (max-width: 430px) {
  .request-convert-header h2 {
    font-size: 22px;
  }

  .request-convert-heading-icon {
    width: 38px;
    height: 38px;
  }

  .request-convert-route strong {
    font-size: 11px;
  }

  .request-convert-client-copy strong {
    font-size: 13px;
  }

  .request-convert-assurance {
    align-items: flex-start;
  }

  .request-convert-actions .button.ghost {
    width: 42px;
    min-width: 42px;
    overflow: hidden;
    padding: 0;
    color: transparent;
  }

  .request-convert-actions .button.ghost::before {
    content: "\f00d";
    color: #59666b;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-convert-trigger,
  .request-convert-card,
  .chat-conversion-moment,
  .work-item.is-promoting,
  .live-converted-order {
    transition: none;
    animation: none;
  }
}

/* In-page chat image preview */
.message-attachment.image {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}

.message-attachment.image::after {
  content: "\f00e";
  position: absolute;
  top: 13px;
  right: 13px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(28, 31, 35, 0.68);
  color: #fff;
  box-shadow: 0 8px 20px rgba(18, 21, 24, 0.22);
  font-family: "Font Awesome 6 Free";
  font-size: 11px;
  font-weight: 900;
  opacity: 0;
  transform: translateY(4px) scale(0.9);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.message-attachment.image img {
  transition: transform 0.22s ease, filter 0.22s ease;
}

.message-attachment.image:hover::after,
.message-attachment.image:focus-visible::after {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.message-attachment.image:hover img {
  filter: brightness(0.94);
  transform: scale(1.025);
}

.chat-image-preview {
  --preview-image-scale: 0.955;
  --preview-pan-x: 0px;
  --preview-pan-y: 0px;
  --preview-zoom-scale: 1;
  --preview-commit-offset-x: 0px;
  --preview-commit-offset-y: 0px;
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 16px 18px 22px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: rgba(16, 18, 21, 0.9);
  backdrop-filter: blur(14px) saturate(0.72);
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

.chat-image-preview.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.chat-image-preview-toolbar {
  z-index: 2;
  display: flex;
  width: min(1180px, 100%);
  min-width: 0;
  min-height: 54px;
  align-items: center;
  justify-self: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 8px 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(42, 45, 50, 0.76);
  color: #fff;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
  transform: translateY(-8px);
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.chat-image-preview.is-open .chat-image-preview-toolbar {
  transform: translateY(0);
}

.chat-image-preview-title,
.chat-image-preview-actions {
  display: flex;
  align-items: center;
}

.chat-image-preview-title {
  min-width: 0;
  gap: 10px;
}

.chat-image-preview-title > span:last-child {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.chat-image-preview-title strong,
.chat-image-preview-title small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-image-preview-title strong {
  font-size: 13px;
  font-weight: 900;
}

.chat-image-preview-title small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  font-weight: 800;
}

.chat-image-preview-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(183, 179, 201, 0.16);
  color: #ded9ea;
}

.chat-image-preview-actions {
  flex: 0 0 auto;
  gap: 7px;
}

.chat-image-preview-download,
.chat-image-preview-close {
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.chat-image-preview-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
}

.chat-image-preview-close {
  display: grid;
  width: 40px;
  padding: 0;
  place-items: center;
  font-size: 15px;
}

.chat-image-preview-download:hover,
.chat-image-preview-close:hover,
.chat-image-preview-download:focus-visible,
.chat-image-preview-close:focus-visible {
  border-color: rgba(222, 217, 234, 0.52);
  background: rgba(183, 179, 201, 0.22);
  transform: translateY(-1px);
}

.chat-image-preview-download:focus-visible,
.chat-image-preview-close:focus-visible {
  outline: 2px solid rgba(222, 217, 234, 0.9);
  outline-offset: 2px;
}

.chat-image-preview-stage {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  padding: 4px 26px 10px;
  contain: layout paint;
  overscroll-behavior: contain;
}

.chat-image-preview-stage > img {
  width: auto;
  height: auto;
  max-width: min(100%, calc(100vw - 52px));
  max-height: calc(100dvh - 116px);
  border-radius: 4px;
  object-fit: contain;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
  opacity: 0;
  cursor: zoom-in;
  transform: translate3d(var(--preview-pan-x), calc(var(--preview-pan-y) + 12px), 0) scale(var(--preview-image-scale));
  transform-origin: center;
  transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.chat-image-preview.is-ready .chat-image-preview-stage > img {
  --preview-image-scale: 1;
  opacity: 1;
  transform: translate3d(var(--preview-pan-x), var(--preview-pan-y), 0) scale(var(--preview-image-scale));
}

.chat-image-preview.is-ready.is-zoomed .chat-image-preview-stage > img {
  --preview-image-scale: var(--preview-zoom-scale);
  cursor: grab;
  touch-action: none;
}

.chat-image-preview.is-ready.is-zoomed.is-zoom-committed .chat-image-preview-stage > img {
  --preview-image-scale: 1;
  width: var(--preview-committed-width);
  height: var(--preview-committed-height);
  max-width: none;
  max-height: none;
  transform: translate3d(
    calc(var(--preview-pan-x) + var(--preview-commit-offset-x)),
    calc(var(--preview-pan-y) + var(--preview-commit-offset-y)),
    0
  ) scale(1);
}

.chat-image-preview.is-zoom-rebasing .chat-image-preview-stage > img {
  transition: none;
}

.chat-image-preview.is-dragging .chat-image-preview-stage > img {
  cursor: grabbing;
  transition: opacity 0.22s ease;
}

.chat-image-preview-loader,
.chat-image-preview-error {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

.chat-image-preview-loader {
  display: none;
  color: rgba(255, 255, 255, 0.78);
  font-size: 24px;
}

.chat-image-preview.is-loading .chat-image-preview-loader {
  display: block;
}

.chat-image-preview-error {
  width: min(300px, calc(100vw - 48px));
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(42, 45, 50, 0.78);
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
}

.chat-image-preview-error i {
  display: block;
  margin-bottom: 8px;
  color: #c9c4d8;
  font-size: 22px;
}

.chat-image-preview-error span {
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 640px) {
  .message-attachment.image::after {
    opacity: 0.82;
    transform: none;
  }

  .chat-image-preview {
    gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
  }

  .chat-image-preview-toolbar {
    min-height: 50px;
    padding: 5px 5px 5px 8px;
  }

  .chat-image-preview-icon {
    width: 34px;
    height: 34px;
  }

  .chat-image-preview-title {
    gap: 8px;
  }

  .chat-image-preview-title strong {
    max-width: calc(100vw - 190px);
  }

  .chat-image-preview-download {
    width: 40px;
    padding: 0;
  }

  .chat-image-preview-download span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .chat-image-preview-stage {
    padding: 4px 2px 8px;
  }

  .chat-image-preview-stage > img {
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 82px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-image-preview,
  .chat-image-preview-toolbar,
  .chat-image-preview-stage > img,
  .message-attachment.image img,
  .message-attachment.image::after {
    transition: none;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 12px 18px, rgba(142, 168, 184, 0.18) 0 1px, transparent 1.5px),
    linear-gradient(135deg, #ffffff 0%, #f7f8f8 45%, #fbfaf7 100%);
  background-size: 84px 84px, auto;
  color: var(--ink);
  font-family: "Nunito", Arial, sans-serif;
  letter-spacing: 0;
  overflow-x: hidden;
}

body.chat-open,
body.modal-open {
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(183, 179, 201, 0.18) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 0 48%, rgba(142, 168, 184, 0.16) 49% 51%, transparent 52%);
  background-size: 140px 140px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), transparent 72%);
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

img[data-lazy-src],
img[data-lazy-state="loading"] {
  color: transparent;
  background-color: #eef2f2;
  opacity: 0;
  filter: blur(4px) saturate(0.72);
  transition: opacity 0.24s ease, filter 0.28s ease;
}

img[data-lazy-state="loading"] {
  cursor: progress;
}

img.is-lazy-loaded {
  opacity: 1;
  filter: none;
  transition: opacity 0.24s ease, filter 0.28s ease;
}

@media (prefers-reduced-motion: reduce) {
  img[data-lazy-src],
  img[data-lazy-state="loading"],
  img.is-lazy-loaded {
    transition: none;
  }
}

button,
input,
textarea,
select {
  font: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  padding: 12px clamp(18px, 5vw, 64px);
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid var(--mist);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 800;
  color: var(--ink);
}

.brand-logo {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 6px;
  background: #020202;
  border-radius: var(--radius);
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

.nav-links a,
.nav-link-button {
  padding: 9px 10px;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
  cursor: pointer;
}

.nav-links a:hover,
.nav-link-button:hover {
  color: var(--ink);
}

.admin-chat-nav {
  border: 1px solid #d6e0e1;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-weight: 900;
  letter-spacing: 0.04em;
}

.nav-button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.button:hover,
.nav-button:hover {
  transform: translateY(-1px);
  border-color: #c9d2d4;
  box-shadow: 0 10px 28px rgba(55, 63, 68, 0.12);
}

.button.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}

.button.ghost {
  background: #f9faf9;
}

.button.danger {
  border-color: #ead5d5;
  background: #fff7f7;
  color: #8b3f3f;
}

.button.small {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 13px;
}

.button > i,
.nav-button > i,
.social-links a > i {
  margin-right: 8px;
}

[data-open-chat],
[data-open-admin-chat] {
  position: relative;
}

[data-open-chat].has-unread::after,
[data-open-admin-chat].has-unread::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #f04444;
  box-shadow: 0 0 0 3px rgba(240, 68, 68, 0.14), 0 8px 18px rgba(80, 24, 24, 0.22);
}

.icon-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.section-grid,
.section-block,
.social-strip,
.dashboard-shell,
.narrow-page,
.auth-shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: clamp(18px, 3vw, 32px);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: clamp(28px, 6vw, 72px);
  align-items: center;
  padding-block: clamp(44px, 7vw, 96px) 70px;
}

.hero-copy,
.logo-card {
  min-width: 0;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--cloud);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  letter-spacing: 0;
  line-height: 1.02;
  overflow-wrap: break-word;
}

h1 {
  max-width: 760px;
  font-size: clamp(48px, 8vw, 92px);
}

h2 {
  font-size: clamp(30px, 4vw, 52px);
}

h3 {
  font-size: 22px;
}

.hero-text,
.section-heading p,
.terms-page p,
.quiet {
  color: var(--muted);
  line-height: 1.7;
}

.hero-text {
  max-width: 650px;
  margin: 24px 0;
  font-size: 19px;
}

.hero-actions,
.social-links,
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.logo-card {
  display: grid;
  place-items: center;
  min-height: 430px;
  padding: clamp(18px, 4vw, 44px);
}

.logo-card img {
  width: min(470px, 88%);
  filter: drop-shadow(0 22px 30px rgba(41, 46, 50, 0.18));
  transform: translateY(-78px);
}

.section-block {
  padding-block: 48px 80px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.section-heading p {
  max-width: 420px;
  margin: 0;
}

.art-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.art-card,
.category-card,
.panel,
.auth-card,
.terms-page,
.social-strip {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 44px rgba(41, 46, 50, 0.08);
  backdrop-filter: blur(12px);
}

.art-card {
  overflow: hidden;
}

.category-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.category-card:hover {
  transform: translateY(-2px);
  border-color: #cbd5d7;
  box-shadow: 0 18px 48px rgba(41, 46, 50, 0.12);
}

.category-stack {
  position: relative;
  min-height: 260px;
  aspect-ratio: 4 / 3;
}

.stack-paper {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(223, 227, 227, 0.95);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(247, 248, 249, 0.78)),
    var(--wash);
  box-shadow: 0 18px 34px rgba(41, 46, 50, 0.16);
  transform: rotate(var(--paper-rotate, -3deg));
  transform-origin: 50% 80%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-card:hover .stack-paper {
  box-shadow: 0 24px 44px rgba(41, 46, 50, 0.18);
}

.stack-paper-0 {
  inset: 9% 13% 10%;
  z-index: 3;
}

.stack-paper-1 {
  inset: 13% 10% 8% 16%;
  z-index: 2;
  opacity: 0.96;
}

.stack-paper-2 {
  inset: 16% 16% 6% 9%;
  z-index: 1;
  opacity: 0.88;
}

.category-card:hover .stack-paper-0 {
  transform: rotate(calc(var(--paper-rotate, -3deg) + 1deg)) translateY(-3px);
}

.category-card:hover .stack-paper-1 {
  transform: rotate(calc(var(--paper-rotate, 4deg) - 1deg)) translate(3px, 2px);
}

.category-card:hover .stack-paper-2 {
  transform: rotate(calc(var(--paper-rotate, -6deg) + 2deg)) translate(-2px, 4px);
}

.stack-paper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-x, 50%) var(--media-y, 50%);
  transform: scale(var(--media-zoom, 1));
  transform-origin: var(--media-x, 50%) var(--media-y, 50%);
}

.stack-paper-empty {
  inset: 12%;
  display: grid;
  place-items: center;
}

.stack-paper-empty::after {
  content: "";
  width: 42%;
  aspect-ratio: 1;
  border: 1px solid rgba(36, 37, 41, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.46);
}

.category-card-body {
  display: grid;
  gap: 10px;
  padding: 2px 4px 4px;
}

.category-card-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.category-card-body .eyebrow {
  color: var(--sage);
}

.category-open-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.media-frame {
  --media-x: 50%;
  --media-y: 50%;
  --media-zoom: 1;
  position: relative;
  overflow: hidden;
  background-color: #eef2f2;
}

.media-frame > img {
  display: block;
  object-position: var(--media-x) var(--media-y);
  transform: scale(var(--media-zoom));
  transform-origin: var(--media-x) var(--media-y);
}

.media-frame.is-cropped {
  aspect-ratio: var(--media-ratio);
}

.media-frame.is-cropped > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-frame.is-original > img {
  transform: none;
}

.product-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 248, 249, 0.9));
  box-shadow: 0 16px 46px rgba(41, 46, 50, 0.09);
}

.product-card-media {
  position: relative;
  display: block;
  min-height: 230px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.product-card-media img,
.product-empty-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background:
    radial-gradient(circle at 20% 20%, rgba(183, 179, 201, 0.32), transparent 30%),
    linear-gradient(135deg, #f7f9f9, #fbfaf7);
}

.product-empty-media {
  display: grid;
  place-items: center;
  color: var(--cloud);
  font-size: 42px;
}

.product-price-badge {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(41, 46, 50, 0.14);
  backdrop-filter: blur(12px);
}

.product-price-badge.is-paid,
.product-detail-price.is-paid {
  color: #050607;
}

.product-price-badge.is-free,
.product-detail-price.is-free {
  color: #34463a;
  background: #f2f7f2;
  border-color: #d9e7dc;
}

.product-card-body {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.product-card-body h2 {
  font-size: 28px;
}

.product-card-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.product-card-body .product-card-description {
  position: relative;
  display: -webkit-box;
  max-height: 6.6em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.product-card-description.is-overflowing {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, rgba(0, 0, 0, 0.82) 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 66%, rgba(0, 0, 0, 0.82) 78%, transparent 100%);
}

.empty-products {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 28px;
}

.product-detail-page {
  padding-bottom: 80px;
}

.product-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: clamp(22px, 4vw, 46px);
  align-items: start;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 42px) clamp(18px, 3vw, 32px) 38px;
}

.product-detail-media {
  align-self: start;
  width: 100%;
  max-height: 620px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(41, 46, 50, 0.13);
}

.product-detail-media > img {
  width: 100%;
  max-height: 620px;
  object-fit: contain;
}

.product-detail-media.is-cropped > img {
  max-height: none;
  object-fit: cover;
}

.product-detail-copy {
  display: grid;
  gap: 18px;
}

.product-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.product-detail-price {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 12px 30px rgba(41, 46, 50, 0.1);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1;
}

.product-detail-kind {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.product-detail-copy h1 {
  font-size: clamp(42px, 6vw, 78px);
}

.product-detail-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.product-detail-description-shell {
  display: grid;
  min-width: 0;
  justify-items: start;
  gap: 7px;
}

.product-detail-description {
  width: 100%;
  overflow: hidden;
  transition: max-height 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-detail-description-shell.is-collapsible .product-detail-description {
  max-height: var(--product-description-collapsed-height, 14em);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 73%, rgba(0, 0, 0, 0.84) 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 73%, rgba(0, 0, 0, 0.84) 84%, transparent 100%);
}

.product-detail-description-shell.is-collapsible.is-expanded .product-detail-description {
  max-height: var(--product-description-expanded-height);
  -webkit-mask-image: none;
  mask-image: none;
}

.product-description-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  margin: 1px 0 0;
  padding: 5px 2px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.product-description-toggle:hover,
.product-description-toggle:focus-visible {
  color: var(--sage);
}

.product-description-toggle:focus-visible {
  outline: 2px solid rgba(117, 147, 151, 0.34);
  outline-offset: 3px;
  border-radius: 4px;
}

.product-description-toggle i {
  font-size: 11px;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-detail-description-shell.is-expanded .product-description-toggle i {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .product-detail-description,
  .product-description-toggle i {
    transition: none;
  }
}

.product-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.paypal-donate-link {
  border-color: #d4e1e9;
  background:
    linear-gradient(135deg, #ffffff, #f2f8fb);
  color: #213f64;
}

.paypal-donate-link:hover {
  border-color: #b9cfdc;
}

.paypal-donate-link i {
  color: #0070ba;
}

.product-preview-section {
  padding-top: 16px;
}

.product-preview-masonry {
  column-count: 3;
  column-gap: 18px;
}

.product-preview-masonry img {
  display: inline-block;
  width: 100%;
  height: auto;
  margin: 0 0 18px;
  break-inside: avoid;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--wash);
  box-shadow: 0 14px 34px rgba(41, 46, 50, 0.1);
}

.product-manager {
  margin-bottom: 18px;
}

.site-settings-panel {
  margin-bottom: 18px;
}

.settings-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.product-manage-list {
  display: grid;
  gap: 12px;
}

.product-manage-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fff, #fbfcfc);
  box-shadow: 0 10px 26px rgba(41, 46, 50, 0.06);
}

.product-manage-row > img,
.product-manage-placeholder {
  width: 112px;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--wash);
}

.product-manage-placeholder {
  display: grid;
  place-items: center;
  color: var(--cloud);
  font-size: 24px;
}

.form-hint {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.is-muted {
  opacity: 0.55;
}

.current-product-preview,
.current-product-asset {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f7f8f8;
}

.current-product-preview img {
  width: 100%;
  max-height: 250px;
  border-radius: 7px;
  object-fit: cover;
}

.current-product-preview span,
.current-product-asset span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.current-product-asset {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.current-product-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: 8px;
}

.current-product-gallery img {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--wash);
}

.inline-check {
  display: flex !important;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 900;
}

.inline-check input {
  width: auto;
}

.category-page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.category-page-head p {
  max-width: 620px;
  color: var(--muted);
  line-height: 1.7;
}

.category-masonry {
  column-count: 4;
  column-gap: 18px;
}

.category-masonry .art-card {
  display: inline-block;
  width: 100%;
  margin: 0 0 18px;
  overflow: hidden;
  break-inside: avoid;
  vertical-align: top;
}

.category-masonry .art-card-media {
  width: 100%;
  background: #f5f6f6;
}

.category-masonry .art-card-media > img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  background: #f5f6f6;
}

.category-masonry .art-card-media.is-cropped > img {
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.category-masonry .art-card-body {
  padding: 14px;
}

.category-masonry .art-card-body p {
  min-height: 0;
  margin-bottom: 12px;
}

.category-empty-wrap {
  display: grid;
}

.empty-category-panel {
  grid-column: 1 / -1;
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 28px;
}

.art-card img,
.empty-art {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background:
    linear-gradient(135deg, rgba(142, 168, 184, 0.22), rgba(154, 170, 156, 0.2)),
    #f5f6f6;
}

.empty-art::after {
  content: "";
  display: block;
  width: 45%;
  height: 45%;
  margin: 28% auto 0;
  border: 1px solid rgba(36, 37, 41, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.45);
}

.art-card-body {
  padding: 18px;
}

.art-card-body p {
  min-height: 48px;
  color: var(--muted);
  line-height: 1.6;
}

.gallery-manager {
  margin-bottom: 18px;
}

.category-manager {
  margin-bottom: 18px;
}

.category-manage-list {
  display: grid;
  gap: 12px;
}

.category-manage-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, #fff, #fbfcfc);
  box-shadow: 0 10px 26px rgba(41, 46, 50, 0.06);
}

.category-manage-row-warning {
  border-color: #e9ddd1;
  background:
    linear-gradient(135deg, #fffdf8, #fbfaf7);
}

.category-manage-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid #dce5e6;
  border-radius: var(--radius);
  background: #f7f9f9;
  color: var(--cloud);
  font-size: 21px;
}

.gallery-manage-list {
  display: grid;
  gap: 12px;
}

.gallery-manage-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, #fff, #fbfcfc);
  box-shadow: 0 10px 26px rgba(41, 46, 50, 0.06);
}

.gallery-manage-row > img {
  width: 86px;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--wash);
}

.gallery-manage-meta {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.gallery-manage-meta strong {
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-manage-meta > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.gallery-manage-meta p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid #dce5e6;
  border-radius: var(--radius);
  background: #f8faf9;
  color: var(--ink) !important;
  font-size: 12px !important;
}

.gallery-row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.gallery-row-actions form {
  margin: 0;
}

.gallery-row-actions .notice {
  display: none;
}

.category-delete-form,
.category-delete-control {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.category-delete-control.is-blocked {
  border-radius: var(--radius);
  cursor: not-allowed;
  outline: none;
}

.category-delete-control.is-blocked > .button {
  pointer-events: none;
}

.category-delete-control.is-blocked:focus-visible {
  box-shadow: 0 0 0 4px rgba(188, 112, 124, 0.14);
}

.category-delete-tooltip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 30;
  display: grid;
  width: min(300px, calc(100vw - 40px));
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid #ead6da;
  border-radius: 8px;
  background: rgba(255, 252, 252, 0.98);
  box-shadow: 0 16px 38px rgba(71, 52, 58, 0.17);
  color: #774d55;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  visibility: hidden;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.category-delete-tooltip::after {
  position: absolute;
  right: 26px;
  bottom: -6px;
  width: 10px;
  height: 10px;
  border-right: 1px solid #ead6da;
  border-bottom: 1px solid #ead6da;
  background: #fffafa;
  content: "";
  transform: rotate(45deg);
}

.category-delete-tooltip > i {
  margin-top: 2px;
  color: #b06170;
}

.category-delete-tooltip > span {
  display: grid;
  gap: 3px;
}

.category-delete-tooltip strong {
  color: #75454f;
  font-size: 12px;
  font-weight: 900;
}

.category-delete-tooltip small {
  color: #806b70;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.category-delete-control.is-blocked:hover .category-delete-tooltip,
.category-delete-control.is-blocked:focus .category-delete-tooltip,
.category-delete-control.is-blocked:focus-within .category-delete-tooltip {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

button:disabled,
.button:disabled {
  cursor: not-allowed;
  opacity: 0.54;
  transform: none;
  box-shadow: none;
}

.current-art-preview {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f7f8f8;
}

.current-art-preview img {
  width: 100%;
  max-height: 260px;
  border-radius: 7px;
  object-fit: cover;
}

.current-art-preview span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.tag-row span,
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--wash);
  color: #4e575c;
  font-size: 12px;
  font-weight: 900;
}

.social-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 80px;
  padding: 24px;
  background: #fbfcfc;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  text-decoration: none;
  font-weight: 900;
}

.narrow-page {
  max-width: 880px;
  margin-top: 52px;
  margin-bottom: 80px;
  padding: clamp(22px, 4vw, 44px);
}

.terms-page h1 {
  margin-bottom: 28px;
  font-size: clamp(44px, 7vw, 76px);
}

.terms-page h2 {
  margin-top: 30px;
  font-size: 30px;
}

.terms-page h3 {
  font-family: "Nunito", Arial, sans-serif;
  font-size: 17px;
}

.terms-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.terms-columns > div {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--wash);
}

.auth-shell {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 150px);
  padding: 48px 0;
}

.auth-card {
  width: min(450px, 100%);
  padding: 30px;
}

.auth-card img {
  width: 106px;
  margin-bottom: 20px;
  padding: 10px;
  background: #020202;
  border-radius: var(--radius);
}

.auth-card h1 {
  font-size: 40px;
  margin-bottom: 22px;
}

.auth-card form,
.stacked-form {
  display: grid;
  gap: 14px;
}

label {
  display: grid;
  gap: 7px;
  color: #3e4449;
  font-size: 14px;
  font-weight: 900;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfc;
  color: var(--ink);
  padding: 12px 12px;
  outline: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--cloud);
  box-shadow: 0 0 0 3px rgba(142, 168, 184, 0.18);
}

textarea {
  resize: vertical;
}

[hidden] {
  display: none !important;
}

.file-picker {
  display: grid;
  gap: 8px;
}

.file-picker-control {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 247, 247, 0.96));
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.file-picker-control:hover,
.file-picker:focus-within .file-picker-control,
.file-picker.has-files .file-picker-control {
  border-color: #c5d5d7;
  box-shadow: 0 10px 26px rgba(41, 46, 50, 0.08);
}

.file-picker-control input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-picker-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 7px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.file-picker-name {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}

.upload-preview-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 8px 18px rgba(41, 46, 50, 0.06);
}

.upload-preview-card img,
.upload-file-icon {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 7px;
}

.upload-preview-card img {
  object-fit: cover;
  background: var(--mist);
}

.upload-file-icon {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #edf1f1, #faf9f5);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.upload-preview-card span:last-child {
  overflow: hidden;
  color: #4d555a;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-picker-compact {
  align-self: stretch;
  min-width: 150px;
}

.file-picker-compact > span:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.file-picker-compact .file-picker-control {
  min-height: 100%;
}

.file-picker-compact .file-picker-button {
  min-height: 40px;
}

.file-picker-compact .file-preview {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.notice {
  margin: 14px 0 0;
  padding: 12px;
  border-radius: var(--radius);
  background: #f3f6f4;
  color: #4c5a51;
  line-height: 1.5;
}

.notice:empty {
  display: none;
}

.notice.error {
  background: #f8eeee;
  color: #8b3f3f;
}

.auth-switch {
  color: var(--muted);
}

.dashboard-shell {
  max-width: 1340px;
  padding-block: 38px 80px;
}

.dashboard-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.dashboard-top h1 {
  font-size: clamp(42px, 6vw, 74px);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.metric-grid article {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 246, 0.9)),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(183, 179, 201, 0.1) 28px 29px);
  box-shadow: 0 12px 34px rgba(41, 46, 50, 0.07);
}

.metric-grid article::after,
.panel::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 18px;
  width: 18px;
  height: 18px;
  background:
    linear-gradient(90deg, transparent 43%, rgba(142, 168, 184, 0.45) 44% 56%, transparent 57%),
    linear-gradient(0deg, transparent 43%, rgba(142, 168, 184, 0.45) 44% 56%, transparent 57%);
  opacity: 0.45;
}

.metric-grid article::after,
.action-launch-card::after,
.users-overview::after {
  display: none;
}

.metric-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  color: var(--cloud);
  font-size: 22px;
  opacity: 0.62;
}

.metric-grid span {
  display: block;
  margin-bottom: 6px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 42px;
  font-weight: 700;
}

.metric-grid strong {
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
}

.studio-actions,
.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.studio-actions .wide {
  grid-column: 1 / -1;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.dashboard-main {
  display: grid;
  gap: 18px;
}

.panel {
  position: relative;
  overflow: hidden;
  padding: 22px;
}

.panel h2 {
  margin-bottom: 16px;
  font-size: 30px;
}

.panel-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.action-panel {
  min-height: 100%;
}

.action-launch-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.action-launch-card {
  display: grid;
  gap: 12px;
  min-height: 210px;
  align-content: start;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 247, 0.92)),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(183, 179, 201, 0.1) 18px 19px);
}

.action-launch-card h2 {
  margin-bottom: 0;
}

.action-launch-card p:not(.eyebrow) {
  max-width: 42rem;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.action-launch-card .button {
  justify-self: start;
  margin-top: auto;
}

.action-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(213, 226, 227, 0.95);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
  color: var(--cloud);
  font-size: 18px;
  box-shadow: 0 12px 28px rgba(41, 46, 50, 0.06);
}

.users-overview {
  margin-bottom: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 249, 0.94)),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(142, 168, 184, 0.08) 34px 35px);
}

.users-overview .panel-title {
  align-items: center;
}

.user-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.user-stat-strip article {
  display: grid;
  gap: 5px;
  min-height: 104px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.78);
}

.user-stat-strip i {
  color: var(--cloud);
  font-size: 18px;
}

.user-stat-strip span {
  font-family: "Fraunces", Georgia, serif;
  font-size: 32px;
  font-weight: 700;
}

.user-stat-strip strong {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.record-list,
.order-list {
  display: grid;
  gap: 12px;
}

.record-row,
.order-summary,
.order-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfc;
}

.record-row,
.order-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
}

.order-summary {
  align-items: stretch;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 249, 0.95));
  box-shadow: 0 10px 24px rgba(41, 46, 50, 0.05);
}

.order-summary-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.order-summary-main h3 {
  overflow: hidden;
  font-size: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-summary-main .status-pill {
  justify-self: start;
}

.order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.order-meta span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.row-actions form {
  margin: 0;
}

.record-row span,
.order-summary-main p,
.order-head p {
  display: block;
  color: var(--muted);
  font-size: 14px;
}

.order-detail-shell {
  max-width: 1280px;
}

.order-detail-grid {
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.order-side {
  display: grid;
  gap: 14px;
}

.detail-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.detail-list div {
  display: grid;
  gap: 3px;
  padding: 10px 0;
  border-bottom: 1px solid var(--mist);
}

.detail-list dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.detail-list dd {
  margin: 0;
  color: var(--ink);
  font-weight: 900;
}

.danger-zone {
  display: grid;
  gap: 10px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid #ead5d5;
}

.order-detail-panel {
  display: grid;
  gap: 16px;
}

.order-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 250, 250, 0.94));
}

.order-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.inline-edit {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.4fr auto;
  gap: 8px;
}

.delivery-gallery,
.delivery-block,
.revision-panel,
.delivery-form,
.revision-form {
  display: grid;
  gap: 12px;
}

.delivery-block,
.revision-panel,
.delivery-form,
.revision-form {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
}

summary {
  cursor: pointer;
  font-weight: 900;
}

.file-grid,
.check-file-grid,
.message-attachments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.file-tile,
.message-attachment {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
}

.file-tile img,
.message-attachment img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  background: var(--mist);
}

.file-tile span,
.message-attachment span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-icon {
  display: grid;
  place-items: center;
  min-height: 70px;
  border-radius: 6px;
  background: linear-gradient(135deg, #edf1f1, #faf9f5);
  color: var(--muted);
}

.attachment-file-symbol {
  position: relative;
  min-height: 82px;
  background: #f3f6f7;
  color: #849298;
}

.attachment-file-symbol > i {
  font-size: 38px;
  filter: drop-shadow(0 6px 6px rgba(43, 51, 55, 0.09));
}

.attachment-file-symbol > small {
  position: absolute;
  right: calc(50% - 32px);
  bottom: 12px;
  max-width: 46px;
  overflow: hidden;
  padding: 2px 5px;
  border: 2px solid #f3f6f7;
  border-radius: 5px;
  background: #667b82;
  color: #fff;
  font-size: 7px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.attachment-file-symbol.is-photoshop { color: #4d86a3; }
.attachment-file-symbol.is-artwork { color: #8a7d9c; }
.attachment-file-symbol.is-audio { color: #688d82; }
.attachment-file-symbol.is-video { color: #747e99; }
.attachment-file-symbol.is-pdf { color: #a85f69; }
.attachment-file-symbol.is-archive { color: #927d68; }
.attachment-file-symbol.is-document { color: #62819d; }
.attachment-file-symbol.is-spreadsheet { color: #63866f; }
.attachment-file-symbol.is-presentation { color: #a27765; }
.attachment-file-symbol.is-code { color: #6e7088; }
.attachment-file-symbol.is-font { color: #766c80; }

.message-attachment.is-file-kind {
  grid-template-rows: minmax(82px, auto) auto auto;
}

.message-attachment-type {
  color: #859095;
  font-size: 8px;
  font-weight: 800;
}

.message.mine .message-attachment-type {
  color: rgba(255, 255, 255, 0.7);
}

.check-file {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.check-file .file-tile {
  padding: 0;
  border: 0;
}

.attach-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
}

.attach-button input {
  display: none;
}

.action-modal {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(26, 29, 32, 0.34);
  backdrop-filter: blur(8px);
}

.action-modal.is-open {
  display: flex;
}

.action-modal-card {
  width: min(680px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border: 1px solid rgba(213, 226, 227, 0.92);
  border-radius: 10px;
  background: white;
  box-shadow: 0 28px 90px rgba(36, 37, 41, 0.24);
}

.action-modal-card-wide {
  width: min(980px, calc(100vw - 48px));
}

.action-modal-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 249, 0.96)),
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(183, 179, 201, 0.1) 30px 31px);
}

.action-modal-header h2 {
  margin: 0;
  font-size: 30px;
}

.action-modal-body {
  max-height: calc(100vh - 170px);
  overflow: auto;
  padding: 20px;
  background: #fff;
}

.users-modal-body {
  background: #f7f8f8;
}

.user-list {
  display: grid;
  gap: 12px;
}

.user-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, #fff, #fbfcfc);
  box-shadow: 0 10px 26px rgba(41, 46, 50, 0.06);
}

.user-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(213, 226, 227, 0.9);
  border-radius: var(--radius);
  background: var(--avatar, #a7b4ad);
  color: white;
  font-size: 18px;
  font-weight: 900;
}

.user-meta {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.user-meta strong {
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-meta > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-mini-stats,
.user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.user-mini-stats span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f7f9f9;
  color: #64737a;
  font-size: 12px;
  font-weight: 900;
}

.user-actions {
  justify-content: flex-end;
}

.user-actions form {
  margin: 0;
}

.user-actions .notice {
  display: none;
}

.chat-drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(28, 31, 34, 0.36);
  backdrop-filter: blur(10px);
}

.chat-drawer.is-open {
  display: flex;
}

.database-lock-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(28, 31, 34, 0.38);
  backdrop-filter: blur(10px);
}

.database-lock-modal.is-open {
  display: flex;
}

.database-lock-card {
  width: min(440px, calc(100vw - 36px));
  overflow: hidden;
  border: 1px solid rgba(211, 221, 222, 0.96);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(28, 31, 34, 0.25);
  animation: chat-panel-in 0.22s ease-out;
}

.database-lock-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 249, 0.96)),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(160, 174, 178, 0.1) 28px 29px);
}

.database-lock-header h2 {
  margin: 0;
  font-size: 28px;
}

.database-lock-form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.database-lock-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.database-lock-form input {
  letter-spacing: 0;
  text-transform: none;
}

.database-lock-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.chat-drawer.is-open .chat-panel {
  animation: chat-panel-in 0.22s ease-out;
}

@keyframes chat-panel-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-panel {
  display: grid;
  grid-template-areas:
    "header"
    "reply"
    "messages"
    "form";
  grid-template-rows: auto auto minmax(260px, 1fr) auto;
  width: min(820px, calc(100vw - 48px));
  height: min(780px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid rgba(211, 221, 222, 0.96);
  border-radius: 16px;
  background: #fbfcfc;
  box-shadow: 0 30px 90px rgba(36, 37, 41, 0.24), 0 4px 18px rgba(60, 72, 76, 0.08);
}

.chat-drawer[data-chat-mode="admin"] .chat-panel {
  border-color: rgba(190, 202, 206, 0.98);
  box-shadow: 0 34px 110px rgba(20, 22, 25, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.72) inset;
}

.chat-header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 249, 0.96)),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(160, 174, 178, 0.1) 28px 29px);
}

.chat-header h2 {
  overflow: hidden;
  max-width: 420px;
  font-size: 28px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-update-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 8px;
  padding: 5px 9px;
  border: 1px solid rgba(203, 214, 216, 0.9);
  border-radius: 999px;
  color: #667579;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 6px 16px rgba(78, 89, 92, 0.08);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.database-update-stamp span {
  color: #23272b;
  text-transform: none;
}

.chat-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.messages {
  grid-area: messages;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(247, 249, 249, 0.98), rgba(242, 246, 246, 0.98)),
    repeating-linear-gradient(135deg, rgba(174, 188, 190, 0.1) 0 1px, transparent 1px 18px);
  scroll-behavior: auto;
}

.message {
  max-width: 86%;
  padding: 11px 13px;
  border: 1px solid rgba(214, 224, 225, 0.94);
  border-radius: 14px;
  background: white;
  box-shadow: 0 10px 26px rgba(52, 63, 68, 0.08);
}

.message.mine {
  align-self: flex-end;
  background: #25282d;
  border-color: #25282d;
  color: #fff;
  box-shadow: 0 14px 30px rgba(37, 40, 45, 0.18);
}

.message strong {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.message.mine strong {
  color: #f8fbfb;
}

.message p {
  margin: 0;
  line-height: 1.45;
  white-space: pre-wrap;
}

.message-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
}

.message time,
.message-receipt {
  color: var(--muted);
  font-size: 11px;
}

.message-receipt {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid rgba(183, 196, 199, 0.76);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #5e6d73;
  font-weight: 900;
}

.message-receipt.status-delivered {
  border-color: rgba(131, 160, 157, 0.72);
  color: #506c69;
}

.message-receipt.status-seen {
  border-color: rgba(102, 135, 132, 0.78);
  background: #eef5f4;
  color: #314f4c;
}

.message.mine time {
  color: rgba(255, 255, 255, 0.66);
}

.message.mine .message-receipt {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.84);
}

.message.mine .message-receipt.status-seen {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.message-actions button,
.reply-preview button {
  border: 0;
  background: transparent;
  color: #647783;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.message.mine .message-actions button {
  color: rgba(255, 255, 255, 0.78);
}

.reply-chip,
.reply-preview {
  border-left: 3px solid var(--cloud);
  background: #f6f9f9;
  color: var(--muted);
  padding: 7px 9px;
  border-radius: 6px;
  font-size: 12px;
}

.reply-preview {
  grid-area: reply;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  border-radius: 0;
}

.reply-preview span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.reply-preview small {
  overflow: hidden;
  max-width: 360px;
  color: #7c8c96;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-form {
  grid-area: form;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(174px, auto) auto;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border-top: 1px solid var(--line);
  background:
    linear-gradient(180deg, #fff, #fbfcfc);
}

.chat-form textarea {
  min-height: 46px;
  max-height: 120px;
  padding: 12px 13px;
  line-height: 1.35;
}

.chat-form .button {
  align-self: center;
  min-height: 46px;
  padding-inline: 18px;
}

.chat-form .file-picker-compact {
  align-self: center;
  width: min(210px, 28vw);
  min-width: 154px;
}

.chat-form .file-picker-compact .file-picker-control {
  min-height: 46px;
}

.chat-form .file-picker-compact .file-picker-button {
  min-height: 34px;
}

.chat-form .file-picker-compact .file-picker-name {
  max-width: 92px;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px clamp(18px, 5vw, 64px);
  border-top: 1px solid var(--mist);
  color: var(--muted);
}

.site-footer div {
  display: grid;
  gap: 4px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.footer-links a {
  text-decoration: none;
  font-weight: 900;
}

@media (min-width: 901px) {
  body:has(.message-hub) .footer-links {
    margin-right: 200px;
  }
}

.reveal {
  opacity: 1;
  transform: translateY(0);
}

.js-ready .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .hero,
  .dashboard-grid,
  .metric-grid,
  .studio-actions,
  .user-stat-strip,
  .workspace-grid,
  .order-detail-grid,
  .terms-columns,
  .art-grid,
  .category-grid,
  .product-grid,
  .product-detail-hero {
    grid-template-columns: 1fr;
  }

  .section-heading,
  .category-page-head,
  .social-strip,
  .dashboard-top,
  .site-footer {
    align-items: start;
    flex-direction: column;
  }

  .inline-edit {
    grid-template-columns: 1fr;
  }

  .logo-card {
    transform: none;
  }

  .logo-card img {
    transform: none;
  }

  .category-masonry {
    column-count: 2;
  }

  .product-preview-masonry {
    column-count: 2;
  }

  .settings-form {
    grid-template-columns: 1fr;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .site-header {
    align-items: start;
    flex-direction: column;
    padding: 12px 10px;
  }

  .nav-links {
    justify-content: flex-start;
    gap: 5px;
    width: 100%;
    font-size: 14px;
  }

  .nav-links a {
    padding: 8px 6px;
  }

  .nav-links .nav-button {
    padding: 8px 10px;
  }

  h1 {
    font-size: 38px;
    line-height: 1.08;
  }

  .hero-text {
    font-size: 17px;
  }

  .hero-copy,
  .section-heading {
    max-width: calc(100vw - 36px);
  }

  .hero-text,
  .section-heading p {
    max-width: min(100%, 320px);
  }

  .logo-card {
    min-height: 300px;
  }

  .category-masonry {
    column-count: 1;
  }

  .product-preview-masonry {
    column-count: 1;
  }

  .chat-form {
    grid-template-columns: 1fr;
  }

  .chat-drawer {
    padding: 8px;
  }

  .action-modal {
    padding: 8px;
  }

  .chat-panel {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    border-radius: 13px;
  }

  .database-lock-card {
    width: calc(100vw - 18px);
    border-radius: 13px;
  }

  .database-lock-header h2 {
    font-size: 24px;
  }

  .action-modal-card {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .action-modal-card-wide {
    width: calc(100vw - 16px);
  }

  .chat-header {
    align-items: start;
    flex-wrap: wrap;
    padding: 14px;
  }

  .action-modal-header {
    padding: 14px;
  }

  .chat-header h2 {
    max-width: calc(100vw - 120px);
    font-size: 24px;
  }

  .action-modal-header h2 {
    font-size: 24px;
  }

  .action-modal-body {
    max-height: calc(100vh - 132px);
    padding: 14px;
  }

  .chat-form .file-picker-compact {
    width: 100%;
    min-width: 0;
  }

  .chat-form .file-picker-compact .file-picker-name {
    max-width: none;
  }

  .messages {
    gap: 10px;
    padding: 14px;
  }

  .message {
    max-width: 94%;
  }

  .message-actions {
    gap: 8px;
  }

  .database-lock-actions {
    flex-direction: column-reverse;
  }

  .database-lock-actions .button {
    width: 100%;
  }

  .file-grid,
  .check-file-grid,
  .message-attachments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .record-row,
  .order-summary,
  .order-head,
  .user-row,
  .category-manage-row,
  .product-manage-row,
  .gallery-manage-row {
    align-items: stretch;
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .product-manage-row > img,
  .product-manage-placeholder {
    width: 100%;
  }

  .gallery-manage-row > img {
    width: 100%;
    aspect-ratio: 16 / 10;
  }

  .gallery-row-actions {
    justify-content: flex-start;
  }

  .category-delete-tooltip {
    right: auto;
    left: 0;
  }

  .category-delete-tooltip::after {
    right: auto;
    left: 26px;
  }

  .user-avatar {
    width: 44px;
    height: 44px;
  }

  .user-actions {
    justify-content: flex-start;
  }

  .order-summary-main h3 {
    white-space: normal;
  }
}

/* Account navigation and profile */
.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.account-menu {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
}

.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 52px;
  min-height: 46px;
  padding: 4px 7px 4px 4px;
  border: 1px solid #d9e1e2;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #738086;
  box-shadow: 0 7px 20px rgba(48, 56, 60, 0.07);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.account-trigger:hover,
.account-trigger[aria-expanded="true"] {
  transform: translateY(-1px);
  border-color: #bac9cd;
  box-shadow: 0 11px 26px rgba(48, 56, 60, 0.12);
}

.account-trigger > i {
  margin-right: 2px;
  font-size: 9px;
  transition: transform 0.18s ease;
}

.account-trigger[aria-expanded="true"] > i {
  transform: rotate(180deg);
}

.header-profile-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: var(--avatar, #a7b4ad);
  color: #fff;
  box-shadow: 0 4px 12px rgba(48, 56, 60, 0.14);
  font-family: "Fraunces", Georgia, serif;
  font-size: 14px;
  font-weight: 700;
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 270px;
  max-height: min(680px, calc(100svh - 84px));
  overflow: hidden;
  border: 1px solid #d8e0e1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 70px rgba(31, 37, 41, 0.2);
  animation: account-menu-in 0.16s ease-out;
}

.account-dropdown[hidden] {
  display: none;
}

@keyframes account-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.account-dropdown-user {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 15px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #fff, #f4f7f7);
}

.account-dropdown-user > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.account-dropdown-user strong,
.account-dropdown-user small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-dropdown-user strong {
  color: #343a3e;
  font-size: 14px;
}

.account-dropdown-user small {
  color: #829095;
  font-size: 11px;
  font-weight: 800;
}

.account-dropdown-links {
  display: grid;
  gap: 3px;
  min-height: 0;
  overflow-y: auto;
  padding: 7px;
  overscroll-behavior: contain;
  scrollbar-color: #c7d1d3 transparent;
  scrollbar-width: thin;
}

.account-dropdown-links a,
.account-dropdown-links button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 8px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #56646a;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.account-dropdown-links a:hover,
.account-dropdown-links button:hover,
.account-dropdown-links a.is-active,
.account-dropdown-links a[aria-current="page"] {
  background: #f1f5f5;
  color: #252a2e;
}

.account-dropdown-links a:focus-visible,
.account-dropdown-links button:focus-visible {
  outline: 2px solid #8ca5ab;
  outline-offset: -2px;
}

.account-dropdown-links a > i:first-child,
.account-dropdown-links button > i:first-child {
  color: #849ba4;
  text-align: center;
}

.account-dropdown-links a > i:last-child,
.account-dropdown-links button > i:last-child {
  color: #b0b9bc;
  font-size: 9px;
}

.account-dropdown-divider {
  height: 1px;
  margin: 4px 7px;
  background: #e3e9ea;
}

.account-dropdown-links .account-dropdown-database {
  background: #30383c;
  color: #f9fbfb;
  letter-spacing: 0.04em;
}

.account-dropdown-links .account-dropdown-database > i:first-child,
.account-dropdown-links .account-dropdown-database > i:last-child {
  color: #c4d4d7;
}

.account-dropdown-links .account-dropdown-database:hover,
.account-dropdown-links .account-dropdown-database[aria-expanded="true"] {
  background: #20272a;
  color: #fff;
  box-shadow: 0 5px 14px rgba(32, 39, 42, 0.18);
}

.header-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid #d8e0e1;
  border-radius: 8px;
  background: #fff;
  color: #3c464b;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 7px 20px rgba(48, 56, 60, 0.06);
}

.header-login:hover {
  border-color: #bdcdd1;
  box-shadow: 0 10px 26px rgba(48, 56, 60, 0.1);
}

.account-shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px clamp(18px, 3vw, 32px) 84px;
}

.account-page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.account-page-head h1 {
  margin-top: 3px;
  font-size: 56px;
  line-height: 1;
}

.account-page-head p:not(.eyebrow) {
  max-width: 620px;
  margin: 11px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.account-layout {
  display: grid;
  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}

.account-profile-card {
  position: sticky;
  top: 96px;
  display: grid;
  justify-items: center;
  gap: 13px;
  padding: 27px 22px 22px;
  border-top: 3px solid #cadbe0;
  text-align: center;
}

.account-page-avatar {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--avatar, #a7b4ad);
  color: #fff;
  box-shadow: 0 0 0 1px #d9e1e2, 0 15px 34px rgba(46, 55, 59, 0.16);
  font-family: "Fraunces", Georgia, serif;
  font-size: 31px;
  font-weight: 700;
}

.account-profile-card h2 {
  margin: 0;
  font-size: 27px;
}

.account-profile-card p {
  margin: 2px 0 0;
  color: #7e8a8f;
  font-size: 13px;
  font-weight: 800;
}

.account-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 5px 9px;
  border: 1px solid #d8e1e2;
  border-radius: 7px;
  background: var(--blue-soft);
  color: #617983;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.account-summary-list {
  display: grid;
  width: 100%;
  gap: 0;
  margin: 7px 0 0;
  text-align: left;
}

.account-summary-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--mist);
}

.account-summary-list dt {
  color: #778489;
  font-size: 11px;
  font-weight: 900;
}

.account-summary-list dd {
  margin: 0;
  color: #56646a;
  font-size: 11px;
  font-weight: 900;
}

.account-summary-list dd.is-on {
  color: #4e776c;
}

.account-settings {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.account-setting-card {
  display: grid;
  gap: 18px;
  padding: 23px;
  overflow: visible;
}

.account-setting-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mist);
}

.account-setting-head h2 {
  margin: 2px 0 0;
  font-size: 25px;
}

.account-setting-icon {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #dae3e4;
  border-radius: 8px;
  font-size: 16px;
}

.account-setting-icon.identity { background: var(--blue-soft); color: #637c87; }
.account-setting-icon.email { background: var(--lilac-soft); color: #716c8a; }
.account-setting-icon.password { background: var(--sage-soft); color: #607a68; }
.account-setting-icon.sound { background: #fff3f5; color: #9a6672; }

.notification-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  margin-left: auto;
  padding: 5px 8px;
  border: 1px solid #e1e5e6;
  border-radius: 7px;
  background: #f5f7f7;
  color: #899398;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.notification-state i {
  font-size: 7px;
}

.notification-state.is-on {
  border-color: #ccdfd5;
  background: #edf6f1;
  color: #507668;
}

.account-form {
  display: grid;
  gap: 14px;
}

.account-form > label,
.account-password-grid label {
  display: grid;
  gap: 7px;
  color: #58666c;
  font-size: 12px;
  font-weight: 900;
}

.account-form input {
  min-height: 47px;
  padding: 11px 12px;
  border-radius: 7px;
}

.message-sound-form {
  gap: 17px;
}

.message-sound-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 1px 0 17px;
  border-bottom: 1px solid var(--mist);
}

.message-sound-toggle-row > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.message-sound-toggle-row strong,
.message-sound-range strong {
  color: #4d5a60;
  font-size: 12px;
  font-weight: 900;
}

.message-sound-toggle-row small {
  color: #849095;
  font-size: 11px;
  font-weight: 700;
}

.message-sound-switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  cursor: pointer;
}

.message-sound-switch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
}

.message-sound-switch > span {
  position: relative;
  width: 46px;
  height: 26px;
  border: 1px solid #cfd8da;
  border-radius: 999px;
  background: #e9edef;
  box-shadow: inset 0 1px 3px rgba(48, 56, 60, 0.08);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.message-sound-switch > span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(48, 56, 60, 0.22);
  content: "";
  transition: transform 160ms ease;
}

.message-sound-switch input[type="checkbox"]:checked + span {
  border-color: #829ca4;
  background: #829ca4;
}

.message-sound-switch input[type="checkbox"]:checked + span::after {
  transform: translateX(20px);
}

.message-sound-switch input[type="checkbox"]:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(130, 156, 164, 0.22);
}

.message-sound-range {
  gap: 10px !important;
}

.message-sound-range > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.message-sound-range output {
  min-width: 44px;
  color: #66777e;
  font-size: 11px;
  font-weight: 900;
  text-align: right;
}

.message-sound-range input[type="range"] {
  width: 100%;
  height: 6px;
  min-height: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  outline: 0;
  background: linear-gradient(to right, #829ca4 0 var(--sound-progress, 100%), #e3e9ea var(--sound-progress, 100%) 100%);
  cursor: pointer;
  appearance: none;
}

.message-sound-range input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: transparent;
}

.message-sound-range input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #667f88;
  box-shadow: 0 2px 8px rgba(48, 56, 60, 0.2);
  appearance: none;
}

.message-sound-range input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: transparent;
}

.message-sound-range input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #667f88;
  box-shadow: 0 2px 8px rgba(48, 56, 60, 0.2);
}

.message-sound-range input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(130, 156, 164, 0.24), 0 2px 8px rgba(48, 56, 60, 0.2);
}

.message-sound-actions {
  justify-content: flex-end;
}

.message-sound-actions .button:first-child {
  margin-right: auto;
}

.account-password-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.account-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.notification-types {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.notification-types span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 29px;
  padding: 5px 8px;
  border: 1px solid #e0e6e7;
  border-radius: 7px;
  background: #f8fafa;
  color: #718086;
  font-size: 10px;
  font-weight: 900;
}

.notification-types i {
  color: #8aa1aa;
}

.account-form .notice:empty,
.test-email-form .notice:empty {
  display: none;
}

.test-email-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: -3px;
  padding-top: 15px;
  border-top: 1px solid var(--mist);
}

.test-email-form .notice {
  margin: 0;
}

@media (max-width: 760px) {
  .site-header {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
    padding: 10px 12px;
  }

  .header-right {
    width: 100%;
    gap: 7px;
  }

  .header-right .nav-links {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    min-width: 0;
    padding: 1px 0 3px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .header-right .nav-links::-webkit-scrollbar {
    display: none;
  }

  .header-right .nav-links a,
  .header-right .nav-link-button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .header-login {
    margin-left: auto;
  }

  .account-dropdown {
    width: min(270px, calc(100vw - 24px));
  }

  .account-page-head {
    align-items: start;
    flex-direction: column;
  }

  .account-layout {
    grid-template-columns: 1fr;
  }

  .account-profile-card {
    position: static;
  }
}

@media (max-width: 520px) {
  .account-shell {
    padding: 28px 12px 64px;
  }

  .account-page-head h1 {
    font-size: 40px;
  }

  .account-setting-card {
    padding: 17px;
  }

  .account-setting-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .notification-state {
    margin-left: 0;
  }

  .account-password-grid {
    grid-template-columns: 1fr;
  }

  .account-form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .account-form-footer .button {
    width: 100%;
  }
}

/* 2026 studio refresh */
:root {
  --rose: #d59ca8;
  --rose-soft: #fff3f5;
  --lilac-soft: #f4f2f8;
  --blue-soft: #eef5f8;
  --sage-soft: #f0f5f1;
  --surface-shadow: 0 16px 44px rgba(43, 49, 54, 0.08);
}

body {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
  background-color: #f9fafb;
}

main {
  width: 100%;
  flex: 1 0 auto;
}

body.page-login main,
body.page-register main {
  display: grid;
  min-height: 0;
}

body.page-login .auth-shell,
body.page-register .auth-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
}

@media (max-width: 760px) {
  body.page-login .auth-shell,
  body.page-register .auth-shell {
    padding-block: 10px;
  }
}

.site-footer {
  width: 100%;
  margin-top: auto;
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(16px);
}

.site-header {
  border-bottom-color: rgba(216, 224, 225, 0.88);
  box-shadow: 0 8px 30px rgba(47, 54, 59, 0.05);
}

.nav-links a,
.nav-link-button {
  border-radius: 7px;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.nav-links a:hover,
.nav-link-button:hover {
  background: #f2f5f5;
}

/* Modern role-aware navigation */
.nav-links {
  gap: 5px;
  padding: 4px;
  border: 1px solid rgba(218, 226, 227, 0.88);
  border-radius: 8px;
  background: rgba(247, 249, 249, 0.78);
}

.nav-links a,
.nav-link-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  gap: 7px;
  padding: 0 11px;
  border-radius: 6px;
  color: #748086;
  font-size: 12px;
  white-space: nowrap;
}

.nav-links a > i,
.nav-link-button > i {
  color: #89969a;
  font-size: 12px;
  transition: color 0.18s ease;
}

.nav-links a:hover,
.nav-link-button:hover {
  background: #fff;
  color: #344044;
  box-shadow: 0 4px 12px rgba(45, 54, 58, 0.06);
}

.nav-links a:hover > i,
.nav-link-button:hover > i {
  color: #657f87;
}

.nav-links a.is-active,
.nav-links a[aria-current="page"] {
  background: #fff;
  color: #2e383c;
  box-shadow: 0 5px 16px rgba(43, 53, 57, 0.09);
}

.nav-links a.is-active::after,
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 3px;
  left: 10px;
  height: 2px;
  border-radius: 2px;
  background: #83a1a8;
}

.nav-links .admin-chat-nav {
  margin-left: 3px;
  border: 1px solid #9eacb1;
  background: #2f373b;
  color: #f9fbfb;
  box-shadow: 0 6px 16px rgba(38, 45, 49, 0.14);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.nav-links .admin-chat-nav > i {
  color: #c5d6d8;
}

.nav-links .admin-chat-nav:hover,
.nav-links .admin-chat-nav[aria-expanded="true"],
.nav-links .admin-chat-nav.is-active {
  border-color: #22292c;
  background: #20272a;
  color: #fff;
  box-shadow: 0 7px 19px rgba(32, 39, 42, 0.2);
}

.nav-links .database-nav-lock {
  margin-left: 1px;
  font-size: 8px;
  opacity: 0.72;
}

.file-picker-limit-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  color: #9e4f5d;
  font-size: 10px;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .nav-links a,
  .nav-link-button {
    padding-inline: 9px;
  }
}

@media (max-width: 760px) {
  .header-right .nav-links {
    padding: 3px;
    border-radius: 7px;
  }

  .header-right .nav-links a,
  .header-right .nav-link-button {
    min-height: 36px;
    padding-inline: 10px;
  }
}

.button {
  gap: 8px;
}

.button > i {
  margin-right: 0;
}

.icon-button {
  font-size: 16px;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.icon-button:hover {
  transform: translateY(-1px);
  border-color: #c8d2d4;
  background: #f7f9f9;
}

.danger-icon {
  border-color: #efdadd;
  background: #fff8f8;
  color: #a24e5a;
}

input,
textarea,
select {
  border-color: #d8dfe0;
  background: #fcfdfd;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: 0;
  border-color: #9eb3bd;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(142, 168, 184, 0.14);
}

.panel {
  border-color: rgba(215, 223, 224, 0.94);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--surface-shadow);
}

.panel::after {
  opacity: 0.22;
}

.dashboard-shell[data-dashboard] {
  display: flex;
  max-width: 1440px;
  flex-direction: column;
  padding-top: 44px;
}

.dashboard-shell[data-dashboard] > .dashboard-top { order: 1; }
.dashboard-shell[data-dashboard] > .metric-grid { order: 2; }
.dashboard-shell[data-dashboard] > .workspace-grid { order: 3; }
.dashboard-shell[data-dashboard] > .studio-tools-heading { order: 4; }
.dashboard-shell[data-dashboard] > .studio-actions { order: 5; }
.dashboard-shell[data-dashboard] > .users-overview { order: 6; }
.dashboard-shell[data-dashboard] > .category-manager { order: 7; }
.dashboard-shell[data-dashboard] > .site-settings-panel { order: 8; }
.dashboard-shell[data-dashboard] > .product-manager { order: 9; }
.dashboard-shell[data-dashboard] > .gallery-manager { order: 10; }
.dashboard-shell[data-dashboard] > .action-modal { order: 100; }

.dashboard-top {
  align-items: center;
  margin-bottom: 28px;
}

.dashboard-top h1 {
  max-width: 880px;
  margin-top: 4px;
  font-size: 58px;
  line-height: 1.02;
}

.dashboard-welcome {
  max-width: 680px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.dashboard-user-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 180px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 30px rgba(50, 57, 62, 0.07);
}

.dashboard-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.dashboard-user-chip > i {
  color: var(--cloud);
  font-size: 25px;
}

.dashboard-user-chip span {
  display: grid;
  gap: 1px;
}

.dashboard-user-chip small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.metric-grid article {
  display: grid;
  min-height: 134px;
  align-content: end;
  padding: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 36px rgba(43, 49, 54, 0.07);
}

.metric-grid article:nth-child(2) { background: linear-gradient(145deg, #fff, var(--blue-soft)); }
.metric-grid article:nth-child(3) { background: linear-gradient(145deg, #fff, var(--lilac-soft)); }
.metric-grid article:nth-child(4) { background: linear-gradient(145deg, #fff, var(--sage-soft)); }

.metric-grid .metric-priority.has-work {
  border-color: #ebc8cf;
  background: linear-gradient(145deg, #fff, var(--rose-soft));
}

.metric-grid .metric-priority.has-work .metric-icon {
  color: #b76575;
  opacity: 1;
}

.metric-grid span {
  margin-bottom: 2px;
  font-size: 38px;
  line-height: 1;
}

.metric-grid strong {
  color: #535e64;
  letter-spacing: 0;
}

.metric-grid article > small {
  margin-top: 5px;
  color: #899398;
  font-size: 11px;
  font-weight: 800;
}

.workspace-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 20px;
  margin-bottom: 34px;
}

.work-queue-panel {
  min-width: 0;
  padding: 0;
  overflow: visible;
}

.work-queue-panel > .panel-title {
  align-items: center;
  margin: 0;
  padding: 19px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 250, 0.9));
}

.queue-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.queue-heading h2 {
  margin: 2px 0 0;
  font-size: 25px;
}

.queue-heading-icon,
.work-item-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #d8e2e3;
  border-radius: 8px;
  color: #647b87;
}

.queue-heading-icon {
  width: 42px;
  height: 42px;
  font-size: 16px;
}

.request-icon { background: var(--blue-soft); }
.order-icon { background: var(--lilac-soft); color: #716e89; }

.queue-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.queue-count {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: #24272c;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.segmented-filter {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f3f6f6;
}

.segmented-filter button {
  min-height: 30px;
  padding: 5px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #778287;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.segmented-filter button.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(49, 57, 61, 0.09);
}

.record-list,
.order-list {
  gap: 10px;
  max-height: 720px;
  padding: 14px;
  overflow: auto;
  scrollbar-color: #c8d1d3 transparent;
  scrollbar-width: thin;
}

.work-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 15px;
  border: 1px solid #dde4e5;
  border-left: 4px solid #b4c5cc;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(45, 52, 57, 0.05);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.work-item:hover {
  transform: translateY(-1px);
  border-color: #cbd7da;
  box-shadow: 0 14px 32px rgba(45, 52, 57, 0.09);
}

.work-item.needs-reply {
  border-color: #edd5da;
  border-left-color: var(--rose);
  background: linear-gradient(100deg, var(--rose-soft), #fff 34%);
}

.work-item[hidden] {
  display: none;
}

.work-item-icon {
  width: 42px;
  height: 42px;
}

.work-item-icon.request-icon {
  position: relative;
}

.work-item-icon.request-icon > i {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 18px;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.record-main,
.order-summary-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.work-item-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.work-type-label,
.reply-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 23px;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.work-type-label {
  background: #edf4f7;
  color: #58717e;
}

.order-summary .work-type-label {
  background: #f0eef6;
  color: #6d6886;
}

.reply-state {
  color: #68777d;
  background: #f0f4f4;
}

.needs-reply .reply-state {
  color: #9f4f5d;
  background: #fde9ed;
}

.work-item .status-pill {
  min-height: 23px;
  padding: 3px 7px;
  font-size: 10px;
}

.record-title,
.order-summary-main h3 {
  overflow: hidden;
  margin: 1px 0 0;
  color: #292d31;
  font-family: "Fraunces", Georgia, serif;
  font-size: 21px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-person {
  display: flex !important;
  align-items: center;
  gap: 6px;
  color: #66747a !important;
  font-size: 12px !important;
  font-weight: 800;
}

.message-preview {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 1px 0 0;
  overflow: hidden;
  color: #778388;
  font-size: 13px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-preview i {
  flex: 0 0 auto;
  color: #9aabb1;
}

.record-meta,
.order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.record-meta span,
.order-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 4px 7px;
  border: 1px solid #e2e7e8;
  border-radius: 6px;
  background: #f8fafa;
  color: #7a868b;
  font-size: 10px;
  font-weight: 900;
}

.work-item > .row-actions {
  align-self: center;
  justify-content: flex-end;
}

.work-item .row-actions .button {
  white-space: nowrap;
}

.empty-queue {
  display: grid;
  min-height: 180px;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 24px;
  color: #899498;
  text-align: center;
}

.empty-queue > i {
  margin-bottom: 4px;
  color: #a6b6bc;
  font-size: 28px;
}

.empty-queue strong {
  color: #4c575c;
}

.empty-queue span {
  font-size: 13px;
}

.studio-tools-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 10px 0 15px;
  padding-top: 25px;
  border-top: 1px solid var(--line);
}

.studio-tools-heading h2 {
  margin: 3px 0 0;
  font-size: 32px;
}

.studio-tools-heading > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.action-launch-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.action-launch-card {
  min-height: 190px;
  border-top: 3px solid #c8d9df;
  box-shadow: 0 12px 36px rgba(43, 49, 54, 0.07);
}

.action-launch-card:nth-child(2) { border-top-color: #d1cce0; }
.action-launch-card:nth-child(3) { border-top-color: #d6b8bf; }

.users-overview,
.category-manager,
.site-settings-panel,
.product-manager,
.gallery-manager {
  margin-bottom: 16px;
}

/* Order workspace */
.order-detail-shell {
  padding-top: 42px;
}

.order-top-actions {
  justify-content: flex-end;
}

.order-stage-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: -4px 0 22px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 34px rgba(43, 49, 54, 0.06);
}

.order-stage-track::before {
  content: "";
  position: absolute;
  top: 36px;
  right: 12%;
  left: 12%;
  height: 2px;
  background: #e3e8e9;
}

.order-stage {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #8b969a;
  font-size: 12px;
}

.order-stage > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 2px solid #dfe5e6;
  border-radius: 50%;
  background: #fff;
  font-weight: 900;
}

.order-stage.is-complete > span,
.order-stage.is-current > span {
  border-color: #829da8;
  background: #829da8;
  color: #fff;
  box-shadow: 0 0 0 5px rgba(142, 168, 184, 0.14);
}

.order-stage.is-current {
  color: #35464d;
}

.order-detail-grid {
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 20px;
}

.order-side,
.order-detail-panel {
  border-top: 3px solid #c7d8de;
}

.order-side-title {
  display: flex;
  align-items: center;
  gap: 11px;
}

.order-side-title h2 {
  margin: 2px 0 0;
  font-size: 23px;
}

.detail-list {
  gap: 0;
}

.detail-list div {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.detail-list dt {
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: 0;
}

.detail-list dt i {
  width: 14px;
  color: #91a6ae;
  text-align: center;
}

.order-detail-panel {
  padding: 25px;
}

.inline-edit {
  padding: 14px;
  border: 1px solid #dde5e6;
  border-radius: 8px;
  background: #f7f9f9;
}

.delivery-block,
.revision-panel,
.delivery-form,
.revision-form {
  padding: 17px;
  background: #fbfcfc;
  box-shadow: 0 8px 24px rgba(46, 53, 57, 0.04);
}

.delivery-form > summary,
.revision-form > summary,
.revision-panel > summary {
  padding: 3px 0;
  color: #46545a;
}

.delivery-state-toggle {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid #d8e1e2;
  border-radius: 8px;
  background: #f6f9f9;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.delivery-state-toggle:hover {
  border-color: #bccdd1;
  background: #f2f7f7;
}

.delivery-state-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.delivery-state-control {
  position: relative;
  width: 46px;
  height: 26px;
  border: 1px solid #b9c6c9;
  border-radius: 999px;
  background: #dfe6e7;
  box-shadow: inset 0 1px 3px rgba(49, 61, 65, 0.1);
  transition: border-color 180ms ease, background-color 180ms ease;
}

.delivery-state-control::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(39, 48, 52, 0.24);
  content: "";
  transition: transform 180ms ease;
}

.delivery-state-input:checked + .delivery-state-control {
  border-color: #819da6;
  background: #91abb3;
}

.delivery-state-input:checked + .delivery-state-control::after {
  transform: translateX(20px);
}

.delivery-state-input:focus-visible + .delivery-state-control {
  outline: 2px solid #87a4b0;
  outline-offset: 3px;
}

.delivery-state-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.delivery-state-copy strong {
  color: #344349;
  font-size: 13px;
}

.delivery-state-copy small {
  color: #74838a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.check-file {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-content: start;
  padding: 7px;
  border: 1px solid #d8e1e2;
  border-radius: 8px;
  background: #fff;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.check-file:hover {
  border-color: #b9cbd0;
  box-shadow: 0 10px 24px rgba(48, 56, 60, 0.08);
}

.check-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.check-file .file-tile {
  min-height: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.check-file .file-tile:hover {
  transform: none;
  box-shadow: none;
}

.check-file-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 9px;
  border-radius: 6px;
  background: #f3f6f6;
  color: #5f6f75;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.check-file-control {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #acbdc1;
  border-radius: 5px;
  background: #fff;
  color: transparent;
  font-size: 10px;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.check-file-input:checked ~ .check-file-toggle {
  background: #e9f1f2;
  color: #3f5961;
}

.check-file-input:checked ~ .check-file-toggle .check-file-control {
  border-color: #78959e;
  background: #829fa8;
  color: #fff;
  transform: scale(1.04);
}

.check-file-input:focus-visible ~ .check-file-toggle {
  outline: 2px solid #87a4b0;
  outline-offset: 2px;
}

.check-file:has(.check-file-input:checked) {
  border-color: #9db3b9;
  background: #fbfdfd;
  box-shadow: 0 0 0 3px rgba(130, 159, 168, 0.12), 0 10px 24px rgba(48, 56, 60, 0.08);
}

.file-tile,
.message-attachment {
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.file-tile:hover,
.message-attachment:hover {
  transform: translateY(-1px);
  border-color: #bacbd0;
  box-shadow: 0 10px 24px rgba(48, 56, 60, 0.09);
}

/* Forms and action modules */
.action-modal,
.database-lock-modal {
  background: rgba(31, 35, 39, 0.42);
  backdrop-filter: blur(14px) saturate(0.8);
}

.action-modal-card,
.database-lock-card {
  border-radius: 8px;
  box-shadow: 0 34px 110px rgba(27, 31, 34, 0.28);
  animation: chat-panel-in 0.2s ease-out;
}

.action-modal-header,
.database-lock-header {
  align-items: center;
  padding: 20px 22px;
  background: linear-gradient(135deg, #fff, #f4f7f7);
}

.action-modal-header h2,
.database-lock-header h2 {
  font-size: 28px;
}

.action-modal-header .icon-button {
  font-size: 0;
}

.action-modal-header .icon-button::before {
  content: "\f00d";
  font-family: "Font Awesome 6 Free";
  font-size: 14px;
  font-weight: 900;
}

.icon-button:focus-visible,
.button:focus-visible,
.segmented-filter button:focus-visible {
  outline: 2px solid #87a4b0;
  outline-offset: 2px;
}

.action-modal-body {
  gap: 17px;
  padding: 22px;
  scrollbar-color: #c4ced0 transparent;
  scrollbar-width: thin;
}

.action-modal-body.stacked-form > label,
.database-lock-form label {
  gap: 7px;
  color: #55646a;
  font-size: 12px;
}

.action-modal-body input,
.action-modal-body textarea,
.action-modal-body select,
.database-lock-form input {
  min-height: 46px;
  padding: 11px 12px;
  border-radius: 7px;
}

.action-modal-body textarea {
  min-height: 108px;
  resize: vertical;
}

.action-modal-body > .button {
  justify-self: end;
  min-width: 150px;
  margin-top: 2px;
}

.file-picker {
  gap: 8px;
}

.file-picker-control {
  min-height: 50px;
  border-style: dashed;
  border-color: #cbd7da;
  background: #f8fafa;
}

.file-picker-button {
  gap: 7px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(48, 56, 60, 0.06);
}

.file-picker.has-files .file-picker-control {
  border-color: #91aaa5;
  background: var(--sage-soft);
}

.upload-preview-card {
  border-radius: 7px;
  box-shadow: 0 7px 18px rgba(45, 53, 57, 0.07);
}

/* Chat */
.chat-drawer {
  padding: 24px;
  background: rgba(27, 31, 34, 0.44);
  backdrop-filter: blur(15px) saturate(0.8);
}

.chat-panel {
  grid-template-rows: auto auto minmax(240px, 1fr) auto;
  width: min(920px, calc(100vw - 48px));
  height: min(820px, calc(100dvh - 48px));
  border-color: rgba(205, 216, 218, 0.98);
  border-radius: 8px;
  background: #f5f8f8;
  box-shadow: 0 38px 120px rgba(24, 28, 31, 0.34);
}

.chat-header {
  min-height: 82px;
  padding: 15px 18px;
  background: rgba(255, 255, 255, 0.96);
}

.chat-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.chat-identity > div {
  min-width: 0;
}

.chat-heading-icon {
  display: grid;
  width: 45px;
  height: 45px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #d5e0e2;
  border-radius: 8px;
  background: var(--blue-soft);
  color: #637d89;
  font-size: 17px;
}

.chat-header h2 {
  max-width: 560px;
  margin-top: 1px;
  font-size: 25px;
}

.chat-header-actions {
  flex-wrap: nowrap;
}

.chat-tool {
  width: 40px;
  height: 40px;
}

.database-update-stamp {
  margin-top: 5px;
  padding: 3px 7px;
  box-shadow: none;
  font-size: 10px;
}

.messages {
  gap: 13px;
  padding: 20px 24px;
  background:
    linear-gradient(180deg, rgba(245, 248, 248, 0.98), rgba(239, 244, 244, 0.98)),
    radial-gradient(circle at 1px 1px, rgba(119, 142, 150, 0.12) 1px, transparent 0);
  background-size: auto, 22px 22px;
  scroll-padding-bottom: 18px;
}

.message-wrap {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  width: 100%;
}

.message-wrap.mine {
  flex-direction: row-reverse;
}

.message-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #d6e0e2;
  border-radius: 50%;
  background: #fff;
  color: #637780;
  box-shadow: 0 6px 16px rgba(49, 57, 61, 0.08);
  font-family: "Fraunces", Georgia, serif;
  font-size: 14px;
  font-weight: 700;
}

.message-wrap.mine .message-avatar {
  border-color: #d8d2e5;
  background: var(--lilac-soft);
  color: #6d6884;
}

.message {
  position: relative;
  width: fit-content;
  min-width: 0;
  max-width: min(76%, 650px);
  padding: 11px 13px 9px;
  border-radius: 8px 8px 8px 2px;
  box-shadow: 0 9px 24px rgba(46, 55, 59, 0.08);
}

.message.mine {
  align-self: auto;
  border-radius: 8px 8px 2px 8px;
  background: #292d31;
  box-shadow: 0 12px 28px rgba(37, 40, 45, 0.16);
}

.message strong {
  margin-bottom: 5px;
  color: #66757b;
  font-size: 10px;
  letter-spacing: 0;
}

.message p {
  font-size: 14px;
  line-height: 1.5;
}

.message-text {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.chat-link {
  color: #4d7480;
  font-weight: 800;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: rgba(77, 116, 128, 0.48);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  word-break: break-word;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.chat-link:hover,
.chat-link:focus-visible {
  color: #2f5967;
  text-decoration-color: currentColor;
}

.message.mine .chat-link {
  color: #d8eef2;
  text-decoration-color: rgba(216, 238, 242, 0.54);
}

.message.mine .chat-link:hover,
.message.mine .chat-link:focus-visible {
  color: #fff;
  text-decoration-color: currentColor;
}

.chat-drawer.is-read-only .message-wrap.is-order-completed-event .chat-link {
  color: #416b53;
  text-decoration-color: rgba(65, 107, 83, 0.48);
}

.chat-mention {
  padding: 1px 3px;
  border-radius: 4px;
  background: #eee8f3;
  color: #745d84;
  font-weight: 900;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.message.mine .chat-mention {
  background: rgba(224, 211, 235, 0.18);
  color: #f0e7f6;
}

.message-wrap.is-mentioned .message {
  background: #fdfaff;
  box-shadow: 0 0 0 1px rgba(151, 122, 168, 0.42), 0 12px 30px rgba(86, 66, 97, 0.12);
}

.reply-chip {
  display: grid;
  gap: 2px;
  width: 100%;
  min-width: 0;
  margin-bottom: 8px;
  padding: 7px 9px;
  overflow: hidden;
  appearance: none;
  border: 0;
  border-left: 3px solid #91acb7;
  border-radius: 6px;
  background: #f0f5f6;
  color: #67787e;
  font: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.reply-chip span {
  color: #40535b;
  font-size: 10px;
  font-weight: 900;
}

.reply-chip small {
  display: block;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reply-chip:hover {
  background: #e7eff1;
  box-shadow: 0 5px 14px rgba(71, 91, 99, 0.1);
  transform: translateY(-1px);
}

.reply-chip:focus-visible {
  outline: 2px solid #91acb7;
  outline-offset: 2px;
}

.message.mine .reply-chip {
  border-left-color: #c6bedb;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.76);
}

.message.mine .reply-chip:hover {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.12);
}

.message.mine .reply-chip span {
  color: #fff;
}

.message-wrap.is-reply-target .message::after {
  position: absolute;
  inset: -5px;
  border: 2px solid rgba(139, 125, 150, 0.78);
  border-radius: 11px;
  box-shadow: 0 0 0 6px rgba(139, 125, 150, 0.13);
  content: "";
  pointer-events: none;
  animation: reply-target-ring 2s ease-out both;
}

@keyframes reply-target-ring {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }

  14% {
    opacity: 1;
    transform: scale(1);
  }

  65% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    transform: scale(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  .message-wrap.is-reply-target .message::after {
    opacity: 1;
    animation: none;
  }
}

.message-attachments {
  grid-template-columns: repeat(auto-fit, minmax(105px, 160px));
  margin-top: 9px;
}

.message-attachment {
  background: rgba(255, 255, 255, 0.96);
}

.message.mine .message-attachment {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.message-bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
}

.message-meta {
  margin-top: 0;
}

.message-receipt {
  min-height: 18px;
  padding: 1px 5px;
  font-size: 9px;
}

.message-actions {
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0;
  opacity: 0.38;
  transition: opacity 0.18s ease;
}

.message:hover .message-actions,
.message:focus-within .message-actions {
  opacity: 1;
}

.message-actions button {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  padding: 0;
  border-radius: 6px;
  font-size: 11px;
}

.message-actions button:hover {
  background: #edf2f3;
  color: #35464d;
}

.message.mine .message-actions button:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.chat-empty {
  display: grid;
  min-height: 100%;
  place-content: center;
  justify-items: center;
  gap: 7px;
  color: #819095;
  text-align: center;
}

.chat-empty > span {
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: 5px;
  place-items: center;
  border: 1px solid #d5e1e3;
  border-radius: 50%;
  background: #fff;
  color: #78909a;
  font-size: 20px;
  box-shadow: 0 10px 28px rgba(49, 57, 61, 0.08);
}

.chat-empty strong {
  color: #46565d;
  font-family: "Fraunces", Georgia, serif;
  font-size: 20px;
}

.chat-empty p {
  margin: 0;
  font-size: 13px;
}

.reply-preview {
  min-height: 48px;
  padding: 8px 18px;
  border-left: 0;
  border-bottom: 1px solid #dce4e5;
  background: #f6f1f6;
}

.reply-preview::before {
  content: "\f3e5";
  color: #8b7d96;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.reply-preview > span {
  flex: 1;
}

.reply-preview button {
  padding: 5px 8px;
  border-radius: 6px;
}

.chat-form {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "compose send";
  align-items: end;
  gap: 8px 10px;
  padding: 13px 15px 10px;
  background: #fff;
}

.chat-compose-box {
  grid-area: compose;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  min-width: 0;
  overflow: visible;
  border: 1px solid #d5dfe1;
  border-radius: 8px;
  background: #f9fbfb;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.chat-compose-box:focus-within {
  border-color: #9eb3bd;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(142, 168, 184, 0.13);
}

.chat-message-editor {
  position: relative;
  align-self: end;
  min-width: 0;
}

.chat-form textarea {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-height: 48px;
  max-height: 132px;
  padding: 13px 10px 11px 14px;
  overflow-y: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  resize: none;
}

.chat-message-highlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 48px;
  max-height: 132px;
  padding: 13px 10px 11px 14px;
  overflow: auto;
  color: var(--ink);
  font: inherit;
  line-height: 1.35;
  overflow-wrap: anywhere;
  pointer-events: none;
  scrollbar-width: none;
  white-space: pre-wrap;
}

.chat-message-highlight::-webkit-scrollbar {
  display: none;
}

.js-ready .chat-message-editor textarea {
  color: transparent;
  caret-color: var(--ink);
  -webkit-text-fill-color: transparent;
}

.js-ready .chat-message-editor textarea::placeholder {
  color: #7f898d;
  opacity: 1;
  -webkit-text-fill-color: #7f898d;
}

.chat-message-highlight .chat-mention {
  padding: 0;
  background: #eee8f3;
  color: #745d84;
  font-weight: inherit;
  box-shadow: 0 0 0 2px #eee8f3;
}

.chat-mention-menu {
  position: absolute;
  left: 7px;
  bottom: calc(100% + 10px);
  z-index: 8;
  display: grid;
  width: min(360px, calc(100vw - 40px));
  max-height: 230px;
  gap: 3px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid #d8e1e3;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 48px rgba(37, 44, 48, 0.2);
  backdrop-filter: blur(16px);
}

.chat-mention-menu[hidden] {
  display: none;
}

.chat-mention-option {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 46px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #35454c;
  text-align: left;
  cursor: pointer;
}

.chat-mention-option:hover,
.chat-mention-option.is-active,
.chat-mention-option:focus-visible {
  outline: 0;
  background: #f1eef5;
  color: #604f6b;
}

.chat-mention-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(90, 104, 110, 0.14);
  border-radius: 50%;
  background: var(--mention-avatar, #a7b4ad);
  color: #fff;
  box-shadow: 0 5px 12px rgba(49, 57, 61, 0.12);
  font-family: "Fraunces", Georgia, serif;
  font-size: 13px;
  font-weight: 800;
}

.chat-mention-option-text {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.chat-mention-option-text strong,
.chat-mention-option-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-mention-option-text strong {
  font-size: 13px;
}

.chat-mention-option-text small {
  color: #849197;
  font-size: 10px;
}

.chat-form textarea:focus {
  background: transparent;
  box-shadow: none;
}

.chat-form .file-picker-compact {
  position: relative;
  display: block;
  align-self: end;
  width: auto;
  min-width: 0;
  padding: 5px;
}

.chat-form .file-picker-compact > span:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.chat-form .file-picker-compact .file-picker-control {
  min-height: 38px;
  border: 0;
  background: transparent;
}

.chat-form .file-picker-compact .file-picker-button {
  display: grid;
  width: 38px;
  height: 38px;
  min-height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid #dae3e4;
  background: #fff;
  color: #677d86;
  font-size: 15px;
}

.chat-form .file-picker-button-label,
.chat-form .file-picker-compact .file-picker-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.chat-form .file-picker-compact.has-files .file-picker-button {
  border-color: #87a79f;
  background: #eaf3f0;
  color: #466d63;
  box-shadow: 0 0 0 4px rgba(126, 160, 151, 0.12);
}

.chat-form .file-picker-compact .file-preview {
  position: absolute;
  right: 0;
  bottom: calc(100% + 13px);
  z-index: 3;
  display: flex;
  width: min(520px, calc(100vw - 90px));
  max-height: 180px;
  padding: 10px;
  overflow: auto;
  border: 1px solid #d8e1e2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(37, 44, 48, 0.2);
}

.chat-form .file-picker-compact .file-preview[hidden] {
  display: none;
}

.chat-form .file-picker-compact .upload-preview-card {
  width: 100px;
  flex: 0 0 100px;
}

.chat-send {
  grid-area: send;
  min-width: 104px;
  min-height: 50px;
}

.chat-compose-tools {
  display: flex;
  align-items: center;
  align-self: end;
  gap: 4px;
  padding: 5px;
}

.chat-compose-icon,
.voice-action,
.voice-draft-play,
.voice-play,
.voice-download {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #dae3e4;
  background: #fff;
  color: #677d86;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.chat-compose-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 7px;
  font-size: 15px;
}

.chat-compose-icon:hover,
.chat-compose-icon:focus-visible {
  border-color: #aabdc3;
  background: #eef4f5;
  color: #4f6d78;
  box-shadow: 0 0 0 4px rgba(126, 157, 168, 0.11);
}

.voice-record-trigger:hover,
.voice-record-trigger:focus-visible {
  border-color: #c9a3ad;
  background: #fbf1f4;
  color: #9a6170;
  box-shadow: 0 0 0 4px rgba(175, 112, 129, 0.1);
}

.chat-compose-box.is-recording {
  grid-template-columns: 1fr;
  border-color: #cfadb5;
  background: #fffafb;
  box-shadow: 0 0 0 4px rgba(177, 111, 129, 0.1);
}

.chat-compose-box.is-recording > .chat-message-editor,
.chat-compose-box.is-recording > .chat-compose-tools,
.chat-compose-box.is-recording > .voice-draft {
  display: none;
}

.chat-compose-box.has-voice-draft {
  border-color: #b7c7cb;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(132, 160, 169, 0.09);
}

.voice-capture,
.voice-draft {
  grid-column: 1 / -1;
  min-width: 0;
}

.voice-capture[hidden],
.voice-draft[hidden],
.voice-status[hidden] {
  display: none;
}

.voice-capture {
  display: grid;
  grid-template-columns: auto auto minmax(120px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 9px 8px 13px;
}

.voice-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #b45f73;
  box-shadow: 0 0 0 0 rgba(180, 95, 115, 0.28);
  animation: voice-live-pulse 1.45s ease-out infinite;
}

.voice-capture-state {
  display: grid;
  min-width: 72px;
  gap: 1px;
}

.voice-capture-state strong {
  color: #7d4f5a;
  font-size: 11px;
  line-height: 1.15;
}

.voice-capture-state time {
  color: #a16d78;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.voice-live-wave,
[data-voice-draft-wave],
[data-voice-waveform] {
  display: flex;
  height: 30px;
  min-width: 0;
  align-items: center;
  gap: 2px;
  overflow: hidden;
}

.voice-wave-bar {
  width: 2px;
  height: calc(4px + (var(--level, 0.2) * 22px));
  min-height: 4px;
  max-height: 26px;
  flex: 1 1 2px;
  border-radius: 2px;
  background: #c7d2d5;
  transition: height 0.08s linear, background 0.12s ease, opacity 0.12s ease;
}

.voice-live-wave .voice-wave-bar {
  background: #c58b98;
}

.voice-wave-bar.is-played {
  background: #668792;
}

.voice-action {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 7px;
  font-size: 13px;
}

.voice-action:hover,
.voice-action:focus-visible {
  transform: translateY(-1px);
  border-color: #a9bbc0;
  background: #eef4f5;
  color: #526f79;
}

.voice-action.discard:hover,
.voice-action.discard:focus-visible {
  border-color: #d5afb7;
  background: #fff1f3;
  color: #9a5868;
}

.voice-action.finish {
  border-color: #2e3438;
  background: #2e3438;
  color: #fff;
  box-shadow: 0 7px 17px rgba(42, 47, 51, 0.2);
}

.voice-action.finish:hover,
.voice-action.finish:focus-visible {
  border-color: #111517;
  background: #111517;
  color: #fff;
}

.voice-draft {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto auto auto;
  align-items: center;
  gap: 9px;
  margin: 0 7px 7px;
  padding: 8px;
  border: 1px solid #dce4e6;
  border-radius: 7px;
  background: #f4f7f7;
}

.voice-draft-play,
.voice-play {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border-color: #7897a1;
  background: #7897a1;
  color: #fff;
  box-shadow: 0 7px 18px rgba(85, 113, 123, 0.2);
}

.voice-draft-play:hover,
.voice-draft-play:focus-visible,
.voice-play:hover,
.voice-play:focus-visible {
  transform: scale(1.04);
  border-color: #587883;
  background: #587883;
  color: #fff;
}

.voice-draft.is-playing .voice-draft-play,
.voice-message.is-playing .voice-play {
  border-color: #a26372;
  background: #a26372;
  box-shadow: 0 0 0 5px rgba(162, 99, 114, 0.12);
}

.voice-draft-wave,
.voice-message-wave {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 2px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.voice-draft time,
.voice-message-info time {
  color: #7c8a8f;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.voice-status {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0 12px 9px;
  color: #61777f;
  font-size: 11px;
  line-height: 1.35;
}

.voice-status.error {
  color: #9b5262;
}

.message.has-voice {
  width: min(520px, 100%);
}

.message-voices {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.voice-message {
  display: grid;
  grid-template-columns: auto minmax(145px, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #dbe4e5;
  border-radius: 8px;
  background: #f4f7f7;
  color: #425158;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.voice-message.is-playing {
  border-color: #b7cbd0;
  background: #f8fbfb;
  box-shadow: 0 8px 24px rgba(69, 91, 99, 0.1);
}

.voice-message-main {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.voice-message-wave {
  height: 28px;
}

.voice-message-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.voice-message-info span {
  overflow: hidden;
  color: #60757d;
  font-size: 9px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-message-info span i {
  margin-right: 3px;
  color: #8c6d7d;
}

.voice-rate,
.voice-download {
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border: 1px solid #d4dfe1;
  border-radius: 7px;
  background: #fff;
  color: #60757d;
  font-size: 9px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.voice-download {
  width: 30px;
  padding: 0;
}

.voice-rate:hover,
.voice-rate:focus-visible,
.voice-download:hover,
.voice-download:focus-visible {
  border-color: #9eb3b9;
  background: #eaf1f2;
  color: #405b64;
}

.message.mine .voice-message {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.message.mine .voice-message.is-playing {
  border-color: rgba(238, 213, 221, 0.42);
  background: rgba(255, 255, 255, 0.13);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

.message.mine .voice-wave-bar {
  background: rgba(255, 255, 255, 0.32);
}

.message.mine .voice-wave-bar.is-played {
  background: #edcbd4;
}

.message.mine .voice-message-info span,
.message.mine .voice-message-info time {
  color: rgba(255, 255, 255, 0.72);
}

.message.mine .voice-message-info span i {
  color: #edcbd4;
}

.message.mine .voice-rate,
.message.mine .voice-download {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.88);
}

.message.mine .voice-rate:hover,
.message.mine .voice-rate:focus-visible,
.message.mine .voice-download:hover,
.message.mine .voice-download:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

@keyframes voice-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(180, 95, 115, 0.3); }
  70% { box-shadow: 0 0 0 8px rgba(180, 95, 115, 0); }
  100% { box-shadow: 0 0 0 0 rgba(180, 95, 115, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .voice-live-dot {
    animation: none;
  }

  .voice-wave-bar,
  .voice-action,
  .voice-play,
  .voice-draft-play {
    transition: none;
  }
}

@media (max-width: 1100px) {
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-grid {
    grid-template-columns: 1fr;
  }

  .record-list,
  .order-list {
    max-height: 620px;
  }
}

@media (max-width: 900px) {
  .action-launch-grid {
    grid-template-columns: 1fr;
  }

  .order-detail-grid {
    grid-template-columns: 1fr;
  }

  .order-side {
    position: static;
  }
}

@media (max-width: 640px) {
  .dashboard-shell[data-dashboard],
  .order-detail-shell {
    padding-top: 26px;
    padding-inline: 12px;
  }

  .dashboard-top {
    gap: 15px;
    margin-bottom: 20px;
  }

  .dashboard-top h1 {
    font-size: 38px;
  }

  .dashboard-user-chip {
    width: 100%;
  }

  .dashboard-top-actions {
    width: 100%;
  }

  .dashboard-top-actions > .button {
    flex: 1;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .metric-grid article {
    min-height: 116px;
    padding: 13px;
  }

  .metric-grid span {
    font-size: 32px;
  }

  .metric-grid .metric-icon {
    top: 13px;
    right: 13px;
    font-size: 18px;
  }

  .work-queue-panel > .panel-title {
    align-items: stretch;
    flex-direction: column;
    padding: 15px;
  }

  .queue-tools {
    justify-content: space-between;
  }

  .segmented-filter {
    flex: 1;
  }

  .segmented-filter button {
    flex: 1;
  }

  .record-list,
  .order-list {
    max-height: none;
    padding: 9px;
  }

  .work-item {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .work-item > .row-actions {
    grid-column: 1 / -1;
    width: 100%;
    padding-top: 4px;
  }

  .work-item > .row-actions .button.primary {
    flex: 1;
  }

  .work-item-icon {
    width: 38px;
    height: 38px;
  }

  .record-title,
  .order-summary-main h3 {
    white-space: normal;
  }

  .message-preview {
    white-space: normal;
  }

  .studio-tools-heading {
    align-items: start;
    flex-direction: column;
  }

  .order-stage-track {
    padding: 14px 8px;
  }

  .order-stage-track::before {
    top: 30px;
  }

  .order-stage > span {
    width: 30px;
    height: 30px;
  }

  .order-stage strong {
    font-size: 9px;
    text-align: center;
  }

  .order-detail-panel,
  .order-side {
    padding: 17px;
  }

  .chat-drawer {
    padding: 0;
  }

  .chat-panel {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .chat-header {
    min-height: 70px;
    padding: 11px 12px;
  }

  .chat-heading-icon {
    width: 39px;
    height: 39px;
  }

  .chat-header h2 {
    max-width: calc(100vw - 170px);
    font-size: 20px;
  }

  .chat-tool {
    width: 36px;
    height: 36px;
  }

  .messages {
    padding: 14px 10px;
  }

  .message-wrap {
    gap: 6px;
  }

  .message-avatar {
    width: 29px;
    height: 29px;
    font-size: 12px;
  }

  .message {
    max-width: calc(100% - 42px);
    padding: 10px 11px 8px;
  }

  .message-actions {
    opacity: 0.72;
  }

  .message-bottom {
    gap: 6px;
  }

  .message-attachments {
    grid-template-columns: repeat(2, minmax(90px, 1fr));
  }

  .chat-form {
    grid-template-columns: minmax(0, 1fr) 48px;
    padding: 9px 9px max(8px, env(safe-area-inset-bottom));
  }

  .chat-send {
    width: 48px;
    min-width: 48px;
    padding: 0;
  }

  .chat-send span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .chat-compose-tools {
    gap: 1px;
    padding-inline: 3px;
  }

  .voice-capture {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 7px;
    padding: 8px 8px 7px 11px;
  }

  .voice-capture-state {
    min-width: 0;
  }

  .voice-live-wave {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 20px;
  }

  .voice-draft {
    grid-template-columns: auto minmax(70px, 1fr) auto auto;
    gap: 6px;
  }

  .voice-draft-play {
    grid-row: 1 / 3;
  }

  .voice-draft-wave {
    grid-column: 2;
    grid-row: 1;
  }

  .voice-draft > time {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    margin-top: -5px;
  }

  .voice-draft .voice-action {
    grid-row: 1 / 3;
  }

  .voice-message {
    grid-template-columns: 36px minmax(80px, 1fr) auto;
    gap: 7px;
    padding: 7px;
  }

  .voice-play {
    width: 36px;
    height: 36px;
  }

  .voice-download {
    display: none;
  }

  .voice-message-info span {
    font-size: 8px;
  }

  .voice-message .voice-wave-bar:nth-child(even),
  .voice-draft .voice-wave-bar:nth-child(even) {
    display: none;
  }

  .chat-form .file-picker-compact .file-preview {
    position: fixed;
    right: 9px;
    bottom: 77px;
    left: 9px;
    width: auto;
  }

  .action-modal {
    padding: 8px;
  }

  .action-modal-card,
  .action-modal-card-wide {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 8px;
  }

  .action-modal-header {
    padding: 15px;
  }

  .action-modal-body {
    max-height: calc(100dvh - 105px);
    padding: 15px;
  }

  .action-modal-body > .button {
    width: 100%;
    justify-self: stretch;
  }
}

.action-modal-card.request-convert-card {
  width: min(860px, calc(100vw - 48px));
}

.action-modal-body.request-convert-form {
  gap: 0;
  padding-top: 0;
}

@media (max-width: 760px) {
  .action-modal-card.request-convert-card {
    width: calc(100vw - 16px);
  }

  .action-modal-body.request-convert-form {
    padding: 0 15px 15px;
  }
}

/* Additive attachment picker */
.upload-preview-card {
  position: relative;
  isolation: isolate;
}

.upload-preview-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background: rgba(38, 43, 47, 0.88);
  color: #fff;
  box-shadow: 0 5px 14px rgba(27, 31, 34, 0.24);
  cursor: pointer;
  font-size: 10px;
  transition: background 0.16s ease, transform 0.16s ease;
}

.upload-preview-remove:hover,
.upload-preview-remove:focus-visible {
  background: #9b5c65;
  transform: scale(1.08);
}

.upload-preview-remove:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

.upload-preview-name {
  overflow: hidden;
  color: #4d555a;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-preview-trigger {
  cursor: zoom-in;
}

.image-preview-trigger:focus-visible {
  outline: 2px solid #87a4b0;
  outline-offset: 3px;
}

/* Order attachment library */
.order-attachment-launch {
  margin-top: 2px;
}

.order-attachment-launch-button {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid #d8e2e4;
  border-radius: 8px;
  background: linear-gradient(135deg, #f8fbfb, #f4f2f8);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(44, 52, 56, 0.06);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.order-attachment-launch-button:hover,
.order-attachment-launch-button:focus-visible {
  border-color: #aebfc4;
  box-shadow: 0 12px 28px rgba(44, 52, 56, 0.11);
  transform: translateY(-1px);
}

.order-attachment-launch-button:focus-visible {
  outline: 2px solid #87a4b0;
  outline-offset: 2px;
}

.order-attachment-launch-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #d8d4e2;
  border-radius: 8px;
  background: #fff;
  color: #77718c;
}

.order-attachment-launch-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.order-attachment-launch-copy strong,
.order-attachment-launch-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-attachment-launch-copy strong {
  font-size: 13px;
}

.order-attachment-launch-copy small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.order-attachment-launch-count {
  display: grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #667a82;
  font-size: 11px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px #d8e2e4;
}

.order-attachment-launch-button > .fa-chevron-right {
  color: #91a2a8;
  font-size: 11px;
}

.action-modal-card.order-attachments-card {
  display: flex;
  width: min(1080px, calc(100vw - 48px));
  min-height: 0;
  flex-direction: column;
  max-height: calc(100dvh - 48px);
}

.order-attachments-header {
  flex: 0 0 auto;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 248, 0.98)),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(183, 179, 201, 0.08) 34px 35px);
}

.order-attachments-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.order-attachments-heading-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #d8d4e2;
  border-radius: 8px;
  background: #fff;
  color: #78728c;
  box-shadow: 0 8px 20px rgba(57, 53, 70, 0.08);
}

.order-attachments-heading > div {
  min-width: 0;
}

.order-attachments-heading h2,
.order-attachments-heading p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-attachments-heading h2 {
  margin: 1px 0 2px;
  font-size: 25px;
}

.order-attachments-heading p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.action-modal-body.order-attachment-library {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  max-height: none;
  overflow: hidden;
  padding: 18px;
  background: #f6f8f8;
}

.order-attachment-controls {
  display: grid;
  min-width: 0;
  gap: 9px;
}

.order-attachment-filter-row {
  display: flex;
  min-width: 0;
  align-items: stretch;
  gap: 8px;
}

.order-attachment-filters {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 50px;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid #dce4e5;
  border-radius: 8px;
  background: #fff;
  scrollbar-width: none;
}

.order-attachment-select-visible {
  display: inline-flex;
  min-width: 130px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #d7e0e2;
  border-radius: 8px;
  background: #fff;
  color: #53656c;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.order-attachment-select-visible:hover {
  border-color: #afc0c4;
  background: #f9fbfb;
}

.order-attachment-select-visible:has(input:focus-visible) {
  outline: 2px solid #87a4b0;
  outline-offset: 1px;
}

.order-attachment-select-visible:has(input:checked),
.order-attachment-select-visible:has(input:indeterminate) {
  border-color: #a9bcc1;
  background: #edf3f3;
}

.order-attachment-select-visible:has(input:disabled) {
  cursor: default;
  opacity: 0.48;
}

.order-attachment-select-visible input,
.order-attachment-card-select input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.order-attachment-check {
  display: grid;
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #c8d4d7;
  border-radius: 6px;
  background: #fff;
  color: transparent;
  font-size: 9px;
  box-shadow: 0 2px 6px rgba(44, 52, 56, 0.08);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.order-attachment-select-visible input:checked + .order-attachment-check,
.order-attachment-select-visible input:indeterminate + .order-attachment-check,
.order-attachment-card-select input:checked + .order-attachment-check {
  border-color: #6f8991;
  background: #6f8991;
  color: #fff;
}

.order-attachment-select-visible input:indeterminate + .order-attachment-check i {
  display: none;
}

.order-attachment-select-visible input:indeterminate + .order-attachment-check::after {
  width: 9px;
  height: 2px;
  border-radius: 999px;
  background: #fff;
  content: "";
}

.order-attachment-selection-bar {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 8px 7px 13px;
  border: 1px solid #ccdadd;
  border-radius: 8px;
  background: #edf3f3;
  box-shadow: 0 8px 22px rgba(45, 55, 59, 0.07);
  animation: attachment-selection-in 170ms ease-out both;
}

@keyframes attachment-selection-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

.order-attachment-selection-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #53666d;
  font-size: 11px;
  font-weight: 900;
}

.order-attachment-selection-count i {
  color: #718b93;
}

.order-attachment-selection-count strong {
  display: grid;
  min-width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #40535a;
  box-shadow: inset 0 0 0 1px #cad7da;
}

.order-attachment-selection-bar > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.order-attachment-selection-bar .button {
  min-height: 34px;
}

.order-attachment-selection-bar .icon-button {
  width: 34px;
  height: 34px;
}

.order-attachment-action-notice {
  margin: 0;
  padding: 8px 10px;
  border-left: 3px solid #8fa9b0;
  border-radius: 0 6px 6px 0;
  background: #f2f7f7;
  color: #53666d;
  font-size: 10px;
  font-weight: 800;
}

.order-attachment-action-notice.is-error {
  border-left-color: #c8878d;
  background: #fff2f3;
  color: #89545a;
}

.order-attachment-filters::-webkit-scrollbar {
  display: none;
}

.order-attachment-filters button {
  display: inline-flex;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #6a777d;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.order-attachment-filters button strong {
  display: grid;
  min-width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 50%;
  background: #edf1f1;
  color: #66757a;
  font-size: 9px;
}

.order-attachment-filters button.is-active {
  border-color: #d5dfe1;
  background: #edf3f3;
  color: #35484f;
  box-shadow: 0 5px 14px rgba(46, 55, 59, 0.08);
}

.order-attachment-filters button.is-active strong {
  background: #fff;
  color: #596e76;
}

.order-attachment-filters button:focus-visible {
  outline: 2px solid #87a4b0;
  outline-offset: 1px;
}

.order-attachment-results {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
  scrollbar-color: #b9c6c9 transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.order-attachment-results::-webkit-scrollbar {
  width: 8px;
}

.order-attachment-results::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #b9c6c9;
  background-clip: padding-box;
}

.order-attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.order-attachment-card {
  position: relative;
  display: grid;
  min-width: 0;
  align-content: start;
  overflow: hidden;
  border: 1px solid #dbe3e4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(39, 47, 51, 0.06);
  animation: attachment-card-in 0.2s ease-out both;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.order-attachment-card.is-selected {
  border-color: #819da5;
  box-shadow: 0 0 0 2px rgba(129, 157, 165, 0.2), 0 13px 30px rgba(39, 47, 51, 0.12);
  transform: translateY(-1px);
}

.order-attachment-card-select {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(35, 42, 46, 0.2);
  backdrop-filter: blur(6px);
}

.order-attachment-card-select .order-attachment-check {
  width: 23px;
  height: 23px;
  border-radius: 50%;
}

.order-attachment-card-select:has(input:focus-visible) {
  outline: 2px solid #78969f;
  outline-offset: 2px;
}

@keyframes attachment-card-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.order-attachment-media {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 3;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #e1e7e8;
  border-radius: 0;
  background: linear-gradient(135deg, #edf2f2, #f5f2f7);
  color: #707d83;
  text-decoration: none;
  cursor: pointer;
}

.order-attachment-media.is-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.18s ease, transform 0.22s ease;
}

.order-attachment-media.is-image:hover img,
.order-attachment-media.is-image:focus-visible img {
  filter: brightness(0.92);
  transform: scale(1.025);
}

.order-attachment-media:focus-visible {
  outline: 2px solid #87a4b0;
  outline-offset: -3px;
}

.order-attachment-zoom {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(36, 41, 45, 0.76);
  color: #fff;
  font-size: 10px;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.order-attachment-media:hover .order-attachment-zoom,
.order-attachment-media:focus-visible .order-attachment-zoom {
  opacity: 1;
  transform: translateY(0);
}

.order-attachment-media.is-file {
  align-content: center;
  gap: 8px;
}

.order-attachment-file-symbol {
  position: relative;
  display: grid;
  width: 66px;
  height: 72px;
  place-items: center;
  color: #7d8990;
}

.order-attachment-file-symbol > i {
  font-size: 48px;
  filter: drop-shadow(0 7px 7px rgba(42, 50, 54, 0.1));
}

.order-attachment-file-symbol > small {
  position: absolute;
  right: -3px;
  bottom: 5px;
  max-width: 46px;
  overflow: hidden;
  padding: 3px 5px;
  border: 2px solid #f1f4f5;
  border-radius: 5px;
  background: #667b82;
  color: #fff;
  font-size: 7px;
  font-weight: 900;
  text-overflow: ellipsis;
}

.order-attachment-media.is-file > span {
  font-size: 10px;
  font-weight: 900;
}

.order-attachment-media.is-file.is-photoshop .order-attachment-file-symbol { color: #4d86a3; }
.order-attachment-media.is-file.is-artwork .order-attachment-file-symbol { color: #8a7d9c; }
.order-attachment-media.is-file.is-audio .order-attachment-file-symbol { color: #688d82; }
.order-attachment-media.is-file.is-video .order-attachment-file-symbol { color: #747e99; }
.order-attachment-media.is-file.is-pdf .order-attachment-file-symbol { color: #a85f69; }
.order-attachment-media.is-file.is-archive .order-attachment-file-symbol { color: #927d68; }
.order-attachment-media.is-file.is-document .order-attachment-file-symbol { color: #62819d; }
.order-attachment-media.is-file.is-spreadsheet .order-attachment-file-symbol { color: #63866f; }
.order-attachment-media.is-file.is-presentation .order-attachment-file-symbol { color: #a27765; }
.order-attachment-media.is-file.is-code .order-attachment-file-symbol { color: #6e7088; }
.order-attachment-media.is-file.is-font .order-attachment-file-symbol { color: #766c80; }

.order-attachment-card-body {
  display: grid;
  min-width: 0;
  gap: 8px;
  padding: 11px;
}

.order-attachment-badges {
  display: flex;
  min-height: 20px;
  flex-wrap: wrap;
  gap: 5px;
}

.order-attachment-badges span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.order-attachment-badges .is-chat {
  background: #edf3f4;
  color: #557079;
}

.order-attachment-badges .is-delivery {
  background: #edf4ef;
  color: #527061;
}

.order-attachment-badges .is-reference {
  background: #f2eff6;
  color: #716984;
}

.order-attachment-name-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.order-attachment-name-row strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-attachment-name-row a {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #dce4e5;
  border-radius: 50%;
  background: #f8fafa;
  color: #63767d;
  text-decoration: none;
  font-size: 9px;
}

.order-attachment-name-row a:hover,
.order-attachment-name-row a:focus-visible {
  border-color: #aebfc4;
  background: #edf3f3;
}

.order-attachment-name-row a:focus-visible {
  outline: 2px solid #87a4b0;
  outline-offset: 1px;
}

.order-attachment-card-body > p {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  color: #8a969a;
  font-size: 9px;
  font-weight: 800;
}

.order-attachment-empty {
  display: grid;
  min-height: 240px;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 28px;
  border: 1px dashed #ccd8da;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  text-align: center;
}

.order-attachment-empty > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: #edf2f2;
  color: #7c9097;
  font-size: 18px;
}

.order-attachment-empty strong {
  color: var(--ink);
  font-size: 15px;
}

.order-attachment-empty p {
  margin: 0;
  font-size: 11px;
}

.download-preparing-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(25, 29, 32, 0.48);
  backdrop-filter: blur(10px);
}

.download-preparing-overlay.is-open {
  display: grid;
}

.download-preparing-card {
  display: grid;
  width: min(440px, calc(100vw - 32px));
  justify-items: center;
  gap: 9px;
  padding: 30px;
  border: 1px solid #d8e1e2;
  border-radius: 8px;
  background: #fff;
  text-align: center;
  box-shadow: 0 30px 90px rgba(31, 36, 39, 0.28);
  animation: download-preparing-in 190ms ease-out both;
}

@keyframes download-preparing-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.download-preparing-icon {
  position: relative;
  display: grid;
  width: 62px;
  height: 62px;
  margin-bottom: 3px;
  place-items: center;
  border: 1px solid #ccdadd;
  border-radius: 50%;
  background: #edf4f4;
  color: #66828a;
  font-size: 23px;
}

.download-preparing-icon::after {
  position: absolute;
  inset: -5px;
  border: 2px solid transparent;
  border-top-color: #8da7ae;
  border-radius: 50%;
  content: "";
  animation: download-preparing-spin 900ms linear infinite;
}

@keyframes download-preparing-spin {
  to { transform: rotate(360deg); }
}

.download-preparing-card h2 {
  margin: 0;
  font-size: 27px;
}

.download-preparing-card > p:not(.eyebrow) {
  max-width: 330px;
  margin: 0;
  color: #748187;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.download-preparing-progress {
  width: 100%;
  height: 6px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ecee;
}

.download-preparing-progress span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: #7f9ba3;
  animation: download-preparing-slide 1s ease-in-out infinite;
}

@keyframes download-preparing-slide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(340%); }
}

.download-preparing-overlay.is-error .download-preparing-icon {
  border-color: #e4c8cb;
  background: #fff1f2;
  color: #ad6970;
}

.download-preparing-overlay.is-error .download-preparing-icon::after {
  display: none;
}

.download-preparing-card > .button {
  min-width: 120px;
  margin-top: 9px;
}

.site-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 130;
  max-width: min(360px, calc(100vw - 32px));
  padding: 11px 14px;
  border: 1px solid #cbd9dc;
  border-radius: 8px;
  background: #263136;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  opacity: 0;
  transform: translateY(8px);
  box-shadow: 0 14px 38px rgba(32, 39, 42, 0.24);
  transition: opacity 180ms ease, transform 180ms ease;
}

.site-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 700px) {
  .action-modal-card.order-attachments-card {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .order-attachments-heading-icon {
    width: 38px;
    height: 38px;
  }

  .order-attachments-heading h2 {
    font-size: 20px;
  }

  .order-attachments-heading p:last-child {
    max-width: calc(100vw - 150px);
  }

  .action-modal-body.order-attachment-library {
    gap: 12px;
    padding: 12px;
  }

  .order-attachment-filter-row {
    align-items: stretch;
    flex-direction: column;
  }

  .order-attachment-select-visible {
    min-height: 39px;
  }

  .order-attachment-selection-bar {
    align-items: stretch;
    flex-direction: column;
    padding: 9px;
  }

  .order-attachment-selection-bar > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  }

  .order-attachment-selection-bar .button {
    width: 100%;
    padding: 8px;
  }

  .order-attachment-filters {
    margin: 0 -1px;
  }

  .order-attachment-filters button {
    min-height: 36px;
    padding: 0 8px;
  }

  .order-attachment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .order-attachment-card-body {
    gap: 6px;
    padding: 8px;
  }

  .order-attachment-badges span {
    padding: 3px 5px;
    font-size: 7px;
  }

  .order-attachment-name-row strong {
    font-size: 10px;
  }

  .order-attachment-name-row a {
    width: 26px;
    height: 26px;
  }

  .order-attachment-zoom {
    opacity: 0.9;
    transform: none;
  }
}

@media (max-width: 380px) {
  .order-attachment-launch-copy small {
    display: none;
  }

  .order-attachment-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .order-attachment-card,
  .order-attachment-launch-button,
  .upload-preview-remove,
  .download-preparing-card,
  .download-preparing-icon::after,
  .download-preparing-progress span,
  .site-toast {
    animation: none;
    transition: none;
  }
}

/* Private attachment share */
.share-download-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 54px clamp(16px, 4vw, 36px) 90px;
}

.share-download-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 17px;
  padding: 0 2px 26px;
  border-bottom: 1px solid #dce3e4;
}

.share-download-mark {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid #ccdadd;
  border-radius: 8px;
  background: #edf4f4;
  color: #67828a;
  font-size: 24px;
  box-shadow: 0 12px 30px rgba(46, 56, 60, 0.1);
}

.share-download-hero > div {
  min-width: 0;
}

.share-download-hero h1 {
  margin: 3px 0 5px;
  overflow-wrap: anywhere;
  font-size: 52px;
  line-height: 1.04;
}

.share-download-hero > div > p:last-child {
  margin: 0;
  color: #748188;
  font-size: 12px;
  font-weight: 900;
}

.share-private-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid #d4dedb;
  border-radius: 7px;
  background: #f0f6f2;
  color: #557062;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.share-download-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  align-items: start;
  gap: 18px;
  padding-top: 22px;
}

.share-file-panel,
.share-security-panel,
.share-download-invalid-card {
  border: 1px solid #d8e1e2;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 52px rgba(40, 48, 52, 0.09);
}

.share-file-panel {
  min-width: 0;
  overflow: hidden;
}

.share-file-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid #dde4e5;
}

.share-file-panel-head h2 {
  margin: 2px 0 0;
  font-size: 26px;
}

.share-file-panel-head > span {
  color: #879397;
  font-size: 10px;
  font-weight: 900;
}

.share-file-list {
  display: grid;
  padding: 0 20px;
}

.share-folder-empty {
  display: flex;
  min-height: 170px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 30px 12px;
  text-align: left;
}

.share-folder-empty > span {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #d9e2e0;
  border-radius: 50%;
  background: #f2f6f4;
  color: #738981;
  font-size: 17px;
}

.share-folder-empty > div {
  display: grid;
  gap: 4px;
}

.share-folder-empty strong {
  color: #414b4f;
  font-size: 13px;
  font-weight: 900;
}

.share-folder-empty small {
  color: #818d91;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.5;
}

.share-download-button:disabled {
  cursor: default;
  opacity: 0.48;
  transform: none;
}

.share-file-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 11px 0;
  border-bottom: 1px solid #e2e7e8;
  transition: background 160ms ease, box-shadow 160ms ease;
}

.share-file-row:last-child {
  border-bottom: 0;
}

.share-file-row.is-unavailable {
  opacity: 0.58;
}

.share-file-row.is-selected {
  background: #f4f6f8;
  box-shadow: 10px 0 #f4f6f8, -10px 0 #f4f6f8;
}

.share-file-row.is-folder {
  cursor: pointer;
}

.share-file-row.is-folder:hover:not(.is-selected) {
  background: #f9fbfa;
  box-shadow: 10px 0 #f9fbfa, -10px 0 #f9fbfa;
}

.share-file-row.is-folder .share-file-icon {
  border-color: #d8e2df;
  background: #eef5f2;
  color: #5e786b;
}

.share-file-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #d8d4e2;
  border-radius: 8px;
  background: #f4f2f8;
  color: #756f88;
  font-size: 15px;
}

.share-file-main {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.share-file-row strong {
  overflow: hidden;
  color: #3f484d;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-file-row small {
  color: #8a969a;
  font-size: 9px;
  font-weight: 900;
}

.share-file-main:hover strong,
.share-file-main:focus-visible strong {
  color: #61756f;
}

.share-file-main:focus-visible {
  outline: 2px solid #9dabb5;
  outline-offset: 4px;
  border-radius: 4px;
}

.share-file-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #587264;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.share-file-row.is-unavailable .share-file-status {
  color: #9a6268;
}

.share-file-row.is-locked {
  border-color: #ddd9e7;
  background: linear-gradient(90deg, #fbfafc 0%, #f7f6fa 100%);
}

.share-file-row.is-locked:hover:not(.is-selected) {
  background: #f3f1f7;
  box-shadow: 10px 0 #f3f1f7, -10px 0 #f3f1f7;
}

.share-file-row.is-locked .share-file-icon {
  border-color: #d5cfe1;
  background: #efedf5;
  color: #706981;
}

.share-file-row.is-locked .share-file-status {
  color: #756d86;
}

.share-file-row.is-locked .share-row-select {
  cursor: not-allowed;
  opacity: 0.32;
}

.share-file-row.is-locked .share-file-download {
  border-color: #d5cfe1;
  background: #f3f1f7;
  color: #706981;
}

.share-file-row small.share-lock-hidden-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 13px;
  color: #7d7889;
  text-transform: uppercase;
}

.share-lock-hidden-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.share-lock-hidden-meta b {
  display: inline-block;
  width: 34px;
  height: 8px;
  border-radius: 2px;
  background: #aaa6b4;
  box-shadow: inset 0 0 0 1px rgba(84, 77, 99, 0.08);
  opacity: 0.72;
}

.share-lock-hidden-meta > span:last-child b {
  width: 46px;
}

.share-lock-card {
  width: min(470px, calc(100vw - 28px));
}

.share-lock-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
}

.share-lock-heading-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #d8d2e4;
  border-radius: 50%;
  background: #f1eef6;
  color: #706981;
}

.share-lock-progress {
  display: grid;
  gap: 9px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e4e1e9;
}

.share-lock-progress[hidden] {
  display: none;
}

.share-lock-progress > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.share-lock-progress > div span {
  color: #7b7785;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.share-lock-progress > div strong {
  color: #514b5d;
  font-size: 12px;
  font-weight: 950;
}

.share-lock-progress > span {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: #e9e6ed;
}

.share-lock-progress > span i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #858093;
  transition: width 220ms ease;
}

.share-lock-target {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.share-lock-target > span {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #dad5e3;
  border-radius: 8px;
  background: #f2f0f6;
  color: #746d83;
}

.share-lock-target > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.share-lock-target small {
  color: #8b8792;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.share-lock-target strong {
  overflow: hidden;
  color: #424a4e;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-lock-form > p:first-of-type {
  margin: 0;
  color: #68757a;
  font-size: 12px;
  line-height: 1.65;
}

.share-lock-password {
  position: relative;
}

.share-lock-password > i {
  position: absolute;
  top: 50%;
  left: 14px;
  color: #8a8498;
  transform: translateY(-50%);
  pointer-events: none;
}

.share-lock-password input {
  width: 100%;
  padding-left: 40px;
}

.share-lock-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.share-lock-form .share-download-notice {
  border: 1px solid #ead7d9;
  border-radius: 6px;
  padding: 10px 12px;
}

.share-lock-form .share-download-notice:not(.is-error) {
  border-color: #d3e1dc;
  background: #f1f7f4;
  color: #547063;
}

.share-file-download,
.share-browser-up {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #d8e1e3;
  border-radius: 50%;
  background: #f8fbfb;
  color: #687b82;
  font-size: 11px;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
}

.share-file-download:hover,
.share-browser-up:hover:not(:disabled) {
  border-color: #bacac6;
  background: #eef5f2;
  color: #4f6d5f;
  transform: translateY(-1px);
}

.share-file-download:focus-visible,
.share-browser-up:focus-visible {
  outline: 2px solid #9dabb5;
  outline-offset: 2px;
}

.share-browser-up:disabled,
.share-file-panel.is-busy .share-file-download {
  cursor: default;
  opacity: 0.42;
  transform: none;
}

.share-row-select,
.share-select-all {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #66757b;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
}

.share-row-select input,
.share-select-all input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.share-checkmark {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #cfd9db;
  border-radius: 6px;
  background: #fff;
  color: transparent;
  font-size: 8px;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.share-row-select input:checked + .share-checkmark,
.share-select-all input:checked + .share-checkmark,
.share-select-all input:indeterminate + .share-checkmark {
  border-color: #627b70;
  background: #627b70;
  color: #fff;
}

.share-select-all input:indeterminate + .share-checkmark i {
  display: none;
}

.share-select-all input:indeterminate + .share-checkmark::after {
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  content: '';
}

.share-row-select input:focus-visible + .share-checkmark,
.share-select-all input:focus-visible + .share-checkmark {
  box-shadow: 0 0 0 3px rgba(112, 135, 126, 0.18);
}

.share-browser-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid #e0e6e7;
  background: #fff;
}

.share-browser-breadcrumbs {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.share-browser-breadcrumbs > i {
  flex: 0 0 auto;
  color: #b2bcbf;
  font-size: 8px;
}

.share-browser-breadcrumbs button {
  display: inline-flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  max-width: 210px;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: #69787e;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.share-browser-breadcrumbs button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-browser-breadcrumbs button:hover:not(:disabled) {
  color: #4e6c5e;
}

.share-browser-breadcrumbs button:disabled {
  color: #3f4d52;
  cursor: default;
}

.share-browser-tools {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 20px;
  border-bottom: 1px solid #e0e6e7;
  background: #f9fbfb;
}

.share-selection-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.share-selection-actions[hidden] {
  display: none;
}

.share-selection-actions > span {
  color: #7d898d;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.share-selection-actions > span strong {
  color: #4d5d62;
}

.share-selection-actions .icon-button {
  width: 34px;
  height: 34px;
}

.share-download-summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
  padding: 16px 20px;
  border-bottom: 1px solid #dce4e5;
  background: #f7f9f9;
}

.share-download-summary > span {
  display: grid;
  gap: 1px;
}

.share-download-summary > span + span {
  padding-left: 30px;
  border-left: 1px solid #dce4e5;
}

.share-download-summary small {
  color: #899498;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.share-download-summary strong {
  color: #4b595f;
  font-size: 16px;
}

.share-download-button {
  min-width: 154px;
}

.share-browser-context {
  position: fixed;
  z-index: 1600;
  min-width: 190px;
  padding: 6px;
  border: 1px solid #d4ddde;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 18px 46px rgba(40, 48, 52, 0.2);
}

.share-browser-context[hidden] {
  display: none;
}

.share-browser-context button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #46545a;
  font-size: 10px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.share-browser-context button i {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 6px;
  background: #eef4f2;
  color: #5b7568;
  font-size: 9px;
}

.share-browser-context button:hover,
.share-browser-context button:focus-visible {
  outline: 0;
  background: #f1f5f4;
}

.share-download-notice {
  margin: 0;
  padding: 10px 20px;
  border-top: 1px solid #ead7d9;
  background: #fff3f4;
  color: #915a61;
  font-size: 10px;
  font-weight: 800;
}

.share-security-panel {
  display: grid;
  gap: 14px;
  padding: 22px;
}

.share-security-panel > span,
.share-download-invalid-card > span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid #d3dfdc;
  border-radius: 50%;
  background: #eef5f1;
  color: #5f796b;
  font-size: 19px;
}

.share-security-panel h2 {
  margin: -5px 0 5px;
  font-size: 23px;
  line-height: 1.15;
}

.share-security-panel > div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid #e1e7e7;
}

.share-security-panel > div > i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
  background: #eef3f4;
  color: #6d848c;
  font-size: 10px;
}

.share-security-panel > div > span {
  display: grid;
  gap: 2px;
}

.share-security-panel strong {
  color: #4d5a60;
  font-size: 11px;
}

.share-security-panel small {
  color: #899498;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
}

.share-security-download {
  display: flex;
  justify-content: center;
  padding-top: 16px;
  border-top: 1px solid #e1e7e7;
}

.share-security-download .share-download-button {
  width: 100%;
}

.share-download-invalid {
  display: grid;
  min-height: calc(100svh - 190px);
  place-items: center;
}

.share-download-invalid-card {
  display: grid;
  width: min(520px, 100%);
  justify-items: center;
  gap: 10px;
  padding: 38px;
  text-align: center;
}

.share-download-invalid-card h1 {
  margin: 0;
  font-size: 42px;
}

.share-download-invalid-card p:not(.eyebrow) {
  max-width: 360px;
  margin: 0 0 8px;
  color: #77858a;
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 780px) {
  .share-download-shell {
    padding-top: 32px;
  }

  .share-download-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .share-download-hero h1 {
    font-size: 42px;
  }

  .share-private-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .share-download-layout {
    grid-template-columns: 1fr;
  }

  .share-security-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .share-security-panel > span,
  .share-security-panel > .eyebrow,
  .share-security-panel > h2,
  .share-security-panel > .share-security-download {
    grid-column: 1 / -1;
  }

  .share-security-panel > div {
    grid-template-columns: 28px minmax(0, 1fr);
  }
}

@media (max-width: 540px) {
  .share-download-shell {
    padding: 26px 12px 64px;
  }

  .share-download-mark {
    width: 52px;
    height: 52px;
    font-size: 19px;
  }

  .share-download-hero h1 {
    font-size: 33px;
  }

  .share-file-panel-head,
  .share-download-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .share-file-panel-head > span {
    align-self: flex-start;
  }

  .share-file-list {
    padding: 0 14px;
  }

  .share-file-row {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 9px;
  }

  .share-row-select {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .share-file-icon {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .share-file-main {
    grid-column: 3;
    grid-row: 1;
  }

  .share-file-status {
    grid-column: 3;
    grid-row: 2;
  }

  .share-file-download {
    grid-column: 4;
    grid-row: 1 / 3;
  }

  .share-browser-nav,
  .share-browser-tools {
    padding-right: 14px;
    padding-left: 14px;
  }

  .share-browser-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .share-selection-actions {
    justify-content: space-between;
  }

  .share-selection-actions .button {
    flex: 1;
  }

  .share-download-summary > span + span {
    padding-top: 10px;
    padding-left: 0;
    border-top: 1px solid #dce4e5;
    border-left: 0;
  }

  .share-download-button {
    width: 100%;
  }

  .share-security-panel {
    grid-template-columns: 1fr;
  }

  .share-security-panel > span,
  .share-security-panel > .eyebrow,
  .share-security-panel > h2,
  .share-security-panel > .share-security-download {
    grid-column: auto;
  }
}

/* Order completion and completed records */
.status-pill.status-complete {
  border-color: #c9d9cf;
  background: #eef5f0;
  color: #4e6b59;
}

.order-meta .order-deadline.is-on-track,
.detail-list dd.is-on-track {
  color: #4e6f60;
}

.order-meta .order-deadline.is-overdue,
.detail-list dd.is-overdue {
  border-color: #ecd2d7;
  background: #fff5f6;
  color: #9b5360;
}

.order-meta .order-deadline.is-unscheduled,
.detail-list dd.is-unscheduled {
  color: #7e7a87;
}

.order-meta .order-price-meta {
  border-color: #ded9e8;
  background: #f8f6fb;
  color: #69627c;
}

.order-complete-button {
  border: 1px solid #b7ccc0;
  background: #eff6f2;
  color: #426052;
  box-shadow: 0 8px 22px rgba(61, 85, 72, 0.1);
}

.order-complete-button:hover:not(:disabled),
.order-complete-button:focus-visible:not(:disabled) {
  border-color: #8faf9e;
  background: #e6f1eb;
  color: #304e3f;
  transform: translateY(-1px);
}

.order-complete-button.client-confirm {
  border-color: #ccc6da;
  background: #f4f1f7;
  color: #655f78;
}

.order-complete-button:disabled {
  border-color: #dfe3e3;
  background: #f5f6f6;
  color: #9aa2a5;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.78;
}

.order-edit-form {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(190px, 1fr) minmax(150px, 0.8fr);
  gap: 13px;
  padding: 16px;
}

.order-edit-form > label {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  color: #5c696e;
  font-size: 11px;
  font-weight: 900;
}

.order-edit-form input,
.order-edit-form select,
.order-edit-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid #d5dfe1;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
}

.order-edit-form textarea {
  min-height: 126px;
  line-height: 1.55;
  resize: vertical;
}

.order-edit-form input:focus,
.order-edit-form select:focus,
.order-edit-form textarea:focus {
  border-color: #9eb3bd;
  outline: 0;
  box-shadow: 0 0 0 4px rgba(142, 168, 184, 0.12);
}

.order-private-notes,
.order-edit-actions,
.order-edit-form > .notice {
  grid-column: 1 / -1;
}

.order-edit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.order-edit-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7b8589;
  font-size: 10px;
  font-weight: 800;
}

.completion-confirm-card {
  width: min(590px, calc(100vw - 32px));
}

.completion-confirm-header,
.completion-confirm-heading {
  display: flex;
  align-items: center;
}

.completion-confirm-heading {
  min-width: 0;
  gap: 12px;
}

.completion-confirm-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #bfd3c7;
  border-radius: 50%;
  background: #edf6f0;
  color: #4d725d;
  box-shadow: 0 8px 20px rgba(61, 87, 72, 0.1);
}

.completion-confirm-body {
  display: grid;
  gap: 15px;
}

.completion-order-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dce3e4;
  border-radius: 8px;
  background: #f8fafa;
}

.completion-order-preview > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: #f0edf5;
  color: #726b86;
}

.completion-order-preview > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.completion-order-preview small,
.completion-order-preview p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.completion-order-preview strong {
  overflow: hidden;
  font-family: "Fraunces", Georgia, serif;
  font-size: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.completion-order-preview p {
  margin: 0;
}

.completion-warning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 13px;
  border: 1px solid #ead9dc;
  border-radius: 8px;
  background: #fff7f8;
  color: #77565d;
}

.completion-warning > i {
  margin-top: 3px;
  color: #a36672;
}

.completion-warning p {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.completion-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.completed-orders-shell,
.completed-detail-shell {
  max-width: 1280px;
  padding-top: 42px;
}

.completed-archive-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.completed-archive-summary article {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 9px 28px rgba(43, 50, 54, 0.06);
}

.completed-archive-summary article > span {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  background: #edf5f0;
  color: #587461;
}

.completed-archive-summary article:nth-child(2) > span {
  background: #eef5f8;
  color: #617d89;
}

.completed-archive-summary article:nth-child(3) > span {
  background: #f2eff6;
  color: #746d86;
}

.completed-archive-summary article > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.completed-archive-summary small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.completed-archive-summary strong {
  overflow: hidden;
  font-family: "Fraunces", Georgia, serif;
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.completed-order-list {
  display: grid;
  gap: 11px;
}

.completed-order-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid #dce4e1;
  border-left: 3px solid #9bb5a5;
  border-radius: 8px;
  background: linear-gradient(110deg, #f6faf7, #fff 38%);
  box-shadow: 0 11px 30px rgba(43, 51, 47, 0.07);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.completed-order-row:hover {
  border-color: #bfd0c5;
  box-shadow: 0 15px 38px rgba(43, 51, 47, 0.1);
  transform: translateY(-1px);
}

.completed-order-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #bfd2c5;
  border-radius: 50%;
  background: #fff;
  color: #55735f;
}

.completed-order-main {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.completed-order-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.completed-order-main h2 {
  overflow: hidden;
  margin: 0;
  font-size: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.completed-order-main > p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #6c797d;
  font-size: 12px;
  font-weight: 800;
}

.completed-order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.completed-order-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid #e0e6e5;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.86);
  color: #748084;
  font-size: 9px;
  font-weight: 900;
}

.completed-order-meta .is-early,
.completed-stat-grid .is-early strong {
  color: #4d705b;
}

.completed-order-meta .is-late,
.completed-stat-grid .is-late strong {
  color: #9b5360;
}

.completed-empty {
  display: grid;
  min-height: 360px;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 30px;
  border: 1px dashed #ccd8d3;
  border-radius: 8px;
  background: #fbfdfc;
  text-align: center;
}

.completed-empty > span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background: #edf5f0;
  color: #5f7b68;
  font-size: 21px;
}

.completed-empty h2,
.completed-empty p {
  margin: 0;
}

.completed-empty p {
  max-width: 440px;
  color: var(--muted);
  font-size: 13px;
}

.completed-seal-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  margin: -4px 0 15px;
  padding: 17px 19px;
  border: 1px solid #cfded4;
  border-radius: 8px;
  background: linear-gradient(110deg, #edf6f0, #fff 55%, #f5f2f8);
  box-shadow: 0 12px 34px rgba(46, 57, 50, 0.07);
}

.completed-seal {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid #b8cebf;
  border-radius: 50%;
  background: #fff;
  color: #53725e;
  font-size: 18px;
  box-shadow: 0 8px 22px rgba(60, 86, 70, 0.1);
}

.completed-seal-band h2,
.completed-seal-band p {
  margin: 0;
}

.completed-seal-band h2 {
  margin: 2px 0;
  font-size: 25px;
}

.completed-seal-band > div > p:last-child {
  color: var(--muted);
  font-size: 12px;
}

.completed-readonly-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid #d8d3e2;
  border-radius: 7px;
  background: #fff;
  color: #6c667e;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.completed-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.completed-stat-grid article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.completed-stat-grid article > span {
  grid-row: 1 / 3;
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border-radius: 8px;
  background: #f1f4f4;
  color: #708187;
}

.completed-stat-grid small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.completed-stat-grid strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.completed-detail-grid {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.completed-record-index,
.completed-record-body {
  border-top: 3px solid #b9d0c0;
}

.completed-record-index {
  display: grid;
  gap: 14px;
}

.completed-record-body {
  display: grid;
  gap: 20px;
  padding: 25px;
}

.completed-record-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.completed-record-header h2,
.completed-record-header p {
  margin: 0;
}

.completed-record-header h2 {
  margin: 2px 0 5px;
  font-size: 26px;
}

.completed-record-header > div > p:last-child {
  max-width: 620px;
  color: var(--muted);
  font-size: 12px;
}

.completed-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #e1e7e5;
  border-bottom: 1px solid #e1e7e5;
}

.completed-timeline > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 13px 10px;
  border-right: 1px solid #e1e7e5;
}

.completed-timeline > div:last-child {
  border-right: 0;
}

.completed-timeline > div > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: #edf2f2;
  color: #718188;
  font-size: 10px;
}

.completed-timeline .is-complete > span {
  background: #e8f2eb;
  color: #53725e;
}

.completed-timeline p {
  display: grid;
  min-width: 0;
  gap: 2px;
  margin: 0;
}

.completed-timeline small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.completed-timeline strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.completed-record-section {
  display: grid;
  gap: 13px;
  padding-top: 2px;
}

.completed-record-section + .completed-record-section {
  padding-top: 19px;
  border-top: 1px solid #e0e6e5;
}

.completed-section-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.completed-section-title > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  background: #edf3f3;
  color: #657b83;
}

.completed-section-title small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.completed-section-title h3 {
  margin: 1px 0 0;
  font-size: 20px;
}

.completed-section-title > strong {
  display: grid;
  min-width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 50%;
  background: #f1f4f4;
  color: #6f7d81;
  font-size: 10px;
}

.completed-deliveries .delivery-block {
  background: #fbfdfc;
}

.completed-revision-list {
  display: grid;
  gap: 10px;
}

.completed-revision-list article {
  display: grid;
  gap: 9px;
  padding: 13px 0;
  border-bottom: 1px solid #e4e8e8;
}

.completed-revision-list article:last-child {
  border-bottom: 0;
}

.completed-revision-list article > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #59676c;
  font-size: 10px;
  font-weight: 900;
}

.completed-revision-list time {
  color: var(--muted);
  font-weight: 700;
}

.completed-revision-list p,
.completed-private-notes > p,
.completed-empty-line {
  margin: 0;
  color: #647176;
  font-size: 12px;
  line-height: 1.6;
}

.completed-private-notes > p {
  padding: 13px;
  border-left: 3px solid #c7c1d7;
  background: #f8f6fa;
  color: #5f596d;
}

.completed-chat-launch {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border: 1px solid #d6e0e2;
  border-radius: 8px;
  background: linear-gradient(110deg, #f1f6f7, #fff);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.completed-chat-launch:hover,
.completed-chat-launch:focus-visible {
  border-color: #aabfc5;
  box-shadow: 0 12px 28px rgba(45, 56, 61, 0.09);
  transform: translateY(-1px);
}

.completed-chat-launch > span:first-child {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  color: #637d87;
  box-shadow: inset 0 0 0 1px #d8e2e4;
}

.completed-chat-launch > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.completed-chat-launch small,
.completed-chat-launch p {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.completed-chat-launch strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.completed-chat-launch p {
  margin: 0;
}

.completed-chat-launch > i {
  color: #8ca0a7;
  font-size: 11px;
}

.chat-readonly-notice {
  grid-area: form;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 67px;
  padding: 12px 18px;
  border-top: 1px solid #d9e2df;
  background: linear-gradient(100deg, #edf5f0, #f7f5f9);
}

.chat-readonly-notice > span {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #5e7867;
  box-shadow: inset 0 0 0 1px #cbdad0;
}

.chat-readonly-notice > div {
  display: grid;
  gap: 1px;
}

.chat-readonly-notice strong {
  color: #42554a;
  font-size: 12px;
}

.chat-readonly-notice small {
  color: #718078;
  font-size: 10px;
  font-weight: 700;
}

.chat-drawer.is-read-only .chat-heading-icon {
  border-color: #cbdad0;
  background: #edf5f0;
  color: #5e7867;
}

.chat-drawer.is-read-only .messages {
  background: linear-gradient(180deg, #f6f8f7, #f0f4f2);
}

.chat-drawer.is-read-only .message-wrap.is-order-completed-event .message {
  border-color: #c7d9cd;
  background: #f1f7f3;
  color: #28372f;
  box-shadow: 0 10px 26px rgba(60, 84, 69, 0.09);
}

.chat-drawer.is-read-only .message-wrap.is-order-completed-event .message strong {
  color: #526b5d;
}

.chat-drawer.is-read-only .message-wrap.is-order-completed-event .message time {
  color: #718078;
}

.chat-drawer.is-read-only .message-wrap.is-order-completed-event .message-receipt {
  border-color: #c2d2c8;
  background: #fff;
  color: #50665a;
}

@media (max-width: 960px) {
  .order-edit-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-edit-form > label:nth-of-type(3) {
    grid-column: 1 / -1;
  }

  .completed-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .completed-detail-grid {
    grid-template-columns: 1fr;
  }

  .completed-record-index {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 0.7fr);
  }

  .completed-record-index .order-side-title,
  .completed-record-index .status-pill {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .order-top-actions {
    width: 100%;
  }

  .order-top-actions .button {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
  }

  .order-complete-button {
    flex-basis: 100% !important;
  }

  .order-edit-form,
  .completed-archive-summary,
  .completed-stat-grid,
  .completed-record-index {
    grid-template-columns: 1fr;
  }

  .order-edit-form > label:nth-of-type(3),
  .completed-record-index .order-side-title,
  .completed-record-index .status-pill {
    grid-column: auto;
  }

  .order-edit-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .order-edit-actions .button {
    width: 100%;
  }

  .completion-confirm-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .completion-confirm-actions .button {
    width: 100%;
  }

  .completed-order-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .completed-order-row > .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .completed-seal-band {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .completed-readonly-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .completed-record-header {
    align-items: start;
    flex-direction: column;
  }

  .completed-timeline {
    grid-template-columns: 1fr;
  }

  .completed-timeline > div {
    border-right: 0;
    border-bottom: 1px solid #e1e7e5;
  }

  .completed-timeline > div:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 430px) {
  .completed-orders-shell,
  .completed-detail-shell {
    padding-top: 28px;
  }

  .completed-order-row {
    grid-template-columns: 1fr;
  }

  .completed-order-mark {
    width: 37px;
    height: 37px;
  }

  .completed-order-row > .button {
    grid-column: auto;
  }

  .completed-seal-band {
    grid-template-columns: 1fr;
  }

  .completed-seal {
    width: 44px;
    height: 44px;
  }

  .completed-readonly-badge {
    grid-column: auto;
  }

  .chat-readonly-notice {
    justify-content: flex-start;
    padding: 10px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .completed-order-row,
  .completed-chat-launch,
  .order-complete-button {
    transition: none;
  }
}

/* Studio analytics */
.analytics-shell {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 42px clamp(18px, 3vw, 36px) 86px;
}

.analytics-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
}

.analytics-head > div:first-child {
  min-width: 0;
}

.analytics-head h1 {
  margin: 3px 0 0;
  font-size: 58px;
  line-height: 1;
}

.analytics-head > div:first-child > p:not(.eyebrow) {
  max-width: 680px;
  margin: 11px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.analytics-head-meta {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: 7px;
  padding-bottom: 3px;
  color: #6c7a80;
}

.analytics-head-meta span,
.analytics-head-meta small {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.analytics-head-meta span {
  color: #4d5a60;
  font-size: 12px;
  font-weight: 900;
}

.analytics-head-meta small {
  font-size: 10px;
  font-weight: 800;
}

.analytics-filter-panel {
  display: grid;
  gap: 15px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid #dbe2e3;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 13px 34px rgba(45, 54, 58, 0.07);
}

.analytics-filter-topline {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.analytics-filter-topline > span {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  color: #59686e;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.analytics-period-tabs {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 3px;
  border: 1px solid #dde4e5;
  border-radius: 8px;
  background: #f5f7f7;
}

.analytics-period-tabs a,
.analytics-custom-state {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 6px;
  color: #758187;
  font-size: 10px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.analytics-period-tabs a:hover {
  color: #344147;
}

.analytics-period-tabs a.is-active,
.analytics-custom-state.is-active {
  background: #fff;
  color: #344147;
  box-shadow: 0 2px 8px rgba(45, 54, 58, 0.1);
}

.analytics-custom-state:not(.is-active) {
  display: none;
}

.analytics-filter-controls {
  display: flex;
  align-items: end;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #e4e9ea;
}

.analytics-scope-form,
.analytics-date-form {
  display: flex;
  align-items: end;
  gap: 9px;
  min-width: 0;
}

.analytics-date-form {
  margin-left: auto;
}

.analytics-scope-form label,
.analytics-date-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #6b787d;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.analytics-scope-form select,
.analytics-date-form input {
  min-height: 37px;
  padding: 8px 10px;
  border: 1px solid #d7dfe0;
  border-radius: 7px;
  background: #fbfcfc;
  color: #3e494e;
  font: 800 11px "Nunito", Arial, sans-serif;
}

.analytics-scope-form select {
  width: 160px;
}

.analytics-date-form input {
  width: 132px;
}

.analytics-filter-controls .button.small {
  min-height: 37px;
  white-space: nowrap;
}

.analytics-reset-filter,
.analytics-open-order {
  display: inline-grid;
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #d7dfe0;
  border-radius: 7px;
  background: #fff;
  color: #65747a;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.analytics-reset-filter:hover,
.analytics-open-order:hover {
  border-color: #aebdc1;
  color: #354147;
  box-shadow: 0 6px 16px rgba(45, 54, 58, 0.1);
  transform: translateY(-1px);
}

.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.analytics-kpi-card {
  display: grid;
  min-width: 0;
  min-height: 158px;
  align-content: space-between;
  gap: 12px;
  padding: 18px;
  border: 1px solid #dce3e4;
  border-top: 3px solid #8da6af;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 13px 34px rgba(44, 52, 56, 0.07);
}

.analytics-kpi-card.pipeline { border-top-color: #9a8fab; }
.analytics-kpi-card.requests { border-top-color: #c18a95; }
.analytics-kpi-card.orders { border-top-color: #82a08e; }

.analytics-kpi-top {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.analytics-kpi-top > span {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #d7e2e5;
  border-radius: 7px;
  background: #eef5f7;
  color: #66838e;
  font-size: 12px;
}

.analytics-kpi-card.pipeline .analytics-kpi-top > span { border-color: #ded9e8; background: #f4f1f8; color: #7f7392; }
.analytics-kpi-card.requests .analytics-kpi-top > span { border-color: #ead9dd; background: #fff3f5; color: #a76f7b; }
.analytics-kpi-card.orders .analytics-kpi-top > span { border-color: #d9e6dd; background: #eff6f1; color: #668775; }

.analytics-kpi-top small {
  color: #718087;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.analytics-kpi-card > strong {
  min-width: 0;
  color: #2f383d;
  font-family: "Fraunces", Georgia, serif;
  font-size: 38px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.analytics-kpi-foot {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
  color: #7b888d;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.analytics-kpi-foot > span {
  min-width: 0;
}

.analytics-kpi-foot em {
  flex: 0 0 auto;
  color: #7b888d;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.analytics-delta.is-up { color: #517a69; }
.analytics-delta.is-down { color: #a36672; }
.analytics-delta.is-neutral { color: #818c90; }

.analytics-live-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid #dbe2e3;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 12px 30px rgba(45, 54, 58, 0.06);
}

.analytics-live-strip > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 76px;
  padding: 13px 14px;
  border-right: 1px solid #e2e7e8;
}

.analytics-live-strip > div:last-child {
  border-right: 0;
}

.analytics-live-strip > div > span {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: #f0f4f5;
  color: #71838a;
  font-size: 11px;
}

.analytics-live-strip .is-live > span { background: #eef6f1; color: #5b7f6c; }
.analytics-live-strip .needs-attention > span { background: #fff1f3; color: #aa6472; }

.analytics-live-strip p {
  display: grid;
  min-width: 0;
  gap: 3px;
  margin: 0;
}

.analytics-live-strip small {
  color: #819095;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.analytics-live-strip strong {
  color: #3d494f;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.analytics-live-strip .needs-attention strong {
  color: #9d5e6a;
}

.analytics-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.analytics-span-2 {
  grid-column: 1 / -1;
}

.analytics-panel,
.analytics-detail-section,
.analytics-table-panel {
  min-width: 0;
  border: 1px solid #dbe2e3;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 38px rgba(44, 52, 56, 0.07);
}

.analytics-panel {
  display: flex;
  min-height: 390px;
  flex-direction: column;
  padding: 18px;
}

.analytics-activity-panel {
  min-height: 410px;
}

.analytics-panel-head,
.analytics-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
}

.analytics-panel-head {
  padding-bottom: 14px;
  border-bottom: 1px solid #e2e7e8;
}

.analytics-panel-head > div {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.analytics-panel-head > div > div {
  min-width: 0;
}

.analytics-panel-head h2,
.analytics-section-head h2 {
  margin: 2px 0 0;
  color: #343d42;
  font-size: 23px;
  line-height: 1.1;
}

.analytics-panel-head small {
  display: block;
  margin-top: 4px;
  color: #889499;
  font-size: 9px;
  font-weight: 800;
}

.analytics-panel-icon {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #d9e3e5;
  border-radius: 8px;
  font-size: 13px;
}

.analytics-panel-icon.blue,
.analytics-detail-grid .blue { background: #eef5f7; color: #66838e; }
.analytics-panel-icon.sage,
.analytics-detail-grid .sage { background: #eff6f1; color: #638573; }
.analytics-panel-icon.lilac,
.analytics-detail-grid .lilac { background: #f4f1f8; color: #7e7191; }
.analytics-panel-icon.rose,
.analytics-detail-grid .rose { background: #fff2f4; color: #a86e7a; }
.analytics-panel-icon.charcoal,
.analytics-detail-grid .charcoal { background: #f0f2f3; color: #56656b; }
.analytics-detail-grid .gold { background: #faf6eb; color: #9b814a; }

.analytics-panel-total,
.analytics-section-head > span {
  flex: 0 0 auto;
  color: #78858a;
  font-size: 9px;
  font-weight: 900;
  text-align: right;
  text-transform: uppercase;
}

.analytics-chart-frame {
  position: relative;
  width: 100%;
  height: 285px;
  flex: 1 1 auto;
  min-height: 260px;
  padding-top: 14px;
}

.analytics-chart-frame.is-wide {
  height: 310px;
}

.analytics-chart-frame canvas {
  width: 100% !important;
  height: 100% !important;
}

.analytics-chart-frame.is-unavailable::after {
  position: absolute;
  inset: 14px 0 0;
  display: grid;
  place-items: center;
  background: #f8fafa;
  color: #7c898e;
  content: "Chart unavailable";
  font-size: 11px;
  font-weight: 900;
}

.analytics-empty-chart,
.analytics-table-empty {
  display: grid;
  flex: 1 1 auto;
  place-items: center;
  align-content: center;
  gap: 7px;
  min-height: 260px;
  color: #839095;
  text-align: center;
}

.analytics-empty-chart i,
.analytics-table-empty i {
  font-size: 23px;
  color: #a5b1b5;
}

.analytics-empty-chart strong,
.analytics-table-empty strong {
  color: #58666c;
  font-size: 13px;
}

.analytics-empty-chart span,
.analytics-table-empty span {
  max-width: 330px;
  font-size: 10px;
  font-weight: 700;
}

.analytics-metric-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 1 1 auto;
  gap: 0;
  margin: 12px 0 0;
}

.analytics-metric-list > div {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
  padding: 13px 14px;
  border-bottom: 1px solid #e3e8e9;
}

.analytics-metric-list > div:nth-child(odd) {
  border-right: 1px solid #e3e8e9;
}

.analytics-metric-list > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.analytics-metric-list dt {
  color: #839095;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.analytics-metric-list dd {
  margin: 0;
  color: #3f4b50;
  font-size: 15px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.analytics-detail-section,
.analytics-table-panel {
  margin-bottom: 18px;
  padding: 19px;
}

.analytics-section-head {
  padding-bottom: 15px;
  border-bottom: 1px solid #e2e7e8;
}

.analytics-detail-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  padding-top: 13px;
}

.analytics-detail-grid article {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 7px 14px;
  border-right: 1px solid #e2e7e8;
}

.analytics-detail-grid article:last-child {
  border-right: 0;
}

.analytics-detail-grid article > span {
  display: grid;
  width: 29px;
  height: 29px;
  margin-bottom: 3px;
  place-items: center;
  border-radius: 7px;
  font-size: 10px;
}

.analytics-detail-grid small {
  color: #829095;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.analytics-detail-grid strong {
  color: #39444a;
  font-size: 22px;
  line-height: 1;
}

.analytics-detail-grid em {
  color: #8b969a;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.analytics-table-scroll {
  width: 100%;
  margin-top: 4px;
  overflow-x: auto;
  scrollbar-color: #c2cccf transparent;
  scrollbar-width: thin;
}

.analytics-table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
  color: #4a565b;
  font-size: 10px;
}

.analytics-order-table {
  min-width: 1080px;
}

.analytics-table th {
  padding: 12px 13px;
  border-bottom: 1px solid #dfe5e6;
  color: #829095;
  font-size: 8px;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.analytics-table td {
  padding: 12px 13px;
  border-bottom: 1px solid #edf0f1;
  font-weight: 800;
  vertical-align: middle;
}

.analytics-table tbody tr:last-child td {
  border-bottom: 0;
}

.analytics-table tbody tr {
  transition: background 150ms ease;
}

.analytics-table tbody tr:hover {
  background: #fafcfc;
}

.analytics-client-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 170px;
}

.analytics-client-cell > i {
  display: grid;
  width: 33px;
  height: 33px;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--avatar, #a7b4ad);
  color: #fff;
  box-shadow: 0 0 0 1px #dbe2e3;
  font-family: "Fraunces", Georgia, serif;
  font-size: 13px;
  font-style: normal;
}

.analytics-client-cell > span,
.analytics-order-name {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.analytics-client-cell strong,
.analytics-order-name strong {
  color: #3e494e;
  font-size: 11px;
}

.analytics-client-cell small,
.analytics-order-name small {
  color: #8a9599;
  font-size: 8px;
  font-weight: 800;
}

.analytics-order-name {
  min-width: 190px;
}

.analytics-table-stat,
.analytics-order-timing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6f7e84;
  white-space: nowrap;
}

.analytics-table-stat i + i {
  margin-left: 5px;
}

.analytics-table-stat.needs-attention {
  color: #a2606d;
}

.analytics-table-empty {
  min-height: 190px;
}

@media (max-width: 1180px) {
  .analytics-filter-controls {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .analytics-date-form {
    margin-left: 0;
  }

  .analytics-live-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .analytics-live-strip > div:nth-child(3) {
    border-right: 0;
  }

  .analytics-live-strip > div:nth-child(-n + 3) {
    border-bottom: 1px solid #e2e7e8;
  }

  .analytics-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .analytics-detail-grid article:nth-child(3) {
    border-right: 0;
  }

  .analytics-detail-grid article:nth-child(-n + 3) {
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e7e8;
  }

  .analytics-detail-grid article:nth-child(n + 4) {
    padding-top: 16px;
  }
}

@media (max-width: 900px) {
  .analytics-head {
    align-items: start;
    flex-direction: column;
  }

  .analytics-head-meta {
    justify-items: start;
  }

  .analytics-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-chart-grid {
    grid-template-columns: 1fr;
  }

  .analytics-span-2 {
    grid-column: auto;
  }
}

@media (max-width: 700px) {
  .analytics-shell {
    padding: 30px 12px 68px;
  }

  .analytics-head {
    gap: 15px;
  }

  .analytics-head h1 {
    font-size: 43px;
  }

  .analytics-head-meta span,
  .analytics-head-meta small {
    white-space: normal;
  }

  .analytics-filter-panel {
    padding: 13px;
  }

  .analytics-filter-topline {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }

  .analytics-period-tabs {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .analytics-period-tabs::-webkit-scrollbar {
    display: none;
  }

  .analytics-period-tabs a,
  .analytics-custom-state {
    flex: 1 0 auto;
  }

  .analytics-scope-form,
  .analytics-date-form {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-scope-form select,
  .analytics-date-form input {
    width: 100%;
  }

  .analytics-scope-form .button,
  .analytics-date-form .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .analytics-reset-filter {
    align-self: end;
  }

  .analytics-live-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-live-strip > div,
  .analytics-live-strip > div:nth-child(3) {
    border-right: 1px solid #e2e7e8;
    border-bottom: 1px solid #e2e7e8;
  }

  .analytics-live-strip > div:nth-child(even) {
    border-right: 0;
  }

  .analytics-live-strip > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .analytics-panel,
  .analytics-detail-section,
  .analytics-table-panel {
    padding: 15px;
  }

  .analytics-panel-head,
  .analytics-section-head {
    align-items: start;
    flex-direction: column;
    gap: 10px;
  }

  .analytics-panel-total,
  .analytics-section-head > span {
    text-align: left;
  }

  .analytics-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-detail-grid article,
  .analytics-detail-grid article:nth-child(3) {
    padding: 14px 12px;
    border-right: 1px solid #e2e7e8;
    border-bottom: 1px solid #e2e7e8;
  }

  .analytics-detail-grid article:nth-child(even) {
    border-right: 0;
  }

  .analytics-detail-grid article:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (max-width: 480px) {
  .analytics-kpi-grid {
    grid-template-columns: 1fr;
  }

  .analytics-kpi-card {
    min-height: 145px;
  }

  .analytics-filter-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .analytics-scope-form,
  .analytics-date-form {
    grid-column: 1 / -1;
  }

  .analytics-reset-filter {
    grid-column: 2;
  }

  .analytics-live-strip > div {
    min-height: 72px;
    padding: 11px;
  }

  .analytics-live-strip > div > span {
    width: 28px;
    height: 28px;
  }

  .analytics-panel {
    min-height: 370px;
  }

  .analytics-chart-frame,
  .analytics-chart-frame.is-wide {
    height: 265px;
    min-height: 250px;
  }

  .analytics-metric-list {
    grid-template-columns: 1fr;
  }

  .analytics-metric-list > div,
  .analytics-metric-list > div:nth-child(odd),
  .analytics-metric-list > div:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid #e3e8e9;
  }

  .analytics-metric-list > div:last-child {
    border-bottom: 0;
  }

  .analytics-detail-grid {
    grid-template-columns: 1fr;
  }

  .analytics-detail-grid article,
  .analytics-detail-grid article:nth-child(3),
  .analytics-detail-grid article:nth-child(even),
  .analytics-detail-grid article:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid #e2e7e8;
  }

  .analytics-detail-grid article:last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .analytics-reset-filter,
  .analytics-open-order,
  .analytics-table tbody tr {
    transition: none;
  }
}

/* Lazy video attachments and custom in-page player */
.message-attachment.video,
.file-tile.video {
  position: relative;
  align-content: start;
  overflow: hidden;
  cursor: pointer;
}

.message-attachment.video {
  width: min(360px, 100%);
  grid-column: 1 / -1;
}

.message-video-frame {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: #202529;
  isolation: isolate;
}

.message-video-frame::after,
.order-attachment-media.is-video::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(13, 16, 18, 0.58));
}

.message-video-frame video,
.order-attachment-media.is-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #181c1f;
  opacity: 0;
  transition: opacity 0.22s ease, filter 0.2s ease, transform 0.24s ease;
}

.message-video-frame video.is-lazy-loaded,
.order-attachment-media.is-video video.is-lazy-loaded {
  opacity: 1;
}

.message-video-play {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 50%;
  background: rgba(27, 31, 34, 0.78);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.28);
  transform: translate(-50%, -50%);
  transition: background 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.message-video-play i {
  margin-left: 2px;
}

.message-video-frame > time,
.order-attachment-media.is-video > time {
  position: absolute;
  right: 7px;
  bottom: 6px;
  z-index: 2;
  padding: 3px 6px;
  border-radius: 5px;
  background: rgba(17, 20, 22, 0.72);
  color: rgba(255, 255, 255, 0.92);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  pointer-events: none;
  backdrop-filter: blur(7px);
}

.message-video-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-attachment.video:hover .message-video-play,
.message-attachment.video:focus-visible .message-video-play,
.file-tile.video:hover .message-video-play,
.file-tile.video:focus-visible .message-video-play,
.order-attachment-media.is-video:hover .message-video-play,
.order-attachment-media.is-video:focus-visible .message-video-play {
  background: rgba(116, 126, 153, 0.92);
  transform: translate(-50%, -50%) scale(1.08);
}

.message-attachment.video:hover video,
.message-attachment.video:focus-visible video,
.file-tile.video:hover video,
.file-tile.video:focus-visible video,
.order-attachment-media.is-video:hover video,
.order-attachment-media.is-video:focus-visible video {
  filter: brightness(0.88);
  transform: scale(1.018);
}

.message.mine .message-attachment.video {
  background: rgba(255, 255, 255, 0.1);
}

.order-attachment-media.is-video {
  background: #1b2023;
}

.order-attachment-media.is-video video {
  position: absolute;
  inset: 0;
}

.upload-preview-card.is-video {
  position: relative;
}

.upload-preview-card.is-video video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 7px;
  object-fit: cover;
  background: #202529;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.2s ease, filter 0.18s ease;
}

.upload-preview-card.is-video video.is-lazy-loaded {
  opacity: 1;
}

.upload-preview-card.is-video:hover video {
  filter: brightness(0.86);
}

.upload-video-preview-play {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 2;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(28, 32, 35, 0.78);
  color: #fff;
  font-size: 10px;
  transform: translate(-50%, -62%);
  pointer-events: none;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.24);
}

.upload-video-preview-play i {
  margin-left: 2px;
}

.chat-video-preview {
  position: fixed;
  inset: 0;
  z-index: 91;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: rgba(14, 17, 19, 0.92);
  backdrop-filter: blur(16px) saturate(0.76);
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

.chat-video-preview.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.chat-video-preview .chat-image-preview-toolbar {
  transform: translateY(-8px);
}

.chat-video-preview.is-open .chat-image-preview-toolbar {
  transform: translateY(0);
}

.chat-video-preview-icon {
  background: rgba(145, 165, 168, 0.17);
  color: #d7e2e2;
}

.chat-video-preview-stage {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  contain: layout paint;
  overscroll-behavior: contain;
}

.chat-video-preview-stage > video {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, calc(100vw - 34px));
  max-height: calc(100dvh - 112px);
  border-radius: 5px;
  object-fit: contain;
  background: #090b0c;
  box-shadow: 0 30px 96px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
}

.chat-video-preview.is-ready .chat-video-preview-stage > video {
  opacity: 1;
  transform: scale(1);
}

.chat-video-preview video::-webkit-media-controls {
  display: none !important;
}

.chat-video-preview-loader,
.chat-video-preview-error {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

.chat-video-preview-loader {
  display: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 25px;
}

.chat-video-preview.is-loading .chat-video-preview-loader {
  display: block;
}

.chat-video-preview-error {
  width: min(330px, calc(100vw - 44px));
  padding: 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(42, 46, 50, 0.86);
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.25);
}

.chat-video-preview-error i {
  display: block;
  margin-bottom: 9px;
  color: #cbd8d8;
  font-size: 23px;
}

.chat-video-preview-error span {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.chat-video-preview-big-play {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 2;
  display: none;
  min-width: 116px;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 8px;
  background: rgba(33, 38, 41, 0.84);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
  transform: translate(-50%, -50%);
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: background 0.18s ease, transform 0.18s ease;
}

.chat-video-preview.is-ready:not(.is-playing) .chat-video-preview-big-play {
  display: inline-flex;
}

.chat-video-preview-big-play:hover,
.chat-video-preview-big-play:focus-visible {
  background: rgba(108, 126, 130, 0.94);
  transform: translate(-50%, -50%) scale(1.035);
}

.chat-video-controls {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 3;
  display: grid;
  grid-template-columns: 38px minmax(90px, 1fr) auto 38px 92px 38px;
  width: min(920px, calc(100% - 28px));
  min-height: 52px;
  align-items: center;
  justify-self: center;
  gap: 9px;
  margin-inline: auto;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(28, 32, 35, 0.86);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  backdrop-filter: blur(16px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.chat-video-preview.is-ready .chat-video-controls {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.chat-video-preview.has-error .chat-video-controls,
.chat-video-preview.has-error .chat-video-preview-big-play {
  display: none;
}

.chat-video-controls > button {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.chat-video-controls > button:hover,
.chat-video-controls > button:focus-visible {
  background: rgba(207, 221, 221, 0.14);
  color: #e2ecec;
}

.chat-video-preview-big-play:focus-visible,
.chat-video-controls > button:focus-visible,
.chat-video-controls input:focus-visible {
  outline: 2px solid rgba(217, 230, 230, 0.9);
  outline-offset: 2px;
}

.chat-video-timeline,
.chat-video-volume {
  display: flex;
  min-width: 0;
  align-items: center;
}

.chat-video-controls input[type="range"] {
  width: 100%;
  height: 18px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.chat-video-controls input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, #afc2c4 var(--video-progress, var(--video-volume, 0%)), rgba(255, 255, 255, 0.2) var(--video-progress, var(--video-volume, 0%)));
}

.chat-video-controls input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
}

.chat-video-controls input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 4px;
  background: #afc2c4;
}

.chat-video-controls input[type="range"]::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  margin-top: -4.5px;
  border: 2px solid #2a3033;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: #edf4f4;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28);
}

.chat-video-controls input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 2px solid #2a3033;
  border-radius: 50%;
  background: #edf4f4;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28);
}

.chat-video-controls input[type="range"]:disabled {
  cursor: wait;
  opacity: 0.5;
}

.chat-video-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.74);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.chat-video-time > span {
  color: rgba(255, 255, 255, 0.32);
}

.chat-video-preview-stage:fullscreen {
  padding: 12px;
  border-radius: 0;
  background: #090b0c;
}

.chat-video-preview-stage:fullscreen > video {
  max-width: 100%;
  max-height: 100%;
}

@media (max-width: 640px) {
  .message-attachment.video {
    width: 100%;
  }

  .message-video-play {
    width: 40px;
    height: 40px;
  }

  .chat-video-preview {
    gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
  }

  .chat-video-preview .chat-image-preview-toolbar {
    min-height: 50px;
    padding: 5px 5px 5px 8px;
  }

  .chat-video-preview .chat-image-preview-title strong {
    max-width: calc(100vw - 190px);
  }

  .chat-video-preview .chat-image-preview-download {
    width: 40px;
    padding: 0;
  }

  .chat-video-preview .chat-image-preview-download span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .chat-video-preview-stage > video {
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 78px);
  }

  .chat-video-controls {
    right: 6px;
    bottom: max(6px, env(safe-area-inset-bottom));
    left: 6px;
    grid-template-columns: 36px minmax(60px, 1fr) auto 36px 36px;
    width: calc(100% - 12px);
    min-height: 48px;
    gap: 5px;
    padding: 5px 6px;
  }

  .chat-video-controls > button {
    width: 36px;
    height: 36px;
  }

  .chat-video-volume {
    display: none;
  }

  .chat-video-time {
    font-size: 9px;
  }

  .chat-video-preview-big-play {
    min-width: 50px;
    min-height: 50px;
    padding: 0;
    border-radius: 50%;
  }

  .chat-video-preview-big-play span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .message-video-frame video,
  .order-attachment-media.is-video video,
  .message-video-play,
  .upload-preview-card.is-video video,
  .chat-video-preview,
  .chat-video-preview .chat-image-preview-toolbar,
  .chat-video-preview-stage > video,
  .chat-video-preview-big-play,
  .chat-video-controls {
    transition: none;
  }
}

/* Chat file drop and clipboard attachment feedback */
.chat-panel {
  position: relative;
}

.chat-file-drop-overlay {
  position: absolute;
  inset: 9px;
  z-index: 30;
  display: grid;
  grid-template-columns: auto minmax(0, max-content);
  grid-template-areas:
    "icon title"
    "icon hint";
  align-content: center;
  justify-content: center;
  gap: 3px 13px;
  padding: 24px;
  border: 2px dashed #8fa8ac;
  border-radius: 7px;
  background: rgba(247, 250, 250, 0.95);
  color: #3f555b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.86), 0 20px 60px rgba(36, 45, 49, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.992);
  pointer-events: none;
  backdrop-filter: blur(12px) saturate(0.82);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}

.chat-drawer.is-file-dragging .chat-file-drop-overlay {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition-delay: 0s;
}

.chat-file-drop-icon {
  grid-area: icon;
  display: grid;
  width: 54px;
  height: 54px;
  align-self: center;
  place-items: center;
  border: 1px solid #bfd0d2;
  border-radius: 8px;
  background: #e7f0f0;
  color: #58777d;
  font-size: 21px;
  box-shadow: 0 9px 22px rgba(59, 78, 83, 0.11);
}

.chat-file-drop-overlay strong {
  grid-area: title;
  align-self: end;
  color: #35494e;
  font-size: 17px;
  font-weight: 900;
}

.chat-file-drop-overlay small {
  grid-area: hint;
  align-self: start;
  color: #71858a;
  font-size: 11px;
  font-weight: 800;
}

.chat-drawer[data-chat-mode="admin"] .chat-file-drop-overlay {
  border-color: #9ca3b1;
  background: rgba(247, 248, 250, 0.96);
}

.chat-attachment-status {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0 12px 9px;
  color: #55776e;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
}

.chat-attachment-status.is-error {
  color: #985665;
}

.chat-attachment-status[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .chat-file-drop-overlay {
    inset: 7px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "icon"
      "title"
      "hint";
    justify-items: center;
    gap: 8px;
    padding: 18px;
    text-align: center;
  }

  .chat-file-drop-icon {
    width: 50px;
    height: 50px;
    font-size: 19px;
  }

  .chat-file-drop-overlay strong {
    font-size: 15px;
  }

  .chat-file-drop-overlay small {
    max-width: 220px;
    line-height: 1.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-file-drop-overlay {
    transition: none;
  }
}

/* Bounded chat history */
.messages-shell {
  position: relative;
  grid-area: messages;
  min-height: 0;
  overflow: hidden;
}

.messages-shell .messages {
  width: 100%;
  height: 100%;
  min-height: 0;
  overscroll-behavior: contain;
  overflow-anchor: none;
}

.chat-history-loader {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 6;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid rgba(199, 212, 214, 0.94);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #65777d;
  box-shadow: 0 8px 22px rgba(39, 49, 53, 0.13);
  font-size: 10px;
  font-weight: 900;
  transform: translateX(-50%);
  pointer-events: none;
  backdrop-filter: blur(10px);
}

.chat-history-loader.is-newer {
  top: auto;
  bottom: 10px;
}

.chat-history-loader[hidden],
.chat-newest-jump[hidden] {
  display: none;
}

.chat-newest-jump {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 7;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid #cbd8da;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.97);
  color: #536970;
  box-shadow: 0 10px 28px rgba(38, 48, 52, 0.16);
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.chat-newest-jump:hover,
.chat-newest-jump:focus-visible {
  border-color: #9eb3b7;
  outline: 0;
  color: #344b52;
  box-shadow: 0 12px 32px rgba(38, 48, 52, 0.2);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .chat-newest-jump {
    right: 10px;
    bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-newest-jump {
    transition: none;
  }
}

/* Direct messages */
.message-hub {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 44;
  display: grid;
  justify-items: end;
}

.message-hub-launcher {
  position: relative;
  display: block;
  width: 58px;
  height: 58px;
  min-height: 58px;
  padding: 8px;
  border: 1px solid #ccd8da;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.97);
  color: #35474d;
  text-align: left;
  box-shadow: 0 17px 44px rgba(39, 49, 53, 0.17), 0 2px 8px rgba(49, 58, 62, 0.08);
  cursor: pointer;
  backdrop-filter: blur(18px);
  transition: width 0.24s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.22s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.message-hub-launcher:hover,
.message-hub-launcher:focus-visible,
.message-hub.is-open .message-hub-launcher {
  width: 222px;
  border-radius: 8px;
  border-color: #a9bec1;
  outline: 0;
  box-shadow: 0 20px 52px rgba(39, 49, 53, 0.2), 0 0 0 4px rgba(142, 168, 184, 0.12);
  transform: translateY(-1px);
}

.message-hub-launcher-icon,
.message-hub-heading > span,
.dm-search-heading > span {
  display: grid;
  place-items: center;
  border: 1px solid #d4e0e2;
  border-radius: 8px;
  background: linear-gradient(145deg, #edf4f5, #f4f0f6);
  color: #657f89;
}

.message-hub-launcher-icon {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 16px;
  transition: border-radius 0.2s ease;
}

.message-hub-launcher:hover .message-hub-launcher-icon,
.message-hub-launcher:focus-visible .message-hub-launcher-icon,
.message-hub.is-open .message-hub-launcher-icon {
  border-radius: 8px;
}

.message-hub-launcher-copy {
  position: absolute;
  top: 10px;
  right: 57px;
  left: 58px;
  display: grid;
  min-width: 0;
  gap: 2px;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.16s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.message-hub-launcher:hover .message-hub-launcher-copy,
.message-hub-launcher:focus-visible .message-hub-launcher-copy,
.message-hub.is-open .message-hub-launcher-copy {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.05s, 0.05s, 0s;
}

.message-hub-launcher-copy strong,
.message-hub-launcher-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-hub-launcher-copy strong {
  color: #303b40;
  font-size: 13px;
  font-weight: 900;
}

.message-hub-launcher-copy small {
  color: #7c8a8f;
  font-size: 10px;
  font-weight: 800;
}

.message-hub-unread {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  width: 14px;
  min-width: 14px;
  height: 14px;
  place-items: center;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #d95763;
  color: #fff;
  box-shadow: 0 4px 11px rgba(159, 50, 62, 0.28);
  font-size: 0;
}

.message-hub-unread[hidden] {
  display: none;
}

.message-hub-chevron {
  position: absolute;
  top: 50%;
  right: 12px;
  visibility: hidden;
  opacity: 0;
  color: #8b999e;
  font-size: 10px;
  transform: translateY(-50%) translateX(4px);
  transition: opacity 0.15s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.message-hub-launcher:hover .message-hub-chevron,
.message-hub-launcher:focus-visible .message-hub-chevron,
.message-hub.is-open .message-hub-chevron {
  visibility: visible;
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0.07s, 0.07s, 0s;
}

.message-hub.is-open .message-hub-chevron {
  transform: translateY(-50%) rotate(180deg);
}

.message-hub-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  display: grid;
  grid-template-rows: auto auto minmax(190px, 1fr);
  width: min(390px, calc(100vw - 36px));
  height: min(570px, calc(100dvh - 112px));
  overflow: hidden;
  border: 1px solid #cfdbdc;
  border-radius: 8px;
  background: #f8fafa;
  box-shadow: 0 28px 80px rgba(31, 39, 43, 0.24), 0 4px 14px rgba(46, 58, 62, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.985);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.message-hub.is-open .message-hub-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition-delay: 0s;
}

.message-hub-header,
.dm-search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 15px;
  border-bottom: 1px solid #dde5e6;
  background: rgba(255, 255, 255, 0.96);
}

.message-hub-heading,
.dm-search-heading {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.message-hub-heading > span,
.dm-search-heading > span {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  font-size: 14px;
}

.message-hub-heading > div,
.dm-search-heading > div {
  min-width: 0;
}

.message-hub-heading h2,
.dm-search-heading h2 {
  margin: 1px 0 0;
  font-size: 21px;
  letter-spacing: 0;
}

.message-hub-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid #e0e7e8;
  background: #f4f7f7;
}

.message-hub-filter,
.dm-search-input {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.message-hub-filter > i,
.dm-search-input > i {
  position: absolute;
  left: 12px;
  z-index: 1;
  color: #8a9a9f;
  font-size: 11px;
  pointer-events: none;
}

.message-hub-filter input,
.dm-search-input input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px 8px 33px;
  border: 1px solid #d8e2e3;
  border-radius: 7px;
  background: #fff;
  box-shadow: none;
  font-size: 12px;
}

.message-hub-filter input:focus,
.dm-search-input input:focus {
  border-color: #9db3b8;
  box-shadow: 0 0 0 4px rgba(142, 168, 184, 0.12);
}

.message-hub-add {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid #31373a;
  border-radius: 7px;
  background: #25292c;
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.message-hub-add:hover,
.message-hub-add:focus-visible {
  outline: 0;
  background: #111416;
  transform: translateY(-1px);
}

.message-hub-list {
  min-height: 0;
  padding: 5px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #c9d4d6 transparent;
  scrollbar-width: thin;
}

.message-hub-loading,
.message-hub-empty,
.dm-search-empty {
  display: grid;
  min-height: 170px;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 24px;
  color: #819096;
  text-align: center;
}

.message-hub-loading i,
.message-hub-empty > span,
.dm-search-empty > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #d8e2e3;
  border-radius: 8px;
  background: #fff;
  color: #7c939c;
}

.message-hub-empty strong,
.dm-search-empty strong {
  color: #4a5a60;
  font-size: 13px;
}

.message-hub-empty small,
.dm-search-empty small {
  max-width: 240px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
}

.message-hub-contact {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 66px;
  padding: 9px 13px;
  border: 0;
  border-bottom: 1px solid #e4eaeb;
  border-radius: 0;
  background: transparent;
  color: #39484e;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.message-hub-contact:last-child {
  border-bottom: 0;
}

.message-hub-contact:hover,
.message-hub-contact:focus-visible {
  outline: 0;
  background: #eef4f4;
  box-shadow: inset 3px 0 #91aeb4;
}

.message-hub-contact.has-unread {
  background: #fff7f8;
  box-shadow: inset 3px 0 #d9808a;
}

.message-hub-avatar,
.dm-search-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background: var(--dm-avatar, #a7b4ad);
  color: #fff;
  box-shadow: 0 5px 13px rgba(51, 62, 67, 0.16);
  font-family: "Fraunces", Georgia, serif;
  font-size: 14px;
  font-weight: 900;
}

.message-hub-contact-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.message-hub-contact-name,
.message-hub-contact-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-hub-contact-name {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #334248;
  font-size: 12px;
  font-weight: 900;
}

.message-hub-role,
.dm-search-role {
  flex: 0 0 auto;
  padding: 2px 5px;
  border: 1px solid #d9e3e4;
  border-radius: 4px;
  background: #f4f7f7;
  color: #75878d;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.message-hub-role.is-admin,
.dm-search-role.is-admin {
  border-color: #d9d6e4;
  background: #f2eff6;
  color: #766c87;
}

.message-hub-contact-preview {
  color: #839096;
  font-size: 10px;
  font-weight: 700;
}

.message-hub-contact-meta {
  display: grid;
  justify-items: end;
  gap: 7px;
  color: #96a2a6;
  font-size: 9px;
  font-weight: 800;
}

.message-hub-contact-dot {
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #de5966;
  box-shadow: 0 0 0 1px rgba(191, 58, 71, 0.15);
}

.message-hub-contact:not(.has-unread) .message-hub-contact-dot {
  display: none;
}

.dm-search-card {
  width: min(570px, calc(100vw - 40px));
  max-height: min(700px, calc(100dvh - 40px));
  border-radius: 8px;
}

.dm-search-body {
  display: grid;
  min-height: 300px;
  gap: 13px;
  padding: 15px;
}

.dm-search-input input {
  min-height: 46px;
  padding-right: 42px;
  font-size: 13px;
}

.dm-search-spinner {
  position: absolute;
  right: 14px;
  color: #7d9198;
  font-size: 12px;
}

.dm-search-spinner[hidden] {
  display: none;
}

.dm-search-results {
  min-height: 230px;
  max-height: min(430px, calc(100dvh - 230px));
  overflow-y: auto;
  border: 1px solid #dce4e5;
  border-radius: 8px;
  background: #fbfcfc;
  scrollbar-color: #c9d4d6 transparent;
  scrollbar-width: thin;
}

.dm-search-result {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 68px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #e4e9ea;
  border-radius: 0;
  background: transparent;
  color: #37474d;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease;
}

.dm-search-result:last-child {
  border-bottom: 0;
}

.dm-search-result:hover,
.dm-search-result:focus-visible {
  outline: 0;
  background: #eef4f4;
}

.dm-search-result-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.dm-search-result-copy strong,
.dm-search-result-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-search-result-copy strong {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}

.dm-search-result-copy small {
  color: #829097;
  font-size: 10px;
  font-weight: 700;
}

.dm-search-result-action {
  display: inline-flex;
  min-width: 68px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid #cedbdd;
  border-radius: 6px;
  background: #fff;
  color: #536970;
  font-size: 10px;
  font-weight: 900;
}

.dm-search-result.is-added .dm-search-result-action {
  border-color: #cbd9d3;
  background: #eef5f1;
  color: #527064;
}

.chat-drawer[data-chat-mode="dm"] .chat-heading-icon {
  border-color: #d8d5e2;
  background: linear-gradient(145deg, #f1eef5, #edf4f4);
  color: #756e86;
}

body:has(.message-hub) .drive-toast-region {
  bottom: 92px;
}

@media (max-width: 640px) {
  .message-hub {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .message-hub-launcher {
    width: 54px;
    height: 54px;
    min-height: 54px;
  }

  .message-hub-launcher:hover,
  .message-hub-launcher:focus-visible,
  .message-hub.is-open .message-hub-launcher {
    width: 204px;
  }

  .message-hub-launcher-icon {
    top: 6px;
    left: 6px;
  }

  .message-hub-launcher-copy {
    top: 8px;
    left: 56px;
  }

  .message-hub-panel {
    position: fixed;
    right: 8px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    width: calc(100vw - 16px);
    height: min(620px, calc(100dvh - 88px - env(safe-area-inset-bottom)));
    transform-origin: bottom center;
  }

  .message-hub-header {
    padding: 12px;
  }

  .message-hub-toolbar {
    padding: 8px;
  }

  .message-hub-contact {
    min-height: 64px;
    padding-inline: 11px;
  }

  .dm-search-modal {
    padding: 8px;
  }

  .dm-search-card {
    width: 100%;
    max-height: calc(100dvh - 16px);
  }

  .dm-search-header {
    padding: 12px;
  }

  .dm-search-body {
    min-height: 0;
    padding: 10px;
  }

  .dm-search-results {
    max-height: calc(100dvh - 190px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .message-hub-launcher,
  .message-hub-launcher-icon,
  .message-hub-launcher-copy,
  .message-hub-unread,
  .message-hub-panel,
  .message-hub-chevron,
  .message-hub-add,
  .message-hub-contact,
  .dm-search-result {
    transition: none;
  }
}

/* Compact admin collection filters and in-page pagination */
[data-admin-collection] .panel-title {
  margin-bottom: 12px;
}

.admin-collection-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) minmax(150px, 0.65fr) auto;
  align-items: end;
  gap: 9px;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #dfe7e8;
  border-radius: 8px;
  background: #f7f9f9;
}

.admin-product-toolbar {
  grid-template-columns: minmax(230px, 1.5fr) minmax(125px, 0.62fr) minmax(130px, 0.68fr) minmax(190px, 0.9fr) auto;
}

.admin-gallery-toolbar {
  grid-template-columns: minmax(230px, 1.45fr) minmax(145px, 0.78fr) minmax(130px, 0.66fr) minmax(125px, 0.62fr) auto;
}

.admin-filter-field,
.admin-price-filter label {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: #68777c;
  font-size: 10px;
  font-weight: 900;
}

.admin-filter-field > span:first-child,
.admin-price-filter legend,
.admin-price-filter label > span {
  overflow: hidden;
  letter-spacing: 0;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-filter-field input,
.admin-filter-field select,
.admin-price-filter input {
  width: 100%;
  height: 38px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid #d5dfe1;
  border-radius: 7px;
  outline: 0;
  background: #fff;
  color: #30383c;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.admin-filter-field input:focus,
.admin-filter-field select:focus,
.admin-price-filter input:focus {
  border-color: #8faeb6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(143, 174, 182, 0.15);
}

.admin-search-control {
  position: relative;
  display: block;
}

.admin-search-control > i {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 1;
  color: #8a999e;
  font-size: 12px;
  pointer-events: none;
  transform: translateY(-50%);
}

.admin-search-control input {
  padding-right: 12px;
  padding-left: 34px;
}

.admin-price-filter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
}

.admin-price-filter legend {
  grid-column: 1 / -1;
  margin-bottom: 5px;
  padding: 0;
  color: #68777c;
  font-size: 10px;
  font-weight: 900;
}

.admin-filter-reset {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  align-self: end;
  border-color: #d5dfe1;
  border-radius: 7px;
  background: #fff;
  color: #64767b;
}

.admin-filter-reset:not(.is-active) {
  color: #a5b0b4;
}

.admin-filter-reset:hover,
.admin-filter-reset:focus-visible {
  border-color: #adc1c5;
  background: #eef4f4;
  color: #455c62;
}

[data-admin-collection] [data-admin-list] {
  gap: 8px;
}

[data-admin-collection] .category-manage-row,
[data-admin-collection] .product-manage-row,
[data-admin-collection] .gallery-manage-row {
  min-height: 68px;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 8px;
  box-shadow: 0 7px 18px rgba(41, 46, 50, 0.045);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

[data-admin-collection] .category-manage-row:hover,
[data-admin-collection] .product-manage-row:hover,
[data-admin-collection] .gallery-manage-row:hover {
  border-color: #cbd9db;
  box-shadow: 0 9px 22px rgba(41, 46, 50, 0.075);
}

[data-admin-collection] .category-manage-row {
  grid-template-columns: 44px minmax(0, 1fr) auto;
}

[data-admin-collection] .category-manage-icon {
  width: 44px;
  height: 44px;
  border-radius: 7px;
  font-size: 17px;
}

[data-admin-collection] .product-manage-row {
  grid-template-columns: 80px minmax(0, 1fr) auto;
}

[data-admin-collection] .product-manage-row > img,
[data-admin-collection] .product-manage-placeholder {
  width: 80px;
  border-radius: 7px;
}

[data-admin-collection] .product-manage-placeholder {
  font-size: 19px;
}

[data-admin-collection] .gallery-manage-row {
  grid-template-columns: 64px minmax(0, 1fr) auto;
}

[data-admin-collection] .gallery-manage-row > img {
  width: 64px;
  border-radius: 7px;
}

[data-admin-collection] .gallery-manage-meta {
  gap: 3px;
}

[data-admin-collection] .gallery-manage-meta strong {
  font-size: 14px;
}

[data-admin-collection] .gallery-manage-meta > span {
  font-size: 11px;
}

[data-admin-collection] .gallery-manage-meta p {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 1px;
  font-size: 12px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

[data-admin-collection] .category-pill {
  gap: 5px;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 10px !important;
}

[data-admin-collection] .tag-row {
  flex-wrap: nowrap;
  gap: 5px;
  overflow: hidden;
}

[data-admin-collection] .tag-row > span {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 9px;
}

[data-admin-collection] .gallery-row-actions {
  flex-wrap: nowrap;
  gap: 6px;
}

[data-admin-collection] .gallery-row-actions .button.small {
  min-height: 32px;
  padding: 6px 9px;
  gap: 5px;
  font-size: 10px;
}

.admin-collection-empty {
  display: grid;
  min-height: 126px;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 22px;
  border: 1px dashed #d7e0e1;
  border-radius: 8px;
  background: #fafbfb;
  color: #738187;
  text-align: center;
}

.admin-collection-empty > i {
  margin-bottom: 3px;
  color: #91aab1;
  font-size: 22px;
}

.admin-collection-empty strong {
  color: #3e4a4e;
  font-size: 14px;
}

.admin-collection-empty span {
  font-size: 11px;
  font-weight: 700;
}

.admin-collection-footer {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid #e4e9ea;
}

.admin-collection-footer > span {
  color: #7a898e;
  font-size: 11px;
  font-weight: 850;
}

.admin-pagination {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.admin-pagination[hidden] {
  display: none;
}

.admin-page-button {
  display: inline-grid;
  width: 32px;
  min-width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid #d5dfe1;
  border-radius: 7px;
  background: #fff;
  color: #5d7076;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.admin-page-button:hover:not(:disabled),
.admin-page-button:focus-visible {
  border-color: #9fb7bd;
  outline: 0;
  background: #eef4f4;
  color: #344b51;
  transform: translateY(-1px);
}

.admin-page-button.is-current {
  border-color: #7f9da5;
  background: #78969e;
  color: #fff;
  box-shadow: 0 5px 12px rgba(72, 98, 105, 0.18);
}

.admin-page-button:disabled {
  cursor: default;
  opacity: 0.38;
}

.admin-page-ellipsis {
  display: inline-grid;
  width: 20px;
  height: 32px;
  place-items: center;
  color: #96a3a7;
  font-size: 11px;
  font-weight: 900;
}

@keyframes admin-collection-item-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-admin-item].is-page-entering {
  animation: admin-collection-item-in 0.24s both;
  animation-delay: calc(var(--admin-item-index, 0) * 28ms);
}

@media (max-width: 1080px) {
  .admin-collection-toolbar,
  .admin-product-toolbar,
  .admin-gallery-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-search-field {
    grid-column: 1 / -1;
  }

  .admin-filter-reset {
    justify-self: end;
  }
}

@media (max-width: 760px) {
  .admin-collection-toolbar,
  .admin-product-toolbar,
  .admin-gallery-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 9px;
  }

  .admin-price-filter {
    grid-column: 1 / -1;
  }

  [data-admin-collection] .category-manage-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  [data-admin-collection] .product-manage-row {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  [data-admin-collection] .gallery-manage-row {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  [data-admin-collection] .product-manage-row > img,
  [data-admin-collection] .product-manage-placeholder {
    width: 72px;
    align-self: start;
  }

  [data-admin-collection] .gallery-manage-row > img {
    width: 60px;
    align-self: start;
    aspect-ratio: 1 / 1;
  }

  [data-admin-collection] .gallery-row-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-top: 7px;
    border-top: 1px solid #e7ebec;
  }

  .admin-collection-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-pagination {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .admin-collection-toolbar,
  .admin-product-toolbar,
  .admin-gallery-toolbar {
    grid-template-columns: 1fr;
  }

  .admin-search-field,
  .admin-price-filter {
    grid-column: auto;
  }

  .admin-filter-reset {
    justify-self: end;
  }

  [data-admin-collection] .gallery-row-actions {
    flex-wrap: wrap;
  }

  .admin-pagination {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-admin-item].is-page-entering {
    animation: none;
  }

  .admin-page-button,
  .admin-filter-field input,
  .admin-filter-field select,
  .admin-price-filter input {
    transition: none;
  }
}