.smart-hr-native-scene {
  --shr-accent: #007aff;
  --shr-window: #f2f2f7;
  --shr-content: #f7f7f7;
  --shr-card-base: #fff;
  --shr-card: #dce3eb;
  --shr-card: color-mix(
    in srgb,
    color-mix(in srgb, var(--shr-card-base) 85%, var(--shr-accent) 15%) 82%,
    #000 18%
  );
  --shr-primary: #1d1d1f;
  --shr-secondary: #515154;
  --shr-tertiary: #8e8e93;
  --shr-border: rgb(0 0 0 / 10%);
  --shr-divider: rgb(0 0 0 / 14%);
  --shr-hover: rgb(0 0 0 / 5%);
  --shr-sidebar: rgb(255 255 255 / 78%);
  --shr-toolbar: #a9c8ea;
  --shr-toolbar: color-mix(in srgb, var(--shr-card-base) 65%, var(--shr-accent) 35%);
  --shr-lohn-opacity: 1;
  --shr-plan-opacity: 0;
  --shr-chat-opacity: 0;
  --shr-chat-type: 1;
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 32rem;
  margin: 0;
  padding: clamp(3.25rem, 5vw, 4.5rem) 0 clamp(3.25rem, 5vw, 4.25rem);
  overflow: visible;
  border: 0;
  isolation: isolate;
  background: transparent;
  color: var(--color-ink);
  container-name: smart-hr-native;
  container-type: inline-size;
}

:root[data-theme="dark"] .smart-hr-native-scene {
  --shr-window: #1e1e1e;
  --shr-content: #1e1e1e;
  --shr-card-base: #2e2e30;
  --shr-card: #24282e;
  --shr-card: color-mix(
    in srgb,
    color-mix(in srgb, var(--shr-card-base) 85%, var(--shr-accent) 15%) 82%,
    #000 18%
  );
  --shr-primary: #f5f5f7;
  --shr-secondary: #b8b8bd;
  --shr-tertiary: #8e8e93;
  --shr-border: rgb(255 255 255 / 10%);
  --shr-divider: rgb(255 255 255 / 16%);
  --shr-hover: rgb(255 255 255 / 6%);
  --shr-sidebar: rgb(28 28 30 / 84%);
  --shr-toolbar: #253b50;
  --shr-toolbar: color-mix(in srgb, var(--shr-card-base) 65%, var(--shr-accent) 35%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .smart-hr-native-scene {
    --shr-window: #1e1e1e;
    --shr-content: #1e1e1e;
    --shr-card-base: #2e2e30;
    --shr-card: #24282e;
    --shr-card: color-mix(
      in srgb,
      color-mix(in srgb, var(--shr-card-base) 85%, var(--shr-accent) 15%) 82%,
      #000 18%
    );
    --shr-primary: #f5f5f7;
    --shr-secondary: #b8b8bd;
    --shr-tertiary: #8e8e93;
    --shr-border: rgb(255 255 255 / 10%);
    --shr-divider: rgb(255 255 255 / 16%);
    --shr-hover: rgb(255 255 255 / 6%);
    --shr-sidebar: rgb(28 28 30 / 84%);
    --shr-toolbar: #253b50;
    --shr-toolbar: color-mix(in srgb, var(--shr-card-base) 65%, var(--shr-accent) 35%);
  }
}

.smart-hr-native-scene__disclosure {
  position: absolute;
  z-index: 5;
  top: clamp(0.7rem, 1.4vw, 1.2rem);
  left: clamp(1rem, 2.2vw, 2rem);
  display: flex;
  align-items: center;
  margin: 0;
  gap: 0.65rem;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
}

.smart-hr-native-scene__disclosure strong {
  padding: 0.38rem 0.54rem;
  border: 1px solid color-mix(in srgb, currentcolor 42%, transparent);
  border-radius: 0.3rem;
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
  letter-spacing: 0.16em;
}

.smart-hr-native-scene__disclosure span {
  opacity: 0.68;
}

.smart-hr-native-scene__presentation {
  position: relative;
  z-index: 1;
  min-height: 0;
  padding-top: 0;
  perspective: 90rem;
  isolation: isolate;
}

.smart-hr-native-scene__presentation::before,
.smart-hr-native-scene__presentation::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.smart-hr-native-scene__presentation::before {
  inset: -14% -7%;
  background:
    radial-gradient(circle at 28% 38%, color-mix(in srgb, var(--shr-accent) 28%, transparent) 0, transparent 34%),
    radial-gradient(circle at 76% 62%, var(--levitation-halo-secondary) 0, transparent 31%);
  opacity: 0.68;
}

.smart-hr-native-scene__presentation::after {
  right: 8%;
  bottom: -8%;
  left: 8%;
  height: 18%;
  background: radial-gradient(ellipse, var(--levitation-contact) 0, transparent 72%);
  opacity: 0.86;
}

.smart-hr-native-window {
  position: relative;
  display: grid;
  grid-template-rows: 2.75rem minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 25rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 1rem;
  background: var(--shr-window);
  color: var(--shr-primary);
  box-shadow:
    0 3.8rem 7rem -3rem var(--levitation-shadow),
    0 1.4rem 2.8rem -1.5rem var(--levitation-contact),
    0 0 0 1px var(--levitation-edge);
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 450;
  line-height: 1.3;
  transform: translateZ(0);
}

.smart-hr-native-window::before {
  position: absolute;
  z-index: 0;
  inset: 2.75rem 0 0;
  background: linear-gradient(180deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
  content: "";
  opacity: 0.06;
  pointer-events: none;
}

.smart-hr-native-titlebar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--shr-border);
  gap: 0.72rem;
  background: var(--shr-toolbar);
  color: var(--shr-primary);
}

