:root{font-family:"Segoe UI",Arial,sans-serif;color:#20232a;background:#f4f6f8}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,textarea,select{font:inherit}[hidden]{display:none!important}button{cursor:pointer}.auth-page,.state-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#f1edff,#f7f8fa)}.auth-card,.state-card{width:min(100%,440px);padding:30px;background:#fff;border:1px solid #dfe3e8;border-radius:8px;box-shadow:0 20px 55px #24293616}.brand{width:60px;height:60px;display:grid;place-items:center;margin:auto;border-radius:8px;background:#6c4dff;color:#fff;font-size:30px;font-weight:700}.brand.small{width:40px;height:40px;margin:0;font-size:20px}.auth-card h1,.state-card h1{text-align:center;margin:18px 0 6px}.auth-card>p,.state-card>p{text-align:center;color:#69707a}.tabs{display:grid;grid-template-columns:1fr 1fr;margin:24px 0 18px;border-bottom:1px solid #dfe3e8}.tab{padding:11px;border:0;background:transparent;color:#69707a}.tab.active{color:#6c4dff;border-bottom:2px solid #6c4dff;font-weight:700}form{display:grid;gap:14px}label{display:grid;gap:6px;font-size:13px;font-weight:600}input,textarea,select{width:100%;padding:11px;border:1px solid #cfd4da;border-radius:6px;background:#fff}.primary,.secondary{min-height:42px;padding:10px 15px;border-radius:6px;font-weight:700}.primary{border:0;background:#6c4dff;color:#fff}.secondary{border:1px solid #cfd4da;background:#fff}.message{margin:14px 0;padding:11px;border-radius:6px;background:#fff4e6;color:#7c3f00}.state-card{display:grid;gap:12px;text-align:center}.shell{min-height:100vh;display:grid;grid-template-columns:230px 1fr}.shell aside{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:22px 12px;background:#211a32;color:#fff}.portal-brand{display:flex;align-items:center;gap:11px;padding:0 8px 26px}.portal-brand strong,.portal-brand small{display:block}.portal-brand small{margin-top:3px;color:#c8bfd8}nav{display:grid;gap:5px}.nav,.logout{padding:11px 14px;border:0;border-radius:6px;text-align:left;color:#d8d2e5;background:transparent}.nav.active,.nav:hover{background:#6c4dff;color:#fff}.logout{margin-top:auto}.workspace{min-width:0}.workspace header{min-height:84px;display:flex;align-items:center;gap:16px;padding:17px 24px;background:#fff;border-bottom:1px solid #dfe3e8}.workspace header h1{margin:0;font-size:21px}.workspace header p{margin:4px 0 0;color:#69707a}.workspace header .primary{margin-left:auto}.content{padding:24px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}.metric,.card{padding:17px;background:#fff;border:1px solid #dfe3e8;border-radius:8px}.metric strong{display:block;font-size:24px;margin-bottom:5px}.metric span{color:#69707a;font-size:13px}.list{display:grid;gap:10px}.card{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}.card h3{margin:0 0 5px}.meta{display:flex;flex-wrap:wrap;gap:7px 14px;color:#69707a;font-size:12px}.card-controls{min-width:170px;display:grid;gap:8px}.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.menu-card{overflow:hidden;background:#fff;border:1px solid #dfe3e8;border-radius:8px}.menu-card img,.image-placeholder{width:100%;height:150px;object-fit:cover;background:#eceff1}.menu-card-body{padding:14px}.menu-card h3{margin:0 0 5px}.menu-card p{min-height:38px;color:#69707a;font-size:13px}.menu-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.profile-form{max-width:720px;padding:20px;background:#fff;border:1px solid #dfe3e8;border-radius:8px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.actions{display:flex;justify-content:flex-end;gap:9px;margin-top:10px}dialog{width:min(620px,calc(100% - 32px));border:0;border-radius:8px;padding:24px;box-shadow:0 30px 80px #16191f55}dialog::backdrop{background:#16191f99}.empty{padding:50px 20px;text-align:center;background:#fff;border:1px solid #dfe3e8;border-radius:8px;color:#69707a}@media(max-width:850px){.metrics{grid-template-columns:1fr 1fr}.menu-grid{grid-template-columns:1fr 1fr}}@media(max-width:650px){.shell{display:block}.shell aside{position:static;width:auto;height:auto}.portal-brand{padding-bottom:12px}nav{grid-template-columns:repeat(4,1fr)}.nav{text-align:center;padding:9px 4px;font-size:12px}.logout{margin-top:10px}.workspace header{padding:14px 16px}.content{padding:16px}.menu-grid{grid-template-columns:1fr}.card{grid-template-columns:1fr}.two-col{grid-template-columns:1fr}}
 .receipt-lines{display:grid;gap:5px;margin-top:12px;font-size:13px}.receipt-lines div{display:flex;justify-content:space-between;gap:12px;padding-top:5px;border-top:1px dashed #e4e7eb}
.toolbar-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}.panel{padding:18px;background:#fff;border:1px solid #dfe3e8;border-radius:8px}.account-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}.account-grid div{padding:14px;background:#f7f5ff;border-radius:8px}.account-grid span{display:block;color:#69707a;font-size:12px}.account-grid strong{display:block;margin-top:6px;font-size:20px}.actions.start{justify-content:flex-start}.urgent-card{border-color:#6c4dff;box-shadow:0 10px 30px #6c4dff20}.pulse{animation:pulse 1.2s infinite}.menu-title-row{display:flex;align-items:start;justify-content:space-between;gap:8px}.badge{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:800;text-transform:uppercase}.badge.ok{background:#ebfbee;color:#087f5b}.badge.wait{background:#fff4e6;color:#9a5a00}.offer-line{min-height:auto!important;color:#6c4dff!important;font-weight:700}.switch-row{display:flex;grid-template-columns:auto 1fr;align-items:center;gap:8px;margin:10px 0;font-size:13px}.switch-row input,.inline-check input{width:auto}.inline-check{display:flex;align-items:center;gap:8px}.incoming-dialog{width:min(720px,calc(100% - 26px));padding:0;border-radius:8px}.incoming-alert{padding:34px;text-align:center}.incoming-icon{width:72px;height:72px;margin:0 auto 12px;display:grid;place-items:center;border-radius:50%;background:#6c4dff;color:#fff;font-size:42px;font-weight:900;animation:pulse 1s infinite}.incoming-alert h2{margin:8px 0 12px;font-size:34px}.popup-total{font-size:32px;font-weight:900;color:#6c4dff;margin-bottom:12px}@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 #6c4dff55}50%{transform:scale(1.03);box-shadow:0 0 0 10px #6c4dff00}}@media(max-width:850px){.account-grid{grid-template-columns:1fr 1fr}}@media(max-width:650px){nav{grid-template-columns:repeat(5,1fr)}.incoming-alert h2{font-size:26px}.account-grid{grid-template-columns:1fr}}
.kitchen-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}.kitchen-column{min-height:520px;padding:12px;border:1px solid #dfe3e8;border-radius:10px;background:#f9fafb}.kitchen-column.new{border-color:#ffd8a8;background:#fff8ef}.kitchen-column.prep{border-color:#d6ccff;background:#f8f5ff}.kitchen-column.ready{border-color:#b7efc5;background:#f2fff6}.kitchen-column-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.kitchen-column-head h2{margin:0;font-size:18px}.kitchen-column-head p{margin:3px 0 0;color:#69707a;font-size:12px}.kitchen-column-head strong{min-width:34px;height:34px;display:grid;place-items:center;border-radius:999px;background:#fff;border:1px solid #dfe3e8;color:#211a32}.kitchen-column-list{display:grid;gap:10px}.kitchen-column .card{grid-template-columns:1fr;gap:12px;padding:14px}.kitchen-column .card-controls{min-width:0;grid-template-columns:1fr}.kitchen-column .meta{gap:6px 10px}.kitchen-column .receipt-lines{font-size:12px}@media(max-width:1050px){.kitchen-board{grid-template-columns:1fr}.kitchen-column{min-height:auto}}
.danger{min-height:42px;padding:10px 15px;border:1px solid #ffc9c9;border-radius:6px;background:#fff5f5;color:#c92a2a;font-weight:800}.danger:hover{background:#ffe3e3}
.availability-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.availability-panel h2{margin:0 0 4px}.availability-panel p{margin:0;color:#69707a}.availability-actions{display:flex;gap:10px;flex-wrap:wrap}@media(max-width:650px){.availability-panel{display:grid}.availability-actions button{flex:1}}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.workspace header .header-actions .primary{margin-left:0}@media(max-width:650px){.workspace header{align-items:flex-start}.header-actions{width:100%;margin-left:0}}
.menu-meta{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.menu-meta span{padding:4px 8px;border-radius:999px;background:#f0edff;color:#4d33c9;font-size:12px;font-weight:700}.muted-line{min-height:0!important;margin:6px 0;color:#69707a}
/* Live restaurant support */
.support-portal {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  min-height: calc(100vh - 190px);
}

.support-queue,
.support-thread {
  background: #fff;
  border: 1px solid #e9e3f3;
  border-radius: 18px;
  overflow: hidden;
}

.support-queue-head,
.support-thread > header {
  align-items: center;
  border-bottom: 1px solid #eee8f6;
  display: flex;
  justify-content: space-between;
  padding: 18px;
}

.support-queue-head h2,
.support-queue-head p,
.support-thread h2,
.support-thread header p {
  margin: 0;
}

.support-email {
  color: #6d28d9;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  margin-top: 5px;
  text-decoration: none;
}

.support-email:hover,
.support-email:focus-visible {
  text-decoration: underline;
}

.support-ticket-list {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.support-ticket {
  background: #fff;
  border: 1px solid #ebe5f5;
  border-radius: 12px;
  color: #21123d;
  display: grid;
  gap: 5px;
  padding: 13px;
  text-align: left;
}

.support-ticket.active {
  background: #f4edff;
  border-color: #7c3aed;
}

.support-ticket span,
.support-ticket small {
  color: #6d637c;
}

.support-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 420px;
  overflow-y: auto;
  padding: 18px;
}

.support-bubble {
  align-self: flex-start;
  background: #f1eef6;
  border-radius: 14px;
  max-width: min(75%, 620px);
  padding: 11px 13px;
}

.support-bubble.mine {
  align-self: flex-end;
  background: #6d28d9;
  color: #fff;
}

.support-bubble p {
  margin: 4px 0 0;
  white-space: pre-wrap;
}

.support-composer,
.support-new form {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.support-composer {
  border-top: 1px solid #eee8f6;
  grid-template-columns: minmax(0, 1fr) auto;
}

.support-composer textarea,
.support-new textarea,
.support-new input,
.support-new select {
  border: 1px solid #ded6eb;
  border-radius: 10px;
  padding: 11px;
  resize: vertical;
}

.support-new {
  margin: auto;
  max-width: 620px;
  padding: 34px;
}

@media (max-width: 850px) {
  .support-portal {
    grid-template-columns: 1fr;
  }
  .support-composer {
    grid-template-columns: 1fr;
  }
}

/* Backend-connected restaurant intelligence */
.intelligence-intro {
  align-items: center;
  background: linear-gradient(135deg, #2d174f, #6c4dff);
  border-radius: 12px;
  color: #fff;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 24px;
}

.intelligence-intro h2,
.intelligence-intro p,
.restaurant-assistant h2,
.restaurant-assistant p {
  margin: 5px 0;
}

.intelligence-intro p {
  color: #e9e3ff;
  max-width: 760px;
}

.insight-eyebrow {
  color: #7c3aed;
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.intelligence-intro .insight-eyebrow {
  color: #d9ceff;
}

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

.insight-panel h3 {
  margin: 0 0 12px;
}

.insight-list {
  display: grid;
  gap: 8px;
}

.insight-list article,
.assistant-answer {
  background: #f7f5ff;
  border: 1px solid #e8e1ff;
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 12px;
}

.insight-list p,
.assistant-answer p {
  margin: 0;
}

.insight-list small,
.assistant-answer small {
  color: #635b71;
}

.restaurant-assistant {
  margin-top: 16px;
}

.restaurant-assistant form {
  align-items: end;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 14px;
}

@media (max-width: 850px) {
  .insight-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .intelligence-intro,
  .restaurant-assistant form {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* RobiDrop restaurant portal 2026 visual system */
:root {
  --rd-purple-950: #0e0631;
  --rd-purple-900: #160747;
  --rd-purple-800: #2b0878;
  --rd-purple-700: #4512b7;
  --rd-purple-600: #5b19db;
  --rd-purple-500: #7028ec;
  --rd-purple-100: #efe7ff;
  --rd-purple-50: #faf8ff;
  --rd-ink: #100a32;
  --rd-muted: #6c6683;
  --rd-line: #e7e2f1;
  --rd-bg: #f8f8fc;
  --rd-white: #fff;
  --rd-green: #0aab67;
  --rd-orange: #f59e0b;
  --rd-red: #ef334e;
  font-family: "Inter", Arial, sans-serif;
  color: var(--rd-ink);
  background: var(--rd-bg);
}

* {
  scrollbar-color: #b69bea transparent;
  scrollbar-width: thin;
}

body {
  color: var(--rd-ink);
  background:
    radial-gradient(circle at 76% 0, #f2ecff 0, transparent 30rem),
    var(--rd-bg);
}

h1,
h2,
h3,
.portal-brand strong {
  font-family: "Poppins", "Inter", sans-serif;
}

button,
input,
textarea,
select {
  font-family: "Inter", Arial, sans-serif;
}

button {
  transition: border-color .2s, background .2s, color .2s, transform .2s, box-shadow .2s;
}

button:not(:disabled):active {
  transform: translateY(1px);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #7c3aed33;
  outline-offset: 2px;
}

input,
textarea,
select {
  min-height: 44px;
  border-color: #ddd6ec;
  border-radius: 9px;
  color: var(--rd-ink);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--rd-purple-500);
  box-shadow: 0 0 0 3px #7028ec12;
}

.auth-page,
.state-page {
  background:
    radial-gradient(circle at 15% 15%, #8c4dff36 0, transparent 26rem),
    linear-gradient(135deg, var(--rd-purple-950), var(--rd-purple-800));
}

.auth-card,
.state-card {
  border: 1px solid #ffffff30;
  border-radius: 24px;
  box-shadow: 0 30px 80px #09001f66;
}

.auth-logo {
  display: block;
  width: 190px;
  max-height: 64px;
  object-fit: contain;
  margin: 0 auto 18px;
}

.primary {
  background: linear-gradient(90deg, var(--rd-purple-700), var(--rd-purple-500));
  border: 1px solid transparent;
  border-radius: 9px;
  box-shadow: 0 7px 18px #5b19db25;
}

.primary:not(:disabled):hover {
  background: linear-gradient(90deg, var(--rd-purple-800), var(--rd-purple-600));
  box-shadow: 0 10px 24px #5b19db35;
}

.secondary,
.portal-card button:not(.primary):not(.danger),
.menu-admin-banner button {
  border: 1px solid #cdbbf7;
  border-radius: 9px;
  background: #fff;
  color: var(--rd-purple-700);
  font-weight: 700;
}

.secondary:not(:disabled):hover,
.portal-card button:not(.primary):not(.danger):hover,
.menu-admin-banner button:hover {
  border-color: var(--rd-purple-500);
  background: var(--rd-purple-50);
}

.shell {
  grid-template-columns: 252px minmax(0, 1fr);
}

.portal-sidebar {
  z-index: 10;
  padding: 18px 12px !important;
  background:
    radial-gradient(circle at 20% 70%, #6d28d933 0, transparent 18rem),
    linear-gradient(180deg, #0d0731 0%, #13073f 50%, #080422 100%) !important;
  box-shadow: 10px 0 38px #18074813;
}

.portal-brand {
  gap: 10px;
  padding: 0 8px 20px;
  border-bottom: 1px solid #ffffff17;
}

.portal-brand img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: contain;
  background: linear-gradient(145deg, #7c3aed, #2b0878);
}

.portal-brand strong {
  font-size: 21px;
  color: #fff;
}

.portal-brand small {
  font-size: 9px;
  letter-spacing: .07em;
  color: #c9bdf1;
}

.restaurant-identity {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 9px 11px;
  align-items: center;
  margin: 14px 2px;
  padding: 12px;
  border: 1px solid #ffffff12;
  border-radius: 13px;
  background: #ffffff08;
}

.restaurant-identity .store-logo {
  width: 52px;
  height: 52px;
  grid-row: span 2;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rd-purple-500), var(--rd-purple-800));
  color: #fff;
  font: 700 20px "Poppins";
}

.restaurant-identity .store-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.restaurant-identity strong,
.restaurant-identity span,
.restaurant-identity small {
  display: block;
}

.restaurant-identity strong {
  color: #fff;
  font-size: 13px;
}

.restaurant-identity span {
  width: max-content;
  max-width: 145px;
  margin-top: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #6d28d9;
  color: #fff;
  font-size: 9px;
}

.restaurant-identity small {
  grid-column: 1 / -1;
  text-align: center;
  color: #c9bdf1;
  font-size: 9px;
}

.portal-sidebar nav {
  gap: 3px;
  overflow-y: auto;
}

.nav,
.logout {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 9px 11px;
  border-radius: 8px;
  color: #e8e2fa;
  font-size: 12px;
  font-weight: 500;
}

.nav span {
  width: 20px;
  color: #fff;
  text-align: center;
  font-size: 16px;
}

.nav b {
  min-width: 20px;
  min-height: 20px;
  display: grid;
  place-items: center;
  margin-left: auto;
  padding: 1px 5px;
  border-radius: 999px;
  background: #6d28d9;
  color: #fff;
  font-size: 9px;
}

.nav.active,
.nav:hover {
  background: linear-gradient(90deg, #4913c0, #6920df);
  box-shadow: 0 8px 22px #0003;
}

.sidebar-support {
  margin: 14px 3px 8px;
  padding: 15px;
  border: 1px solid #ffffff12;
  border-radius: 13px;
  background: linear-gradient(145deg, #260a65, #3c0f90);
}

.sidebar-support strong {
  font: 600 13px "Poppins";
}

.sidebar-support p {
  color: #d9cff4;
  font-size: 10px;
  line-height: 1.55;
}

.sidebar-support button {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  background: linear-gradient(90deg, #6d28d9, #7c3aed);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.logout {
  margin-top: auto;
}

.workspace {
  background: transparent;
}

.workspace > header {
  position: sticky;
  z-index: 9;
  top: 0;
  min-height: 82px;
  padding: 15px 26px;
  border-bottom: 1px solid var(--rd-line);
  background: #fffffff2;
  backdrop-filter: blur(15px);
}

.workspace header h1 {
  font-size: 20px;
}

.workspace header p {
  font-size: 12px;
  color: var(--rd-muted);
}

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

.icon-button {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rd-line);
  border-radius: 10px;
  background: #fff;
  color: var(--rd-ink);
  font-size: 18px;
}

.icon-button b {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  min-height: 18px;
  display: grid;
  place-items: center;
  padding: 2px;
  border-radius: 999px;
  background: #e31b32;
  color: #fff;
  font-size: 9px;
}

.account-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 7px;
}

.header-avatar {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, #6d28d9, #2b0878);
  color: #fff;
  font-weight: 800;
}

.account-chip strong,
.account-chip small {
  display: block;
}

.account-chip strong {
  font-size: 12px;
}

.account-chip small {
  margin-top: 2px;
  color: var(--rd-muted);
  font-size: 9px;
}

.content {
  max-width: 1680px;
  margin: auto;
  padding: 22px 25px 34px;
}

.message {
  margin: 12px 25px 0;
  border: 1px solid currentColor;
  border-radius: 10px;
}

.portal-card,
.panel,
.metric,
.card {
  border: 1px solid var(--rd-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 28px #28115a08;
}

.portal-card {
  padding: 17px;
}

.portal-card h2 {
  margin: 0 0 14px;
  font-size: 15px;
}

.portal-card p {
  color: var(--rd-muted);
  font-size: 11px;
  line-height: 1.55;
}

.dashboard-metrics,
.menu-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 11px;
  margin-bottom: 14px;
}

.dashboard-metric,
.menu-metrics > article {
  min-height: 102px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--rd-line);
  border-radius: 12px;
  background: #fff;
}

.dashboard-metric i,
.menu-metrics i {
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--rd-purple-100);
  color: var(--rd-purple-600);
  font-style: normal;
  font-size: 21px;
}

.dashboard-metric.green i,
.menu-metrics .green i {
  background: #e7f8ef;
  color: var(--rd-green);
}

.dashboard-metric.orange i,
.menu-metrics .orange i {
  background: #fff3df;
  color: var(--rd-orange);
}

.dashboard-metric.red i {
  background: #ffe9ed;
  color: var(--rd-red);
}

.dashboard-metric.blue i {
  background: #e9f3ff;
  color: #2682ec;
}

.dashboard-metric span,
.menu-metrics span {
  display: block;
  color: var(--rd-muted);
  font-size: 10px;
}

.dashboard-metric strong,
.menu-metrics strong {
  display: block;
  margin-top: 5px;
  font: 700 19px "Poppins";
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .8fr) minmax(250px, .62fr);
  gap: 14px;
}

.dashboard-grid .recent-orders {
  grid-column: 1 / 3;
}

.sales-chart,
.sales-bars,
.analytics-bars {
  height: 185px;
  display: flex;
  align-items: end;
  gap: 8px;
  padding: 18px 4px 0;
  border-bottom: 1px solid var(--rd-line);
  background: linear-gradient(180deg, transparent, #faf7ff);
}

.sales-chart > div,
.sales-bars > div,
.analytics-bars > div {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: end;
  text-align: center;
}

.sales-chart i,
.sales-bars span,
.analytics-bars span {
  width: 100%;
  min-height: 4px;
  display: block;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #8b5cf6, #4c10bc);
}

.sales-chart small,
.sales-bars small,
.analytics-bars small {
  padding: 7px 0;
  color: var(--rd-muted);
  font-size: 9px;
}

.status-donut {
  width: 155px;
  height: 155px;
  display: grid;
  place-items: center;
  margin: 18px auto;
  border-radius: 50%;
  background: conic-gradient(var(--rd-orange) 0 25%, #2682ec 25% 43%, var(--rd-purple-600) 43% 62%, var(--rd-green) 62%);
}

.status-donut::after {
  content: "";
  width: 94px;
  height: 94px;
  border-radius: 50%;
  background: #fff;
}

.status-legend,
.analytics-status {
  display: grid;
  gap: 10px;
}

.status-legend > div,
.analytics-status > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}

.quick-actions,
.totals-list {
  display: grid;
}

.quick-actions button,
.quick-action,
.totals-list > div {
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 4px;
  border: 0 !important;
  border-bottom: 1px solid var(--rd-line) !important;
  border-radius: 0 !important;
  text-align: left;
}

.quick-actions button:last-child,
.quick-action:last-child,
.totals-list > div:last-child {
  border-bottom: 0 !important;
}

.ranked-item,
.analytics-item {
  min-height: 47px;
  display: grid;
  grid-template-columns: 20px 36px 1fr;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--rd-line);
  font-size: 11px;
}

.ranked-item > b {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rd-purple-600);
  color: #fff;
  font-size: 9px;
}

.ranked-item span strong,
.ranked-item span small {
  display: block;
}

.ranked-item span small {
  color: var(--rd-muted);
}

.table-toolbar,
.orders-toolbar,
.menu-toolbar {
  display: flex;
  gap: 10px;
  padding-bottom: 14px;
}

.table-toolbar form,
.orders-toolbar form,
.menu-toolbar form {
  flex: 1;
  display: flex;
  gap: 8px;
}

.table-toolbar select,
.orders-toolbar select,
.menu-toolbar select {
  width: auto;
  min-width: 150px;
}

.order-layout,
.menu-layout,
.promotion-layout,
.payout-layout,
.review-layout,
.settings-layout {
  display: grid;
  gap: 14px;
}

.order-layout {
  grid-template-columns: minmax(0, 1fr);
}

.order-status-cards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 9px;
}

.order-status-card,
.order-filter-card {
  min-height: 82px;
  padding: 13px;
  border: 1px solid var(--rd-line);
  border-radius: 11px;
  background: #fff;
}

.order-status-card span,
.order-status-card strong,
.order-filter-card span,
.order-filter-card i {
  display: block;
}

.order-status-card span,
.order-filter-card span {
  color: var(--rd-muted);
  font-size: 9px;
}

.order-status-card strong,
.order-filter-card i {
  margin-top: 5px;
  font: 700 19px "Poppins";
}

.order-table-row,
.order-table-head,
.portal-table-row,
.portal-table-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.7fr .7fr .8fr .7fr minmax(120px, 190px);
  gap: 10px;
  align-items: center;
  min-height: 61px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--rd-line);
  font-size: 10px;
}

.order-table-head,
.portal-table-head {
  min-height: 42px;
  background: var(--rd-purple-50);
  color: var(--rd-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 8px;
}

.order-table-row:hover,
.portal-table-row:not(.portal-table-head):hover {
  background: #fbf9ff;
}

.order-table-row.selected,
.portal-table-row.selected {
  outline: 1px solid var(--rd-purple-500);
  outline-offset: -1px;
  background: #fbf9ff;
}

.order-table-row button,
.portal-table-row button,
.table-icon-button {
  min-height: 34px;
  padding: 6px 9px;
}

.order-number-cell {
  display: grid;
  gap: 2px;
}

.order-number-cell strong {
  color: var(--rd-purple-700);
  font-size: 12px;
}

.order-number-cell small,
.order-detail-id small {
  display: block;
  color: var(--rd-muted);
  font-size: 9px;
}

.order-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.order-row-actions .compact {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 9px;
}

.order-ready-button {
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(99, 33, 220, .2);
}

.order-ready-button:disabled {
  background: #eee9f7;
  box-shadow: none;
  color: #786d8d;
  cursor: not-allowed;
  opacity: 1;
}

.status-pill,
.category-pill {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--rd-purple-100);
  color: var(--rd-purple-700);
  font-size: 9px;
  font-style: normal;
  white-space: nowrap;
}

.status-pill.green {
  background: #e5f8ee;
  color: #087d4d;
}

.status-pill.orange {
  background: #fff2dc;
  color: #a75a00;
}

.status-pill.red {
  background: #ffe8ec;
  color: #c6213b;
}

.order-detail-overlay {
  align-items: center;
  background: rgba(17, 8, 38, .72);
  backdrop-filter: blur(5px);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 28px;
  position: fixed;
  z-index: 120;
}

.order-detail {
  animation: order-modal-in .22s cubic-bezier(.2, .8, .2, 1);
  background: #fff !important;
  border: 1px solid #d9c9fb !important;
  border-radius: 18px !important;
  box-shadow: 0 32px 90px rgba(20, 5, 55, .48) !important;
  color: var(--rd-ink) !important;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  max-height: calc(100vh - 64px);
  max-width: 760px;
  overflow: hidden;
  opacity: 1 !important;
  padding: 0 !important;
  position: relative;
  width: min(760px, 100%);
}

@keyframes order-modal-in {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.order-modal-header {
  align-items: center;
  background: linear-gradient(135deg, var(--rd-purple-800), var(--rd-purple-600));
  border-radius: 17px 17px 0 0;
  color: #fff;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  min-height: 82px;
  padding: 17px 20px;
  width: 100%;
}

.order-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 22px 24px;
  scrollbar-color: #b99bea transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.order-modal-body::-webkit-scrollbar { width: 8px; }
.order-modal-body::-webkit-scrollbar-track { background: transparent; }
.order-modal-body::-webkit-scrollbar-thumb {
  background: #b99bea;
  border: 2px solid #fff;
  border-radius: 999px;
}

.order-modal-header h2 {
  color: #fff;
  font-size: 20px;
  margin: 2px 0 0;
}

.order-modal-header small {
  color: rgba(255, 255, 255, .76);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.order-detail-overlay .order-modal-header .dialog-close {
  align-items: center;
  background: #fff;
  color: var(--rd-purple-800);
  display: inline-flex;
  flex: 0 0 38px;
  font-size: 25px;
  height: 38px;
  justify-content: center;
  position: static;
  width: 38px;
}

.order-detail-id,
.card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.order-detail-id,
.detail-meta-grid,
.detail-items,
.totals-list,
.detail-actions,
.customer-contact {
  max-width: 100%;
  min-width: 0;
}

.detail-meta-grid > div,
.detail-items > div,
.detail-items > div > span {
  min-width: 0;
}

.detail-items strong,
.detail-items small,
.detail-meta-grid strong {
  overflow-wrap: anywhere;
}

.order-detail h3 {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--rd-line);
}

.completed-order-rating {
  background: #f7f2ff;
  border: 1px solid #dacaff;
  border-radius: 14px;
  margin-top: 18px;
  padding: 15px 16px;
}

.completed-order-rating > div {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.completed-order-rating span,
.completed-order-rating small {
  color: var(--rd-muted);
}

.completed-order-rating strong {
  color: var(--rd-purple-800);
  font-size: 16px;
}

.completed-order-rating b {
  color: #f5a400;
  letter-spacing: 2px;
}

.completed-order-rating p {
  color: var(--rd-ink);
  line-height: 1.55;
  margin: 12px 0 8px;
  overflow-wrap: anywhere;
}

.order-filter-card {
  border: 1px solid var(--rd-line);
  text-align: left;
}

.order-filter-card.active {
  border-color: var(--rd-purple-500);
  background: var(--rd-purple-50);
  box-shadow: inset 0 -3px var(--rd-purple-600);
}

.order-filter-card i {
  font-style: normal;
}

.detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 13px 0;
}

.detail-meta-grid > div {
  padding: 9px;
  border: 1px solid var(--rd-line);
  border-radius: 8px;
}

.detail-meta-grid span,
.detail-meta-grid strong {
  display: block;
}

.detail-meta-grid span {
  color: var(--rd-muted);
  font-size: 8px;
}

.detail-meta-grid strong {
  margin-top: 4px;
  font-size: 9px;
}

.customer-contact {
  padding: 11px;
  border-radius: 8px;
  background: var(--rd-purple-50);
  color: var(--rd-purple-700);
  font-weight: 700;
}

.status-overview {
  display: grid;
  grid-template-columns: 170px 1fr;
  align-items: center;
  gap: 12px;
}

.status-overview .status-donut {
  position: relative;
}

.status-overview .status-donut strong,
.status-overview .status-donut span {
  position: absolute;
  z-index: 1;
}

.status-overview .status-donut strong {
  transform: translateY(-7px);
  font: 700 22px "Poppins";
}

.status-overview .status-donut span {
  transform: translateY(15px);
  color: var(--rd-muted);
  font-size: 9px;
}

.status-legend i,
.analytics-status i {
  width: 9px;
  height: 9px;
  margin-right: auto;
  border-radius: 50%;
  background: var(--rd-purple-600);
}

.status-legend i.orange,
.analytics-status i.orange {
  background: var(--rd-orange);
}

.status-legend i.blue,
.analytics-status i.blue {
  background: #2682ec;
}

.status-legend i.green,
.analytics-status i.green {
  background: var(--rd-green);
}

.quick-action {
  width: 100%;
}

.quick-action > i,
.quick-action > b {
  color: var(--rd-purple-600);
  font-style: normal;
}

.quick-action span {
  flex: 1;
}

.quick-action strong,
.quick-action small {
  display: block;
}

.quick-action small {
  margin-top: 3px;
  color: var(--rd-muted);
  font-weight: 500;
}

.earnings-card > div:not(.card-heading) {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--rd-line);
  font-size: 10px;
}

.earnings-card > button {
  width: 100%;
  margin-top: 10px;
  padding: 9px;
}

.availability-strip {
  margin-top: 14px;
}

.detail-items {
  display: grid;
}

.detail-items > div,
.incoming-items > div {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--rd-line);
  font-size: 10px;
}

.detail-items small,
.incoming-items small {
  display: block;
  margin-top: 3px;
  color: var(--rd-muted);
}

.detail-actions {
  display: grid;
  gap: 8px;
  margin-top: 15px;
}

.menu-admin-banner {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
  padding: 13px 17px;
  border: 1px solid #bfa6fa;
  border-radius: 11px;
  background: linear-gradient(90deg, #fbf9ff, #fff);
}

.menu-admin-banner i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rd-purple-100);
  color: var(--rd-purple-600);
  font-style: normal;
  font-weight: 800;
}

.menu-admin-banner strong {
  color: var(--rd-purple-700);
  font-size: 12px;
}

.menu-admin-banner p {
  margin: 3px 0 0;
  color: var(--rd-muted);
  font-size: 10px;
}

.menu-layout {
  grid-template-columns: minmax(0, 1fr) 280px;
}

.menu-create-form {
  margin-bottom: 14px;
  border-color: #d8c9ff;
  background: linear-gradient(135deg, #fff 0%, #fbf8ff 100%);
}

.menu-create-heading,
.menu-create-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.menu-create-heading h2,
.menu-create-heading p {
  margin: 0;
}

.menu-create-heading p {
  margin-top: 3px;
  color: var(--rd-muted);
  font-size: 10px;
}

.menu-create-heading > span {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--rd-purple-100);
  color: var(--rd-purple-700);
  font-size: 9px;
  font-weight: 700;
}

.menu-create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin-top: 14px;
}

.menu-create-grid .wide {
  grid-column: 1 / -1;
}

.menu-create-grid small {
  display: block;
  margin-top: 4px;
  color: var(--rd-muted);
  font-size: 8px;
}

.menu-create-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 12px;
}

.menu-create-actions label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 10px;
}

.menu-create-actions input {
  width: auto;
  min-height: 18px;
  accent-color: var(--rd-purple-600);
}

.menu-metrics {
  grid-template-columns: repeat(4, 1fr);
}

.menu-table-row {
  display: grid;
  grid-template-columns: minmax(280px, 2fr) 1fr .8fr .9fr 1fr;
  gap: 10px;
  align-items: center;
  min-height: 68px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--rd-line);
  font-size: 10px;
}

