.order-chat{
  --oc-page:var(--viola-page,var(--bg,#070604));
  --oc-panel:var(--viola-surface,var(--panel,rgba(13,12,9,.96)));
  --oc-panel-2:var(--viola-surface-2,var(--panel2,rgba(22,19,14,.94)));
  --oc-panel-3:var(--viola-surface-3,rgba(255,255,255,.035));
  --oc-line:var(--viola-line,var(--line,rgba(233,190,92,.25)));
  --oc-line-strong:var(--viola-line-strong,var(--line2,rgba(245,208,122,.58)));
  --oc-text:var(--viola-text,var(--text,#f7f5ef));
  --oc-muted:var(--viola-muted,var(--muted,rgba(255,255,255,.66)));
  --oc-accent:var(--viola-accent,var(--gold,#e7b957));
  --oc-accent-2:var(--viola-accent-2,var(--gold2,#f9df9b));
  --oc-chat-bg:var(--oc-page);
  --oc-pattern-color:color-mix(in srgb,var(--oc-accent) 18%,var(--oc-chat-bg));
  --oc-bubble-other-user:color-mix(in srgb,var(--oc-panel-2) 97%,var(--oc-page));
  --oc-bubble-own-user:color-mix(in srgb,var(--oc-accent) 17%,var(--oc-panel-2));
  --oc-shadow:color-mix(in srgb,var(--oc-page) 62%,transparent);
  --oc-viewport-height:100dvh;
  --oc-viewport-offset-top:0px;
  position:relative;
  min-width:0;
  color:var(--oc-text);
  scrollbar-width:thin;
  scrollbar-color:var(--oc-accent) var(--oc-panel-2);
}
.order-chat *{box-sizing:border-box}
.order-chat button,.order-chat input,.order-chat textarea{font:inherit}
.order-chat button{cursor:pointer}
.order-chat [hidden]{display:none!important}
.order-chat svg{
  width:1em;
  height:1em;
  max-width:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.order-chat ::-webkit-scrollbar{width:8px;height:8px}
.order-chat ::-webkit-scrollbar-track{background:var(--oc-panel-2)}
.order-chat ::-webkit-scrollbar-thumb{
  min-height:34px;
  border:2px solid var(--oc-panel-2);
  border-radius:999px;
  background:var(--oc-accent);
}
.order-chat ::-webkit-scrollbar-corner{background:var(--oc-panel-2)}

.order-chat-appbar{
  position:relative;
  z-index:8;
  min-height:58px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:8px;
  border:1px solid var(--oc-line);
  border-bottom:0;
  border-radius:20px 20px 0 0;
  background:color-mix(in srgb,var(--oc-panel) 97%,transparent);
  box-shadow:0 10px 30px var(--oc-shadow);
  backdrop-filter:blur(16px);
}
.order-chat-tabs{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
  padding:4px;
  border-radius:14px;
  background:var(--oc-panel-2);
  box-shadow:inset 0 0 0 1px var(--oc-line);
}
.order-chat-tabs button{
  min-width:0;
  min-height:38px;
  padding:0 16px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--oc-muted);
  font-size:13px;
  font-weight:900;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.order-chat-tabs button.is-active{
  background:var(--oc-accent);
  color:var(--oc-page);
  box-shadow:0 6px 18px color-mix(in srgb,var(--oc-accent) 23%,transparent);
}
.order-chat-menu-wrap{position:relative}
.order-chat-menu-toggle,
.order-chat-refresh{
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  background:transparent;
  color:var(--oc-accent-2);
}
.order-chat-menu-toggle{
  position:relative;
  width:42px;
  min-width:42px;
  min-height:42px;
  border-radius:12px;
  box-shadow:inset 0 0 0 1px var(--oc-line);
  font-size:0;
  font-weight:900;
  line-height:1;
}
.order-chat-menu-toggle::before{content:"";width:3px;height:3px;border-radius:50%;background:currentColor;box-shadow:0 -6px currentColor,0 6px currentColor}
.order-chat-menu-toggle:hover,
.order-chat-menu-toggle[aria-expanded="true"]{background:var(--oc-panel-3);box-shadow:inset 0 0 0 1px var(--oc-line-strong)}
.order-chat-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:30;
  width:232px;
  overflow:hidden;
  padding:6px;
  border:1px solid var(--oc-line-strong);
  border-radius:14px;
  background:var(--oc-panel);
  box-shadow:0 22px 60px var(--oc-shadow);
}
.order-chat-menu button{
  width:100%;
  min-height:42px;
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:0 10px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--oc-text);
  font-size:12px;
  font-weight:800;
  text-align:left;
}
.order-chat-menu button:hover,.order-chat-menu button:focus-visible{outline:0;background:var(--oc-panel-3)}
.order-chat-menu button>span{display:grid;place-items:center;color:var(--oc-accent-2);font-size:18px}
.order-chat-menu button b{
  overflow:hidden;
  color:inherit!important;
  font-size:inherit;
  font-weight:inherit;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.order-chat-menu svg{width:18px;height:18px}

.order-chat-search{
  position:relative;
  z-index:7;
  min-height:50px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:6px 9px;
  border-inline:1px solid var(--oc-line);
  background:var(--oc-panel);
  color:var(--oc-accent-2);
}
.order-chat-search>span{display:grid;place-items:center}
.order-chat-search>span svg{width:19px;height:19px}
.order-chat-search input{
  width:100%;
  min-width:0;
  height:38px;
  padding:0 12px;
  border:1px solid var(--oc-line);
  border-radius:11px;
  outline:0;
  background:var(--oc-panel-2);
  color:var(--oc-text);
  font-size:13px;
}
.order-chat-search input:focus{border-color:var(--oc-line-strong)}
.order-chat-search button{
  position:relative;
  width:34px;
  min-width:34px;
  min-height:34px;
  padding:0;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--oc-muted);
  font-size:0;
}
.order-chat-search button::before,.order-chat-search button::after,.order-chat-settings-card>header button::before,.order-chat-settings-card>header button::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1.5px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.order-chat-search button::after,.order-chat-settings-card>header button::after{transform:translate(-50%,-50%) rotate(-45deg)}
.order-chat-search button:hover{background:var(--oc-panel-3)}
.order-chat-filter{
  position:relative;
  z-index:6;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 10px;
  border-inline:1px solid var(--oc-line);
  background:color-mix(in srgb,var(--oc-accent) 9%,var(--oc-panel));
  color:var(--oc-text);
  font-size:11px;
}
.order-chat-filter span{min-width:0;display:flex;align-items:center;gap:7px}
.order-chat-filter svg{width:15px;height:15px;color:var(--oc-accent-2)}
.order-chat-filter button{
  flex:0 0 auto;
  min-height:29px;
  padding:0 9px;
  border:1px solid var(--oc-line);
  border-radius:9px;
  background:var(--oc-panel-2);
  color:var(--oc-accent-2);
  font-size:10px;
  font-weight:850;
}

.order-chat-layout{
  height:clamp(560px,calc(100dvh - 188px),760px);
  min-height:0;
  display:grid;
  grid-template-columns:minmax(280px,340px) minmax(0,1fr);
  overflow:hidden;
  border:1px solid var(--oc-line);
  border-radius:0 0 20px 20px;
  background:var(--oc-panel);
  box-shadow:0 22px 58px var(--oc-shadow);
}
.order-chat-orders{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  border-right:1px solid var(--oc-line);
  background:var(--oc-panel-2);
}
.order-chat-orders-head{
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 14px;
  border-bottom:1px solid var(--oc-line);
  background:color-mix(in srgb,var(--oc-panel) 86%,var(--oc-panel-2));
}
.order-chat-orders-head>div{min-width:0;display:grid;gap:2px}
.order-chat-orders-head strong{color:var(--oc-text);font-size:16px}
.order-chat-orders-head small{color:var(--oc-muted);font-size:10px}
.order-chat-refresh{
  width:38px;
  min-width:38px;
  min-height:38px;
  border-radius:50%;
  font-size:20px;
}
.order-chat-refresh:hover{background:var(--oc-panel-3)}
.order-chat-refresh svg{width:19px;height:19px}
.order-chat-list{
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
}
.order-chat-ticket{
  width:100%;
  min-width:0;
  min-height:76px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  align-items:center;
  gap:3px 10px;
  padding:10px 12px;
  border:0;
  border-bottom:1px solid var(--oc-line);
  border-radius:0;
  background:transparent;
  color:var(--oc-text);
  text-align:left;
  transition:background .14s ease;
}
.order-chat-ticket:hover,.order-chat-ticket.is-active{background:var(--oc-panel-3)}
.order-chat-ticket.is-active{box-shadow:inset 3px 0 var(--oc-accent)}
.order-chat-ticket.is-general{background:color-mix(in srgb,var(--oc-accent) 5%,var(--oc-panel-2))}
.order-chat-ticket-avatar{
  grid-row:1/-1;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:color-mix(in srgb,var(--oc-accent) 13%,var(--oc-panel));
  color:var(--oc-accent-2);
  box-shadow:inset 0 0 0 1px var(--oc-line);
  font-size:15px;
  font-weight:950;
}
.order-chat-ticket-avatar svg{width:23px;height:23px}
.order-chat-ticket-copy{min-width:0;display:grid;gap:4px}
.order-chat-ticket-copy strong,
.order-chat-ticket-copy>span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.order-chat-ticket-copy strong{color:var(--oc-text);font-size:13px}
.order-chat-ticket-copy>span{color:var(--oc-muted);font-size:10px}
.order-chat-ticket time{align-self:start;color:var(--oc-muted);font-size:9px}
.order-chat-ticket>b{
  align-self:end;
  justify-self:end;
  max-width:92px;
  overflow:hidden;
  color:var(--oc-accent-2)!important;
  font-size:9px;
  font-weight:850;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.order-chat-empty,.order-chat-loading{
  padding:32px 18px;
  color:var(--oc-muted);
  font-size:12px;
  line-height:1.5;
  text-align:center;
}

.order-chat-thread{
  position:relative;
  isolation:isolate;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1fr);
  overflow:hidden;
  background-color:var(--oc-chat-bg);
}
.order-chat-thread::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:var(--oc-pattern-color);
  opacity:1;
  mask-image:url("../patterns/viola-chat-restaurant.png");
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:cover;
  -webkit-mask-image:url("../patterns/viola-chat-restaurant.png");
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:cover;
}
.order-chat-thread::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  display:none;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 18%,color-mix(in srgb,var(--oc-accent) 8%,transparent),transparent 34%),
    radial-gradient(circle at 82% 76%,color-mix(in srgb,var(--oc-accent-2) 6%,transparent),transparent 38%);
}
.order-chat[data-chat-background="1"] .order-chat-thread::before{
  opacity:.38;
}
.order-chat[data-chat-background="1"] .order-chat-thread::after{display:block}
.order-chat[data-chat-background="2"] .order-chat-thread::before,
.order-chat[data-chat-background="2"] .order-chat-thread::after{display:none}
.order-chat-thread-empty,.order-chat-thread-note{
  place-self:center;
  max-width:350px;
  padding:22px;
  color:var(--oc-muted);
  font-size:12px;
  line-height:1.55;
  text-align:center;
}
.order-chat-thread-empty,
.order-chat-thread-active{
  position:relative;
  z-index:1;
}
.order-chat-thread-active{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:auto auto auto minmax(0,1fr) auto auto;
}
.order-chat-thread-head{
  grid-row:1;
  position:relative;
  z-index:4;
  min-height:62px;
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-bottom:1px solid var(--oc-line);
  background:color-mix(in srgb,var(--oc-panel) 93%,transparent);
  backdrop-filter:blur(15px);
}
.order-chat-mobile-back{
  display:none;
  width:38px;
  min-width:38px;
  min-height:38px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--oc-accent-2);
  font-size:21px;
}
.order-chat-mobile-back:hover{background:var(--oc-panel-3)}
.order-chat-thread-avatar{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:color-mix(in srgb,var(--oc-accent) 14%,var(--oc-panel-2));
  color:var(--oc-accent-2);
  box-shadow:inset 0 0 0 1px var(--oc-line);
  font-size:14px;
  font-weight:950;
}
.order-chat-thread-avatar svg{width:22px;height:22px}
.order-chat-thread-title{min-width:0;display:grid;gap:2px}
.order-chat-thread-title strong,
.order-chat-thread-title span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.order-chat-thread-title strong{color:var(--oc-text);font-size:15px}
.order-chat-thread-title span{color:var(--oc-muted);font-size:10px}
.order-chat-details-toggle{
  min-height:36px;
  padding:0 11px;
  border:0;
  border-radius:10px;
  background:var(--oc-panel-3);
  color:var(--oc-accent-2);
  box-shadow:inset 0 0 0 1px var(--oc-line);
  font-size:10px;
  font-weight:850;
}
.order-chat-details-toggle:hover{box-shadow:inset 0 0 0 1px var(--oc-line-strong)}
.order-chat-items{
  grid-row:3;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:6px;
  padding:8px 12px;
  border-bottom:1px solid var(--oc-line);
  background:color-mix(in srgb,var(--oc-panel-2) 95%,transparent);
}
.order-chat-item{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 9px;
  border-radius:9px;
  background:var(--oc-panel-3);
  color:var(--oc-text);
  font-size:11px;
}
.order-chat-item span:last-child{color:var(--oc-muted);white-space:nowrap}

.order-chat-stagebar{
  grid-row:2;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:5px;
  padding:9px 11px;
  border-bottom:1px solid var(--oc-line);
  background:color-mix(in srgb,var(--oc-panel-2) 94%,transparent);
}
.order-chat-stagebar span{
  position:relative;
  min-width:0;
  display:grid;
  justify-items:center;
  gap:4px;
  color:var(--oc-muted);
  font-size:8px;
  text-align:center;
}
.order-chat-stagebar span::after{
  content:"";
  position:absolute;
  top:11px;
  left:calc(50% + 14px);
  width:calc(100% - 23px);
  height:1px;
  background:var(--oc-line);
}
.order-chat-stagebar span:last-child::after{display:none}
.order-chat-stagebar i{
  position:relative;
  z-index:1;
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border:1px solid var(--oc-line);
  border-radius:50%;
  background:var(--oc-panel);
  color:var(--oc-muted);
  font-size:9px;
  font-style:normal;
  font-weight:900;
}
.order-chat-stagebar b{
  overflow:hidden;
  max-width:100%;
  color:inherit!important;
  font-size:inherit;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.order-chat-stagebar span.is-done,.order-chat-stagebar span.is-current{color:var(--oc-accent-2)}
.order-chat-stagebar span.is-done i,.order-chat-stagebar span.is-current i{
  border-color:var(--oc-line-strong);
  background:var(--oc-accent);
  color:var(--oc-page);
}
.order-chat-stagebar span.is-done::after{background:var(--oc-accent)}
.order-chat-stagebar span.is-current i{box-shadow:0 0 0 4px color-mix(in srgb,var(--oc-accent) 14%,transparent)}

.order-chat-activity{
  grid-row:4;
  position:relative;
  z-index:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:14px 16px 18px;
  overflow-x:hidden;
  overflow-y:scroll;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:auto;
}
.order-chat-activity>.order-chat-thread-note:only-child{
  margin:auto;
  max-width:min(420px,88%);
  padding:9px 14px;
  border-radius:15px;
  background:color-mix(in srgb,var(--oc-panel) 88%,transparent);
  box-shadow:0 7px 24px var(--oc-shadow),inset 0 0 0 1px var(--oc-line);
  backdrop-filter:blur(10px);
}
.order-chat-day{
  align-self:center;
  position:sticky;
  top:2px;
  z-index:2;
  display:grid;
  place-items:center;
  padding:3px 0;
}
.order-chat-day span{
  padding:5px 10px;
  border-radius:999px;
  background:color-mix(in srgb,var(--oc-panel) 91%,transparent);
  color:var(--oc-muted);
  box-shadow:0 4px 14px var(--oc-shadow),inset 0 0 0 1px var(--oc-line);
  backdrop-filter:blur(9px);
  font-size:9px;
  font-weight:800;
}
.order-chat-message{
  --message-bg:color-mix(in srgb,var(--actor-color,var(--oc-accent)) 12%,var(--oc-bubble-other-user));
  position:relative;
  align-self:flex-start;
  max-width:min(620px,74%);
  display:grid;
  gap:4px;
  padding:8px 34px 6px 10px;
  border-radius:4px 14px 14px 14px;
  background:var(--message-bg);
  color:var(--oc-text);
  box-shadow:0 4px 13px color-mix(in srgb,var(--oc-shadow) 76%,transparent),0 0 0 1px color-mix(in srgb,var(--oc-line) 56%,transparent);
}
.order-chat-message[data-order-chat-message-info]{
  cursor:pointer;
  -webkit-touch-callout:none;
  user-select:none;
  transition:filter .14s ease,transform .14s ease,box-shadow .14s ease;
}
.order-chat-message[data-order-chat-message-info].is-long-pressing{
  filter:brightness(1.1);
  transform:scale(.985);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--oc-accent) 40%,transparent),0 7px 20px var(--oc-shadow);
}
.order-chat-message::before{
  content:"";
  position:absolute;
  top:0;
  left:-7px;
  width:10px;
  height:13px;
  background:var(--message-bg);
  clip-path:polygon(100% 0,100% 100%,0 0);
}
.order-chat-message.is-own{
  --message-bg:var(--oc-bubble-own-user);
  align-self:flex-end;
  border-radius:14px 4px 14px 14px;
}
.order-chat-message.is-own::before{
  left:auto;
  right:-7px;
  clip-path:polygon(0 0,100% 0,0 100%);
}
.order-chat-message.is-pinned{box-shadow:0 7px 20px var(--oc-shadow),0 0 0 1px var(--oc-line-strong)}
.order-chat-message-head{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:6px;
  padding-right:2px;
}
.order-chat-message-head b{
  overflow:hidden;
  color:var(--actor-color,var(--oc-accent-2))!important;
  font-size:10px;
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.order-chat-message-head span{
  flex:0 0 auto;
  color:var(--oc-muted);
  font-size:8px;
}
.order-chat-message p{
  margin:0;
  color:var(--oc-text)!important;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
  font-size:13px;
  line-height:1.38;
}
.order-chat-message-meta{
  min-height:13px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  color:var(--oc-muted);
  line-height:1;
}
.order-chat-message-meta time{font-size:8px}
.order-chat-delivery{
  display:inline-flex;
  align-items:center;
  gap:3px;
  color:var(--oc-muted);
  font-size:8px;
  font-weight:900;
  white-space:nowrap;
}
.order-chat-delivery b{font-size:11px;line-height:1}
.order-chat-delivery em{font-style:normal;line-height:1}
.order-chat-delivery.is-sending{color:var(--oc-muted)}
.order-chat-delivery.is-sending b{animation:order-chat-delivery-pulse .9s ease-in-out infinite alternate}
.order-chat-delivery.is-read{color:var(--oc-accent-2)}
.order-chat-delivery.is-failed{color:#ffaaa4}
.order-chat-message.is-failed{box-shadow:0 7px 20px var(--oc-shadow),0 0 0 1px color-mix(in srgb,#ff7f76 58%,transparent)}
.order-chat-message-retry{
  min-height:22px;
  padding:0 7px;
  border:1px solid color-mix(in srgb,#ffaaa4 55%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,#ffaaa4 10%,var(--oc-panel-2));
  color:#ffd0cc;
  font-size:8px;
  font-weight:900;
}
@keyframes order-chat-delivery-pulse{from{opacity:.45}to{opacity:1}}
.order-chat-pinned-mark{
  margin-right:auto;
  display:flex;
  align-items:center;
  gap:3px;
  color:var(--oc-accent-2);
  font-size:7px;
  font-weight:850;
}
.order-chat-pinned-mark svg{width:10px;height:10px}
.order-chat-pin{
  position:absolute;
  top:5px;
  right:5px;
  width:26px;
  min-width:26px;
  min-height:26px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--oc-muted);
  opacity:0;
  transition:opacity .14s ease,background .14s ease;
}
.order-chat-message:hover .order-chat-pin,
.order-chat-pin:focus-visible,
.order-chat-pin[aria-pressed="true"]{outline:0;background:color-mix(in srgb,var(--oc-panel) 62%,transparent);color:var(--oc-accent-2);opacity:1}
.order-chat-pin svg{width:14px;height:14px}

.order-chat-event{
  align-self:center;
  width:min(720px,96%);
  min-height:62px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  border-left:3px solid var(--actor-color,var(--oc-accent));
  border-radius:5px 13px 13px 5px;
  background:color-mix(in srgb,var(--oc-panel) 91%,transparent);
  color:var(--oc-text);
  box-shadow:0 7px 20px var(--oc-shadow),0 0 0 1px color-mix(in srgb,var(--oc-line) 72%,transparent);
  backdrop-filter:blur(7px);
}
.order-chat-event-avatar{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:color-mix(in srgb,var(--actor-color,var(--oc-accent)) 17%,var(--oc-panel-2));
  color:var(--actor-color,var(--oc-accent-2));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--actor-color,var(--oc-accent)) 58%,transparent);
  font-size:11px;
  font-weight:950;
}
.order-chat-event-copy{min-width:0;display:grid;gap:4px}
.order-chat-event-copy>span{min-width:0;display:flex;align-items:baseline;gap:6px}
.order-chat-event-copy b{
  overflow:hidden;
  color:var(--actor-color,var(--oc-accent-2))!important;
  font-size:11px;
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.order-chat-event-copy em{flex:0 0 auto;color:var(--oc-muted);font-size:8px;font-style:normal}
.order-chat-event-copy strong{color:var(--oc-text);font-size:12px;line-height:1.25}
.order-chat-event time{align-self:start;padding-top:2px;color:var(--oc-muted);font-size:8px}

.order-chat-process-actions{
  grid-row:5;
  position:relative;
  z-index:4;
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 11px;
  border-top:1px solid var(--oc-line);
  background:color-mix(in srgb,var(--oc-panel) 95%,transparent);
  backdrop-filter:blur(14px);
}
.order-chat-process-actions>div:first-child{display:grid;gap:2px}
.order-chat-process-actions strong{color:var(--oc-text);font-size:11px}
.order-chat-process-actions span{color:var(--oc-muted);font-size:8px}
.order-chat-process-actions>div:last-child{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.order-chat-process-actions button{
  min-height:40px;
  padding:0 13px;
  border:1px solid var(--oc-line);
  border-radius:11px;
  background:var(--oc-panel-2);
  color:var(--oc-text);
  font-size:10px;
  font-weight:900;
}
.order-chat-process-actions button.is-primary{border-color:var(--oc-line-strong);background:var(--oc-accent);color:var(--oc-page)}
.order-chat-process-actions button.is-danger{border-color:rgba(216,82,82,.48);color:#ffaaaa}
.order-chat-process-actions button:disabled{cursor:wait;opacity:.55}
.order-chat-waiting{width:100%;display:grid!important;justify-items:center!important;text-align:center}

.order-chat-composer{
  grid-row:6;
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:7px;
  padding:8px;
  border-top:1px solid var(--oc-line);
  background:color-mix(in srgb,var(--oc-panel) 94%,transparent);
  backdrop-filter:blur(15px);
}
.order-chat-send-status{
  grid-column:1/-1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 9px;
  color:var(--oc-muted);
  font-size:10px;
  line-height:1.25;
}
.order-chat-send-status span:empty~button[hidden]{display:none}
.order-chat-send-status.is-error{color:#ffaaa4}
.order-chat-send-status button{
  flex:0 0 auto;
  min-height:28px;
  padding:0 10px;
  border:1px solid color-mix(in srgb,#ffaaa4 55%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,#ffaaa4 10%,var(--oc-panel-2));
  color:#ffd0cc;
  font-size:9px;
  font-weight:900;
}
.order-chat-composer textarea{
  width:100%;
  min-width:0;
  min-height:44px;
  max-height:120px;
  resize:none;
  padding:11px 14px;
  border:1px solid var(--oc-line);
  border-radius:22px;
  outline:0;
  background:var(--oc-panel-2);
  color:var(--oc-text);
  font-size:13px;
  line-height:1.45;
}
.order-chat-composer textarea:focus{border-color:var(--oc-line-strong)}
.order-chat-composer textarea::placeholder{color:var(--oc-muted)}
.order-chat-send{
  width:46px;
  min-width:46px;
  min-height:46px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--oc-accent);
  color:var(--oc-page);
  box-shadow:0 6px 18px color-mix(in srgb,var(--oc-accent) 20%,transparent);
}
.order-chat-send:hover{filter:brightness(1.06)}
.order-chat-send.is-empty{opacity:.72}
.order-chat-send:disabled{cursor:wait;opacity:.55}
.order-chat-send svg{width:21px;height:21px;fill:none;stroke-width:1.7}

.order-chat[data-chat-density="compact"] .order-chat-ticket{min-height:66px;padding-block:7px}
.order-chat[data-chat-density="compact"] .order-chat-message{max-width:80%;gap:2px;padding-top:6px;padding-bottom:5px}
.order-chat[data-chat-density="compact"] .order-chat-message p{font-size:12px;line-height:1.3}
.order-chat[data-chat-density="compact"] .order-chat-activity{gap:5px}
.order-chat[data-chat-font="small"] .order-chat-message p{font-size:11px}
.order-chat[data-chat-font="large"] .order-chat-message p{font-size:15px;line-height:1.48}
.order-chat[data-chat-bubbles="soft"] .order-chat-message{border-radius:16px}
.order-chat[data-chat-bubbles="soft"] .order-chat-message::before{display:none}
.order-chat[data-chat-roles="hidden"] .order-chat-message-head span{display:none}
.order-chat[data-chat-mode="process"] .order-chat-composer{display:none!important}
.order-chat[data-chat-mode="messages"] .order-chat-stagebar,
.order-chat[data-chat-mode="messages"] .order-chat-process-actions{display:none!important}

body.order-chat-settings-open,
body.order-chat-readers-open{overflow:hidden}
.order-chat-settings{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:16px;
  background:rgba(0,0,0,.64);
  backdrop-filter:blur(8px);
}
.order-chat-settings-card{
  width:min(680px,100%);
  max-height:min(820px,calc(100dvh - 32px));
  overflow:auto;
  border:1px solid var(--oc-line-strong);
  border-radius:24px;
  background:var(--oc-panel);
  color:var(--oc-text);
  box-shadow:0 28px 80px rgba(0,0,0,.55);
}
.order-chat-settings-card>header{
  position:sticky;
  top:0;
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-bottom:1px solid var(--oc-line);
  background:color-mix(in srgb,var(--oc-panel) 96%,transparent);
  backdrop-filter:blur(18px);
}
.order-chat-settings-card>header div{display:grid;gap:3px}
.order-chat-settings-card>header strong{font-size:20px;letter-spacing:-.02em}
.order-chat-settings-card>header span{color:var(--oc-muted);font-size:10px}
.order-chat-settings-card>header small{color:var(--oc-muted);font-size:9px;font-weight:600}
.order-chat-settings-card>header button{
  position:relative;
  width:38px;
  min-width:38px;
  min-height:38px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--oc-panel-2);
  color:var(--oc-text);
  box-shadow:inset 0 0 0 1px var(--oc-line);
  font-size:0;
}
.order-chat-readers{
  position:fixed;
  inset:0;
  z-index:1100;
  display:grid;
  place-items:center;
  padding:16px;
  background:rgba(0,0,0,.64);
  backdrop-filter:blur(8px);
}
.order-chat-readers-card{
  width:min(460px,100%);
  max-height:min(680px,calc(100dvh - 32px));
  display:grid;
  grid-template-rows:auto auto auto minmax(0,1fr);
  overflow:hidden;
  border:1px solid var(--oc-line-strong);
  border-radius:22px;
  background:var(--oc-panel);
  color:var(--oc-text);
  box-shadow:0 28px 80px rgba(0,0,0,.58);
}
.order-chat-readers-card>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:15px 17px;
  border-bottom:1px solid var(--oc-line);
  background:var(--oc-panel-2);
}
.order-chat-readers-card>header div{display:grid;gap:3px}
.order-chat-readers-card>header span{color:var(--oc-muted);font-size:9px;font-weight:850;letter-spacing:.12em}
.order-chat-readers-card>header strong{font-size:17px}
.order-chat-readers-card>header button{
  width:38px;
  min-width:38px;
  min-height:38px;
  padding:0;
  border:1px solid var(--oc-line);
  border-radius:50%;
  background:var(--oc-panel-3);
  color:var(--oc-text);
  font-size:21px;
  line-height:1;
}
.order-chat-readers-message{
  display:grid;
  gap:5px;
  margin:14px 15px 8px;
  padding:12px 14px;
  border:1px solid var(--oc-line);
  border-radius:14px;
  background:var(--oc-panel-2);
}
.order-chat-readers-message strong{color:var(--oc-accent-2);font-size:11px}
.order-chat-readers-message p{max-height:92px;margin:0;overflow:auto;color:var(--oc-text);font-size:13px;line-height:1.4;white-space:pre-wrap}
.order-chat-readers-message time{color:var(--oc-muted);font-size:9px}
.order-chat-readers-summary{padding:8px 16px;color:var(--oc-muted);font-size:11px;font-weight:850}
.order-chat-readers-list{min-height:0;display:grid;align-content:start;gap:7px;padding:0 15px 15px;overflow:auto}
.order-chat-readers-list article{
  min-height:58px;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border:1px solid var(--oc-line);
  border-radius:13px;
  background:var(--oc-panel-2);
}
.order-chat-readers-list article>span{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:color-mix(in srgb,var(--reader-color,var(--oc-accent)) 17%,var(--oc-panel));
  color:var(--reader-color,var(--oc-accent-2));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--reader-color,var(--oc-accent)) 50%,transparent);
  font-size:11px;
  font-weight:900;
}
.order-chat-readers-list article>div{min-width:0;display:grid;gap:3px}
.order-chat-readers-list article strong{overflow:hidden;color:var(--oc-text);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.order-chat-readers-list article small,.order-chat-readers-list article time{color:var(--oc-muted);font-size:9px}
.order-chat-readers-list article time{max-width:110px;text-align:right}
.order-chat-readers-list>p{margin:0;padding:18px 10px;color:var(--oc-muted);font-size:11px;line-height:1.5;text-align:center}
.order-chat-settings-group{display:grid;gap:15px;padding:21px 22px;border-bottom:1px solid color-mix(in srgb,var(--oc-line) 74%,transparent)}
.order-chat-settings-group>strong{color:var(--oc-accent-2);font-size:12px}
.order-chat-wallpapers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.order-chat-wallpapers button{
  min-width:0;
  display:grid;
  gap:7px;
  padding:7px;
  border:1px solid var(--oc-line);
  border-radius:13px;
  background:var(--oc-panel-2);
  color:var(--oc-muted);
  font-size:10px;
}
.order-chat-wallpapers button.is-active{
  border-color:var(--oc-line-strong);
  color:var(--oc-accent-2);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--oc-accent) 12%,transparent);
}
.order-chat-wallpapers i{
  position:relative;
  overflow:hidden;
  height:74px;
  border-radius:8px;
  background-color:var(--oc-chat-bg);
}
.order-chat-wallpapers i::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--oc-pattern-color);
  mask-image:url("../patterns/viola-chat-restaurant.png");
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:cover;
  -webkit-mask-image:url("../patterns/viola-chat-restaurant.png");
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:cover;
}
.order-chat-wallpapers i[data-preview="0"]::after{
  opacity:1;
}
.order-chat-wallpapers i[data-preview="1"]::after{
  opacity:.38;
}
.order-chat-wallpapers i[data-preview="2"]::after{display:none}
.order-chat-setting-row{
  width:100%;
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
  border:0;
  background:transparent;
  color:var(--oc-text);
  text-align:left;
}
.order-chat-setting-row>span{display:grid;gap:3px}
.order-chat-setting-row b{color:var(--oc-text)!important;font-size:12px}
.order-chat-setting-row small{color:var(--oc-muted);font-size:9px}
.order-chat-setting-row em{color:var(--oc-accent-2);font-size:11px;font-style:normal;font-weight:850}
.order-chat-setting-row input{width:42px;height:24px;accent-color:var(--oc-accent)}
.order-chat-color-title{
  color:var(--oc-muted);
  font-size:9px;
  font-weight:800;
}
.order-chat-colors{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
}
.order-chat-colors[data-order-chat-colors="backgroundColor"]{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.order-chat-colors[data-order-chat-colors="backgroundColor"] button{
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  justify-items:start;
  gap:7px;
  padding:7px;
}
.order-chat-colors button{
  min-width:0;
  display:grid;
  justify-items:center;
  gap:5px;
  padding:7px 3px;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:var(--oc-muted);
}
.order-chat-colors button:hover,
.order-chat-colors button.is-active{
  border-color:var(--oc-line-strong);
  background:var(--oc-panel-2);
  color:var(--oc-text);
}
.order-chat-colors i{
  --swatch:linear-gradient(135deg,var(--oc-panel-2),var(--oc-accent));
  width:31px;
  height:31px;
  display:block;
  border:2px solid color-mix(in srgb,var(--oc-text) 38%,transparent);
  border-radius:50%;
  background:var(--swatch);
  box-shadow:0 4px 12px var(--oc-shadow);
}
.order-chat-colors[data-order-chat-colors="backgroundColor"] i{
  width:36px;
  height:36px;
}
.order-chat-colors[data-order-chat-colors="backgroundColor"] button:not([data-color-value="theme"]) i{
  background:linear-gradient(135deg,var(--swatch) 0 66%,var(--swatch-line) 66% 100%);
}
.order-chat-colors span{
  width:100%;
  overflow:hidden;
  font-size:7px;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.order-chat-select-row{
  min-height:58px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(120px,180px) auto;
  align-items:center;
  gap:8px;
  padding:8px 0;
  border-bottom:1px solid color-mix(in srgb,var(--oc-line) 64%,transparent);
}
.order-chat-select-row>span,
.order-chat-volume-row>span{color:var(--oc-text);font-size:11px;font-weight:800}
.order-chat-select-row select{
  min-width:0;
  height:38px;
  padding:0 28px 0 10px;
  border:1px solid var(--oc-line);
  border-radius:10px;
  background:var(--oc-panel-2);
  color:var(--oc-text);
  font-size:10px;
}
.order-chat-select-row button,
.order-chat-settings-footer button{
  min-height:38px;
  padding:0 10px;
  border:1px solid var(--oc-line);
  border-radius:10px;
  background:var(--oc-panel-2);
  color:var(--oc-accent-2);
  font-size:9px;
  font-weight:850;
}
.order-chat-volume-row{display:grid;gap:8px}
.order-chat-volume-row>span{display:flex;justify-content:space-between;gap:12px}
.order-chat-volume-row b{color:var(--oc-accent-2)!important;font-size:inherit}
.order-chat-volume-row input{width:100%;accent-color:var(--oc-accent)}
.order-chat-settings-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 18px;
}
.order-chat-settings-footer span{min-width:0;color:var(--oc-muted);font-size:9px}
.order-chat-settings-footer span.is-error{color:#ffaaa4}
.order-chat-settings-footer button{flex:0 0 auto}
.order-chat-retention-note{
  display:grid;
  gap:3px;
  margin:14px 22px 0;
  padding:13px 14px;
  border:1px solid color-mix(in srgb,var(--oc-accent) 24%,var(--oc-line));
  border-radius:14px;
  background:color-mix(in srgb,var(--oc-accent) 7%,var(--oc-panel-2));
}
.order-chat-retention-note strong{color:var(--oc-accent-2);font-size:11px}
.order-chat-retention-note span{color:var(--oc-muted);font-size:9px;line-height:1.45}

.order-chat-settings-preview{
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  border-bottom:1px solid var(--oc-line);
  background:color-mix(in srgb,var(--oc-panel-2) 68%,var(--oc-panel));
}
.order-chat-settings-preview>div:last-child{display:grid;gap:4px}
.order-chat-settings-preview>div:last-child strong{color:var(--oc-accent-2);font-size:12px}
.order-chat-settings-preview>div:last-child span{color:var(--oc-muted);font-size:9px;line-height:1.45}
.order-chat-settings-preview__wall{
  position:relative;
  isolation:isolate;
  min-height:166px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  overflow:hidden;
  padding:16px;
  border:1px solid var(--oc-line);
  border-radius:16px;
  background:var(--oc-chat-bg);
  box-shadow:inset 0 0 30px color-mix(in srgb,var(--oc-page) 38%,transparent);
}
.order-chat-settings-preview__wall::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--oc-pattern-color);
  opacity:1;
  mask:url("../patterns/viola-chat-restaurant.png") no-repeat center/cover;
  -webkit-mask:url("../patterns/viola-chat-restaurant.png") no-repeat center/cover;
}
.order-chat[data-chat-background="1"] .order-chat-settings-preview__wall::before{opacity:.38}
.order-chat[data-chat-background="2"] .order-chat-settings-preview__wall::before{display:none}
.order-chat-settings-preview__day{
  align-self:center;
  padding:4px 9px;
  border-radius:999px;
  background:color-mix(in srgb,var(--oc-panel) 90%,transparent);
  color:var(--oc-muted);
  font-size:8px;
}
.order-chat-settings-preview__bubble{
  max-width:78%;
  display:grid;
  gap:3px;
  padding:8px 10px;
  border-radius:13px;
  color:var(--oc-text);
  box-shadow:0 5px 14px var(--oc-shadow);
}
.order-chat-settings-preview__bubble.is-other{align-self:flex-start;background:var(--oc-bubble-other-user)}
.order-chat-settings-preview__bubble.is-own{align-self:flex-end;background:var(--oc-bubble-own-user)}
.order-chat-settings-preview__bubble b{color:var(--oc-accent-2)!important;font-size:8px}
.order-chat-settings-preview__bubble p{margin:0;color:var(--oc-text)!important;font-size:10px;line-height:1.35}
.order-chat-settings-preview__bubble time{justify-self:end;color:var(--oc-muted);font-size:7px}
.order-chat[data-chat-font="small"] .order-chat-settings-preview__bubble p{font-size:9px}
.order-chat[data-chat-font="large"] .order-chat-settings-preview__bubble p{font-size:12px}
.order-chat[data-chat-bubbles="classic"] .order-chat-settings-preview__bubble.is-other{border-radius:3px 13px 13px 13px}
.order-chat[data-chat-bubbles="classic"] .order-chat-settings-preview__bubble.is-own{border-radius:13px 3px 13px 13px}
.order-chat[data-chat-roles="hidden"] .order-chat-settings-preview__bubble b{display:none}

.order-chat-settings-group__head{
  display:block;
  align-items:center;
}
.order-chat-settings-group__head>div{display:grid;gap:2px}
.order-chat-settings-group__head strong{color:var(--oc-text);font-size:15px}
.order-chat-settings-group__head small{color:var(--oc-muted);font-size:10px;font-weight:600}

.order-chat-wallpapers button>span{min-width:0;display:grid;gap:2px;text-align:left}
.order-chat-wallpapers button>span b{color:var(--oc-text)!important;font-size:9px}
.order-chat-wallpapers button>span small{overflow:hidden;color:var(--oc-muted);font-size:7px;text-overflow:ellipsis;white-space:nowrap}
.order-chat-setting-block{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,270px);
  align-items:center;
  gap:14px;
  padding:10px 0;
  border-bottom:1px solid color-mix(in srgb,var(--oc-line) 64%,transparent);
}
.order-chat-setting-block>span{display:grid;gap:3px}
.order-chat-setting-block b{color:var(--oc-text)!important;font-size:11px}
.order-chat-setting-block small{color:var(--oc-muted);font-size:8px}
.order-chat-segmented{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:3px;
  padding:3px;
  border:1px solid var(--oc-line);
  border-radius:11px;
  background:var(--oc-panel-2);
}
.order-chat-segmented.is-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.order-chat-segmented button{
  min-height:34px;
  padding:0 8px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--oc-muted);
  font-size:9px;
  font-weight:850;
}
.order-chat-segmented button.is-active{
  background:var(--oc-accent);
  color:var(--oc-page);
  box-shadow:0 5px 14px color-mix(in srgb,var(--oc-accent) 22%,transparent);
}
.order-chat-setting-row.is-switch{
  min-height:50px;
  padding:8px 0;
  border-bottom:1px solid color-mix(in srgb,var(--oc-line) 64%,transparent);
}
.order-chat-setting-row.is-switch:last-child{border-bottom:0}
.order-chat-setting-row.is-switch input{
  appearance:none;
  position:relative;
  width:44px;
  height:25px;
  flex:0 0 auto;
  border:1px solid var(--oc-line);
  border-radius:999px;
  background:var(--oc-panel-2);
  transition:background .16s ease,border-color .16s ease;
}
.order-chat-setting-row.is-switch input::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:17px;
  height:17px;
  border-radius:50%;
  background:var(--oc-muted);
  box-shadow:0 2px 6px var(--oc-shadow);
  transition:transform .16s ease,background .16s ease;
}
.order-chat-setting-row.is-switch input:checked{
  border-color:var(--oc-accent);
  background:var(--oc-accent);
}
.order-chat-setting-row.is-switch input:checked::after{
  transform:translateX(19px);
  background:var(--oc-page);
}
.order-chat-select-row>span{display:grid;gap:3px}
.order-chat-select-row>span b{color:var(--oc-text)!important;font-size:10px}
.order-chat-select-row>span small{color:var(--oc-muted);font-size:8px}
.order-chat-select-row button{width:38px;min-width:38px;padding:0;font-size:10px}

