/* ============================================================
   聊天界面皮肤：微信 / iMessage（默认皮肤不受这里任何规则影响）
   <html data-chat-skin> 由 chat-skins.js 在 <head> 里同步写入；加载顺序在所有聊天样式之后。
   所有选择器都以 html[data-chat-skin=...] .chat-phone 开头，优先级压过 chat-glass.css 的覆盖层。
   ============================================================ */

/* ================= 微信 ================= */
html[data-chat-skin="wechat"] .chat-phone {
  --wx-bg: #ededed;
  --wx-bar: rgb(237 237 237 / 72%);
  --wx-composer: rgb(247 247 247 / 80%);
  --wx-glass: blur(24px) saturate(1.8);
  --wx-input: #fff;
  --wx-ink: #191919;
  --wx-muted: #a3a3a3;
  --wx-line: rgb(0 0 0 / 8%);
  --wx-other: #fff;
  --wx-self: #95ec69;
  --wx-self-ink: #191919;
  --wx-avatar: #d6d6d6;
}
html[data-chat-skin="wechat"] .chat-phone.theme-night {
  --wx-bg: #111;
  --wx-bar: rgb(25 25 25 / 72%);
  --wx-composer: rgb(30 30 30 / 80%);
  --wx-input: #2c2c2c;
  --wx-ink: #e6e6e6;
  --wx-muted: #6c6c6c;
  --wx-line: rgb(255 255 255 / 6%);
  --wx-other: #2c2c2c;
  --wx-self: #3eb575;
  --wx-self-ink: #0e0e0e;
  --wx-avatar: #3a3a3a;
}
html[data-chat-skin="wechat"] .chat-phone :is(.chat-detail-view, .message-area) { background-color: var(--wx-bg); }