.menu-table-head {
  min-height: 39px;
  color: var(--rd-muted);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}

.menu-item-cell {
  display: flex;
  align-items: center;
  gap: 11px;
}

.menu-item-cell > span > strong,
.menu-item-cell small,
.menu-item-cell em {
  display: block;
}

.menu-item-cell small {
  max-width: 360px;
  margin-top: 3px;
  color: var(--rd-muted);
}

.menu-item-cell em {
  margin-top: 4px;
  color: var(--rd-purple-600);
  font-size: 9px;
}

.menu-thumb,
.menu-thumb-fallback {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  object-fit: cover;
  border: 1px solid var(--rd-line);
  border-radius: 9px;
}

.menu-thumb-fallback {
  display: grid;
  place-items: center;
  background: var(--rd-purple-100);
  color: var(--rd-purple-700);
  font-style: normal;
  font-weight: 800;
}

.availability-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #087d4d;
}

.availability-toggle input {
  width: 31px;
  min-height: 18px;
  accent-color: var(--rd-purple-600);
}

.menu-sidebar,
.promotion-side,
.settings-side {
  display: grid;
  align-content: start;
  gap: 14px;
}

.category-count {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--rd-line);
  font-size: 10px;
}

.category-count b {
  color: var(--rd-purple-600);
}

