/* apps/api/static/style.css
   Updated UI: send button always blue, create button high contrast,
   prevent horizontal scrolling, message alignment changed, mobile fixes.
*/

:root{
  --bg: #071127;
  --page-bg: linear-gradient(180deg,#071127 0%, #081428 100%);
  --card-bg: #ffffff;
  --muted: #6b7280;
  --accent-blue: #0b5cff;
  --accent-blue-2: #0a54ff;
  --accent-red: #ff3b30;
  --accent-red-2: #e13b31;
  --accent-yellow: #facc15;
  --glass: rgba(255,255,255,0.04);
  --shadow-lg: 0 12px 30px rgba(2,6,23,0.12);
  --shadow-sm: 0 6px 18px rgba(2,6,23,0.06);
  --r-lg: 14px;
  --r-sm: 8px;

  --max-width: 1100px;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --ui-transition: 180ms cubic-bezier(.2,.9,.3,1);
}

/* prevent horizontal scroll root-level */
html, body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* base */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html,body { height:100%; margin:0; font-family: var(--font-sans); background: var(--page-bg); color:#0b1220; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a { color:inherit; text-decoration:none; }

/* page container */
.page { max-width: var(--max-width); margin: 92px auto 60px auto; padding: 0 18px; }

/* header */
.site-header{
  position: fixed; top:0; left:0; right:0; height:72px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; background: rgba(8,12,22,0.30);
  backdrop-filter: blur(6px); border-bottom: 1px solid rgba(255,255,255,0.02); z-index:60;
}
.header-left { display:flex; align-items:center; gap:18px; }
.brand { display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; font-size:18px; }
.nav { display:flex; gap:12px; align-items:center; }
.nav-link { color: rgba(255,255,255,0.9); padding:6px 8px; border-radius:8px; font-size:14px; opacity:0.95; transition: background var(--ui-transition); }
.nav-link:hover { background: rgba(255,255,255,0.03); }

/* header right */
.header-right { display:flex; align-items:center; gap:12px; }
.icon-btn { background:transparent; border:0; color:#fff; font-size:18px; padding:8px; border-radius:10px; cursor:pointer; transition: transform var(--ui-transition); }
.icon-btn:hover { transform: translateY(-2px); }
.profile-btn { width:40px; height:40px; border-radius:999px; background:linear-gradient(180deg,#fff,#f8f8f8); border:0; display:flex; align-items:center; justify-content:center; font-weight:700; color:#0b1220; cursor:pointer; }

/* debate card */
.debate-wrap { display:flex; flex-direction:column; gap:18px; }
.debate-card { background:var(--card-bg); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:18px; overflow:visible; }
.debate-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.title-row { display:flex; flex-direction:column; gap:4px; }
.debate-title { margin:0; font-size:20px; color:#0b1220; }
.small-meta { color:var(--muted); font-size:13px; }
.sub-controls { display:flex; gap:10px; align-items:center; }

/* buttons */
.btn { border:1px solid rgba(11,17,36,0.06); background:#fff; padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:700; transition: transform var(--ui-transition), box-shadow var(--ui-transition), opacity var(--ui-transition); }
.btn.small { padding:6px 10px; font-size:13px; }
.btn.primary { color:#fff; border:0; box-shadow: var(--shadow-sm); }
.btn.primary.blue { background: linear-gradient(180deg,var(--accent-blue),var(--accent-blue-2)); box-shadow: 0 8px 26px rgba(11,92,255,0.16); }
.btn.primary.red { background: linear-gradient(180deg,var(--accent-red),var(--accent-red-2)); box-shadow: 0 8px 26px rgba(255,59,48,0.14); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity:0.55; cursor:not-allowed; transform:none; pointer-events:none; }

/* MAKE CREATE BUTTON VERY CONTRASTING AND VISIBLE */
.btn.create {
  background: linear-gradient(90deg,#ff9a00 0%, #ff416c 100%);
  color: #071127;
  font-weight:900;
  border: none;
  padding:10px 16px;
  font-size:15px;
  box-shadow: 0 24px 60px rgba(255,65,108,0.18), 0 6px 18px rgba(0,0,0,0.08);
  border-radius:12px;
}

/* messages area */
.messages { min-height:320px; max-height:60vh; overflow:auto; padding:16px; background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%); border-radius:12px; border:1px solid rgba(11,17,36,0.03); }

/* wrapper positions and fixed widths (prevents wall-of-text) */
.msg-wrapper { display:flex; align-items:flex-start; margin-bottom:12px; gap:10px; width:100%; transition:transform 220ms ease, opacity 220ms ease; }
.align-left { justify-content:flex-start; }
.align-right { justify-content:flex-end; }
.align-center { justify-content:center; }

/* avatar */
.msg-avatar { width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; flex: 0 0 44px; box-shadow: 0 6px 18px rgba(2,6,23,0.06); }
.avatar-me { background: linear-gradient(180deg,var(--accent-blue),var(--accent-blue-2)); box-shadow: 0 6px 18px rgba(11,92,255,0.14); }
.avatar-other { background: linear-gradient(180deg,var(--accent-red),var(--accent-red-2)); box-shadow: 0 6px 18px rgba(225,59,49,0.14); }
.avatar-s { background:#9aa4b2; }

/* message bubbles: "me" (blue right), "other" (red left), "spectator" neutral */
.msg { display:inline-block; max-width:72%; padding:12px 14px; border-radius:12px; color:inherit; box-shadow: var(--shadow-sm); word-break:break-word; white-space:pre-wrap; overflow-wrap: anywhere; }
.msg-meta { font-size:12px; color:var(--muted); margin-bottom:8px; display:flex; gap:8px; align-items:center; }
.msg-text { font-size:15px; line-height:1.38; color: inherit; }

/* blue for me (right) */
.msg--me { background: linear-gradient(180deg, var(--accent-blue), var(--accent-blue-2)); color:#fff; border-radius:14px 14px 6px 14px; }

/* red for others (left) */
.msg--other { background: linear-gradient(180deg, var(--accent-red), var(--accent-red-2)); color:#fff; border-radius:14px 14px 14px 6px; }

/* neutral */
.msg--s { background:#f3f4f6; color:#0b1220; border-radius:12px; }

/* entrance animation (no infinite loop) */
@keyframes slideInLeft {
  from { transform: translateX(-8px); opacity:0; }
  to { transform: translateX(0); opacity:1; }
}
@keyframes slideInRight {
  from { transform: translateX(8px); opacity:0; }
  to { transform: translateX(0); opacity:1; }
}
.msg-enter-left { animation: slideInLeft 220ms var(--ui-transition) both; }
.msg-enter-right { animation: slideInRight 220ms var(--ui-transition) both; }

/* composer */
.composer { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.composer textarea { width:100%; min-height:62px; border-radius:10px; border:1px solid #e6eef8; padding:12px; resize:vertical; font-size:15px; transition: box-shadow var(--ui-transition); }
.composer textarea:focus { box-shadow: 0 8px 20px rgba(11,92,255,0.08); outline: none; }

/* composer controls */
.composer-controls { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.turn-pill { background:#f3f4f6; padding:6px 10px; border-radius:999px; font-weight:700; color:#111827; transition: background var(--ui-transition), color var(--ui-transition); }
.turn-good { background: linear-gradient(180deg,#ecfdf5,#bbf7d0); color:#065f46; }
.turn-warn { background: linear-gradient(180deg,#fff7ed,#ffedd5); color:#92400e; }
.turn-bad { background: linear-gradient(180deg,#ffeded,#ffd6d6); color:#7f1d1d; }

/* bottom cards & ai */
.bottom-cards { display:flex; gap:18px; margin-top:18px; }
.card { background:var(--card-bg); border-radius:12px; padding:12px; box-shadow: var(--shadow-sm); border:1px solid rgba(11,17,36,0.03); flex:1; }
.players-card { max-width: 420px; }
.score-head { font-weight:800; font-size:14px; margin-bottom:6px; }
.ai-notes { margin-top:8px; font-size:13px; color:#111827; }

/* skeleton loaders */
.skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.02) 50%, rgba(0,0,0,0.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
  border-radius: 8px;
}
@keyframes shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* responsive */
@media (max-width: 920px){
  .page { padding: 0 12px; margin-top:84px; }
  .bottom-cards { flex-direction:column; }
  .messages { max-height:55vh; }
}
@media (max-width: 600px){
  .nav { display:none; }
  .brand-text { display:none; }
  .page { margin-top:72px; padding: 10px; }
  .messages { max-height:55vh; padding:12px; }
  .msg-avatar { display:none; }
  .msg { max-width:92%; }
  .composer textarea { min-height:72px; }
}