.darkbot-modal .overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:10000; display:none;
}
.darkbot-modal.show .overlay{ display:block; }
.darkbot-modal .popup-container{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width: 550px; max-width: 95vw; max-height: 90vh; background:#fff; border-radius:6px;
  box-shadow:0 24px 64px rgba(0,0,0,.35); z-index:10001; display:none; overflow:hidden;
}
.darkbot-modal.show .popup-container{ display:block; }
.darkbot-modal .content{
  padding:30px; background:#fff; display:flex; flex-direction:column; gap:14px; max-height:90vh;
}
#darkbot-close{
  position:absolute; right:12px; top:12px; width:20px; height:20px; cursor:pointer;
}
#darkbot-close:before, #darkbot-close:after{
  content:''; position:absolute; left:9px; top:0; width:2px; height:20px; background:#999;
}
#darkbot-close:before{ transform:rotate(45deg); }
#darkbot-close:after{ transform:rotate(-45deg); }
.#darkbot-close:hover:before, #darkbot-close:hover:after{ background:#000; }

.db-title{ font-size:24px; font-weight:normal; line-height:1; margin:0 0 6px; }

.db-messages{
  background:#F6F6F6; border-radius:6px; padding:14px; min-height:160px; max-height:45vh;
  overflow:auto; border:1px solid #EAEAEA;
}
.db-row{ margin:8px 0; }
.db-user{ color:#111; }
.db-bot{ color:#222; }
.db-row .label{ font-weight:600; margin-right:6px; }

.db-input{ display:flex; gap:10px; align-items:center; }
.db-input .input-text{
  flex:1; border:1px solid #dcdcdc; border-radius:6px; padding:10px 12px; background:#fff; color:#111;
}
.db-input .input-text:focus{ outline:none; border-color:#aaa; }
.db-input .button{
  white-space:nowrap; background:#000 !important; color:#fff; border:0 !important; border-radius:6px; padding:10px 16px;
}
.db-input .button:hover{ background:rgba(0,0,0,.79) !important; }

.db-status{ display:flex; align-items:center; gap:8px; font-size:12px; color:#666; padding-top:6px; }
.db-status .dot{ width:8px; height:8px; border-radius:50%; background:#bbb; display:inline-block; }
.darkbot-active .db-status .dot{ background:#000; }

.darkbot-cards{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:8px; }
@media (min-width:480px){ .darkbot-cards{ grid-template-columns:1fr 1fr; } }
.darkbot-card{
  display:flex; gap:10px; align-items:center; background:#fff; border:1px solid #EAEAEA; border-radius:6px; padding:10px; max-width:100%; overflow:hidden;
}
.darkbot-card a{ display:flex; gap:10px; align-items:center; text-decoration:none; color:#111; width:100%; min-width:0; }
.darkbot-thumb{ width:56px; height:56px; flex:0 0 56px; border-radius:6px; background:#eee; object-fit:cover; }
.darkbot-meta{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.darkbot-title{
  font-weight:600; font-size:14px; line-height:1.2;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; text-overflow:ellipsis; word-break:break-word; max-width:100%;
}
.darkbot-price{ font-size:13px; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.darkbot-fab{
  position:fixed; right:20px; bottom:20px; z-index:10002;
  width:56px; height:56px; border-radius:50%; background:#000; color:#fff; font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; box-shadow:0 10px 22px rgba(0,0,0,.35);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.darkbot-fab:hover{ background:#111; transform:translateY(-1px); box-shadow:0 14px 28px rgba(0,0,0,.4); }
.darkbot-fab:active{ background:#000; transform:translateY(0); }
.darkbot-fab:focus{ outline:2px solid #cfe3ff; outline-offset:2px; }

@media (max-width: 600px){
  .darkbot-modal .popup-container{ width: 95vw; }
}

.darkbot-suggest{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.darkbot-suggest a{ background:#000; color:#fff; border-radius:6px; padding:8px 12px; text-decoration:none; }
.darkbot-suggest a:hover{ background:rgba(0,0,0,.79); }

.darkbot-link-wrap {
  margin-top: 8px;
}

.darkbot-link-btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
  background: #000;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  font-weight: 600;
  transition: background .2s ease, transform .1s ease;
}

.darkbot-link-btn:hover {
  background: rgba(0,0,0,.85);
  transform: translateY(-1px);
}