/* ============================================================
   chat.css -" Wingman conversation interface
   The space where a man talks to someone who won't bullshit him.
   ============================================================ */

/* ---- Chat shell ---- */
.chat-shell {
  display:        flex;
  flex-direction: column;
  height:         100%;
  max-width:      700px;
  margin:         0 auto;
  width:          100%;
}

/* ---- Session type tabs ---- */
.chat-tabs {
  display:      flex;
  border-bottom: 1px solid var(--border);
  flex-shrink:  0;
  padding:      0 16px;
  background:   var(--bg2);
}

.chat-tab {
  padding:        14px 16px;
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--muted);
  cursor:         pointer;
  border:         none;
  background:     none;
  border-bottom:  2px solid transparent;
  transition:     all var(--transition);
  font-family:    var(--font-body);
  white-space:    nowrap;
}

.chat-tab:hover  { color: var(--text2); }
.chat-tab.active {
  color:         var(--gold2);
  border-bottom: 2px solid var(--gold2);
}

/* ---- Message thread ---- */
.chat-thread {
  flex:       1;
  overflow-y: auto;
  padding:    24px 16px;
  display:    flex;
  flex-direction: column;
  gap:        0;
  scroll-behavior: smooth;
}

/* ---- Empty state ---- */
.chat-empty {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  flex:            1;
  gap:             16px;
  padding:         40px 20px;
  opacity:         0.9;
  animation:       fadeIn 0.4s ease;
}

.chat-empty-icon {
  font-size:   40px;
  opacity:     0.6;
}

.chat-empty-title-old {
  font-family:    var(--font-display);
  font-size:      22px;
  color:          var(--gold3);
  letter-spacing: 0.05em;
}

.chat-empty-sub {
  font-size:   16px;
  color:       var(--muted);
  max-width:   300px;
  line-height: 1.7;
}

.chat-starter {
  display:       flex;
  flex-direction:column;
  gap:           8px;
  width:         100%;
  max-width:     320px;
  margin-top:    8px;
}

.starter-btn {
  background:    var(--panel);
  border:        1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding:       12px 16px;
  text-align:    left;
  font-size:     13px;
  color:         var(--text2);
  cursor:        pointer;
  transition:    all var(--transition);
  font-family:   var(--font-body);
  line-height:   1.5;
}

.starter-btn:hover { border-color: var(--gold); color: var(--gold2); }

/* ---- Message wrapper ---- */
.msg-wrap {
  margin-bottom:  28px;
  animation:      msgIn 0.3s ease;
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- User message ---- */
.msg-user {
  display:       flex;
  justify-content: flex-end;
}

.msg-user-bubble {
  background:    var(--panel2);
  border:        1px solid var(--border2);
  border-radius: 16px 16px 4px 16px;
  padding:       12px 16px;
  max-width:     80%;
  font-size:     15px;
  color:         var(--text);
  line-height:   1.65;
  white-space:   pre-wrap;
  word-break:    break-word;
}

/* ---- Wingman message ---- */
.msg-wingman { display: flex; flex-direction: column; gap: 0; }

.msg-wingman-header {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-bottom: 10px;
}

.wingman-avatar {
  width:           32px;
  height:          32px;
  border-radius:   50%;
  background:      var(--gold-dim);
  border:          1px solid var(--gold);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-display);
  font-size:       13px;
  color:           var(--gold2);
  flex-shrink:     0;
}

.wingman-label {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--muted);
}

/* ---- Strike message (short, default) ---- */
.msg-strike {
  font-size:   16px;
  color:       var(--text);
  line-height: 1.75;
  white-space: pre-wrap;
  word-break:  break-word;
  font-family: var(--font-body);
}

/* Closing code line -" last line of strike, styled differently */
.msg-strike-code {
  display:        block;
  margin-top:     14px;
  font-family:    var(--font-display);
  font-size:      13px;
  letter-spacing: 0.07em;
  color:          var(--gold);
  font-weight:    600;
}

/* ---- Go Deeper button ---- */
.go-deeper-wrap {
  margin-top: 14px;
  display:    flex;
  align-items:center;
  gap:        12px;
}

.btn-go-deeper {
  background:     transparent;
  border:         1px solid var(--gold);
  border-radius:  var(--radius-sm);
  padding:        8px 16px;
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--gold2);
  cursor:         pointer;
  transition:     all var(--transition);
  font-family:    var(--font-body);
  display:        flex;
  align-items:    center;
  gap:            6px;
}

.btn-go-deeper:hover {
  background:  var(--gold-dim);
  box-shadow:  0 0 14px var(--gold-glow);
}

.btn-go-deeper.loading { opacity: 0.6; cursor: wait; }
.btn-go-deeper.done    { display: none; }

