/* Global theme */
:root{
  --gradient-start:#eef2f7;
  --gradient-end:#f8fafc;
  --brand:#2563eb; /* primary */
  --brand-dark:#1d4ed8;
  --brand-light:#3b82f6;
}

html,body{height:100%}
body{
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  background-attachment: fixed;
}

[data-theme="dark"] body{
  --gradient-start:#0f172a;
  --gradient-end:#111827;
  color:#e5e7eb;
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
}

/* Navbar */
.navbar.bg-dark{
  background: linear-gradient(135deg, #1f2937, #111827) !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.navbar .nav-link{opacity:.9}
.navbar .nav-link:hover{opacity:1}

[data-theme="dark"] .navbar.bg-dark{background: linear-gradient(135deg, #0b1220, #0a0f1a) !important;}

/* Cards: soft 3D */
.card{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow:
    0 10px 30px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(0,0,0,.03);
}
[data-theme="dark"] .card{background: #0f172a; border-color: rgba(255,255,255,.06)}
.card .card-title{font-weight:600}

/* Buttons: gradient + 3D */
.btn-primary{
  background: linear-gradient(180deg, var(--brand-light), var(--brand));
  border-color: var(--brand);
  box-shadow: 0 6px 14px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:hover{background: linear-gradient(180deg, var(--brand), var(--brand-dark)); border-color: var(--brand-dark)}
.btn-primary:active{transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0,0,0,.25)}

.btn-outline-secondary{border-radius:10px}
.btn, .form-control, .form-select{border-radius:10px}

/* Inputs: subtle inner shadow */
.form-control, .form-select{
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
.form-control:focus, .form-select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(37,99,235,.15), inset 0 1px 2px rgba(0,0,0,.06);
}

/* Dropdown */
.dropdown-menu{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

/* Tables */
table.table{background:#fff; border-radius:12px; overflow:hidden}
table.table thead th{background:rgba(0,0,0,.03); font-weight:600}
table.table tbody tr:hover{background:rgba(37,99,235,.04)}

/* Alerts */
.alert{border-radius:12px; box-shadow: 0 6px 18px rgba(0,0,0,.08)}

/* Dropzone */
.dropzone{
  background: radial-gradient(circle at 20% 20%, #ffffff, #f3f6fb);
  cursor:pointer;
  border: 2px dashed rgba(37,99,235,.35);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.dropzone:hover{
  box-shadow: 0 10px 24px rgba(37,99,235,.15);
  border-color: rgba(37,99,235,.6);
  transform: translateY(-1px);
}

/* Badges */
.badge{border-radius:10px}

/* Utility spacing for sections */
.section{margin-top:1rem;margin-bottom:1rem}

/* Chat thread */
.chat-thread{
  display:flex; flex-direction:column; gap:.75rem;
}
.chat-thread .chat-row{display:flex}
.chat-thread .chat-row.other{justify-content:flex-start}
.chat-thread .chat-row.me{justify-content:flex-end}
.chat-thread .chat-row .avatar{
  width:36px;height:36px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;
  margin:0 .5rem; box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.avatar-img{width:36px;height:36px;border-radius:50%;object-fit:cover;display:block}
.chat-thread .bubble{
  max-width:min(85%, 720px);
  padding:.6rem .8rem; border-radius:16px; position:relative;
  box-shadow: 0 6px 14px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.35);
  background:#ffffff;
}
.chat-thread .chat-row.me .bubble{
  color:#fff;
  background: linear-gradient(180deg, var(--brand-light), var(--brand));
}
.chat-thread .chat-row.other .bubble{background:#fff}
.chat-thread .bubble .meta{display:flex; gap:.5rem; align-items:center; margin-bottom:.25rem}
.chat-thread .bubble .meta .name{font-weight:600; font-size:.9rem}
.chat-thread .bubble .meta .time{font-size:.8rem; opacity:.8}
.chat-thread .bubble .text{white-space:normal; word-break:break-word}
.chat-thread .chat-row.other .bubble{margin-left:.25rem}
.chat-thread .chat-row.me .bubble{margin-right:.25rem}

/* Reactions */
.reactions .react-btn{--bs-btn-font-size:.8rem}
.reaction-counts{min-width:48px}

/* Attachment tiles */
.attachment-tile{background:#fff}
.attachment-thumb{object-fit:cover; width:100%; max-height:160px}

/* Lightbox */
.lightbox-image{max-width:100%; max-height:80vh; display:block; margin:auto}
.lightbox-video{max-width:100%; max-height:80vh; display:block; margin:auto}

/* Previews for new uploads */
.previews .preview-item{border:1px solid rgba(0,0,0,.08); border-radius:10px; background:#fff; box-shadow: 0 4px 10px rgba(0,0,0,.06)}
.previews .preview-item .name{font-size:.85rem}

/* Estrelas de classificação */
.rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 5px;
  margin-bottom: 1rem;
}

.rating input {
  display: none;
}

.rating label {
  font-size: 2rem;
  color: #ddd;
  cursor: pointer;
  transition: color 0.2s;
}

.rating label:before {
  content: '★';
}

.rating input:checked ~ label,
.rating input:checked ~ label ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: #ffc107;
}

.rating input:checked + label,
.rating input:checked + label ~ label {
  color: #ffc107;
}

.rating-container {
  margin-bottom: 1rem;
}

.rating-value {
  margin-top: 0.5rem;
  font-size: 1.1rem;
  font-weight: bold;
  color: #666;
}