.smart-hr-native-traffic-lights {
  display: flex;
  gap: 0.38rem;
}

.smart-hr-native-traffic-lights i {
  width: 0.65rem;
  aspect-ratio: 1;
  border: 1px solid rgb(0 0 0 / 12%);
  border-radius: 50%;
  background: #ff5f57;
}

.smart-hr-native-traffic-lights i:nth-child(2) {
  background: #febc2e;
}

.smart-hr-native-traffic-lights i:nth-child(3) {
  background: #28c840;
}

.smart-hr-native-sidebar-toggle {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.2rem;
  border-radius: 0.42rem;
  background: color-mix(in srgb, var(--shr-primary) 9%, transparent);
}

.smart-hr-native-sidebar-toggle::before {
  position: absolute;
  inset: 0.42rem 0.34rem;
  border: 1px solid var(--shr-secondary);
  border-radius: 0.14rem;
  content: "";
}

.smart-hr-native-sidebar-toggle::after {
  position: absolute;
  top: 0.42rem;
  bottom: 0.42rem;
  left: 0.66rem;
  width: 1px;
  background: var(--shr-secondary);
  content: "";
}

.smart-hr-native-titlebar__titles {
  position: relative;
  width: 10rem;
  height: 1.2rem;
}

.smart-hr-native-titlebar__titles strong {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 650;
  text-overflow: ellipsis;
  visibility: hidden;
  white-space: nowrap;
}

.smart-hr-native-titlebar__titles [data-native-title="lohn"] {
  opacity: var(--shr-lohn-opacity);
  visibility: visible;
}

.smart-hr-native-titlebar__titles [data-native-title="dienstplan"] {
  opacity: var(--shr-plan-opacity);
}

.smart-hr-native-titlebar__titles [data-native-title="chat"] {
  opacity: var(--shr-chat-opacity);
}

.smart-hr-native-titlebar__spacer {
  flex: 1;
}

.smart-hr-native-app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

.smart-hr-native-rail {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  padding: 0.55rem 0.38rem;
  border-right: 1px solid var(--shr-border);
  gap: 0.28rem;
  overflow: hidden;
  background: var(--shr-sidebar);
  backdrop-filter: blur(1.2rem) saturate(130%);
}

.smart-hr-native-rail__brand,
.smart-hr-native-rail__item {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.55rem;
  min-height: 2.55rem;
  flex: 0 0 2.55rem;
  border-radius: 0.75rem;
}

.smart-hr-native-rail__brand {
  margin-bottom: 0.28rem;
  background: color-mix(in srgb, var(--shr-accent) 18%, var(--shr-card));
  color: var(--shr-accent);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: -0.03em;
}

.smart-hr-native-rail__item::before {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--shr-accent) 56%, transparent);
  border-radius: inherit;
  background: color-mix(in srgb, var(--shr-accent) 22%, transparent);
  content: "";
  opacity: 0;
}

.smart-hr-native-rail__item::after {
  position: relative;
  z-index: 1;
  color: var(--shr-secondary);
  content: attr(data-mark);
  font-size: 1.05rem;
  font-weight: 650;
}

.smart-hr-native-rail__item--bottom {
  margin-top: auto;
}

.smart-hr-native-rail__item[data-native-rail-item="lohn"]::before {
  opacity: var(--shr-lohn-opacity);
}

.smart-hr-native-rail__item[data-native-rail-item="dienstplan"]::before {
  opacity: var(--shr-plan-opacity);
}

.smart-hr-native-rail__item[data-native-rail-item="chat"]::before {
  opacity: var(--shr-chat-opacity);
}

.smart-hr-native-rail__item[data-native-rail-item="lohn"]::after,
.smart-hr-native-rail__item[data-native-rail-item="dienstplan"]::after,
.smart-hr-native-rail__item[data-native-rail-item="chat"]::after {
  color: color-mix(in srgb, var(--shr-primary) 40%, var(--shr-accent));
}

.smart-hr-native-workspace {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--shr-content) 94%, transparent);
}

.has-showcase-motion .smart-hr-native-workspace::after {
  position: absolute;
  z-index: 5;
  top: 3.45rem;
  left: 5%;
  width: 90%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--shr-accent) 14%, #2dd4bf 82%, transparent);
  box-shadow: 0 0 0.75rem color-mix(in srgb, var(--shr-accent) 48%, transparent);
  content: "";
  opacity: clamp(
    0.12,
    calc(0.18 + (var(--web-payroll-focus, 0) * 0.34) + (var(--web-schedule, 0) * 0.18) + (var(--web-chat, 0) * 0.12)),
    0.82
  );
  pointer-events: none;
  transform: translate3d(
      calc(var(--web-chat, 0) * 0.75rem),
      calc((var(--web-schedule, 0) * 2.25rem) - (var(--web-chat, 0) * 1.15rem)),
      0
    )
    scaleX(calc(0.16 + (var(--web-payroll-focus, 0) * 0.84)));
  transform-origin: 0 50%;
  will-change: opacity, transform;
}