/* ---- Deep expansion ---- */
.msg-deep {
  margin-top:  18px;
  padding-top: 18px;
  border-top:  1px solid var(--border);
  font-size:   15px;
  color:       var(--text2);
  line-height: 1.8;
  white-space: pre-wrap;
  word-break:  break-word;
  font-family: var(--font-body);
  animation:   deepIn 0.4s ease;
}

@keyframes deepIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.msg-deep-close {
  font-size:      11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-top:     12px;
  font-weight:    700;
  font-family:    var(--font-body);
  border-top:     1px solid var(--border);
  padding-top:    12px;
}

/* ---- Typing indicator ---- */
.typing-indicator {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     4px 0 16px;
  animation:   msgIn 0.2s ease;
}

.typing-dots { display: flex; gap: 5px; }
.typing-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--gold);
  opacity:       0.3;
  animation:     dotPulse 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotPulse { 0%,80%,100% { opacity:0.3; transform:scale(1); } 40% { opacity:1; transform:scale(1.3); } }

/* ---- Input area ---- */
.chat-input-wrap {
  border-top:    1px solid var(--border);
  padding:       12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background:    var(--bg2);
  flex-shrink:   0;
}

.chat-input-row {
  display:     flex;
  align-items: flex-end;
  gap:         10px;
  max-width:   700px;
  margin:      0 auto;
}

#chatInput {
  flex:          1;
  background:    var(--panel);
  color:         var(--text);
  border:        1px solid var(--border2);
  border-radius: var(--radius);
  padding:       11px 15px;
  font-family:   var(--font-body);
  font-size:     15px;
  resize:        none;
  outline:       none;
  line-height:   1.55;
  max-height:    140px;
  min-height:    46px;
  overflow-y:    auto;
  transition:    border-color var(--transition);
}

#chatInput:focus  { border-color: var(--gold); }
#chatInput::placeholder { color: var(--muted); font-style: italic; }

#chatSend {
  width:         44px;
  height:        44px;
  border-radius: 50%;
  background:    linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%);
  border:        none;
  color:         #0c0c0c;
  font-size:     18px;
  cursor:        pointer;
  flex-shrink:   0;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    all var(--transition);
}

#chatSend:hover:not(:disabled) {
  box-shadow: 0 4px 16px var(--gold-glow);
  transform:  scale(1.06);
}

#chatSend:disabled { opacity: 0.35; cursor: default; transform: none; }

/* ---- Onboarding shell ---- */
.onboarding-shell {
  position:       fixed;
  inset:          0;
  background:     var(--bg);
  z-index:        800;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
}

.ob-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 20px;
  border-bottom:   1px solid var(--border);
  flex-shrink:     0;
}

.ob-logo { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.14em; color: var(--gold); }
.ob-skip { background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 6px 10px; border-radius: var(--radius-sm); transition: color var(--transition); font-family: var(--font-body); }
.ob-skip:hover { color: var(--text2); }

.ob-progress-wrap { padding: 10px 20px; flex-shrink: 0; }
.ob-progress-track { height: 2px; background: var(--panel3); border-radius: 2px; overflow: hidden; }
.ob-progress-fill { height: 100%; background: linear-gradient(to right, var(--gold), var(--gold2)); border-radius: 2px; transition: width 0.5s cubic-bezier(0.4,0,0.2,1); }
.ob-step-label { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }

.ob-content {
  flex:       1;
  overflow-y: auto;
  padding:    32px 20px 20px;
}

@media (min-width: 600px) {
  .ob-content { max-width: 600px; margin: 0 auto; width: 100%; padding: 40px 0 20px; }
}

.ob-step { animation: obIn 0.3s ease; display: flex; flex-direction: column; gap: 24px; }
@keyframes obIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.ob-step-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.ob-step-title { font-family: var(--font-display); font-size: clamp(20px, 5vw, 28px); color: var(--text); line-height: 1.2; }
.ob-step-why { font-size: 14px; color: var(--muted); line-height: 1.7; border-left: 2px solid var(--gold); padding-left: 14px; font-style: italic; }