@media(max-width:760px){
  .order-chat{
    height:max(420px,calc(var(--oc-viewport-height,100dvh) - 148px));
    max-height:780px;
    display:grid;
    grid-template-rows:auto auto auto minmax(0,1fr);
  }
  .order-chat.is-keyboard-open{
    position:fixed;
    top:var(--oc-viewport-offset-top,0px);
    right:0;
    bottom:auto;
    left:0;
    z-index:500;
    width:100%;
    height:var(--oc-viewport-height,100dvh);
    min-height:0;
    max-height:none;
    background:var(--oc-page);
  }
  .order-chat.is-keyboard-open .order-chat-appbar,
  .order-chat.is-keyboard-open .order-chat-layout{
    border-radius:0;
  }
  .order-chat.is-keyboard-open .order-chat-layout{
    height:100%;
  }
  .order-chat-appbar{
    grid-row:1;
    min-height:52px;
    gap:6px;
    padding:6px;
    border-radius:16px 16px 0 0;
  }
  .order-chat-tabs{gap:3px;padding:3px;border-radius:12px}
  .order-chat-tabs button{min-height:34px;padding-inline:6px;border-radius:9px;font-size:11px}
  .order-chat-menu-toggle{width:38px;min-width:38px;min-height:38px;border-radius:11px}
  .order-chat-menu{
    position:fixed;
    top:max(62px,calc(env(safe-area-inset-top) + 56px));
    right:max(8px,env(safe-area-inset-right));
    width:min(250px,calc(100vw - 16px));
  }
  .order-chat-search{grid-row:2;min-height:46px;padding:5px 7px}
  .order-chat-search input{height:36px;font-size:12px}
  .order-chat-filter{grid-row:3;min-height:36px;font-size:9px}
  .order-chat-filter button{font-size:9px}
  .order-chat-layout{
    grid-row:4;
    width:100%;
    height:auto;
    min-height:0;
    grid-template-columns:1fr;
    border-radius:0 0 16px 16px;
  }
  .order-chat-orders{border-right:0}
  .order-chat-orders-head{min-height:56px;padding:9px 11px}
  .order-chat-list{max-height:none}
  .order-chat-ticket{min-height:70px;grid-template-columns:42px minmax(0,1fr) auto;padding:8px 10px}
  .order-chat-ticket-avatar{width:42px;height:42px;font-size:13px}
  .order-chat-ticket-copy strong{font-size:12px}
  .order-chat-thread{display:none;height:100%;min-height:0}
  .order-chat.has-selection .order-chat-orders{display:none}
  .order-chat.has-selection .order-chat-thread{display:grid}
  .order-chat-thread-empty{display:none}
  .order-chat-thread-active{height:100%;min-height:0}
  .order-chat-thread-head{
    min-height:54px;
    grid-template-columns:auto auto minmax(0,1fr) auto;
    gap:7px;
    padding:6px 8px;
  }
  .order-chat-mobile-back{display:grid;place-items:center;width:34px;min-width:34px;min-height:34px}
  .order-chat-thread-avatar{width:38px;height:38px;font-size:12px}
  .order-chat-thread-title strong{font-size:13px}
  .order-chat-thread-title span{font-size:9px}
  .order-chat-details-toggle{min-height:34px;padding-inline:8px;font-size:9px}
  .order-chat-items{grid-template-columns:1fr;padding:7px}
  .order-chat-stagebar{gap:2px;padding:7px 4px}
  .order-chat-stagebar span{font-size:7px}
  .order-chat-stagebar span::after{left:calc(50% + 13px);width:calc(100% - 21px)}
  .order-chat-stagebar i{width:22px;height:22px}
  .order-chat-activity{padding:10px 9px 12px}
  .order-chat-thread::before{
    opacity:1;
    mask-size:cover;
    -webkit-mask-size:cover;
  }
  .order-chat[data-chat-background="1"] .order-chat-thread::before{
    opacity:.38;
  }
  .order-chat-message{max-width:86%;padding-right:32px}
  .order-chat-message p{font-size:12px}
  .order-chat-pin{opacity:.62}
  .order-chat-event{width:98%;min-height:58px;grid-template-columns:38px minmax(0,1fr) auto;padding:8px 9px}
  .order-chat-event-avatar{width:36px;height:36px;font-size:10px}
  .order-chat-event-copy strong{font-size:11px}
  .order-chat-process-actions{
    min-height:0;
    display:grid;
    gap:6px;
    padding:7px max(7px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));
  }
  .order-chat-process-actions>div:first-child{display:none}
  .order-chat-process-actions>div:last-child{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:6px}
  .order-chat-process-actions button{width:100%;min-height:42px;padding-inline:7px}
  .order-chat-composer{
    padding:7px max(7px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));
  }
  .order-chat-composer textarea{min-height:42px;padding:10px 13px;font-size:12px}
  .order-chat-send{width:44px;min-width:44px;min-height:44px}
}

