/**
 * V2 Prompt Optimizer — input island extras + first-screen visual polish.
 * Structure SSOT: assets/tool-input-template.css (shared with V1 — not edited here).
 * Scope: html.page-cost-v2 .page-v2-optimizer-section
 * Visual: flat card, Toket purple accent, minimal shadow (aligned with News / Pricing)
 */

/* —— Hero title / desc (V2-only spacing overrides) —— */
html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-head {
  margin: 0 0 clamp(14px, 2vw, 20px);
  text-align: center;
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-shell.v2-input-wrap {
  max-width: 1180px;
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-head__title,
html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-head h1 {
  font-size: clamp(1.625rem, 3.2vw, 1.75rem);
  letter-spacing: 0;
  line-height: 1.18;
  color: var(--text-main, var(--v2-text));
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-head__desc {
  margin: 8px auto 0;
  font-size: clamp(0.875rem, 1.5vw, 0.9375rem);
  line-height: 1.6;
  color: var(--text-sub, var(--v2-muted));
  max-width: 40rem;
}

/* —— Flat input card (overrides tool-input-template V2 rules) —— */
html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-card {
  padding: clamp(16px, 2.5vw, 20px) clamp(16px, 2.5vw, 22px) clamp(18px, 2.5vw, 22px);
  border-radius: var(--v2-input-radius-panel, 14px);
  border: 1px solid var(--v2-input-border, var(--v2-border));
  background: var(--v2-surface, var(--card-bg));
  box-shadow: none;
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-card:hover {
  border-color: var(--v2-input-border, var(--line));
  box-shadow: none;
  transform: none;
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-card.is-busy {
  border-color: color-mix(in srgb, var(--v2-accent) 32%, var(--line));
  box-shadow: none;
}

/* —— Desktop before / after workspace —— */
html.page-cost-v2 .page-v2-optimizer-section .v2-before-after-workspace {
  display: grid;
  grid-template-columns: minmax(300px, 0.35fr) minmax(0, 0.65fr);
  gap: clamp(16px, 2.4vw, 24px);
  align-items: start;
  margin-top: clamp(18px, 2.4vw, 24px);
  overflow-anchor: none;
}

html.page-cost-v2 .page-v2-optimizer-section .v2-before-panel,
html.page-cost-v2 .page-v2-optimizer-section .v2-after-panel {
  min-width: 0;
  overflow-anchor: none;
}

html.page-cost-v2 .page-v2-optimizer-section .v2-after-panel {
  position: static;
  align-self: start;
}

html.page-cost-v2 .page-v2-optimizer-section .v2-workspace-panel-title {
  margin: 0 0 10px;
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.3;
  font-weight: 750;
  letter-spacing: 0;
  color: var(--v2-text);
}

html.page-cost-v2 .page-v2-optimizer-section .v2-before-panel .toket-tool-input-card {
  margin: 0;
}

/* —— Textarea —— */
html.page-cost-v2 .page-v2-optimizer-section textarea#prompt.toket-tool-input-textarea {
  min-height: clamp(120px, 18vh, 140px);
  margin-bottom: clamp(12px, 1.5vw, 14px);
  padding: clamp(14px, 2vw, 16px);
  border-radius: var(--v2-input-radius-control, 12px);
  border: 1px solid var(--v2-input-border, color-mix(in srgb, var(--line) 88%, transparent));
  background: color-mix(in srgb, var(--v2-surface, var(--card-bg)) 96%, var(--text-main));
  font-size: 15px;
  line-height: 1.62;
  max-height: none;
  overflow: hidden;
  resize: vertical;
  transition:
    border-color var(--v2-input-transition, 0.15s ease),
    box-shadow var(--v2-input-transition, 0.15s ease);
}

html.page-cost-v2 .page-v2-optimizer-section textarea#prompt.toket-tool-input-textarea:focus {
  border-color: color-mix(in srgb, var(--v2-accent) 42%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v2-accent) 12%, transparent);
}

html.page-cost-v2 .page-v2-optimizer-section textarea#prompt.toket-tool-input-textarea::placeholder {
  color: var(--text-sub, var(--v2-muted));
  opacity: 0.85;
}

/* —— Lightweight first-screen scenarios —— */
html.page-cost-v2 .page-v2-optimizer-section .v2-input-scenarios {
  margin: 0 0 clamp(14px, 2vw, 16px);
}

html.page-cost-v2 .page-v2-optimizer-section .v2-input-scenarios__label,
html.page-cost-v2 .page-v2-optimizer-section .v2-input-output-type-label {
  display: block;
  margin: 0 0 8px;
  color: var(--text-sub, var(--v2-muted));
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

html.page-cost-v2 .page-v2-optimizer-section .v2-input-scenarios__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

html.page-cost-v2 .page-v2-optimizer-section .v2-input-scenario-chip {
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid var(--v2-input-border, color-mix(in srgb, var(--line) 80%, transparent));
  border-radius: var(--v2-input-radius-pill, 999px);
  background: color-mix(in srgb, var(--v2-surface, var(--card-bg)) 94%, var(--text-main));
  color: var(--text-sub, var(--v2-muted));
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color var(--v2-input-transition, 0.15s ease),
    background var(--v2-input-transition, 0.15s ease),
    color var(--v2-input-transition, 0.15s ease);
}

html.page-cost-v2 .page-v2-optimizer-section .v2-input-scenario-chip:hover,
html.page-cost-v2 .page-v2-optimizer-section .v2-input-scenario-chip:focus-visible {
  color: var(--text-main, var(--v2-text));
  border-color: color-mix(in srgb, var(--toket-brand, var(--v2-accent)) 30%, var(--line));
  background: color-mix(in srgb, var(--toket-brand, var(--v2-accent)) 5%, var(--v2-surface, var(--card-bg)));
  outline: none;
}

html.page-cost-v2 .page-v2-optimizer-section .v2-input-scenario-chip.is-active,
html.page-cost-v2 .page-v2-optimizer-section .v2-input-scenario-chip[aria-pressed="true"] {
  color: color-mix(in srgb, var(--toket-brand, var(--v2-accent)) 88%, var(--text-main, var(--v2-text)));
  border-color: color-mix(in srgb, var(--toket-brand, var(--v2-accent)) 54%, var(--line));
  background: color-mix(in srgb, var(--toket-brand, var(--v2-accent)) 12%, var(--v2-surface, var(--card-bg)));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--toket-brand, var(--v2-accent)) 12%, transparent),
    0 1px 0 color-mix(in srgb, white 48%, transparent) inset;
}