.promotion-layout {
  grid-template-columns: minmax(0, 1fr) 330px;
}

.promotion-metrics {
  grid-template-columns: repeat(4, 1fr);
}

.promotion-table article {
  display: grid;
  grid-template-columns: 42px minmax(180px, 1.5fr) .8fr .7fr .8fr 1fr;
  gap: 10px;
  align-items: center;
  min-height: 73px;
  border-bottom: 1px solid var(--rd-line);
  font-size: 10px;
}

.promotion-table p {
  margin: 2px 0;
}

.promotion-symbol {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--rd-purple-100);
  color: var(--rd-purple-600);
}

.policy-note {
  border-color: #cab4fa;
  background: var(--rd-purple-50);
}

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

.analytics-chart {
  min-height: 275px;
}

.analytics-item {
  grid-template-columns: 25px 1fr 50px 100px;
}

.payout-layout {
  grid-template-columns: minmax(0, 1fr) 300px;
}

.payout-metrics {
  grid-template-columns: repeat(4, 1fr);
}

.payout-row {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1fr .8fr .7fr 1fr;
  gap: 10px;
  align-items: center;
  min-height: 59px;
  padding: 9px 6px;
  border-bottom: 1px solid var(--rd-line);
  font-size: 9px;
}

.payout-head {
  color: var(--rd-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 8px;
}

.payout-summary > div {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--rd-line);
  font-size: 10px;
}

