/* Cipta widget. All selectors are prefixed .cipta-ai- so nothing leaks into the calculator page. */
.cipta-ai-root {
  --cipta-ai-green: #3f9b63;
  --cipta-ai-lime: #8cc866; /* decoration only: 1.99:1 on white, too light for focus rings */
  --cipta-ai-deep: #2e7d4f; /* 5.05:1 with white text */
  --cipta-ai-deeper: #256b43; /* 6.44:1 with white text */
  --cipta-ai-ink: #1f2933;
  --cipta-ai-muted: #5b6770;
  --cipta-ai-line: #dfe5e1;
  --cipta-ai-bg: #fff;
  --cipta-ai-soft: #f3f7f4;
  --cipta-ai-gap: 16px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  color: var(--cipta-ai-ink);
}
.cipta-ai-root *, .cipta-ai-root *::before, .cipta-ai-root *::after { box-sizing: border-box; }
.cipta-ai-root [hidden] { display: none !important; }

.cipta-ai-sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Launcher: bottom-right, Task 7 may set --cipta-ai-lift / left / top inline */
.cipta-ai-launcher {
  position: fixed;
  right: var(--cipta-ai-gap);
  bottom: calc(var(--cipta-ai-gap) + var(--cipta-ai-lift, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 1040;
  width: 56px; height: 56px; padding: 0;
  border: 2px solid var(--cipta-ai-bg);
  border-radius: 50%;
  background: var(--cipta-ai-bg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  cursor: pointer;
  overflow: hidden;
  touch-action: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cipta-ai-launcher img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cipta-ai-launcher:hover { transform: scale(1.06); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.cipta-ai-launcher:focus-visible,
.cipta-ai-btn:focus-visible,
.cipta-ai-chip:focus-visible,
.cipta-ai-send:focus-visible,
.cipta-ai-copy:focus-visible,
.cipta-ai-log:focus-visible,
.cipta-ai-root a:focus-visible {
  outline: 3px solid var(--cipta-ai-deep); /* 5.05:1 on white */
  outline-offset: 2px;
}
.cipta-ai-header .cipta-ai-btn:focus-visible { outline-color: #fff; } /* white on the green header */
.cipta-ai-root.cipta-ai-left .cipta-ai-launcher { right: auto; left: var(--cipta-ai-gap); }
.cipta-ai-root.cipta-ai-dragging .cipta-ai-launcher { transition: none; transform: scale(1.08); cursor: grabbing; }

/* "Ask Cipta" label beside the launcher: shown on hover, and once on the first visit */
.cipta-ai-peek {
  position: fixed;
  right: calc(var(--cipta-ai-gap) + 56px + 10px);
  bottom: calc(var(--cipta-ai-gap) + 14px + var(--cipta-ai-lift, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 1040;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--cipta-ai-bg);
  color: var(--cipta-ai-deeper);
  font-weight: 600; font-size: 13px; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
  pointer-events: none;
  opacity: 0;
  translate: 6px 0;
  transition: opacity .15s ease-out, translate .15s ease-out;
}
.cipta-ai-root.cipta-ai-left .cipta-ai-peek { right: auto; left: calc(var(--cipta-ai-gap) + 56px + 10px); translate: -6px 0; }
@media (hover: hover) and (pointer: fine) {
  .cipta-ai-root:not(.cipta-ai-dragging) .cipta-ai-launcher[aria-expanded="false"]:hover + .cipta-ai-peek { opacity: 1; translate: 0 0; }
}
.cipta-ai-peek.cipta-ai-peek-first { animation: cipta-ai-peek 6s ease forwards; }
@keyframes cipta-ai-peek {
  0% { opacity: 0; }
  8%, 85% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; }
}

/* Panel: 380 x min(640px, 80vh), above the launcher */
.cipta-ai-panel {
  position: fixed;
  right: var(--cipta-ai-gap);
  bottom: calc(var(--cipta-ai-gap) + 56px + 12px + var(--cipta-ai-lift, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 1041;
  display: flex; flex-direction: column;
  width: 380px; max-width: calc(100vw - 2 * var(--cipta-ai-gap));
  height: min(640px, 80vh);
  background: var(--cipta-ai-bg);
  border: 1px solid var(--cipta-ai-line);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .28);
  overflow: hidden;
  animation: cipta-ai-rise .18s ease-out;
}
.cipta-ai-root.cipta-ai-left .cipta-ai-panel { right: auto; left: var(--cipta-ai-gap); }
@keyframes cipta-ai-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.cipta-ai-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(90deg, var(--cipta-ai-deeper), var(--cipta-ai-deep));
  color: #fff;
}
.cipta-ai-title { margin: 0; font-size: 16px; font-weight: 600; color: #fff; flex: 1; }
.cipta-ai-header-actions { display: flex; gap: 4px; }
.cipta-ai-btn {
  min-height: 32px; padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .6); border-radius: 8px;
  background: rgba(0, 0, 0, .15); color: #fff;
  font: inherit; font-size: 12px; cursor: pointer;
}
.cipta-ai-btn:hover { background: rgba(0, 0, 0, .3); }
.cipta-ai-btn-icon { min-width: 32px; font-size: 20px; line-height: 1; padding: 0 8px; }

.cipta-ai-notice {
  margin: 0; padding: 6px 12px;
  background: var(--cipta-ai-soft); color: var(--cipta-ai-muted);
  font-size: 12px; border-bottom: 1px solid var(--cipta-ai-line);
}
.cipta-ai-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; overscroll-behavior: contain; }
.cipta-ai-msg { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; max-width: 92%; overflow-wrap: anywhere; }
.cipta-ai-msg p { margin: 0 0 6px; }
.cipta-ai-msg p:last-child { margin-bottom: 0; }
.cipta-ai-msg ul { margin: 0 0 6px; padding-left: 18px; }
.cipta-ai-msg-user { margin-left: auto; background: var(--cipta-ai-deep); color: #fff; white-space: pre-wrap; }
.cipta-ai-msg-assistant { background: var(--cipta-ai-soft); border: 1px solid var(--cipta-ai-line); }
.cipta-ai-msg-error { background: #fdf0ee; border: 1px solid #f0c4bd; }
.cipta-ai-msg a { color: var(--cipta-ai-deep); text-decoration: underline; }
.cipta-ai-welcome { margin: 0 0 10px; color: var(--cipta-ai-muted); }
.cipta-ai-copy {
  display: block; margin-top: 6px; padding: 2px 8px;
  border: 1px solid var(--cipta-ai-line); border-radius: 6px;
  background: var(--cipta-ai-bg); color: var(--cipta-ai-deep);
  font: inherit; font-size: 12px; cursor: pointer;
}
.cipta-ai-copy:hover { background: var(--cipta-ai-soft); }

.cipta-ai-progress { padding: 0 12px; font-size: 12px; color: var(--cipta-ai-muted); }
.cipta-ai-progress:empty { display: none; }
.cipta-ai-steps { list-style: none; margin: 0; padding: 4px 0; }
.cipta-ai-steps li { display: flex; align-items: center; gap: 6px; }
.cipta-ai-steps li:not([data-done]) { color: var(--cipta-ai-ink); }
.cipta-ai-check { width: 18px; text-align: center; color: var(--cipta-ai-deep); font-weight: 700; }
.cipta-ai-dots { display: inline-flex; justify-content: center; gap: 3px; width: 18px; }
.cipta-ai-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--cipta-ai-deep); animation: cipta-ai-blink 1s ease-in-out infinite; }
.cipta-ai-dots i:nth-child(2) { animation-delay: .15s; }
.cipta-ai-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cipta-ai-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.cipta-ai-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px; }
.cipta-ai-chips:empty { display: none; }
.cipta-ai-chip {
  padding: 4px 10px; border: 1px solid var(--cipta-ai-deep); border-radius: 999px;
  background: var(--cipta-ai-bg); color: var(--cipta-ai-deep);
  font: inherit; font-size: 12px; cursor: pointer;
}
.cipta-ai-chip:hover { background: var(--cipta-ai-soft); }

.cipta-ai-form { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--cipta-ai-line); }
.cipta-ai-input {
  flex: 1; min-height: 40px; max-height: 132px; padding: 8px 10px; resize: none; overflow-y: hidden; /* autoGrow turns the scrollbar on past 132px */
  border: 1px solid var(--cipta-ai-line); border-radius: 10px; font: inherit; color: inherit;
}
.cipta-ai-input:focus { outline: 2px solid var(--cipta-ai-deep); border-color: var(--cipta-ai-deep); }
.cipta-ai-send {
  min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px;
  background: var(--cipta-ai-deep); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.cipta-ai-send:hover:not(:disabled) { background: var(--cipta-ai-deeper); }
.cipta-ai-send:disabled { opacity: .55; cursor: not-allowed; }
.cipta-ai-contact { margin: 0; padding: 0 12px 10px; font-size: 12px; color: var(--cipta-ai-muted); }
.cipta-ai-contact a { color: var(--cipta-ai-deep); }

.cipta-ai-scrim { position: fixed; inset: 0; z-index: 1039; background: rgba(0, 0, 0, .4); }

/* Bottom sheet on phones */
@media (max-width: 760px) {
  .cipta-ai-panel,
  .cipta-ai-root.cipta-ai-left .cipta-ai-panel {
    left: 0; right: 0; bottom: 0;
    width: auto; max-width: none;
    height: min(85vh, 640px);
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 1051;
  }
  .cipta-ai-input { font-size: 16px; } /* avoid iOS zoom on focus */
}

@media (prefers-reduced-motion: reduce) {
  .cipta-ai-launcher, .cipta-ai-panel { transition: none; animation: none; }
  .cipta-ai-launcher:hover, .cipta-ai-root.cipta-ai-dragging .cipta-ai-launcher { transform: none; }
  .cipta-ai-dots i { animation: none; opacity: .7; }
  .cipta-ai-peek { transition-property: opacity; }
  .cipta-ai-peek.cipta-ai-peek-first { animation: none; opacity: 1; }
}

@media print { .cipta-ai-root { display: none !important; } }