/* —— Media task chips —— */
html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-chips {
  margin-bottom: clamp(12px, 1.5vw, 14px);
}

html.page-cost-v2 .page-v2-optimizer-section .v2-media-task-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

html.page-cost-v2 .page-v2-optimizer-section .v2-media-task-wrap .v2-input-output-type-label {
  margin: 0;
}

html.page-cost-v2 .page-v2-optimizer-section .v2-media-task-hint {
  flex: 1 1 100%;
  margin: 0;
  max-width: 42rem;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-sub, var(--v2-muted));
}

@media (max-width: 860px) {
  html.page-cost-v2 .page-v2-optimizer-section .v2-before-after-workspace {
    grid-template-columns: 1fr;
  }

  html.page-cost-v2 .page-v2-optimizer-section .v2-after-panel {
    position: static;
  }
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-chip {
  min-height: 30px;
  height: auto;
  padding: 6px 13px;
  border-radius: var(--v2-input-radius-pill, 999px);
  border: 1px solid var(--v2-input-border, color-mix(in srgb, var(--line) 80%, transparent));
  background: color-mix(in srgb, var(--v2-surface, var(--card-bg)) 94%, var(--text-main));
  color: var(--text-sub, var(--v2-muted));
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
  transition:
    border-color var(--v2-input-transition, 0.15s ease),
    background var(--v2-input-transition, 0.15s ease),
    color var(--v2-input-transition, 0.15s ease);
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-chip:hover {
  color: var(--text-main, var(--v2-text));
  border-color: color-mix(in srgb, var(--v2-accent) 28%, var(--line));
  background: color-mix(in srgb, var(--v2-accent) 5%, var(--v2-surface, var(--card-bg)));
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-chip.is-active {
  color: var(--v2-accent);
  border-color: color-mix(in srgb, var(--v2-accent) 32%, var(--line));
  background: color-mix(in srgb, var(--v2-accent) 10%, var(--v2-surface, var(--card-bg)));
}

/* —— Analyze CTA —— */
html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-actions {
  gap: 8px 14px;
}

html.page-cost-v2 .page-v2-optimizer-section #btnAnalyze.toket-tool-input-submit,
html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-actions .toket-tool-input-submit.btn.btn-main {
  min-height: 44px;
  height: 44px;
  padding: 0 22px !important;
  border-radius: var(--v2-input-radius-control, 12px) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  color: #fff !important;
  background: var(--toket-gradient-primary, var(--site-cta-gradient)) !important;
  border: none !important;
  box-shadow: none !important;
  transition:
    background var(--v2-input-transition, 0.15s ease),
    transform var(--v2-input-transition, 0.15s ease);
}

html.page-cost-v2 .page-v2-optimizer-section #btnAnalyze.toket-tool-input-submit:hover:not(:disabled),
html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-actions .toket-tool-input-submit:hover:not(:disabled) {
  background: var(--toket-gradient-primary-hover, var(--site-cta-gradient)) !important;
  box-shadow: none !important;
  transform: translateY(var(--toket-translate-hover-secondary, -1px));
}

/* —— Advanced options fold —— */
html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced {
  margin-top: clamp(18px, 2.5vw, 22px);
  border: 1px solid var(--v2-input-border, color-mix(in srgb, var(--line) 70%, transparent));
  border-radius: var(--v2-input-radius-panel, 14px);
  background: color-mix(in srgb, var(--v2-surface, var(--card-bg)) 96%, var(--text-main));
  box-shadow: none;
  overflow-anchor: none;
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced > summary {
  min-height: 44px;
  padding: 0 clamp(12px, 2vw, 14px);
  color: var(--text-sub, var(--v2-muted));
  border-radius: var(--v2-input-radius-panel, 14px);
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced[open] > summary {
  border-bottom-color: var(--v2-input-border, color-mix(in srgb, var(--line) 55%, transparent));
  border-radius: var(--v2-input-radius-panel, 14px) var(--v2-input-radius-panel, 14px) 0 0;
  color: var(--text-main, var(--v2-text));
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced .v2-adv-tip {
  color: var(--text-sub, var(--v2-muted));
}

/* Status banners between title and card */
html.page-cost-v2 .page-v2-optimizer-section .v1-prompt-import-banner {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: var(--v2-input-radius-control, 12px);
  font-size: 13px;
  line-height: 1.55;
  color: var(--v2-muted);
  background: color-mix(in srgb, var(--v2-accent) 4%, var(--v2-surface, var(--card-bg)));
  border: 1px solid color-mix(in srgb, var(--v2-accent) 12%, var(--line));
  box-shadow: none;
}

:is(html[data-theme="dark"].page-cost-v2, html.dark.page-cost-v2)
  .page-v2-optimizer-section
  .v1-prompt-import-banner {
  background: color-mix(in srgb, var(--v2-accent) 6%, var(--v2-surface, var(--card-bg)));
  border-color: color-mix(in srgb, var(--v2-accent) 16%, var(--line));
}

html.page-cost-v2 .page-v2-optimizer-section .v2-project-template-handoff-note__main {
  display: block;
}

html.page-cost-v2 .page-v2-optimizer-section .v2-project-template-handoff-note__summary {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--v2-muted) 92%, var(--text-sub, var(--v2-muted)));
}

html.page-cost-v2 .page-v2-optimizer-section .v2-project-template-handoff-note__questions {
  margin: 6px 0 0;
  padding-left: 1.15rem;
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--v2-muted) 92%, var(--text-sub, var(--v2-muted)));
}

html.page-cost-v2 .page-v2-optimizer-section .v2-project-template-handoff-note__questions li + li {
  margin-top: 2px;
}

/* —— Advanced options (inner fields) —— */
html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced .v2-adv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  margin: 0;
}

@media (max-width: 560px) {
  html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced .v2-adv-grid {
    grid-template-columns: 1fr;
  }

  html.page-cost-v2 .page-v2-optimizer-section #btnAnalyze.toket-tool-input-submit,
  html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-actions .toket-tool-input-submit.btn.btn-main {
    width: 100%;
    transform: none !important;
  }

  html.page-cost-v2 .page-v2-optimizer-section #btnAnalyze.toket-tool-input-submit:hover:not(:disabled),
  html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-actions .toket-tool-input-submit:hover:not(:disabled) {
    transform: none !important;
  }

  html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced .v2-adv-grid input,
html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced input,
html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced select,
html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced .v2-adv-field {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  box-sizing: border-box;
  padding: 8px 11px;
  border-radius: var(--v2-input-radius-control, 10px);
  border: 1px solid var(--v2-input-border, color-mix(in srgb, var(--line) 80%, transparent));
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  background: color-mix(in srgb, var(--v2-surface, var(--card-bg)) 96%, transparent);
  color: var(--text-main, var(--v2-text));
  box-shadow: none;
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced .v2-adv-grid input:focus,
html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced input:focus,
html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--v2-accent) 40%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v2-accent) 12%, transparent);
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced .v2-adv-preset-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced .v2-adv-preset-row label {
  display: block;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-secondary);
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced .v2-adv-media-card {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: var(--v2-input-radius-control, 12px);
  border: 1px solid var(--v2-input-border, color-mix(in srgb, var(--line) 70%, transparent));
  background: color-mix(in srgb, var(--v2-surface, var(--card-bg)) 94%, transparent);
  box-shadow: none;
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced .v2-adv-media-card .v2-adv-media-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-secondary);
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced .v2-adv-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced .v2-adv-pills button {
  border: 1px solid var(--v2-input-border, color-mix(in srgb, var(--line) 80%, transparent));
  background: color-mix(in srgb, var(--v2-surface, var(--card-bg)) 92%, transparent);
  border-radius: var(--v2-input-radius-pill, 999px);
  padding: 6px 12px;
  min-height: 32px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-secondary);
  box-shadow: none;
  transition:
    border-color var(--v2-input-transition, 0.15s ease),
    background var(--v2-input-transition, 0.15s ease),
    color var(--v2-input-transition, 0.15s ease);
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced .v2-adv-pills button:hover {
  border-color: color-mix(in srgb, var(--v2-accent) 30%, var(--line));
  background: color-mix(in srgb, var(--v2-accent) 8%, var(--v2-surface, var(--card-bg)));
  color: var(--text-main);
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced .v2-model-pref-label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced .v2-model-pref-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced .v2-model-pref-btn {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--v2-input-radius-pill, 999px);
  border: 1px solid var(--v2-input-border, color-mix(in srgb, var(--line) 80%, transparent));
  background: color-mix(in srgb, var(--v2-surface, var(--card-bg)) 92%, transparent);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: none;
  transition:
    border-color var(--v2-input-transition, 0.15s ease),
    color var(--v2-input-transition, 0.15s ease),
    background var(--v2-input-transition, 0.15s ease);
}