.review-layout {
  grid-template-columns: minmax(0, 1fr) 310px;
}

.review-metrics {
  grid-template-columns: repeat(4, 1fr);
}

.review-list article {
  display: grid;
  grid-template-columns: 39px 130px minmax(250px, 1fr) 135px 100px 40px;
  gap: 10px;
  align-items: start;
  padding: 13px 0;
  border-bottom: 1px solid var(--rd-line);
  font-size: 9px;
}

.review-avatar {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rd-purple-100);
  color: var(--rd-purple-600);
  font-weight: 800;
}

.review-list strong,
.review-list small {
  display: block;
}

.review-list small,
.review-list p {
  margin: 3px 0;
  color: var(--rd-muted);
}

.review-list article > div:nth-child(3) b,
.rating-summary > span {
  color: #f5a400;
  letter-spacing: 2px;
}

.rating-summary > strong {
  font: 700 34px "Poppins";
}

.rating-band {
  display: grid;
  grid-template-columns: 50px 1fr 65px;
  gap: 8px;
  align-items: center;
  padding: 5px 0;
  font-size: 9px;
}

.rating-band i {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #eeeaf6;
}

.rating-band i b {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: #f5a400;
}

.staff-list article {
  display: grid;
  grid-template-columns: 42px minmax(200px, 1fr) 140px 100px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--rd-line);
  font-size: 10px;
}

