/* 桌面小组件外观。玻璃材质复用 home.css 的选择器组（.home-widget-body 已并进去）。 */

/*
 * 组件不铺满整个格子，而是对齐「图标的视觉外框」：
 *   高 = 图标块高 * 行数 + 行距 * (行数 - 1)
 *   左右各内缩一个 --icon-inset-x（图标底在列内居中留出的空白）
 * 这样 2 行组件的上下缘正好等于两个上下相邻图标的上下缘。
 * --icon-block-h / --icon-inset-x 由 homeMeasureMetrics() 实测后写在 #desktop-strip 上，
 * 不能写死：列宽随屏幕变，写死会在小屏上错位。
 */
.home-widget {
  align-self: start;
  margin-left: var(--icon-inset-x, 0px);
  margin-right: var(--icon-inset-x, 0px);
  height: calc(
    var(--icon-block-h, 87px) * var(--w-rows, 1) +
    var(--desktop-row-gap, 4px) * (var(--w-rows, 1) - 1)
  );
  min-width: 0;
  cursor: pointer;
}

.home-widget-body {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(180%) brightness(1.05);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.05);
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.035);
  color: var(--c-title);
}

/* ===== 拍立得 2x2 ===== */
/*
 * 这一层是把 .home-widget-body 的玻璃底整个撤掉：背景、模糊、投影、
 * 以及 home.css 里那两个画玻璃描边的伪元素都要关，纸片才是直接贴在桌面上的。
 */
.home-widget-body.is-bare {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.home-widget-body.is-bare::before,
.home-widget-body.is-bare::after {
  content: none;
}

.wg-pola {
  width: 100%;
  height: 100%;
  padding: 15px 0 5px;           /* 上方留给别针探头 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 相纸比例锁在 aspect-ratio 上：格子高度随机型变，用百分比会把相纸拉变形 */
.wg-pola-stack {
  position: relative;
  height: 100%;
  max-width: 84%;
  aspect-ratio: 118 / 133;
}

.wg-pola-back,
.wg-pola-card {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 1px;
}
/* 后面那张只露边，转得比前面多，四角各探出一点 */
.wg-pola-back {
  transform: rotate(3.5deg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}
.wg-pola-card {
  transform: rotate(-1.8deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  /* 下边框比其他三边宽得多，这是拍立得的关键比例 */
  padding: 5.5% 5.5% 16%;
  display: flex;
}
.wg-pola-photo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
}
.wg-pola-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
}

.wg-pola-clip {
  position: absolute;
  z-index: 2;
  top: -6%;
  left: 50%;
  width: 17%;
  transform: translateX(-50%) rotate(-1.8deg);
  color: #c3c3d0;
}

/* ===== 日记卡片 2x4 ===== */
/* 不额外画底：直接透出 .home-widget-body 的那层玻璃，和时钟组件一致 */
.wg-diary {
  width: 100%;
  height: 100%;
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wg-diary-top {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.wg-diary-left {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

/* 粗斜体衬线：Georgia 在 iOS / macOS 上都有，是这套数字最接近的现成字体 */
.wg-diary-time,
.wg-diary-date {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 25px;
  line-height: 1;
  letter-spacing: 0.3px;
  color: var(--c-text);
}
.wg-diary-sec {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  color: var(--c-sub, rgba(0, 0, 0, 0.45));
}

/*
 * 白圈头像，做法同通讯录页的 .ct-hero.is-side .ct-hero-avatar：
 * content-box + padding 撑出白环，圈的粗细加在头像本体之外，本体始终是正圆。
 */
.wg-diary-avatar {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  box-sizing: content-box;
  margin: 7px 0 6px;
  padding: 3px;
  border: 1px solid var(--c-border-m);
  border-radius: 50%;
  background: var(--c-bg);
}
.wg-diary-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
}

.wg-diary-title {
  flex-shrink: 0;
  max-width: 100%;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wg-diary-handle {
  flex-shrink: 0;
  max-width: 100%;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--c-sub, rgba(0, 0, 0, 0.45));
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== 聊天示意 2x4 ===== */
/*
 * 也是 is-bare：四层元素各自带白底，外面再套一块玻璃会糊成一坨。
 * 四层平铺（来信 32 / 去信 32 / 菜单 30 / 输入栏 34 = 128px）刚好吃满 2 行的 178px 净高，
 * 也让每层各自独占整宽 —— 菜单和去信气泡并排那版在窄屏会撞上
 */
.wg-chat {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  /* 纯装饰，整块不吃指针事件 —— 否则按在气泡上会拖不动组件 */
  pointer-events: none;
}

.wg-chat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.wg-chat-row.is-out { justify-content: flex-end; }

/* 头像：圆角方图，两条气泡共用 */
.wg-chat-ava {
  flex: none;
  width: 32px;
  height: 32px;
}
.wg-chat-ava img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
}

/* 气泡圆角 13px：比 --r-md 收一档。这一层只有 28px 高，用 16px 以上会直接圆成胶囊 */
.wg-chat-bubble {
  padding: 6px 11px;
  border-radius: 13px;
  background: var(--c-bg);
  box-shadow: var(--shadow-sm);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-text);
  white-space: nowrap;
}

/* 小菜单：胶囊白条，分段之间用 1px 竖线隔开 */
.wg-chat-menu {
  flex: none;
  display: flex;
  align-items: center;
  height: 30px;
  border-radius: 15px;
  background: var(--c-bg);
  box-shadow: var(--shadow-md);
  color: var(--c-text);
}
/* 比气泡的 11.5px 小 1px：菜单字重虽然轻一档，同字号下仍显得比气泡里的字大 */
.wg-chat-menu-item {
  padding: 0 11px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.wg-chat-menu-ico {
  display: flex;
  padding: 0 10px;
}
.wg-chat-menu-ico svg {
  width: 15px;
  height: 15px;
  display: block;
}
.wg-chat-menu-sep {
  flex: none;
  width: 1px;
  height: 15px;
  background: var(--c-border-m);
}

.wg-chat-input {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
/*
 * 输入栏用半透明白 + 模糊，不用参考稿那种浅灰实底：桌面本身就是 #f6f6f6，
 * 浅灰实底会整条消失在背景里
 */
.wg-chat-field {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 16px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 34px;
  color: var(--c-hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 三颗一样大，只有右侧靠里那颗深一档 —— --c-border-m 与 --c-hint 之间没有现成变量，写死 */
.wg-chat-heart {
  flex: none;
  display: flex;
  color: var(--c-border-m);
}
.wg-chat-heart.is-deep {
  color: rgba(0, 0, 0, 0.16);
}
.wg-chat-heart svg {
  width: 15px;
  height: 14px;
  display: block;
}