html.page-cost-v2 .page-v2-optimizer-section .toket-tool-input-advanced .v2-model-pref-btn.is-active {
  color: var(--v2-accent);
  border-color: color-mix(in srgb, var(--v2-accent) 32%, var(--line));
  background: color-mix(in srgb, var(--v2-accent) 10%, var(--v2-surface, var(--card-bg)));
}

/* —— Light theme —— */
html.page-cost-v2[data-theme="light"] .page-v2-optimizer-section .toket-tool-input-card,
html.page-cost-v2:not([data-theme="dark"]):not(.dark) .page-v2-optimizer-section .toket-tool-input-card {
  background: #ffffff;
  border-color: #ececf1;
}

html.page-cost-v2[data-theme="light"] .page-v2-optimizer-section textarea#prompt.toket-tool-input-textarea,
html.page-cost-v2:not([data-theme="dark"]):not(.dark) .page-v2-optimizer-section textarea#prompt.toket-tool-input-textarea {
  background: #ffffff;
  border-color: #e5e7eb;
}

html.page-cost-v2[data-theme="light"] .page-v2-optimizer-section .toket-tool-input-chip,
html.page-cost-v2:not([data-theme="dark"]):not(.dark) .page-v2-optimizer-section .toket-tool-input-chip {
  background: #ffffff;
  border-color: #e5e7eb;
}