/* Mode cards */
.ob-mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ob-mode-card {
  background:    var(--panel);
  border:        2px solid var(--border);
  border-radius: var(--radius);
  padding:       22px 16px;
  cursor:        pointer;
  text-align:    center;
  transition:    all var(--transition);
}
.ob-mode-card:hover  { border-color: var(--gold); }
.ob-mode-card.active { border-color: var(--gold2); box-shadow: 0 0 20px var(--gold-glow); background: var(--gold-dim); }
.ob-mode-icon { font-size: 28px; margin-bottom: 10px; }
.ob-mode-name { font-family: var(--font-display); font-size: 14px; color: var(--gold2); margin-bottom: 4px; letter-spacing: 0.04em; }
.ob-mode-time { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.ob-mode-desc { font-size: 13px; color: var(--text2); line-height: 1.55; }

/* Age grid */
.ob-age-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ob-age-btn { background: var(--panel); border: 1px solid var(--border2); border-radius: var(--radius-sm); padding: 11px 6px; text-align: center; font-size: 14px; font-weight: 600; color: var(--text2); cursor: pointer; transition: all var(--transition); font-family: var(--font-body); }
.ob-age-btn:hover  { border-color: var(--gold); color: var(--gold2); }
.ob-age-btn.active { background: var(--gold-dim); border-color: var(--gold2); color: var(--gold2); }

/* Entry rows for goals/battles */
.ob-entry-group { display: flex; flex-direction: column; gap: 10px; }
.ob-entry-row { display: flex; align-items: center; gap: 10px; }
.ob-entry-num { font-family: var(--font-display); font-size: 16px; color: var(--gold); min-width: 20px; text-align: center; flex-shrink: 0; }
.ob-entry-row input { flex: 1; background: var(--panel); color: var(--text); border: 1px solid var(--border2); border-radius: var(--radius-sm); padding: 11px 14px; font-family: var(--font-body); font-size: 15px; outline: none; transition: border-color var(--transition); }
.ob-entry-row input:focus { border-color: var(--gold); }
.ob-entry-row input::placeholder { color: var(--muted); font-style: italic; }

.ob-chips-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* Tone cards */
.ob-tone-cards { display: flex; flex-direction: column; gap: 10px; }
.ob-tone-card { background: var(--panel); border: 1px solid var(--border2); border-radius: var(--radius); padding: 15px 16px; cursor: pointer; display: flex; align-items: flex-start; gap: 14px; transition: all var(--transition); }
.ob-tone-card:hover  { border-color: var(--gold); }
.ob-tone-card.active { border-color: var(--gold2); background: var(--gold-dim); }
.ob-tone-icon  { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.ob-tone-name  { font-weight: 700; font-size: 14px; color: var(--text); }
.ob-tone-desc  { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.ob-tone-sample { font-size: 12px; color: var(--gold); margin-top: 6px; font-style: italic; line-height: 1.5; }

/* Done screen */
.ob-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 20px 0 40px; animation: obIn 0.4s ease; }
.ob-seal { width: 72px; height: 72px; border: 2px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; background: var(--gold-dim); box-shadow: 0 0 30px var(--gold-glow); animation: sealPulse 2.5s ease infinite; }
@keyframes sealPulse { 0%,100% { box-shadow: 0 0 20px var(--gold-glow); } 50% { box-shadow: 0 0 50px var(--gold-glow); } }
.ob-done-title { font-family: var(--font-display); font-size: 24px; color: var(--gold2); }
.ob-done-sub { font-size: 14px; color: var(--text2); max-width: 320px; line-height: 1.7; }

/* Footer nav */
.ob-footer { padding: 14px 20px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); display: flex; gap: 12px; flex-shrink: 0; background: var(--bg2); }
@media (min-width: 600px) { .ob-footer { max-width: 640px; margin: 0 auto; width: 100%; border-top: none; } }
.ob-btn-back { background: transparent; border: 1px solid var(--border2); color: var(--text2); padding: 12px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; transition: all var(--transition); font-family: var(--font-body); }
.ob-btn-back:hover:not(:disabled)  { border-color: var(--gold); color: var(--gold2); }
.ob-btn-back:disabled { opacity: 0.3; cursor: default; }
.ob-btn-next { flex: 1; background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%); color: #0c0c0c; border: none; padding: 13px 24px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 700; cursor: pointer; transition: all var(--transition); font-family: var(--font-body); }
.ob-btn-next:hover:not(:disabled) { background: linear-gradient(135deg, var(--gold2) 0%, var(--gold3) 100%); box-shadow: 0 4px 18px var(--gold-glow); }
.ob-btn-next:disabled { opacity: 0.4; cursor: default; }

/* -"-"- Locked tab (Command-only) -"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"- */
.chat-tab.locked-tab          { opacity: 0.55; }
.chat-tab.locked-tab:hover    { opacity: 0.80; color: var(--gold2); }
.chat-tab.locked-tab.active   { opacity: 1; color: var(--gold2); border-bottom: 2px solid var(--gold2); }
.tab-lock                     { font-size: 9px; vertical-align: middle; margin-left: 3px; opacity: 0.7; }

/* -"-"- Go Deeper -" locked state (Foundations) -"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"- */
.btn-go-deeper.locked {
  border-color: var(--border2);
  color:        var(--muted);
  cursor:       pointer;
}
.btn-go-deeper.locked:hover {
  border-color: var(--gold);
  color:        var(--gold2);
  box-shadow:   none;
}