/* 顶栏：实心浅灰条 + 细分隔线，左 ‹ 开侧栏，右 ··· 弹菜单（退出 / 角色资料） */
html[data-chat-skin="wechat"] .chat-phone .detail-toolbar-blur { display: none; }
html[data-chat-skin="wechat"] .chat-phone .detail-toolbar {
  height: calc(50px + var(--safe-top));
  padding: var(--safe-top) 6px 0;
  background: var(--wx-bar);
  -webkit-backdrop-filter: var(--wx-glass);
  backdrop-filter: var(--wx-glass);
  box-shadow: 0 .5px 0 var(--wx-line);
}
html[data-chat-skin="wechat"] .chat-phone .detail-toolbar .toolbar-capsule {
  padding: 0;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
html[data-chat-skin="wechat"] .chat-phone .detail-toolbar .capsule-icon-button { width: 40px; height: 40px; color: var(--wx-ink); }
html[data-chat-skin="wechat"] .chat-phone .detail-toolbar .capsule-icon-button svg { width: 23px; height: 23px; stroke-width: 1.9; }
html[data-chat-skin="wechat"] .chat-phone .detail-toolbar :is(#chat-exit-button, #character-settings-button, #group-settings-button) { display: none; }
html[data-chat-skin="wechat"] .chat-phone .detail-toolbar h1 { color: var(--wx-ink); font-size: 17px; font-weight: 600; }
html[data-chat-skin="wechat"] .chat-phone .detail-title-block { gap: 2px; }

html[data-chat-skin="wechat"] .skin-more-menu {
  position: absolute;
  top: calc(var(--safe-top) + 48px);
  right: 10px;
  z-index: 30;
  min-width: 148px;
  padding: 4px 0;
  border-radius: 8px;
  background: #4c4c4c;
  box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
}
html[data-chat-skin="wechat"] .skin-more-menu::before { content: ""; position: absolute; top: -6px; right: 18px; border: 6px solid transparent; border-top: 0; border-bottom-color: #4c4c4c; }
html[data-chat-skin="wechat"] .skin-more-menu[hidden] { display: none; }
html[data-chat-skin="wechat"] .skin-more-menu button {
  width: 100%;
  height: 48px;
  padding: 0 20px;
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}
html[data-chat-skin="wechat"] .skin-more-menu button + button { box-shadow: inset 0 .5px 0 rgb(255 255 255 / 12%); }
html[data-chat-skin="wechat"] .skin-more-menu button:active { background: rgb(255 255 255 / 8%); }

/* 消息：方角头像 + 4px 圆角气泡 + 小三角，对方白、自己绿 */
html[data-chat-skin="wechat"] .chat-phone .message-area { padding-left: 12px; padding-right: 12px; }
html[data-chat-skin="wechat"] .chat-phone .message-row { grid-template-columns: 40px minmax(0, 72%); gap: 10px; margin-bottom: 16px; }
html[data-chat-skin="wechat"] .chat-phone .message-row.self-row { grid-template-columns: minmax(0, 72%) 40px; }
html[data-chat-skin="wechat"] .chat-phone .message-row .message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-chat-skin="wechat"] .chat-phone .message-row .message-avatar,
html[data-chat-skin="wechat"] .chat-phone .message-row.self-row .message-avatar { color: var(--wx-ink); background: var(--wx-avatar); }
html[data-chat-skin="wechat"] .chat-phone .message-row .bubble {
  position: relative;
  padding: 9px 12px;
  border-radius: 4px;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: 16px;
  line-height: 1.45;
}
html[data-chat-skin="wechat"] .chat-phone .message-row:not(.self-row) .bubble { color: var(--wx-ink); background: var(--wx-other); }
html[data-chat-skin="wechat"] .chat-phone .message-row.self-row .bubble { color: var(--wx-self-ink); background: var(--wx-self); background-image: none; }
html[data-chat-skin="wechat"] .chat-phone .message-row .bubble:not(.bare-media)::before {
  content: "";
  position: absolute;
  top: 13px;
  border: 6px solid transparent;
}
html[data-chat-skin="wechat"] .chat-phone .message-row:not(.self-row) .bubble:not(.bare-media)::before { left: -5px; border-left: 0; border-right-color: var(--wx-other); }
html[data-chat-skin="wechat"] .chat-phone .message-row.self-row .bubble:not(.bare-media)::before { right: -5px; border-right: 0; border-left-color: var(--wx-self); }
html[data-chat-skin="wechat"] .chat-phone.hide-bubbles .message-row .bubble { background: transparent; }
html[data-chat-skin="wechat"] .chat-phone.hide-bubbles .message-row .bubble::before { display: none; }
html[data-chat-skin="wechat"] .chat-phone .group-speaker-name { color: var(--wx-muted); font-weight: 400; }
html[data-chat-skin="wechat"] .chat-phone .message-date { width: fit-content; margin: 14px auto 16px; padding: 2px 6px; border-radius: 4px; color: var(--wx-muted); font-size: 12px; }
/* 有专属聊天背景时（背景图写在 .message-area 的行内样式里），时间加一块浅底，不然看不清 */
html[data-chat-skin="wechat"] .chat-phone .message-area[style*="url("] .message-date { color: #7a7a7a; background: rgb(255 255 255 / 72%); }

/* 输入栏：贴底整条。白色输入框画在 ::before 上，因为 textarea 的高度由 chat.js 按 52px 起步写死在行内 */
html[data-chat-skin="wechat"] .chat-phone .message-composer {
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 0;
  padding: 2px 10px calc(2px + var(--safe-bottom));
  gap: 8px;
  border-radius: 0;
  background: var(--wx-composer);
  -webkit-backdrop-filter: var(--wx-glass);
  backdrop-filter: var(--wx-glass);
  box-shadow: 0 -.5px 0 var(--wx-line);
}
html[data-chat-skin="wechat"] .chat-phone.functions-open .message-composer { bottom: var(--function-h); padding-bottom: 2px; }
html[data-chat-skin="wechat"] .chat-phone .message-composer::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 8px;
  right: 86px;
  bottom: calc(8px + var(--safe-bottom));
  left: 48px;
  border-radius: 4px;
  background: var(--wx-input);
}
html[data-chat-skin="wechat"] .chat-phone.functions-open .message-composer::before { bottom: 8px; }
html[data-chat-skin="wechat"] .chat-phone .message-composer:has(textarea:not(:placeholder-shown))::before { right: 114px; }
html[data-chat-skin="wechat"] .chat-phone .message-composer.is-multiline { border-radius: 0; }
html[data-chat-skin="wechat"] .chat-phone .message-composer textarea { order: 2; padding: 15px 10px; color: var(--wx-ink); font-size: 16px; }
html[data-chat-skin="wechat"] .chat-phone .message-composer textarea::placeholder { color: transparent; }
html[data-chat-skin="wechat"] .chat-phone .message-composer .voice-button { order: 1; }
html[data-chat-skin="wechat"] .chat-phone .message-composer .skin-emoji-button { order: 3; }
html[data-chat-skin="wechat"] .chat-phone .message-composer .add-composer-button { order: 4; }
html[data-chat-skin="wechat"] .chat-phone .message-composer button.send-button { order: 5; }
html[data-chat-skin="wechat"] .chat-phone .message-composer .composer-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  margin-bottom: 11px;
  display: grid;
  place-items: center;
  border: 1.6px solid var(--wx-ink);
  border-radius: 50%;
  color: var(--wx-ink);
}
html[data-chat-skin="wechat"] .chat-phone .message-composer .voice-button svg { width: 17px; height: 17px; stroke-width: 2; }
html[data-chat-skin="wechat"] .chat-phone .message-composer .skin-emoji-button { padding: 0; background: none; cursor: pointer; }
html[data-chat-skin="wechat"] .chat-phone .message-composer .skin-emoji-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* 「＋」字形在不同字体里不居中，改用两条渐变线画 */
html[data-chat-skin="wechat"] .chat-phone .message-composer .add-composer-button {
  font-size: 0;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 14px no-repeat;
}
/* 有字才出现绿色「发送」，同时收起 ＋ */
html[data-chat-skin="wechat"] .chat-phone .message-composer button.send-button {
  flex: 0 0 auto;
  width: auto;
  height: 34px;
  margin-bottom: 9px;
  padding: 0 14px;
  border-radius: 4px;
  color: #fff;
  background: #07c160;
  box-shadow: none;
  font-size: 0;
}
html[data-chat-skin="wechat"] .chat-phone .message-composer button.send-button::before { content: "发送"; font-size: 15px; font-weight: 500; }
html[data-chat-skin="wechat"] .chat-phone .message-composer:has(textarea:placeholder-shown) button.send-button { display: none; }
html[data-chat-skin="wechat"] .chat-phone .message-composer:has(textarea:not(:placeholder-shown)) .add-composer-button { display: none; }

/* 消息区底部留白、附件托盘、续写浮钮都改按贴底输入栏的实际高度（已含 safe-bottom）算 */
html[data-chat-skin="wechat"] .chat-phone .message-area { bottom: 0; padding-bottom: calc(var(--composer-h, 56px) + var(--tray-h, 0px) + 12px); }
html[data-chat-skin="wechat"] .chat-phone.functions-open .message-area { bottom: var(--function-h); }
html[data-chat-skin="wechat"] .chat-phone .composer-attachments { bottom: calc(var(--composer-h, 56px) + 8px); }
html[data-chat-skin="wechat"] .chat-phone.functions-open .composer-attachments { bottom: calc(var(--function-h) + var(--composer-h, 56px) + 8px); }
html[data-chat-skin="wechat"] .chat-phone .meet-continue-float { bottom: calc(var(--composer-h, 56px) + var(--tray-h, 0px) + 8px); }
html[data-chat-skin="wechat"] .chat-phone.functions-open .meet-continue-float { bottom: calc(var(--function-h) + var(--composer-h, 56px) + var(--tray-h, 0px) + 8px); }
html[data-chat-skin="wechat"] .chat-phone :is(.chat-functions, .sticker-panel) { background: var(--wx-composer); border-top-color: var(--wx-line); }


/* ================= iMessage（高透玻璃） ================= */
html[data-chat-skin="imessage"] .chat-phone {
  --im-bg: #fff;
  --im-ink: #000;
  --im-muted: #8e8e93;
  --im-other: rgb(233 233 235 / 78%);
  --im-other-ink: #000;
  --im-self: #0a84ff;
  --im-glass: linear-gradient(to bottom, rgb(255 255 255 / 66%), rgb(255 255 255 / 40%));
  --im-glass-blur: blur(14px) saturate(200%) brightness(1.05) contrast(1.04);
  --im-glass-edge:
    inset 0 0 0 .5px rgb(255 255 255 / 95%),
    inset 1.5px 2px 1px -1px rgb(255 255 255 / 100%),
    inset -1.5px -2px 1.5px -1px rgb(0 0 0 / 10%),
    inset 0 -8px 14px -10px rgb(0 0 0 / 10%),
    inset 0 0 14px rgb(255 255 255 / 45%),
    0 0 0 .5px rgb(0 0 0 / 9%),
    0 2px 6px rgb(0 0 0 / 6%),
    0 10px 28px rgb(0 0 0 / 13%);
}
html[data-chat-skin="imessage"] .chat-phone.theme-night {
  --im-bg: #000;
  --im-ink: #fff;
  --im-muted: #8d8d93;
  --im-other: rgb(38 38 41 / 82%);
  --im-other-ink: #fff;
  --im-glass: linear-gradient(to bottom, rgb(78 78 84 / 58%), rgb(40 40 44 / 46%));
  --im-glass-edge:
    inset 0 0 0 .5px rgb(255 255 255 / 20%),
    inset 1.5px 2px 1px -1px rgb(255 255 255 / 38%),
    inset -1.5px -2px 1.5px -1px rgb(0 0 0 / 40%),
    inset 0 0 14px rgb(255 255 255 / 6%),
    0 0 0 .5px rgb(0 0 0 / 60%),
    0 10px 28px rgb(0 0 0 / 50%);
}
html[data-chat-skin="imessage"] .chat-phone :is(.chat-detail-view, .message-area) { background-color: var(--im-bg); }

/* 顶栏：左边玻璃圆钮（开侧栏，退出在侧栏底部），中间大头像 + 玻璃名字胶囊，点它进资料编辑；右边不放按钮 */
html[data-chat-skin="imessage"] .chat-phone .detail-toolbar {
  height: calc(112px + var(--safe-top));
  padding: calc(var(--safe-top) + 10px) 14px 0;
  align-items: flex-start;
}
html[data-chat-skin="imessage"] .chat-phone .detail-toolbar .toolbar-capsule-right { display: none; }
html[data-chat-skin="imessage"] .chat-phone .detail-toolbar .toolbar-capsule-left {
  padding: 0;
  border: 0;
  background: var(--im-glass);
  -webkit-backdrop-filter: var(--im-glass-blur);
  backdrop-filter: var(--im-glass-blur);
  box-shadow: var(--im-glass-edge);
}
html[data-chat-skin="imessage"] .chat-phone .detail-toolbar .capsule-icon-button { width: 44px; height: 44px; color: var(--im-ink); }
html[data-chat-skin="imessage"] .chat-phone .detail-toolbar .capsule-icon-button svg { width: 22px; height: 22px; stroke-width: 2.4; }
html[data-chat-skin="imessage"] .chat-phone .detail-title-block {
  top: calc(var(--safe-top) + 4px);
  bottom: auto;
  justify-content: flex-start;
  gap: 0;
  max-width: calc(100% - 132px);
}
html[data-chat-skin="imessage"] .chat-phone .detail-title-block.is-tappable { pointer-events: auto; cursor: pointer; }
html[data-chat-skin="imessage"] .chat-phone .detail-title-block.is-tappable:active { opacity: .7; }
html[data-chat-skin="imessage"] .chat-phone .skin-hero-avatar {
  position: relative;
  width: 60px;
  height: 60px;
  overflow: hidden;
  display: grid;
  place-items: end center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(to bottom, #a6b5dc, #7d88c3);
  box-shadow: 0 4px 14px rgb(0 0 0 / 12%);
}
html[data-chat-skin="imessage"] .chat-phone .skin-hero-avatar svg { width: 52px; height: 52px; margin-bottom: -6px; fill: currentColor; }
html[data-chat-skin="imessage"] .chat-phone.skin-group .skin-hero-avatar { place-items: center; }
html[data-chat-skin="imessage"] .chat-phone.skin-group .skin-hero-avatar svg { width: 36px; height: 36px; margin: 0; }
html[data-chat-skin="imessage"] .chat-phone .skin-hero-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html[data-chat-skin="imessage"] .chat-phone .skin-name-pill {
  position: relative;
  z-index: 1;
  max-width: 100%;
  height: 34px;
  margin-top: -8px;
  padding: 0 12px 0 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: var(--im-glass);
  -webkit-backdrop-filter: var(--im-glass-blur);
  backdrop-filter: var(--im-glass-blur);
  box-shadow: var(--im-glass-edge);
}
html[data-chat-skin="imessage"] .chat-phone .skin-name-pill h1 { min-width: 0; color: var(--im-ink); font-size: 15px; font-weight: 650; }
html[data-chat-skin="imessage"] .chat-phone .skin-name-pill i { color: var(--im-muted); font-size: 18px; font-style: normal; font-weight: 600; line-height: 1; }
html[data-chat-skin="imessage"] .chat-phone .detail-title-block:not(.is-tappable) .skin-name-pill i { display: none; }
html[data-chat-skin="imessage"] .chat-phone .detail-status-row { margin-top: 5px; }
html[data-chat-skin="imessage"] .chat-phone .status-text { color: var(--im-muted); }
/* 顶部渐进模糊加高到盖住头像和名字 */
html[data-chat-skin="imessage"] .chat-phone .detail-toolbar-blur { height: calc(124px + var(--safe-top)); }
html[data-chat-skin="imessage"] .chat-phone .detail-toolbar-blur span:nth-child(5) { background: linear-gradient(to bottom, color-mix(in srgb, var(--im-bg) 90%, transparent) 55%, transparent); }
/* 只改上和左右；底部留白沿用 chat-glass.css 按输入栏高度算的值，最后一条才不会压在输入框下面 */
html[data-chat-skin="imessage"] .chat-phone .message-area { padding-top: calc(128px + var(--safe-top)); padding-right: 12px; padding-left: 12px; }

/* 侧栏底部「退出」 */
.sidebar-exit-button { display: none; }
html[data-chat-skin="imessage"] .chat-phone .sidebar-exit-button {
  display: block;
  flex: 0 0 auto;
  height: 44px;
  border: 0;
  border-radius: 999px;
  color: #ff3b30;
  background: rgb(255 59 48 / 10%);
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
}
html[data-chat-skin="imessage"] .chat-phone .sidebar-exit-button:active { opacity: .7; }

/* 消息：单聊不显示头像；群聊只留对方的小圆头像 */
html[data-chat-skin="imessage"] .chat-phone .message-row { grid-template-columns: minmax(0, 76%); gap: 6px; margin-bottom: 8px; }
html[data-chat-skin="imessage"] .chat-phone .message-row.self-row { grid-template-columns: minmax(0, 76%); }
html[data-chat-skin="imessage"] .chat-phone .message-row .message-avatar { display: none; }
html[data-chat-skin="imessage"] .chat-phone.skin-group .message-row:not(.self-row) { grid-template-columns: 30px minmax(0, 76%); align-items: end; }
html[data-chat-skin="imessage"] .chat-phone.skin-group .message-row:not(.self-row) .message-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(to bottom, #a6b5dc, #7d88c3);
  box-shadow: none;
  font-size: 13px;
}
html[data-chat-skin="imessage"] .chat-phone .message-row .bubble {
  position: relative;
  padding: 8px 13px;
  border-radius: 19px;
  font-size: 16px;
  line-height: 1.38;
}
html[data-chat-skin="imessage"] .chat-phone .message-row:not(.self-row) .bubble {
  color: var(--im-other-ink);
  background: var(--im-other);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: none;
}
html[data-chat-skin="imessage"] .chat-phone .message-row.self-row .bubble {
  color: #fff;
  background: var(--im-self);
  background-image: none;
  box-shadow: none;
}
/* 尾巴：贴在外侧的一小片弯角，靠尾巴那一角收成直角，两块拼在一起不重叠（半透明气泡重叠会显出深色缝） */
html[data-chat-skin="imessage"] .chat-phone .message-row:not(.self-row) .bubble:not(.bare-media) { border-bottom-left-radius: 0; }
html[data-chat-skin="imessage"] .chat-phone .message-row.self-row .bubble:not(.bare-media) { border-bottom-right-radius: 0; }
html[data-chat-skin="imessage"] .chat-phone .message-row .bubble:not(.bare-media)::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 7px;
  height: 16px;
  background: inherit;
  -webkit-backdrop-filter: inherit;
  backdrop-filter: inherit;
}
html[data-chat-skin="imessage"] .chat-phone .message-row:not(.self-row) .bubble:not(.bare-media)::before {
  left: -7px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 16'%3E%3Cpath d='M7 0C7 7 5 12.5 0 16h7Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 16'%3E%3Cpath d='M7 0C7 7 5 12.5 0 16h7Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
html[data-chat-skin="imessage"] .chat-phone .message-row.self-row .bubble:not(.bare-media)::before {
  right: -7px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 16'%3E%3Cpath d='M0 0C0 7 2 12.5 7 16H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 16'%3E%3Cpath d='M0 0C0 7 2 12.5 7 16H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
html[data-chat-skin="imessage"] .chat-phone.hide-bubbles .message-row .bubble { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-chat-skin="imessage"] .chat-phone.hide-bubbles .message-row .bubble::before { display: none; }
html[data-chat-skin="imessage"] .chat-phone .group-speaker-name { padding-left: 12px; color: var(--im-muted); font-weight: 400; }
html[data-chat-skin="imessage"] .chat-phone .message-date { margin: 14px 0 10px; color: var(--im-muted); font-size: 12px; font-weight: 500; }
html[data-chat-skin="imessage"] .chat-phone .message-area[style*="url("] .message-date {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--im-ink);
  background: var(--im-glass);
  -webkit-backdrop-filter: var(--im-glass-blur);
  backdrop-filter: var(--im-glass-blur);
}

/* 输入栏：左边独立的玻璃 ＋ 圆钮，右边玻璃胶囊（画在 ::before 上）。
   输入栏本身不能带 backdrop-filter，否则里面 ＋ 钮的玻璃只能透到输入栏内部，透不到聊天背景。 */
html[data-chat-skin="imessage"] .chat-phone .message-composer {
  right: 12px;
  left: 12px;
  min-height: 0;
  padding: 0 6px 0 0;
  gap: 8px;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
html[data-chat-skin="imessage"] .chat-phone .message-composer::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4px;
  right: 0;
  bottom: 4px;
  left: 52px;
  border-radius: 22px;
  background: var(--im-glass);
  -webkit-backdrop-filter: var(--im-glass-blur);
  backdrop-filter: var(--im-glass-blur);
  box-shadow: var(--im-glass-edge);
}
html[data-chat-skin="imessage"] .chat-phone .message-composer .add-composer-button {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0 0 4px;
  border-radius: 50%;
  color: var(--im-ink);
  background:
    linear-gradient(currentColor, currentColor) center / 17px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 17px no-repeat,
    var(--im-glass);
  -webkit-backdrop-filter: var(--im-glass-blur);
  backdrop-filter: var(--im-glass-blur);
  box-shadow: var(--im-glass-edge);
  font-size: 0;
}
html[data-chat-skin="imessage"] .chat-phone .message-composer textarea { padding: 15px 4px 15px 8px; color: var(--im-ink); font-size: 17px; }
html[data-chat-skin="imessage"] .chat-phone .message-composer textarea::placeholder { color: var(--im-muted); }
html[data-chat-skin="imessage"] .chat-phone .message-composer .voice-button { width: 34px; color: var(--im-muted); }
html[data-chat-skin="imessage"] .chat-phone .message-composer .voice-button svg { width: 22px; height: 22px; }
html[data-chat-skin="imessage"] .chat-phone .message-composer button.send-button {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-bottom: 10px;
  color: #fff;
  background: var(--im-self);
  box-shadow: none;
  font-size: 18px;
  font-weight: 700;
}
html[data-chat-skin="imessage"] .chat-phone .message-composer:has(textarea:placeholder-shown) button.send-button { display: none; }
html[data-chat-skin="imessage"] .chat-phone .message-composer:has(textarea:not(:placeholder-shown)) .voice-button { display: none; }