/* Base styles */
:root { --brand: #2563eb; --brand-600:#2563eb; --danger:#ef4444; }
* { box-sizing: border-box; }
html, body { height: 100%; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.input { border: 1px solid #e5e7eb; border-radius: .5rem; padding: .5rem .75rem; outline: none; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.btn-primary { background: var(--brand); color: #fff; border-radius: .5rem; padding: .5rem .75rem; }
.btn-secondary { background: #f1f5f9; color: #111827; border-radius: .5rem; padding: .5rem .75rem; }
.btn-danger { background: var(--danger); color: #fff; border-radius: .5rem; padding: .5rem .75rem; }
.icon-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem; border: 1px solid #e5e7eb; }
.icon-btn:hover { background: #f8fafc; }

/* Modal */
.modal { position: fixed; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,.4); padding: 1rem; z-index:50; }
.modal-content { background:#fff; border-radius: .75rem; padding: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.2); position:relative; }
.hidden{ display:none !important; }

/* Tabs */
.tabs { display:flex; gap:.5rem; border-bottom: 1px solid #e5e7eb; }
.tab { padding:.5rem .75rem; border:1px solid #e5e7eb; border-bottom:none; border-radius:.5rem .5rem 0 0; background:#f8fafc; }
.tab.active { background:#fff; font-weight:600; }
.pane.hidden{ display:none; }

/* Messages */
.message { display:flex; align-items:flex-end; gap:.5rem; }
.message .bubble { max-width: 70%; padding:.5rem .75rem; border-radius: .75rem; border:1px solid #e5e7eb; background:#fff; }
.message.me { flex-direction: row-reverse; }
.message.me .bubble { background: #e0ecff; border-color: #c7dbff; }
.timestamp { font-size:.7rem; color:#6b7280; }

/* Utility */
.ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Call modal video positioning fix */
#callModal .modal-content { position:relative; }
#localVideo { position:absolute; right: 1rem; bottom: 1rem; }