:root {
  --desmos-chip-color: #E6FFF5;
  --geogebra-chip-color: #E8E1FF;
  --graspable-chip-color: #F2F2F2;
  --chatoame-dual-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.08);
  --chatoame-dual-chip-size: 30px;
  --chatoame-dual-icon-size: 18px;
}

.chatoame-dual-portal-group {
  position: static;
  display: inline-flex;
  vertical-align: middle;
  margin-inline-start: 8px;
  margin-block: 2px;
  pointer-events: auto;
}

.chatoame-dual-portal-group-equation .chatoame-dual-portal-stack {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.chatoame-dual-portal-group-table .chatoame-dual-portal-stack {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.chatoame-dual-polypad-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--chatoame-dual-chip-size);
  height: var(--chatoame-dual-chip-size);
  min-width: var(--chatoame-dual-chip-size);
  min-height: var(--chatoame-dual-chip-size);
  border-radius: 999px;
  box-shadow: var(--chatoame-dual-shadow);
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  line-height: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  border-width: 1px;
  border-style: solid;
}

.chatoame-dual-polypad-btn:hover,
.chatoame-dual-polypad-btn:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.02);
  outline: none;
}

.chatoame-dual-polypad-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.18), var(--chatoame-dual-shadow);
}

.chatoame-dual-polypad-btn.service-desmos {
  background: var(--desmos-chip-color);
  border-color: rgba(25, 135, 84, 0.18);
}

.chatoame-dual-polypad-btn.service-geogebra {
  background: var(--geogebra-chip-color);
  border-color: rgba(103, 58, 183, 0.18);
}

.chatoame-dual-polypad-btn.service-graspable {
  background: var(--graspable-chip-color);
  border-color: rgba(90, 90, 90, 0.16);
}

.chatoame-dual-polypad-icon {
  width: var(--chatoame-dual-icon-size);
  height: var(--chatoame-dual-icon-size);
  min-width: var(--chatoame-dual-icon-size);
  min-height: var(--chatoame-dual-icon-size);
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.chatoame-dual-polypad-btn.service-geogebra .chatoame-dual-polypad-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  transform: translateY(0.25px) scale(1.08);
  transform-origin: center;
}

.desmos-modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; z-index: 99999; }
.desmos-modal[hidden] { display: none !important; }
.desmos-modal.open { display: flex; }
.desmos-modal .desmos-dialog { background: #fff; width: min(900px, 95vw); height: min(600px, 85vh); border-radius: .5rem; box-shadow: 0 10px 30px rgba(0,0,0,.35); position: relative; overflow: hidden; }
.desmos-modal .desmos-header { padding: .5rem .75rem; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; }
.desmos-modal .desmos-close { cursor: pointer; border: none; background: transparent; font-size: 1.25rem; line-height: 1; }
.desmos-modal .desmos-body { width: 100%; height: calc(100% - 44px); }