/* CSS for Chatgpt Button from user request */
:root {
  --c-bg: #fff;
  --c-text: #0b1220;
  --c-sub: #64748b;
  --c-border: rgba(15, 23, 42, .12);
  --c-border-hover: rgba(15, 23, 42, .18);
  --c-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 30px rgba(2, 6, 23, .10);
  --c-shadow-hover: 0 2px 6px rgba(0, 0, 0, .06), 0 16px 40px rgba(2, 6, 23, .12);
  --c-ring: 0 0 0 4px rgba(16, 185, 129, .18);
  --c-accent: #10b981;
}

.cbtn {
  width: min(520px, 100%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  color: var(--c-text);
  box-shadow: var(--c-shadow);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  font: 600 14px/1.15 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  text-align: left;
}

.cbtn:hover {
  border-color: var(--c-border-hover);
  box-shadow: var(--c-shadow-hover);
  transform: translateY(-1px);
}

.cbtn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(2, 6, 23, .10);
}

.cbtn:focus-visible {
  outline: none;
  box-shadow: var(--c-shadow), var(--c-ring);
  border-color: rgba(16, 185, 129, .45);
}

.cbtn__icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background:
    radial-gradient(circle at 25% 20%, rgba(16, 185, 129, .40), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(16, 185, 129, .25), transparent 55%),
    linear-gradient(135deg, #0b1220 0%, #111827 60%, #0b1220 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.cbtn__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cbtn__sub {
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  color: var(--c-sub);
}

.cbtn__trail {
  margin-left: auto;
  opacity: .65;
  transition: transform .12s ease, opacity .12s ease;
}

.cbtn:hover .cbtn__trail {
  transform: translateX(2px);
  opacity: .85;
}
