/* ---- AI helpers (ai.js): Tonight in your own words, Is this for me?, Describe it. Admins only for now. ---- */

/* ---------- Tonight in your own words (mood panel and the phone Tune sheet) ---------- */

.ai-mood { margin: 18px 0 8px; padding: 14px 14px 10px; border: 1px solid var(--ink); background: rgba(255, 255, 255, .28); box-shadow: 4px 4px 0 rgba(18, 18, 18, .85); }
.ai-mood-label { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--ink); font: 800 11px/1.3 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.ai-mood-mark { display: grid; place-items: center; flex: none; width: 28px; height: 28px; color: var(--paper); background: var(--red); font: 400 16px/1 "Yu Mincho", "MS Mincho", serif; letter-spacing: 0; text-transform: none; }
/* The panel is narrow on desktop: the field takes the full width and grows with the text; the button sits under it. */
.ai-mood-row { display: grid; gap: 8px; }
.ai-mood textarea { display: block; width: 100%; min-width: 0; min-height: 52px; max-height: 150px; padding: 4px 0 6px; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; color: var(--ink); background: transparent; font: italic 400 18px/1.35 Georgia, serif; resize: none; outline: none; overflow-y: hidden; scrollbar-width: thin; }
.ai-mood textarea.is-tall { overflow-y: auto; }
.ai-mood textarea:focus { border-bottom-color: var(--red); }
.ai-mood textarea::placeholder { color: #8f897a; opacity: 1; }
.ai-mood textarea:disabled { color: #8f897a; cursor: not-allowed; }
.ai-mood-go { position: relative; display: inline-grid; place-items: center; justify-self: end; min-width: 88px; min-height: 44px; padding: 0 16px; border: 0; color: var(--paper); background: var(--ink); font: 800 11px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.ai-mood-go:hover:not(:disabled) { background: var(--red); }
.ai-mood-go:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.ai-mood-go:disabled { opacity: .55; cursor: not-allowed; }
.ai-mood-go > * { grid-area: 1 / 1; }
.ai-mood-line { min-height: 22px; margin: 8px 0 0; color: #5f5b53; font: italic 14px/1.45 Georgia, serif; }
.ai-mood-line:empty { min-height: 0; margin: 0; }
.ai-mood-line.is-done { color: var(--ink); }
.ai-mood-line.is-trouble { color: #a5281f; }
.ai-stamp { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border: 1.5px solid var(--red); border-radius: 50%; color: var(--red); font: 400 13px/1 "Yu Mincho", "MS Mincho", serif; font-style: normal; vertical-align: 1px; transform: rotate(-8deg); }
.ai-mood.is-resting { border-style: dashed; box-shadow: none; }

/* Ink dots while the model thinks; the button label steps aside. */
.ai-ink { display: inline-flex; gap: 4px; visibility: hidden; }
.ai-ink i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: ai-ink 1s ease-in-out infinite; }
.ai-ink i:nth-child(2) { animation-delay: .15s; }
.ai-ink i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-ink { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.ai-mood.is-thinking .ai-ink, .ai-find.is-thinking .ai-find-go .ai-ink { visibility: visible; }
.ai-mood.is-thinking .ai-mood-go-label, .ai-find.is-thinking .ai-find-go-label { visibility: hidden; }

/* What the text changed glows for a moment. */
.mood-control.ai-touched, .mood-selects select.ai-touched, .mood-avoid button.ai-touched { animation: ai-touched 1.6s ease-out; }
@keyframes ai-touched { 0%, 35% { box-shadow: 0 0 0 3px rgba(239, 75, 63, .45); } 100% { box-shadow: 0 0 0 3px rgba(239, 75, 63, 0); } }
.mood-control.ai-touched { border-radius: 4px; }

/* The phone mood strip gets one more chip; on wider screens the field is right there in the panel. */
.mood-presets .ai-mood-chip { display: none; }

@media (max-width: 760px) {
    .mood-presets .ai-mood-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 15px; border: 1px solid var(--red); border-radius: 22px; color: var(--paper); background: rgba(239, 75, 63, .14); font: italic 14px/1 Georgia, serif; white-space: nowrap; cursor: pointer; scroll-snap-align: start; }
    .mood-presets .ai-mood-chip span { color: var(--red); font: 400 16px/1 "Yu Mincho", "MS Mincho", serif; font-style: normal; }
    .mood-presets .ai-mood-chip:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
    .ai-mood { margin-top: 14px; }
    .ai-mood textarea { font-size: 18px; }
}

/* ---------- Is this for me? (anime detail) ---------- */

/* On a phone detail.css orders the sections (why 1, notes 2, story 3 …); this one follows "why". */
@media (max-width: 760px) {
    .ad-section[data-ad-part="aifit"] { order: 1; }
}

.ai-fit-lead { margin: 0 0 14px; color: #4f4b44; font: italic 16px/1.55 Georgia, serif; }
.ai-fit-ask { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 18px 0 8px; border: 1px solid var(--ink); color: var(--paper); background: var(--ink); font: 800 12px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; box-shadow: 4px 4px 0 rgba(18, 18, 18, .25); }
.ai-fit-ask:hover { border-color: var(--red); background: var(--red); }
.ai-fit-ask:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.ai-fit-ask-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--ink); background: var(--paper); font: 400 17px/1 "Yu Mincho", "MS Mincho", serif; letter-spacing: 0; }
.ai-fit-wait { display: flex; align-items: center; gap: 12px; margin: 0; color: #5f5b53; font: italic 16px/1.5 Georgia, serif; }
.ai-fit-wait .ai-ink { visibility: visible; color: var(--red); }
.ai-fit-verdict { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 12px; outline: none; }
.ai-fit-verdict b { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--paper); background: var(--red); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--red); font: 400 26px/1 "Yu Mincho", "MS Mincho", serif; transform: rotate(-6deg); }
.ai-verdict-maybe b { color: var(--red); background: var(--paper); box-shadow: 0 0 0 2px var(--red); }
.ai-verdict-unlikely b { background: var(--ink); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--ink); }
.ai-fit-verdict span { font: 400 22px/1.2 Georgia, serif; letter-spacing: -.02em; }
.ai-fit-verdict:focus-visible span { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 5px; }
.ai-fit-points { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ai-point { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: baseline; color: #2f2c27; font: 16px/1.55 Arial, sans-serif; }
.ai-point-mark { display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--ink); border-radius: 50%; font: 700 14px/1 Arial, sans-serif; transform: translateY(2px); }
.ai-point-pro .ai-point-mark { border-color: var(--red); color: var(--red); }
.ai-fit-foot { margin: 14px 0 0; color: #7a756b; font: italic 13px/1.5 Georgia, serif; }
.ai-fit-trouble { outline: none; }

/* ---------- Describe it (search sheet) ---------- */

.ai-find-open { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 8px; padding: 0 14px; border: 1px dashed var(--ink); border-radius: 22px; color: var(--ink); background: transparent; font: italic 15px/1.3 Georgia, serif; cursor: pointer; }
.ai-find-open > span:first-child { color: var(--red); font: 400 17px/1 "Yu Mincho", "MS Mincho", serif; font-style: normal; }
.ai-find-open b { font-weight: 400; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ai-find-open:hover { border-style: solid; }
.ai-find-open:focus-visible, .ai-find-back:focus-visible, .ai-find-go:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.fa-sheet.ai-describing .fa-form, .fa-sheet.ai-describing .fa-status, .fa-sheet.ai-describing .fa-intro, .fa-sheet.ai-describing .fa-none,
.fa-sheet.ai-describing #faList, .fa-sheet.ai-describing .fa-more, .fa-sheet.ai-describing .fa-from { display: none; }
.ai-find[hidden] { display: none; }
.ai-find { padding: 18px 0 8px; }
.ai-find-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--red); font: 800 12px/1.2 Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.ai-find-title span { color: var(--ink); font: 400 19px/1 "Yu Mincho", "MS Mincho", serif; letter-spacing: 0; }
.ai-find-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; border-bottom: 2px solid var(--ink); }
.ai-find-form:focus-within { border-bottom-color: var(--red); }
.ai-find-form textarea { display: block; width: 100%; min-width: 0; min-height: 84px; padding: 4px 0 8px; border: 0; border-radius: 0; color: var(--ink); background: transparent; font: italic 400 22px/1.3 Georgia, serif; resize: none; outline: none; }
.ai-find-form textarea::placeholder { color: #9b9586; opacity: 1; }
.ai-find-go { display: inline-grid; place-items: center; min-width: 88px; min-height: 48px; margin-bottom: 8px; padding: 0 16px; border: 0; color: var(--paper); background: var(--ink); font: 800 11px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.ai-find-go > * { grid-area: 1 / 1; }
.ai-find-go:hover:not(:disabled) { background: var(--red); }
.ai-find-go:disabled { opacity: .55; cursor: wait; }
.ai-find-status { min-height: 22px; margin: 10px 0 4px; color: #6f6b62; font: italic 14px/1.45 Georgia, serif; }
.ai-find-status.is-trouble { color: #a5281f; }
.ai-find-list:empty { display: none; }
.ai-find-more { margin: 14px 0 0; }
.ai-find-more[hidden] { display: none; }
.ai-find-back { min-height: 44px; margin-top: 14px; padding: 0 2px; border: 0; color: var(--ink); background: none; font: 15px/1.4 Arial, sans-serif; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 5px; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
    .ai-ink i { animation: none; opacity: .7; }
    .mood-control.ai-touched, .mood-selects select.ai-touched, .mood-avoid button.ai-touched { animation: none; box-shadow: 0 0 0 3px rgba(239, 75, 63, .35); }
}