/*!*******************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[3]!../../packages/workspace/src/components/ui.module.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************/
.ui_pageHead__7fgkK {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--p-4);
  flex-wrap: wrap;
  margin-bottom: var(--p-5);
}

.ui_title__4m3Gv {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.ui_subtitle__BtbC2 {
  margin: 4px 0 0;
  color: var(--p-ink-3);
  font-size: 13px;
  max-width: 68ch;
}

/*
  A card, padded.

  It used to have no padding at all, which made a flush card the default and a
  padded one something you had to remember — so most callers added their own
  `style={{ padding: '12px 16px' }}`, each a slightly different pair of numbers,
  and the two that forgot had their contents touching the border.

  The default is now the case that needs padding, because that is the case
  where forgetting looks broken. A table opts out with `cardFlush`: its cells
  carry their own padding, and a table inset inside a padded card has a margin
  its own header row does not, which reads as a mistake.
*/
.ui_card__TlL6T {
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  overflow: hidden;
  padding: var(--p-4) var(--p-5);
}

.ui_cardFlush__DUgTE {
  padding: 0;
}

.ui_table__w5Efx {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.ui_table__w5Efx th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-ink-3);
  padding: var(--p-3) var(--p-5);
  border-bottom: 1px solid var(--p-line);
  white-space: nowrap;
}

.ui_table__w5Efx td {
  padding: var(--p-3) var(--p-5);
  border-bottom: 1px solid var(--p-line);
  vertical-align: top;
}

.ui_table__w5Efx tr:last-child td {
  border-bottom: none;
}

.ui_table__w5Efx tbody tr:hover {
  background: var(--p-surface-2);
}

/* Wide tables scroll inside their own box; the page never does. */
.ui_scroll__xnGi8 {
  overflow-x: auto;
}

.ui_pill__uYusx {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
}

.ui_pillOk__Vr2BR {
  color: var(--p-ok);
  border-color: color-mix(in srgb, var(--p-ok) 40%, transparent);
  background: color-mix(in srgb, var(--p-ok) 12%, transparent);
}

.ui_pillWarn__pmyND {
  color: var(--p-warn);
  border-color: color-mix(in srgb, var(--p-warn) 40%, transparent);
  background: color-mix(in srgb, var(--p-warn) 12%, transparent);
}

.ui_pillBad__y4XG8 {
  color: var(--p-bad);
  border-color: color-mix(in srgb, var(--p-bad) 40%, transparent);
  background: color-mix(in srgb, var(--p-bad) 12%, transparent);
}

.ui_pillIdle__RGY77 {
  color: var(--p-idle);
  border-color: var(--p-line-strong);
}

.ui_button__VrJ5s {
  border: 1px solid var(--p-line-strong);
  background: var(--p-surface-2);
  color: var(--p-ink);
  border-radius: var(--p-radius);
  padding: 7px 13px;
  font-size: 13px;
  cursor: pointer;
}

.ui_button__VrJ5s:hover:not(:disabled) {
  border-color: var(--p-accent);
}

.ui_button__VrJ5s:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui_buttonPrimary__RjmRZ {
  background: var(--p-accent);
  border-color: var(--p-accent);
  color: var(--p-accent-ink);
  font-weight: 600;
}

.ui_buttonDanger__ZpENY:hover:not(:disabled) {
  border-color: var(--p-bad);
  color: var(--p-bad);
}

.ui_empty__O9vNw {
  padding: 32px 16px;
  text-align: center;
  color: var(--p-ink-3);
  font-size: 13px;
}

.ui_error__SKbJi {
  margin-bottom: var(--p-section);
  border: 1px solid color-mix(in srgb, var(--p-bad) 45%, transparent);
  background: color-mix(in srgb, var(--p-bad) 10%, transparent);
  color: var(--p-bad);
  border-radius: var(--p-radius);
  padding: var(--p-3) var(--p-4);
  font-size: 13px;
}

/*
  A skeleton rather than a spinner: the row count is known before the data is,
  so the page does not jump when it arrives.
*/
.ui_skeleton__ovsb7 {
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--p-surface-2), var(--p-line), var(--p-surface-2));
  background-size: 200% 100%;
  animation: ui_shimmer__mjY9v 1.4s ease-in-out infinite;
}

@keyframes ui_shimmer__mjY9v {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui_skeleton__ovsb7 {
    animation: none;
  }
}

.ui_muted__2Hnda {
  color: var(--p-ink-3);
}

