/* Стили чата ColorAI — используют токены из colorai-tokens.css */

*{box-sizing:border-box}
html{height:100%;overflow:hidden;margin:0}
body{
  position:fixed;top:0;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;
  font-family:'Inter',sans-serif;
  background:rgb(var(--ch-navy));
  color:rgb(var(--ch-text-main));
  overflow:hidden;margin:0;
}

.scrollbar::-webkit-scrollbar{width:4px}
.scrollbar::-webkit-scrollbar-track{background:transparent}
.scrollbar::-webkit-scrollbar-thumb{
  background:rgb(var(--ch-navy-border));
  border-radius:4px;
}

.text-gradient{
  background:linear-gradient(135deg,#C9A962 0%,#D8BD78 48%,#8B7355 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.bot-content h4{font-size:.7rem;font-weight:700;color:rgb(var(--ch-gold));margin:.85rem 0 .3rem;text-transform:uppercase;letter-spacing:.07em}
.bot-content h4:first-child{margin-top:0}
.bot-content h4.bot-heading-md{
  text-transform:none;letter-spacing:.012em;font-weight:600;color:rgb(var(--ch-bot-heading-soft));
  margin:1rem 0 .4rem;padding:0 0 .35rem 0;
  border-bottom:1px solid rgba(201,169,98,.2);
  line-height:1.35;
}
.bot-content h4.bot-heading-md:first-child{margin-top:0}
.bot-content h4.bot-h-level1{font-size:1.05rem;font-weight:650;color:rgb(var(--ch-text-main));border-bottom-color:rgba(201,169,98,.28)}
.bot-content h4.bot-h-level2{font-size:.98rem;color:rgb(var(--ch-bot-heading-soft))}
.bot-content h4.bot-h-level3{font-size:.88rem;color:rgb(var(--ch-bot-heading-soft));font-weight:600}
.bot-soft-break{height:0;margin:.55rem 0;border:none;border-top:1px solid rgba(201,169,98,.12)}
.bot-content h4.bot-sec-topic{
  text-transform:none;letter-spacing:.03em;font-size:.8rem;font-weight:600;
  color:rgb(var(--ch-bot-topic));margin:.9rem 0 .35rem;padding:0;border:none;
}
.bot-content h4.bot-sec-topic:first-child{margin-top:0}
.bot-content ul,.bot-content ol{padding-left:1.2rem;margin:.4rem 0}
.bot-content li{margin:.25rem 0;line-height:1.6}
.bot-content li::marker{color:rgb(var(--ch-gold))}
.bot-content strong{color:rgb(var(--ch-bot-strong));font-weight:600}

.bot-content .md-table{width:100%;border-collapse:collapse;margin:.75rem 0;font-size:.82rem;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.bot-content .md-table th{
  background:rgb(var(--ch-table-th-bg));
  color:rgb(var(--ch-gold));
  padding:.4rem .65rem;text-align:left;font-weight:600;
  border-bottom:1px solid rgb(var(--ch-table-border));white-space:nowrap;
}
.bot-content .md-table td{
  padding:.35rem .65rem;border-bottom:1px solid rgb(var(--ch-table-border));
  color:rgb(var(--ch-table-td));vertical-align:top;line-height:1.5;
}
.bot-content .md-table tr:last-child td{border-bottom:none}
.bot-content .md-table tbody tr:hover td{background:rgb(var(--ch-table-row-hover))}

@keyframes pulse-dot{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.typing-dot:nth-child(1){animation:pulse-dot 1.2s ease-in-out infinite}
.typing-dot:nth-child(2){animation:pulse-dot 1.2s ease-in-out .2s infinite}
.typing-dot:nth-child(3){animation:pulse-dot 1.2s ease-in-out .4s infinite}

#left-sidebar{width:260px;flex-shrink:0;transition:width .25s ease,transform .25s ease}
#left-sidebar.collapsed{width:0;overflow:hidden;border:none}
@media(max-width:768px){
  #left-sidebar{position:fixed;top:0;left:0;bottom:0;z-index:100;transform:translateX(-100%)}
  #left-sidebar.open{transform:translateX(0)}
  #left-sidebar.collapsed{width:260px;transform:translateX(-100%)}
  #sidebar-overlay{display:block}
}

#right-sidebar{width:200px;flex-shrink:0}
@media(max-width:1024px){#right-sidebar{display:none}}

#chat-q{resize:none;min-height:52px;max-height:180px;overflow-y:auto}

.hist-item.active{background:rgb(var(--ch-navy-light));border-color:rgba(201,169,98,.48)}
.hist-item:hover:not(.active){background:rgb(var(--ch-navy-light))}

.action-icon-btn{display:inline-flex;align-items:center;justify-content:center;padding:5px;border-radius:6px;opacity:.45;color:inherit;transition:opacity .18s,color .18s,background .18s;cursor:pointer;line-height:1}
.action-icon-btn:hover{opacity:1;background:rgba(var(--ch-action-hover))}
.action-icon-btn.active,.action-icon-btn:active{opacity:1}
.rate-btn.up.active{opacity:1;color:#4ade80}
.rate-btn.down.active{opacity:1;color:#f87171}

mark{background:rgba(201,169,98,.28);color:rgb(var(--ch-mark-fg));border-radius:2px}

.modal-overlay{transition:opacity .2s ease}
.modal-overlay.hidden{display:none!important}

.export-period.sel,.export-format.sel{border-color:rgba(201,169,98,.6);color:rgb(var(--ch-gold));background:rgba(201,169,98,.1)}

.pmenu-btn{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:10px;
  font-size:.8rem;color:rgb(var(--ch-text-muted));transition:background .15s,color .15s;cursor:pointer;background:none;border:none;text-align:left}
.pmenu-btn:hover{background:rgb(var(--ch-pmenu-hover-bg));color:rgb(var(--ch-text-main))}
.pmenu-btn.danger{color:#f87171}
.pmenu-btn.danger:hover{background:rgba(248,113,113,.08)}

@media(max-width:1023px){
  #profile-popup{
    left:0.75rem!important;right:0.75rem!important;width:auto!important;bottom:max(0.75rem,env(safe-area-inset-bottom))!important;
    max-height:min(70vh,520px);overflow-y:auto
  }
}

.brand-row{display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer}
.brand-row input[type=checkbox]{width:15px;height:15px;accent-color:rgb(var(--ch-gold));cursor:pointer;flex-shrink:0}
.brand-row span{font-size:.78rem;color:rgb(var(--ch-text-muted))}
.brand-row:hover span{color:rgb(var(--ch-text-main))}

.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mode-grid.mode-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mode-choice{
  display:flex;align-items:center;justify-content:center;
  min-height:36px;padding:8px 10px;border-radius:10px;
  border:1px solid rgb(var(--ch-navy-border));
  background:rgba(var(--ch-navy),.28);
  color:rgb(var(--ch-text-muted));
  font-size:.72rem;font-weight:600;line-height:1.15;text-align:center;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
.mode-choice:hover{border-color:rgba(201,169,98,.42);color:rgb(var(--ch-gold));background:rgba(201,169,98,.06)}
.mode-choice.sel{
  border-color:rgba(201,169,98,.64);
  color:rgb(var(--ch-gold));
  background:rgba(201,169,98,.1);
  box-shadow:inset 0 0 0 1px rgba(201,169,98,.1);
}
.mode-note{font-size:.68rem;line-height:1.45;color:rgb(var(--ch-text-dim))}
@media(max-width:420px){.mode-grid.mode-grid-3{grid-template-columns:1fr}}

.icon-gold{color:rgb(var(--ch-gold))}

.expand-btn{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:.75rem;padding:5px 10px;border-radius:8px;
  font-size:.72rem;font-weight:500;color:rgb(var(--ch-gold));
  border:1px solid rgba(201,169,98,.28);background:rgba(201,169,98,.06);
  cursor:pointer;transition:background .15s,border-color .15s;
}
.expand-btn:hover{background:rgba(201,169,98,.12);border-color:rgba(201,169,98,.48)}
.expand-btn svg{transition:transform .25s}
.expand-btn.open svg{transform:rotate(180deg)}
.full-answer{overflow:hidden;max-height:0;transition:max-height .35s ease}
.full-answer.open{max-height:9999px}
.full-answer-inner{margin-top:.9rem;padding-top:.9rem;border-top:1px solid rgba(201,169,98,.15)}

.quick-replies{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(201,169,98,.14);
}
.quick-replies.hidden{display:none}
.quick-reply-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;max-width:100%;
  padding:7px 11px;border-radius:8px;
  border:1px solid rgba(201,169,98,.26);
  background:rgba(201,169,98,.06);
  color:rgb(var(--ch-text-main));
  font-size:.78rem;font-weight:600;line-height:1.25;
  text-align:center;overflow-wrap:anywhere;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,opacity .15s,transform .15s;
}
.quick-reply-btn:hover{
  background:rgba(201,169,98,.12);
  border-color:rgba(201,169,98,.48);
  color:rgb(var(--ch-gold));
}
.quick-reply-btn:active{transform:translateY(1px)}
.quick-reply-btn.selected{
  background:rgba(201,169,98,.16);
  border-color:rgba(201,169,98,.62);
  color:rgb(var(--ch-gold));
}
.quick-reply-btn:disabled{opacity:.58;cursor:default;transform:none}

@media(max-width:520px){
  .quick-reply-btn{flex:1 1 calc(50% - 4px);padding-inline:8px}
}

.chat-bg-gradient{
  background:linear-gradient(135deg,rgb(var(--ch-navy)) 0%,rgb(var(--ch-navy-mid)) 58%,rgb(var(--ch-welcome-accent)) 100%);
}
.chat-bg-grid{
  opacity:var(--ch-grid-opacity);
  background-image:linear-gradient(rgba(201,169,98,.75) 1px,transparent 1px),linear-gradient(90deg,rgba(201,169,98,.75) 1px,transparent 1px);
  background-size:56px 56px;
}

.material-symbols-outlined.chat-ms-icon{
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  font-size:1.25rem;
  line-height:1;
}