html.page-cost-v2[data-theme="light"] .page-v2-optimizer-section .toket-tool-input-chip.is-active,
html.page-cost-v2:not([data-theme="dark"]):not(.dark) .page-v2-optimizer-section .toket-tool-input-chip.is-active {
  background: color-mix(in srgb, var(--v2-accent) 7%, #ffffff);
  border-color: color-mix(in srgb, var(--v2-accent) 22%, #e5e7eb);
  color: var(--v2-accent, #6d5ae6);
}

html.page-cost-v2[data-theme="light"] .page-v2-optimizer-section .toket-tool-input-advanced,
html.page-cost-v2:not([data-theme="dark"]):not(.dark) .page-v2-optimizer-section .toket-tool-input-advanced {
  background: #fafafa;
  border-color: #ececf1;
}

html.page-cost-v2[data-theme="light"] .page-v2-optimizer-section .v1-prompt-import-banner,
html.page-cost-v2:not([data-theme="dark"]):not(.dark) .page-v2-optimizer-section .v1-prompt-import-banner {
  background: color-mix(in srgb, var(--v2-accent) 3%, #ffffff);
  border-color: color-mix(in srgb, var(--v2-accent) 10%, #ececf1);
}

/* —— Dark theme —— */
html.page-cost-v2:is([data-theme="dark"], .dark) .page-v2-optimizer-section .toket-tool-input-card {
  box-shadow: none;
  border-color: var(--v2-input-border);
}

html.page-cost-v2:is([data-theme="dark"], .dark) .page-v2-optimizer-section .toket-tool-input-card:hover {
  box-shadow: none;
}

html.page-cost-v2:is([data-theme="dark"], .dark) .page-v2-optimizer-section textarea#prompt.toket-tool-input-textarea {
  background: color-mix(in srgb, var(--v2-surface, var(--card-bg)) 88%, #000);
}

html.page-cost-v2:is([data-theme="dark"], .dark) .page-v2-optimizer-section .toket-tool-input-chip.is-active {
  color: color-mix(in srgb, var(--v2-accent-2) 92%, #fff);
}

@media (max-width: 640px) {
  html.page-cost-v2 .page-v2-optimizer-section .v2-input-scenarios__chips {
    gap: 8px 6px;
  }

  html.page-cost-v2 .page-v2-optimizer-section .v2-input-scenario-chip {
    min-height: 40px;
  }

  html.page-cost-v2 .page-v2-optimizer-section #btnAnalyze {
    width: 100% !important;
  }
}