.ui_mono__w7dS7 {
  font-family: var(--p-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}

/*
  A text input, matching the buttons rather than the browser default.

  The console has had no input outside the sign-in form until now — the audit
  filter is the first, and a raw `<input>` beside these buttons is the one
  element that would make the page look unfinished.
*/
.ui_input__qxrsB {
  border: 1px solid var(--p-line-strong);
  background: var(--p-surface);
  color: var(--p-ink);
  border-radius: var(--p-radius);
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  min-width: 240px;
}

.ui_input__qxrsB:focus {
  outline: none;
  border-color: var(--p-accent);
}

.ui_input__qxrsB::-moz-placeholder {
  color: var(--p-muted);
}

.ui_input__qxrsB::placeholder {
  color: var(--p-muted);
}

/*
  A row of controls above a table. Used by the audit filter, and the reason it
  is a class rather than inline styles: the next filtered table should not have
  to guess at the same gaps.
*/
.ui_filters__FKGo7 {
  margin-bottom: var(--p-section);
  display: flex;
  gap: var(--p-4);
  align-items: center;
  flex-wrap: wrap;
}

.ui_filterLabel__C2VzZ {
  display: flex;
  gap: 8px;
  align-items: center;
}

/*
  A label for the block beneath it.

  Above the card rather than inside it, so it lines up with the card's own left
  edge and with every other section label on the page. A heading inside a
  padded card sits indented from the table it names, which reads as two
  unrelated things rather than one labelled thing.
*/
.ui_sectionTitle__EshGg {
  margin: 0 0 var(--p-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-ink-3);
}

/* One block after another, with the page's own rhythm between them. */
.ui_stack__nOBI0 {
  display: flex;
  flex-direction: column;
  gap: var(--p-section);
}

/*
  A group heading inside a table.

  Rather than one table per group: separate tables size their columns
  independently, so the same column lands in a different place in each and
  three stacked tables read as three unrelated things. Columns that do not line
  up are the loudest thing on a page of small text.
*/
.ui_groupRow__l_ZQC {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-ink-3);
  background: var(--p-bg);
  padding: var(--p-2) var(--p-5);
  border-bottom: 1px solid var(--p-line);
}

/*
  A conversation, read top to bottom.

  Inbound and outbound are told apart by *alignment and ground*, not by colour
  alone — an agent scanning a long thread is looking for the shape of who spoke
  last, and on a busy screen colour is the first thing that stops registering.
*/
.ui_thread__89Nqk {
  display: flex;
  flex-direction: column;
  gap: var(--p-4);
}

.ui_msg__G9VCD {
  max-width: 78%;
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  padding: var(--p-3) var(--p-4);
  background: var(--p-surface);
}

/* The customer. Left, plain ground — the default the eye reads as "them". */
.ui_msgIn__x3aSv {
  align-self: flex-start;
}

/* Us. Right, and tinted, so a thread ending on the left is one owing a reply. */
.ui_msgOut__VD7HR {
  align-self: flex-end;
  background: var(--p-surface-2);
  border-color: var(--p-line-strong);
}

/*
  An internal note. Full width and visibly not a message, because the one
  mistake that must be impossible here is mistaking it for something the
  customer can see.
*/
.ui_msgNote__UdVG_ {
  align-self: stretch;
  max-width: 100%;
  background: transparent;
  border-style: dashed;
}

.ui_msgHead__AFSGO {
  display: flex;
  gap: var(--p-3);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--p-ink-3);
}

.ui_msgWho__aRkGN {
  font-weight: 600;
  color: var(--p-ink-2);
}

/*
  `pre-wrap`, because these bodies are plain text that people wrote with
  paragraphs in them. Collapsing the whitespace turns an itinerary into a wall.
*/
.ui_msgBody__3V1W1 {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.55;
}

.ui_msgFailed__UER_L {
  margin-top: 6px;
  font-size: 12px;
  color: var(--p-bad);
}

.ui_textarea__Dejfp {
  width: 100%;
  border: 1px solid var(--p-line-strong);
  background: var(--p-surface);
  color: var(--p-ink);
  border-radius: var(--p-radius);
  padding: var(--p-3);
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
  min-height: 96px;
}

.ui_textarea__Dejfp:focus {
  outline: none;
  border-color: var(--p-accent);
}

/* Label/value pairs beside a conversation — the trip clock, the assignee. */
.ui_facts__Rj84_ {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px var(--p-4);
  font-size: 13px;
}

.ui_factLabel__oSwQU {
  color: var(--p-ink-3);
  white-space: nowrap;
}

/*
  Two columns on a wide screen, one when there is not room. The conversation
  comes first in the source so it is what a narrow screen shows first — the
  facts are reference, the thread is the work.
*/
.ui_split__jqIG1 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--p-section);
  align-items: start;
}

