/* Demo Sofas chat add-on (v2): compact header, suggestion panel above the input, link to behind-the-scenes.
   Injected by nginx (sub_filter) into n8n's hosted chat page. n8n itself is unchanged. */
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: #f2f4f8; overflow: hidden; }
#n8n-chat { flex: 1 1 auto; min-height: 0; height: auto !important; }
#n8n-chat .chat-header { display: none; }
/* messages start right under the header (no empty gap) */
#n8n-chat .chat-messages-list { margin-top: 0 !important; }
#n8n-chat .chat-body { justify-content: flex-start !important; }
#n8n-chat .chat-footer { padding-bottom: env(safe-area-inset-bottom, 0px); }

#dsx-top, #dsx-sugg { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#dsx-top { flex: 0 0 auto; background: #101330; color: #fff;
  padding: calc(12px + env(safe-area-inset-top, 0px)) calc(18px + env(safe-area-inset-right, 0px)) 12px calc(18px + env(safe-area-inset-left, 0px)); }
#dsx-top .dsx-row { display: flex; gap: 14px; align-items: center; justify-content: space-between; max-width: 1100px; margin: 0 auto; }
#dsx-top .dsx-txt { min-width: 0; }
#dsx-top h1 { margin: 0 0 3px; font-size: 19px; line-height: 1.25; font-weight: 700; }
#dsx-top p { margin: 0; font-size: 13px; line-height: 1.4; color: #c9cde6; }
#dsx-top .dsx-short { display: none; }
#dsx-top .dsx-bts { flex: 0 0 auto; color: #101330; background: #ffd166; text-decoration: none; font-weight: 600;
  font-size: 13px; padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
#dsx-top .dsx-bts:hover { background: #ffe199; }

/* suggestion panel: lives inside the chat footer, right above the input */
#dsx-sugg { padding: 10px 14px 4px; border-top: 1px solid #e3e6ef; background: #fff; }
#dsx-sugg .dsx-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
#dsx-sugg .dsx-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: #6b7194; font-weight: 600; }
#dsx-sugg .dsx-link { background: none; border: 0; padding: 0; color: #3b4170; font-size: 12px; cursor: pointer; text-decoration: underline; font-family: inherit; }
#dsx-sugg .dsx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#dsx-sugg .dsx-chip { border: 1px solid #cfd4e6; background: #f6f7fb; color: #101330; border-radius: 14px; padding: 6px 11px;
  font-size: 13px; line-height: 1.3; cursor: pointer; font-family: inherit; text-align: left; }
#dsx-sugg .dsx-chip:hover { background: #20b69e; border-color: #20b69e; color: #fff; }
#dsx-sugg .dsx-chip small { display: inline; color: #20947f; font-weight: 600; margin-right: 4px; font-size: 11.5px; }
#dsx-sugg .dsx-chip:hover small { color: #fff; }
#dsx-sugg .dsx-note { display: none; margin: 8px 0 2px; font-size: 12px; color: #6b7194; background: #fff8e1; border: 1px solid #ffe7a3; border-radius: 8px; padding: 6px 9px; }
#dsx-sugg.note-open .dsx-note { display: block; }
#dsx-sugg .dsx-open { display: none; }
#dsx-sugg.collapsed { padding: 6px 14px 2px; }
#dsx-sugg.collapsed .dsx-head, #dsx-sugg.collapsed .dsx-chips, #dsx-sugg.collapsed .dsx-note { display: none; }
#dsx-sugg.collapsed .dsx-open { display: inline-block; }

@media (max-width: 640px) {
  #dsx-top { padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: 8px; padding-left: calc(12px + env(safe-area-inset-left, 0px)); padding-right: calc(12px + env(safe-area-inset-right, 0px)); }
  #dsx-top .dsx-row { gap: 8px; }
  #dsx-top .dsx-full { display: none; }
  #dsx-top .dsx-short { display: inline; }
  #dsx-top h1 { font-size: 15.5px; margin: 0 0 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #dsx-top p { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #dsx-top .dsx-bts { font-size: 11px; padding: 5px 9px; line-height: 1.25; white-space: normal; text-align: center; max-width: 118px; }
  #dsx-sugg { padding: 8px 10px 2px; }
  #dsx-sugg .dsx-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  #dsx-sugg .dsx-chip { font-size: 12px; padding: 6px 8px; border-radius: 10px; }
  #dsx-sugg .dsx-chip small { display: block; margin: 0 0 1px; font-size: 10.5px; }
  #n8n-chat .chat-message { font-size: 15px; }
}
@media (max-width: 380px) {
  #dsx-top h1 { font-size: 14px; }
  #dsx-top p { font-size: 11px; }
  #dsx-top .dsx-bts { font-size: 10.5px; padding: 4px 8px; max-width: 104px; }
  #dsx-sugg .dsx-chip { font-size: 11.5px; padding: 5px 7px; }
}