/*
 * Hello AI Try-On — tryon.css
 *
 * Palette (6 values only):
 *   --hait-ink:     #111  — text, borders, buttons
 *   --hait-mid:     #888  — secondary text, counters
 *   --hait-muted:   #bbb  — hints, disabled, log lines
 *   --hait-rule:    #ddd  — dividers, input borders
 *   --hait-surface: #f5f5f5 — backgrounds, tabs
 *   --hait-white:   #fff  — modal bg, upload zone
 *
 * Type scale (3 sizes):
 *   --hait-xs:   11px — meta, hints, badges
 *   --hait-sm:   13px — body, logs, info text
 *   --hait-base: 14px — buttons, commands
 */

:root {
    --hait-ink:     #111;
    --hait-mid:     #888;
    --hait-muted:   #bbb;
    --hait-rule:    #ddd;
    --hait-surface: #f5f5f5;
    --hait-white:   #fff;
    --hait-error:   #c00;
    --hait-ok:      #2a7e2e;

    --hait-xs:   11px;
    --hait-sm:   13px;
    --hait-base: 14px;
    --hait-mono: 'Courier New', Courier, monospace;
}

/* ── Main button ────────────────────────────────────────────────── */
#hait-open-btn.hait-btn {
    display:        block;
    width:          100%;
    margin-top:     10px;
    padding:        12px 20px;
    background:     var(--hait-white);
    color:          var(--hait-ink);
    border:         1px solid var(--hait-ink);
    border-radius:  0;
    font-family:    inherit;
    font-size:      inherit;
    font-weight:    inherit;
    letter-spacing: inherit;
    text-transform: uppercase;
    cursor:         pointer;
    text-align:     center;
    box-sizing:     border-box;
    transition:     background .15s, color .15s;
}
#hait-open-btn.hait-btn:hover {
    background: var(--hait-ink);
    color:      var(--hait-white);
}

/* ── Overlay ────────────────────────────────────────────────────── */
.hait-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.65);
    z-index:         99999;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         12px;
}
.hait-overlay[hidden] { display: none !important; }

/* ── Modal ──────────────────────────────────────────────────────── */
.hait-modal {
    position:    relative;
    width:       100%;
    max-width:   500px;
    max-height:  94vh;
    overflow-y:  auto;
    background:  var(--hait-white);
    border:      1px solid var(--hait-rule);
    box-sizing:  border-box;
    font-family: var(--hait-mono);
    font-size:   var(--hait-sm);
    color:       var(--hait-ink);
}

/* ── Top bar ────────────────────────────────────────────────────── */
.hait-topbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background:      var(--hait-ink);
    color:           var(--hait-mid);
    padding:         7px 14px;
    font-size:       var(--hait-xs);
    letter-spacing:  .04em;
    font-family:     var(--hait-mono);
}

.hait-close {
    background:  none;
    border:      none;
    color:       var(--hait-mid);
    font-family: var(--hait-mono);
    font-size:   var(--hait-xs);
    cursor:      pointer;
    padding:     0;
}
.hait-close:hover { color: var(--hait-white); }

/* ── Tabs ───────────────────────────────────────────────────────── */
.hait-tabs {
    display:       flex;
    border-bottom: 1px solid var(--hait-rule);
    background:    var(--hait-surface);
}
.hait-tab {
    padding:        8px 16px;
    font-family:    var(--hait-mono);
    font-size:      var(--hait-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    background:     none;
    border:         none;
    border-right:   1px solid var(--hait-rule);
    color:          var(--hait-muted);
    cursor:         pointer;
    transition:     color .15s, background .15s;
}
.hait-tab:hover  { color: var(--hait-ink); }
.hait-tab-active { background: var(--hait-white); color: var(--hait-ink); border-bottom: 2px solid var(--hait-ink); margin-bottom: -1px; }

/* ── Tab panels ─────────────────────────────────────────────────── */
.hait-tab-panel         { padding: 18px 20px 20px; }
.hait-tab-panel[hidden] { display: none; }

/* ── Terminal command line ──────────────────────────────────────── */
.hait-term-line {
    font-size:   var(--hait-xs);
    color:       var(--hait-muted);
    margin:      0 0 10px;
    line-height: 1.4;
}
.hait-term-dollar { color: var(--hait-rule); }
.hait-term-cmd    { color: var(--hait-mid); }
.hait-ok          { color: var(--hait-ok); }

/* ── Upload zone ────────────────────────────────────────────────── */
.hait-upload-zone {
    border:        1px dashed var(--hait-rule);
    padding:       18px 14px;
    text-align:    center;
    cursor:        pointer;
    background:    var(--hait-white);
    transition:    border-color .15s, background .15s;
    margin-bottom: 12px;
    box-sizing:    border-box;
}
.hait-upload-zone:hover,
.hait-upload-zone.hait-drag-over {
    border-color: var(--hait-ink);
    background:   var(--hait-surface);
}

.hait-upload-label { font-size: var(--hait-sm); color: var(--hait-mid); margin: 0 0 4px; }
.hait-link         { text-decoration: underline; color: var(--hait-ink); cursor: pointer; }
.hait-upload-hint  { font-size: var(--hait-xs); color: var(--hait-muted); margin: 0; }

/* ── Preview ────────────────────────────────────────────────────── */
#hait-preview-wrap         { text-align: center; }
#hait-preview-wrap[hidden],
#hait-upload-inner[hidden],
.hait-spinner[hidden],
#hait-result[hidden],
.hait-error[hidden],
#hait-loading-block[hidden] { display: none; }

.hait-preview-img {
    width:      84px;
    height:     84px;
    object-fit: cover;
    border:     1px solid var(--hait-rule);
    display:    block;
    margin:     0 auto 8px;
}
.hait-change-btn {
    background:      none;
    border:          none;
    color:           var(--hait-muted);
    font-family:     var(--hait-mono);
    font-size:       var(--hait-xs);
    cursor:          pointer;
    text-decoration: underline;
    padding:         0;
}
.hait-change-btn:hover { color: var(--hait-ink); }

/* ── Error ──────────────────────────────────────────────────────── */
.hait-error {
    font-size:   var(--hait-sm);
    color:       var(--hait-error);
    border-left: 2px solid var(--hait-error);
    padding:     6px 10px;
    margin:      0 0 10px;
    background:  #fff8f8;
}

/* ── Submit button ──────────────────────────────────────────────── */
.hait-try-btn {
    display:        block;
    width:          100%;
    padding:        10px 14px;
    background:     var(--hait-ink);
    color:          var(--hait-white);
    border:         1px solid var(--hait-ink);
    border-radius:  0;
    font-family:    var(--hait-mono);
    font-size:      var(--hait-base);
    letter-spacing: .04em;
    cursor:         pointer;
    text-align:     left;
    transition:     opacity .15s;
    margin-bottom:  14px;
    box-sizing:     border-box;
}
.hait-try-btn:disabled             { opacity: .3; cursor: not-allowed; }
.hait-try-btn:not(:disabled):hover { opacity: .75; }
.hait-try-btn .hait-term-dollar    { color: var(--hait-mid); }
.hait-spinner { display: none !important; }

/* ── Loading log ────────────────────────────────────────────────── */
#hait-loading-block {
    border-left:   2px solid var(--hait-rule);
    padding-left:  10px;
    margin-bottom: 14px;
}
.hait-log-line {
    font-size:   var(--hait-sm);
    line-height: 1.9;
    color:       var(--hait-muted);
    transition:  color .3s;
}
.hait-log-prefix            { margin-right: 4px; }
.hait-log-line.hait-active  { color: var(--hait-ink); }
.hait-log-line.hait-done    { color: var(--hait-muted); }

