/* ============================================================
   AI консултант — chat module (.ak)
   Reuses the site's tokens from style.css: Montserrat, #a91e23 (primary),
   #8c151a (hover), #e6e7e9 (canvas), #f3f3f3 (grey), #302f2e / #100f0d (text),
   .btn-link. Module height: --ak-height.
   ============================================================ */
.ak{
	--ak-height: 80vh;
	display: flex;
	height: var(--ak-height);
	min-height: 500px;
	background: #e6e7e9;
	border: 1px solid #d7d7d7;
	font-size: 14px;
	text-align: left;
	margin-bottom: 20px;
}
:where(.ak) button{font: inherit; border: none; cursor: pointer; background: none; color: inherit}

/* Sidebar */
.ak-side{width: 280px; flex: none; background: #fff; border-right: 1px solid #d7d7d7; display: flex; flex-direction: column; overflow-y: auto}
.ak-new-wrap{padding: 18px 16px 0}
.ak-new-wrap .btn-link{display: block; width: 100%; padding: 9px 10px; font-size: 15px; font-weight: 600; text-align: center}
.ak-model-wrap{padding: 14px 16px 18px; border-bottom: 1px solid #e6e7e9; position: relative}
.ak-label{margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: #808080}
.ak-model{display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 1px solid #acacac; padding: 9px 12px; font-size: 13px; font-weight: 500; color: #100f0d; text-align: left; transition: all 0.3s ease-in-out}
.ak-model:hover{border-color: #a91e23}
.ak-model svg{flex: none}
.ak-model-menu{display: none; position: absolute; left: 16px; right: 16px; top: 100%; margin-top: -12px; z-index: 20; background: #fff; border: 1px solid #d7d7d7; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1)}
.ak-model-menu.open{display: block}
.ak-model-opt{display: block; width: 100%; text-align: left; padding: 10px 12px}
.ak-model-opt + .ak-model-opt{border-top: 1px solid #e6e7e9}
.ak-model-opt:hover{background: #f3f3f3}
.ak-model-opt .t{font-size: 13px; font-weight: 600; color: #100f0d; display: block}
.ak-model-opt .d{font-size: 11.5px; color: #808080; margin-top: 2px; display: block}
.ak-model-opt.selected{background: #f7e9ea}
.ak-model-opt.selected .t{color: #a91e23}

.ak-group{padding: 14px 16px 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: #808080}
.ak-list{padding: 0 8px; display: flex; flex-direction: column; gap: 2px}
.ak-list:last-child{padding-bottom: 16px}
.ak-item{position: relative; display: flex; align-items: stretch}
.ak-item-btn{display: flex; align-items: center; flex: 1; min-width: 0; padding: 9px 30px 9px 10px; font-size: 13px; color: #302f2e; text-decoration: none}
.ak-item-btn .name{white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.ak-item:hover .ak-item-btn{background: #f3f3f3; color: #302f2e}
.ak-item.active .ak-item-btn{background: #f7e9ea; color: #a91e23; font-weight: 500}
.ak-more{position: absolute; right: 4px; top: 50%; transform: translateY(-50%); padding: 2px 6px; font-size: 15px; font-weight: 700; line-height: 1; color: #100f0d; opacity: 0}
.ak-item:hover .ak-more, .ak-item.menu-open .ak-more, .ak-item.active .ak-more{opacity: 1}
@media (hover: none){.ak-more{opacity: 1}}
.ak-item-menu{display: none; position: absolute; right: 0; top: 100%; z-index: 20; width: 175px; background: #fff; border: 1px solid #d7d7d7; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1)}
.ak-item.menu-open .ak-item-menu{display: block}
.ak-item-menu button{display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; font-size: 13px; text-align: left}
.ak-item-menu button:hover{background: #f3f3f3}
.ak-item-menu .del{color: #a91e23; font-weight: 500; border-top: 1px solid #e6e7e9}
.ak-rename{flex: 1; min-width: 0; margin: 4px 30px 4px 6px; padding: 5px 6px; border: 1px solid #a91e23; font: inherit; font-size: 13px; color: #100f0d; outline: none}

/* Delete confirmation */
.ak-dialog{border: 1px solid #d7d7d7; padding: 0; max-width: 420px; width: calc(100% - 32px); box-shadow: 0 0 40px rgba(0, 0, 0, 0.2); font-family: inherit}
.ak-dialog::backdrop{background: rgba(0, 0, 0, 0.35)}
.ak-dialog-box{padding: 22px 24px}
.ak-dialog h4{margin: 0 0 10px; font-size: 17px}
.ak-dialog p{margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: #302f2e}
.ak-dialog-actions{display: flex; justify-content: flex-end; gap: 10px}
.ak-disclaimer{max-width: 560px}
.ak-disclaimer-text{max-height: 50vh; overflow-y: auto; margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: #302f2e}
.ak-disclaimer-text p{margin: 0 0 .75em}
.ak-disclaimer-text p:last-child{margin-bottom: 0}
.ak-disclaimer .ak-dialog-actions .btn-simple{text-decoration: none}
.ak-dialog-actions .btn-simple, .ak-dialog-actions .btn-link{font-size: 14px; padding: 6px 18px}
.ak-empty{margin: 0; padding: 18px 16px 16px; font-size: 13px; color: #808080}
.ak-history{display: flex; flex-direction: column}
.ak-chat.is-loading{opacity: .5; transition: opacity .15s}

/* Chat */
.ak-main{flex: 1; display: flex; flex-direction: column; min-width: 0}
.ak-chat{flex: 1; overflow-y: auto; padding: 28px 48px; display: flex; flex-direction: column; gap: 22px}
.ak-msg-user{align-self: flex-end; max-width: 560px; background: #fff; border: 1px solid #d7d7d7; padding: 13px 18px; font-size: 14px; line-height: 1.55; color: #100f0d; white-space: pre-wrap; overflow-wrap: anywhere}
.ak-msg-ai{display: flex; gap: 14px; max-width: 720px}
.ak-avatar{flex: none; width: 32px; height: 32px; background: #a91e23; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700}
.ak-msg-ai .body{flex: 1; min-width: 0; background: #fff; padding: 16px 20px; font-size: 14px; line-height: 1.65; color: #100f0d; white-space: pre-wrap; overflow-wrap: anywhere}
.ak-intro .body{white-space: normal}
.ak-intro .body ul{margin: 6px 0; padding-left: 18px}
.ak-intro .body li{list-style: disc}

/* Rendered markdown (streamed answers, stored answers, admin detail).
   `.ak-msg-ai .body.md` is needed to beat the pre-wrap on `.ak-msg-ai .body` —
   with pre-wrap every newline between tags in the rendered HTML becomes a blank line. */
.md, .ak-msg-ai .body.md{white-space: normal}
.md > :first-child{margin-top: 0}
.md > :last-child{margin-bottom: 0}
.md p{margin: 0 0 .75em}
.md h1, .md h2, .md h3, .md h4{margin: 1em 0 .4em; line-height: 1.3; font-weight: 700}
.md h1{font-size: 1.25em}
.md h2{font-size: 1.15em}
.md h3{font-size: 1.05em}
.md h4{font-size: 1em}
.md ul, .md ol{margin: 0 0 .75em; padding-left: 1.5em}
.md ul li{list-style: disc}
.md ol li{list-style: decimal}
.md li{margin: .2em 0}
.md li > ul, .md li > ol{margin-bottom: 0}
.md a{color: #a91e23; text-decoration: underline}
.md a:hover{color: #8c151a}
.md strong{font-weight: 700}
.md code{background: #f3f3f3; padding: 1px 5px; font-size: .92em; font-family: Consolas, Menlo, monospace}
.md pre{background: #f3f3f3; padding: 10px 12px; margin: 0 0 .75em; overflow-x: auto; font-size: .92em}
.md pre code{background: none; padding: 0}
.md blockquote{margin: 0 0 .75em; padding: 2px 0 2px 12px; border-left: 3px solid #d7d7d7; color: #302f2e}
.md hr{border: 0; border-top: 1px solid #e6e7e9; margin: 1em 0}
.md table{display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 .9em; font-size: .93em}
.md th, .md td{border: 1px solid #d7d7d7; padding: 6px 10px; text-align: left; vertical-align: top}
.md th{background: #f3f3f3; font-weight: 600}
.md del{color: #808080}

/* Admin link + runs table */
.ak-admin-link{margin: -10px 0 10px; font-size: 13px}
.ak-admin-filters{display: flex; flex-wrap: wrap; gap: 8px}
.ak-admin-filters .btn-simple{font-size: 14px; padding: 4px 14px}
.ak-admin-filters .btn-simple span{font-weight: 400; opacity: .7}
.ak-admin-filters .btn-simple.active{background: #a91e23; color: #fff}
.ak-admin-filters .btn-simple.warn:not(.active){color: #a91e23; border-color: #a91e23}
.ak-admin-table{font-size: 14px}
.ak-admin-table td, .ak-admin-table th{vertical-align: top}
.ak-admin-table summary{cursor: pointer}
.ak-admin-table small{color: #808080; font-size: 11px; word-break: break-all}
.ak-run-detail{margin-top: 10px; padding: 12px 14px; background: #f3f3f3; font-size: 13px; line-height: 1.55}
.ak-run-q{margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid #d7d7d7; white-space: pre-wrap}
.ak-run-stale td{background: #fdf3f3}

.ak-msg-ai .body.is-thinking::after, .ak-msg-ai .ak-answer.is-thinking::after{content: ''; display: inline-block; width: 1.4em; animation: ak-dots 1.2s steps(4, end) infinite}
@keyframes ak-dots{0%{content: ''} 25%{content: '.'} 50%{content: '..'} 75%{content: '...'}}

.ak-msg-ai.is-error .body{border-left: 3px solid #a91e23}
.ak-msg-ai .body.ak-error-text, .ak-msg-ai .ak-answer.ak-error-text{color: #a91e23}
.ak-answer{white-space: pre-wrap; overflow-wrap: anywhere}
.ak-answer.md, .ak-msg-ai .ak-answer.md{white-space: normal}

/* Thinking block (agent progress events) */
.ak-think{margin: -4px 0 14px; border: 1px solid #d7d7d7; background: #fafafa; font-size: 13px; line-height: 1.4; white-space: normal}
.ak-think-head{display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; text-align: left; font-weight: 600; color: #302f2e}
.ak-think-head:hover{background: #f3f3f3}
.ak-think-title{flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.ak-think-chevron{flex: none; width: 8px; height: 8px; border-right: 1.6px solid #808080; border-bottom: 1.6px solid #808080; transform: rotate(-135deg); transition: transform .2s; margin-top: 4px}
.ak-think.is-collapsed .ak-think-chevron{transform: rotate(45deg); margin-top: -4px}
.ak-think.is-collapsed .ak-think-rows{display: none}
.ak-think-rows{margin: 0; padding: 2px 12px 8px 12px; border-top: 1px solid #e6e7e9}
.ak-think-row{list-style: none; margin: 0}
.ak-think-line{display: flex; align-items: center; gap: 10px; padding: 5px 0; color: #808080}
.ak-think-row[data-status="running"] .ak-think-line{color: #100f0d}
.ak-think-row[data-status="error"] .ak-think-line{color: #a91e23}
.ak-think-label{flex: 1; min-width: 0}
.ak-think-more{flex: none; width: 8px; height: 8px; border-right: 1.6px solid #808080; border-bottom: 1.6px solid #808080; transform: rotate(45deg); margin: -4px 4px 0 0; padding: 0}
.ak-think-more[aria-expanded="true"]{transform: rotate(-135deg); margin-top: 4px}
.ak-think-details{margin: 0 0 6px 24px; padding: 0}
.ak-think-details li{list-style: none; padding: 2px 0; font-size: 12px; color: #808080}
.ak-think-details li[data-status="running"]{color: #302f2e}
.ak-think-details li[data-status="error"]{color: #a91e23}

/* status icons: spinner while running, check when done, ! on error */
.ak-think-icon{flex: none; width: 14px; height: 14px; position: relative}
.ak-think[data-status="running"] .ak-think-head .ak-think-icon, .ak-think-row[data-status="running"] .ak-think-icon{border: 2px solid #e6e7e9; border-top-color: #a91e23; border-radius: 50%; animation: ak-spin .9s linear infinite}
.ak-think[data-status="done"] .ak-think-head .ak-think-icon::before, .ak-think-row[data-status="done"] .ak-think-icon::before{content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border-right: 2px solid #4a8a3c; border-bottom: 2px solid #4a8a3c; transform: rotate(45deg)}
.ak-think[data-status="error"] .ak-think-head .ak-think-icon::before, .ak-think-row[data-status="error"] .ak-think-icon::before{content: '!'; position: absolute; left: 4px; top: -3px; font-weight: 700; color: #a91e23}
.ak-think[data-status="stopped"] .ak-think-head .ak-think-icon::before, .ak-think-row[data-status="stopped"] .ak-think-icon::before{content: ''; position: absolute; left: 3px; top: 3px; width: 8px; height: 8px; background: #acacac}
@keyframes ak-spin{to{transform: rotate(360deg)}}
.ak-error-note{margin-top: 10px; padding-top: 8px; border-top: 1px solid #e6e7e9; font-size: 12.5px; color: #a91e23}

/* Composer */
.ak-composer{padding: 18px 48px 22px}
.ak-input-row{display: flex; align-items: flex-end; gap: 12px; background: #fff; border: 1px solid #acacac; padding: 6px 6px 6px 18px}
.ak-input-row:focus-within{border-color: #a91e23}
.ak-input{flex: 1; border: none; outline: none; resize: none; font: inherit; font-size: 14px; line-height: 1.45; padding: 9px 0; max-height: 160px; overflow-y: auto; color: #100f0d; background: transparent}
.ak-input::placeholder{color: #acacac; font-style: italic}
.ak-input:disabled{opacity: .6}
.ak-send{flex: none; width: 40px; height: 40px; background: #a91e23; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease-in-out}
.ak-send:hover{background: #8c151a}
.ak-send:disabled{opacity: .6; cursor: default}
.ak-send.is-stop{background: #fff; border: 1px solid #a91e23}
.ak-send.is-stop:hover{background: #f7e9ea}
.ak-stop-note{margin-top: 10px; padding-top: 8px; border-top: 1px solid #e6e7e9; font-size: 12.5px; color: #808080}
.ak-answer:empty + .ak-stop-note, .ak-answer > .ak-stop-note:only-child{margin: 0; padding: 0; border: 0}
.ak-meta{display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12px; color: #808080}
.ak-meta strong{color: #302f2e}
.ak-meta strong.red{color: #a91e23}
.ak-note{margin: 10px 0 0; text-align: center; font-size: 11px; color: #808080}

/* Mobile */
.ak-side-toggle{display: none}
@media all and (max-width: 767px){
	.ak{position: relative}
	.ak-side{position: absolute; top: 0; bottom: 0; left: 0; width: 75%; z-index: 30; box-shadow: 0 0 40px rgba(0, 0, 0, 0.25); transform: translateX(-105%); transition: transform 0.3s ease-in-out}
	.ak.side-open .ak-side{transform: translateX(0)}
	.ak-side-toggle{display: flex; align-items: center; gap: 8px; background: #fff; border-bottom: 1px solid #e6e7e9; width: 100%; padding: 12px 16px; font-size: 14px; font-weight: 600}
	.ak-main{background: #fff}
	.ak-chat{padding: 20px 16px}
	.ak-composer{padding: 12px 16px 16px}
	.ak-meta{flex-direction: column; gap: 2px}
}