/* Copied from desktop-app/app/styles.css for web client */
:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --panel2:#111c35;
  --text:#e5e7eb;
  --text-secondary:#94a3b8;
  --border:rgba(148,163,184,.18);
  --accent:#667eea;
  --accent2:#764ba2;
  --danger:#ef4444;
  --chat-bg-image:none;
}

body[data-theme="light"]{
  --bg:#f5f7fb;
  --panel:#ffffff;
  --panel2:#ffffff;
  --text:#0f172a;
  --text-secondary:#475569;
  --border:rgba(15,23,42,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% 0%, rgba(102,126,234,.25), transparent 60%),
              radial-gradient(900px 700px at 80% 20%, rgba(118,75,162,.25), transparent 60%),
              var(--bg);
}

/* Web: no electron titlebar drag, keep layout */
.titlebar{display:none}

.app-container{height:100%; display:flex}
.sidebar{
  width:360px; max-width:92vw;
  background: rgba(15,23,42,.7);
  backdrop-filter: blur(14px);
  border-right: 1px solid var(--border);
  display:flex; flex-direction:column;
}
body[data-theme="light"] .sidebar{background:rgba(255,255,255,.75)}

.sidebar-header{padding:14px 14px 10px; display:flex; align-items:center; gap:10px}
.user-profile{display:flex; align-items:center; gap:10px; flex:1; cursor:pointer}
.avatar{
  width:40px; height:40px; border-radius:12px;
  background: linear-gradient(135deg, rgba(102,126,234,.35), rgba(118,75,162,.35));
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  border:1px solid var(--border);
}
.user-info{display:flex; flex-direction:column; gap:2px; min-width:0}
.user-name{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.user-status{font-size:12px; color:var(--text-secondary)}
.user-status.online{color:#22c55e}

.icon-button{
  width:38px; height:38px;
  border-radius:12px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.icon-button:hover{background:rgba(148,163,184,.08)}

.search-box{padding:0 14px 12px; position:relative}
.search-box input{
  width:100%;
  padding:10px 12px 10px 38px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(2,6,23,.35);
  color:var(--text);
  outline:none;
}
body[data-theme="light"] .search-box input{background:rgba(241,245,249,.9)}
.search-icon{position:absolute; left:26px; top:9px; opacity:.7}

.chats-list{flex:1; overflow:auto; padding:8px}
.chat-item{
  display:flex; gap:12px;
  padding:10px;
  border-radius:16px;
  cursor:pointer;
  border:1px solid transparent;
}
.chat-item:hover{background:rgba(148,163,184,.06)}
.chat-item.active{background:rgba(102,126,234,.12); border-color:rgba(102,126,234,.25)}
.chat-avatar{
  width:44px; height:44px; border-radius:16px;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  background: rgba(2,6,23,.25);
}
.chat-details{flex:1; min-width:0}
.chat-item-header{display:flex; justify-content:space-between; gap:10px; align-items:center}
.chat-item-name{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chat-item-time{font-size:12px; color:var(--text-secondary)}
.chat-item-message{font-size:13px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px}
.unread-badge{
  min-width:22px; height:22px; padding:0 7px;
  border-radius:999px;
  background:rgba(239,68,68,.95);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:white;
}

.empty-state{padding:34px 18px; text-align:center; color:var(--text-secondary)}
.empty-icon{font-size:42px; margin-bottom:8px}
.btn-primary{
  border:none; cursor:pointer;
  padding:11px 14px;
  border-radius:14px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:white; font-weight:700;
}
.btn-primary.btn-large{padding:14px 18px; border-radius:16px}
.btn-secondary{
  border:1px solid var(--border);
  background:transparent; color:var(--text);
  padding:11px 14px;
  border-radius:14px;
  cursor:pointer;
}

.chat-area{flex:1; display:flex; min-width:0}
.welcome-screen{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.welcome-content{
  max-width:820px;
  background: rgba(15,23,42,.55);
  border:1px solid var(--border);
  border-radius:24px;
  padding:28px;
  backdrop-filter: blur(14px);
}
body[data-theme="light"] .welcome-content{background:rgba(255,255,255,.8)}
.welcome-icon{font-size:48px}
.welcome-content h1{margin:12px 0 6px}
.welcome-content p{margin:0 0 18px; color:var(--text-secondary)}
.welcome-features{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  margin:18px 0;
}
.feature{
  border:1px solid var(--border);
  background: rgba(2,6,23,.20);
  border-radius:18px;
  padding:12px 14px;
  display:flex; gap:10px;
}
body[data-theme="light"] .feature{background:rgba(241,245,249,.9)}
.feature-icon{font-size:20px}
.feature-text strong{display:block}
.feature-text p{margin:2px 0 0; font-size:13px}

.chat-container{flex:1; display:flex; flex-direction:column; min-width:0}
.chat-header{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(14px);
  display:flex; align-items:center; justify-content:space-between;
}
body[data-theme="light"] .chat-header{background:rgba(255,255,255,.85)}
.chat-info{display:flex; gap:12px; align-items:center; cursor:pointer; min-width:0}
.chat-name{font-weight:800}
.chat-status{font-size:12px; color:var(--text-secondary)}
.chat-actions{display:flex; gap:10px}

.messages-container{
  flex:1;
  overflow:auto;
  padding:14px;
  background-image: var(--chat-bg-image);
  background-size: cover;
  background-position: center;
}
.date-divider{display:flex; justify-content:center; margin:10px 0}
.date-divider span{
  font-size:12px;
  color:var(--text-secondary);
  border:1px solid var(--border);
  padding:4px 10px;
  border-radius:999px;
  background:rgba(2,6,23,.2);
}
body[data-theme="light"] .date-divider span{background:rgba(255,255,255,.7)}

.message{display:flex; margin:8px 0}
.message.sent{justify-content:flex-end}
.message.received{justify-content:flex-start}
.message-bubble{
  max-width:min(680px, 86vw);
  border-radius:18px;
  border:1px solid var(--border);
  background: rgba(2,6,23,.25);
  padding:10px 12px;
}
body[data-theme="light"] .message-bubble{background:rgba(255,255,255,.85)}
.message.sent .message-bubble{background:rgba(102,126,234,.18); border-color:rgba(102,126,234,.28)}
.message-text{white-space:pre-wrap; word-wrap:break-word}
.message-meta{display:flex; gap:8px; justify-content:flex-end; margin-top:6px; font-size:12px; color:var(--text-secondary)}
.message-status{font-weight:800}
.msg-reply-btn{
  border:none;
  background:rgba(148,163,184,.16);
  color:var(--text-secondary);
  border-radius:999px;
  padding:2px 6px;
  font-size:11px;
  cursor:pointer;
}
.msg-reply-btn:hover{
  background:rgba(129,140,248,.25);
  color:var(--text);
}
.reply-preview-inline{
  font-size:11px;
  color:var(--text-secondary);
  margin-bottom:4px;
  padding:3px 8px;
  border-left:2px solid rgba(129,140,248,.8);
}
.reply-clickable{
  cursor:pointer;
}
.reply-clickable:hover{
  background:rgba(129,140,248,.12);
}
.message-highlight .message-bubble{
  box-shadow:0 0 0 2px rgba(129,140,248,.75);
  transform:translateY(-1px);
  transition:box-shadow .2s ease, transform .2s ease;
}

.terms-pre{
  white-space:pre-wrap;
  word-break:break-word;
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:13px;
}

.message-input-area{
  padding:12px;
  border-top:1px solid var(--border);
  display:flex; align-items:flex-end; gap:10px;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(14px);
}
body[data-theme="light"] .message-input-area{background:rgba(255,255,255,.9)}
.input-wrapper{flex:1}
textarea{
  width:100%;
  resize:none;
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px 12px;
  font:inherit;
  color:var(--text);
  background:rgba(2,6,23,.25);
  outline:none;
  max-height:140px;
}
body[data-theme="light"] textarea{background:rgba(241,245,249,.9)}
.btn-send{
  width:44px; height:44px;
  border-radius:16px;
  border:none;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:white;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

.voice-recording{
  background: rgba(239,68,68,.18) !important;
  border-color: rgba(239,68,68,.35) !important;
}

.typing-indicator{
  padding:10px 14px;
  color:var(--text-secondary);
  font-size:13px;
  display:flex; align-items:center; gap:10px;
}
.typing-dots{display:flex; gap:4px}
.typing-dots span{
  width:6px; height:6px;
  border-radius:999px;
  background:rgba(148,163,184,.8);
  animation: bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{transform:scale(.75);opacity:.6}40%{transform:scale(1);opacity:1}}

.connection-status{
  position:fixed;
  bottom:14px;
  left:14px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.75);
  display:flex; align-items:center; gap:8px;
  font-size:12px;
  color:var(--text-secondary);
  backdrop-filter: blur(14px);
}
body[data-theme="light"] .connection-status{background:rgba(255,255,255,.85)}
.status-indicator{
  width:8px; height:8px; border-radius:999px;
  background:#f59e0b;
}
.connection-status.connected .status-indicator{background:#22c55e}

.modal{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:50;
}
.modal-content{
  width:min(520px, 96vw);
  background: rgba(15,23,42,.9);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
}
body[data-theme="light"] .modal-content{background:rgba(255,255,255,.95)}
.modal-header{padding:14px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border)}
.modal-header h2{margin:0; font-size:16px}
.modal-close{border:none; background:transparent; color:var(--text); cursor:pointer; font-size:22px; line-height:1}
.modal-body{padding:14px 16px}
.modal-footer{padding:14px 16px; display:flex; gap:10px; justify-content:flex-end; border-top:1px solid var(--border)}
.form-group{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.form-input,.form-textarea{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(2,6,23,.25);
  color:var(--text);
  font:inherit;
}
body[data-theme="light"] .form-input, body[data-theme="light"] .form-textarea{background:rgba(241,245,249,.95)}
.form-textarea{min-height:88px; resize:vertical}

.notification-container{
  position:fixed;
  top:14px;
  right:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:70;
}
.notification{
  width:min(360px, 92vw);
  background: rgba(15,23,42,.85);
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px 12px;
  backdrop-filter: blur(14px);
}
body[data-theme="light"] .notification{background:rgba(255,255,255,.95)}
.notification.hide{opacity:0; transform:translateY(-6px); transition: all .35s ease}
.notification-header{display:flex; justify-content:space-between; align-items:center}
.notification-app{font-weight:800; font-size:12px; color:var(--text-secondary)}
.notification-close{border:none; background:transparent; color:var(--text); cursor:pointer; font-size:18px; line-height:1}
.notification-title{margin-top:6px; font-weight:800}
.notification-body{margin-top:6px; color:var(--text-secondary); font-size:13px}

.context-menu{
  position:fixed;
  background: rgba(15,23,42,.95);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  z-index:80;
  min-width:200px;
}
body[data-theme="light"] .context-menu{background:rgba(255,255,255,.98)}
.context-menu-item{padding:10px 12px; cursor:pointer}
.context-menu-item:hover{background:rgba(148,163,184,.08)}
.context-menu-item.danger{color:var(--danger)}
.context-menu-sep{height:1px; background:var(--border)}

.file-card{display:flex; flex-direction:column; gap:10px}
.file-meta{display:flex; gap:10px; align-items:center}
.file-name{font-weight:700}
.file-actions{display:flex; justify-content:flex-end}
.file-download-btn{border:none; cursor:pointer; border-radius:14px; padding:10px 12px; background:rgba(102,126,234,.22); color:var(--text); border:1px solid rgba(102,126,234,.28)}
.media-preview{border-radius:14px; overflow:hidden; border:1px solid var(--border)}
.media-preview img, .media-preview video{display:block; width:100%; max-height:320px; object-fit:cover}

.scroll-to-bottom{
  position:absolute;
  right:16px;
  bottom:74px;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.8);
  color:var(--text);
  cursor:pointer;
  backdrop-filter: blur(14px);
}

@media (max-width: 860px){
  .sidebar{width:320px}
  .welcome-features{grid-template-columns:1fr}
}

@media (max-width: 680px){
  .sidebar{width:100%; max-width:100vw}
  .chat-area{display:none}
  body.chat-open .sidebar{display:none}
  body.chat-open .chat-area{display:flex}
  .chat-header{position:sticky; top:0; z-index:5}
  .messages-container{padding:12px}
}