/* screens/knowledge.css — knowledge screen. ALL classes .kn- prefixed.
   Built on the shared layer: .sec-head .card .table .field/.field__err .hint
   .menu .btn .pill come from shell.css — only what is genuinely this screen's
   own (the services table shape, the greeting preview, the voice cards, the
   test-call transcript) lives here. */

/* --- layout: main column + sticky right rail ------------------------------- */
.kn-grid{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:var(--sp-28);align-items:start}
.kn-main{display:flex;flex-direction:column;gap:var(--sp-sec);min-width:0}
.kn-rail{display:flex;flex-direction:column;gap:var(--sp-sec);min-width:0;
  position:sticky;top:calc(var(--topbar-h) + var(--sp-24))}

/* section label: the quiet uppercase heading inside the shared .sec-head */
.kn-sec__label{font-size:var(--fs-meta);font-weight:700;color:var(--muted-2)}

/* the shared footer under a text panel — one Save, right aligned */
.kn-foot{display:flex;justify-content:flex-end;margin-top:var(--sp-12)}

/* --- 1 · services table (the money table: dense but calm) ------------------ */
.kn-table{min-width:460px}
.kn-td-name b{font-weight:600;font-size:var(--fs-md);letter-spacing:-.01em}
.kn-table .kn-th-dur,.kn-td-dur{width:132px;color:var(--muted)}
.kn-table .kn-th-price,.kn-td-price{width:96px;text-align:right}
.kn-td-price{font-weight:700}
.kn-table .kn-th-menu,.kn-td-menu{width:52px;padding-right:var(--sp-10)}
.kn-td-menu .menu{display:flex;justify-content:flex-end}
.kn-tr-empty td{color:var(--muted-2);font-weight:500;font-size:var(--fs-sm);text-align:center}

/* inline add row under the table */
.kn-add{display:flex;flex-direction:column;gap:var(--sp-8);
  padding:var(--sp-12) var(--sp-14);border-top:1px solid var(--line);background:var(--card-2);
  border-radius:0 0 var(--r-card) var(--r-card)}
.kn-add__row{display:flex;align-items:center;gap:var(--sp-10)}
.kn-add__ic{width:16px;height:16px;color:var(--muted-2);flex:none;margin-left:var(--sp-2)}
.kn-add input{height:var(--ctl-h-sm);font-size:var(--fs-sm);border-radius:var(--r-md);background:var(--card)}
.kn-add input.kn-add__name{flex:1;width:auto;min-width:120px}
.kn-add input.kn-add__min,.kn-add input.kn-add__price{width:84px;flex:none;text-align:center;padding:0 var(--sp-8)}
.kn-add input[type=number]::-webkit-outer-spin-button,
.kn-add input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.kn-add input[type=number]{-moz-appearance:textfield;appearance:textfield}
.kn-add .btn{flex:none}
/* the error visual comes from shell.css (.ctl--err) — never re-implemented here */
.kn-add__err{padding-left:var(--sp-28)}

/* --- 2 · facts -------------------------------------------------------------- */
.kn-facts{display:flex;flex-direction:column}
.kn-fact{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-12) var(--sp-20);
  border-bottom:1px solid var(--line);font-size:var(--fs-md);min-height:var(--row-h)}
.kn-fact:last-child{border-bottom:0}
.kn-fact__dot{width:5px;height:5px;border-radius:var(--r-circle);background:var(--muted-2);opacity:.6;flex:none}
.kn-fact__txt{flex:1;min-width:0;font-weight:500;line-height:1.5}
.kn-fact .menu{margin-left:auto;flex:none}
.kn-fact--empty{justify-content:center;color:var(--muted-2);font-weight:500;font-size:var(--fs-sm)}

/* --- 3 · greeting ----------------------------------------------------------- */
.kn-greet__input{font-weight:600;font-size:var(--fs-base)}
.kn-greet__foot{display:flex;align-items:baseline;gap:var(--sp-12);margin-top:var(--sp-8)}
.kn-count{margin-left:auto;font-size:var(--fs-meta);font-weight:600;color:var(--muted-2);flex:none}
.kn-preview{display:flex;flex-direction:column;gap:var(--sp-8);margin-top:var(--sp-20);
  padding:var(--sp-16);background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-lg)}
