/* ai.css — Zyvora AI assistant page */

.ai-page{
  display: grid;
  grid-template-columns: 280px 1fr;
  height: calc(100vh - 62px);
  margin-top: 62px;
  background: var(--au-bg-base, #f5f7fb);
}

@media (max-width: 900px){
  .ai-page{ grid-template-columns: 1fr; height: auto; min-height: calc(100vh - 62px); }
  .ai-side{ display: none !important; }
}

/* ============ SIDEBAR ============ */
.ai-side{
  background: linear-gradient(180deg, rgba(15,23,42,.96), rgba(11,18,32,.92));
  border-inline-end: 1px solid rgba(148,163,184,.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #e2e8f0;
}
:root[data-theme="light"] .ai-side{
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border-inline-end: 1px solid #e2e8f0;
  color: #1e293b;
}

.ai-side__head{
  padding: 16px 14px;
  border-bottom: 1px solid rgba(148,163,184,.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
:root[data-theme="light"] .ai-side__head{
  border-bottom: 1px solid #e2e8f0;
}
.ai-side__title{
  display: flex;
  align-items: center;
  gap: 10px;
}
.ai-glow-icon{
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #cbd5e1, #475569);
  color: #fff;
  font-size: 18px;
  box-shadow: 0 6px 16px rgba(71,85,105,.30);
}
.ai-side__brand{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.02em;
}
.ai-side__sub{
  font-size: 10.5px;
  opacity: .65;
  margin-top: 1px;
}
.ai-side__new{
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(148,163,184,.30);
  background: linear-gradient(135deg, #cbd5e1, #6b7280);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 18px;
  font-weight: 800;
}
.ai-side__new:hover{ transform: scale(1.05); }

.ai-side__section{
  padding: 14px 12px;
  overflow-y: auto;
}
.ai-side__section + .ai-side__section{
  border-top: 1px solid rgba(148,163,184,.10);
}
.ai-side__heading{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .60;
  margin-bottom: 8px;
  padding: 0 6px;
}

.ai-suggest{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(148,163,184,.06);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  margin-bottom: 5px;
  transition: all .12s;
}
.ai-suggest:hover{
  background: rgba(148,163,184,.14);
  border-color: rgba(148,163,184,.30);
}
.ai-suggest__icon{
  width: 32px; height: 32px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(148,163,184,.15);
  font-size: 15px;
}
.ai-suggest b{
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 1px;
}
.ai-suggest small{
  font-size: 10.5px;
  opacity: .65;
}

.ai-history-list{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ai-history-empty{
  font-size: 11px;
  opacity: .5;
  padding: 12px;
  text-align: center;
}
.ai-history-item{
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-history-item:hover{ background: rgba(148,163,184,.10); }

.ai-side__foot{
  margin-top: auto;
  padding: 12px 14px;
  border-top: 1px solid rgba(148,163,184,.15);
  font-size: 11px;
  opacity: .75;
}
.ai-status{
  display: flex; align-items: center; gap: 7px;
}
.ai-status__dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16,185,129,.7);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; }
  50% { opacity: .5; }
}

/* ============ MAIN ============ */
.ai-main{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--au-bg-base, #f5f7fb);
}
:root[data-theme="light"] .ai-main{ background: #f5f7fb; }
:root[data-theme="dark"]  .ai-main{ background: rgba(11,18,32,.4); }

.ai-header{
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid rgba(148,163,184,.15);
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px);
  flex: none;
}
:root[data-theme="dark"] .ai-header{
  background: rgba(15,23,42,.50);
  border-bottom: 1px solid rgba(148,163,184,.15);
}
.ai-header__title{
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 4px;
}
.ai-header__sub{
  font-size: 12.5px;
  color: var(--au-text-3, #94a3b8);
  margin: 0;
}
.ai-badge{
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #94a3b8, #475569);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  box-shadow: 0 4px 12px rgba(71,85,105,.30);
}

/* ============ CHAT THREAD ============ */
.ai-thread{
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Welcome card (shown when thread is empty) */
.ai-welcome{
  max-width: 760px;
  margin: 30px auto 0;
  text-align: center;
  padding: 30px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(15,23,42,.04);
}
:root[data-theme="dark"] .ai-welcome{
  background: rgba(15,23,42,.6);
  border-color: rgba(148,163,184,.18);
  color: #e2e8f0;
}
.ai-welcome__icon{
  width: 60px; height: 60px;
  margin: 0 auto 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #cbd5e1, #475569);
  color: #fff;
  font-size: 30px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(71,85,105,.35);
}
.ai-welcome h2{
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 8px;
}
.ai-welcome p{
  font-size: 13.5px;
  color: var(--au-text-3, #64748b);
  margin: 0 0 24px;
  line-height: 1.6;
}

.ai-examples{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-top: 18px;
  text-align: start;
}
.ai-example-grp__title{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--au-text-2, #475569);
  margin-bottom: 6px;
}
.ai-example{
  display: block;
  width: 100%;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: var(--au-text-2, #475569);
  font: inherit;
  font-size: 12px;
  text-align: start;
  cursor: pointer;
  margin-bottom: 5px;
  transition: all .12s;
}
.ai-example:hover{
  border-color: #94a3b8;
  background: #fff;
  color: #1e293b;
}
:root[data-theme="dark"] .ai-example{
  background: rgba(15,23,42,.4);
  border-color: rgba(148,163,184,.18);
  color: #cbd5e1;
}

/* Message rows */
.ai-msg{
  display: flex;
  gap: 12px;
  max-width: 100%;
}
.ai-msg__avatar{
  flex: none;
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 14px;
}
.ai-msg--user .ai-msg__avatar{
  background: #475569;
  color: #fff;
}
.ai-msg--ai .ai-msg__avatar{
  background: linear-gradient(135deg, #cbd5e1, #475569);
  color: #fff;
  box-shadow: 0 4px 12px rgba(71,85,105,.25);
}
.ai-msg__body{
  flex: 1;
  min-width: 0;
}
.ai-msg__role{
  font-size: 11px;
  font-weight: 700;
  opacity: .65;
  margin-bottom: 4px;
}
.ai-msg__content{
  padding: 13px 16px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.7;
  background: #fff;
  border: 1px solid #e2e8f0;
}
:root[data-theme="dark"] .ai-msg__content{
  background: rgba(15,23,42,.6);
  border-color: rgba(148,163,184,.18);
  color: #e2e8f0;
}
.ai-msg--user .ai-msg__content{
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border-color: #cbd5e1;
}
:root[data-theme="dark"] .ai-msg--user .ai-msg__content{
  background: linear-gradient(135deg, rgba(148,163,184,.18), rgba(71,85,105,.12));
}

/* AI response components */
.ai-resp{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ai-resp__summary{
  font-size: 14px;
  font-weight: 600;
  color: var(--au-text-1, #1e293b);
}
:root[data-theme="dark"] .ai-resp__summary{ color: #e2e8f0; }
.ai-resp__summary b{ color: #475569; }

/* Stats cards */
.ai-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.ai-stat{
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border: 1px solid #e2e8f0;
  text-align: center;
}
:root[data-theme="dark"] .ai-stat{
  background: rgba(148,163,184,.10);
  border-color: rgba(148,163,184,.20);
}
.ai-stat__label{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 4px;
}
.ai-stat__value{
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #475569;
}
.ai-stat--ok .ai-stat__value{ color: #10b981; }
.ai-stat--warn .ai-stat__value{ color: #f59e0b; }
.ai-stat--bad .ai-stat__value{ color: #ef4444; }
.ai-stat--info .ai-stat__value{ color: #3b82f6; }

/* Tables */
.ai-table-wrap{
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}
:root[data-theme="dark"] .ai-table-wrap{
  background: rgba(15,23,42,.4);
  border-color: rgba(148,163,184,.18);
}
.ai-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.ai-table th{
  background: #f1f5f9;
  text-align: start;
  padding: 9px 12px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
:root[data-theme="dark"] .ai-table th{
  background: rgba(148,163,184,.10);
  color: #94a3b8;
  border-bottom-color: rgba(148,163,184,.18);
}
.ai-table td{
  padding: 8px 12px;
  border-bottom: 1px solid #f1f5f9;
  color: var(--au-text-1, #1e293b);
}
:root[data-theme="dark"] .ai-table td{
  border-bottom-color: rgba(148,163,184,.10);
  color: #e2e8f0;
}
.ai-table tr:last-child td{ border-bottom: none; }
.ai-table tr:hover td{ background: rgba(148,163,184,.05); }
.ai-table .num{ text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; }
.ai-table .chip{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
}
.ai-table .chip--in{ background: rgba(16,185,129,.15); color: #10b981; }
.ai-table .chip--out{ background: rgba(239,68,68,.15); color: #ef4444; }
.ai-table .chip--transfer{ background: rgba(59,130,246,.15); color: #3b82f6; }

/* Actions row */
.ai-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ai-action{
  padding: 7px 12px;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: var(--au-text-2, #475569);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.ai-action:hover{
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #1e293b;
}
:root[data-theme="dark"] .ai-action{
  background: rgba(148,163,184,.10);
  border-color: rgba(148,163,184,.20);
  color: #cbd5e1;
}

/* Loading state */
.ai-typing{
  display: inline-flex;
  gap: 4px;
}
.ai-typing span{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #94a3b8;
  animation: typing 1.4s infinite ease-in-out;
}
.ai-typing span:nth-child(1){ animation-delay: 0s; }
.ai-typing span:nth-child(2){ animation-delay: .2s; }
.ai-typing span:nth-child(3){ animation-delay: .4s; }
@keyframes typing {
  0%, 80%, 100% { transform: scale(.6); opacity: .4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ============ INPUT BAR ============ */
.ai-input-bar{
  padding: 16px 24px 20px;
  border-top: 1px solid rgba(148,163,184,.15);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  flex: none;
}
:root[data-theme="dark"] .ai-input-bar{
  background: rgba(15,23,42,.65);
}
.ai-input-wrap{
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 2px solid #cbd5e1;
  border-radius: 14px;
  padding: 6px 6px 6px 14px;
  transition: border-color .12s, box-shadow .12s;
}
.ai-input-wrap:focus-within{
  border-color: #475569;
  box-shadow: 0 0 0 4px rgba(148,163,184,.15);
}
:root[data-theme="dark"] .ai-input-wrap{
  background: rgba(15,23,42,.6);
  border-color: rgba(148,163,184,.30);
}
.ai-input-wrap input{
  flex: 1;
  min-width: 0;
  height: 44px;
  background: transparent;
  border: none;
  color: var(--au-text-1, #1e293b);
  font: inherit;
  font-size: 15px;
  outline: none;
}
:root[data-theme="dark"] .ai-input-wrap input{ color: #e2e8f0; }
.ai-input-wrap input::placeholder{ color: #94a3b8; font-size: 13.5px; }
.ai-send{
  width: 44px; height: 44px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #475569, #1e293b);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s;
}
.ai-send:hover{ transform: scale(1.06); }
.ai-send:disabled{ opacity: .4; cursor: not-allowed; transform: none; }

.ai-hint{
  font-size: 11px;
  color: var(--au-text-3, #94a3b8);
  margin-top: 8px;
  text-align: center;
}

/* Scrollbar styling */
.ai-thread::-webkit-scrollbar,
.ai-side__section::-webkit-scrollbar{ width: 6px; }
.ai-thread::-webkit-scrollbar-thumb,
.ai-side__section::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.30);
  border-radius: 3px;
}