/* On-site support chat widget. Typography and surfaces follow AGENTS.md (min 15px, 8px radius, neutral panels). */
.support-launcher{position:fixed;right:24px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:90;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(20,23,28,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#f4f4f6;font:600 15px/1.2 var(--font);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s,background .18s,border-color .18s}
.support-launcher:hover{transform:translateY(-1px);background:rgba(30,34,42,.98);border-color:rgba(255,255,255,.28);color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.55)}
.support-launcher:focus-visible{outline:2px solid #fff;outline-offset:3px}
.support-launcher .icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.support-badge{min-width:22px;height:22px;padding:0 6px;border-radius:8px;background:rgba(255,255,255,.15);color:#fff;font:700 13px/22px var(--font);text-align:center}
.support-badge[hidden]{display:none}
body[data-page="admin"] .support-launcher,body.support-open .support-launcher{display:none}

.support-backdrop{position:fixed;inset:0;z-index:1999;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:none;padding:0;margin:0;cursor:pointer}
.support-backdrop[hidden]{display:none!important}

.support-panel{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:2000 !important;display:flex;flex-direction:column;width:390px;max-width:calc(100vw - 32px);height:min(620px,calc(var(--visual-height,100vh) - 40px));background:#0f0f10;border:1px solid var(--line);border-radius:8px;box-shadow:0 24px 60px rgba(0,0,0,.6);overflow:hidden}
.support-panel[hidden]{display:none}
.support-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 14px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.025)}
.support-head strong{display:block;color:#f4f4f6;font-size:17px;font-weight:700}
.support-head small{display:block;margin-top:2px;color:#9da0b3;font-size:15px}
.support-head .icon-btn{width:44px;height:44px;flex:none}

.support-messages{flex:1;overflow-y:auto;scrollbar-width:thin;padding:16px;display:flex;flex-direction:column;gap:10px}
.support-message{max-width:85%;padding:10px 14px;border:1px solid var(--line);border-radius:8px}
.support-message p{margin:0;color:#eaeaec;font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.support-message small{display:block;margin-top:4px;color:#9da0b3;font-size:15px}
.support-message.from-user{align-self:flex-end;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.support-message.from-admin{align-self:flex-start;background:rgba(255,255,255,.04)}
.support-message.from-admin small{color:#9aefd2}
.support-empty{margin:auto 0;text-align:center;padding:24px 12px;color:#9da0b3;font-size:15px;line-height:1.5}
.support-empty .icon{width:32px;height:32px;fill:none;stroke:#9aefd2;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.support-empty strong{display:block;margin:10px 0 6px;color:#e2e2ea;font-size:17px}
.support-empty p{margin:0}
.support-note{align-self:center;margin:4px 0 0;color:#9da0b3;font-size:15px;text-align:center}

.support-form{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;border-top:1px solid var(--line);background:rgba(255,255,255,.025)}
.support-contact{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.support-contact[hidden]{display:none}
.support-contact .field{display:flex;flex-direction:column;gap:6px;margin:0}
.support-contact label{color:#c4c4d4;font-size:15px;font-weight:600}
.support-form input,.support-form textarea{width:100%;min-height:44px;padding:10px 12px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;color:#f4f4f6;font:15px/1.5 var(--font)}
.support-form textarea{min-height:68px;max-height:180px;resize:vertical}
.support-form input:focus,.support-form textarea:focus{outline:none;border-color:rgba(255,255,255,.4)}
.support-form .form-error{margin:0;font-size:15px}
.support-form .btn{min-height:44px;font-size:15px;font-weight:600}

/* Admin panel: support conversations */
.admin-support{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:16px;align-items:start;margin-top:16px}
.admin-support-list #admin-support-items{display:flex;flex-direction:column;gap:8px;max-height:640px;overflow-y:auto;scrollbar-width:thin}
.admin-support-item{display:flex;flex-direction:column;gap:6px;width:100%;padding:12px 14px;text-align:left;background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:8px;color:#eaeaec;font:15px/1.45 var(--font);cursor:pointer;transition:background .15s,border-color .15s}
.admin-support-item:hover{background:rgba(255,255,255,.07)}
.admin-support-item.active{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
.admin-support-item-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.admin-support-item-top strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f4f4f6;font-size:15px}
.admin-support-item-top time{flex:none;color:#9da0b3;font-size:15px}
.admin-support-item.unread .admin-support-item-top strong{font-weight:800}
.admin-support-preview{color:#c4c4d6;font-size:15px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.admin-support-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.admin-support-guest,.admin-support-count{padding:2px 10px;border-radius:8px;font-size:15px;font-weight:600;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#c4c4d6}
.admin-support-count{color:#9aefd2;border-color:rgba(154,239,210,.35)}
.admin-support-thread{display:flex;flex-direction:column;gap:14px;min-height:520px}
#admin-support-view{display:flex;flex-direction:column;gap:14px;min-height:0;flex:1}
.admin-support-view-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}
.admin-support-view-head h2{margin:0;font-size:18px;font-weight:700;color:#f4f4f6;overflow-wrap:anywhere}
.admin-support-view-head p{margin:4px 0 0;color:#9da0b3;font-size:15px}
.admin-support-view-actions{display:flex;gap:8px;flex-wrap:wrap}
.admin-support-view-actions .btn,.admin-support-back{min-height:38px;font-size:15px}
.admin-support-back{display:none}
.admin-support-messages{display:flex;flex-direction:column;gap:10px;max-height:min(520px,calc(100vh - 380px));min-height:220px;overflow-y:auto;scrollbar-width:thin;padding:4px 2px}
.admin-support-message{max-width:80%;padding:10px 14px;border:1px solid var(--line);border-radius:8px}
.admin-support-message p{margin:0;color:#eaeaec;font-size:15px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.admin-support-message small{display:block;margin-top:4px;color:#9da0b3;font-size:15px}
.admin-support-message.from-user{align-self:flex-start;background:rgba(255,255,255,.04)}
.admin-support-message.from-admin{align-self:flex-end;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.admin-support-message.from-admin small{color:#9aefd2}
.admin-support-reply{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.admin-support-reply .field{display:flex;flex-direction:column;gap:6px;margin:0}
.admin-support-reply textarea{min-height:68px;font-size:15px;resize:vertical}
.admin-support-reply .form-error{margin:0;font-size:15px}
.admin-support-reply-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.admin-support-reply-actions span{color:#9da0b3;font-size:15px}
.admin-support-reply-actions .btn{min-height:44px;font-size:15px}
.admin-support-placeholder{margin:auto;text-align:center;max-width:360px;padding:40px 16px;color:#9da0b3;font-size:15px;line-height:1.5}
.admin-support-placeholder .icon{width:34px;height:34px;fill:none;stroke:#9aefd2;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.admin-support-placeholder strong{display:block;margin:10px 0 6px;color:#e2e2ea;font-size:18px}
.admin-support-placeholder p{margin:0}

html.theme-light .admin-support-item{background:#fff;border-color:#dce1e8;color:#11141a}
html.theme-light .admin-support-item:hover{background:#f8f9fa}
html.theme-light .admin-support-item.active{background:#f0f2f5;border-color:#11141a}
html.theme-light .admin-support-item-top strong,html.theme-light .admin-support-view-head h2,html.theme-light .admin-support-placeholder strong{color:#11141a}
html.theme-light .admin-support-item-top time,html.theme-light .admin-support-view-head p,html.theme-light .admin-support-message small,html.theme-light .admin-support-reply-actions span,html.theme-light .admin-support-placeholder{color:#5e6573}
html.theme-light .admin-support-preview{color:#333742}
html.theme-light .admin-support-guest,html.theme-light .admin-support-count{background:#f0f2f5;border-color:#d5d9e0;color:#333742}
html.theme-light .admin-support-count{color:#11141a;font-weight:700}
html.theme-light .admin-support-view-head,html.theme-light .admin-support-reply{border-color:#dce1e8}
html.theme-light .admin-support-message{border-color:#dce1e8}
html.theme-light .admin-support-message p{color:#11141a}
html.theme-light .admin-support-message.from-user{background:#fff}
html.theme-light .admin-support-message.from-admin{background:#f0f2f5;border-color:#d5d9e0}
html.theme-light .admin-support-message.from-admin small{color:#333742;font-weight:600}
html.theme-light .admin-support-placeholder .icon{stroke:#00875a}

@media (max-width:900px){
  .admin-support{grid-template-columns:1fr}
  .admin-support.has-thread .admin-support-list,.admin-support:not(.has-thread) .admin-support-thread{display:none}
  .admin-support-back{display:inline-flex}
  .admin-support-thread{min-height:0}
  .admin-support-messages{max-height:none;min-height:260px}
  .admin-support-message{max-width:92%}
}

/* Help page entry point */
.help-contact .support-help-btn{margin-top:10px;width:100%;font-size:15px}

/* Light theme */
html.theme-light .support-launcher{background:#ffffff !important;border-color:#d5d9e0 !important;color:#11141a !important;box-shadow:0 8px 24px rgba(0,0,0,.1) !important}
html.theme-light .support-launcher:hover{background:#f4f5f8 !important;border-color:#b8bec9 !important;color:#11141a !important}
html.theme-light .support-launcher:focus-visible{outline-color:#11141a}
html.theme-light .support-badge{background:#11141a;color:#fff}
html.theme-light .support-panel{background:#fff;border-color:#dce1e8;box-shadow:0 24px 60px rgba(0,0,0,.16)}
html.theme-light .support-head,html.theme-light .support-form{background:#f8f9fa;border-color:#dce1e8}
html.theme-light .support-head strong,html.theme-light .support-empty strong{color:#11141a}
html.theme-light .support-head small,html.theme-light .support-message small,html.theme-light .support-empty,html.theme-light .support-note{color:#5e6573}
html.theme-light .support-message{border-color:#dce1e8}
html.theme-light .support-message p{color:#11141a}
html.theme-light .support-message.from-user{background:#f0f2f5;border-color:#d5d9e0}
html.theme-light .support-message.from-admin{background:#fff}
html.theme-light .support-message.from-admin small{color:#333742;font-weight:600}
html.theme-light .support-empty .icon{stroke:#11141a}
html.theme-light .support-contact label{color:#11141a}
html.theme-light .support-form input,html.theme-light .support-form textarea{background:#fff;border-color:#d5d9e0;color:#11141a}
html.theme-light .support-form input:focus,html.theme-light .support-form textarea:focus{border-color:#11141a}
html.theme-light .support-panel .support-form .btn.primary,html.theme-light .admin-support-reply .btn.primary{background:#11141a !important;border-color:#11141a !important;color:#fff !important}

@media (max-width:640px){
  .support-launcher{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:44px;min-height:44px;padding:0;justify-content:center}
  .support-launcher-label{display:none}
  .support-badge{position:absolute;top:-6px;right:-6px}
  .support-panel{
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    z-index: 2000 !important;
  }
  .support-head{
    padding-top: max(14px, calc(env(safe-area-inset-top) + 8px)) !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
  .support-head .icon-btn{
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #fff !important;
  }
  .support-form{
    padding-bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px)) !important;
  }
  .support-contact{grid-template-columns:1fr}
  .support-message{max-width:92%}
}

@media (max-width: 900px) {
  body[data-page="playground"] .support-launcher,
  body[data-page="images"] .support-launcher,
  body[data-page="videos"] .support-launcher,
  .app-shell[data-page="playground"] ~ .support-launcher,
  .app-shell[data-page="images"] ~ .support-launcher,
  .app-shell[data-page="videos"] ~ .support-launcher,
  body:has([data-page="playground"]) .support-launcher,
  body:has([data-page="images"]) .support-launcher,
  body:has([data-page="videos"]) .support-launcher {
    display: none !important;
  }
}