.hait-counter-row {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-top:  8px;
}
.hait-counter-label { font-size: var(--hait-xs); color: var(--hait-muted); white-space: nowrap; }
.hait-counter-val   { font-size: var(--hait-xs); color: var(--hait-mid);   min-width: 28px; }
.hait-progress-bar  {
    flex:             1;
    height:           10px;
    background-image: radial-gradient(circle, var(--hait-rule) 1px, transparent 1px);
    background-size:  5px 5px;
    position:         relative;
    overflow:         hidden;
}
.hait-progress-fill {
    position:   absolute;
    top: 0; left: 0;
    height:     100%;
    background: var(--hait-ink);
    width:      0%;
    transition: width .8s linear;
}
.hait-progress-pct { font-size: var(--hait-xs); color: var(--hait-mid); min-width: 36px; text-align: right; }

/* ── Result ─────────────────────────────────────────────────────── */
.hait-result-img {
    width:       100%;
    display:     block;
    margin:      8px 0 10px;
    border:      1px solid var(--hait-rule);
}

.hait-result-actions {
    display:   flex;
    gap:       8px;
    margin:    0 0 4px;
    flex-wrap: wrap;
}
.hait-result-actions .hait-download-btn { flex: 1; text-align: center; }

.hait-download-btn {
    display:         inline-block;
    padding:         7px 14px;
    border:          1px solid var(--hait-ink);
    color:           var(--hait-ink);
    background:      transparent;
    font-family:     var(--hait-mono);
    font-size:       var(--hait-sm);
    letter-spacing:  .04em;
    text-decoration: none;
    transition:      background .15s, color .15s;
}
.hait-download-btn:hover { background: var(--hait-ink); color: var(--hait-white); }

.hait-share-btn {
    flex:            1;
    padding:         7px 14px;
    border:          1px solid var(--hait-rule);
    color:           var(--hait-mid);
    background:      transparent;
    font-family:     var(--hait-mono);
    font-size:       var(--hait-sm);
    letter-spacing:  .04em;
    cursor:          pointer;
    text-align:      center;
    transition:      border-color .15s, color .15s;
}
.hait-share-btn:hover:not(:disabled) { border-color: var(--hait-ink); color: var(--hait-ink); }
.hait-share-btn:disabled             { opacity: .5; cursor: default; }

/* ── Privacy ────────────────────────────────────────────────────── */
.hait-privacy {
    font-size:   var(--hait-xs);
    color:       var(--hait-muted);
    margin:      14px 0 0;
    line-height: 1.5;
}

/* ── Info tab ───────────────────────────────────────────────────── */
.hait-info             { display: flex; flex-direction: column; }
.hait-info-block       { padding: 12px 0; border-bottom: 1px solid var(--hait-rule); }
.hait-info-block:last-child { border-bottom: none; }

.hait-info-label {
    font-size:      var(--hait-xs);
    color:          var(--hait-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin:         0 0 6px;
}
.hait-info-text {
    font-size:   var(--hait-sm);
    color:       var(--hait-mid);
    line-height: 1.6;
    margin:      0 0 4px;
}
.hait-info-text:last-child { margin-bottom: 0; }
.hait-info-text strong     { color: var(--hait-ink); }
.hait-info-link            { color: var(--hait-ink); text-decoration: underline; }

@media (max-width: 480px) {
    .hait-tab-panel { padding: 14px 14px 16px; }
}