.kn-preview__lbl{font-size:var(--fs-meta);font-weight:700;color:var(--muted-2)}
.kn-preview__bub{align-self:flex-start;max-width:56ch;padding:var(--sp-12) var(--sp-16);
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-xl) var(--r-xl) var(--r-xl) var(--r-xs);box-shadow:var(--e1)}
.kn-preview__tag{display:block;font-style:normal;font-size:var(--fs-meta);font-weight:700;color:var(--muted-2);margin-bottom:3px}
.kn-preview__txt{font-size:var(--fs-md);font-weight:500;line-height:1.5}

/* --- 4 · AI instruction ----------------------------------------------------- */
.kn-prompt textarea{font-size:var(--fs-md);min-height:112px}
.kn-prompt .field{margin-top:var(--sp-12)}

/* --- 5 · voice cards --------------------------------------------------------- */
.kn-voices{display:flex;flex-direction:column;gap:var(--sp-10)}
.kn-voice{position:relative;display:flex;align-items:center;gap:var(--sp-12);
  padding:var(--sp-12) var(--sp-16);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--e1);cursor:pointer;
  transition:border-color var(--t),box-shadow var(--t)}
.kn-voice:hover{border-color:var(--line-2)}
.kn-voice.is-sel{border-color:var(--live-line);box-shadow:var(--e1),0 0 0 3px var(--live-soft)}
/* every box-shadow state needs its focus-visible companion */
.kn-voice:focus-visible,.kn-voice.is-sel:focus-visible{box-shadow:var(--focus)}
.kn-voice__play{width:40px;height:40px;border-radius:var(--r-circle);background:var(--ink);color:var(--on-ink);
  display:grid;place-items:center;flex:none;transition:background var(--t),transform var(--t)}
.kn-voice__play:hover{background:var(--ink-2);transform:scale(1.05)}
.kn-voice__pic{width:15px;height:15px;margin-left:var(--sp-2)}
.kn-voice__txt{min-width:0}
.kn-voice__txt b{display:block;font-size:var(--fs-md);font-weight:700;letter-spacing:-.01em}
.kn-voice__txt span{display:block;font-size:var(--fs-fine);font-weight:500;color:var(--muted-2);margin-top:1px}
/* the tick carries meaning → --ok (green text/icon), never --live */
.kn-voice__check{width:17px;height:17px;margin-left:auto;flex:none;color:var(--ok);
  opacity:0;transform:scale(.7);transition:opacity var(--t),transform var(--t)}
.kn-voice.is-sel .kn-voice__check{opacity:1;transform:scale(1)}
.kn-voice__note{margin-top:var(--sp-10)}

/* equalizer: 5 bars, ~2s of life in the play circle */
.kn-eq{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);height:16px}
.kn-eq i{width:2.5px;height:30%;border-radius:2px;background:var(--on-ink);animation:kn-eq .78s ease-in-out infinite}
.kn-eq i:nth-child(1){animation-delay:-.10s}
.kn-eq i:nth-child(2){animation-delay:-.34s}
.kn-eq i:nth-child(3){animation-delay:-.58s}
.kn-eq i:nth-child(4){animation-delay:-.22s}
.kn-eq i:nth-child(5){animation-delay:-.46s}
@keyframes kn-eq{0%,100%{height:22%}50%{height:96%}}

/* --- 6 · test call ----------------------------------------------------------- */
.kn-call{padding:var(--sp-20)}
.kn-call__idle{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--sp-4);padding:var(--sp-16) var(--sp-8) var(--sp-8)}
.kn-call__idle b{font-size:var(--fs-base);font-weight:700;margin-top:var(--sp-12);letter-spacing:-.01em}
.kn-call__idle .hint{max-width:32ch}
/* THE one aurora element of this screen */
.kn-call__btn{width:64px;height:64px;border-radius:var(--r-circle);background:var(--grad-ink);color:var(--on-ink);
  display:grid;place-items:center;
  transition:transform var(--t),filter var(--t)}
.kn-call__btn:hover{transform:scale(1.06)}
.kn-call__btn:active{transform:scale(.97)}
.kn-call__btn svg{width:24px;height:24px}

