.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Rides the Settings font-size axis like the host row's own actions
     (ui-chat MessageIconActions), so slot-injected buttons match their
     siblings at every size. */
  width: calc(28px + var(--dsh-content-font-delta, 0px));
  height: calc(28px + var(--dsh-content-font-delta, 0px));
  padding: 6px;
  border: none;
  border-radius: 28px;
  background: transparent;
  color: var(--dsw-alias-label-tertiary);
  cursor: pointer;
}

/* The 16px glyphs follow the same px delta as the text they serve; the CSS
   edge overrides each svg's own width/height attributes. */
.action svg {
  width: calc(16px + var(--dsh-content-font-delta, 0px));
  height: calc(16px + var(--dsh-content-font-delta, 0px));
}

.action:hover {
  background: var(--dsw-alias-interactive-bg-hover);
  color: var(--dsw-alias-label-secondary);
}

.action:disabled {
  cursor: default;
  opacity: 0.4;
}

/* A recorded rating stays legible without hover, so the signal survives a
   pointer leaving the row. */
.action[data-active] {
  color: var(--dsw-alias-label-primary);
}

.noteOpen {
  max-width: 220px;
  overflow: hidden;
  padding: 0 8px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--dsw-alias-label-tertiary);
  font-size: var(--dsh-content-font-size-secondary, 13px);
  line-height: calc(28px + var(--dsh-content-font-delta, 0px));
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.noteOpen:hover,
.noteOpen[aria-expanded='true'] {
  background: var(--dsw-alias-interactive-bg-hover);
  color: var(--dsw-alias-label-secondary);
}

/* Portal surface: fixed in the viewport, left/top supplied inline from the
   trigger rect. Portaled panels must layer above modal overlays (z 1000). */
.notePanel {
  position: fixed;
  z-index: 1100;
  box-sizing: border-box;
  width: 320px;
  max-width: min(360px, calc(100vw - 24px));
  /* The width bound's counterpart. `resize: vertical` on the textarea lets the
     panel be dragged taller, and a panel taller than the viewport would push
     the placement clamp's upper bound below its own margin, so `top` would go
     negative and cut off the panel's head. Both bounds keep the 12px margin
     the clamp uses. */
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--dsw-alias-border-inverted);
  border-radius: 12px;
  background: var(--dsw-specific-menu);
  box-shadow: var(--dsw-shadow-lv3);
  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
}

.noteInput {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--dsw-alias-border-l2);
  border-radius: 8px;
  background: var(--dsw-alias-bg-layer-1);
  color: var(--dsw-alias-label-primary);
  font: inherit;
  font-size: 13px;
  resize: vertical;
}

.noteActions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.noteSave,
.noteCancel {
  height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 14px;
  font-size: 13px;
  cursor: pointer;
}

.noteSave {
  background: var(--dsw-alias-button-primary-fill);
  color: var(--dsw-alias-label-primary-foreground);
}

.noteSave:hover:not(:disabled) {
  background: var(--dsw-alias-button-primary-hover);
}

.noteSave:disabled {
  cursor: default;
  opacity: 0.4;
}

.noteCancel {
  background: transparent;
  color: var(--dsw-alias-label-tertiary);
}

.noteCancel:hover {
  background: var(--dsw-alias-interactive-bg-hover);
  color: var(--dsw-alias-label-secondary);
}

.failure {
  padding-left: 4px;
  color: var(--dsw-alias-label-tertiary);
  font-size: 13px;
  line-height: 20px;
}
