/* KaryaYogi AI — karyayogi.in/ai/. Builds on /assets/styles.css tokens
   (--bg, --bg-raised, --bg-tint, --text, --text-muted, --heading, --line,
   --green, --saffron, --radius-*, --shadow-card); fallbacks keep the page
   readable if the site stylesheet is missing. Light/dark via [data-theme]. */

.kyai-page { padding-block: clamp(1.5rem, 3vw, 2.75rem) clamp(2.5rem, 5vw, 4rem); }
.kyai-hero { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.kyai-hero-mark {
  flex: none; width: 3rem; height: 3rem; border-radius: var(--radius-m, 14px);
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--green, #14642F), var(--green-vibrant, #1E8C42));
  box-shadow: var(--shadow-card, 0 6px 18px rgba(0,0,0,.12));
}
.kyai-hero-mark svg { width: 1.6rem; height: 1.6rem; }
.kyai-hero h1 { margin: 0; font-family: var(--font-display, Georgia, serif); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); color: var(--heading, #17301F); line-height: 1.15; }
.kyai-hero p { margin: .2rem 0 0; color: var(--text-muted, #494F58); }

#kyai-app { color: var(--text, #20242C); }
.kyai-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem .9rem; min-height: 1.5rem; margin-bottom: .75rem; }
.kyai-meta:empty { display: none; }
.kyai-pill { padding: .15rem .6rem; border-radius: var(--radius-pill, 999px); background: var(--bg-tint, #EEF4EE); }

.kyai-card {
  background: var(--bg-raised, #fff); border: 1px solid var(--line, #E3DFD4);
  border-radius: var(--radius-m, 14px); box-shadow: var(--shadow-card, none); padding: 1.1rem 1.2rem;
}
.kyai-gate { max-width: 34rem; margin: 1.5rem auto 0; }
.kyai-state { text-align: center; padding: 2rem 1.5rem; }
.kyai-state-icon { display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--bg-tint, #EEF4EE); color: var(--green, #14642F); margin-bottom: .75rem; }
.kyai-state-title { margin: 0 0 .5rem; font-family: var(--font-display, Georgia, serif); font-size: 1.4rem; color: var(--heading, #17301F); }
.kyai-checking { text-align: center; color: var(--text-muted, #494F58); animation: kyai-pulse 1.4s ease-in-out infinite; }
@keyframes kyai-pulse { 50% { opacity: .45; } }

.kyai-signin .kyai-form { margin-top: .75rem; }
.kyai-signin .btn { width: 100%; justify-content: center; }
.kyai-or { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; color: var(--text-muted, #494F58); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.kyai-or::before, .kyai-or::after { content: ""; flex: 1; height: 1px; background: var(--line, #E3DFD4); }

.kyai-form { display: grid; gap: .85rem; }
.kyai-form > .btn { justify-self: start; }
.kyai-field { display: grid; gap: .3rem; }
.kyai-label { font-size: .92rem; font-weight: 600; color: var(--heading, #17301F); }
.kyai-input {
  width: 100%; box-sizing: border-box; font: inherit; color: var(--text, #20242C);
  background: var(--bg, #F8F6F0); border: 1px solid var(--line-strong, #CFC9BA);
  border-radius: var(--radius-s, 8px); padding: .6rem .75rem; resize: vertical;
}
.kyai-input:focus { outline: 2px solid var(--focus-ring, #14642F); outline-offset: 1px; border-color: transparent; }
.kyai-grid2, .kyai-grid3 { display: grid; gap: .85rem; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .kyai-grid2 { grid-template-columns: 1fr 1fr; }
  .kyai-grid3 { grid-template-columns: 1fr 1fr 2fr; }
}
.kyai-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.kyai-row-split { justify-content: space-between; }
.kyai-row-center { justify-content: center; }

.kyai-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.kyai-chip {
  font: inherit; font-size: .92rem; cursor: pointer; padding: .4rem .85rem;
  border-radius: var(--radius-pill, 999px); border: 1px solid var(--line-strong, #CFC9BA);
  background: var(--bg-raised, #fff); color: var(--text, #20242C); transition: background .15s, border-color .15s;
}
.kyai-chip:hover { background: var(--bg-tint, #EEF4EE); }
.kyai-chip.is-on { background: var(--green, #14642F); border-color: var(--green, #14642F); color: var(--text-onbrand, #F2F7F2); }

.kyai-link-btn {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; border: 0; background: none;
  color: var(--link, #14642F); padding: .3rem .45rem; border-radius: var(--radius-s, 8px);
}
.kyai-link-btn:hover { background: var(--bg-tint, #EEF4EE); }
.kyai-link-btn:disabled, .kyai-icon-btn:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; }

.kyai-error { margin: 0; padding: .55rem .75rem; border-radius: var(--radius-s, 8px); font-size: .93rem; background: var(--amber-bg, #FBF0DC); border: 1px solid var(--amber-line, #E4B96A); color: var(--amber-ink, #6E4A08); }
.kyai-note { margin: 0; font-size: .85rem; color: var(--text-muted, #494F58); }
.kyai-muted { color: var(--text-muted, #494F58); }
.kyai-small { font-size: .88rem; }
.kyai-flag { margin: 0; font-size: .88rem; font-weight: 600; color: var(--saffron-600, #C66703); }
[data-theme="dark"] .kyai-flag { color: var(--saffron-glow, #FFB755); }
.kyai-h3 { margin: 0 0 .35rem; font-size: 1.02rem; font-weight: 700; color: var(--heading, #17301F); }
.kyai-h3-lg { font-family: var(--font-display, Georgia, serif); font-size: 1.3rem; }
.kyai-list { margin: 0 0 .5rem; padding-left: 1.2rem; }
.kyai-list li + li { margin-top: .25rem; }
.kyai-text { margin: 0; white-space: pre-wrap; }
.kyai-result { display: grid; gap: .75rem; margin-top: 1rem; }

/* Mobile: one pane at a time. Desktop: chat left, tools right. */
.kyai-switch { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: var(--radius-pill, 999px); background: var(--bg-tint, #EEF4EE); margin-bottom: 1rem; }
.kyai-switch-btn { font: inherit; font-weight: 600; cursor: pointer; border: 0; padding: .45rem 1.2rem; border-radius: var(--radius-pill, 999px); background: transparent; color: var(--text, #20242C); }
.kyai-switch-btn.is-on { background: var(--bg-raised, #fff); box-shadow: var(--shadow-card, none); color: var(--green, #14642F); }
[data-theme="dark"] .kyai-switch-btn.is-on { color: var(--link, #7CC492); }
.kyai-panes { display: grid; gap: 1.25rem; }
.kyai-tools { display: flex; }
.kyai-panes.is-chat .kyai-tools, .kyai-panes.is-tools .kyai-chat { display: none; }
@media (min-width: 960px) {
  .kyai-switch { display: none; }
  .kyai-panes { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .kyai-panes.is-chat .kyai-tools, .kyai-panes.is-tools .kyai-chat { display: flex; }
  .kyai-chat { position: sticky; top: 5.5rem; }
  .kyai-tabs { flex-wrap: wrap; overflow-x: visible; }
}

/* Chat */
.kyai-chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.kyai-chat-log { flex: 1; min-height: 18rem; max-height: min(62vh, 40rem); overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .8rem; }
.kyai-chat-empty { display: grid; gap: .75rem; color: var(--text-muted, #494F58); }
.kyai-chat-empty p { margin: 0; }
.kyai-msg { display: flex; }
.kyai-msg-user { justify-content: flex-end; }
.kyai-bubble { max-width: 88%; padding: .6rem .9rem; border-radius: 1.1rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.kyai-msg-user .kyai-bubble { background: var(--green, #14642F); color: var(--text-onbrand, #F2F7F2); border-bottom-right-radius: .3rem; }
.kyai-msg-ai .kyai-bubble { background: var(--bg-tint, #EEF4EE); color: var(--text, #20242C); border-bottom-left-radius: .3rem; }
.kyai-bubble.is-muted { font-style: italic; color: var(--text-muted, #494F58); }
.kyai-thinking { margin: 0; color: var(--text-muted, #494F58); animation: kyai-pulse 1.4s ease-in-out infinite; }
.kyai-chat-form { display: grid; gap: .5rem; padding: .8rem 1rem 1rem; border-top: 1px solid var(--line, #E3DFD4); }
.kyai-compose { display: flex; gap: .5rem; align-items: flex-end; }
.kyai-compose .kyai-input { flex: 1; resize: none; }
.kyai-icon-btn {
  flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--line-strong, #CFC9BA); background: var(--bg-raised, #fff); color: var(--green, #14642F);
}
[data-theme="dark"] .kyai-icon-btn { color: var(--link, #7CC492); }
.kyai-icon-btn.is-recording { background: var(--saffron, #F0820C); border-color: var(--saffron, #F0820C); color: #1F1204; animation: kyai-pulse 1.2s ease-in-out infinite; }
.kyai-listening { margin: 0; font-size: .9rem; font-weight: 600; color: var(--saffron-600, #C66703); }
.kyai-ico { width: 1.25rem; height: 1.25rem; }
.kyai-ico-lg { width: 1.7rem; height: 1.7rem; }

.kyai-actions { display: flex; flex-wrap: wrap; gap: .1rem; margin-top: .4rem; margin-left: -.45rem; }
.kyai-report { display: grid; gap: .6rem; margin-top: .5rem; padding: .8rem; border-radius: var(--radius-s, 8px); background: var(--bg-raised, #fff); border: 1px solid var(--line, #E3DFD4); }
.kyai-report-title { margin: 0; font-weight: 700; }
.kyai-radios { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .92rem; }

/* Tools */
.kyai-tools { flex-direction: column; gap: 1rem; min-width: 0; }
.kyai-tabs { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
.kyai-tab {
  flex: none; font: inherit; font-weight: 600; font-size: .93rem; cursor: pointer; white-space: nowrap;
  padding: .5rem 1rem; border-radius: var(--radius-s, 8px); border: 1px solid transparent; background: transparent; color: var(--text, #20242C);
}
.kyai-tab:hover { background: var(--bg-tint, #EEF4EE); }
.kyai-tab.is-on { background: var(--green, #14642F); color: var(--text-onbrand, #F2F7F2); }
.kyai-tabpanel { display: grid; gap: 1rem; }

.kyai-cards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.kyai-flash { font: inherit; text-align: left; cursor: pointer; border: 0; padding: 0; background: none; height: 10rem; perspective: 1000px; color: inherit; }
.kyai-flash-inner { position: relative; display: block; width: 100%; height: 100%; transition: transform .5s var(--ease-out, ease); transform-style: preserve-3d; }
.kyai-flash.is-flipped .kyai-flash-inner { transform: rotateY(180deg); }
.kyai-flash-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: .35rem; padding: 1rem; overflow-y: auto;
  border-radius: var(--radius-m, 14px); backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.kyai-flash-front { background: var(--bg-raised, #fff); border: 1px solid var(--line, #E3DFD4); box-shadow: var(--shadow-card, none); font-weight: 600; }
.kyai-flash-back { background: var(--green, #14642F); color: var(--text-onbrand, #F2F7F2); transform: rotateY(180deg); font-size: .95rem; }
.kyai-flash-tag { font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--saffron, #F0820C); }
.kyai-flash-back .kyai-flash-tag { color: #FFC172; }

.kyai-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.kyai-step { display: flex; gap: .9rem; align-items: flex-start; }
.kyai-step-icon { flex: none; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: var(--radius-m, 14px); background: var(--bg-tint, #EEF4EE); color: var(--green, #14642F); }
[data-theme="dark"] .kyai-step-icon { color: var(--link, #7CC492); }
.kyai-step-body { display: grid; gap: .15rem; }
.kyai-step-num { font-size: .78rem; font-weight: 700; color: var(--saffron-600, #C66703); text-transform: uppercase; letter-spacing: .05em; }
[data-theme="dark"] .kyai-step-num { color: var(--saffron-glow, #FFB755); }
.kyai-step-text { color: var(--text-muted, #494F58); }

.kyai-idea { display: grid; gap: .3rem; }
.kyai-idea p { margin: 0; }
.kyai-idea-title { font-weight: 700; color: var(--heading, #17301F); }
.kyai-breaks { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .93rem; }
.kyai-date { font-family: var(--font-mono, monospace); font-size: .9rem; color: var(--green, #14642F); margin: 0; }
[data-theme="dark"] .kyai-date { color: var(--link, #7CC492); }

@media (prefers-reduced-motion: reduce) {
  .kyai-flash-inner, .kyai-checking, .kyai-thinking, .kyai-icon-btn.is-recording { transition: none; animation: none; }
}