.smart-hr-native-layer {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.smart-hr-native-lohn {
  display: flex;
  flex-direction: column;
  padding: clamp(0.85rem, 1.8vw, 1.35rem);
  opacity: 1;
  visibility: visible;
}

.smart-hr-native-view-heading {
  display: flex;
  align-items: center;
  margin-bottom: 0.9rem;
  gap: 0.45rem;
}

.smart-hr-native-view-heading h4 {
  margin: 0;
  font-size: clamp(1.1rem, 2.1cqi, 1.65rem);
  font-weight: 730;
  letter-spacing: -0.035em;
  line-height: 1;
}

.smart-hr-native-guide-dot {
  display: grid;
  place-items: center;
  width: 1.15rem;
  aspect-ratio: 1;
  border: 1px solid var(--shr-divider);
  border-radius: 50%;
  color: var(--shr-secondary);
  font-size: 0.58rem;
  font-weight: 700;
}

.smart-hr-native-lohn__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 0;
  margin: 0;
  padding: 0;
  gap: clamp(0.5rem, 1cqi, 0.8rem);
  list-style: none;
}

.smart-hr-native-lohn-card {
  --tile-accent: #0a84ff;
  --shr-card-step: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 4.85rem;
  padding: clamp(0.5rem, 0.9cqi, 0.75rem);
  border: 1px solid var(--shr-border);
  border-radius: 0.75rem;
  gap: 0.24rem;
  background: var(--shr-card);
  box-shadow: 0 0.15rem 0.5rem rgb(0 0 0 / 8%);
  overflow: hidden;
}

.smart-hr-native-lohn-card:nth-child(2) { --tile-accent: #34c759; }
.smart-hr-native-lohn-card:nth-child(3) { --tile-accent: #bf5af2; }
.smart-hr-native-lohn-card:nth-child(4) { --tile-accent: #ff9f0a; }
.smart-hr-native-lohn-card:nth-child(5) { --tile-accent: #ff375f; }
.smart-hr-native-lohn-card:nth-child(6) { --tile-accent: #5e5ce6; }
.smart-hr-native-lohn-card:nth-child(7),
.smart-hr-native-lohn-card:nth-child(10) { --tile-accent: #ff453a; }
.smart-hr-native-lohn-card:nth-child(8) { --tile-accent: #5ac8fa; }
.smart-hr-native-lohn-card:nth-child(9) { --tile-accent: #ffd60a; }
.smart-hr-native-lohn-card:nth-child(11) { --tile-accent: #00c7be; }
.smart-hr-native-lohn-card:nth-child(12) { --tile-accent: #a2845e; }

.smart-hr-native-lohn-card:nth-child(2) { --shr-card-step: 0.27; }
.smart-hr-native-lohn-card:nth-child(3) { --shr-card-step: 0.54; }
.smart-hr-native-lohn-card:nth-child(4) { --shr-card-step: 0.81; }
.smart-hr-native-lohn-card:nth-child(5) { --shr-card-step: 1.08; }
.smart-hr-native-lohn-card:nth-child(6) { --shr-card-step: 1.35; }
.smart-hr-native-lohn-card:nth-child(7) { --shr-card-step: 1.62; }
.smart-hr-native-lohn-card:nth-child(8) { --shr-card-step: 1.89; }
.smart-hr-native-lohn-card:nth-child(9) { --shr-card-step: 2.16; }
.smart-hr-native-lohn-card:nth-child(10) { --shr-card-step: 2.43; }
.smart-hr-native-lohn-card:nth-child(11) { --shr-card-step: 2.7; }
.smart-hr-native-lohn-card:nth-child(12) { --shr-card-step: 2.97; }

.has-showcase-motion .smart-hr-native-lohn-card::after {
  --shr-card-thread: clamp(0, calc((var(--web-payroll-focus, 0) * 4) - var(--shr-card-step)), 1);
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--tile-accent) 72%, transparent);
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--tile-accent) 13%, transparent), transparent 62%);
  box-shadow: inset 0 0 0.8rem color-mix(in srgb, var(--tile-accent) 10%, transparent);
  content: "";
  opacity: var(--shr-card-thread);
  pointer-events: none;
  transform: translate3d(calc((1 - var(--shr-card-thread)) * -18%), 0, 0)
    scaleX(calc(0.88 + (var(--shr-card-thread) * 0.12)));
  transform-origin: 0 50%;
}

.smart-hr-native-lohn-card__icon {
  position: relative;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
  margin-bottom: 0.08rem;
  color: var(--tile-accent);
}

.smart-hr-native-lohn-card__icon::before {
  position: absolute;
  inset: 0.18rem 0.28rem 0.18rem 0.12rem;
  border: 0.12rem solid currentcolor;
  border-radius: 0.25rem;
  content: "";
}

.smart-hr-native-lohn-card__icon::after {
  position: absolute;
  right: 0.02rem;
  bottom: 0.08rem;
  width: 0.62rem;
  aspect-ratio: 1;
  border: 0.11rem solid var(--shr-card);
  border-radius: 50%;
  background: currentcolor;
  box-shadow: 0 0 0 1px color-mix(in srgb, currentcolor 78%, transparent);
  content: "";
}

.smart-hr-native-lohn-card strong {
  overflow: hidden;
  color: var(--shr-primary);
  font-size: clamp(0.58rem, 0.9cqi, 0.77rem);
  font-weight: 650;
  line-height: 1.15;
  text-overflow: ellipsis;
}

.smart-hr-native-lohn-card small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--shr-secondary);
  font-size: clamp(0.48rem, 0.72cqi, 0.61rem);
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.smart-hr-native-plan {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: var(--shr-content);
}

.smart-hr-native-plan__tabs {
  display: flex;
  padding: 0.45rem 0.7rem;
  gap: 0.5rem;
  background: color-mix(in srgb, var(--shr-secondary) 8%, transparent);
}

.smart-hr-native-plan__tabs span {
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--shr-secondary) 10%, transparent);
  color: var(--shr-primary);
  font-size: 0.67rem;
  font-weight: 650;
}

.smart-hr-native-plan__tabs .is-active {
  border-width: 2px;
  border-color: var(--shr-accent);
  padding: calc(0.5rem - 1px) calc(0.75rem - 1px);
  background: color-mix(in srgb, var(--shr-accent) 22%, transparent);
  color: var(--shr-accent);
}

.smart-hr-native-plan__toolbar {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 2.45rem;
  padding: 0.42rem 0.6rem;
  overflow: hidden;
  border-bottom: 1px solid var(--shr-divider);
  gap: 0.34rem;
  color: var(--shr-secondary);
  font-size: 0.56rem;
  white-space: nowrap;
}

.smart-hr-native-plan__toolbar > span {
  padding: 0.27rem 0.44rem;
  border-radius: 0.38rem;
  background: var(--shr-hover);
}

.smart-hr-native-plan__toolbar .is-selected {
  background: color-mix(in srgb, var(--shr-accent) 16%, transparent);
  color: var(--shr-accent);
  font-weight: 650;
}

.smart-hr-native-plan__period strong {
  color: var(--shr-primary);
}

.smart-hr-native-plan__toolbar-spacer {
  flex: 1;
  background: transparent !important;
}

.smart-hr-native-plan__grid {
  min-width: 43rem;
  min-height: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--shr-content) 97%, var(--shr-accent) 3%);
}

