/* ===================================================================
   Otherline · app.css
   全局 entry · 只做两件 ·
   1) import design.css(token + 组件 BEM 真相源 · 改这里 = 全改)
   2) 全局 reset · html / body 撑满 + 禁主滚 · 单页 shell 自治
   =================================================================== */

@import "./design.css";
@import "./translation.css";

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  /* design.css 已设了背景/字体 · 这里只确保 shell 撑满 */
  margin: 0;
}

/* 给 web component host 一些默认 display, 让它们不破坏 flow */
ot-icon,
ot-avatar,
ot-tag {
  display: inline-flex;
}

ot-card,
ot-bubble,
ot-list-item,
ot-search,
ot-input,
ot-button {
  display: inline-block;
}

ot-button {
  display: inline-flex;
}

ot-sidebar {
  display: flex;
}

ot-session-cta {
  position: fixed;
  top: 12px;
  right: 18px;
  z-index: 1000;
  display: block;
  pointer-events: none;
}

html.has-guest-session-cta .ot-main__head-actions {
  padding-right: 142px;
}

@media (max-width: 720px) {
  ot-session-cta {
    top: 8px;
    right: 10px;
  }

  html.has-guest-session-cta .ot-main__head-actions {
    padding-right: 58px;
  }
}

/* page-level web component hosts · 撑满 main 区 + 内部 body 可滚 */
ot-plaza-view,
ot-moments-view,
ot-contacts-view,
ot-favorites-view,
ot-notifications-view,
ot-profile-view,
ot-settings-view,
ot-compose-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

ot-switch,
ot-theme-toggle {
  display: inline-flex;
}

/* r33 · 链接预览卡片(chat · moments · plaza 评论 通用) */
.link-preview {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--ot-line);
  border-radius: var(--ot-r-sm);
  background: var(--ot-bg);
  text-decoration: none;
  color: inherit;
  max-width: 320px;
  margin-top: 6px;
  transition: background .15s ease;
}
.link-preview:hover { background: var(--ot-bg-soft); }
.link-preview__cover {
  width: 56px; height: 56px;
  border-radius: var(--ot-r-xs);
  overflow: hidden;
  background: var(--ot-bg-soft);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.link-preview__cover img { width: 100%; height: 100%; object-fit: cover; }
.link-preview__cover.is-empty .icon { width: 22px; height: 22px; color: var(--ot-ink-soft); }
.link-preview__body { min-width: 0; display: grid; gap: 2px; }
.link-preview__title {
  font-size: 13px; font-weight: 600; color: var(--ot-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link-preview__desc {
  font-size: 12px; color: var(--ot-ink-soft);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.link-preview__site {
  font-size: 11px; color: var(--ot-ink-muted);
  display: inline-flex; align-items: center; gap: 4px;
}
.link-preview__site .icon { width: 12px; height: 12px; }