@media(max-width:360px){
  .order-chat{height:max(420px,calc(var(--oc-viewport-height,100dvh) - 140px))}
  .order-chat-appbar{gap:4px;padding:5px}
  .order-chat-tabs button{font-size:10px}
  .order-chat-menu-toggle{width:36px;min-width:36px;min-height:36px}
  .order-chat-ticket{grid-template-columns:38px minmax(0,1fr) auto;gap:3px 8px}
  .order-chat-ticket-avatar{width:38px;height:38px}
  .order-chat-thread-head{grid-template-columns:auto auto minmax(0,1fr);gap:5px}
  .order-chat-details-toggle{grid-column:1/-1;width:100%;min-height:30px}
  .order-chat-thread-active{grid-template-rows:auto auto auto minmax(0,1fr) auto auto}
  .order-chat-message{max-width:90%}
  .order-chat-stagebar b{font-size:6.5px}
}

@media(max-width:560px){
  .order-chat-readers{align-items:end;padding:0}
  .order-chat-readers-card{width:100%;max-height:82dvh;border-radius:24px 24px 0 0;border-bottom:0}
  .order-chat-readers-card>header{padding:14px 15px}
  .order-chat-readers-message{margin-inline:12px}
  .order-chat-readers-summary{padding-inline:14px}
  .order-chat-readers-list{padding-inline:12px;padding-bottom:max(14px,env(safe-area-inset-bottom))}
  .order-chat-readers-list article{grid-template-columns:40px minmax(0,1fr);gap:9px}
  .order-chat-readers-list article time{grid-column:2;max-width:none;text-align:left}
  .order-chat-settings{align-items:end;padding:0}
  .order-chat-settings-card{width:100%;max-height:92dvh;border-radius:24px 24px 0 0;border-bottom:0}
  .order-chat-settings-card>header{padding:13px}
  .order-chat-settings-preview{grid-template-columns:1fr;padding:12px 13px}
  .order-chat-settings-preview>div:last-child{display:none}
  .order-chat-settings-preview__wall{min-height:145px}
  .order-chat-wallpapers i{height:62px}
  .order-chat-settings-group{padding:14px 13px}
  .order-chat-colors{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
  .order-chat-colors[data-order-chat-colors="backgroundColor"]{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .order-chat-colors[data-order-chat-colors="backgroundColor"] button{
    grid-template-columns:1fr;
    justify-items:center;
    gap:4px;
    padding:5px 2px;
  }
  .order-chat-colors button{padding-inline:1px}
  .order-chat-colors i{width:28px;height:28px}
  .order-chat-colors span{display:none}
  .order-chat-colors[data-order-chat-colors="backgroundColor"] span{
    display:block;
    font-size:6.5px;
  }
  .order-chat-setting-block{grid-template-columns:1fr;gap:8px}
  .order-chat-select-row{grid-template-columns:minmax(0,1fr) minmax(108px,1fr) 38px}
  .order-chat-select-row button{grid-column:auto;width:38px}
  .order-chat-settings-footer{padding:11px 13px}
  .order-chat-retention-note{margin:12px 13px 0}
}