@media (max-width: 900px) {
  .ui_split__jqIG1 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
  The inbox: a list you work from, beside the thing you are working on.

  Narrower than `.split` because a message list needs less width than a
  conversation does — and the conversation is where the attention goes.
*/
.ui_inbox__ffOPe {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: var(--p-section);
  align-items: start;
}

@media (max-width: 1000px) {
  .ui_inbox__ffOPe {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ui_inboxList__7n3sX {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  background: var(--p-surface);
  overflow: hidden;
}

.ui_inboxItem__3Ci_k {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--p-line);
  background: transparent;
  color: inherit;
  font: inherit;
  padding: var(--p-3) var(--p-4);
  cursor: pointer;
}

.ui_inboxItem__3Ci_k:last-child {
  border-bottom: 0;
}

.ui_inboxItem__3Ci_k:hover {
  background: var(--p-surface-2);
}

/*
  The open one. A left bar rather than only a tint, because the tint is also
  the hover state and an agent moving the mouse down the list would otherwise
  lose track of where they actually are.
*/
.ui_inboxItemOpen__GGejq {
  background: var(--p-surface-2);
  box-shadow: inset 3px 0 0 var(--p-accent);
}

.ui_inboxTop__zSWyd {
  display: flex;
  justify-content: space-between;
  gap: var(--p-3);
  align-items: baseline;
  font-size: 12px;
  color: var(--p-ink-3);
}

.ui_inboxSubject__EgOjD {
  margin: 3px 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  /* Two lines, then stop. A six-line subject pushes the next ticket off. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*
  The last thing said. Muted, one line, and clipped — it is a hint about
  whether this needs opening, not the message itself.
*/
.ui_inboxPreview__S_AH5 {
  font-size: 12px;
  color: var(--p-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The customer spoke last. This is the one that owes an answer. */
.ui_inboxPreviewIn__AX9ij {
  color: var(--p-ink-2);
  font-weight: 500;
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[3]!../../packages/workspace/src/components/shell.module.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************/
.shell_shell__nF666 {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
}

@media (max-width: 860px) {
  .shell_shell__nF666 {
    grid-template-columns: 1fr;
  }
  .shell_sidebar__hsYqb {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--p-line);
  }
  .shell_nav__TdHWI {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.shell_sidebar__hsYqb {
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--p-line);
  background: var(--p-surface);
  padding: var(--p-5) var(--p-3);
  display: flex;
  flex-direction: column;
  gap: var(--p-5);
}

.shell_brand__2TUTO {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px;
}

.shell_brandName__eSk7u {
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 16px;
}

/*
  The one label that stops an operator confusing this with an agency's own
  dashboard. It is not decoration.
*/
.shell_brandRole__epzDS {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p-accent);
}

.shell_nav__TdHWI {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shell_navItem__NtxJx {
  padding: var(--p-2) var(--p-3);
  border-radius: var(--p-radius);
  color: var(--p-ink-2);
  font-size: 13.5px;
}

.shell_navItem__NtxJx:hover {
  background: var(--p-surface-2);
  color: var(--p-ink);
}

.shell_navItemActive__zwjmS {
  background: var(--p-surface-2);
  color: var(--p-ink);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--p-accent);
}

.shell_who__DYoNC {
  margin-top: auto;
  border-top: 1px solid var(--p-line);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--p-ink-3);
}

.shell_whoEmail__LcVNX {
  color: var(--p-ink-2);
  word-break: break-all;
}

.shell_signOut__4kb62 {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--p-line-strong);
  color: var(--p-ink-2);
  border-radius: var(--p-radius);
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
}

.shell_signOut__4kb62:hover {
  border-color: var(--p-accent);
  color: var(--p-ink);
}

/*
  The page's breathing room.

  Was 28/32, which on a 1440px screen put the first card almost against the
  sidebar rule and the title almost against the top of the window. An operator
  console should feel dense in its rows, not in its margins.
*/
.shell_main__KXnBO {
  padding: var(--p-6) var(--p-7) 80px;
  max-width: 1280px;
}

@media (max-width: 640px) {
  .shell_main__KXnBO {
    padding: var(--p-5) var(--p-4) var(--p-7);
  }
}

/*
  A group of pages under one heading.

  Spaced away from the flat items above and below it so the heading reads as
  a heading rather than as a disabled link — which is what an unclickable
  item at the same rhythm as its neighbours looks like.
*/
.shell_navGroup__GO1KK {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--p-2) 0;
}

.shell_navGroupLabel__J7v_e {
  padding: var(--p-2) var(--p-3) 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--p-ink-3);
}

.shell_navChild__pbCVm {
  padding-left: var(--p-5, 20px);
}

/*
  The gate somebody sees when the browser is carrying no session.

  A card rather than a redirect, because a silent bounce to another app's
  sign-in page loses where they were trying to go and looks like the link was
  broken. Saying "there is one sign-in for every Jenova app" is also the only
  place a person is ever told that, and it is the thing that makes nine apps
  feel like one product rather than nine.
*/
.shell_gate__BTDQQ {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--p-5);
}

.shell_gateCard__sDnbY {
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  padding: var(--p-6);
  max-width: 420px;
  text-align: center;
}

.shell_wordmark__Gb5Bh {
  font-size: 18px;
  font-weight: 700;
  color: var(--p-accent);
  margin-bottom: var(--p-3);
}

.shell_gateText__5l_ch {
  color: var(--p-ink-2);
  margin: 0 0 var(--p-5);
  font-size: 13.5px;
}

.shell_gateAction__Z3xVC {
  display: inline-block;
  padding: var(--p-2) var(--p-5);
  border-radius: var(--p-radius);
  background: var(--p-accent);
  color: var(--p-accent-ink);
  font-weight: 600;
}