.smart-hr-native-plan__row {
  display: grid;
  grid-template-columns: 8.8rem repeat(7, minmax(3.15rem, 1fr)) 3.3rem;
  min-height: clamp(3.2rem, 5cqi, 4.5rem);
}

.smart-hr-native-plan__row > span {
  display: grid;
  place-items: center;
  min-width: 0;
  border-right: 1px solid var(--shr-divider);
  border-bottom: 1px solid var(--shr-divider);
}

.smart-hr-native-plan__row--header {
  min-height: 2rem;
  color: var(--shr-secondary);
  font-size: 0.55rem;
  font-weight: 650;
}

.smart-hr-native-plan__row--header span {
  background: color-mix(in srgb, var(--shr-primary) 5%, transparent);
}

.smart-hr-native-plan__department {
  min-height: 1.2rem;
  padding: 0.22rem 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--shr-accent) 22%, var(--shr-divider));
  background: color-mix(in srgb, var(--shr-accent) 8%, var(--shr-content));
  color: var(--shr-accent);
  font-size: 0.48rem;
  font-weight: 750;
  letter-spacing: 0.045em;
}

.smart-hr-native-plan__employee {
  display: flex !important;
  justify-content: flex-start !important;
  padding: 0 0.6rem;
  gap: 0.45rem;
}

.smart-hr-native-plan__employee i {
  width: 1.35rem;
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--shr-accent) 65%, #2dd4bf);
}

.smart-hr-native-plan__employee b {
  position: relative;
  display: block;
  width: 4.8rem;
  height: 1.1rem;
}

.smart-hr-native-plan__employee b::before,
.smart-hr-native-plan__employee b::after {
  position: absolute;
  left: 0;
  height: 0.24rem;
  border-radius: 999px;
  background: var(--shr-secondary);
  content: "";
  opacity: 0.3;
}

.smart-hr-native-plan__employee b::before {
  top: 0.15rem;
  width: 80%;
}

.smart-hr-native-plan__employee b::after {
  bottom: 0.1rem;
  width: 52%;
}

.smart-hr-native-shift {
  align-self: stretch;
  margin: 0.18rem;
  border: 1px solid rgb(255 255 255 / 17%);
  border-radius: 0.38rem;
  color: #fff;
  font-size: clamp(0.45rem, 0.7cqi, 0.58rem);
  font-weight: 720;
  line-height: 1.05;
  text-align: center;
}

.smart-hr-native-shift small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.42rem;
  font-weight: 560;
}