.staff-list span {
  display: block;
  margin-top: 3px;
  color: var(--rd-muted);
}

.settings-layout {
  grid-template-columns: 230px minmax(0, 1fr) 310px;
}

.settings-nav {
  align-self: start;
  padding: 8px;
  position: sticky;
  top: 100px;
}

.settings-anchor {
  scroll-margin-top: 104px;
}

.settings-nav button {
  width: 100%;
  display: grid;
  gap: 3px;
  min-height: 60px;
  padding: 11px !important;
  border: 0 !important;
  border-left: 3px solid transparent !important;
  border-radius: 7px !important;
  text-align: left;
}

.settings-nav button.active {
  border-left-color: var(--rd-purple-600) !important;
  background: var(--rd-purple-50) !important;
}

.settings-nav small {
  color: var(--rd-muted);
  font-weight: 500;
}

.settings-main,
.settings-form {
  display: grid;
  gap: 14px;
}

.general-info-body {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 15px;
}

.general-info-body > img,
.general-info-body > .store-logo {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  object-fit: cover;
  border: 3px solid var(--rd-purple-100);
  border-radius: 50%;
  color: var(--rd-purple-600);
  font: 700 25px "Poppins";
}

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

.account-grid div {
  padding: 10px;
  border: 1px solid #eee9f7;
  background: #faf9fd;
}