.kn-call__top{display:flex;align-items:center;gap:var(--sp-10);margin-bottom:var(--sp-12);min-height:var(--btn-h-sm)}
.kn-call__state{display:inline-flex;align-items:center;gap:var(--sp-8);font-size:var(--fs-fine);font-weight:700;color:var(--muted)}
.kn-call__dot{width:7px;height:7px;border-radius:var(--r-circle);flex:none}
.kn-call__dot--idle{background:var(--muted-2)}
.kn-call__stop{margin-left:auto}
.kn-call__lines{display:flex;flex-direction:column;gap:var(--sp-8);max-height:290px;overflow-y:auto;scrollbar-width:thin}
.kn-line{max-width:94%;padding:var(--sp-8) var(--sp-12);border-radius:var(--r-lg);
  font-size:var(--fs-sm);font-weight:500;line-height:1.5;animation:kn-line-in .22s cubic-bezier(.2,0,0,1)}
.kn-line i{display:block;font-style:normal;font-size:var(--fs-meta);font-weight:700;color:var(--muted-2);margin-bottom:var(--sp-2)}
.kn-line--c{align-self:flex-start;background:var(--card-2);border:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) var(--r-lg) var(--r-xs)}
.kn-line--a{align-self:flex-end;background:var(--ink);color:var(--on-ink);
  border-radius:var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg)}
.kn-line--a i{color:rgba(255,255,255,.55)}
@keyframes kn-line-in{from{opacity:0;transform:translateY(5px)}}

.kn-rcpt{display:flex;align-items:center;gap:var(--sp-12);margin-top:var(--sp-12);padding:var(--sp-12) var(--sp-14);
  background:var(--ok-soft);border:1px solid var(--ok-line);border-radius:var(--r-lg);
  animation:kn-line-in .25s cubic-bezier(.2,0,0,1)}
.kn-rcpt > div{min-width:0}
.kn-rcpt i{display:block;font-style:normal;font-size:var(--fs-meta);font-weight:700;color:var(--ok)}
.kn-rcpt b{display:block;font-size:var(--fs-sm);font-weight:700;margin-top:1px}
.kn-rcpt time{margin-left:auto;flex:none;font-size:var(--fs-sm);font-weight:700;color:var(--ok)}
.kn-call__acts{display:flex;justify-content:center;margin-top:var(--sp-12)}
.kn-call__note{margin-top:var(--sp-14);padding-top:var(--sp-12);border-top:1px solid var(--line);text-align:center}

/* --- modal form bits ---------------------------------------------------------- */
.kn-form{display:flex;flex-direction:column;gap:var(--sp-14);margin-top:var(--sp-16)}
.kn-form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12);align-items:start}

/* --- responsive ---------------------------------------------------------------- */
@media (max-width:1080px){
  .kn-grid{grid-template-columns:minmax(0,1fr)}
  .kn-rail{position:static}
}
@media (max-width:560px){
  .kn-add__row{flex-wrap:wrap}
  .kn-add input.kn-add__name{flex-basis:100%;min-width:0}
  .kn-add input.kn-add__min,.kn-add input.kn-add__price{width:76px;flex:1 1 76px}
  .kn-add__err{padding-left:0}
  .kn-form__row{grid-template-columns:1fr}
  .kn-call__lines{max-height:250px}
}
/* services table → stacked rows on narrow screens: name + "60 წთ · 60₾" meta
   on the left, ⋯ on the right — no horizontal scroll, nothing clipped */
@media (max-width:700px){
  .kn-table{min-width:0}
  .kn-table thead{display:none}
  .kn-table tbody{display:block}
  .kn-table tbody tr{
    display:grid;grid-template-columns:auto auto 1fr auto;
    grid-template-areas:"name name name menu" "dur price . menu";
    align-items:center;column-gap:0;
    padding:var(--sp-12) var(--sp-8) var(--sp-12) var(--sp-16);border-bottom:1px solid var(--line);
  }
  .kn-table tbody tr:last-child{border-bottom:0}
  .kn-table td{display:block;height:auto;padding:0;border:0;width:auto}
  .kn-td-name{grid-area:name;padding-bottom:var(--sp-2)}
  .kn-td-dur{grid-area:dur;width:auto;font-size:var(--fs-fine)}
  .kn-td-price{grid-area:price;width:auto;text-align:left;font-size:var(--fs-fine);font-weight:600;color:var(--muted)}
  .kn-td-price::before{content:"·";margin:0 var(--sp-6);color:var(--muted-2)}
  .kn-td-menu{grid-area:menu;width:auto;padding-right:0}
  .kn-table tbody tr.kn-tr-empty{display:block;padding:var(--sp-16);text-align:center}
}
@media (prefers-reduced-motion: reduce){
  .kn-eq i,.kn-line,.kn-rcpt{animation:none}
}