.smart-hr-native-shift--gray { background: #8e8e93; }
.smart-hr-native-shift--orange { background: #ff9500; }
.smart-hr-native-shift--purple { background: #8a4fff; }
.smart-hr-native-shift--red { background: #ff3b30; }
.smart-hr-native-shift--green { background: #34c759; }
.smart-hr-native-shift--teal { background: #30bfc7; }

.smart-hr-native-plan__tools {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.4rem 0.65rem;
  overflow: hidden;
  border-top: 1px solid var(--shr-divider);
  gap: 0.35rem;
  color: var(--shr-secondary);
  font-size: 0.5rem;
  white-space: nowrap;
}

.smart-hr-native-plan__tools b {
  min-width: 2rem;
  padding: 0.37rem 0.45rem;
  border-radius: 0.38rem;
  color: #fff;
  font-size: 0.5rem;
  text-align: center;
}

.smart-hr-native-plan__tools .is-gray { background: #8e8e93; }
.smart-hr-native-plan__tools .is-orange { background: #ff9500; }
.smart-hr-native-plan__tools .is-green { background: #34c759; }
.smart-hr-native-plan__tools .is-red { background: #ff3b30; }
.smart-hr-native-plan__tools .is-teal { background: #30bfc7; }
.smart-hr-native-plan__tools .is-brown { background: #a2845e; }

.smart-hr-native-plan__tools-spacer {
  flex: 1;
}

.smart-hr-native-chat {
  display: grid;
  grid-template-columns: 2.8rem minmax(11rem, 15.5rem) 2.3rem minmax(0, 1fr);
  min-width: 0;
  padding: 0.72rem 0.72rem 0.95rem 0;
  background: var(--shr-content);
}

.smart-hr-native-chat__band {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.smart-hr-native-chat__band::before {
  position: absolute;
  top: 46%;
  right: -20%;
  left: -20%;
  height: 1px;
  background: color-mix(in srgb, var(--shr-accent) 75%, #2dd4bf);
  box-shadow: 0 0 0.6rem color-mix(in srgb, var(--shr-accent) 55%, transparent);
  content: "";
  transform: rotate(14deg);
  transform-origin: center;
}

.smart-hr-native-chat__band--second::before {
  transform: rotate(-14deg);
}

.smart-hr-native-chat__band i {
  position: absolute;
  z-index: 1;
  top: 42%;
  left: 15%;
  width: 0.42rem;
  aspect-ratio: 1;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #2dd4bf;
  box-shadow: 0 0 0.5rem #2dd4bf;
}

.smart-hr-native-chat__band i:nth-child(2) {
  top: 52%;
  left: 48%;
}

.smart-hr-native-chat__band i:nth-child(3) {
  top: 38%;
  left: 78%;
}

.smart-hr-native-chat__sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--shr-border);
  border-radius: 1rem;
  background: var(--shr-card);
  box-shadow: 0 0.2rem 0.8rem rgb(0 0 0 / 9%);
}

.smart-hr-native-chat__sidebar section {
  margin-bottom: 0.35rem;
}

.smart-hr-native-chat__sidebar h5 {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0.55rem 0.5rem 0.35rem;
  color: var(--shr-primary);
  font-size: 0.67rem;
  font-weight: 750;
}

.smart-hr-native-chat__sidebar h5 i {
  color: var(--shr-secondary);
  font-style: normal;
}

.smart-hr-native-channel {
  display: flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.38rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  gap: 0.45rem;
  color: var(--shr-primary);
  font-size: 0.65rem;
  font-weight: 560;
}

.smart-hr-native-channel__icon {
  position: relative;
  display: block;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  color: var(--shr-secondary);
  font-style: normal;
}

.smart-hr-native-channel__icon[data-channel-icon="outlet"]::before {
  position: absolute;
  right: 0.18rem;
  bottom: 0.12rem;
  left: 0.18rem;
  height: 0.48rem;
  border: 0.1rem solid currentcolor;
  border-top: 0;
  border-radius: 0.08rem;
  content: "";
}

.smart-hr-native-channel__icon[data-channel-icon="outlet"]::after {
  position: absolute;
  top: 0.12rem;
  left: 0.22rem;
  width: 0.56rem;
  height: 0.56rem;
  border-top: 0.11rem solid currentcolor;
  border-left: 0.11rem solid currentcolor;
  content: "";
  transform: rotate(45deg);
}

.smart-hr-native-channel__icon[data-channel-icon="department"]::before {
  position: absolute;
  top: 0.09rem;
  left: 0.36rem;
  width: 0.3rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentcolor;
  content: "";
  box-shadow: -0.35rem 0.18rem 0 -0.04rem currentcolor, 0.35rem 0.18rem 0 -0.04rem currentcolor;
}

.smart-hr-native-channel__icon[data-channel-icon="department"]::after {
  position: absolute;
  right: 0.15rem;
  bottom: 0.08rem;
  left: 0.15rem;
  height: 0.42rem;
  border-radius: 50% 50% 30% 30%;
  background: currentcolor;
  content: "";
  opacity: 0.72;
}

.smart-hr-native-channel.is-selected {
  border-color: var(--shr-accent);
  background: color-mix(in srgb, var(--shr-accent) 22%, transparent);
  color: var(--shr-accent);
}

.smart-hr-native-chat__sidebar section > small {
  display: block;
  padding: 0.2rem 0.5rem 0.5rem;
  color: var(--shr-secondary);
  font-size: 0.5rem;
  line-height: 1.35;
}

.smart-hr-native-chat__audit {
  margin-top: auto;
  padding: 0.68rem 0.55rem 0.25rem;
  border-top: 1px solid var(--shr-divider);
  color: var(--shr-primary);
  font-size: 0.57rem;
  font-weight: 580;
}

.smart-hr-native-chat__detail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: 0.8rem;
  border: 1px solid var(--shr-border);
  border-radius: 1.1rem;
  background: color-mix(in srgb, var(--shr-primary) 3.5%, transparent);
}

.smart-hr-native-chat__hero {
  display: flex;
  align-items: center;
  margin-bottom: 0.65rem;
  gap: 0.7rem;
}

.smart-hr-native-chat__hero > span {
  display: grid;
  place-items: center;
  width: 2.65rem;
  aspect-ratio: 1;
  border-radius: 0.7rem;
  background: color-mix(in srgb, #34c759 15%, transparent);
  color: #34c759;
  font-size: 1.4rem;
  font-weight: 720;
}

.smart-hr-native-chat__hero h4 {
  margin: 0;
  color: var(--shr-primary);
  font-size: clamp(1rem, 1.8cqi, 1.55rem);
  font-weight: 730;
  letter-spacing: -0.035em;
}

.smart-hr-native-chat__conversation {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid var(--shr-divider);
}

.smart-hr-native-chat__conversation > header {
  display: flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--shr-divider);
  gap: 0.5rem;
}

.smart-hr-native-chat__conversation > header > span {
  color: var(--shr-secondary);
  font-size: 0.8rem;
}

.smart-hr-native-chat__conversation > header p {
  display: grid;
  margin: 0;
}

.smart-hr-native-chat__conversation > header strong {
  color: var(--shr-primary);
  font-size: 0.64rem;
}

.smart-hr-native-chat__conversation > header small {
  color: var(--shr-secondary);
  font-size: 0.49rem;
}

.smart-hr-native-chat__messages {
  min-height: 0;
  background-image:
    radial-gradient(circle at 18% 32%, color-mix(in srgb, var(--shr-accent) 5%, transparent) 0 0.35rem, transparent 0.4rem),
    radial-gradient(circle at 72% 61%, color-mix(in srgb, #2dd4bf 5%, transparent) 0 0.4rem, transparent 0.45rem);
}

.smart-hr-native-chat__composer {
  padding-top: 0.45rem;
  border-top: 1px solid var(--shr-divider);
}

.smart-hr-native-chat__commands {
  display: flex;
  margin-bottom: 0.35rem;
  gap: 0.3rem;
}

.smart-hr-native-chat__commands span {
  padding: 0.23rem 0.43rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--shr-secondary) 10%, transparent);
  color: var(--shr-secondary);
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.48rem;
  font-weight: 650;
}

.smart-hr-native-chat__input {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.2rem;
  padding-left: 0.62rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--shr-secondary) 10%, transparent);
  color: var(--shr-secondary);
  font-size: 0.57rem;
}

.smart-hr-native-chat__placeholder {
  opacity: calc(1 - var(--shr-chat-type));
}

.smart-hr-native-chat__typed {
  position: absolute;
  left: 0.62rem;
  overflow: hidden;
  color: var(--shr-primary);
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  white-space: nowrap;
  clip-path: inset(0 calc((1 - var(--shr-chat-type)) * 100%) 0 0);
}

.smart-hr-native-chat__input b {
  display: grid;
  place-items: center;
  width: 2.2rem;
  align-self: stretch;
  margin-left: auto;
  border-radius: 0.5rem;
  background: var(--shr-accent);
  color: #fff;
  font-size: 0.72rem;
}

.smart-hr-native-scene__caption {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 560;
  letter-spacing: 0.055em;
  line-height: 1.35;
  pointer-events: none;
  text-transform: uppercase;
}

.smart-hr-native-scene__caption span,
.smart-hr-native-scene__caption strong {
  position: absolute;
  max-width: min(23rem, 72%);
  text-wrap: balance;
}

.smart-hr-native-scene__caption span {
  bottom: 0;
  left: clamp(-1.2rem, -1.5vw, -0.3rem);
  opacity: 0.68;
}

.smart-hr-native-scene__caption strong {
  right: 0;
  bottom: 0;
  text-align: right;
}

.has-showcase-motion .smart-hr-native-scene {
  --shr-lohn-opacity: var(--web-lohn-opacity, 1);
  --shr-plan-opacity: var(--web-plan-opacity, 0);
  --shr-chat-opacity: var(--web-chat-opacity, 0);
  --shr-chat-type: var(--web-type, 0);
}

@media (min-width: 48.0625rem) and (min-height: 42rem) and (prefers-reduced-motion: no-preference) {
  .has-showcase-motion .showcase-panel[data-motion-mode="web"] {
    min-height: clamp(82rem, 218svh, 132rem);
  }

  .has-showcase-motion .showcase-panel[data-motion-mode="web"] .smart-hr-native-scene {
    opacity: 1;
    transform: none;
  }

  .has-showcase-motion .smart-hr-native-scene__presentation {
    transform: perspective(90rem)
      translate3d(0, calc(var(--scene-inverse) * 2.4rem), 0)
      rotateX(calc(var(--scene-inverse) * 2.8deg))
      scale(calc(0.96 + (var(--scene-progress) * 0.04)));
    transform-origin: 52% 82%;
    will-change: transform;
  }

  .has-showcase-motion .smart-hr-native-scene__presentation::before {
    opacity: calc(0.42 + (var(--scene-progress) * 0.26));
    transform: translate3d(calc(var(--scene-inverse) * -2.5rem), calc(var(--scene-inverse) * -1rem), 0);
    will-change: opacity, transform;
  }

  .has-showcase-motion .smart-hr-native-scene__presentation::after {
    transform: translate3d(calc(var(--scene-inverse) * 2rem), calc(var(--scene-inverse) * 1rem), 0)
      scaleX(calc(0.74 + (var(--scene-progress) * 0.26)));
    will-change: transform;
  }

  .has-showcase-motion .smart-hr-native-scene__caption span {
    opacity: calc(0.42 + (var(--scene-progress) * 0.26));
    transform: translate3d(calc(var(--scene-inverse) * -3rem), calc(var(--scene-inverse) * 1rem), 0);
    will-change: opacity, transform;
  }

  .has-showcase-motion .smart-hr-native-scene__caption strong {
    transform: translate3d(calc(var(--scene-inverse) * 3rem), calc(var(--scene-inverse) * -1rem), 0);
    will-change: transform;
  }
}

.has-showcase-motion .smart-hr-native-layer {
  visibility: visible;
  transition: none;
  will-change: clip-path, opacity, transform;
}

.has-showcase-motion .smart-hr-native-titlebar__titles strong {
  visibility: visible;
}

.has-showcase-motion .smart-hr-native-lohn {
  opacity: var(--shr-lohn-opacity);
  clip-path: inset(
    calc(var(--web-schedule, 0) * 42%)
    0
    calc(var(--web-schedule, 0) * 42%)
    0
    round 0.65rem
  );
  transform: translate3d(calc(var(--scene-progress, 0) * -0.55rem), 0, 0)
    scaleY(calc(1 - (var(--web-schedule, 0) * 0.04)));
}

.has-showcase-motion .smart-hr-native-plan {
  opacity: var(--shr-plan-opacity);
  clip-path: inset(
    calc((1 - var(--web-schedule, 0)) * 42%)
    calc(var(--web-chat, 0) * 42%)
    calc((1 - var(--web-schedule, 0)) * 42%)
    calc(var(--web-chat, 0) * 42%)
    round 0.65rem
  );
  transform: translate3d(0, calc((1 - var(--shr-plan-opacity)) * 0.35rem), 0)
    scaleX(calc(1 - (var(--web-chat, 0) * 0.06)));
}

.has-showcase-motion .smart-hr-native-chat {
  opacity: var(--shr-chat-opacity);
  clip-path: inset(
    0
    calc((1 - var(--web-chat, 0)) * 42%)
    0
    calc((1 - var(--web-chat, 0)) * 42%)
    round 0.65rem
  );
  transform: translate3d(0, 0, 0)
    scaleX(calc(0.94 + (var(--web-chat, 0) * 0.06)));
}

.has-showcase-motion .smart-hr-native-lohn-card {
  --shr-magnet-x: 0rem;
  --shr-magnet-y: 0rem;
  transform: translate3d(
      calc(var(--web-payroll-focus, 0) * var(--shr-magnet-x)),
      calc(var(--web-payroll-focus, 0) * var(--shr-magnet-y)),
      0
    )
    scale(calc(1 + (var(--web-payroll-focus, 0) * 0.018)));
}

.has-showcase-motion .smart-hr-native-lohn-card:nth-child(3n + 1) { --shr-magnet-x: 0.42rem; }
.has-showcase-motion .smart-hr-native-lohn-card:nth-child(3n) { --shr-magnet-x: -0.42rem; }
.has-showcase-motion .smart-hr-native-lohn-card:nth-child(-n + 3) { --shr-magnet-y: 0.32rem; }
.has-showcase-motion .smart-hr-native-lohn-card:nth-child(n + 10) { --shr-magnet-y: -0.32rem; }

.has-showcase-motion .smart-hr-native-plan__row > span {
  transform: scaleX(calc(0.86 + (var(--web-schedule, 0) * 0.14)));
  transform-origin: 50% 50%;
}

.has-showcase-motion .smart-hr-native-titlebar__titles [data-native-title="lohn"] {
  clip-path: inset(0 calc(var(--web-schedule, 0) * 100%) 0 0);
}

.has-showcase-motion .smart-hr-native-titlebar__titles [data-native-title="dienstplan"] {
  clip-path: inset(0 calc(var(--web-chat, 0) * 100%) 0 calc((1 - var(--web-schedule, 0)) * 100%));
}

.has-showcase-motion .smart-hr-native-titlebar__titles [data-native-title="chat"] {
  clip-path: inset(0 0 0 calc((1 - var(--web-chat, 0)) * 100%));
}

.has-showcase-motion .smart-hr-native-chat__sidebar {
  transform: translate3d(calc((1 - var(--shr-chat-opacity)) * -1.5rem), 0, 0);
}

.has-showcase-motion .smart-hr-native-chat__detail {
  transform: translate3d(calc((1 - var(--shr-chat-opacity)) * 1.5rem), 0, 0);
}

.has-showcase-motion .smart-hr-native-chat__band i:nth-child(2) {
  transform: translateY(calc((1 - var(--shr-chat-opacity)) * 0.8rem));
}

.has-showcase-motion .smart-hr-native-chat__band i:nth-child(3) {
  transform: translateY(calc((1 - var(--shr-chat-opacity)) * -0.55rem));
}

.has-showcase-motion .smart-hr-native-chat__band::before {
  opacity: var(--web-chat, 0);
  transform: rotate(14deg) scaleX(var(--web-chat, 0));
  transform-origin: center;
}

.has-showcase-motion .smart-hr-native-chat__band--second::before {
  transform: rotate(-14deg) scaleX(var(--web-chat, 0));
}

@media (max-width: 48rem), (max-height: 41.999rem) {
  .has-showcase-motion .smart-hr-native-scene {
    --shr-lohn-opacity: 1;
    --shr-plan-opacity: 0;
    --shr-chat-opacity: 0;
    --shr-chat-type: 1;
  }

  .has-showcase-motion .smart-hr-native-lohn {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .has-showcase-motion .smart-hr-native-plan,
  .has-showcase-motion .smart-hr-native-chat {
    opacity: 0;
    visibility: hidden !important;
    transform: none;
  }

  .has-showcase-motion .smart-hr-native-titlebar__titles [data-native-title="dienstplan"],
  .has-showcase-motion .smart-hr-native-titlebar__titles [data-native-title="chat"] {
    visibility: hidden !important;
  }
}

@container smart-hr-native (min-width: 66rem) {
  .smart-hr-native-lohn__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@container smart-hr-native (max-width: 54rem) {
  .smart-hr-native-app {
    grid-template-columns: 3.35rem minmax(0, 1fr);
  }

  .smart-hr-native-rail__brand,
  .smart-hr-native-rail__item {
    width: 2.2rem;
    min-height: 2.2rem;
    flex-basis: 2.2rem;
  }

  .smart-hr-native-rail__item[data-native-rail-item="berichte"],
  .smart-hr-native-rail__item[data-native-rail-item="news"] {
    display: none;
  }

  .smart-hr-native-lohn-card small {
    -webkit-line-clamp: 1;
  }

  .smart-hr-native-chat {
    grid-template-columns: 1.8rem minmax(9.5rem, 12rem) 1.5rem minmax(0, 1fr);
  }
}

@container smart-hr-native (max-width: 43rem) {
  .smart-hr-native-lohn__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .smart-hr-native-lohn-card {
    min-height: 4.1rem;
  }

  .smart-hr-native-lohn-card small {
    display: none;
  }

  .smart-hr-native-plan__grid {
    min-width: 37rem;
  }

  .smart-hr-native-plan__row {
    grid-template-columns: 6.5rem repeat(7, minmax(2.7rem, 1fr)) 3rem;
  }

  .smart-hr-native-plan__toolbar > span:nth-of-type(2),
  .smart-hr-native-plan__toolbar > span:nth-of-type(4),
  .smart-hr-native-plan__tools small {
    display: none;
  }

  .smart-hr-native-chat {
    grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr);
    padding-left: 0.65rem;
    gap: 0.55rem;
  }

  .smart-hr-native-chat__band {
    display: none;
  }

  .smart-hr-native-chat__hero {
    display: none;
  }

  .smart-hr-native-chat__detail {
    grid-template-rows: minmax(0, 1fr);
  }
}

@container smart-hr-native (max-width: 31rem) {
  .smart-hr-native-scene__disclosure span,
  .smart-hr-native-rail {
    display: none;
  }

  .smart-hr-native-app {
    grid-template-columns: minmax(0, 1fr);
  }

  .smart-hr-native-lohn {
    padding: 0.7rem;
  }

  .smart-hr-native-view-heading {
    margin-bottom: 0.55rem;
  }

  .smart-hr-native-lohn__grid {
    gap: 0.38rem;
  }

  .smart-hr-native-lohn-card {
    min-height: 3.25rem;
    padding: 0.38rem;
  }

  .smart-hr-native-lohn-card__icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .smart-hr-native-chat {
    grid-template-columns: 7.6rem minmax(0, 1fr);
    gap: 0.35rem;
  }

  .smart-hr-native-chat__sidebar section:nth-of-type(2) {
    display: none;
  }

  .smart-hr-native-chat__commands span:nth-child(n + 3) {
    display: none;
  }
}

@media (max-width: 48rem) {
  .smart-hr-native-scene {
    min-height: 41rem;
  }

  .smart-hr-native-window {
    min-height: 32rem;
  }

  .smart-hr-native-scene__caption span {
    bottom: 1.35rem;
    left: 0;
  }

  .smart-hr-native-scene__caption strong {
    right: 0;
    bottom: 0;
  }
}

@media (max-width: 34rem) {
  .smart-hr-native-scene__caption span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smart-hr-native-scene {
    --shr-lohn-opacity: 1;
    --shr-plan-opacity: 0;
    --shr-chat-opacity: 0;
    --shr-chat-type: 1;
  }

  .smart-hr-native-layer {
    transition: none !important;
    transform: none !important;
  }

  .smart-hr-native-lohn {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .smart-hr-native-plan,
  .smart-hr-native-chat {
    visibility: hidden !important;
  }

  .smart-hr-native-titlebar__titles [data-native-title="dienstplan"],
  .smart-hr-native-titlebar__titles [data-native-title="chat"] {
    visibility: hidden !important;
  }

  .smart-hr-native-chat__typed {
    clip-path: none;
  }
}