.account-grid strong {
  margin-top: 4px;
  font-size: 11px;
}

.settings-save {
  justify-self: end;
}

.support-choices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.support-choice {
  min-height: 155px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.support-choice i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--rd-purple-100);
  color: var(--rd-purple-600);
  font-style: normal;
  font-size: 21px;
}

.support-choice button,
.support-choice a {
  min-height: 37px;
  display: grid;
  place-items: center;
  margin-top: auto;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--rd-purple-700), var(--rd-purple-500));
  color: #fff;
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
}

.support-resources {
  display: grid;
  grid-template-columns: 1.6fr .8fr;
  gap: 14px;
  margin-bottom: 14px;
}

.faq-list button {
  width: 100%;
  min-height: 43px;
  padding: 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rd-line) !important;
  border-radius: 0 !important;
  text-align: left;
}

.empty {
  border: 1px dashed #d5c8ee;
  border-radius: 11px;
  background: var(--rd-purple-50);
  color: var(--rd-muted);
}

.incoming-dialog,
.reason-dialog {
  overflow: visible;
  border: 1px solid #d8cdf0;
  border-radius: 19px;
  background: #fff;
  color: var(--rd-ink);
}

.incoming-dialog {
  width: min(760px, calc(100% - 26px));
}

.incoming-alert {
  position: relative;
  padding: 54px 25px 25px;
}

.dialog-close {
  position: absolute;
  top: 15px;
  right: 17px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--rd-ink);
  font-size: 24px;
}

.incoming-icon {
  position: absolute;
  top: -50px;
  left: 50%;
  width: 94px;
  height: 94px;
  transform: translateX(-50%);
  border: 9px solid #e9dfff;
  background: #fff;
  color: var(--rd-purple-600);
  box-shadow: 0 7px 30px #39108b30;
}

.incoming-alert h2 {
  margin: 9px 0 4px;
  font-size: 26px;
}

.new-order-label {
  position: absolute;
  top: 17px;
  left: 18px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--rd-purple-100);
  color: var(--rd-purple-700);
  font-size: 10px;
  font-weight: 700;
}

.incoming-countdown {
  width: max-content;
  margin: 14px auto;
  padding: 10px 20px;
  border: 1px solid #d8c9fa;
  border-radius: 11px;
  background: var(--rd-purple-50);
  color: var(--rd-purple-700);
  font: 700 21px "Poppins";
}

.incoming-order-meta,
.incoming-footer-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 15px 0;
  border: 1px solid var(--rd-line);
  border-radius: 11px;
}

.incoming-order-meta > div,
.incoming-footer-meta > div {
  padding: 13px;
  border-right: 1px solid var(--rd-line);
  text-align: left;
}

.incoming-order-meta > div:last-child,
.incoming-footer-meta > div:last-child {
  border-right: 0;
}

.incoming-order-meta span,
.incoming-footer-meta span {
  display: block;
  color: var(--rd-muted);
  font-size: 9px;
}

.incoming-items > div {
  grid-template-columns: 42px 1fr 45px 90px;
  text-align: left;
}

.instruction-box {
  padding: 11px 14px;
  border: 1px solid #d3c3fa;
  border-radius: 9px;
  background: var(--rd-purple-50);
  text-align: left;
}

.incoming-alert .actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.reason-dialog {
  position: relative;
  width: min(500px, calc(100% - 26px));
}

.reason-dialog form {
  position: relative;
}

.item-unavailable-dialog {
  width: min(620px, calc(100% - 28px));
}

.item-unavailable-dialog form {
  gap: 13px;
}

.item-unavailable-dialog h2 {
  margin: 0;
}

.item-unavailable-dialog p {
  color: #667085;
  line-height: 1.5;
  margin: -5px 0 3px;
}

.unavailable-item-button {
  border-color: #f0b429;
  color: #805b00;
}

@media (max-width: 1250px) {
  .dashboard-metrics {
    grid-template-columns: repeat(3, 1fr);
  }
  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-grid .recent-orders {
    grid-column: 1 / -1;
  }
  .settings-layout {
    grid-template-columns: 200px minmax(0, 1fr);
  }
  .settings-side {
    grid-column: 2;
    grid-template-columns: repeat(3, 1fr);
  }
  .order-table-row,
  .order-table-head,
  .portal-table-row,
  .portal-table-head {
    grid-template-columns: 1.2fr 1fr 1.5fr .7fr .8fr 60px;
  }
  .order-table-row > :nth-child(6),
  .order-table-head > :nth-child(6),
  .portal-table-row > :nth-child(6),
  .portal-table-head > :nth-child(6) {
    display: none;
  }
}

@media (max-width: 1020px) {
  .shell {
    grid-template-columns: 210px minmax(0, 1fr);
  }
  .dashboard-grid,
  .order-layout,
  .menu-layout,
  .promotion-layout,
  .payout-layout,
  .review-layout {
    grid-template-columns: 1fr;
  }
  .order-detail {
    max-height: calc(100vh - 24px);
    position: relative;
  }
  .order-detail-overlay { padding: 12px; }
  .order-modal-body { padding: 17px 16px 20px; }
  .menu-sidebar,
  .promotion-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .order-status-cards,
  .support-choices {
    grid-template-columns: repeat(3, 1fr);
  }
  .review-list article {
    grid-template-columns: 39px 120px minmax(220px, 1fr) 40px;
  }
  .review-list article > :nth-child(4),
  .review-list article > :nth-child(5) {
    display: none;
  }
}

