/* KNOT AI assistant (10/22 demo) */
:root { --kai-navy: #14243e; --kai-orange: #e96e2c; --kai-beige: #f8f4f1; --kai-line: #d9d4cf; --kai-text: #333; --kai-sub: #707070; }
.kai, .kai * { box-sizing: border-box; font-family: 'Noto Sans JP', sans-serif; -webkit-font-smoothing: antialiased; }
.kai-launch { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px 0 18px; border: 0; border-radius: 26px; background: var(--kai-navy); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .04em; cursor: pointer; box-shadow: 0 8px 24px rgba(20,36,62,.28); transition: transform .3s cubic-bezier(.4,.4,0,1), box-shadow .3s; }
.kai-launch:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20,36,62,.34); }
.kai-launch svg { width: 20px; height: 20px; }
.kai-launch[hidden] { display: none; }
.kai-panel { position: fixed; right: 24px; bottom: 24px; z-index: 51; width: 400px; height: min(660px, calc(100dvh - 48px)); display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.22); opacity: 0; transform: translateY(16px) scale(.98); transform-origin: bottom right; pointer-events: none; transition: opacity .3s cubic-bezier(.4,.4,0,1), transform .3s cubic-bezier(.4,.4,0,1); }
.kai-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.kai-head { background: var(--kai-navy); color: #fff; padding: 16px 18px 0; }
.kai-head-row { display: flex; align-items: center; justify-content: space-between; }
.kai-title { font-family: 'Noto Serif JP', serif; font-size: 17px; letter-spacing: .06em; }
.kai-title small { display: block; font-family: 'EB Garamond', serif; font-size: 11px; letter-spacing: .2em; color: var(--kai-orange); margin-bottom: 2px; }
.kai-close { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 4px; }
.kai-tabs { display: flex; margin-top: 14px; }
.kai-tab { flex: 1; background: none; border: 0; color: rgba(255,255,255,.65); font-size: 13px; font-weight: 700; padding: 10px 0 12px; cursor: pointer; border-bottom: 3px solid transparent; }
.kai-tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--kai-orange); }
.kai-body { flex: 1; overflow: auto; background: var(--kai-beige); }
.kai-view { display: none; padding: 18px; min-height: 100%; }
.kai-view.on { display: flex; flex-direction: column; }
.kai-note { font-size: 11px; line-height: 1.7; color: var(--kai-sub); }
.kai-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 0; background: var(--kai-orange); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .3s; }
.kai-btn:disabled { opacity: .5; cursor: default; }
.kai-btn.navy { background: var(--kai-navy); }
.kai-btn.ghost { background: #fff; color: var(--kai-navy); border: 1px solid var(--kai-navy); }
.kai label { display: block; font-size: 12px; font-weight: 700; color: var(--kai-text); margin: 14px 0 6px; }
.kai input[type=text], .kai input[type=number], .kai select, .kai textarea { width: 100%; border: 1px solid #bbb; background: #fff; font-size: 16px; padding: 10px 12px; color: var(--kai-text); border-radius: 0; -webkit-appearance: none; appearance: none; }
.kai textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
.kai select { background-image: linear-gradient(45deg, transparent 50%, #707070 50%), linear-gradient(135deg, #707070 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
/* chat */
.kai-msgs { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.kai-msg { max-width: 88%; padding: 12px 14px; font-size: 14px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
.kai-msg.bot { align-self: flex-start; background: #fff; color: var(--kai-text); border: 1px solid #ece6e0; }
.kai-msg.me { align-self: flex-end; background: var(--kai-navy); color: #fff; }
.kai-msg.wait::after { content: '…'; animation: kai-blink 1s infinite; }
@keyframes kai-blink { 50% { opacity: .2; } }
.kai-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.kai-chip { background: #fff; border: 1px solid var(--kai-line); color: var(--kai-navy); font-size: 12px; padding: 7px 12px; border-radius: 16px; cursor: pointer; }
.kai-input { display: flex; gap: 8px; padding: 12px; background: #fff; border-top: 1px solid #ece6e0; }
.kai-input textarea { flex: 1; min-height: 44px; height: 44px; max-height: 120px; padding: 10px 12px; font-size: 16px; resize: none; overflow: hidden; line-height: 1.5; }
.kai-input .kai-btn { width: 64px; padding: 0; flex: none; }
.kai-chatfoot { display: none; }
.kai-chatfoot.on { display: flex; }
/* memo */
.kai-card { background: #fff; border: 1px solid #ece6e0; padding: 14px 16px; margin-top: 12px; }
.kai-card h4 { font-size: 12px; color: var(--kai-orange); letter-spacing: .08em; margin: 0 0 8px; font-weight: 700; }
.kai-card p, .kai-card li { font-size: 14px; line-height: 1.8; color: var(--kai-text); margin: 0; }
.kai-card ul { margin: 0; padding-left: 1.2em; }
.kai-tag { display: inline-block; background: var(--kai-navy); color: #fff; font-size: 11px; padding: 3px 10px; margin-bottom: 8px; letter-spacing: .06em; }
.kai-err { color: #c0392b; font-size: 13px; margin-top: 10px; line-height: 1.7; }
/* simulator */
.kai-row { display: flex; gap: 10px; }
.kai-row > div { flex: 1; }
.kai-unit { position: relative; }
.kai-unit input { padding-right: 44px !important; }
.kai-unit span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--kai-sub); }
.kai-check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-top: 14px; }
.kai-check input { width: 18px; height: 18px; accent-color: var(--kai-navy); }
.kai-result { background: #fff; border-top: 3px solid var(--kai-navy); padding: 16px; margin-top: 18px; }
.kai-big { font-family: 'Noto Serif JP', serif; font-size: 30px; color: var(--kai-navy); letter-spacing: .02em; }
.kai-big small { font-size: 14px; margin-left: 4px; }
.kai-dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 13px; margin-top: 12px; color: var(--kai-text); }
.kai-dl dt { color: var(--kai-sub); }
.kai-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.kai-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px; }
.kai-table th, .kai-table td { border-bottom: 1px solid #ece6e0; padding: 7px 4px; text-align: right; font-weight: 400; }
.kai-table th:first-child, .kai-table td:first-child { text-align: left; }
.kai-table thead th { color: var(--kai-sub); font-size: 11px; }
@media (max-width: 540px) {
  .kai-launch { right: 12px; bottom: 12px; height: 48px; padding: 0 18px 0 14px; font-size: 13px; }
  .kai-panel { right: 0; bottom: 0; width: 100%; height: 100dvh; border-radius: 0; }
}
.kai input[type=number] { -moz-appearance: textfield; }
.kai input[type=number]::-webkit-inner-spin-button, .kai input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }