@import url('https://fonts.googleapis.com/css2?family=-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif');

#macos-dock-extension {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  z-index: 999999;
  display: flex;
  align-items: end;
  justify-content: center;
  /* padding: 8px 16px 12px 16px; */
  padding: 12px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border-radius: 16px 16px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: none;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

#macos-dock-extension.visible {
  transform: translateX(-50%) translateY(0);
}

#macos-dock-extension .dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  margin: 0 4px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
}

#macos-dock-extension .dock-item:hover {
  transform: translateY(-8px) scale(1.2);
}

#macos-dock-extension .dock-item .app-icon {
  width: 64px;
  height: 64px;
  /* border-radius: 12px; */
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); */
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#macos-dock-extension .dock-item:hover .app-icon {
  /* box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); */
}

#macos-dock-extension .dock-item .tooltip {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

#macos-dock-extension .dock-item:hover .tooltip {
  opacity: 1;
}

#macos-dock-extension .dock-item .tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.8);
}

#macos-dock-extension .dock-trigger-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 999998;
  background: transparent;
}

/* Solve button styles matching Jira's button design */
.solve-button {
  /* Base button styles matching Jira buttons */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  color: var(--ds-text, #292A2E);
  border: none;
  border-radius: 3px;
  padding: 0 12px;
  height: 32px;
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  margin-left: 8px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
  border-color: var(--ds-border, #0b120e24);
  border-width: var(--ds-border-width, 1px);
  border-style: solid;
}

/* Hover state */
.solve-button:hover {
  /* background-color: #0065ff; */
  /* box-shadow: 0 1px 1px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31); */
  background: var(--ds-background-neutral-hovered, #0B120E24);  
}

/* Active/pressed state */
/* .solve-button:active {
  background-color: #0747a6;
  box-shadow: inset 0 0 0 1px rgba(9, 30, 66, 0.08);
} */

/* Focus state */
.solve-button:focus {
  outline: none;
  /* outline: 2px solid #4c9aff;
  outline-offset: 2px; */
} 

/* Button on board cards - slightly smaller */
.solve-button-card {
  height: 28px;
  font-size: 13px;
  padding: 0 10px;
  margin: 8px 8px 4px 8px;
  width: calc(100% - 16px);
}

/* Ensure button appears correctly in different Jira layouts */
[data-testid*="issue.views"] .solve-button,
[class*="actions"] .solve-button {
  vertical-align: middle;
}

/* Board card specific styling */
[data-testid*="software-board"] .solve-button-card {
  margin-top: 8px;
}