@media (max-width: 760px) {
  .shell {
    display: block;
  }
  .portal-sidebar {
    position: relative !important;
    height: auto !important;
  }
  .portal-sidebar nav {
    grid-template-columns: repeat(2, 1fr);
  }
  .restaurant-identity,
  .sidebar-support {
    display: none;
  }
  .logout {
    margin-top: 8px;
  }
  .workspace > header {
    position: relative;
    padding: 14px 16px;
  }
  .account-chip > div:last-child {
    display: none;
  }
  .content {
    padding: 16px;
  }
  .dashboard-metrics,
  .menu-metrics,
  .order-status-cards,
  .support-choices,
  .analytics-grid,
  .settings-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .settings-nav {
    display: none;
  }
  .settings-side {
    grid-column: auto;
  }
  .menu-admin-banner {
    grid-template-columns: 35px 1fr;
  }
  .menu-admin-banner button {
    grid-column: 1 / -1;
  }
  .menu-toolbar,
  .table-toolbar {
    display: grid;
  }
  .menu-create-grid {
    grid-template-columns: 1fr;
  }
  .menu-create-grid .wide {
    grid-column: auto;
  }
  .menu-create-heading,
  .menu-create-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .menu-create-actions button {
    width: 100%;
  }
  .menu-toolbar select,
  .table-toolbar select {
    width: 100%;
  }
  .menu-table,
  .order-table,
  .payout-table,
  .promotion-table,
  .review-list {
    overflow-x: auto;
  }
  .menu-table-row {
    min-width: 850px;
  }
  .order-table-row,
  .order-table-head,
  .portal-table-row,
  .portal-table-head {
    min-width: 760px;
  }
  .payout-row {
    min-width: 780px;
  }
  .promotion-table article {
    min-width: 820px;
  }
  .review-list article {
    min-width: 760px;
  }
  .support-resources {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .dashboard-metrics,
  .menu-metrics,
  .order-status-cards,
  .support-choices,
  .settings-side,
  .menu-sidebar,
  .promotion-side {
    grid-template-columns: 1fr;
  }
  .dashboard-metric,
  .menu-metrics > article {
    min-height: 84px;
  }
  .general-info-body,
  .account-grid {
    grid-template-columns: 1fr;
  }
  .incoming-order-meta,
  .incoming-footer-meta,
  .incoming-alert .actions {
    grid-template-columns: 1fr;
  }
  .incoming-order-meta > div,
  .incoming-footer-meta > div {
    border-right: 0;
    border-bottom: 1px solid var(--rd-line);
  }
  .incoming-items > div {
    grid-template-columns: 38px 1fr auto;
  }
  .incoming-items em {
    grid-column: 2 / -1;
  }
}

/* Keep the purple navigation rail scoped to the real app sidebar only. */
.shell .content aside {
  position: static;
  top: auto;
  height: auto;
  padding: 0;
  background: transparent;
  color: var(--rd-ink);
}

.support-channel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.support-channel-grid article {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 20px;
  border: 1px solid var(--rd-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 28px #28115a08;
}

.support-channel-grid .support-live-card {
  position: relative;
  overflow: hidden;
  border-color: #cdbbf7;
  background:
    radial-gradient(circle at 100% 0, #a855f72b 0, transparent 44%),
    linear-gradient(145deg, #fff 35%, #f7f1ff 100%);
  box-shadow: 0 14px 34px #5b21b61a;
}

.support-channel-grid .support-live-card::after {
  position: absolute;
  right: -24px;
  bottom: -34px;
  width: 110px;
  height: 110px;
  border: 18px solid #7c3aed10;
  border-radius: 999px;
  content: "";
  pointer-events: none;
}

.support-live-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.support-live-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #e8faef;
  color: #087f5b;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.support-live-status::before,
.support-live-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 4px #16a34a17;
  content: "";
}

.support-thread > header p,
.support-new-heading {
  display: flex;
  align-items: center;
  gap: 9px;
}

.support-new-heading h2,
.support-new-heading p {
  margin: 0;
}

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

.support-chat-prompt {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 54px 28px;
  text-align: center;
}

.support-chat-prompt-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(145deg, #7c3aed, #4c1d95);
  box-shadow: 0 14px 30px #5b21b62f;
  color: #fff;
  font-weight: 900;
}

.support-chat-prompt h2,
.support-chat-prompt p {
  margin: 0;
}

.support-chat-prompt p {
  max-width: 560px;
  color: #6d637c;
  line-height: 1.65;
}

.support-chat-prompt button {
  min-width: 220px;
}

.support-chat-backdrop {
  position: fixed;
  z-index: 240;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(18, 8, 42, .72);
  backdrop-filter: blur(7px);
}

.support-chat-modal {
  width: min(760px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  min-height: min(680px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d8c8f5;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 34px 100px rgba(17, 8, 38, .46);
  animation: support-chat-in .2s cubic-bezier(.2, .8, .2, 1);
}

@keyframes support-chat-in {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.support-chat-header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  background: linear-gradient(125deg, #34106d, #6d28d9 58%, #7c3aed);
  color: #fff;
}

.support-chat-header h2,
.support-chat-header p {
  margin: 0;
}

.support-chat-header h2 {
  margin-top: 9px;
  font-size: 20px;
}

.support-chat-header p {
  margin-top: 4px;
  color: #e9ddff;
  font-size: 11px;
}

.support-chat-header .support-live-status {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.support-chat-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 12px;
  background: #fff;
  color: #4c1d95;
  font-size: 27px;
  font-weight: 500;
}

.support-chat-history {
  flex: 1 1 auto;
  min-height: 0;
  background: linear-gradient(#fbf9ff, #fff);
  overscroll-behavior: contain;
}

.support-chat-awaiting {
  margin: auto;
  padding: 48px 20px;
  color: #6d637c;
  text-align: center;
}

.support-chat-awaiting span {
  width: 12px;
  height: 12px;
  display: block;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 8px #16a34a18;
}

.support-chat-awaiting strong,
.support-chat-awaiting p {
  display: block;
  margin: 5px 0;
}

.support-chat-composer {
  flex: 0 0 auto;
  background: #fff;
  box-shadow: 0 -12px 30px rgba(48, 22, 86, .06);
}

.support-chat-start {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px;
}

.support-chat-start form {
  display: grid;
  gap: 13px;
  margin-top: 20px;
}

.support-chat-welcome {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e4d9f7;
  border-radius: 14px;
  background: #faf7ff;
}

.support-chat-welcome h3,
.support-chat-welcome p {
  margin: 0;
}

.support-chat-welcome p {
  margin-top: 4px;
  color: #6d637c;
  font-size: 12px;
  line-height: 1.5;
}

.support-chat-closed {
  padding: 18px 22px;
  border-top: 1px solid #eee8f6;
  background: #faf8fd;
  color: #6d637c;
  text-align: center;
}

@media (max-width: 650px) {
  .support-chat-backdrop {
    align-items: end;
    padding: 10px;
  }

  .support-chat-modal {
    min-height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
    border-radius: 20px;
  }

  .support-chat-header,
  .support-chat-start {
    padding: 18px;
  }

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

.support-new-heading p {
  margin-top: 5px;
  color: #6d637c;
}

.support-quick-replies {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
}

.support-quick-replies > span {
  color: #6d637c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.support-quick-replies > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.support-quick-replies button {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #d9ccf5;
  border-radius: 999px;
  background: #f8f4ff;
  color: #5b21b6;
  font-size: 11px;
  font-weight: 800;
}

.support-quick-replies button:hover,
.support-quick-replies button:focus-visible {
  border-color: #7c3aed;
  background: #efe5ff;
}

.support-channel-grid i {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 14px;
  background: var(--rd-purple-100);
  color: var(--rd-purple-600);
  font-style: normal;
  font-size: 14px;
  font-weight: 800;
}

.support-channel-grid article:nth-child(2) i {
  background: #e9f3ff;
  color: #2867db;
}

.support-channel-grid article:nth-child(3) i {
  background: #e7f8ef;
  color: var(--rd-green);
}

.support-channel-grid article:nth-child(4) i {
  background: #fff3df;
  color: var(--rd-orange);
}

.support-channel-grid h2 {
  margin: 0 0 7px;
  font-size: 15px;
}

.support-channel-grid p {
  margin: 0 0 15px;
  color: var(--rd-muted);
  font-size: 11px;
  line-height: 1.55;
}

.support-channel-grid button,
.support-channel-grid a {
  min-height: 40px;
  display: grid;
  place-items: center;
  margin-top: auto;
  border: 1px solid #cdbbf7;
  border-radius: 9px;
  background: linear-gradient(90deg, var(--rd-purple-700), var(--rd-purple-500));
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
}

.support-channel-grid small {
  display: block;
  margin-top: 8px;
  color: var(--rd-muted);
  text-align: center;
  font-size: 9px;
}

.support-queue,
.support-thread,
.menu-sidebar > .portal-card,
.settings-nav,
.settings-side > .portal-card {
  color: var(--rd-ink);
  background: #fff;
}

@media (max-width: 1020px) {
  .support-channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .support-channel-grid {
    grid-template-columns: 1fr;
  }
}

/* Embedded restaurant support workspace. */
.restaurant-support-workspace {
  grid-template-columns: minmax(260px, 300px) minmax(420px, 1fr) minmax(260px, 300px);
  gap: 12px;
  height: calc(100vh - 136px);
  min-height: 640px;
}

.restaurant-support-workspace .support-queue,
.restaurant-support-workspace .support-thread,
.restaurant-support-workspace .support-chat-context {
  border: 1px solid #e4dced;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(51, 22, 91, .06);
  min-height: 0;
  overflow: hidden;
}

.restaurant-support-workspace .support-queue,
.restaurant-support-workspace .support-thread {
  display: flex;
  flex-direction: column;
}

.restaurant-support-workspace .support-queue-head {
  flex: 0 0 auto;
  padding: 16px;
}

.restaurant-support-workspace .support-queue-head h2 {
  font-size: 15px;
}

.support-new-chat-button {
  flex: 0 0 auto;
  margin: 12px 14px 8px;
  width: calc(100% - 28px);
}

.support-queue-summary {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 1fr 1fr;
  margin: 0 14px 8px;
  overflow: hidden;
  border: 1px solid #ebe4f4;
  border-radius: 9px;
  background: #faf8fd;
}

.support-queue-summary span {
  color: #71647f;
  font-size: 10px;
  padding: 8px 10px;
  text-align: center;
}

.support-queue-summary span + span {
  border-left: 1px solid #ebe4f4;
}

.support-queue-summary b {
  color: #5d1fc1;
  margin-left: 4px;
}

.restaurant-support-workspace .support-ticket-list {
  align-content: start;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.restaurant-support-workspace .support-ticket {
  border-radius: 9px;
  position: relative;
}

.restaurant-support-workspace .support-ticket.active {
  border-color: #cbb5f2;
  box-shadow: inset 3px 0 #6d28d9;
}

.restaurant-support-workspace .support-thread {
  background: #fff;
}

.support-workspace-chat-header {
  align-items: center;
  border-bottom: 1px solid #eee8f6;
  display: grid;
  flex: 0 0 auto;
  gap: 11px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  min-height: 72px;
  padding: 13px 16px;
}

.support-workspace-chat-header h2,
.support-workspace-chat-header p {
  margin: 0;
}

.support-workspace-chat-header h2 {
  color: #24143e;
  font-size: 14px;
}

.support-workspace-chat-header p {
  color: #786b86;
  font-size: 10px;
  margin-top: 3px;
}

.support-admin-avatar {
  align-items: center;
  background: linear-gradient(145deg, #7c3aed, #4c1d95);
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex: 0 0 40px;
  font-size: 11px;
  font-weight: 900;
  height: 40px;
  justify-content: center;
  position: relative;
  width: 40px;
}

.support-admin-avatar span {
  background: #22c55e;
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: 0;
  height: 11px;
  position: absolute;
  right: 0;
  width: 11px;
}

.restaurant-support-workspace .support-chat-history {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px;
}

.restaurant-support-workspace .support-messages {
  background: linear-gradient(180deg, #fcfbfe, #fff);
}

.restaurant-support-workspace .support-bubble {
  border: 1px solid #e5deed;
  border-radius: 12px 12px 12px 4px;
  font-size: 11px;
  padding: 10px 12px;
}

.restaurant-support-workspace .support-bubble.mine {
  border: 1px solid #cbb8ef;
  border-radius: 12px 12px 4px 12px;
  background: linear-gradient(135deg, #f1ebff, #e3d6ff);
  color: #291544;
}

.restaurant-support-workspace .support-bubble.mine p {
  color: #291544;
  font-weight: 600;
  opacity: 1;
}

.restaurant-support-workspace .support-bubble.mine small {
  color: #6422bd;
  font-weight: 800;
  opacity: 1;
}

.restaurant-support-workspace .support-bubble.mine time {
  color: #69557f;
  opacity: 1;
}

.restaurant-support-workspace .support-bubble small,
.restaurant-support-workspace .support-bubble time {
  display: block;
  font-size: 8px;
  opacity: .7;
}

.restaurant-support-workspace .support-bubble time {
  margin-top: 5px;
  text-align: right;
}

.restaurant-support-workspace .support-composer {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
}

.restaurant-support-workspace .support-composer textarea {
  min-height: 72px;
  resize: none;
}

.restaurant-support-workspace .support-quick-replies {
  gap: 5px;
}

.restaurant-support-workspace .support-quick-replies > span {
  font-size: 9px;
}

.restaurant-support-workspace .support-quick-replies button {
  min-height: 27px;
  padding: 4px 8px;
  font-size: 9px;
}

.support-composer-actions,
.support-start-actions {
  align-items: center;
  display: flex;
  gap: 9px;
  justify-content: flex-end;
}

.support-composer-actions span {
  color: #80738c;
  font-size: 9px;
  margin-right: auto;
}

.support-composer-actions button {
  min-width: 92px;
}

.support-inline-start {
  margin: 0;
  max-width: none;
  padding: 22px;
}

.support-inline-start form {
  margin: 14px auto 0;
  max-width: 680px;
  width: 100%;
}

.support-chat-context {
  background: #fff;
  overflow-y: auto !important;
}

.support-chat-context > section {
  border-bottom: 1px solid #eee8f6;
  padding: 16px;
}

.support-chat-context > section:last-child {
  border-bottom: 0;
}

.support-chat-context h3,
.support-chat-context p {
  margin: 0;
}

.support-chat-context h3 {
  color: #281742;
  font-size: 13px;
}

.support-chat-context p {
  color: #766a82;
  font-size: 10px;
  line-height: 1.5;
  margin-top: 9px;
}

.support-context-heading,
.support-admin-card {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.support-context-list {
  display: grid;
  gap: 9px;
  margin: 14px 0 0;
}

.support-context-list > div {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: 75px minmax(0, 1fr);
}

.support-context-list dt {
  color: #776a84;
  font-size: 9px;
}

.support-context-list dd {
  color: #291741;
  font-size: 9px;
  font-weight: 800;
  margin: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.support-admin-card {
  justify-content: flex-start;
  margin-top: 13px;
}

.support-admin-card > div:last-child {
  display: grid;
  gap: 3px;
}

.support-admin-card strong {
  color: #291741;
  font-size: 11px;
}

.support-admin-card small {
  color: #16813a;
  font-size: 9px;
}

.support-context-actions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.support-context-actions button {
  width: 100%;
}

.support-context-empty {
  border: 1px dashed #d9cdef;
  border-radius: 9px;
  background: #faf8fd;
  padding: 12px;
}

@media (max-width: 1220px) {
  .restaurant-support-workspace {
    grid-template-columns: minmax(250px, 290px) minmax(420px, 1fr);
    height: auto;
  }

  .restaurant-support-workspace .support-queue,
  .restaurant-support-workspace .support-thread {
    height: 680px;
  }

  .support-chat-context {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .support-chat-context > section {
    border-bottom: 0;
    border-right: 1px solid #eee8f6;
  }
}

@media (max-width: 850px) {
  .restaurant-support-workspace {
    grid-template-columns: 1fr;
  }

  .restaurant-support-workspace .support-queue {
    height: 320px;
  }

  .restaurant-support-workspace .support-thread {
    height: 680px;
  }

  .support-chat-context {
    display: block;
    grid-column: auto;
  }

  .support-chat-context > section {
    border-bottom: 1px solid #eee8f6;
    border-right: 0;
  }
}